HTML Tutorial
Hypertext Markup Language (HTML) is an easy to use tool for web page design. An HTML programmer can utilize programs from Notepad or vi (UNIX) to Microsoft Word in order to write their code; however, the file must be saved in text format. Lets take a quick run through the commands necessary to start your own HTML documents.
HTML Commands are called tags, and most tags, denoted in brackets <tagname>, require an end tag denoted by </tagname>. This way the user's browser knows when to stop executing the command (i.e. font specifications).
<html><head>
<title>HTML Necessary Components</title>
</head>
<body>
<H1>Lets Figure Out HTML</H1>
<P>HTML is broken into paragraphs with the p tag.</P>
</body>
</html>
The <body> tag and the </body> tag enclose the portion of the HTML script which will be rendered by the interpreter and outputted to the main window of the user's browser. The <head> tags enclose the area where the script information is specified e.g. the <title> which specifies the title of the page (shown on the browsers page title area).
We can specify body attributes as well:<body bgcolor="#000000" text="#ffffff" background="bg.gif">
We specify the background color to be black, the text to be white, and the background image, bg.gif, will be tiled throughout the site's page. Some common tags:
- <Hy></Hy> Where y is a positive integer from 1 to 6 ... sets the header where 1 is the largest header, 2 is the second largest header, etc.
- <font face="sans-seriff" size="2" color="#rrggbb"></font> You may specify the font, size, and color which is specified using 2 place hex values representative of the mix of red (rr) green (gg) and blue (bb) to use for text color.
- <br> Forces a line break.
- <pre></pre> Specifies an area where the user sees text exactly how you have type it in between the initiation and ending tags.
- <p align=center(left)(right)></p> Initiates a new paragraph with alignment set to center, left, or right.
- <strong></strong>, <em></em> Sets text as strong (usually bold), emphasized (usually italicized), browsers interpret these tags differently.
- <ul> <li>Item 1 <li>Item 2</ul> Sets a bulleted (unordered)list of items specified with the <li> tag. Note that <li> has no ending tag; however, the <ul> tag specifying the type of list does has an ending tag.
- <ol> <li>Item 1 <li>Item 2 </ol> Sets a numbered (ordered)list of items.
- <dl> <dt>Term to define <dd>Definition of term </dl> Sets a definition list of items specified by the definition term and the definition description.
- <table>
<caption> Table Name (optional) </caption>
<thead> <tr> Labeling row <th> First column text </th>
<th> Last column text </th> </tr> </thead>
<tr> First row <td> First column text </td> <td> Last column text </td> </tr>
<tr>Last row <td> First column text </td> <td> Last column text</td> </tr>
</table>
Creates a table of text. Note that I can continue with more rows and columns and the HTML interpreter will continue to add new rows and/or columns respectively. if I want a certain cell to take up more than its alotted space I can use the rowspan="#" or colspan="#" attributes where # specifies the number of rows the cell is to take up and/or columns to use respectively. - The following is an example of a hypertext reference to a file in the same directory as the HTML script file. <A HREF="filename.html">Text to convert to hypertext</A> Note: You may also specify a directory for the filename.
- We can also create a hypertext reference to a web site. <A HREF="http://www.websitename.com">Text to convert to hypertext</A>
- And to create a hypertext link to an E-Mail address. <A HREF="mailto:username@host.com">Text to convert to hypertext</A>
- We can also display a picture: <IMG SRC = "picname.gif" ALT="[LINK]"> And if our user has a non graphical web browser they can view the text [LINK] so that they know there is a graphical link they are missing.
- <A HREF="filename.html"><IMG SRC="picname.gif" BORDER=0 ALT="description"></A> Now our user can click on picname.gif and be forewarded to filename.html, and for our users who are incapable of viewing graphics we have created a text description with the alt attribute that may be selected in order to be forewarded to the same filename.html. The description is also displayed in an info box when the mouse has been held over the picture for a number of seconds.
Design and content by Kevin L. Stern
All Rights Reserved.
Material on this page may be reprinted for educational, non-commercial purposes
as long as Northeastern Illinois University is informed of such usage, all
material with an author listed is the intellectual property of that author
and may not be reproduced without permission.