1

I have a website which has a navbar and a footer. I want every page of my website to contain this navbar and footer. I have put this HTML code into an HTML file where I have effectively created a website template.

I want this template.html file to be imported so that changes can be made simply and easily if needed. I have tried doing this like so:

<!DOCTYPE html>
<html>
<link rel="import" href="template.html">

<!-- PAGE CONTENT -->

</html>

If implemented correctly, the end result would should look like so:

<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<div class="navbar"></div>
<div class="footer"></div>

<!-- PAGE CONTENT -->

</html>

What would be the proper way of doing this? Thanks.

Please note: Content in HTML code has been edited down significantly to make it easier to read

user3677286
  • 125
  • 2
  • 9
  • 2
    Use Ajax or a server-side language. Welcome to your first day of programming! Reading the intro documents is VERY helpful. –  May 26 '14 at 23:37
  • So it is not possible to import via the method i suggested using with rel="import" attribute? – user3677286 May 26 '14 at 23:41
  • Have you done any research on HTML's LINK tag? Coding isn't something where you make up your own commands and things learn to obey over time. ;) –  May 26 '14 at 23:42
  • Obviously i do not literally think i can create my own syntax. I only suggested the idea to help explain my question. – user3677286 May 26 '14 at 23:45
  • Which I answered, but you did not understand because you have not spent enough time studying. If you go to college and do not read the books, then ask a question of your professor, how will you be treated? Shall we not study the core first? –  May 26 '14 at 23:48
  • I've done research Jeremy, that is why i've come to Stackoverflow. I couldn't find much on what i am specifically trying to do, however I did find an article which suggested the idea of using rel="import" attribute but I couldn't get it to work, another reason why I came to Stackoverflow. – user3677286 May 26 '14 at 23:52
  • Fair enough. Checking something and will post. –  May 26 '14 at 23:56

1 Answers1

1

According to the HTML 5 specification, there is not a rel="import" attribute value for link tags.

You have 3 options I know of:

  1. Server Side Includes (SSI)

  2. PHP/ASP/Perl/... name it server-side languages

  3. Ajax to load stuff using Javascript from the server.

Depending on your server, one or more of those will work for you. Bad advice from some online resource won't, of course, so good thing you came here to get that refuted.

Just type in any of the terms above and you'll find a wealth of resources.