HTML Tutorial

Basic HTML Page

<html>

<head>
<title> Document Title </title>
</head>

<body text="#000000" link="#0000FF" vlink="#FF0000" alink="#000000" bgcolor="#FFFFFF">

<p>
In the <body> command you may specify
   a background image (background="../images/backgray.gif"),
   the text color (text="#000000" [black]),
   the color of unaccessed links (link="#0000FF" [blue]),
   the color of visited links (vlink="#FF0000" [red]),
   the color of links while you are clicking on them (alink="#000000" [black]), and
   the color of the background if the background image is not loaded (bgcolor="#FFFFFF" [white]).
</p>

</body>
</html>

Headings

The following are examples of headings. You can control the alignment with formatting tags around the heading or in the heading specifier.

<h1> Heading 1 </h1>

<center> <h2> Heading 2 </h2> </center>

<h3 align=center> Heading 3 </h3>

<h4 align=right> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

Paragraph

The tag for a new paragraph is <p>. At the end of the paragraph, insert </p>.

Line Break

To insert a carriage return without starting a new paragraph,
use the <br> tag.

Lists

Ordered list

This is an example of an ordered list. The browser numbers the items in the list.

item 1
item 2
item 3

Unordered list

This is an example of an unordered list. The browser bullets the items in the list.

item 1
item 2
item 3

Text Format

There are a variety of text formats possible in html. The following table lists the most popular:

Format	Tag
Bold	<b> </b>
Italic	<i> </i>
Emphasis	<em> </em>
Strong Emphasis	<strong> </strong>
Preformatted	<pre> </pre>
Address	<address> </address>
Block Quote: This is an example of a block quote. The text within the tags is formatted as shown.	<blockquote> </blockquote>
Superscript¹	<sup> </sup>
Subscript₂	<sub> </sub>
`Teletype`	<tt> </tt>
Citation	<cite> </cite>
`Code`	<code> </code>
`Sample`	<samp> </samp>
Definition	<dfn> </dfn>
`Variable`	<var> </var>
~~Strike Through~~	<s> </s>
`Keyboard`	<kbd> </kbd>
Center: The text between the center tags is aligned along the center line of the page or table cell	<center> </center>

Font Specification

You can specify the font size and color using the <font> </font> command. For example, <font size="5">font</font> sets the font size of the word "font" to size 5, two setting bigger than the default which is 3. You can select the font size from 1 to 7. You can also set relative font sizes by using + or - in the command. This sizes the font relative to the default size. <font size=+2 >font</font> increases the size of the word "font" two levels. In addition, the tags <big> </big> make the font size bigger and <small> </small> make the font size smaller. The following table shows the different font sizes.

1	2	3	4	5	6	7
Font	Font	Font	Font	Font	Font	Font

To set the font color, use the attribute color in the font command. For example, <font color="#5511CC">font</font> sets the word "font" to the color purple. The following table lists the codes for various colors. Be careful about making the text look like a link.

green	magenta	purple	blue
#00BB00	#CC44BB	#5511CC	#0000FF
red	black	white	pink
#FF0000	#000000	#DDDDDD	#EE77FF

Special Characters

To display characters that are used as control codes by the browser, use the following codes:

Symbol	Code	Description
&	&	Ampersand
<	<	Less than
>	>	Greater than
©	©	Copyright
®	®	Registered trademark
à	à	Grave accent
é	é	Acute accent
ö	ö	Umlaut mark
ñ	ñ	Tilde
		Nonbreaking space

Anchors

Outside Page Link

To reach the H&A System Engineering site, access http://www.hasys.com/. To create the anchor for the link, type <a href="http://www.hasys.com/">http://www.hasys.com/</a>.

Relative Page Links

To link to a file in the same directory, such as the tutorials index file type <a href="index.html">tutorials index file </a>.

Hierarchical Page Links

To link to a file in another directory, such as the home page type <a href="../index.html">home page </a>. The ../ tells the browser to look in the next higher up directory. To move up two levels, use ../../. To go down to lower level directories, use /lower_directory/file.htm - for example: for more Web Services, type <a href="../web/index.html">Web Services</a>.

