www.webdeveloper.com
Results 1 to 6 of 6

Thread: master template in html

  1. #1
    Join Date
    Oct 2011
    Posts
    12

    master template in html

    Is it possible without a lot of complicated coding to build a master, or global template in html? A page that holds the main links to every page so that when a link change is made, it's made globally instead of having to go into each and very html page to make the changes? Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    While this is possible to do I wouldn't say purely in HTML. The easiest method I know of doing such a thing is using some(very simple) PHP. Frankly there is only one PHP command you even need to know/use and your HTML itself wouldn't really even need any modification.

    You can create certain main template files, such as a header and footer template file containing the generic information(included stylesheets, scripts and meta data) and then build content pages that simply include those files so you no longer need to edit multiple files for them.

    So you'd have header and footer files that might look like:
    PHP Code:
    <!DOCTYPE html>
    <
    head>
        <
    title>Foo Website</title>
    <
    link href='my_stylesheet.css' rel='stylesheet' type='text/css'>
    <
    script src="my_javascript.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="styleHeader">
    Navigation links or static header information here
    </div> 
    PHP Code:
    <div class="styleFooter">
    Copyright info and footer links/references or information would go here
    </div>
    </
    body>
    </
    html
    Your content pages would look something like:
    PHP Code:
    <?php
    include("template_header.php");
    ?>

    <div class="styleContent">
    Main content specific to this page goes here
    </div>

    <?php
    include("template_footer.php");
    ?>
    The header and footer in my example are pure HTML so you could of course save them as .html instead of .php and just use that extension in the include. I just like to keep page files as .php in case I want/need to include functional php code along with the html.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Oct 2011
    Posts
    12
    Thanks for your extensive help, I'll try this and see if I can make it work!

  4. #4
    Join Date
    Oct 2011
    Posts
    12
    I tried this and it isn't working for me. Actually, all I want to include are the links. So, would my content page look something like this?

    <html>
    <head>
    <title>Foo Website</title>
    <link href='my_stylesheet.css' rel='stylesheet' type='text/css'>
    <script src="my_javascript.js" type="text/javascript"></script>
    </head>


    <body>

    <?php
    include("links.html");
    ?>

    <div id=link_content">
    links here
    </div>

    </body>
    </html>

    Also, would this be the page I'm calling to for my links on my other pages?
    Thanks!

  5. #5
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Using any of the code tags would be helpful any time you post code here.

    PHP Code:
    <!DOCTYPE html>
    <head>
    <title>Foo Website</title>
    <link href='my_stylesheet.css' rel='stylesheet' type='text/css'>
    <script src="my_javascript.js" type="text/javascript"></script>
    </head>
    <body>

    <?php
      
    include("links.html");
    ?>

    </body>
    </html>
    The code above would work just fine. You do of course need to make sure you save the file with the .php extension and that your server supports PHP in order for the php code to be executed.

    You would then just need to create a file named 'links.html' in the same directory which would contain the html for your links, such as:
    Code:
    <div id="link_content">
    <a href="index.html" class="styleNav">Home</a>
    <a href="about.html" class="styleNav">About</a>
    <a href="contact.html" class="styleNav">Contact</a>
    </div>
    Whatever you place in the 'links.html' file will be displayed on your page and treated/read as pure html. If you call the 'links.html' file from any other page you just need to make sure you refer to it properly in terms of it's relative location. For instance, any webpage not in the same folder as the 'links.html' page will need to make sure to add any necessary folder reference so the file can be found and loaded.

    Hopefully this resolves the issues you were having.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  6. #6
    Join Date
    Oct 2011
    Posts
    12
    Okay, thanks again, I'll give this a try.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles