An Review to HTML

Now that you've gotten a simple Web page written, let's learn a bit more about the language. True, you will be using Dreamweaver for the second part of this class, but you still must learn enough HTML to make a simple page. There are a number of reasons

HTML Basics

Read and work through HTML Dog, a site full of web authoring tutorials. Note that these pages are constructed to allow you to print them out if you wish. This will help give you a quick introduction to the subject.

First, read through the following to get a general understanding of HTML

Then, be sure to understand the following skills and tags:

In each case, be sure to follow along with the exercises by making your own web pages.


Create a simple web page (or expand the page from last week) that introduces yourself. It should use the above tags to create a pleasing format. Content should include:

You should use paragraphs, headlines, and background color as basic organizing elements. Experiment with bold/italics, blockquotes, aligning text and line breaks to give a more distinctive look.


arrow upreturn to top

Web Site One

Laying out the Personal Site

I have provided a sample resume and hotlist for you to work with during this exercise. We will first link the files together, then upload the site to the server. If time permits, we will create a folder structure and re-link the files according to the principles of relative linking.

  1. Make a folder on your flash drive titled "yourname_website" (where yourname is your name)
  2. Place the .html file we made Monday (the Simple Web Page) in the new "yourname_website" folder
  3. Rename it index.html
  4. Download (File->Save As [choose HTML Source]) this sample resume and save it in the new "yourname_website" folder
  5. Download (File->Save As [choose HTML Source]) this sample hotlist and save it in the local "yourname_website" folder
  6. Open each file and look for the text to link. Put in the correct <a href="filename"></a> tags (I'll help a lot). Each link is in brackets; remove the brackets when you insert the linking code.
  7. Open the files in your browser and see if they work.

Perfect? Now try and create the structure for assignment one. Do this work in the local "yourname_website" folder you just created.

  1. Create the structure
  2. Drag the files into the proper locations as listed in 1.
  3. Change the code on the links to reflect the relative path names. This file gives you a list of the exact code you need.
  4. Test in a browser
  5. We will upload this to your web account next week.

Find and Bookmark 5 - 10 Interesting Web Sites

Last week we started working on searching the web. This week we will continue the work, but now with a purpose. Your personal web site needs to contain a hotlist that consists of links found on the World Wide Web that relate to topic you are interested in. During the second part of class, complete the following.

  1. Read Searching the World Wide Web
  2. Read Bookmarking
  3. Find and bookmark 5 to 10 sites you would like to include in your hotlist
  4. Save the bookmark file into your personal site folder

Start Formatting your Personal Web Resume

Either take the example resume or your own resume and start experimenting with text formatting to make the document more legible.


arrow upreturn to top


Absolute and Relative Links

When writing html code, you will eventually need to create links. One of the most important things to keep straight are how to write absolute and relative links. Both use the <a href> tag, but to the actual linking in a different way. Take the following tutorial to be clear on this important concept:


arrow upreturn to top




Hollenbeck Home

Last modified Tuesday, March 22, 2011 8:29 PM

202 Home
Current Student Work

Assignment 1 Rubric

Assignment 2 Rubric

Search SMAD 202