HTML


The Basics

Name

Element

Comments

HTML content <html></html> The start and end of a file
Header <head></head> Contains hidden page information
Title <title></title> Contained in the header
Body <body></body> Contains visible page elements
Background image <body background=”url”>
Background color <body bgcolor=”#rrggbb”> Uses HEX code color
Text color <body text=”#rrggbb”> Sets default color of text
Link color <body link=”#rrggbb”> Sets default link color
Visited link color <body vlink=”#rrggbb”> Sets color of visited links
Active link color <body alink=”#rrggbb”> Sets color of active links

 

Links

Name

Element

Comments

Link to another page <a href=”url”></a> Relative or absolute URL to page, text
between tags is link text
Set a location <a name=”location”></a>
Link to location <a href=”#location”></a> or <a>

<a href=”page.html#location”></a>

Within the same page/On a different page
<a href=”page.html” target=”value”></a>
Link with target Target value is frame name
E-mail link <a href=”mailto: you@domain.com”></a> Not widely supported

 

Images

Name

Element

Comments

Image <img src=”url”> Simple image tag
Image with width and Height <img src=”url” width=”#” height=”#”> Width and height in pixels
Image with alternative text <img src=”url” alt=”alternative text”> Text alternative for the image
Image without borders <img src=”url” border=”0″> When using an image as a link
Image alignment
<img src=”url” align=”left, right”> Used when wrapping text around images

 

Lists

Name

Element

Comments

Unordered list <ul type=”disc, circle, square”></ul> Bullet point list, with different bullets
Ordered list <ol type=”A, a, I, i, 1″></ol> Numbered list with different number styles
Start number <ol start=”#”></ol> Defines first number in ordered list
List item <li>Item text</li> Optional closing tag

 

 

Form

Name

Element

Comments

Form content <form action=”script_url” method=”POST,GET”></form> Url is CGI location or JavaScript, most forms

use POST

Form input <input type=”text, password, checkbox,radio, image, hidden, submit, reset”>
Input name <input name=”value”> Identifies the input field
Input value <input value=”value”> Default value, not required
Default selection <input checked> Checkboxes and radio buttons only
Input size <input size=”#”> Size in characters, IE & NS differ in display
Maximum input length <input maxlength=”#”>  In characters
Selection list <select name=”value”></select> Items go in between tags
No. options shown <select size=”#”></select> How many options shown at once
Multiple choices <select multiple></select> Allows more than one choice
Select options <option value=”value”></option> Displayed text follows tag. Optional closing tag
Selected option <option selected></option> Default option
Option group <optgroup label=”value”></optgroup> Groups options together
Multiple line text input <textarea name=”value”></textarea> Text between tags is default text
Multi-line size <textarea rows=”#” cols=”#”></textarea> Rows in lines, cols in characters
Multi-line text-wrap <textarea wrap=”off, hard, soft”></textarea> Soft works best!

 

Formating Text

Name

Element

Comments

Bold <b></b> Specifically bold text
Strong emphasis <strong></strong> Generally displayed as bold
Italics <i></i> Specifically italic text
Emphasis <em></em> Generally displayed as italic
Bigger text <big></big> Makes text one size bigger
Smaller text <small></small> Makes text one size smaller
Headings <h#></h#> Replace # with number 1-6
Font style <font face=”font_name”></font> Deprecated. Name of the font e.g. arial
Font color <font color=”#rrggbb”></font> Deprecated
Font size <font size=”#”></font> Deprecated. Replace # with a number (default is 3) or +/- a number for relative size
Paragraph <p align=”left, right, center”></p> Align attribute optional, default alignment is

left. Closing tag optional

Centered <center></center> Deprecated. Text between tags is centered

 

Miscellaneous

Name

Element

Comments

Comments <!– comments go here –> Not displayed in browsers
Style sheet <style type=”text/css”></style> For Cascading Stylesheets
External style sheet <link rel=”stylesheet” href=”url”>
Meta information tags <meta name=”value” content=”value”> Hidden info within header
Horizontal rule <hr width=”#, %” size=”#” noshade> Width, thickness, solid line – all optional attributes

 

Tables

Name

Element

Comments

Table content <table></table> Cells and rows go between tags
Table border <table border=”#”></table> Size of border in pixels
Cell spacing <table cellspacing=”#”></table> Space between cells
Cell padding <table cellpadding=”#”></table> Space between cell content and edges
Table width <table width=”#, %”></table> Width in pixels or %
Table color <table bgcolor=”#rrggbb”></table> Netscape (4) colors cells individually
Table row <tr></tr> Table cells go between row tags
Table cell <td></td>
Cell with alignment <td align=”left, right, center” valign=”top,middle, bottom”></td> Horizontal alignment, vertical alignment
Cell spanning 2+ column <td colspan=”#”></td> Only required for more than one column
Cell spanning 2+ rows <td rowspan=”#”></td> Only required for more than one row
Cell width <td width=”#, %”></td> Width in pixels, or % of table
Cell color <td bgcolor=”#rrggbb”></td> Overrides table bgcolor, not in Netscape (4)
Header cells <th align=”left, right, center”></th> Content bold, align optional, default is center
Header spanning 2+ columns <th colspan=”#”></th> As td colspan
Header spanning 2+ rows <th rowspan=”#”></th> As td rowspan
Header width <th width=”#, %”></th> As td width
Header background color <th bgcolor=”#rrggbb”></th> As td bgcolor

 

Frames

Name

Element

Comments

Frame document content <frameset></frameset> Use instead of body tag
Rows of frames <frameset rows=”#, #, #,…”></frameset> Frames row sizes in pixels or %, separate rows by commas
Row size (relative) <frameset rows=”*”></frameset> Whatever screen is left after other frames
Columns of frames <frameset cols=”#, #, #,…”></frameset> Frame column sizes in pixels or %, separate cols by commas
Column size (relative) <frameset cols=”*”></frameset> Whatever screen is left after other frames
Frame borders <frameset border=”yes, no”></frameset> Borders on or off
Border width <frameset border=”#”></frameset> Border width in pixels
Border color <frameset bordercolor=”#rrggbb”></frameset>
Individual frames <frame src=”url”></frame> Location of document within frame
Frame name <frame name=”value”></frame> ID of the frame
Frame margins <frame marginwidth=”#” marginheight=”#”></frame> Width and height in pixels
Scrollbars <frame scrolling=”yes, no, auto”></frame> Scrollbars on, off or “if needed”
Non-resizable frames <frame noresize></frame> Visitors cannot move frame boundaries
“No frames” alternative <noframes></noframes> Shown in non-frames browsers