Basic HTML

HTML for WebMasters

"remember that for every <b> there must be a </b>, and for every <a href="xx.gif"> there must be a </a>"

Refer to the Beginner's Guide to HTML and HTML 3 - Manual of Style by Larry Aronson, Ziff-Davis Press, Emeryville, California. 1995. ISBN 1-56276-352-0

Required Elements of the Basic HTML Page
Beginning/ending a page	<html>...</html>
Contains title and some scripts; required for some (not all) browsers	<head>...............</head>
Inserts PAGE NAME into Netscape banner	<title>PAGE NAME</title>

Basic Page Layout
Line break <br>

Paragraph break <p>

Increase margin left and right <blockquote>.......</blockquote>

Insert horizontal rule <hr>

Specify horizontal rule width (pixels) <hr size=3>

Center bounded text <center>text</center>

Basic Page Layout
Line break	<br>
Paragraph break	<p>
Increase margin left and right	<blockquote>.......</blockquote>
Insert horizontal rule	<hr>
Specify horizontal rule width (pixels)	<hr size=3>
Center bounded text	<center>text</center>

Page Layout Enhancements
Specify background color <body bgcolor="#FFFFFF">.......</body>

Specify background pattern <body background="FILENAME.JPEG">.......</body>

Specify colors of text elements <body text="#000000">.......</body>
link="#000000"
link="#FF0000"
alink="#800080"
vlink="#000051"

Page Layout Enhancements
Specify background color	<body bgcolor="#FFFFFF">.......</body>
Specify background pattern	<body background="FILENAME.JPEG">.......</body>
Specify colors of text elements	<body text="#000000">.......</body> link="#000000" link="#FF0000" alink="#800080" vlink="#000051"

For example; <body bgcolor="#FFFFFF" text="#000000" LINK="#000000" VLINK="#e9e9e9"> specifies a page with a white background, with black text, black links, and gray visited links. Gray is the default page background color and black is the default text color. Link colors are specified in the "option preferences" settings in the browser.

Font Enhancements
Specify heading size	<h1>HEADING</h1> <h3>HEADING</h3> <h6>HEADING</h6>
Make font bold	<b>bold</b>
Make font italic	<i>italic</i>
Specify font type (Netscape 3.0)	<font face="times">Sets font of bounded text to Times.</font>
Specify font color (Netscape 3.0)	<font color="#F00000">Makes bounded font RED.</font>
Specify font size	<font size=+3>Increase size by 3</font> <font size=+1>Increase font size by 1</font> <font size=-2>Decrease font size by 2</font>
Superscript	<sup>Super^script</sup>
Subscript	<sub>Sub_script</sub>

Common Text Layout Options
Ordered list with numbers
Note: you do not put in numbers; that's done automatically. <ol>
<li>list item
<li>list item
</ol>
list item
list item

Unordered list with bullets
Note: you do not put in bullets; that's done automatically. As with ordered lists, the indenting and spacing is done automatically. <ul>
<li>list item
<li>list item
</ul>
list item
list item

Definition list with titles
<dl>
<dt>ListTitle</dt>
<dd>list item
<dd>list item
</dl>
List Title
list item
list item

Common Text Layout Options
Ordered list with numbers Note: you do not put in numbers; that's done automatically.	<ol> <li>list item <li>list item </ol>	list item list item
Unordered list with bullets Note: you do not put in bullets; that's done automatically. As with ordered lists, the indenting and spacing is done automatically.	<ul> <li>list item <li>list item </ul>	list item list item
Definition list with titles	<dl> <dt>ListTitle</dt> <dd>list item <dd>list item </dl>	List Title list item list item

Tables
Basic table <table>
<tr><td>.......<td> ........</tr>
</table>

Basic table commands
Attributes that fill in the blank <table _____> and what they do. border=#

width=#%

cellspacing=#

cellpadding=#
# is the number of pixels width of border.
# is % of full screen width.
# is space between cells in pixels.
# is space around cell contents in pixels.

Basic table row attributes
Attributes that fill in the blank<tr _____> and what they do. align=[left] [center] [right]

valign=[top] [middle] [bottom]

bgcolor="#e9e9e9"

horizontal alignment within cells.

vertical alignment within cells.

colors background of row or cell

