Web Design HTML Tags Examples

XMP | Wrap Text | Image Link | Tables | DIR

Table Wrap Text | Acrobat | Marquee | CLEAR

Paragraph Tricks | Hyperlink | Color Names

Preformatted Text | Inline Images | Justified Text

Here is the content of our Style Types for this page

<STYLE TYPE="text/css"> body { margin-left: 5%; margin-right: 5%; } A:visited {COLOR: blue; TEXT-DECORATION: none;} A:link {COLOR: blue; TEXT-DECORATION: none;} A:hover { color:#a51550; text-decoration: underline;} TD {font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif;} </STYLE> Index of css styles
www.w3.org/TR/REC-CSS2/indexlist.htm

BLOCKQUOTE or Definition Lists can be used to Create Indents

This is a BLOCKQUOTE example. BLOCKQUOTE or Definition Lists can be used to Create Indents. This is a BLOCKQUOTE example. This is a BLOCKQUOTE example. This is a BLOCKQUOTE example.

Using the DIR /DIR code will indent text:

This section of text will be indented. This will also be indented. This will also be indented.

<P> <DIR> This section of text will be indented. </DIR> <DIR> This will also be indented. </DIR> <DIR> This will also be indented. </DIR> </P>

XMP

Use the XMP tag to allow code to be visable.
<FONT SIZE="4">Use the XMP tag to allow code to be visable.</FONT>

Wrap, Clear and Border

Here is an example of wrapping text around images using the CLEAR attribute.

One image has a BORDER=2 while the other does not. This is an example of wrapping text around images. Add "BR CLEAR=left" here.
This text would normally continue to wrap around the right hand side of the image, but the CLEAR attribute here means that the text will continue here instead.

THE MARQUEE Example

Marquees can add animation to your HTML documents . . . Add an image! It is interesting to see your text move behind the text ....

Preformatted Text

<PRE>This will show exactly as it is typed. I will press my ENTER key here. It will record my typing as is. I am on the second line. I have pressed my ENTER key. I have pressed the TAB key here.</PRE>

Table Wrap Example

You can even

wrap text

around tables.

Here is an example of wrapping text around images within a table. <TABLE BORDER=4 ALIGN=LEFT> <TR> <TD>You can even</TD> </TR> <TD>wrap text</TD> <TR> <TD>around tables.</TD> </TR> </TABLE>

Table Examples

Table Header is Centered by Default	Table Header is Centered by Default
Column one	Column two

**Caption Placed on Top of a Table**
If you have three TR tags in your table, you will have three rows in your table.
Column one	Column two	Column three

Table with no borders


	WIDGET SALE
	Using a table with no borders. you can place graphics and text with precision. Isn't this nifty?

Active Hyperlink

Click Here to Go to Top of Page

How Acrobat Works

Create a PDF (Acrobat format) file of the document you want to have appear lifelike.
Select PDF Writer as your printer
Print the file to the folder which has your HTML files.
Create a link in an HTML page that points to the PDF file

Fonts

This text is one size down from the basefont size.
<BASEFONT SIZE=2 FACE="ARIAL"> The first letter of this sentence should be three sizes larger than the rest of the sentence and it should be blue. <FONT SIZE="7" FACE="VERDANA,ARIAL" COLOR=BLUE>T</FONT>he first letter of this sentence should be three sizes larger than the rest of the sentence it should be blue.

This will be the text
for the ADDRESS

BIG
Makes text one size larger

CODE
Monospaced font (usually Courier)

SMALL
Makes text one size smaller

SUP
Renders ^{text as subscript}

SUB
Renders_{text as subscript}

Headings

This is HI

This is H2

This is H3

This is H4

This is H5

This is H6

Paragraph Trick

<IMG SRC="images/space.gif" HSPACE=5 VSPACE=10>I have added space.gif with HSPACE=5 and VSPACE=10 to indent my paragraph.

I have added space.gif with HSPACE=5 and VSPACE=10 to indent my paragraph.

I have added space.gif with HSPACE=12 and VSPACE=8 to indent my paragraph.

Hyperlinks

Clicking right here will take you to the top of this page.

The below images are linked to <A HREF="#top"><IMG SRC="images/back.gif" WIDTH="34" HEIGHT="33"></a> <A HREF="#top"><IMG SRC="images/next.gif" WIDTH="34" HEIGHT="33"></a>

Justified Text

P align="justify" will of course align your text right and left justified. It gives your text that "text book" effect.

This will be aligned left

This will be aligned right

Color Names

Internet Explorer supports the following color names:

This is AQUA
This is GRAY
This is NAVY
This is SILVER
This is BLACK
This is GREEN
This is OLIVE
This is TEAL
This is BLUE
This is LIME
This is PURPLE
This is FUCHSIA
This is MAROON
This is RED
This is yellow
Of course WHITE is also a color supported by Internet Explorer!

Netscape supports over a hundred color names in addition to the above such as DARKORANGE and DEEPPINK

Lists:

You may the TYPE attribute to specify the type of numbering used.
OL TYPE=1 arabic numerals (default),
TYPE=A-capital letter,
TYPE=a small letters,
TYPE=I large roman numerals,
TYPE= i small roman numerals.

Default List:

first list item
second list item

Ordered Lists:

first list item
second list item
third list item

first list item
second list item
third list item

Definition Lists

HTML: Definition Lists
HEAD: The first part of this list
BODY: The main part of the list

Nesting Lists

first list item
second list item
third list item
1. first list item
2. second list item
3. third list item

Inline Images

Elizabeth Irene Bryan-McCabe