Add HTML code

For the sake of instruction, each student was supplied a pre-established wireframe. Students must use the pre-established names for the Selectors (#name,.name, name) provided to avoid confusion.

  1. Open the index.html file. View the Source Code, you will see the <head> section and the <body> section. Leave the code alone in the <head> section.
  2. Add this code within the <body> tag only.

    Remember that the code needs to be after the opening <body> tag and before the </body> tag.

    3. 


<body>
<!--All code below the opening BODY will be visible-->

<div id="frame">

<header>

<div id="header_logo">
<!--Closing Tag for header_logo--></div>

<nav>
<!--This code references the menu icon that is visible for mobile views only-->
<a href="#" id="menu-icon"></a>

<!--The Navigation is created using an Unordered List-->
<ul>
<!--This is where the Navigation Button #1 goes.-->
<li> <a href="gallery_1.html" title="Gallery Page #1" target="_self">Page Name #1 Link</a></li>
	
<!--This is where the Navigation Button #2 goes.-->
<li> <a href="gallery_2.html" title="Gallery Page #2" target="_self">Page Name #2 Link</a></li>
	
<!--This is where the Navigation Button #3 goes.-->
<li> <a href="gallery_3.html" title="Gallery Page #3" target="_self">Page Name #3 Link</a></li>

</ul>
</nav>

<!--Closing Tag for header--></header>

<div id="intro">
<!--Closing Tag for intro--></div>

<div id="stage">

<div id="col_1">
<!--Closing Tag for col_1--></div>

<div id="col_2">
<!--Closing Tag for col_2--></div>

<div id="col_3">
<!--Closing Tag for col_3--></div>

<!--Closing Tag for stage--></div>

<div id="footer">
<!--Closing Tag for footer--></div>

<!--Closing Tag for Frame--></div>
</body>
  3. Save the file. The page will not appear like anything in the browser yet.
    4. Notice how some of the </div> tags are embedded within each other—than means they are INSIDE the other div tag and must be listed within the opening an closing tags.