More
HTML
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
name
-
How to work with BGCOLOR, TEXT, LINK, VLINK, and
ALINK
Note:
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
View menu.
Let's
Get Started!
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....)
<HTML>,
<HEAD>
<TITLE> </TITLE> (this is
what shows in the top Browser bar....)
</HEAD>
<BODY>,
<BR>,
<P>,
[<P ALIGN ="CENTER"> </P>],
(the newest version of HTML recommends this format)
<Hn>
<UL> or <OL>
<LI> (this
not L (one)! I as in informal)
</BODY>
</HTML>
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>
at
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:
-
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
always give.
To move a graphic to the right or the left of the screeen
while the text flows beside it:
-
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>
Textbook:
-
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
Before framing your picture and your name, read the tag
descriptions below and then look at an example
of a small table.
-
<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
To put a table frame around your image and name:
-
Place your cursor to the left of the image tag.
-
Type <TABLE BORDER = n> where n is the width of the frame in
pixels
-
Type <TR> and then <TD>
-
Place your cursor to the right of the image tag.
-
Type </TD>
-
Type <TD>
-
Type your name
-
Type</TD>, </TR>
-
Type</TABLE>
Textbook:
-
Introduction to Tables - p. 133
-
<TABLE> - pp. 133 - 155
To add color to your background and links is actually
very simple.
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
hyperlinks.
-
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"
ALINK=#9E0E8E">>
Helpful Hints: You can refer to the last page of your textbook
for colors with their codes or check out the online version Colors.
Textbook:
-
BGCOLOR - p. 102
-
TEXT - p. 49
-
LINK, VLINK, ALINK - p. 123
Back to Thursday's
Schedule
This page was last edited June 21, 2000
URL: http://teachertech.rice.edu/Materials/GT2000/Mac/day04/intermed.html
updated sb 9-09-2k 2.29
