<head> </head> / Sets off the titles and heading
<title> </title> / Not viewed in the page
(Page name on tab)
<body> </body> / Sets off the page content
Body Attributes
<body bgcolor = “name or #”> / Background Color
<p> / New paragraph
Text Size <h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> / The Largest Headline
The smallest headline
<font size = +2> </font> / Increase font size by 2
<font size = -2> </font> / Decrease font size by 2
Text
Appearance <font face =”arial”> </font> / Change font type
<b> </b> / BOLD
<i> </i> / Italicize
<u> </u> / Underline
<hr> / Horizontal rule
<br> </br> / Broken row (text goes down one line)
<font color = “name or #”> </font> / Change color (put this tag before the word(s) and close it after
<body text=”blue”> / All text on page same color
Alignment <p align=center> / Center
<p align=right> / Right Align
<dd> / Indent
Lists <ul> <li> </ul> / Unordered List
<ul type=”circle”> <li> </ul> / Unordered List with circle bullet
<ul type=”square”> <li> </ul> / Unordered List with square bullet
<ul type=”disc”> <li> </ul> / Unordered List with disc bullet
<ol> <li> </ol> / Ordered List
<ol type =”A”> <li> </ol> / Ordered List by Capital Letters
<ol type =”a”> <li> </ol> / Ordered List by Small Letters
<ol type =”I”> <li> </ol> / Ordered List by Capital Roman Numerals
<ol type =”i”> <li> </ol> / Ordered List by Small Roman Numerals
<dl> <dt> <dd> </dl> / Descriptive List
<a href “URL”> </a> / Anchor for Link to another Web site
<a href “URL” target=”_blank”> </a> / Anchor for Link to another Web site that opens in a new window
Links <a href=”URL”>The Name of Site </a> / Link to another Web site
<a href=”URL”target=”_blank”> </a> / Link to another Web site in a NEW WINDOW
<a href=”URL”target=”_parent”> </a> / Link to another Web site that opens in the superior size frame
<a href=”URL”target=”_top”> </a> / Link to another Web site that cancels all frames and loads in full browser window
<body link=”green”vlink=”red”> / Change the color of links and visited links
<a href=”mailto:youremailaddress”> Email Me</a> / Linking to Receive E-mail from site visitors
<a name=”name”> / Set anchor to link to section of your page
<a href=”URL”/#name>Link Name</a> / Link to specified anchor name on your page
Images and Graphics
<img src=”name of picture file.extension”width=50 height=50> / Add an image or graphic to a page
<img src=”name of picture file.extension”width=50 height=50 ALT=”Words describing Image” / Add alternate text to an image, in case the viewer’s browser does not load the image
<img src = “name.gif” width=50 height=50> This is my text! / Bottom of image is aligned with the text
<img src = “name.gif” width=50 height=50 align=top> This is my text! / Top of image is aligned with the text
<img src = “name.gif” width=50 height=50 align=center> This is my text! / Center of image is aligned with the text
<img src = “name.gif” width=50 height=50 align=top> <br clear =all>This is my text! / Force text to appear under the image
<center> </center> / Change justification to center text or images
<body background=”name.jpg”> / Set any digital image as background
Tables <table</table> / Table Tag
(always goes between <body> and </body>)
<tr> </tr> / Horizontal row in table
<th> / Table Heading
(use instead of tr to bold and center “headings”)
<td> </td> / Data within the row
<table border=0 / Table has no border
<table border=2 border color=”green” / Table has colored border around it
<table border=1 cellpadding=10 / Add space between cell edgesand data
<table border = 1 cellspacing=15 / Add space between cells
<table bgcolor = “yellow”> / Table Background Color of
whole table
<tr bgcolor=”blue”> / Background color of entire row
<td bgcolor = “green”> / Background color of cell
table width=300 height=400> / Specify size of whole table
(width and height will expand automatically
to fit length of data)
tr height=100> / Specify height of entire row
td width =150> / Specify width of entire column
<tr align=”center”> / Horizontal Alignment
(can also be =”left” or “right”)
<td valign =”top”> / Vertical Alignment
(can also be “bottom” or “middle”)
<table align =”center”> / Align entire table on page
(can also be =”left” or “right”)
<td colspan=2> / Cell Spanning – “Merging”
(This example with merge two columns.)
<td rowspan=3> / Row Spanning – “Merging”
(This example with merge three rows.)
Note: You can add font size, types, color, images, lists, links into your tables by adding the tag to the cell you choose, after the cell’s <td> tag.
<td </td> / Placeholder to get an empty cell.
Frame Definition File / framedef.html
<frameset> </frameset> / Defines the structure of a frame
<frame /> / Defines a given frame
<noframes> </noframes> / Alternate content if frame doesn’t appear in Browser
Frame Attributes
<frameset cols=”25%,75%>
<frameset rows=”18%, 82%>
<frameset rows=”100,*,50”> / Sets 2 column frame
Sets 2 row frame
The * means it will occupy the space left (in pixels). Top 100 pixels, bottom 50 pixels, and middle gets what is left.
<frame frameborder=”0”/ / Turns frame border off
<frame frameborder=”1”/ / Turns frame border on
<frame marginwidth=”40”/> / Changes the margin on left and/or right
of frame. (pixels)
<frame marginheight=”40”/> / Changes the margin above or below a document within a frame. (pixels)
<frame noresize=”noresize”/ / Locks the borders to prohibit resizing
<frame src =“name”=” /> / Defines the name of a frame used as a target.
<frame scrolling=”no” / / Turns off a scroll bar
Example of a frame using pixels:
<html>
<head<title>Vinton County Courthouse</title</head>
<frameset rows="200, 100,*">
<frame src="home.html" title="win-main" name="win-main" frameborder="0" />
<frame src="menu.html" title="menu" name="menu" frameborder="0" />
<frame src="auditor.html" title="auditor" name"auditor" frameborder="1"
</framset>
</html>
Forms <form> </form> / Starts and ends a form
<form name=”myform” / Gives the form a name
action=address
(Example action=” / Gives the URL of the CGI (Common Gateway Interface) script that translates the data.
method = post or method=get / Two ways of submitting data to the script. (Not important now, we are using a pre-programmed script.)
Checkbox / Can choose more than one option
name= / Name of the field
value= / Value that is submitted if checked
align =
(top, middle, bottom, right, left, texttop, baseline,
absmiddle, absbottom) / Alignment of the field
tabindex / Tab order of the field when user hits the tab key
checked / Default check this field
Example of a Checkbox
<html>
<head<title>Forms</title</head>
<body>
<form name="checkbox"
action="
<div align="center">Check Your Favorite Soda<br<br>
<input type="checkbox" name="option1" value="Pepsi">Pepsi<br>
<input type="checkbox" name="option1" value="Coke">Coke<br>
<input type="checkbox" name="option1" value="Ski">Ski<br>
<br>
</div>
</form>
</body>
</html>
Text Field size= / How many visible characters it can contain
maxlength= / How many characters can be entered
name= / Adds a name to the field, so the program can identify the field
value= / Defines what will appear as the default value
align =
(top, middle, bottom, right, left, texttop, baseline,
absmiddle, absbottom) / Alignment of the field
tabindex / Tab order of the field when user hits the tab key
See next page for an example of a text field.
Example of a Text Field <html>
<head<title>Text Field</title</head>
<body>
<form name="textfield"
action="
<div align="center"<br<br>
<input type="text" size="25" value="Enter your name here!">
<br<br>
</div>
</form>
</body>
</html>
Password Field size= / How many visible characters it can contain
maxlength= / How many characters can be entered
name= / Adds a name to the field, so the program can identify the field
value= / Defines what will appear as the default value
align =
(top, middle, bottom, right, left, texttop, baseline,
absmiddle, absbottom) / Alignment of the field
tabindex / Tab order of the field when user hits the tab key
Example of Password Field<html>
<head<title>Password Field</title</head>
<body>
<form name="passfield"
action="
<div align="center">
Enter Password: <input type="password" size="25"
<br<br>
</div>
</form>
</body>
</html> Top of Form
Enter Password:
Bottom of Form
Hidden Field - to submit information no entered by the visitor
name= / Adds a name to the field, so the program can identify the field
value= / Defines what will appear as the default value
Example of Hidden Field<html>
<head<title>Hidden Field</title</head>
<body>
<form name="hidfield"
action="
<div align="center">
<input type="text" size ="25" value="Enter your name here!">
<input type="hidden" name="Language"value="English">
<br<br>
</div>
</form>
</body>
</html> Top of Form
Bottom of Form
Text Area cols= / How many columns in text area
rows= / How many rows in text area
name= / Adds a name to the field, so the program can identify the field
tabindex= / Tab order of the field when user hits the tab key
wrap= / off (text is handled as one long sequence of text without linebreaks)
virtual(text appears as if it recognized linebreaks-but when submitted they are turned off)
physical (text is submitted exactly as it appears on the screen – linebreaks included.)
See next page for an example of text area.
Example of Text Area<html>
<head<title>Text Area</title</head>
<body>
<form name="textarea"
action="
<div align="center">
This is outside the area
<br<br>
<textarea cols="40" rows="5" name="myname">
Now we are inside the area - which is nice.
</textarea>
<br<br>
And now we are outside the area again.
</div>
</form>
</body>
</html>Top of Form
This is outside the area
And now we are outside the area again.
Bottom of Form
Radio Example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action=" method="POST">
<div align="center"<br>
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Soda"> Soda<br>
<input type="radio" name="group2" value="Tea" checked> Tea<br>
</div>
</form>
</body>
</html> / Choose only one option
Milk
Butter
Cheese
Water
Soda
Tea
HTML / EXPLANATION / EXAMPLE
textarea
rows=
cols=
name=
wrap=
off
virtual
physical
/ Text area - several lines
Rows in the field.
Columns in the field.
Name of the field.
Control linebreaks.
Turns off linebreaks.
Shows linebreaks, but
sends text as entered.
Inserts linebreaks when
needed and even sends it. /
text
size=
maxlength=
name=
value= / One line text field
Characters shown.
Max characters allowed.
Name of the field.
Initial value in the field. /
password
size=
maxlength=
name=
value= / Password field.
Characters shown.
Characters allowed to enter.
Name of the field.
Initial value in the field. /
checkbox
name=
value= / Choose one or more options
Name of the field.
Initial value in the field. /
radio
name=
value= / Choose only one option
Name of the field.
Initial value in the field. /
select
name=
size=
multiple=
option
selected
value= / Drop-down menu
Name of the field.
Number of items in list.
Allow multiple choice if yes.
Individual items in the menu.
Make an item default.
Value to send if selected. /
hidden
name=
value= / Does not show on the form.
Name of the field.
Value to send.
reset
name=
value= / Button to reset all fields
Name of the button.
Text shown on the button. /
submit
name=
value= / Button to submit the form
Name of the button.
Text shown on the button. /
image
name= / Image behaving as button
Name of the image. /
Java Scripts -
Current Date:(Note: It displays what your computer currently displays, so if you computer is wrong, this will show up wrong.)
<script language="javascript">
<!--
var today = new Date();
document.write(today);
//-->
</script>
Background Color Change with Button:
<HTML>
<head<title>Java Background</title>
<SCRIPT LANGUAGE="JavaScript">
<!--Beginning of JavaScript-
function changecolor(code){
document.bgColor=code
}
//-End of JavaScript-->
</SCRIPT>
</head>
<BODY>
<form>
<input type="button" name="Button1" value="RED" onclick="changecolor('red')">
<input type="button" name=Button2" value="GREEN" onclick="changecolor('green')">
<input type="button" name=Button3" value="BLUE" onclick="changecolor('blue')">
<input type="button" name=Button4" value="WHITE" onclick="changecolor('white')">
</form>
</BODY>
</HTML>
Images Maps – Using one image with multiple “clickable” areas.
Example:
Step 1 – Choose an image as the background and save it in the folder you are using for the Web site. (Make sure it can easily be divided into different sections.)
Step 2 –Open image in Paint and get coordinates of “Hot Spots.” As you scroll over the image, the coordinates appear at the bottom of your screen. Write these down!
RECT – (Top right, bottom left) Example: “86,115,28,137”
POLYGON – (All corners in order.) Example: "10,0,14,3,7,10"
CIRCLE – (Center and Radius) (Radius – half the diameter) Example: “20,10,5”
Step 3 -