HTML Basic Tags and Samples
| <html></html> |
Opening and closing of a "HTML" document
|
| <head></head> |
Heading goes directly below HTML tag and contains title
|
| <title></title> |
Title is on the top of the application window (limit 69 charachters)
|
| <body background></body> |
Tiles a gif or jpeg image file to create a patterned color
|
| <body bgcolor></body> |
Creates a colored background based on hexcidecimal #
|
| <body></body> |
Content on the page goes in the "body"
|
| <b></b> |
Bold text
|
| <i><i> |
Italic text
|
| <dl></dl> |
Definition List
|
| <dt></dt> |
Definition Term
|
| <dd> </dd> |
Definition Defined
|
| <ol> </ol> |
Ordered List (numbered)
|
| <ul> </ul> |
Unordered List (bulleted)
|
| <li> |
Used on each line of a ordered or unordered list
|
| <table></table> |
Creates a data table for text or images
|
| <tr></tr> |
Table Row in a table
|
| <td></td> |
Table Data in a table row
|
| <center></center> |
centers whatever is between the tags images or text
|
| <blink></blink> |
flashes text on and off (use rarely for emphasis)
|
| <hr> |
Draws a sectional line across the screen
|
| <br> |
Creates a line break
|
| <p> |
Creates a single blank line between text
|
| <font size=#></font> |
Change the relative font size=1-6 and + or -# to create more range (size=+1)
|
| <img src> |
The tag used to invoke an image
|
| <alt> |
title of image for text-only web browsers or images off
|
| <a href=URL>Clickable text</a> |
Hyperlink tag, replace URL with http://address
|
| <align=value> |
Part of a tag that can align center, top, bottom, left, & right.
|
| <pre></pre> |
Uses a typewriter font with spacing as pre-set. (not attractive)
|
EXAMPLES
Heading Samples
An H1 Heading |
<h1> An H1 Heading</h1> |
An H2 Heading |
<h2> An H2 Heading</h2> |
An H3 Heading |
<h3> An H3 Heading</h3> |
An H4 Heading |
<h4> An H4 Heading</h4> |
An H5 Heading |
<h5> An H5 Heading</h5> |
An H6 Heading |
<h6> An H6 Heading</h6> |
Formatting and Spacing Samples
Character text formatting
Bold text sample
Strong text sample
Italics text sample
Emphasized text sample
Typewriter text font sample
This is a sample citation. -G. Walsh
This is a sample blockquote. -M. Washington
Spacing and Section Lines
Paragraphs
This is paragraph 1 with the paragraph tags in that split the paragraphs up.
This is paragraph 2
Line breaks
This is a sample of lines with line breaks at the end of each line.
Here is the second line with a line break.
Preformatting
spacing is possible with text inbetween PRE tags
Centering
Centering is possible in certain browsers
Horizontal Rules
You can create a sectional horizontal rule of varying lengths and widths with
the HR tag. Using hr size=? width=?% align=center, left or right.--replace the
? with numbers. Noshade makes a solid black line.
Lists
Ordered List
- .... a numbered list; each item in list
- ..... must begin with
- line tag
Unordered List
- .... a bulletted list; each item in list
- ..... must begin with
- line tag
Menu List Definition List Options
- DL
- sets up the definition list
- DT
- goes in front of the term
- DD
- goes in front of the definition phrase
OR Definition Compact List
- DL Compact
- sets up the compact definition list
- DT
- goes in front of the term
- DD
- goes in front of the definition phrase
Making Hyperlinks
Hyperlinking to Internet URLs
1.) Clickable text to an Internet URL address using A HREF with a URL
i.e. RIT Online
2.) Clickable text to connect to an ftp archive on the Internet
i.e. NYSERNet ftp archive
4.) Clickable text to connect to a telnet site on the Internet
i.e. Carl Uncover
Hyperlink to other local html documents
1.) Linking from this document to another another html document known as courses.html
i.e. Course descriptions
2.)Hyperlink within the same html documents: Jumpable table of contents
to related sections
HINT: Click on the table of contents items to jump to the related section
further down the document
Table of Contents
Course 1
Contents of this course 1 section...
Course 2
Contents of this course 2 section...
Course 3
Contents of this course 3 section.
Image Placement in Webpages
HINT: To get some images to play with. Click and hold on the image and choose
"Save this image as" in Netscape 1.1.
Some images to play with are available at: URL: http://www.rit.edu/images
Connect to some images at RIT
1). Place an image on the page.
HINT: GIF or JPEG formats are most common.
i.e. <img src="filename.gif">
2.)Place an image with alternative message for text browser between quotation.
HINT: Use empty space or an asterisk or text for alternative messages.
ALT=" "
i.e. <img src="filename.gif" alt=" ">
3.)Placing an image located across the Internet in a local html document
HINT: These images are located at a different URL. They could also be downloaded
and stored locally.
i.e.
i.e.
4.)Aligning an image with text
i.e.  aligning an image with
text at the top
i.e.aligning text with the
middle
i.e.aligning text with the
bottom
5.)Clickable image brings up another document
6.)Linked clickable image and text:
RIT Dorm Room Sample
7.)Clickable thumbnail image pulls up full size image
| 
