Introducing layout

The steps for this exercise:

  1. We will save a stylesheet in the scripts directory.
  2. We will create a new HTML5 document.
  3. We will break the page content into four sections and link to your stylesheet.
  4. Load /yourNetID/hcde532/working/session-04/index.html in your browser.

 

 

1. Create a new stylesheet

Make sure you have a scripts folder on the web server! Need a refresher? See Setting up your server space.

  1. Open a new document in your HTML editor.
  2. Paste the code below in that page.
  3. Save the file as /hcde532/scripts/session-04.css on your local drive
  4. Upload it to the web server scripts folder (/yournetID/hcd532/scripts/).
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;
}

 

2. Create a new HTML5 document and link to your stylesheet.

  • Open your template HTML5 file. If you do not have easy access to your template HTML5 file:
    • Open a new document in your HTML editor.
    • Paste the code below in that page.
    • Save it as template.html in the /hcde532/ directory on your local drive.
  • Save a copy as /hcde532/working/session-04/index.html (the mirror of your web server which is on your local drive). It’s this file we will work with tonight.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title is required field</title>
    <meta charset="utf-8" />  
</head>
<body>
<!-- content goes here -->
</body>
</html>

Paste this link to the stylesheet inside the head element of the document. It should appear below the character set. Change this code so that it references your stylesheet.

<link rel="stylesheet" href="/yourNetID/hcde532/scripts/session-04.css">

 

3. Add this content to the BODY section of the HTML file, 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>©2021 Your Name Here. All rights reserved.</p>
</footer>
<!-- */End Footer -->

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

4. Load the file in your browser.

Upload the index.html file to the web server in the /hcde532/ working/session-04/ directory.

It should look like this
Remember > students not faculty in the URL
http://faculty.washington.edu/kegill/hcde532/working/session-04/index.html