HTML Basics

USEFUL TAGS

This is the link and anchor tag.
This is the basic building block of the WEB, the Hyper in HTML.
The Link tag can be used to link to anchors on the same page, to other pages, to specific spots on other pages, and to start a new browser window.

Usage:

<.A HREF="#frames">This is a link to the Frames table same page.

<.A HREF="http://www.netfind.html">Find it at NETFIND

<.A HREF="aname.html#e">A link to the letter E.

<.A HREF="aname.html#e" target="new">A link to the letter E, in a new browser window.

BASIC FORMAT of a PAGE

<.!-- --> Comments.
Any text between these tags will not display in the browser.

<.!DOCTYPE> Describes the HTML version used in the current document.
Will vary depending on the contents of the page.

<.HTML> Denotes the file is an HTML document.

<.HEAD> Marks the HTML document heading.

<.TITLE> Specifies a document title.
Appears in the browser title bar.

<.BODY> Specifies the beginning and the end of the document body.
Includes all the text and images of the page.

Usage: 

<.!-- This document was created with xxxx, by xxx -->
<.!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<.HTML>
<.HEAD>
<.TITLE>Untitled
<./HEAD> 
<.BODY>



<./BODY>
<./HTML>
<.BGSOUND> Adds background sounds that play on initial load.
Does not need the loop parameter to play one time.

Usage:

<.BGSOUND SRC="gotmail.wav" LOOP=INFINITE>

<.EMBED> Indicates an embedded object.

Usage:

<.EMBED src="NameOfSound.mid" hidden="true" autostart="true">

<.B> Makes text bold.

Usage:

This text is bold!! This is not.

<.BIG> Enlarges the font size.
Dependent on the current font size.

Usage:

This text has one big word.

<.EM> Emphasizes text, usually by rendering text in italics.

Usage:

The BHP Help File is shown emphasized.

FONTS

<.FONT> Formats the font style, size, and color.

Usage:

This changes the font size to 5.

This text is red.

This text will be displayed in Comic Sans or the default type.

<.Hx> Renders text in heading style, usually with a larger font than the body text.
The x is a value from 1 to 6.

Usage:


H6
Small
H5

H4


H3


H2


H1

Large

<.I> Renders text in italics.

Usage:

The word italics is in italics.

<.MARQUEE> Displays text in a scrolling marquee.

Usage:

<.MARQUEE bgcolor=white>Hi!<./MARQUEE>
Hi!

<.MARQUEE bgcolor=red BEHAVIOR=alternate>Hi!<./MARQUEE>
Hi!

<.MARQUEE direction=right>Hi!<./MARQUEE>
Hi!

<.S> Draws a line through the text.

Usage:

This text has a line through it.

<.SMALL> Makes the font size smaller.

Usage:

The word small is smaller than the surrounding text

<.STRIKE> Renders text in strikethrough type.

Usage:

This text has a line through it.

<.STRONG> Emphasizes text, usually with bold.

Usage:

This text is strong or bold.

<.SUB> Renders text in subscript.

Usage:

"The Gettysburg Address"1
"The Gettysburg Address"1

<.SUP> Renders text in superscript.

Usage:

32 is 9.
32 is 9.

<.U> Renders text underlined.

Usage:

The word underlined is underlined.

FORMS

<.FORM> Creates a from with which accepts user input.
See INPUT for a list of form elements.

<.INPUT> Specifies a form control such as a check box or radio button.

<.TEXTAREA> Creates a box in which a user can enter and edit text.

Usage:

<.FORM ACTION="/cgi-bin/guestbook/imawebbie/guestform.html" METHOD="POST">


NAME <.INPUT TYPE="text" NAME="name" SIZE="25">
NAME

<.TEXTAREA NAME="comments" ROWS="5" COLS="25">Enter comments here.<./TEXTAREA>

<.INPUT TYPE=submit VALUE="Submit">

<./FORM>


FRAMES

<.FRAMESET> Defines layout for frames within a page.
Frames must be declared before the BODY tag!!!

<.FRAME> Defines independent windows, or frames, within a page.

<.NOFRAMES> Indicates content viewable only by browsers that do not support frames.

<.IFRAME> Floating frames are a lot like standard frames, but can be placed anywhere on the page, and scroll with the main page.
These work only in Microsoft Internet Explorer.

Usage:

<.FRAMESET COLS="100%" ROWS="50%,*">

<.FRAME NAME="Frame 1" SRC="" SCROLLING="AUTO">

<.FRAME NAME="Frame 2" SRC="" SCROLLING="AUTO">

<./FRAMESET>

<.BODY>

<.NOFRAMES>

To properly view this page, you need a frames capable browser.

<./NOFRAMES>

<.IFRAME NAME="content_frame" width="100" height="200" SRC="aname.html">This site uses floating frames<./IFRAME>

<.IMG> Inserts a graphic file.

Usage:

<.IMG SRC="logo.jpg">

LIST

<.DIR> Denotes a directory list.

<.LI> Denotes an item in a list.
Adds special character or number depending on use.

Usage:

