Introducing layout

The steps for this exercise:

  1. We will save our stylesheet in the scripts directory.
  2. We will create a new HTML5 document.
  3. We will break the page content into four sections.
  4. We’ll then add a stylesheet.
  5. Load class-4-demo.html in your browser.

 

 

1. Make sure you have a scripts folder on the web server

Need a refresher? See session 01 > Setting up your server space

2. Create a new HTML5 document.

Use this code as a template. Save it as template.html; then save a copy as class-4-demo.html. It’s this later file we will work with tonight.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />  
</head>
<body>

</body>
</html>

 

3. Add this content to the BODY section of demo-class-4.html, then save.

<!-- begin content container -->
<div id="content">

<!-- begin HTML5 header -->
<header>
<h1>My First HTML5 Web Page!</h1>
</header>
<!-- */End Header -->


<!-- begin HTML5 navigation -->
<nav>
<ul class="navigation-items">
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- */End Navigation -->


<section>
<h2>Header Level 2</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h3>Header Level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
</blockquote>
<h3>Header Level 3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</section>


<!-- Begin Footer -->
<footer>
<p>©2018 Your Name Here. All rights reserved.</p>
</footer>
<!-- */End Footer -->

</div>
<!-- */End Content Container -->

4. Add a stylesheet and use it to style your page.

Next, open a new document; paste the code below; save the file as class-4.css and upload it to the scripts folder.

body {
    margin-left: 50px;
    font-family: sans serif;
    font-size: 1em;
    }

#content {
    width: 940px;
    margin: 0 auto;
    padding: 0 20px;
    border: 1px solid black;
}

head {
    margin: 0;
    padding: 0 20px;
    border-bottom: 1px solid black;
}


nav {
    margin: 10%;
    padding: 10px;
    margin-top: 0px;
    float: right;
    width: 15%;
    font-size: 1.2em;
    border: 1px solid #000;
}


section {
    width: 65%;
    padding: 0 20px;
    }
    

footer {
    margin: 0;
    padding: 20px;
    background-color: #000;
    color: #fff;
}

Now add the stylesheet just above the closing head element of the document (per the example).

<link rel="stylesheet" href="/yourNetID/hcde532/scripts/class-4.css">

</head>

 

5. Upload class-4-demo.html to the web server in the hcde532 working directory.

6. Load class-4-demo.html in your browser.

It should look like this:
http://faculty.washington.edu/kegill/hcde532/working/class-4-demo.html