lick this button to open your browser.  Once it is open, return to the guide and click the 

"On The Web" buttons to see how the coding actually looks within your browser.

General

<HTML>...</HTML>

<HTML>
<HEAD>
<TITLE>Sam’s ClassRoom Home Page</TITLE>
t<H1>Welcome to my world</H1>
</HEAD>
<BODY>
This is the content of my web page.      
</BODY>
</HTML> 

<HEAD>...</HEAD>

<HEAD>
<TITLE>Sam’s ClassRoom Home Page</TITLE>
</HEAD>

<TITLE>...</TITLE>

<TITLE>Sam’s ClassRoom Home Page</TITLE>

<BODY>...</BODY> 

<BODY>
This is the content of my web page.      
</BODY>

Formatting

 <B>...</B>  Bold

<B>This text is bolded</B>

 <I>...</I>  Italics

<I>This text is in italics</I>

 <TT>...</TT>  Typewriter Text

<TT>This text looks like it came from a typewriter</TT>

 <BLINK>...</BLINK>  Blinking Text

<BLINK>This text is blinking</BLINK>

<BASEFONT SIZE=x>  Base Font Size

<BASEFONT SIZE=4>

 <FONT>...</FONT>  Font Modification

<FONT SIZE=+1 COLOR="#123123">This text will be bigger and a different color than the rest</FONT>

 <Hx>...</Hx>  Heading

<H1>Welcome to my world.</H1>

 <CITE>...</CITE>  Citation

<CITE>This citation sentence is in italics.</CITE>

 <CODE>...</CODE>  Code

<CODE>This code sentence is in a fixed-width font.</CODE>

 <DFN>...</DFN>  Definition

<DFN>This is definition sentence.</DFN>

 <EM>...</EM>  Emphasis

 <EM>This emphasis sentence should be in italics.</EM>

 <KBD>...</KBD>  Keyboard Entry

<KBD>This keyboard entry sentence is in a fixed-width font.</KBD>

<XMP>...</XMP>  Preformatted - No tags

<XMP><B>This sentence is in a fixed-width font with tags showing, (but not in bold text).</B></XMP>

<PRE>...</PRE>  Preformatted

<PRE>This is in a fixed   width    format.        You could not have spacing like this in normal HTML text.</PRE>

 <STRONG>...</STRONG>  Strong Emphasis

<STRONG>This strong emphasis sentence is bolded.</STRONG>

 <SAMP>...</SAMP>

<SAMP>This sentence is in a fixed-width font.</SAMP>

 <VAR>...</VAR>  Variable

<VAR>This variable sentence is in italics.</VAR>

 <ADDRESS>...</ADDRESS>  Address

<ADDRESS>
HTML Resource Guide / Jeremy Hall and Vince Shrader / hallj@ed.byu.edu / revised July 96 (in italics)
</ADDRESS>

Alignment

<Hx ALIGN=y></Hx>  See previous entry

<P ALIGN=y></P>  See entry below

 <BLOCKQUOTE>...</BLOCKQUOTE>  Block Quotation

My favorite poem is: 
<BLOCKQUOTE> 
Wander over mountain peaks<br> 
Rolling down through meadow's dawn<br> 
Breathing life its riches seek<br> 
Ponder not where time has gone</BLOCKQUOTE>
Do you have a favorite poem?

 <CENTER>...</CENTER>  Center

<CENTER>This text and graphic <IMG SRC"image.gif" ALIGN=BOTTOM> is centered.</CENTER>

Links & Images

 <A>...</A>  Anchor

<A HREF="http://www.byu.edu">BYU Home Page</A>   (Standard Link)

<A HREF="http://www.byu.edu"><IMG SRC="image.gif" WIDTH=25 HEIGHT=25 ALIGN=BOTTOM>BYU Home Page</A>   

(Standard Link with graphical icon)

<A HREF="mailto:emailaddress@host">Name</A>   

(Mailto Link)

<A HREF="#web">Move down the page (web)</A>

(Internal Link)

<A HREF="document.html#web">Web Projects</A>   
(Outside document and target name)

<A NAME="web"></A>   

(Target Name of Internal Link)
<H2>Web Projects</H2>

 <IMG>  Image

<IMG SRC=”images/photo.jpg”>   (Basic Image Tag Use)

<IMG SRC="images/photo.jpg" ALIGN=LEFT>   (Alignment of Image)

<IMG SRC="images/photo.jpg" ALIGN=LEFT WIDTH=25 HEIGHT=25>   (Dimensions of Image)

<IMG SRC="images/photo.jpg" ALIGN=LEFT WIDTH=25 HEIGHT=25 ALT="Our button bar">  (Alternate Text when image does not load)

<IMG SRC="images/photo.jpg" ALIGN=LEFT WIDTH=25 HEIGHT=25 ALT="Our button bar" USEMAP="#buttonbar">   (Including the client-side image map option)

 <MAP>...</MAP>  Client-Side Image Map

<MAP NAME="buttonbar">
<AREA SHAPE="rect" COORDS="10,10,49,49" HREF="about_us.html">
<AREA SHAPE="rect" COORDS="10,10,49,49" HREF="products.html">
<AREA SHAPE="rect" COORDS="10,10,49,49" HREF="index.html">
</MAP>

<IMG SRC="images/photo.jpg" ALIGN=LEFT WIDTH=25 HEIGHT=25 ALT="Our button bar" USEMAP="#buttonbar">   (Including the client-side image map option)

Dividers

 <BR>  Line Break

This is a line break<BR>
Without a white space in between<BR>

<P>...</P>  Paragraph

