SMAD 202 - Day 05

Tasks

Develop Personal Home Site (Assignment 1)
Learning Graphic Formats and Placement
Expanding on HTML
Assignments

Develop Personal Home Site

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

Use the site structure assigned to place the three required pages.
Complete all of the formatting for your three pages.
Link each page to the others using relative links.
You should now have your hotlist, resume and home page (index.html) complete to first revision phase.
To extend the personal pages, be sure in incorporate effective text formatting.
Here is my example of a simple personal web site (This is a very old site). It would easily get a "B".

Once the site is working, you need to create:

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

return 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

Formats

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?

A comparison of images with GIF and various JPEG compressions.

Placement of Images

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

<p align="center"><img src="../../../graphics/garlic01.gif"></p> gives this

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

<img src="../../../graphics/garlic01.gif" align="left"> in a paragraph gives:

garlic A 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.

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.