add links to all pages of a website

Question

i am trying to create a simple webpage for our team. So far, I have created 3 links in the home page(referred as: Page1), clicking on each link in Page1 will take me to a new pages(Page2, Page3 and Page4 ). Page2, Page3 and Page4 will contain the daily team status reports which will changes daily but their file names will remain the same. Ill manually delete the old ones and put the new ones daily. Only Page1 will remain constant which is basically for navigating to the above 3 pages alone.

Now, in each of Page2, Page3 and Page4, Im trying to display the 3 links(links to Page2, 3 and 4) at the top of the page. Can this be done without making any changes to Page2, Page3 and Page 4(as this would mean I have to make changes daily)? Can this be done by adding some piece of code to Page1 alone

im a complete newbee in html. can u pls be a bit more simpler.. — God_Father, May 31 '14 at 17:37
Possible duplicate of http://stackoverflow.com/questions/22257476/can-i-use-variables-in-html/22257587#22257587 — Mike Koch, May 31 '14 at 20:05
You could google server side includes and soon you'll know about them. — Popnoodles, May 31 '14 at 22:40

score 2 · Accepted Answer · answered May 31 '14 at 20:02

If you really want to have the HTML for your links in just one place, I would recommend to dig in a server-side programming language.

Let´s say you have four different (static, no server-side programming) HTML files, like page1.html for your home page, page2.html, page3.html and page4.html. So, because the file names remain constant you could place the same HTML markup for your links in all four HTML files. Now you should use CSS to style the links the way you like. This CSS goes into another file, `styles.css' , for example.

Example HTML for page1.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page 1</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- this is the reference to your css -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Page 1</h1>

<ul class="navigation">
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
    <li><a href="page4.html">Page 4</a></li>
</ul>

</body>
</html>

Example HTML for page2.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page 2</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- this is the reference to your css -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Page 2</h1>

<ul class="navigation">
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page3.html">Page 3</a></li>
    <li><a href="page4.html">Page 4</a></li>
</ul>

<!-- 
here comes the content you will change daily
-->

</body>
</html>

Example CSS for styles.css

.navigation {
    padding-left: 0;
    list-style: none;
    margin-left: -5px;
}

.navigation > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

By the way, index.html would be a better name for your home page, so you can reach the file with a URL like http://www.yourDomain.com and don´t have to place the file name in the URL like http://www.yourDomain.com/page1.html.

Now you have the same HTML markup for your links in your four HTML files. That means any time you have to change the HTML of your links, you have to do the same changes in all HTML files. But you have the code which is responsible for the layout in just one place.

Because you just want to change the content of the three pages daily, this approach seems reasonable to me.

add links to all pages of a website

1 Answers1