HTML Reference Document

Contents

Alignment And Headers

This text is aligned to the left.
This text is aligned to the right.
This text is aligned to the center.

This text is justified.This text is justified.This text is justified.This text is justified.This text is justified.This text is justified.This text is justified.This text is justified.This text is justified.This text is justified.This text is justified.This text is justified.This text is justified.

This text is aligned to the left.
This is in a nested division and text is aligned to the right.
This is in a nested division and text is aligned to the center.

nowrap doesn't work. nowrap doesn't work.nowrap doesn't work. nowrap doesn't work.nowrap doesn't work.nowrap doesn't work.

There is no defined usage for the value of the title attribute,and many browsers simply ignore it. Internet Explorer,however,will display the title associated with any HTML element when the mouse pauses over that element.Used correctly,the title attribute could be used in this manner to provide spot help for the various elements within your document.

this text is in a paragraph

Level 1 Header

Level 2 Header

Level 3 Header

Level 4 Header

Level 5 Header
Level 6 Header
This line is normal text.

For More Information

Content-based Styles

This text should be deleted.
This text should be inserted.
The enclosed text is an abbreviated form of a longer word or phrase.
The enclosed text is an acronym.
The enclosed text is a citation
//The enclosed text is code
while(true) i++;
The enclosed text is defining instances of special terms or phrases.
The enclosed text is emphasised
Type the enclosed text
indicate a sequence of literal characters that should have no other interpretation by the user. This tag is most often used when a sequence of characters is taken out of its normal context.
The enclosed text is strong.
The enclosed text is a variable.

Physical Styles

The enclosed text is in bold.
The enclosed text is big.
normal size text big 1 big 2 big 3 big 2 big 1 normal size
The enclosed text is italic.
The enclosed text is small.
normal size text small 1 small 2 small 1 normal size
The enclosed text is striked.
Normal TextThe enclosed text is subscriped.
Normal TextThe enclosed text is superscriped.
The enclosed text is in typeface.
The enclosed text is underlined.
Blinking does not work for IE.
The enclosed text is in bold and italic.

Expanded Font Handling

This text should be rather large (size 7). Oh, no! I'm shrinking! Ah,back to normal.
The ghost moaned,"oooooooooooooo."
This Text is red.
Comic Sans MS
קטע זה הוא בעברית

Precise Spacing and Layout

This text should wrap around the image,flowing between the image and the right margin of the document.
This text will flow as well,but will be below the image, extending across the full width of the page.There will be white space above this text and to the right of the image.

This very long sentence is extended beyond browser's frame.This very long sentence is extended beyond browser's frame.This very long sentence is extended beyond browser's frame.This very long sentence is extended beyond browser's frame.This very long sentence is extended beyond browser's frame.This very long sentence is extended beyond browser's frame.
This is a very long sequence of text that is forced to be on a single line,even if doing so causes the browser to extend the document window beyond the size of the viewing pane and the poor user must scroll right to read the entire line.

Text enclosed by <pre> and </pre> is rendered like in a text editor. For Example:
The processing program is: 
main(int argc,char **argv)
{
   FILE *f;
   int i;

   if (argc !=2)
   fprintf(stderr,"usage:%s <file>\n",
   argv[0]);
   process(argv[1]);
   exit(0);
}

Commonly use <center> to center a table or image in the display window.


The <listing> tag is an obsolete tag, explicitly removed from the HTML 4.0 standard,meaning that you shouldn't use it. We include it here for historical reasons,since it is supported by some browsers and has the same effect on text formatting as the <pre> tag with a specified width of 132 characters. The <xmp> tag formats text just like the <pre> tag with a specified width of 80 characters. However,unlike the <pre> tag,you don't have to replace the literal <,>, and &characters with their entity equivalents within an <xmp> block.The name <xmp> is short for "example";the language's designers intended that the tag be used to format examples of text originally displayed on 80-column wide displays.Because the 80-column display has mostly gone the way of green screens and teletypes,and since the effect of a <xmp>tag is basically the same as <pre width=80>, don't use <xmp>; it may disappear entirely in subsequent versions of HTML. The <blockquote> tag is often used to set off long quotations from other sources. For example:
We acted incorrectly in arbitrarily changing the Kumquat Festival date.Quoting from the Kumquat Growers'Bylaws:
The date of the Kumquat Festival may only be changed by a two-thirds vote of the General Membership,provided that a 60 percent quorum of the Membership is present.
(Emphasis mine)Since such a quorum was not present,the vote is invalid.

The <q> tag: (Has no effect meanwhile.)
We acted incorrectly in arbitrarily changing the Kumquat Festival date.Quoting from the Kumquat Growers'Bylaws: The date of the Kumquat Festival may only be changed by a two-thirds vote of the General Membership,provided that a 60 percent quorum of the Membership is present. (Emphasis mine)Since such a quorum was not present,the vote is invalid.

The <address> tag:
Ariel Segal
5 Vainberger St.
Petach Tikva
Send Me Email.

Special Character Encoding

" & < > ¡ ¢ £ ¤ ¥ ¦ § ¨
© ª « ¬ ­ ® ¯ ° ± ² ³ ´
µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿

Horizontal Rules

This is conventional document text, followed by a normal,3-pixel tall rule line.
The next three rule lines are 12,36,and 72 pixels tall.
The following rules are 40 and 320 pixels wide no matter the actual width of the browser window
Whereas these next two rules will always extend across 10 and 75 percent of the window,regardless of its width:
Next rule is with width=35% and align=right.
Next rule is with width=35% and align=center.
Next rule is with width=35% and align=left.

Inserting Images in Your Documents

