HTML Quick Reference
HTML - HyperText Mark-up Language controls how the webpage looks. HTML uses tags to tell a web browser how to display the text and images.
  • Tags are designated by the angle brackets. <TAG>
  • Most tags come in pairs.  <TAG> </TAG> A slash, /, indicates an end tag.
  • Tags affect whatever is between them.  <TAG> Stuff in the tag </TAG>
    • Most webpage editors handle tags automatically and behind the scenes, so you may never have occasion to use them. So why learn about tags? Tags to Structure a Webpage:
    There are 3 basic tags used give a webpage it's basic structure:
    <HTML></HTML> Webpages start by declaring that they are in HTML.
    <HEAD></HEAD> The Head contains information about the page that does not display, such as a page title.
    <BODY></BODY> Text in the Body is what displays in the browser.
    The <HTML>, <HEAD>, and <BODY> tags are arranged as follows:
    <HTML>
    <HEAD>
    <TITLE>Put the Title Here</TITLE>
    </HEAD>
     
    <BODY>
    All the page content goes here. See below for Tags to use in the Body.
    </BODY>
    </HTML>
    Spacing and Lines
    Webpages automatically display all text in one block with one space between each word unless you add tags which control the layout and spacing.
    <BR> Break.  Displays text on the next line. Note that there is no end tag </BR>
    The HTML: Displays as:
    Dog<BR>Cat<BR>Bird Dog
    Cat
    Bird

    <P> Paragraph. Leaves a blank line between the text before and after the paragraph tag. Note that there is no end tag </P>

    The HTML: Displays as:
    Dog<P>Cat<P>Bird Dog

    Cat

    Bird

    <CENTER> Centers the text.

    <CENTER>Center the text.</CENTER>

    <HR> Horizontal rule (a line).  Note there is no </HR> tag.

    Text Appearance
    Here are a handful of tags you can use to add variation to your text appearance.
    <B>Bold</B>
    <I>Italic</I>
    <U>Underline</U>

    <BLOCKQUOTE>

    Block of indented text
    </BLOCKQUOTE>

    <FONT SIZE=9>Largest lettering</FONT>

    <FONT SIZE=1>Smallest lettering</FONT>


    Lists
    Lists let you vary the display of text by indenting and adding numbers or bullets to list items.  Lists have tags to designate the start and end of a list, such as <OL> and </OL> for ordered lists, and tags to designate each list item, such as <LI>.

    <OL>Ordered list. Each item in the list is numbered.
    1. <LI>First list item.  Note there is no </LI> tag.
    2. <LI>Second list item.
    </OL>

    <UL>Unordered list. Each item has a bullet. </UL>

    <DL>Definition list.  There are Definition Terms and Definitions. Each Term may have more than one definition.
    <DT>Term one.  Each term displays as normal text. Note there is no </DT> tag.
    <DD>Definition one.  Each definition displays as indented text.  Long definitions wrap around and indent. Note there is no </DD> tag.
    <DD> Definition two.
    <DT>Term two.
    <DD> Definition one.
    </DL>


    Links and Images
    What's a webpage without links and images? They are easier to add than you think.

    <A HREF="http://www.address.com">Link name or description.</A>
    HREF stands for  Hypertext Reference.  The hypertext reference is a link to whatever web address you put in the quotation marks. The A stands for anchor.  Whatever you put between the <A HREF> and </A> displays as a link.  So, in the example above all the user  sees is:
    Link name or description.
    The most common error with links is to leave one of the quotation marks or angel brackets off.  If your link is not working, check your punctuation!
    <IMG SRC="image.gif">
    IMG SRC stands for Image Source. The browser will display whatever image file you indicate.
    Want to learn more?
    Visit A Beginner's Guide to HTML brought to yo by the nice people at the NSCA.
    http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
    BACK to Athena's Modest Homepage.
    ARH February 3, 2000. http://pegasus.cc.ucf.edu/~holcomba/