Way to Implement code from another HTML/CSS file?

Question

I'm new to HTML development and was wondering if there was a way to structure your code like implementing Java methods.

For example:

<ul id = "my-nav">
     <li><a href=clips.html>Clips</a></li>
     <li><a href="moments.html">Moments</a></li>
     <li><a href="media.html">Media</a></li>
     <li><a href=contact_br.html>Contact Me</a></li>
</ul>

I will be using that as a navigation bar for all my HTML files I add.

Instead of typing and changing the navigation bar manually every time I need to make a change. Is there a way I can keep the navbar in a separate html or portion where all the others import the information from that source?

You can create header.html where you will have navigation code.. And you can include "header.html" in all other files where you want to call navigation.. — Priya jain, Jun 06 '16 at 08:01
@rhavendc I'm mostly using the HTML language and CSS. I am also using Javascript in my files but I am an extreme novice at it. — CodieneUp, Jun 06 '16 at 08:01
@priyajain Once I create and include the file how / where in my body of the other HTML's will I call the navbar code. — CodieneUp, Jun 06 '16 at 08:04

score 0 · Answer 1 · answered Jun 06 '16 at 08:06

You can see how its done here

Or you can save the files as PHP files if you want, then you can do a header.php separately with your nav element and then import it on top of all pages

For Example, your header.php file will look like the following

<ul id="my-nav">
  <li><a href="clips.html">Clips</a></li>
  <li><a href="moments.html">Moments</a></li>
  <li><a href="media.html">Media</a></li>
  <li><a href="contact_br.html">Contact Me</a></li>
</ul>

And then on your page.php file you will call an include on the container where you want to place the header as follows

<section class="no-padding it-main-content large-12 columns">    
  <?php include("parts/super-admin-aside.php"); ?>
</section>

NB: you need XAMPP to run PHP file locally

Hope that helps!

Way to Implement code from another HTML/CSS file?

1 Answers1