In Page Link

To link to a location withing the same file, such as Text Format type <a href="#Formats">Text Format </a>. The # tells the browser to look in the same file. The tag, <a name="Formats"> ... </a>, at the Text Format portion of the document marks the destination location for the link. This tag pair is very useful for tables of contents.

Email Link

To include a mail to link, such as l.haggerty@ieee.org use the format <a href="mailto:l.hahherty@ieee.org"> l.haggerty@ieee.org</a>.

Image

You can include graphics in a page with the code, <img src="html_computer.gif" alt="computer" width="124" height="99" hspace="10" border="0" align=right>. This image is in the same folder as the tutorial file. It's name is html_computer.gif. It is 99 by 124 pixels wide. Specifying the size allows the browser to reserve space and load the text around the image without having to wait for the image to load. The hspace parameter keeps the text 10 pixels away from the text as it flows around the sides. The alt parameter specifies the text to be displayed if the image is not loaded.

Tables

Tables are a nice tool for formatting information. They can be used to create multiple columns of text as well as traditional tables.

The basic tags used to create a table are <table>, <tr> </tr>, and <td> </td>. The <table> indicates the start of a table. You can add format specifying information in the tag before the closing >. For example, <table border="2" cellpadding="2" cellspacing="2" width="100%">. The <tr> </tr> tag pair define a row in the table. As with the <table> tag, you can add formatting information in the <tr> tag. For example, <tr align=left valign=top>.

The <td> </td> tag pair defines a cell in the row of a table. The following is an example of formatting specified in the <td> tag: <td align=right valign=middle nowrap colspan="1" rowspan="1" width="10%">. There is a special case of the cell tag, <th> </th>. It is used to specify the header cells of a table. The same formatting options apply as with the <td> tag.

The format commands used for tables are defined in this table:

Attribute	Use
nowrap	Keeps all text in a cell on one line
width	Specifies the width of the table or cell as a percentage or in pixels. With the table tag, the percentage refers to the width of the window. With the cell tag, the percentage refers to the width of the table. The preferred method is to specify width as a percentage because this allows the table to be displayed regardless of window size.
cellspacing	Specifies the amount of space in pixels between the cells. If there is a border, this controls the width of the shaded lines separating the cells.
cellpadding	Specifies the amount of space in pixels between the edge of the cell and the cell's contents.
border	Specifies the width of the border in pixels. Border = 0 means no border which is the same as omitting the border command.
align	Specifies the horizontal alignment of the contents of the cells. The options are left, right, and center.
valign	Specifies the vertical alignment of the contents of the cells. The options are top, middle, and bottom.
rowspan	Specifies the number of cells below this one that this cell will span.
colspan	Specifies the number of cells to the right of this one that this cell will span.
bgcolor	Specifies the background color of the row or column. This works for Netscape 3.0 or Internet Explorer.

Following is a sample table specification for a 3 row by 3 column table:

HTML

Sample Table

<table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr align=left >
   <td align=center valign=top width="20%"> Row 1, Col 1</td>
   <td width="50%"> Row 1, Col 2 <br>*<br>*<br>*</td>
   <td align=right valign=bottom width="30%"> Row 1, Col 3</td>
</tr>
<tr align=center >
   <td align=center valign=middle width="20%"> Row 2, Col 1</td>
   <td width="50%"> Row 2, Col 2 <br>*<br>*<br>*</td>
   <td align=right valign=bottom width="30%"> Row 2, Col 3</td>
</tr>
<tr align=right >
   <td align=center valign=bottom width="20%"> Row 3, Col 1</td>
   <td width="50%"> Row 3, Col 2 <br>*<br>*<br>*</td>
   <td align=right valign=bottom width="30%"> Row 3, Col 3</td>
</tr>
</table>

Row 1, Col 1	Row 1, Col 2 * * *	Row 1, Col 3
Row 2, Col 1	Row 2, Col 2 * * *	Row 2, Col 3
Row 3, Col 1	Row 3, Col 2 * * *	Row 3, Col 3

consult@hasys.com