Demonstrating HTML Tags
HTML is an acronym for HyperText Markup Language. It allows all types of
computers to interpret information on the World Wide Web in the same way. HTML
is a series of tags, sometimes called elements, containers, or codes, that
surround text you are coding for special treatment much like parentheses or
quotation marks. Text in an HTML document can be controlled, just as in word
processing, by adding formatting attributes such as bolding. In addition, you
can insert graphic images, sound files, and multimedia clips. A Web user
accesses these elements by clicking "links" on the Web page.
This document will demonstrate the use of these tags.
Links, or hyperlinks, display on a page in a different color and are jumps to
other Web sites or to a specific location in the current page. When the mouse
pointer is over a link, it changes to a select object. Links can be created
using URL or local file addresses and be created before the link file is even
created.
The Code:
<A href="http://google.com/">Link to Google</A>
Results in:
Link to Google
HTML documents can have up to six sizes of
headings. Each Web browser can display headings differently. You can enhance
text in an HTML document by adding formatting tags for bolding and italics. Most
HTML formatting tags must surround the text they enhance, however, not all HTML
tags require this. By typing a single tag, you can create a dividing line (also
known as a horizontal rule) to separate sections on the screen, or line break to
force a line to end before the right margin.
The Code:
<H2>2nd Largest
Heading</H2>
Results in:
2nd Largest Heading
HTML documents can contain a variety of
formatted text. A Web document's appearance is controlled by its HTML tags.
These tags control whether the text has numbers or bullets before each line, and
how each level of the text is indented or displayed.
<UL>
<LI>Unordered item
1
<LI>Unordered item 2
<LI>Unordered item 3
</LI>
</UL>
- Unordered item 1
- Unordered item 2
- Unordered item 3
<OL>
<LI>Ordered item 1
<LI>Ordered item 2
<LI>Ordered item 3
</OL>
- Ordered item 1
- Ordered item 2
- Ordered item 3
A tabular format - using a grid - is often the
best way of organizing and displaying a list of complex data. With HTML tags,
you can create both simple and complex tables. A table is composed of columns
and rows, with data contained in individual boxes, or cells. The height and
width of a table (or individual cells) can be measured in pixels, or as a
percentage of the browser window. Use the pixel measurement when you want to
control the size of a table, use a percentage when you want the table to occupy
space based on the browser window's dimension. Rows and columns can be spanned,
or enlarged, by combining them with adjacent cells. Elements within a table can
be positioned in a variety of ways. This attribute gives added control of the
table's dimensions. The amount of space surrounding each cell - giving the
effect of a margin - can be changed. Increasing the size of a table's border -
using the default border color - gives is a three-dimensional look. A thicker
border draws the reader's eye into the table, which makes the table easier to
read.
The Code:
<table border="1"
cellpadding="5" cellspacing="5" width="600px">
<tr>
<th>Heading1</th><th>Heading2</th><th>Heading3</th><th>Heading4</th>
</tr>
<tr>
<td colspan="2">Colspan = 2</td><td rowspan="2">Rowspan = 2</td><td>Data</td>
</tr>
<tr>
<td>Data1</td><td>Data2</td><td>Data</td>
</tr>
<tr>
<td align="center" width="100px">
This is a bunch of centered text located inside of a table cell.</td>
<td align="left" valign="top">top left</td><td align="right" valign="bottom">bottom
right</td><td>Data</td>
</tr>
</table>
Results in:
| Heading1 | Heading2 | Heading3 | Heading4 |
| Colspan = 2 | Rowspan = 2 | Data |
| Data1 | Data2 | Data |
|
This is a bunch of centered text located inside of a table cell. |
top left | bottom
right | Data |
When a graphic image, or picture, is
displayed on a Web page, it is not actually saved in the HTML source document.
You can display a graphic image in a Web browser by using HTML tags to point to
the location of the image. Graphic images are available in a variety of formats,
and most images can be viewed by Web browsers. An inline graphic image is easy
to add to an HTML document. The HTML tag does not require a closing tag. Once
this tag is in the document, additional codes (attributes) can be used to affect
the size, position, and alignment of the graphic image on the page. You can link
one Web page to another by combining the HTML tag you use to create a text link
with the image tag. You can also include additional text with a graphic image so
Web users who lack graphic capabilities can view the link.
The Code:
<img src="http://www.siue.edu/images_global/logo_300_rbdt.gif"
width="300" height="67">
Results in:
A form is a great way of gathering information
for later use. For a business that uses the Web, a form is a great way of
collecting information about customer preferences and taking orders. A Web page
form can accept input by allowing a user to type text or click radio buttons,
check-boxes, pull-down menu, or labeled buttons to make selections.
The Code:
<form name="contact_form"
method="post" action="">
<fieldset>
<legend>Send a Message</legend>
<label>Your Name:<br /><input type="text" name="name" size="20" /></label><br />
<label>Your Email:<br /><input type="text" name="email" size="20" /></label><br
/>
<label>Message:<br /><textarea name="message" cols="30" rows="6"></textarea></label>
<br />
<input type="Submit" value="Send >>" class="submit" />
<br />
</fieldset>
</form>
Results in:
