<body bgcolor="rgb(0,0,120)" text="rgb(255,255,0)">

Add a "Table of Contents Link section"
<a href="#images">Jump to the Images section of this page</a>
Jump to the Images section of this page
Jump to the Text Formatting section of this page
Jump to the Links section of this page
Jump to the Tables section of this page

Here is some information that I will put so show how an web page automatically formats the values given in the HTML source file.
Here is another line of text to show how the BREAK LINE <br> command works.

Here is one more line of text.

The above space is a result of the paragraph tag <p>.

We added two paragraph tags, but there is only one space in the web page.

Here is a paragraph tag used with the ending paragraph tag. This paragraph tag used the align attribute to center the paragraph: <p align="center">

Here is another paragraph tag used with the ending paragraph tag. This paragraph tag used the align attribute to right justify the paragraph: <p align="right">

Here is some more text after the ending paragraph tag.

   This line is indented because we used the special non-breaking space character &nbsp; to tell the web browser a space is required and not to remove it.

The <blockquote> tag will indent an entire paragraph. This was created to allow for listing of long quotes, but is often used just to separate parts of a web pages text. The <blockquote> tag uses the ending tag of </blockquote> to stop the indentation.
Some examples of the horizontaol rule tag <hr>. This tag will draw a line horizontally across the web page.

<hr>


<hr width=75>


<hr width=75%>


<hr width=75% align="left">


<hr width=75% align="right">


<hr size=5>


<hr size=20>


<hr size=20 noshade>


<hr width=75% align="left" size=20 noshade>


Examples of the Heading tag <h1> </h1>

<h1>A Sample Heading</h1>

A Sample Heading

<h2>A Sample Heading</h2>

A Sample Heading

<h3>A Sample Heading</h3>

A Sample Heading

<h4>A Sample Heading</h4>

A Sample Heading

<h5>A Sample Heading</h5>
A Sample Heading
<h6>A Sample Heading</h6>
A Sample Heading
<h2 align="center">A Sample Heading</h2>

A Sample Heading

<h2 align="right">A Sample Heading</h2>

A Sample Heading


Text Formatting

The Bold tag <b> </b>
Here is some plain text and some bold text.

The Italic tag <i> </i>
Here is some plain text and some italic text.

Here is some plain text and some bold and italic text.

The Underlined tag <u> </u>
Here is some plain text and some underlined text.

The Subscript tag <sub> </sub>
Here is some plain text and some subscripted text.

The Super-scripted tag <sup> </sup>
Here is some plain text and some super scripted text.

The Font tag <font> </font>
The size attribute of the font tag allows the size of the text to change.
<font size=5>
Here is some plain text and some larger text.
<font size=2>
Here is some plain text and some smaller text.
<font size=+2>
Here is some plain text and some larger text.
<font size=-2>
Here is some plain text and some smaller text.

The color attribute of the font tag allows the color of the text to change.
<font color="red">
Here is some plain text and some red text.
<font color="orange">
Here is some plain text and some orange text.
<font color="cyan">
Here is some plain text and some cyan text.
<font color="Dark Faded Green">
Here is some plain text and some dark faded green text.
<font color="#009900">
Here is some plain text and some dark faded green text.

Images

The image tag <img> </img>
The src attribute specifies the file that contains the image.
<img src="demopict2.gif">

Display an image from elsewhere on the web.
<img src="http://www.cs.uic.edu/~i100/images/other/blackcat.jpg">

Display a image with the width specified <img src="cs100s05_images/zebra3.jpg" width=300>

Display a image with the height specified <img src="zebra3.jpg" height=300>

Display a image with both the width and height specified <img src="zebra3.jpg" 300 height=400>

Display a huge image. <img src="zebra3.jpg">

Links

A link is created by using the Anchor tag: <a> </a>

<a href="http://www.yahoo.com/">Yahoo Home Page<a>
Yahoo Home Page

<a href="http://www.cs.uic.edu/~i450">CS 450 Home Page<a>
CS 450 Home Page

The following URLs are to "local Pages"
<a href="index.html">Pat Troy's Icarus Home Page<a>
Pat Troy's Icarus Home Page

A "mailto" link uses the protocol of "mailto" instead of "http" in the reference section of the link.
<a href="mailto:troy@uic.edu">Send email to ProF. Troy</a>
Send email to ProF. Troy

Add a "Table of Contents Link section"
<a href="#images">Jump to the Images section of this page</a>
Jump to the Images section of this page
Jump to the Text Formatting section of this page
Jump to the Links section of this page
Jump to the Tables section of this page

Images links

Image links are create by placing an image between the opening and closing anchor tags.
<a href="demopict2.gif"><img src="tndemopict2.gif"></a>

HTML Tables

A Page on HTML Tables from Netscape

Average
HeightWeight
Gender Males1.90.003
Females1.70.002

Tables with Colored background

Use the bgcolor attribute to specify a different color for the background of a cell in a table.

Cell 1 Cell 2
Cell 3

Cell 1 Cell 2
Cell 3