Introductino to HTML

This is the biggest header

This is the smallest header

This is a Paragraph. Paragraphs, Headers, and Horizontal Rules (the line below) all have 1 free space above and below.


this text is bold (<b>)
this text is strong (<strong>)
this text is italic (<i>)
this text is emphasized (<em>)
this text is small (<small>)
this text contains a superscript (<sup>)
this text contains a subscript (<sub>)

(Centered Header)


The Pre Tag (<pre>)

This is
    preformatted    text.It preserves      both spaces
            and line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10
     print i
next i

These tags are often used to display computer/programming code.

Computer code (<code>)
Keyboard input (<kbd>)
Sample text (<samp>)
Computer variable (<var>)

The Address Tag (<address>)

Donald Duck
BOX 555
Disneyland
USA

Abbreviations and Acronyms

Roll mouse over the abbr and acronym to view full meaning
UN
<abbr title="United Nations">UN</abbr>
<acronym title="World Wide Web">WWW</acronym>

rtl - right to left

If browser supports bi-directional override (bdo),
"Here is some Hebrew text" will be written reversed:

Here is some Hebrew text
<bdo dir="rtl">Here is some Hebrew text</bdo>)

Long and Short Quotations

Here comes a long quotation: (<blockquote>)
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
Here comes a short quotation: (<q>) This is a short quotation

Deleted and Inserted Text

a dozen is twenty twelve pieces
<del>twenty</del> and <ins>twelve</ins>

Defines a citation (<cite>)
Defines a definition term (<dfn>)

Character Entites

A character entity has three parts:
1. an ampersand (&)
2. an (entity name) or a (# sign and an entity no.)
3. and finally a semicolon (;)
This is a less than < symbol represented by &lt;
This is a less than < symbol represented by &#60;

Click THIS LINK for a list of Character Entities

HTML Links: The anchor Tag and href attribute

This text leads you to the friendster home page in a NEW window

This picture leads to the Rihanna home page in SAME window

basic LINK structure:
<a href="URL">Picture or Text Link Here</a>

Named Anchors

Jump to "This is the biggest Header"
<a href="#Top_section">Jump to "This is the biggest Header"

Locked in a frame? This example demonstrates how to break out of a frame, if your site is locked in a frame.
Click here!

Send Mail

This is a mail link:Send Mail

Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

This is another mailto link:Send mail!


Frame Navigation

To use Frame Navigation, run the Frames.htm document which will load this document. "FrameName" is the target frame name in Frames.htm which contains a frame with name FrameName

Frame of HTML_Notes2
Frame of HTML_Advance
Frame of Entities

Inline Frames or iframes and jumps

Website loads into an inline frame and points to the name anchor ISO_8859. Some older browsers don't support iframes. If they don't, the iframe will not be visible.


Tables: Cellpadding, Cellspacing, Spanning, and other Attributes

Table w/ Background image (This is a Table Caption <caption>)
Column 1 Table Heading Column 2 Table Heading
Data R1,C1 Data R1,C2
Data R2,C1 Data R2,C2

Cell that spans two columns with cellspacing 10 (with green bgcolor):

Name Telephone
Bill Gates 555 77 854 555 77 855

Cell that spans two rows (with cell image and cell bgcolor):

Name Harry Kunz
Telephone# 425-2144
422-5197

If you see no frames around the tables in these examples, your browser is too old, or does not support it.


Frame Attribute to control Borders around Tables

Table with attribute frame="box"

Header Row1 Row 1 Col 1 Row 1 Col 2
Header Row2 Row 2 Col1 Row 2 Col2

the frame attribute can take on values:

  1. "border" - used for frame around
  2. "box" - used for frame around
  3. "void" - no frame at all"
  4. "above" - line border at lower table side
  5. "below" - line border at upper table side
  6. "hsides" - line borders at horizontal table sides
  7. "vsides" - line borders at vertical table sides
  8. "lhs" - line border at left table side
  9. "rhs" - line border at right table side

Frames and Boarders combined

First row

First row

If you see no frames around the tables in these examples, your browser does not support the frame attribute.


Colgroup and col Attributes

1 2 3 4

The <thead>, <tbody>, and <tfoot> Attributes

Definition and Usage

The thead, tfoot and tbody elements enable you to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a row with totals at bottom. This division enables browsers to support scrolling of table bodies independently of the table header and footer. When long tables are printed, the table header and footer information may be repeated on each page that contains table data.

Note: The <tbody> must have a <tr> tag inside!
Note: If you use the thead, tfoot and tbody elements, you must use every element. They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.

This text is in the THEAD
This text is in the TFOOT
This text is in the TBODY

Types of Lists

Lists can also be nested within lists.
<dir> and <menu> are deprecated tags, use <ul> instead.
under each type of list, listings are placed w/in <li> elements

Unordered Lists <ol> Ordered list <ol> (Numbered list):
  1. Apples
  2. Bananas
  3. Lemons
Letters list <ol type="A">:
  1. Apples
  2. Bananas
  3. Lemons

the type attribute for ordered lists can take values "A","a","I","i". By default it is numbered;
the type attribute for unordered lists can take values "disc" "circle" "square". By default it is "disc"

Definition Lists: List starts with <dl> followed by term <dt> then definition <dd>
Apples-
are red sweet or sour fruits
Bananas-
are yellow sweet fruits
Lemons-
are yellow sour fruits