Basic header attributes
Attributes that fill in the blank<th _____> and what they do. rowspan=#
colspan=#
align=[left] [center] [right]
valign=[top] [middle] [bottom]
# is row width of header.
# is column width of header.
Align and valign as defined
under <tr> definitions.

Tables
Basic table	<table> <tr><td>.......<td> ........</tr> </table>
Basic table commands Attributes that fill in the blank <table _____> and what they do.	border=# width=#% cellspacing=# cellpadding=#	# is the number of pixels width of border. # is % of full screen width. # is space between cells in pixels. # is space around cell contents in pixels.
Basic table row attributes Attributes that fill in the blank<tr _____> and what they do.	align=[left] [center] [right] valign=[top] [middle] [bottom] bgcolor="#e9e9e9"	horizontal alignment within cells. vertical alignment within cells. colors background of row or cell
Basic header attributes Attributes that fill in the blank<th _____> and what they do.	rowspan=# colspan=# align=[left] [center] [right] valign=[top] [middle] [bottom]	# is row width of header. # is column width of header. Align and valign as defined under <tr> definitions.

Hypertext Links Between Files and Between Servers
Hypertext link to a file
Go to the file FILENAME. <a href="filename.html">FILENAME</a>

will appear on a browser as FILENAME

Hypertext link to another server.
Go to Aggie Horticulture. <a href="http://aggie-horticulture.tamu.edu">Aggie Horticulture</a>

will appear on a browser as Aggie Horticulture

Hypertext link to another location in the same file. <a href="week3.html#top">specified location</a>
will pop to a specified location when the link is clicked.
Required defining where "top" is; eg. the word "Webmasters" in the title is set as the target with the following code:
<a name="top">Webmasters</a>

Hypertext Links Between Files and Between Servers
Hypertext link to a file Go to the file FILENAME.	<a href="filename.html">FILENAME</a> will appear on a browser as FILENAME
Hypertext link to another server. Go to Aggie Horticulture.	<a href="http://aggie-horticulture.tamu.edu">Aggie Horticulture</a> will appear on a browser as Aggie Horticulture
Hypertext link to another location in the same file.	<a href="week3.html#top">specified location</a> will pop to a specified location when the link is clicked. Required defining where "top" is; eg. the word "Webmasters" in the title is set as the target with the following code: <a name="top">Webmasters</a>

Displaying Images in HTML Files
Basic code for displaying an image file.
Image must be either jpeg (jpg or jpe) or gif format.. <img src="filename.jpeg">

Modifying attributes for images .

<img src="filename.jpeg" width="100" height="75"> optional; image loads faster; use to adjust size

<img src="filename.jpeg" alt="image filename"> displays link if "autoload images" is off in browser

<img src="filename.jpeg" align=[TOP] [MIDDLE] [BOTTOM] > aligns text to inline image

<img src="filename.jpeg" align=[LEFT][RIGHT]> fixes image on page; wraps text

<img src="filename.jpeg" hspace="10"> sets hortizontal text offset (in pixels)

<img src="filename.jpeg" vspace="10"> sets vertical text offset (in pixels)

<img src="filename.jpeg" border="10"> sets border width (in pixels)

<img src="filename.jpeg" no border> default or inline image; use if want linked image to be borderless

To make an image a clickable link <a href="filename.html"><img src="wm3.gif" width="40" height="40"></a> makes the image clickable as so:
and with the "no border" it looks like

Displaying Images in HTML Files
Basic code for displaying an image file. Image must be either jpeg (jpg or jpe) or gif format..	<img src="filename.jpeg">
Modifying attributes for images	.
<img src="filename.jpeg" width="100" height="75">	optional; image loads faster; use to adjust size
<img src="filename.jpeg" alt="image filename">	displays link if "autoload images" is off in browser
<img src="filename.jpeg" align=[TOP] [MIDDLE] [BOTTOM] >	aligns text to inline image
<img src="filename.jpeg" align=[LEFT][RIGHT]>	fixes image on page; wraps text
<img src="filename.jpeg" hspace="10">	sets hortizontal text offset (in pixels)
<img src="filename.jpeg" vspace="10">	sets vertical text offset (in pixels)
<img src="filename.jpeg" border="10">	sets border width (in pixels)
<img src="filename.jpeg" no border>	default or inline image; use if want linked image to be borderless
To make an image a clickable link	<a href="filename.html"><img src="wm3.gif" width="40" height="40"></a> makes the image clickable as so: and with the "no border" it looks like