| HTML BASICS FOR EVERYONE, BY VICTOR M. PONCE |
| Tag |
Use |
Attributes |
Open tag |
Close tag |
Comments |
Useful tips |
Example |
| HTML |
To define range of HTML code |
None |
<HTML> |
</HTML> |
Place at the beginning and end of HTML code. |
Use always. |
<HTML>
. . .
. . .
</HTML> |
| HEAD |
To define range of HEAD portion of HTML code |
None |
<HEAD> |
</HEAD> |
Place immediately after HTML tag. |
Use only when needed, particularly to define CSS code within HEAD tags. |
<HTML>
<HEAD>
. . .
. . .
</HEAD>
. . .
. . .
</HTML> |
| TITLE |
To specify page title. |
None |
<TITLE> |
</TITLE> |
Place within HEAD tags. Close TITLE tag is required by some browsers (Explorer). |
Not required, but use to properly define title, topic, and/or key words for use by search engines |
<HEAD>
<TITLE>
This is my title page, very important for search engines, my name
</TITLE>
. . .
</HEAD> |
| META |
To specify keywords to the search engines. |
NAME
CONTENT |
<META> |
--- |
Below HTML tag. Optional. To specify keywords. |
Keywords are listed in the CONTENT attribute, as shown in the example. |
<META NAME="keywords" CONTENT="red,orange,car"> |
| BODY |
To define range of BODY portion of HTML code. |
BACKGROUND
BGCOLOR
TEXT
LINK
ALINK
VLINK |
<BODY> |
</BODY> |
Place immediately after open HTML tag or close HEAD tag, if present.
BACKGROUND attribute (optional) defines image and overrides BGCOLOR. All other attributes (optional) specify color.
Default colors apply.
|
Always needed. |
<BODY BACKGROUND="mybackground.jpg" BGCOLOR="#445588" TEXT="#332211" LINK="#116688"
ALINK="#882200" VLINK="#440033">
. . .
. . .
. . .
</BODY> |
| IMG |
To specify an image. |
SRC
WIDTH
HEIGHT |
<IMG> |
--- |
Use to specify an image.
SRC attribute required.
Can override native width and height with (optional) WIDTH and HEIGHT attributes.
|
Needed to specify an image. |
<IMG SRC="myimage.jpg">
<IMG SRC="myimage.jpg" WIDTH="600"> |
| A |
To specify (access) a link and its display. |
HREF
NAME
TARGET |
<A> |
</A> |
Use to specify a link and its display.
HREF attribute required when NAME is not used.
NAME (optional) is the anchor name that refers to a section in the code.
TARGET attribute is optional. TARGET value is the name of a different window.
|
Needed to specify a link (html file) and its display by browser. |
<A HREF="mylink.html">This is the display</A>
<A HREF="mylink.html" TARGET="this_page">This is the display</A>
<A NAME="section02"></A>
|
| B |
Bolds text within B tags. |
None |
<B> |
</B> |
Place at the beginning of string to be emphasized. |
Use when needed for emphasis. |
<B>This text will be shown in bold.</B> |
| BR |
Carriage return; go to next line. |
None |
<BR> |
--- |
Place as needed. |
|
. . .
<BR>
. . .
|
| BLOCKQUOTE |
Selects paragraph to indent. |
None |
<BLOCKQUOTE> |
</BLOCKQUOTE> |
Place as needed. |
|
<BLOCKQUOTE>
. . .
. . .
</BLOCKQUOTE> |
| CENTER |
Centers on page all code in between tags, including text and images. |
None |
<CENTER> |
</CENTER> |
Place as needed. |
|
<CENTER>
. . .
</CENTER> |
ce="helvetica" color="000055"><EM>This text will be shown in bold emphasis.</EM>
| DIV |
To specify portion of code in CSS |
CLASS |
<DIV> |
</DIV> |
Used in Cascade Style Sheets (CSS). |
To customize a portion of the code embedded within DIV tags. |
<DIV CLASS="NARROW"> . . . </DIV> |
| FONT |
To specify font characteristics |
FACE
SIZE
COLOR
|
<FONT> |
</FONT> |
To specify face, size, and color of font. |
FACE="HELVETICA" or ROMAN, BOOKMAN, COURIER, and others.
SIZE could be +0, +1, +2, +3, +4, -1, -2
COLOR could be any color such as #000000 (black). |
<FONT FACE="HELVETICA" SIZE="+1" COLOR="#000055">This is the paragraph that gets font face, size, and color.</FONT> |
| HR |
Ruler, or line across the page. |
SIZE COLOR |
<HR> |
--- |
To specify a ruler. |
SIZE could be 1, 2, 3, 4, 5 pixels. Default is 1. COLOR could be any color such as #000000 (black). Default is gray. |
<HR>
<HR SIZE="2" COLOR="#CCCCCC"> |
| I |
Italices text within I tags. |
None |
<I> |
</I> |
Place at the beginning of string to be italized. |
Use when needed for soft emphasis. |
<I>This text will be shown in italics.</I> |
| LI |
List item |
--- |
<LI> |
</LI> |
Typically used embedded within UL or OL tags. |
LI resets previous LI. Close LI tag is not required. |
<LI>This text is part of itemized listing.</LI>
<LI>Another example of itemized listing. |
| NOBR |
Delimits a no-break string |
None |
<NOBR> |
</NOBR> |
Place as needed. |
Defines string not to be broken. |
<NOBR>inseparable phrase</NOBR> |
| OL |
Ordered itemized list. |
--- |
<OL> |
</OL> |
To list numbered items.
Leading P tag will skip a line. Leading BR tag will go to next line. |
Can nest several OL tags. |
<OL><P><LI>. . .
<BR><LI>. . .
</OL> |
| P |
Delimit paragraph. |
ALIGN
STYLE |
<P> |
</P> |
Close P tag is optional, because new P tag resets paragraph. |
ALIGN could be equal to RIGHT, LEFT, CENTER, or JUSTIFIED.
STYLE is equal to 'text-align:center;line-height:100%'
line-height could be greater or less than 100%.
Two or more P tags together amount to only one P tag.
To space vertically, sequence one or more <P> tag(s) with <BR> tag(s). |
<P>This is a paragraph.</P>
<P STYLE='text-align:center;line-height:100%'>
This is a paragraph with style attribute.</P>
|
| PRE |
Uses preformatted text. |
--- |
<PRE> |
</PRE> |
Use when same input form is required as output form. |
Use sparingly, only when absolutely necessary. |
<PRE>1
22
333
4444
55555
666666
7777777
88888888
999999999 </PRE> |
| SUB |
Subscript |
--- |
<SUB> |
</SUB> |
Place as needed for subscript. |
Place embedded within FONT tag. |
<SUB>2</SUB> |
| SUP |
Superscript |
--- |
<SUP> |
</SUP> |
Place as needed for superscript. |
Place embedded within FONT tag. |
<SUP>3.17</SUP> |
| TABLE |
Specifies tables (arrays) of data |
ALIGN
WIDTH
HEIGHT
BACKGROUND
BORDER
BORDERCOLOR
BGCOLOR
CELLPADDING
CELLSPACING |
<TABLE> |
</TABLE> |
Very important tag for proper display and formatting of webpage. |
ALIGN="LEFT" or RIGHT, CENTER. BACKGROUND could be any valid image. BGCOLOR and BORDERCOLOR could be any #aaccbb color. WIDTH and/or HEIGHT in pixels or %.
BORDER, CELLSPACING, and CELLPADDING in pixels.
|
<TABLE BGCOLOR="aabbcc" BORDER="2" CELLPADDING="10">
<TR BGCOLOR="aa0000"><TD> . . . </TD></TR>
<TR><TD WIDTH="50"> . . . </TD></TR>
</TABLE> |
| TD |
Table data in row |
ALIGN
BGCOLOR
WIDTH
HEIGHT
VALIGN
ROWSPAN
COLSPAN |
<TD> |
</TD> |
To specify table data within row. |
ALIGN="LEFT", or RIGHT, CENTER. BGCOLOR could be any #aaccbb color. WIDTH and/or HEIGHT in pixels or %. VALIGN="TOP" or CENTER, BOTTOM.
ROWSPAN and COLSPAN follow TABLE tag syntax. |
<TD> . . . </TD>
<TD ALIGN="CENTER" BGCOLOR="AA0000" WIDTH="15%" ROWSPAN="5"> . . . </TD>
|
| TR |
Table row |
BGCOLOR |
<TR> |
</TR> |
To specify table row. |
TD tags are embedded within TR tag.
TR and TD tags are embedded within TABLE tag. |
<TR><TD> . . . </TD></TR>
<TR BGCOLOR="AA0000"><TD> . . . </TD></TR>
|
| U |
Delimits a string to be underlined |
None |
<U> |
</U> |
Place as needed. |
Defines string to be underlined. |
<U>underlined phrase</U> |
| UL |
Unordered itemized list |
TYPE |
<UL> |
</UL> |
To list unnumbered items. Leading P tag will skip a line. Leading BR tag will go to next line. |
TYPE could be SQUARE, CIRCLE, A, a.
Can nest several UL tags. |
<UL TYPE="SQUARE"> <P><LI> . . .
<BR><LI> . . .
</UL> |
| ! |
Comment tag |
--- |
--- |
--- |
To comment code. |
|
<!This line will be ignored by the HTML interpreter.> |
| nbsp |
White horizontal space |
--- |
|
|
& nbsp ; |
Used to move cursor one space to the right.
Can be used repeatedly. |
|