In this assignment, we are to create a Web page that demonstrates our knowledge of tables, images, and color as used in HTML. Again, this page may seem alittle odd, but this is a class assignment and therefore just a domonstration of various techniques. You may want to have a look at the lecture notes about tables or about Images and color or the actual assignment.
The following is a table of the standard HTML colors. You will notice that for all of these colors, coding with the hex value has the same result as coding with the color name ( At least in Netscape ). For your bookmarking pleasure, I have supplied another copy of this table, along with a couple of others, on a separate page. Also note the other page is not on the server at school, so it will exist long after the quarter is over.
| Color Name | Color Hex value | Color Sample | |
|---|---|---|---|
| Using Hex Value | Using Name | ||
| Aqua | #00FFFF | ||
| Gray | #808080 | ||
| Navy | #000080 | ||
| Silver | #C0C0C0 | ||
| Black | #000000 | ||
| Green | #008000 | ||
| Olive | #808000 | ||
| Teal | #008080 | ||
| Blue | #0000FF | ||
| Lime | #00FF00 | ||
| Purple | #800080 | ||
| Yellow | #FFFF00 | ||
| Fuchsia | #FF00FF | ||
| Maroon | #800000 | ||
| Red | #FF0000 | ||
| White | #FFFFFF | ||
It is possible to link to an external image in HTML. To demonstrate this, you can
click on this text link or click on the image to the
right to see the full size image of a nifty fractal that I generated using a program
called FRACTINT. You can go to the 'Links'
section of my home page for a link to a site where you can download your own
copy of this wonderful freeware program. ( Or, go straight from
here )
Here are pictures of Lincoln
,
a ship
,
and a typewriter
.
These images are all included within a sigle line of text.
Note that the default alignment is to the bottom of the line of text.
( not taking into account the descenders, such as 'g' or 'y' )
The purpose of this section is to see what happens when the text surrounding the
images wraps to the next line in the browser. There has to be enough text between
the images to really get a feel for the effect. This picture :
is of Abraham Lincoln, our 16th president. He was born in a log cabin
Hardin County, Kentuky on February 12, 1809 and was shot by John Wilkes Booth
in the Ford Theater in Washington, D.C. on April 14, 1865 - 5 days after General
Lee surrendered. He died the next day. This picture :
is of a ship. I don't know what ship it is or where the original picture came
from from which this photograph is taken, but it's a nice ship and I like it.
This picture :
looks like it came from a typing manual of some sort. It shows the 'home
position' of the fingers on the keyboard. All three of these pictures came from
Public Domain Images,
which is a pretty cool source for some public domain images.
Here, the pictures use an 'ALIGN' attribute of 'TOP'
,
'MIDDLE'
,
and 'BOTTOM'
.
These images are also included within a single line of text.
Note that the text will wrap to be below the lowest point of the previous line.
This last section is to show that it is possible to align the images to the
left and right margins of the page and put text between them. First the image tags
are coded, one with the 'ALIGN' attribute set to 'RIGHT' and the other set to 'LEFT'.
Then the text is entered, which will now appear between the two images.
