Solved

HTML5 referencing a div tag in multiple pages

Posted on 2016-07-27
7
42 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 82

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 82

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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

743 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now