HTMLCOOK -
Main Page - lists all articles and tutorials

UK2 for domains and webhosting • Windows Servers: £50 off plus free WebsiteSpark™ • Business Booster Bundle - Get both the Search Engine Submission tool (usually £39.95) and Business Directory entry (usually £12.50) for an amazing £39.95! • Domain Names Offer - Get a .com and .co.uk together and save 12% on the total price!	HTMLCOOK sponsored by Voucher Freebies
	UK Internet access deals

HTML TAG Reference Sheet

Print this page Print (In total this is about 6 A4 pages)
or bookmark this page (Hit Ctrl D or Click the Button)

Tags in all files
<Html>....</Html>	The <html> tags tells the browser that HTML code is to follow
<Head>.....</Head>	The head section contains: title of web page <title> </title> info for search engine <meta> </meta> style definitions for the whole document <style> </style>
<Body>.....</Body>	The Body section contains: The content of the web page Options: bgcolor = Specifies the background color for the entire document. text = Specifies color of text for page link = Specifies color of unvisited hypertext links. vlink = Specifies the color for visited hypertext links. alink = Specifies color for hypertext links at the moment the user clicks on the link. (not used much) background = Specifies the URL for an image that will be used to tile the background. (more later)
Tags in the Head
<Title>..... </Title>	Title: text between the <title> tags appears in the top bar of the browser
<Style>.... </Style>	Style: Defines style definitions for the entire document Ex: <style> p {text-indent .5in; margin-left 1in; font-size 12pt} </style> (see sheet)
<Meta>	Meta: Defines keywords, author, expiration date, and reply-to information to HTTP server. Used by search engines to categorize web site Options: name = keywords, author, expires, or repy-to Contents= value cooresponding to the name Ex. <META name="Keywords" CONTENT="Fred, Barney"> <META name="author" CONTENT="Jennifer Ross">
Tags in the Body
Formatting
<h1>....</h1>	Headings: Formats text to one of 6 sizes (<h1> being the largest, and <h6> being the smallest. Inserts a carriage return after end tag.
<br>	Break: Starts the next line. (no </br> tag)
<p>	Paragraph: Creates a break and inserts a blank line (no </p> tag) Options: align= center, right or left
<hr>	Horizontal Rule: Inserts a line across the screen Options: width = 40% (indicates % of window width to extend) align = left, right or center (where to position line) size = 40 (number from 1-175 indicating pixel width noshade (if included the line is filled in) ex. <HR WIDTH=80% ALIGN=center SIZE=10 NOSHADE>
<pre> ..... </pre>	Preformatted: text inside the <pre> and </pre> tags wil appear excatly as types in, carriage returns and spaces will be displayed in the browser. Tables are a better way to organize data
<address>....</address>	Address: Used to signify the owner and contact information of the file. Text inside the <address> tags will appear in Italic. Many search engines pull out this information.

More Formatting
<b>.....</b> <I>.....</I> <s>.....</s> <u> ..... </u> <sub>..... </sub> <sup>..... </sup> <blink>..... </blink> <tt> .....</tt> <cite>.....</cite> <em> ....</em <strong> .....</strong>	Bold: Makes text between tags bold Italic: Makes text between tags italic Strike through: Makes text between tags strike though. Underline: Makes text between tags underlined Subscript: Makes text between tags _subscript Superscript: Makes text between tags: ^superscript Blink: Makes text between tags blink (Only in Netcsape) Typewriter text: : Makes text between tags appear in typewriter text Citation: Creates a citation, usually italic Emphasis: Makes text between tags appear either italic or bold Strong: Makes text between tags appear either italic or bold
<font>...... </font>	Font: sets the size color and face of the font to be used Options: size = 1 (specify size 1-7) OR size = +1 (increment/decrement size from current size) OR size = 12pt (specify in pt size - but user must have font installed) color = (specify 16 named colors or hexadecimal code) 16 colors are: black, white, navy, silver,blue,maroon, purple, red, fuchsia, green, olive, teal, lime, aqua, olive, gray, yellow face = "arial" (list font name. Courier, Helvetica, etc.) user must have that font installed on their machine Ex. <font size=3 color=red face="courier">here's my red size 3 courier text </font>
<! Text here>	Comment: Any text inside the <! > is ignored and can be used to comment your code.
Lists
<ol> .... </ol>	Ordered lists . Creates a numbererd list of items(1,2,3 a,b,c i,ii, iii, etc) Options inside the <ol> tag: type = 1,A,a,I,i (indicates format to number the list with(1,2,3 a,b,c i,ii, iii, etc) start = 3 (indicate what number to start the list with (use numbers 1,2,3,4 even if type is not numeric) compact (will reduce line spacing between <li> ) Ex. <ol type=A start=2>.... </ol> Tags used between <ol>...</ol> <li> indicates the start of a new element in the list (begins a new line) <lh>Creates a heading in bold, is aligned with the bullets
<ul>......</ul>	Unordered list: Creates a bulleted list Options inside the <ul> tag: type = disc, square, or circle (indicates type of bullet) compact (will reduce line spacing between <li> ) Tags used between <ol>...</ol> <li> indicates the start of a new element in the list (begins a new line) <lh>Creates a heading in bold, is aligned with the bullets
<dl>......</dl>	Description list - Creates a description list with terms and definitions. The definitions are indented from the terms. Tags used between <dl>...</dl> <dt> Is like the <li> tag and starts a new element <dd> starts the description of the item listed in the <dt> tag, and is indented.

Tables
<table>....</table>	Table: Indicates the start and end of the table. It's options apply to the whole table Options: border= 1 (set border width, number 0 gives no border) bgcolor=red (set background color of all cells) bordercolor=blue (sets color of border around table) bordercolordark=navy (used for 3-d effect with next tag) bordercolorlight=grey (used for 3-d effect with previous tag) width = 30% OR width = 300 (sets width of table as % of window or in pixels) cellspacing = 2 (number 0-255 which sets the cell border width cellpadding = 3 (number 0-255, space between border and cell contents)
<tr>.....</tr>	Table row: Starts and end the row in a table Options: bgcolor = red (sets color of row background, overrides table background) align = left, center, or right (horizontal alignment of cells in the row) valign = top, middle, bottom (vertical alignment of each cell in the row)
<td>....</td>	Table Data: Starts and ends the data to go into one cell of the table Options: bgcolor = red (sets color of cell background, overrides row background) align and valign (same as above but acts only on the cell) width = 20% or width=100 (set width of cell as either percent of whole row, or as exact pixel size) height = 50 (sets height of cell in pixels) (if conflicts with other cells in the row, largest one wins) rowspan = 2 (integer specifies the number of rows spanned by this cell, defaults to one. colspan = 2 (integer specifies the number of columns spanned by this cell, defaults to one.
<th>.......</th>	Table Heading: Works same as <td> but text will appear bold and centered. All options work the same as for <td>
Images
<img src="filename.gif">	Image: Inserts the image filename. Can reference the image with entire URL or relative directory path. Options: alt="text here" (gives text alternative to image) width= 300 or width=50% (gives width of picture in either pixels or % of window - can be used to resize image, height = 200 or height=20%- gives height of image in pixel or % of window - can be used to resize image, align = top, middle, bottom, left or right (sets image location relative to text) hspace = 20 - gives horizontal pixel distance between image and text vspace = 10 - gives vertical pixel distance between image and next object border = 2 - gives thickness of border in pixels around image (using border=0 suppresses border Ex. <img src="me.jpg" align=left width=200 heigth=100 alt="picture of me">
Links
<a href="URL">...</a>	Hyperlink: Creates a hyperlink to the given URL. Text between tags is underlined to indicate it's a link.
<a href="mailto:EMAIL"> .....</a>	Mailto: Creates a pop-up mailto box addressed to the person listed as EMAIL
<a name="NAME">....</a>	Anchor: Creates an anchor within in a document that can be linked too. Useful in long pages
<a href="#NAME">....</a>	Link to Anchor: Links to the anchor location from elsewhere in the document
<a href="file.html#NAME"> .....</a>	Links to Anchor: links to anchor in html file file.html

Although we don't like Frames we have included this brief section.

Frames
<frameset>.... </frameset>	Frame Set: Defines the number, size and properties of the frames. Each frame can be divided into rows or columns. Either ROWS or COLS must be included inside the tag Options: Frameborder=no - (removes the border division between frames) - default is yes Border =3 - (sets border width, when set to zero ensures seamless frames when used with frameborder=no) Bordercolor = red (sets border color using named colors or RGB numbers) Framespacing = 2 (sets space between border and frame content. If set to zero makes seamless frame)
<frame src ="page.html">	Frame Source: Names the html file to put in the frame specified by the frameset Options: name = "label" - assigns a name to the current frame. These are needed to link properly to the frame! src = URL - specifies the initial document in the frame. noresize When present, tells the user that the frame must not be re-sizeable. scrolling = auto\|yes\|no yes will always insert scroll bars, auto will insert then if content exceeds the frame space, and no will not insert them no matter what! frameborder = 1\|0. A 1 tells the user agent to draw a separator between this frame and every adjoining frame, a 0 tells the user agent not to draw a separator between this frame and every adjoining frame. marginwidth = length specifies the amount of space to be left between the frame's contents in its left and right margins. The value must be greater than one pixel. Default value depends on the user agent. marginheight = length specifies the amount of space to be left between the frame's contents in its top and bottom margins. The value must be greater than one pixel. The default value depends on the user agent.
<noframes>... </noframes>	No Frames: Between these tags place the code that will appear if the browser doesn't understand frames.
<a href=http://www.uop.edu target = "framename">....</a>	Link to Target: Opens the link in the named frame. Special names include "_blank" which open the link in the full window and "_blank" which opens the link in a new browser window. Target can be added to image maps where the URL is listed.