Beginning HTML: A Summary of the Code

Remember that the <> and the closing tags </> are important. However, spacing of the html code and whether you capitalize your tags are not important unless you are trying to adhere to XHTML standards.

<html> </html>

<head> </head>

<title></title>

<body> </body>

HEADINGS:

<h1>Very Big Text</h1>
(headings go from h1 to h6 with same format <h6> </h6>)

h1. Very Big Text

h2. Big Text

h3. Normal Text

h4. Small Text

h5. Very Small Text
h6. Tiny Text
<b>Bold Text</b>
<strong>Strong Text</strong>
Bold Text
Strong Text
<i>Italic Text</i>
<em>Emphasized Text</em>
Italic Text
Emphasized Text
<u>Underlined Text</u> Underlined Text
<s>Strikethrough Text</s> Strikethrough Text
<p>This is text in a paragraph.   Notice how multiple spaces in the source code
or newlines are collapsed into single spaces when rendered in the browser. You can set alignments in the p tag for left, right, center, or justify to determine how the text will be displayed. Because the p tag is a block level element, there is normally about one blank linespace below the item. </p>

This is text in a paragraph. Notice how multiple spaces in the source code or newlines are collapsed into single spaces when rendered in the browser. You can set alignments in the p tag for left, right, center, or justify to determine how the text will be displayed. Because the p tag is a block level element, there is normally about one blank linespace below the item.

<br><br><br>

The break tag places the next element on the following line.



<hr>
<hr width="50%" align="center">
<hr size="10" color="red">



<pre>Preformatted text
  respects   spacing.
And uses monospaced font.</pre>
Preformatted text
  respects   spacing.
And uses monospaced font.

LISTS:

ORDERED LISTS:

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>
  1. First item
  2. Second item
UNORDERED LISTS:

<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>
  • First item
  • Second item

ALIGNMENT:

<p align="center">Centered Text</p>

Centered Text

<h1 align="left">Very Large Text on Left side</h1>

Very Large Text on Left side

<h2 align="right">Large Text on Right side</h2>

Large Text on Right side

<div align="right">several lines<br>
aligned on<br><br>
the right side</div>
several lines
aligned on

the right side
<center>Centered text</center>
(old way introduced by Netscape and works in Explorer
and other browsers; not part of the W3C's HTML standard)
Centered text

MISCELLANEOUS:

<!-- text comments go here -->
<font size="5">Size 5</font>
(size is -7 to 7 with 3 as default)
Size 7
Size 6
Size 5
Size 4
Size 3
Size 2
Size 1
Size 0
Size -1
Size -2
Size -3
Size -4
Size -5
Size -6
Size -7
<font face="Verdana, Helvetica"> Some text </font> Some text

ADDING AN IMAGE:

<img src="image.gif">
(remember relative pathways "images/image.gif")

ALIGNING AN IMAGE:

Some Text <img src="image.gif" align="top"> Some Text
Some Text <img src="image.gif" align="middle"> Some Text
Some Text <img src="image.gif" align="bottom"> Some Text
<img src="image.gif" align="left">Notice how the long text wraps around this image. This can be very useful in web pages when you want an image to be associated with a certain part of the text. Notice how the long text wraps around this image. This can be very useful in web pages when you want an image to be associated with a certain part of the text.
<img src="image.gif" align="right">Notice how the long text wraps around this image. This can be very useful in web pages when you want an image to be associated with a certain part of the text. Notice how the long text wraps around this image. This can be very useful in web pages when you want an image to be associated with a certain part of the text.
<img src="image.gif" align="center">Aligning the image in the center doesn't always work as expected. Certainly the text doesn't wrap like align=left and align=right but with a br tag you can still get some good results.<br><img src="image.gif" align="center"> Aligning the image in the center doesn't always work as expected. Certainly the text doesn't wrap like align=left and align=right but with a br tag you can still get some good results.

LINKS:

LINKING TEXT:
(Remember the issue of relative and absolute paths)

<a href="menu.html">Go to the Main Menu</a>

<a href="http://www.google.com">
See Google for more info.</a>
Go to the Main Menu

See Google for more info.
LINKING IMAGE:

<a href="index.html"><img src="uparrow.gif" border="0"></a>

CREATING ANCHORS:

Within the page:

The anchor label (scroll point marker):
<h1><a name="Part4">Part Four: The Best HTML</a></h1>

The link to it:

<a href="#Part4">Go to Part Four</a>

Anchor on another page:

The anchor label on the menu.html page:
<a name="Intro">My Introduction to Collecting</a>

The link as listed on some other page (say, index.html):

<a href="menu.html#Intro">See my Introduction to Collecting</a>

See my Introduction to Collecting
EMAIL LINKS:

<a href="mailto:james@keeline.com">E-mail me</a>

<a href="mailto:james@keeline.com&subject=HTML class">Send me e-mail about this HTML class</a>
E-mail me

Send me e-mail about this HTML class

BACKGROUND COLOR:

<body bgcolor="#934CE8">

TEXT COLORS:

<body bgcolor="#000000" text="#FFFFFF" link="9805FF">

    text: All text that is not a link

    link: Unvisited Link

    vlink: Visited Link

    alink: Activated Link

IMAGE AS BACKGROUND:

<body background="tiles.gif">

TABLES:

Sample 1:
<table>
<tr>
  <th>
Heading</th>
</tr>
<tr>
  <td>
Data</td>
</tr>
<tr>
  <td>
Data</td>
</tr>
</table>
Heading
Data
Data
Sample 2:
<table border="5" cellpadding="10" cellspacing="15">
<caption
> Soup of the Day </caption>
<tr>
  <th>
Monday </th>
  <th>
Tuesday </th>
  <th>
Wednesday </th>
  <th>
Thursday </th>
  <th>
Friday </th>
  <th>
Saturday </th>
</tr>
<tr>
  <td>
Split Pea </td>
  <td>
New England<br>Clam Chowder </td>
  <td>
Minestrone </td>
  <td>
Cream of <br> Broccoli </td>
  <td>
Chowder </td>
  <td>
Minestrone </td>
</tr>
</table>
Soup of the Day
Monday Tuesday Wednesday Thursday Friday Saturday
Split Pea New England
Clam Chowder
Minestrone Cream of
Broccoli
Chowder Minestrone