Class on 9.12.13

Class on 9.12.13

Today we are going to continue on from what we did on Tuesday. We will get into how to write lists and also how to add links to a page. Combinging lists and links we will make a navigation element that we will use to link a few pages together.

Marking up a Page

Instead of starting with nothing today we are going to start with a lists.txt file that has some content. We will convert this to HTML. As a kind of review from last class we’ll start with you adding the elements to make the page an HTML page, and saving it as lists.html. Here’s a the basic sequence:

  1. convert page to .html including adding html,head,body elements
  2. add markup for the content we know h1, p etc
  3. add markup for the lists.
  4. add markup for the links
  5. add navigation
  6. test things out to see if they work.

If you did the reading and can get started on the lists go ahead. Since we’ll be doing a lot of markup in class you will be working at different speeds and can go ahead or slow down.

Here is the list.txt file we will use

lists.txt

You should have with you the files we did from last class. We will use those as other pages when we get to the navigation part of the class.

Navigation

Once we have marked up lists.txt with the lists and links we will add in navigation. The standard on the web is to put your navigation into list items. Here is an example with links to Home, About Us and Contact

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</nav>

Homework

Reading

Read Chapters 3, 4 and 5 in the book. 3 and 4 are on lists and we have gone over that in class this week. Chapter 5 is on images and we will cover those next week

Video

Watch the HTML Fundamentals part 3 book. This covers everything we did this week plus it adds in information about HTML5 elements we have not covered yet and some information about images. It’s done with me writing a lot of HTML on screen so you may want to be at your computer and have an editor at hand so you can follow along.

Quiz

There may be a quiz next week on the video and reading to check that people are doing it.

Assignment

Complete Assignment 2. Details here on the blog and on the assignemnt in Blackboard

Leave a Reply