My Community

Tutorial 6 Adding A Header, Site Nav, Main, Content, and Footer In HTML

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
In lesson 5 of CSS I introduced the Header, Site Nav, Main, Content, and Footer tools.

Now I'll show you the CSS Code for each Element.

#header { text-align: center;
   background-color: black; color: yellow; }
   
#sitenav ol { padding: 0; margin: 0;
   display: inline; }
   
#sitenav li { display: inline; padding-left: 1em;
   margin-left: 1em; border-left: 1px
      solid black; }
     
#sitenav li:first-child
   { padding-left: 0; border-left: none;
      margin-left: 0; }
   
#main { padding: 0 6em 6em 6em;
   position: relative;
   background-color: brown; }
   
#content { background-color: white; }

#footer {background-color: orange; }

While having the CSS code helps you still need to know how to insert these features to a website in HTML before that shows up.  I will show you how to do that in lesson 6 of HTML today.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Adding A Header, Site Nav, Main, Content, and Footer In HTML
« Reply #1 on: November 03, 2014, 12:44:38 PM »
You Webpage Should look like this so far.

<html>
<head>
<style type="text/css">

.outer { border: 2px solid black;
   background-color: red;
   padding: 40px; }
.inner { border: 2px dotted black;
   background-color: black;
   padding: 15px; }

   
#header { text-align: center;
   background-color: black; color: red; }
   
#sitenav ol { padding: 0; margin: 0;
   display: inline; }
   
#sitenav li { display: inline; padding-left: 1em;
   margin-left: 1em; border-left: 1px
      solid black; }
      
#sitenav li:first-child
   { padding-left: 0; border-left: none;
      margin-left: 0; }
   
#main { padding: 0 6em 6em 6em;
   position: relative;
   background-color: green; }
   
#content { background-color: white; }

#footer {background-color: orange; }
</style>
</head>

That is the head of your webpage.  The head is going to be the CSS of the Header, Site Nav, Main, Content, and the footer.  The HTML elements that I teach you today will go in the body.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Adding A Header, Site Nav, Main, Content, and Footer In HTML
« Reply #2 on: November 03, 2014, 12:50:13 PM »
<body>
<div id="header">
<div class="outer" align="center">
<div class="inner" align="center">
</div>
<div id="sitenav">
</div><!-- sitenav -->
</div>


</div><!-- header -->
<div id="main">
<div id="content">
</div>
</div><!-- content -->


<div id="footer">
</div><!-- footer -->


</div><!-- main -->
</body>

</html>
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Adding A Header, Site Nav, Main, Content, and Footer In HTML
« Reply #3 on: November 03, 2014, 12:51:21 PM »
So your webpage should look like this when you combine the elements of CSS and HTML with th Header, Site Nav, Main, Content, and Footer.

<html>
<head>
<style type="text/css">

.outer { border: 2px solid black;
   background-color: red;
   padding: 40px; }
.inner { border: 2px dotted black;
   background-color: black;
   padding: 15px; }

   
#header { text-align: center;
   background-color: black; color: red; }
   
#sitenav ol { padding: 0; margin: 0;
   display: inline; }
   
#sitenav li { display: inline; padding-left: 1em;
   margin-left: 1em; border-left: 1px
      solid black; }
     
#sitenav li:first-child
   { padding-left: 0; border-left: none;
      margin-left: 0; }
   
#main { padding: 0 6em 6em 6em;
   position: relative;
   background-color: green; }
   
#content { background-color: white; }

#footer {background-color: orange; }
</style>
</head>
<body>
<div id="header">
<div class="outer" align="center">
<div class="inner" align="center">
</div>
<div id="sitenav">
</div><!-- sitenav -->
</div>


</div><!-- header -->
<div id="main">
<div id="content">
</div>
</div><!-- content -->


<div id="footer">
</div><!-- footer -->


</div><!-- main -->
</body>

</html>
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Adding A Header, Site Nav, Main, Content, and Footer In HTML
« Reply #4 on: November 03, 2014, 12:59:58 PM »
Now that you know this.  You are set to design you own webpage.  You can also take out the main feature and use the background image in tutorial 5 as your main page with the white content page still showing up.  Tutorial 7 will cover how to design slideshows in HTML, CSS, and Javascript.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.