LEMON slice
Align image with "top" attribute.
Align image with "center" attribute.
Align image with "bottom" attribute.

The left and right image alignment values tell the browser to place an image against the left or right margin,respectively, of the current text flow.The browser then renders subsequent document content in the remaining portion of the flow adjacent to the image.The net result is that the document content following the image gets wrapped around the image. The left and right image alignment values tell the browser to place an image against the left or right margin,respectively, of the current text flow.The browser then renders subsequent document content in the remaining portion of the flow adjacent to the image.The net result is that the document content following the image gets wrapped around the image. The left and right image alignment values tell the browser to place an image against the left or right margin,respectively, of the current text flow.The browser then renders subsequent document content in the remaining portion of the flow adjacent to the image.The net result is that the document content following the image gets wrapped around the image. The left and right image alignment values tell the browser to place an image against the left or right margin,respectively, of the current text flow.The browser then renders subsequent document content in the remaining portion of the flow adjacent to the image.The net result is that the document content following the image gets wrapped around the image.



Graphical browsers usually don't give you much space between an image and the text around it.And unless you create a transparent image border that expands the space between them,the typical two-pixel buffer between an image and adjacent text is just too close for most designers'comfort.Add the image into a hyperlink,and the special colored border will negate any transparent buffer space you labored to create,as well as draw even more attention to how close the adjacent text butts up against the image. The hspace and vspace attributes can give your images breathing room.With hspace,you specify the number of pixels of extra space to leave between the image and text on the left and right sides of the image;the vspace value is the number of pixels on the top and bottom. Graphical browsers usually don't give you much space between an image and the text around it.And unless you create a transparent image border that expands the space between them,the typical two-pixel buffer between an image and adjacent text is just too close for most designers'comfort.Add the image into a hyperlink,and the special colored border will negate any transparent buffer space you labored to create,as well as draw even more attention to how close the adjacent text butts up against the image. The hspace and vspace attributes can give your images breathing room.With hspace,you specify the number of pixels of extra space to leave between the image and text on the left and right sides of the image;the vspace value is the number of pixels on the top and bottom.

Additions and Extensions to the "body" Tag

Background and text colors exapmles

Link Colors Control

Background Music in Endless Loop

Animated Text

The <marquee> tag is for IE only, and it is an extension to the HTML 4.0 standard. The <marquee> tag is for IE only, and it is an extension to the HTML 4.0 standard.
The <marquee> tag is for IE only, and it is an extension to the HTML 4.0 standard.
The <marquee> tag is for IE only, and it is an extension to the HTML 4.0 standard.

Israel's Only Reliable Media

Unreliable Media

American Media

Don't Follow This Link

Establishing Document Relationships

The <base> Header Element

Formatted Lists

Here is again the list of contents, this time as an orderd list. This List is up to and not including this section, it is presented here for ilustration purpuses only. Another point made here is, that ancors can point backwards.
  1. Alignment And Headers
  2. Content-based Styles
  3. Physical Styles
  4. Expanded Font Handling
  5. Precise Spacing and Layout
  6. Special Character Encoding
  7. Horizontal Rules
  8. Inserting Images in Your Documents
  9. Additions and Extensions to the "body" Tag
  10. Animated Text
  11. On Mouse Event With Links
  12. Establishing Document Relationships
Disk Bullet List Circle Bullet List Square Bullet List How said ordered lists must start from one?
  1. This is item number five.
  2. This is number six!
  3. This is number seven!
  4. And so forth...
Can you start counting from zero?
  1. This Item Is Cool
  2. And So is This
  3. Go For It!
  4. And so forth...
Different Ordering Methods
  1. Item one
  2. Item two
  3. Item three
  4. Item four
  5. Item five
  1. Item one
  2. Item two
  3. Item three
  4. Item four
  5. Item five
  1. Item one
  2. Item two
  3. Item three
  4. Item four
  5. Item five
  1. Item one
  2. Item two
  3. Item three
  4. Item four
  5. Item five
Changing the Style and Sequence of Individual List Items
  1. Changing the numbering style
  2. Doesn't alter the order!
  3. <--See?It's a "c"!
  4. Uppercase Roman numerals!
  5. Lowercase Roman numerals!
  6. Plain ol'numbers!
The value attribute
  1. Item number 1
  2. And the second
  3. Jump to number 9
  4. And continue with 10...
Nested Unordered Lists Nested Ordered Lists
  1. A History of Kumquats
    1. Early History
      1. The Fossil Record
      2. Kumquats:The Missing Link?
    2. Mayan Use of Kumquats
    3. Kumquats in the New World
  2. Future Use of Kumquats
Directory Lists:
The distribution tape has the following files on it:
  • README
  • Makefile
  • main.c
  • config.h
  • util.c
    • Menu Lists
    Some popular kumquat recipes include:
  • Pickled Kumquats
  • 'Quats and 'Kraut (a holiday favorite!)
  • 'Quatshakes
    • Definition Lists
    Common Kumquat Parasites
    Leaf mites
    The leaf mite will ravage the Kumquat tree,stripping it of any and all vegetation.
    Trunk dropsy
    This microscopic larvae of the common opossum chigger will consume the structural elements of the tree trunk,causing it to collapse inward.

    Cascading Style Sheets

    Forms

    Forms Examples
    Form With an Image Button
    Multiple buttons in a single form
    Grafic buttons
    Forms and Files

    Tables

    Example of a table:
    Kumquat versus a poked eye,by gender
    Preference
    Eating Kumquats Poke In The Eye
    Gender Male 73% 27%
    Female 16% 84%
    Examples of tables

    Composed with care by: Ariel Segal.