Needs To U: HTML TAGS QUICK GUIDE

Quick Guide to HTML Tags

REQUIRED TAGS
Document Tag	<html></html>	Top and bottom of doc
Head Section	<head></head>	Gotta have at top of doc (after <html>)
Title	<title></title>	Goes in the Head Section
Body Section	<body></body>	Sandwiches the body of page

HEADING AND TEXT FORMATTING
Heading	<h?></h?>	H1 thru H6 (largest thru smallest)
Bold	<b></b> or <strong></strong>	This is bold
Italic	<i></i> or <em></em>	This is italic
Typewriter	<tt></tt>	Monospaced font
Center	<div align="center" ></div>	Centered
Subscript	<sub></sub>	H₂O
Superscript	<sup></sup>	E=mc²
Font Size	<font size="?"></font>	1 to 7 (smallest to largest)

ALIGNMENT / SPACING
Align Left	align="left"	Alignment works with text, graphics, headings, tables, paragraphs
Align Center	align="center"
Align Right	align="right"
Paragraph	<p></p>	Gives space before a paragraph
Line Break	<br>	New line or carriage return
Block Quote	<blockquote></blockquote>	Indents a block of text

GRAPHICS
Display graphic	<img src="img/name.xxx">	.xxx = .gif or .jpg
Dimensions	<img src="img/name.xxx" width="?" height="?">	Scale graphic (in pixels)
Border	<img src="img/url" border="?">	Make border 0 if linked and you still wish no border

HORIZONTAL RULES
Horizontal Rule	<hr>	Shaded rule across page
HR Thickness	<hr size="?">	Thickness of rule in pixels
HR Width	<hr width="?">	Width of rule in pixels
HR Width Percent	<hr width="?%">	Percentage of page width
Solid Line	<hr noshade>	Eliminates shading

LISTS
Unordered List	<ul> <li></li> </ul>	Put <li> around each list item
Bullet List	<ul type="disc">	Bullet in front of each entry in list
Circle Bullets	<ul type="circle">	Circle in front of each entry in list
Square Bullets	<ul type="square">	Square in front of each entry in list
Ordered List	<ol> <li></li> </ol>	Numbers the list items
Definition List	<dl> <dt></dt> <dd></dd> </dl>	DT=Data Term, DD=Data Definition

BACKGROUNDS & COLOR
Tiled Background	<body background= "filename.xxx">	.xxx = .gif or .jpg
Background Color	<body bgcolor="#$$$$$$">	$ represents hexadecimal code
Text Color	<body text="#$$$$$$">	$ represents hexadecimal code
Link Color	<body link="#$$$$$$">	$ represents hexadecimal code
Visited Link	<body vlink="#$$$$$$">	$ represents hexadecimal code
Active Link	<body alink="#$$$$$$">	$ represents hexadecimal code
The 6 digits used for background color and any other color specification are hexadecimal code. The best way to find out the hexadecimal code for the color you want is to use the color palette from any of the HTML editors out there, including Homesite, BBEdit, Dreamweaver, or go into Photoshop and Fireworks. Select the color you want and then look for the Hexadecimal code in the Info palette of the program you are using.

LINKS
Link to another page	<a href="page.html"></a>	Link to another page in your site
Link to another site	<a href="url"></a>	Requires full address; e.g. "http://www.yahoo.com"
Link to target in page	<a href="#name"></a>	Moves to another location in current page
Link to target in other site	<a href="url#name"></a>	Links to specific location in page outside your site
Define target in document	<a name="name"></a>	Put just above where you want page to display
Use graphic as link	<img src="img/name.xxx">	Embed this code in <a href="?"> tag
Alternate name	<img src="img/url" alt="xxx">	xxx = Description of graphic

SPECIAL CHARACTERS
Special Character	&name; or &#?;	? is numeric ASCII code
<	< or <	Complete Character Chart
>	> or >
&	& or &
é	é or é
Non-Breaking Space	or

TABLES
Define Table	<table></table>	Sandwiches table
Desired Width	<table width="?">	In pixels
Width Percent	<table width="?%">	Percentage
Table Border	<table border="?">	In pixels
Table Cell	<td></td>	Think of it as Table Data
Table Row	<tr></tr>	New Table Row
Cell Spacing	<table cellspacing="?">	In pixels
Cell Padding	<table cellpadding="?">	In pixels
Row Horiz. Alignment	<tr align="left,center,right">
Row Vert. Alignment	<tr valign="top,middle,bottom">
Data Horiz. Alignment	<td align="left,center,right">
Data Vert. Alignment	<td valign="top,middle,bottom">
Columns to Span	<td colspan="?">	For data to stretch across columns
Rows to Span	<td rowspan="?">	For data to go deeper than one column
Desired Width	<td width="?">	In pixels
Table Header	<th></th>	Bold, centered table data
Table Caption	<caption></caption>

