|
Advanced HTML by Barbara Christopher |
The Original Home Page With <BLOCKQUOTE>, <PRE>, and <HR> added With a <TABLE> frame around your picture and name With BGCOLOR, TEXT, LINK, VLINK, and ALINK added With mailto, a thumbnail link, and anchors added With BACKGROUND, and images added from
the Internet Explorer Multimedia Gallery Other ResourcesNote:
The topics in this lesson have been keyed with HTML for the World Wide Web, 2nd Ed. by Elizabeth Castro. "Textbook" refers to this book 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. The HTML code that produced the page will then open in the helper application that you have specified. At this point you can experiment with the examples. Change the code to suite, save it, and then open it in your browser to view the results.
1. The Original Home Page
This home page starts out with an image, links, and the <HTML>, <TITLE>, <HEAD>, <BODY>, <BR>, <P>, <CENTER>, and <H> tags. Now it needs a few extras !
2. With <BLOCKQUOTE>, <PRE>, and<HR> added
Textbook:
- <BLOCKQUOTE>
To indent an entire section of text, type <BLOCKQUOTE> at the beginning of the segment and </BLOCKQUOTE> at the end of the segment.- <PRE>
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.)- <HR>
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.
Text Site:
- Introduction to Text Formatting - p.31
- <BLOCKQUOTE> - p. 37
- <PRE> - p.38
- <HR> - p. 79
3. With a<TABLE> frame around your picture and name
Before framing your picture and your name, read the tag descriptions below and then look at an example of a small table.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
Textbook:
- 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>
Text Site:
- Introduction to Tables - p. 115
- <TABLE>,<TR>,<TH>,<TD> - pp. 116 - 118
4. With BGCOLOR, TEXT, LINK, VLINK,
To add color to your background and links:
and ALINK addedTo color to a table cell:
- Place your cursor just after <BODY.
- Type 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">Textbook:
- Within the <TD> tag, type BGCOLOR = "#rrggbb"
Text Site:
- BGCOLOR - p. 90
- TEXT - p. 43
- LINK, VLINK, ALINK - p. 45
5. With mailto, a thumbnail link and anchors added
To add a mailto:To use a thumbnail picture as a link to the large version of the same picture:
- Type< ADDRESS>
- Type the word: E-mail
- Type a tag looking like: <A HREF="mailto:username@cs.rice.edu" >
- Type only your e-mail address: username@cs.rice.edu
- Type <A>
- The line will look something like the following example.
E-mail :<A HREF ="mailto:bchristo@cs.rice.edu"> bchristo@cs.rice.edu </A>- Type </ADDRESS>
To use anchors to allow the user to jump from a table of contents to specific sections in your page:
- Place your cursor where the thumbnail is to appear.
- Type < A HREF =, then the URL of your image: http://www.cs.rice.edu/~username/imagename.jpg, then the >.
- Type an image tag with the same image URL: <IMG SRC="http://www.cs.rice.edu/~username/imagename.jpg">
- Inside this IMG tag, just after the last " but before the >, type in HEIGHT= h WIDTH = w where h and w are the dimensions of your thumbnail in pixels.
- Type < A >
- Your final line will now look like the following example.
< A HREF="http://www.cs.rice.edu/~bchristo/mypic.jpg >
< IMG SRC = "http://www.cs.rice.edu/~bchristo/mypic.jpg
HEIGHT = 100 WIDTH = 90>< A >Textbook:
- Place your cursor just before the words you want to jump to.
- Type <A NAME="anchor name"> where "anchor name" is the label that will identify this location.
- Type < A > just after the words you want to jump to.
- To create the link place your cursor just before a line in your table of contents.
- Type <A HREF="#anchor name"> where "anchor name" is the same identifying label in the anchor.
- Type < A > just after the line in your table of contents.
Text Site:
- mailto - p. 100
- thumbnails - p. 75
- anchors - p. 95, 96
6. With BACKGROUND, and images added from
the Internet Explorer Multimedia GalleryTextbook:
- Go to the Internet Explorer Multimedia Gallery
- Choose one of the themes, and save a background, a horizontal rule, and one of the small images.
To save one of these images :
- Put your cursor on top of the image, press the right mouse button, and when the dialog box appears, select Save this Image as...
- In the Save As dialog box save the image under some descriptive name ending in .jpg or .gif
- FTP these images to your account.
- Go back to your home page document and locate the BODY tag just underneath HTML.
- Delete the BGCOLOR command and the number attached to it.
- Type in BACKGROUND = "http://www.cs.rice.edu/~username/imagename.jpg"
- Put image links for the horizontal rule and the small image in appropriate places inside your document.
Text Site:
- BACKGROUND - p. 97
7. Other Resources :
- The book, HTML FOR THE WORLD WIDE WEB by Elizabeth Castro, was invaluable in developing this presentation. The html examples used in this book can be found at the following URL. http://www.peachpit.com/peachpit/features/htmlvqs/htmlvqs.html
- Welcome to the HTML Station
- Internet Explorer Multimedia Gallery
- Microsoft SiteBuilder Network Workshop - Image Gallery
- Icon Browser
- The Background Sampler
- IconBAZAAR
- The WDVL: Images_and_Icons