ce="helvetica" color="000055"><EM>This text will be shown in bold emphasis.</EM>
HTML BASICS FOR EVERYONE, BY VICTOR M. PONCE
Tag Function 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, if available.

Close TITLE tag is absolutely 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 to the right. <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 of text, link, active link, and visited link. 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> --- Used 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> Used 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 (target) 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>
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, 0, 1, 2, 3, 4, 5, 6, 7.

COLOR could be any valid 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 2.

COLOR could be any valid color such as #000000 (black). Default is gray (#aaaaaa).

 <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.

 Several OL tags can be nested within. <OL>
    <P><LI>. . .
    <LI>. . .
</OL>
P Delimit paragraph. ALIGN
STYLE		 <P> </P> Close P tag is optional, because new P tag resets paragraph. ALIGN="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. <FONT COLOR="#AA0000"> <SUB>2</SUB></FONT>
SUP Superscript --- <SUP> </SUP> Place as needed for superscript. Place embedded within FONT tag. <FONT COLOR="#AA0000"> <SUP>3.17</SUP></FONT>
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 valid #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="SQUARE", CIRCLE, A (ALPHABETIC CAPITAL), or a (alphabetic lower case).

Several UL tags can be nested within.

<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.  
100524