HTML Special Characters

CHARACTER

NUMERIC CODE

NAME CODE

DESCRIPTION

Ampersand

Less than

Greater than

 through  are codes that should not be used (illegal Unicode)

Non-breaking Space

Inverted exclamation

Cent sign

Pound sterling

General currency sign

Yen sign

Broken vertical bar

Section sign

Umlaut (dieresis)

Feminine ordinal

Left angle quote, guillemotleft

Not sign

Soft hyphen

Registered trademark

Macron accent

Degree sign

Plus or minus

Superscript two

Superscript three

Acute accent

Micro sign

Paragraph sign

Middle dot

Cedilla

Superscript one

Masculine ordinal

Right angle quote, guillemotright

Fraction one-fourth

Fraction one-half

Fraction three-fourths

Inverted question mark

Capital A, grave accent

&Aacute

Capital A, acute accent

Capital A, circumflex accent

Capital A, tilde

Capital A, dieresis or umlaut mark

Capital A, ring

Capital AE dipthong (ligature)

Capital C, cedilla

Capital E, grave accent

Capital E, acute accent

Capital E, circumflex accent

Capital E, dieresis or umlaut mark

Capital I, grave accent

Capital I, acute accent

Capital I, circumflex accent

Capital I, dieresis or umlaut mark

Capital Eth, Icelandic

Capital N, tilde

Capital O, grave accent

Capital O, acute accent

Capital O, circumflex accent

Capital O, tilde

Capital O, dieresis or umlaut mark

Multiply sign

Capital O, slash

Capital U, grave accent

Capital U, acute accent

Capital U, circumflex accent

Capital U, dieresis or umlaut mark

Capital Y, acute accent

Capital THORN, Icelandic

Small sharp s, German (sz ligature)

Small a, grave accent

Small a, acute accent

Small a, circumflex accent

Small a, tilde

&aamul;

Small a, dieresis or umlaut mark

&aring

Small a, ring

Small ae dipthong (ligature)

Small c, cedilla

Small e, grave accent

Small e, acute accent

Small e, circumflex accent

Small e, dieresis or umlaut mark

Small i, grave accent

Small i, acute accent

Small i, circumflex accent

Small i, dieresis or umlaut mark

Small eth, Icelandic

Small n, tilde

Small o, grave accent

Small o, acute accent

Small o, circumflex accent

Small o, tilde

Small o, dieresis or umlaut mark

Division sign

Small o, slash

Small u, grave accent

Small u, acute accent

Small u, circumflex accent

Small u, dieresis or umlaut mark

Small y, acute accent

Small thorn, Icelandic

Small y, dieresis or umlaut mark

&tilde;

Tilde

–

Endash

—

Emdash

‘

Left Single Quote

’

Right Single Quote

“

Left Double Quote

”

Right Double Quote

€

Euro

™

Trade mark

NOTE: Some older browsers may not always render characters properly. Netscape 4 for instance sometimes will improperly display a named code, while it will display the numbered code correctly. Be sure to test to make sure codes display properly in the desired browsers.

TYPOGRAPHICALLY
CORRECT

One of the most common design mistakes is substituting inch and foot marks for quotation marks and apostrophes. This is especially true for the web as it seems many web designers have little background in typography. But it’s not their fault really, the keyboard is designed to type foot marks and inch marks, not the real typographic characters!

However, you CAN get real quotes and apostrophes quite easily—just use the keyboard equivalents listed below. These keyboard equivalents (for PC and Mac) work in any program—Dreamweaver, Flash, Photoshop, Fireworks, etc.

COMMON MISTAKE	CORRECT	PC KEYSTROKE	MAC KEYSTROKE	HTML CODE	EXPLANATION
foot mark (or dumb apostrophe)	smart apostrophe	Alt 0146 (hold Alt while typing numbers on keypad, then releaseAlt)	Option-Shift-]	’	Wherever you see a single quote or apostrophe, a curly or “smart” apostrophe should be used. Most of the world uses the footmark because that is what is on the keyboard.
inch mark (or dumb quote)	smart quotation	Alt 0147 (for left quote) Alt 0148 (for right quote)	Option-[ (for left quote) Option-Shift-[ (for right quote)	“ (left) ” (right)	Quotation marks are usually replaced by inch marks simply because the typist doesn’t know there is a difference. There is!
dash or hyphen	endash	Alt 0150	Option-Hyphen	–	The endash is used to signify a “through” relationship, as in marking dates such as Monday through Friday, i.e. Monday–Friday.
two dashes	emdash	Alt 0151	Option-Shift- Hyphen	—	The emdash is used instead of two dashes where someone wants to indicate a pause, or to separate a clause in a sentence—like this—from the rest of the sentence. It is similar to a parenthetical phrases (such as this).

Needs To U

Needs To U

Thursday, February 17, 2011

HTML TAGS QUICK GUIDE

1 comment: