Solved

HTML5 referencing a div tag in multiple pages

Posted on 2016-07-27
7
49 Views
Last Modified: 2016-08-16
I have numerous pages using the same menu but I'm so rusty on web design that it seemed easier  to just include the menu code in each page. Before I embark on re-learning how to do it the "right" way, I seem to remember that there's a way to call a routine on multiple pages. If that is true, how do I do it?
<div id="navbar">
<p>&nbsp;</p>
<ul class="mlddm" params="3,-3,500,slide,150,h,1">
    <li><a href="http://dijitalrealm.com/JCMusic/Jukebox2.html">home</a></li>
    <li><a href="NoOneButYou.html">No One But You</a>
    <li><a href="SweetLittleRomanticKisses.html">Sweet Little Romantic Kisses</a></li>
    <li><a href="ManOfMyWords.html">A Man of My Words</a></li>
    <li><a href="IDontCryAnymore.html">I Don't Cry Anymore</a></li>
</ul>
</div>

Open in new window

You can see what I mean here:  http://dijitalrealm.com/JCMusic/Jukebox2.html
I expect to be adding and replacing songs on a regular basis so it would be nice not to have to add it manually to 4 or 5 or 10 pages.

Thanks,
John
0
Comment
Question by:gabrielPennyback
7 Comments
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 125 total points
ID: 41732456
HTML can not do that.  You need a programming language like PHP or ASP to do that.  One other alternative is SSI includes which usually uses the 'shtml' suffix.

Most of us would put that in a database so it could be easily changed and use a programming language to fetch the listings and display them.
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41733603
How complicated would that be? :- ) I was never very good at that sort of thing the last time I tried, about 6-7 years ago. Would it require a complete re-write from top to bottom?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 41733634
Since you don't know how to do it right now, it would be a noticeable learning curve for you.
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 4

Accepted Solution

by:
Branislav Borojevic earned 250 total points
ID: 41734047
Looking at the point that you would need to get a big refresh on the programming side, SSI might be the way to go for your case.

Requirements for making SSI work on your website

Your webhost must support (i.e. allow you to use) SSI. Most of the webhosts do.

Your server must be able to recognize which documents need to be processed, i.e. in which documents (web pages) it needs to look for SSI commands and process the includes before sending the pages to your visitor's browser.

This is usually accomplished by giving those web pages a special filename extension: .shtml or .shtm.

Now if you already have an established website and your pages have .html or .htm as filename extensions, you certainly don't want to rename all of your webpages and lose your search engine rankings. In this case, you can use the .htaccess file to enable SSI on .html and .htm pages, too. Simply add the following line to your .htaccess file in your website┬┤s root directory.

AddHandler server-parsed .html .htm

Open in new window


Here is a simple example that might explain on how to handle SSI include in an plain-HTML file:

<html>
<head>
<title>SSI Example</title>
</head>
<body>
<table width="97%" cellpadding="5" cellspacing="0" border="0">
<tr>
<td width="170" valign="top">
<!--#include virtual="menu.html" -->
</td>
</tr>
<tr>
<td>
.
.
.
</td>
</tr>
</table>
</body>
<html>

Open in new window


The first include inserts the content of the file menu.html whose source code you can see below. Anytime you want to add a new link to the menu of all web pages, you only need to update this file.

<a href="#">Home</a><br>
<a href="#">Site Blog</a><br>
<a href="#">Article Directory</a><br>
<a href="#">Tutorials</a><br>
<a href="#">Contact Us</a><br>

Open in new window


I hope this helps in your endeavor!

Sincerely,

Branislav
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41741609
Hi Branislav, this might be the best way to go for me at the moment. My site supports SSI, but I'm on a Windows server so I have a web.config file not an .htaccess file. Will your one line of code work in my web.config file? And if so should it be within the configuration tabs or outside them (as I have written it)?
<?xml version="1.0"?>
<configuration>
	<appSettings/>
	<connectionStrings>
		<add name="MyConnectionString" connectionString="Data Source=DJRTest1johnc.db.11167833.hostedresource.com;Initial Catalog=DJRTest1;User ID=DJRTest1johnc;Password=Luckyme7!;"/>
	</connectionStrings>
	<system.web>
		<compilation debug="true">
		</compilation>
		<authentication mode="Windows"/>		
		<customErrors mode="Off"/>
	</system.web>