<.DIR> <.LI>1-5<.LI>6-10<.LI>11-15<.LI>16-20 <./DIR>

  • 1-5
  • 6-10
  • 11-15
  • 16-20
    • BULLETS

    <.DL> Denotes a definition list.
    Used for a list of defined terms.

    <.DT> Specifies a definition term.
    Used to format the defined term.

    <.DD> Specifies definition data.
    Used to format the text for a definition.

    Usage:

    <.DL> <.DT>Term

    This is a definition. <.DT>Term
    This another definition. <./DL>
    Term
    This is a definition.
    Term
    This another definition.

    This is a definition.
    This another definition.

    <.MENU> Denotes a list of items.

    <.LI> Denotes an item in a list.
    Adds special character or number depending on use.

    Usage:

    <.MENU> <.LI>First. <.LI>Second. <./MENU>

  • First.
  • Second.

    • <.OL> Specifies an ordered list.
    Each item has a number or letter reference.

    Usage:

    <.OL> <.LI>First. <.LI>Second. <./OL>

    1. First.
    2. Second.

    <.OL type=A> <.LI>First. <.LI>Second. <./OL>
    1. First.
    2. Second.

    <.UL> Formats lines of text as a bulleted list.

    Usage:

    <.UL> <.LI>First. <.LI>Second. <./UL>

    • First.
    • Second.
    <.META> Provides information about the document.
    Used for client pull, also by some search engines for indexing.

    Usage:

    <.Meta Http-equiv="Keywords" CONTENT="AOL, message boards">

    SELECTION BOX

    <.SELECT> Denotes a list box or dropdown list.

    <.OPTION> Denotes one choice in a list box.

    Usage:

    <.FORM>


    <.SELECT NAME="Trucks" SIZE="1">

    <./FORM>

    TABLES

    <.TABLE> Creates a table.

    <.CAPTION> Specifies a caption for a table.
    Valid only within the TABLE element.

    <.TH> Creates a row or column heading in a table.

    <.TD> Creates a cell in a table.

    <.TR> Creates a row in a table.

    Usage:

    <.TABLE CELLPADDING=0 BORDER=2 ALIGN="CENTER" VALIGN="MIDDLE" BGCOLOR="#FFFFFF">

    <.CAPTION>Hi<./CAPTION>

    Hi
    Heading Heading
    Hi Hi
    HI Hi<

    <.TH>Heading<./TH><.TH>Heading<./TH><.TR>
    <.TD ALIGN="LEFT">Hi<./TD>
    <.TD ALIGN="CENTER">Hi<./TD>
    <./TR>
    <.TR>
    <.TD ALIGN="RIGHT">HI<./TD>
    <.TD>Hi<./TD>
    <./TR>
    <./TABLE>

    TEXT FORMATING TAGS

    <.BLOCKQUOTE> Sets apart a quotation in text.

    Usage:

    This will be indented from the rest of the text.

    <.BR> Inserts a line break.

    Usage:

    This line
    has a break in the middle.

    <.CENTER> Centers text and images.

    Usage:

    xxx

    xxx
    xxx

    <.CITE> Indicates a citation.
    Used to present a book, paper, or other published source material.

    Usage:

    I read something that starts out Four score and seven years ago.

    <.CODE> Presents a code sample.

    Usage:

    This sentence contains an example of code.

    <.DIV> Sets a document division.
    Groups related elements together within a document.

    Usage:

    This text
    will be left
    justified.

    This text
    will be center
    justified.

    This text
    will be right
    justified.

    <.HR> Draws a horizontal rule.
    Used to separate sections.

    Usage:

    <.HR>

    <.HR color="#FF0000">
    <.HR SIZE="8" color="#FF0000">
    <.HR SIZE="8">
    <.HR SIZE="8" NOSHADE>
    <.HR WIDTH="50%">
    <.HR WIDTH="50%" ALIGN="left">
    <.HR WIDTH="50%" ALIGN="right">
    <.HR WIDTH="50%" ALIGN="center" NOSHADE>

    <.KBD> Indicates text to be entered at a keyboard.
    Appears in fixed-width and bold type.

    Usage:

    To see what programs are running, press Ctrl-Alt-Del on the keyboard.

    <.LISTING> Renders text in fixed-width type.

    Usage:

    This is plain text. This is not.

    <.P> Inserts a paragraph break and denotes a new paragraph. Usage: <.P>This is a paragraph.<./P> <.P>This is a paragraph.<./P>
    <.P>This is a paragraph.<./P>

    This is a paragraph.

    This is a paragraph.


    <.PRE> Displays text exactly as typed with all line breaks and spacing.

    Usage: 

    This is
 some plain
           text.

    <.SAMP> Specifies sample text.

    Usage:

    This is some text in a small fixed-width font.

    <.TT> Denotes teletype.
    Displays text in fixed-width type.

    Usage:

    Type "HELLO" on your keyboard.

    <.XMP> Indicates example text.
    Displays text in fixed-width font.

    Usage:

    <.XMP><.A HREF="URL">click here<./A><./XMP>

    <A HREF="URL">click here</A> this tag will show up and not create a link.

    Top of page