Web Design 35S‎ > ‎

Making Your Index page

Before you make your web page, make a rough sketch on a piece of paper to show where all the various parts of the assignment will be located. Make sure I see the sketch before you begin.

Your job today is to create an index page for your website.

  1. This page will be called index.html and will be the main page of your website.
  2. This page should have a title that's more creative than "index.html." Something like "My Webpages," or "Tim's Site" might do it. Make sure you turn it into a headline.
  3. It should list all the assignments you post in a list and should provide links to them.
    • If it doesn't link to your assignments, then I can't find the assignment and then I can't mark them.
    • That means you're going to have to update this index page pretty often.
  4. It should have a pretty background color or image that still lets you read the text. The background should be something that reflects the designer somehow.
    • Look at some of the background image sites linked to on the main Web Design page.
  5. It should be updated every time you post an assignment.

To do this assignment you need to know
  • how to make lists,
  • and how to make links.
So how do you make a list?

  1. Before you start the list, add in the <ol> command for a list with numbers. For an unnumbered list with bullet points, start off with <ul>. At the end of the list finish with </ol> or slash </ul> depending on what you started with.
  2. Every item in the list should have a <li> in front of it. Ideally it should have a </li> after it as well.
  3. Easy, huh?
So how do you make a link?
  1. Well, if you want to link to someone you need an anchor, which is a and a hypertext reference which is href. So your link starts out like: <a href=>
  2. If you're linking to another page on the same site, continue with the page name like this: <a href=orangepage.html>. This is a relative URL.
    • If you're linking to a page outside your site you need the full or absolute URL<a href=http://www.orangesite.com/orangepage.html>
  3. Then type in the text you want to click on when people follow the link: <a href=orangepage.html>This is my Orange Page.
  4. Follow up by closing your anchor with a </a> like this: <a href=orangepage.html>This is my Orange Page</a>.
  5. Simple, eh?

 5+1  +1   +1  +1   +1
Created basic page with relative URLs for the links  Page has title Created links in a numbered or bulleted list  Created basic page with absolute URLs Added appropriate background color or image to make the page your own.  Added other personalization elements to make the page you own.

James Dykstra,
Sep 18, 2014, 8:12 AM