What we'll be learning:
Basic Home Page
How to work with <BLOCKQUOTE>, <PRE>, <HR>
and ALIGN IMAGES
How to add a <TABLE> frame around your picture and
How to work with BGCOLOR, TEXT, LINK, VLINK, and
The topics in this lesson have been keyed with HTML
4 For the World Wide Web by Elizabeth Castro. "Textbook"
refers to the book we're using and "Text Site" refers to on-line
examples from the book.
To view the actual HTML coding of these examples and the ones on
this page, select "Document Source" or "View Source" from your browser's
This home page starts out with an image, links, and the
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
(this tag is critical so browsers can recognize
"old" code v.s. newer code....)
<TITLE> </TITLE> (this is
what shows in the top Browser bar....)
[<P ALIGN ="CENTER"> </P>],
(the newest version of HTML recommends this format)
<UL> or <OL>
not L (one)! I as in informal)
Now it needs a few extras !
Back to Top
To indent an entire section of text:
Type <BLOCKQUOTE> at the beginning of the segment and </BLOCKQUOTE>
the end of the segment.
To arrange text that needs unusual spacing (for
example, poetry or formulas):
Type<PRE> before the text and </PRE> at the end of
the text. <PRE> (it stands for preformated) uses a monospaced
font (like Courier.)
To draw a horizontal rule across the screen:
To move a graphic to the right or the left of the screeen
while the text flows beside it:
Type <HR followed by any of these descriptors, followed by
SIZE = n where n is the rule's height in pixels,
WIDTH = w where w is a number and a % sign that show the
width as a percentage of the width of the document,
ALIGN = left, right, or center to position the rule horizontally,
NOSHADE which will take the default shading that an HR tag will
Type ALIGN=right or ALIGN=left inside the image tag.
Your image tag should look something like this example:
<IMG SRC="image.gif" ALIGN=right>
Before framing your picture and your name, read the tag
descriptions below and then look at an example
of a small table.
Introduction to Text Formatting - p.43
<BLOCKQUOTE> - p. 104
<PRE> - p.53
<HR> - p. 90
Aligning an image with text - p. 88
Back to Top
To put a table frame around your image and name:
<TABLE BORDER = n> begins the table with it's framework
n pixels wide.
<TR> and </TR> begin and end a row (thus the R) in the table.
<TH> and</TH> begin and end a single heading (thus the H)
in the row
<TD and</TD> begin and end a single piece of data (thus the
D) in the row
</TABLE> ends the table
Place your cursor to the left of the image tag.
Type <TABLE BORDER = n> where n is the width of the frame in
Type <TR> and then <TD>
Place your cursor to the right of the image tag.
Type your name
To add color to your background and links is actually
Introduction to Tables - p. 133
<TABLE> - pp. 133 - 155
Just follow these steps:
Place your cursor just after Type BGCOLOR= "#rrggbb" where, rrggbb
is the hexadecimal representation of the desired color.
Type TEXT="#rrggbb" to change the color of your main text.
Type LINK="#rrggbb" to change the color of your original unvisited
Type VLINK="#rrggbb" to change the color of a hyperlink that has
been visited hyperlinks.
Type ALINK="#rrggbb" to change the temporary color a hyperlink turns
when it is clicked on.
Close the tag with >
Your final tag will look something like this:
<BODY BGCOLOR="#A9CFC0" TEXT="#675780" LINK="#40E000 VLINK="#25A0B2"
Helpful Hints: You can refer to the last page of your textbook
for colors with their codes or check out the online version Colors.
Back to Thursday's
BGCOLOR - p. 102
TEXT - p. 49
LINK, VLINK, ALINK - p. 123
This page was last edited June 21, 2000
updated sb 9-09-2k 2.29