<P>This is an example of a paragraph.</P>   
(The </P> is optional)
<P>I’ve just created a space between this sentence and the one above.</P>

 <HR>  Horizontal Rule

<HR>

<HR WIDTH=50%>

<HR SIZE=4>

 <NOBR>...</NOBR>  No (Line) Break

<NOBR>This is a long line of text that would normally scroll onto the next line of the display screen, but does not because it is contained within the no break tags, and it is also a terrible run-on sentence.</NOBR>

 <WBR>  Word Break

<NOBR>This is a long line of text that would normally scroll onto the next line of the display screen, but does not because it is contained <WBR>(it breaks here because of the word break tag) within the no break tags, and it is also a terrible run-on sentence.</NOBR>

Lists

 <OL>  Ordered List

<OL>This is a numbered list of fruits
<LI>apple
<LI>banana
<LI>orange
</OL>

 <UL>...</UL>  Unnumbered (unorganized) List

<UL>This is an unnumbered list of fruits
<LI>apple
<LI>banana
<LI>orange
</UL>

 <DL>...</DL>  Definition List

<DL> 
<DT>HTML 
<DD> Hyper Text Markup Language 
</DL> 

 <DIR>...</DIR>  Directory List

<DIR>This is an unnumbered list of fruits
<LI>First Location
<LI>Second Location
<LI>Third Location
</DIR>

 <MENU>...</MENU>  Menu List

<MENU>This is an unnumbered list of fruits
<LI>First menu option
<LI>Second menu option
<LI>Third menu option
</MENU>

 <LI>  List Item

<UL>This is an unnumbered list of fruits
<LI>apple
<LI>banana
<LI>orange
</UL>

 <DT>  Definition Term

<DL> 
<DT> HTML 
<DD> Hyper Text Markup Language 
</DL> 

 <DD>  Definition Data

<DL> 
<DT> HTML 
<DD> Hyper Text Markup Language 
</DL> 

Tables
 <TABLE> ... </TABLE>  Simple Table

<TABLE>

<CAPTION>Teacher Name List</CAPTION>

<TR>

<TH>Name</TH>

<TH>School</TH>

</TR>

<TR>

<TD>Joe Roberts</TD>

<TD>Middle High</TD>

</TR>

<TR>

<TD>Sarah Plantain</TD>

<TD>Rutherford High</TD>

</TR>
</TABLE>

 <TABLE> ... </TABLE>  Table with all options included

<TABLE WIDTH=100% BORDER=2 CELLSPACING=5 CELLPADDING=0>

<CAPTION>Teacher Name List</CAPTION>

<TR ALIGN=LEFT>

<TH>Name</TH>

<TH>School</TH>

</TR>

<TR>

<TD ALIGN=LEFT VALIGN=TOP WIDTH=25%>Joe Roberts</TD>

<TD ALIGN=CENTER VALIGN=MIDDLE WIDTH=75%>Middle High</TD>

</TR>

<TR>

<TD ALIGN=LEFT VALIGN=TOP WIDTH=25%>Sarah Plantain</TD>

<TD ALIGN=CENTER VALIGN=MIDDLE WIDTH=75%>Rutherford High</TD>

</TR>

<TR>

<TD COLSPAN=2 ALIGN=CENTER>This is a row of text that spans both columns</TD>

</TR>
</TABLE>

Forms

 <FORM>...</FORM>   Form

<FORM ACTION="action URL" METHOD=GET/POST>

Enter your name:<BR>

<INPUT NAME="name" VALUE="Joe Shmoe" TYPE="text" SIZE=30 MAXLENGTH=30><P>

Select you gender:<BR>

<INPUT NAME="Gender" VALUE="male" TYPE="radio" SELECTED> Male <BR>

<INPUT NAME="Gender" VALUE="female" TYPE="radio"> Female<P>

<INPUT VALUE="Submit Your Entry" TYPE="submit">

<INPUT VALUE="Clear This Form" TYPE="reset">
</FORM>

 <INPUT>  Input (Variables)

Text Field

<INPUT NAME="name" VALUE="Joe Shmoe" TYPE="text" SIZE=30 MAXLENGTH=30>

Radio Button

<INPUT NAME="Gender" VALUE="male" TYPE="radio" SELECTED> Male 

Check Box

<INPUT NAME="option1" VALUE="cool" TYPE="checkbox" checked>

Selection List/Menu

<SELECT NAME="The_List" MULTIPLE SIZE=3>

<OPTION SELECTED>Option 1

<OPTION>Option 2

<OPTION>Option 3

</SELECT>

 <TEXTAREA>...</TEXTAREA>   Form Text Area

<TEXTAREA NAME="comments" ROWS=4 COLS=50>
Enter your comments here!
</TEXTAREA>

Miscellaneous

 Frames - (Code modified from Netscape example page)

<FRAMESET COLS="50%,50%">

<FRAMESET ROWS="50%,50%">

<FRAME SRC="cell.html" SCROLLING="yes">

<FRAME SRC="cell.html" NORESIZE>

</FRAMESET>

<FRAMESET ROWS="33%,33%,33%">

<FRAME SRC="cell.html">

<FRAME SRC="cell.html">

<FRAME SRC="cell.html">

</FRAMESET>
</FRAMESET>

<NOFRAMES>

This page is designed for a frames-capable browser.  Please see our <A HREF="noframes.html">noframes version</A>.
</NOFRAMES>

<!--  -->   Comments

<!--This is a comment field that does not appear on the browser screen-->

<META>   Meta Indexing

<META  name="description" content="We specialize in grooming pink poodles.">
<META  name="keywords" content="pet grooming, Palo Alto, dog">