Castle Library, SH|Welcome | Essential Questions> HTML > Web Design Tools > Integration > Finding Resources

HTML Commands You MUST Know
(even if you use an HTML editor!)

These very fundamental commands work on both pc and Macs and on all browsers.

Basic HTML Tags, in order of appearance

<html>
<title>YOUR TITLE as you want it to appear at top border</title>
<style> Style Sample (copy and paste)
</style>
<body bgcolor=    text=   link=    vlink=   alink=     >EVERYTHING THAT WILL GO ON YOUR PAGE
</body>
 </html >

Individual Elements

  1. Text

    <font face=Font Type>Font Type, such as Helvetica</font>
    <font size=1>smallest</font> to
    <font size=6> largest</font>
    <H6>smallest</h6> to
        <H1>largest </h1>
    <font color=#009900>green</font>

    <b>bold</b>
    <i>italic</i>
    		(copy and paste)
    <font face=
    size=
    color=  >

    </font>

    see *Color picker for html
    Special HTML Characters

  2. Images (use file format .jpg or.gif)
    <font color=#009900> (used to create a border, if desired)
    <img src=URL
    border=# pixels (width)
    height=#pixels (used to force a size)
    width=#pixels (used to force a size - use height or width, but not both)>
    </font>
  3. Links
    <a href=URL>Title of Link, and/or other text</a>
Arrangement of Elements
  1. Allocation of space

    • <p> Paragraph (a double space - only one can be used at a time)
    • <br>Line Break - can be used more than once to create white space
    • Horizontal rule <hr width=300 size=5(#pixels high) color=purple>
    • <blockquote> text and/or images </blockquote>
  2. Alignment
    • Vertical alignment valign=top or valign=middle or valign=bottom (used within td or table commands)
    • Horizontal alignment <align=left> or <align=right>
    • <center> Centered information</center> from a word to a table or set of tables
  3. Sizing images or blocks of text
    • Use width and height sparingly, only when you must have a certain size<width= > and <height= >

  4. Lists
    ordered list (numbered)
    1. <ol>Start of ordered list
    2. <li>Item # 1
    3. <li>Item #2.....
    4. </ol>End of ordered list
    (copy and paste)
    <ol>
    <li>
    <li>
    </ol>

    unordered list (bulleted, not numbered)
    • <ul>Start of unordered list
    • <li>Item #1
    • <li>Item #2
    • </ul>End of unordered list

    (Images can be substituted for <li>)

    (copy and paste)
    <ul>
    <li>
    <li>
    </ul>

    definition list
    <dl>Start of Definition List  
      <dt>Definition Term
    <dd>Item (Definition Data)
    <dd>Item (Definition Data)
      <dt>Definition Term
    <dd>Item (Definition Data)
    <dd>Item (Definition Data)
    </dl>End of Definition List
    (copy and paste)
    <dl>
    <dt>
    <dd>
    <dd>
    <dt>
    <dd>
    <dd>
    </dl>

  5. Tables

    The Shell:

    <table width=#pixelswide (suggested)
       or% of total page
    cellspacing=#pixelswide
    border=#pixelswide
    bordercolor=
    bgcolor=
    valign=top or middle or bottoms>
    EVERYTHING WITHIN THE TABLE GOESHERE (rows<tr> and data <td>);
    see next entry
    </table>

    (copy and paste)
    <table width=
    cellspacing=
    cellpadding=
    border=
    bordercolor=
    bgcolor=
    valign=    >
    INSERT TABLE CONTENTS HERE
    </table>

    The Contents:

    <tr>Beginning of a row
    <td width=#pixelswide
       or % of total page
    valign=top or middle or bottom
    bordercolor=
    bgcolor=
    align=left or center or right>
    ALL CELL CONTENTS GO HERE
    </td> (Closes a cell)
    </tr> (Ends a row)
    (copy and paste)
    <tr>
    <td width=
    bordercolor=
    bgcolor=
    align=   >
    INSERT CELL CONTENTS HERE
    </td>
    </tr>

Nesting

  • An entire table can be nested within a cell or a table.
  • Lists can be nested within other lists.
Copy and Paste
  • Consult the source code of a web page
Recommended HTML Tutorial Book

  • Teach Yourself Visually HTML by Ruth Maran, et al.

Good luck!

Castle Library, SH|Welcome | Essential Questions> HTML > Web Design Tools > Integration > Finding Resources