</configuration>
AddHandler server-parsed .html .htm	
<!-- Web.Config Configuration File -->

Open in new window

Next, here's what I have in my "menu.html" file, which is modeled after yours. My question is, what line or lines of code do I put in my html files to include this menu in them?
<link rel="stylesheet" type="text/css" media="all" href="css/navbar.css" >
    <script type="text/javascript" src="js/navbar.js"></script>
    <div class="menubar">	
    <div id="navbar">
    <ul class="mlddm" params="3,-3,500,slide,150,h,1">
        <li><a href="http://dijitalrealm.com/JCMusic/Jukebox2.html">home</a></li>
        <li><a href="NoOneButYou.html">No One But You</a>
        <li><a href="SweetLittleRomanticKisses.html">Sweet Little Romantic Kisses</a></li>
        <li><a href="ManOfMyWords.html">A Man of My Words</a></li>
        <li><a href="WhenGodWasYoung.html">When God Was Young</a></li>
        <li><a href="GrandDesign.html">The Grand Design</a></li>
        <li><a href="VisionOfLoveliness.html">Vision of Loveliness</a></li>
        <li><a href="DistantSeas.html">Distant Seas</a></li>   
    </ul>
    </div>		<!--end navbar-->
    </div>    	<!--end menubar-->

Open in new window

I'm assuming that my SSI instruction should replace everything between <body>   and   <div class="box1"> in the code snippet below. Would that be correct? And if so what should that code be?
<body>
    <div class="menubar">	
    <div id="navbar">
    <ul class="mlddm" params="3,-3,500,slide,150,h,1">
        <li><a href="http://dijitalrealm.com/JCMusic/Jukebox2.html">home</a></li>
        <li><a href="NoOneButYou.html">No One But You</a>
        <li><a href="SweetLittleRomanticKisses.html">Sweet Little Romantic Kisses</a></li>
        <li><a href="ManOfMyWords.html">A Man of My Words</a></li>
        <li><a href="WhenGodWasYoung.html">When God Was Young</a></li>
        <li><a href="GrandDesign.html">The Grand Design</a></li>
        <li><a href="VisionOfLoveliness.html">Vision of Loveliness</a></li>
        <li><a href="DistantSeas.html">Distant Seas</a></li>   
    </ul>
    </div>		<!--end navbar-->
    </div>    	<!--end menubar-->
<div class="box1"> 

Open in new window

I hope I haven't made this too confusing!

Thanks,
John
0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 125 total points
ID: 41742353
Apache doesn't use XML for its config files but IIS does. The two different servers use different syntax for their configuration.

This question gives part of the answer: https://www.experts-exchange.com/questions/27783399/Server-Side-Includes-Using-HTML-extension.html

John, do you realize you've posted the username and password for your database? (I'll leave it out from the code below.)

Give this a try: (It might need tweaking for the version of IIS you're using though.)
<?xml version="1.0"?>
<configuration>
	<appSettings/>
	<connectionStrings>
		<add name="MyConnectionString" connectionString="*** please fill this in with the old value ***"/>
	</connectionStrings>
	<system.web>
		<compilation debug="true">
		</compilation>
		<authentication mode="Windows"/>		
		<customErrors mode="Off"/>
		<serverSideInclude ssiExecDisable="true" />
		<handlers>
			<add name="SSINC-html" path="*.html" verb="*" modules="ServerSideIncludeModule" resourceType="File" />
			<add name="SSINC-html" path="*.htm" verb="*" modules="ServerSideIncludeModule" resourceType="File" />
		</handlers>
	</system.web>
</configuration>
<!-- Web.Config Configuration File -->

Open in new window

0
 
LVL 1

Author Closing Comment

by:gabrielPennyback
ID: 41758532
Thank you all for your input, sorry I've been away from this question so long. I think I'll need to revisit this at a later date.

~ John
0

Featured Post

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question