Develop Personal Home Site

Remember, this assignment has a strict set of required elements.

Once the site is working, you need to create:

  1. A compelling home page
  2. A list of at least 10 interested web links fully annotated and grouped in themes
  3. A personal story page or resume, complete with pictures and links


arrow upreturn to top

Learning Graphic Formats and Placement

We will learn about graphic creation later in the semester. For now, there are a couple of things to know about pictures and Web sites; standard graphic formats and placement of images


Graphic files must be compressed to make them small enough to be practical on the Web. This is so important that browsers will not display uncompressed graphics. Currently there are two standard formats for graphics compression on the Web - gif and jpeg*.

gif is used for simple graphics such as logos and solid drawings. It only allows the use of 256 colors and is best for smaller, uncomplicated images. Files use the .gif extension.

jpeg is used for more complex images such as photographs and larger files. It allows the full color palate. Files use the .jpg extension.

All graphics files we use will be one of these two formats. What's the difference?

Placement of Images

We used to use the <p> tag to align images. For instance, code might have looked like this:


You also had the option of getting a sort of text wrapping by using the align attribute in the img tag. For instance:

garlicA graphics that has text flowing to the left.

Note that paragraphs would continue to appear until the bottom of the graphics or you used <br clear="left">
Which puts the text here.

This is just a quick idea about images if you want to start working with them. But be aware that all placement is now handled by CSS, and we'll get to that when we explore the box model.

*A third format called png has been developed to replace both of these compression schemes, but full acceptance has been slow. For now we will stick to gif and jpeg. arrow up

Graphics in Your Site

Lets put some graphics in our home page. We'll start with the same graphic to follow the workflow for taking a Photoshop file to the web. Then you will be free to place your own pictures there.

Un-compress it, and we will then flatten, export, save in our directory, link and synchronize it.



arrow upreturn to top


Expanding on HTML

There are some more esoteric HTML tags to understand in order to make you site findable, more flexible for CSS and more interesting. They include:


arrow upreturn to top



Lab Work



Hollenbeck Home

Last modified Monday, March 28, 2011 11:07 AM

202 Home
Current Student Work

Assignment 1 Rubric

Assignment 2 Rubric

Search SMAD 202