end of password protection experiment -->

ONLINE HTML Primer

I wrote this for my own quick reference.
You may find some uses for it too. Comments welcome.
--Chee Enter your password:

Basic References
First Example (Hello World!)
Basic Commands
Topics
HTML document parts
- Head (including TITLE)
- Body
- Address
Advanced Features
- Style Sheet
- Automatic Re-direction of URL
- Math Support
- Tables
- Index (Key word search)
- Frames
- Special Characters
- Colors
- GIF files
- CGI files
- Java
- JavaScript
Netscape Hints and Tricks
HTML Tools
Miscellaneous
go to BOTTOM of document

[ TOP, Table of Contents ] [ BASIC REFERENCES ] [ First Example ] [ Basic Commands ]
[ Topics ] [ HTML parts ] [ Advanced Features ] [ Netscape Hints ]
[ HTML Tools ] [ Miscellaneous ] [ BOTTOM ]

BASIC REFERENCES:

Oct 8, 2009: I removed the old list of references as all the links are now broken. You can still view them by looking at the html source! Crystal (crystal@studentsandteachers.org) kindly suggested the following more up-to-date references at this link:

www.printerinks.com/html-examples-and-aids.html

[ TOP, Table of Contents ] [ References ] [ FIRST EXAMPLE ] [ Basic Commands ]
[ Topics ] [ HTML parts ] [ Advanced Features ] [ Netscape Hints ]
[ HTML Tools ] [ Miscellaneous ] [ BOTTOM ]

FIRST HTML EXAMPLE

< html >

< title > My first HTML page < /title >

< body >

Hello World!

< /body >

< /html >

Click HERE to see what the browser displays for this example.

REMARKS ON FIRST EXAMPLE:

HTML commands are idicated in red. These enclosed in tags which usually come in pairs: <tag-name> stuff between tags </tag-name> .
Tag names are case insensitive.
The name of the file containing these html commands must end in ``.html'' or ``.htm'' in order for a browser to recognize the file as an html file.

[ TOP, Table of Contents ] [ References ] [ First Example ] [BASIC COMMANDS]
[ Topics ] [ HTML parts ] [ Advanced Features ] [ Netscape Hints ]
[ HTML Tools ] [ Miscellaneous ] [ BOTTOM ]

BASIC COMMANDS

COMMENT COMMANDS:

<! ...single line here... >

-- the line between the angle brackets is commented out

-- comments out several lines

QUESTION: why do you care about comment lines? After all, it has no effects on the output/display!

ANSWER: because a html file (like most documents) is a living document that will change over time, and the author and its readers need a place to annotate the source file. Upshot: this is one of the FIRST commands you want to learn.

HEADER COMMANDS:

<H1>... </H1>

-- level 1 header.

-- Use H2, H3, H4 for levels 2,3,4.

-- <H2 ALIGN="center/left/right"> will create a level 2 header that is centered/left-aligned/right-aligned.

PARAGRAPH STRUCTURING:

<P>... </P>

-- paragraph (the end tag can be omitted)

-- <P ALIGN="center/left/right"> will create a paragraph that is centered/left-aligned/right-aligned.

<BR>

-- forced new line (no end tag)

<HR>

-- horizontal rule (no end tag)

-- <HR size=5> give a rule that is 5 pixels thick.

-- NOSHADE attribute (specifies no shading)

-- <HR WIDTH="number/percent"> give a rule whose length is "number" or "percent of window width".

-- <HR ALIGH="left/right/center"> aligns the rule.

<CENTER> ... </CENTER>

-- center text.

<PRE>...</PRE>

-- preformatted text, making spaces and line breaks significant (i.e., literal). You should avoid other HTML tags but hyperlinks can still be used. Since <, > and & are special, you should use their escape sequences .

BASIC FONTS:

<B>
-- bold (closed by </B>)
<I>
-- italics (closed by </I>)
<FONTS size="+2" color="$FA0000">
-- increases size, changes color (to red)
-- close with </FONT>

[ TOP, Table of Contents ] [ References ] [ First Example ] [ Basic Commands ]
[ TOPICS ] [ HTML parts ] [ Advanced Features ] [ Netscape Hints ]
[ HTML Tools ] [ Miscellaneous ] [ BOTTOM ]

TOPICS

VARIOUS LISTS

These can be arbitrarily nested.

<UL>... </UL>: -- unnumber lists, each item has <LI> tag (unclosed).; -- TYPE attribute for UL specifies the shape of bullets:
<UL TYPE="disc/square/circle">; -- LI can also have attributes ...
<OL>...</OL>: -- ordered or numbered lists, each item has <LI> tag (unclosed).; -- TYPE attribute for OL specifies the counting system:
<OL TYPE="1/a/A/i/I">
These corresponds (respectively) to "arabic/small-letter/caps-letter/small-roman/caps-roman".; -- START attribute for OL specifies the starting count:
<OL START="...">
<DL>...</DL>: -- definition list, each item consists of a definition term <DT>, and definition <DD>.; -- <DL COMPACT>...</DL> is useful for short definition terms, keeping the definitions and definition terms on the same line.

FONT

E.g., <FONT B DFN> ...XXX... </FONT>
will display ...XXX... in the font styles as described next.

PHYSICAL FONT STYLES:

<B> (bold)
<I> (italics)
<TT> (typewriter)

LOGICAL FONT STYLES:

<DFN> (defined word)
<EM> (emphasized word)
<CITE> (titles of books, etc. Usually italics.)
<CODE> (computer code)
<KBD> (user keyboard entry)
<SAMP> (sequence of literal characters)
<STRONG> (strong emphasis)
<VAR> (meta-variables)

HYPERLINKS

ATTRIBUTES:

<A href="doc.html#XXX" > link to XXX </A>: -- link to the file "doc.html" using entrypoint that is named "HERE". More precisely, in doc.html, at the appropriate location, you need the line <H2> <A NAME="XXX"> HERE IS XXX </A></H2>. You can also omit "doc.html" and just say href="#XXX".

TARGET ATTRIBUTE .: This tells the browser where to display the new link. E.g., <A href="doc.html" target=WINDOW > Click Here </A> will display the doc.html information in a new browser window. Equivalently, instead of target=WINDOW you can also specify target=MAIN.; -- Perhaps the most interesting use of target is in connection with frames. E.g., <A href="doc.html" target=mainframe > Click Here </A>; -- Used in combination with frames. The TARGET attribute tells the browser which frame should be used to display this link. There should be a frame that which has the name attribute of "mainframe": e.g., <frame src="foo.html" name="mainframe"> A special target name for frames is _top. In this case the entire current window (rather than a particulacurrent window frame) is the target.
See frames for more details.

IMAGES

basic command
< img src="myImage.gif">
GIF files
Click HERE for current tutorial information.
alt attribute
< img src="myImage.gif" alt="Help Support"> allows the alternative text to be displayed for clients that cannot display images (NOT when image is not found).
size parameters
< height=30 width=60 img src="myImage.gif">
NOTE: this option is useful if you just want to show a little icon only (and let the user click for the full image)
alignment and border
<img align={center,left,right} border={1,2,3,4,5} src="name_of_icon.gif" >
Patrick Lynch at Yale's tutorial
CLICK HERE , or the newer VERSION.
For NCSA tutorial on this: CLICK HERE

[ TOP, Table of Contents ] [ References ] [ First Example ] [ Basic Commands ]
[ Topics ] [ HTML PARTS ] [ Advanced Features ] [ Netscape Hints ]
[ HTML Tools ] [ Miscellaneous ] [ BOTTOM ]

HTML DOCUMENT PARTS

<HEAD > ... </HEAD>
The main element inside the head is the title, which appears on the top bar of the browser window. Another is the base which is an URL (often the one that leads to the current document). All relative URL links start from this base. E.g.,

<HEAD >
<TITLE > ...title here... </TITLE>
<BASE HREF="...URL..." TARGET="..." >
</HEAD>

The TARGET of base is optional, and is where new html documents will be displayed (usually current window). Quirk: the base href string must end with a "/" and your local hrefs should not begin with "/"s! Also check out the style sheet feature.
<BODY > ... </BODY>
The most important part of the html document! The following are attributes for body:

BACKGROUND="image.gif"
Use image.gif as background.
Here is a background collection.

BGCOLOR=#000000,
use the background color. I like <body bgcolor="#ffffff"> which gives a clear bluish background color.

TEXT=#000000,
sets the normal text color.
TEXT=#000000,
sets the normal text color.
LINK=#000000,
sets the hypertext anchor color.
VLINK=#000000,
sets the visited anchor color

<ADDRESS > ... </ADDRESS>
This is often used at the end of a document to enclose information about the creator of the document. See bottom of this document for an example.

[ TOP, Table of Contents ] [ References ] [ First Example ] [ Basic Commands ]
[ Topics ] [ HTML parts ] [ ADVANCED FEATURES ] [ Netscape Hints ]
[ HTML Tools ] [ Miscellaneous ] [ BOTTOM ]

ADVANCED FEATURES

STYLE SHEET
-- First create a "style sheet".
-- Here is a sample style sheet (used by javadoc)
-- Assuming the style sheet is placed in a file "stylesheet.css" the current directory, now insert in the <head> part of the document something like this:
<LINK REL="stylesheet" TYPE="text/css" HREF="stylesheet.css" TITLE="Style">

AUTOMATIC RE-DIRECTION
-- Suppose you want an old link to be re-routed to a new URL. Here is an example of how to do this.
-- Click HERE to see what the effect of automatic re-direction.
MATH SUPPORT
-- There is not much support, you will need to do it yourself.
-- For instance, it is standard to use italics letters in math mode.
-- SUPERSCRIPT and SUBSCRIPT is possible:
-- E.g., Xⁿ is produced by <I>X<SUP>n</SUP>.
-- E.g., X_n is produced by <I>X<SUB>n</SUB>.
<TABLE>
-- you may also go to a mirror link or the source .

-- General Table Format:

<TABLE> <== start of table <CAPTION> caption contents </CAPTION> <== optional <TR> <== row 1 <TH> cell contents </TH> <== cell 1 in row 1 (a head) ... <TH> cell contents </TH> <== last cell in row 1 </TR> <== end of first row definition <TR> <== start of second row definition <TD> cell contents </TD> <== cell 1 in row 2 ... <TD> cell contents </TD> <== last cell in row 2 </TR> <== end of second row definition ... ... </TABLE> <== end of table definition

You can have any number of rows defined by the <TR> and </TR> tags. Within a row you can have any number of cells defined by the <TD>...</TD> or <TH>...</TH> tags. Each row of a table is, essentially, formatted independently of the rows above and below it.
TRICK: most browsers require a cell to have some content. So, if you really want the cell to be empty, make its contents be the nonbreaking space (&160; or  ).

-- Attributes for TABLE

Attribute Description
BORDER draws a border
BORDER=10 draws a border of width 10

BGCOLOR=#ffdaff background color of #ffdaff (lilac) for whole table

-- Attributes for TR, TH, TD:

NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>.

Attribute Description

ALIGN (LEFT/CENTER/RIGHT)

VALIGN (TOP/MIDDLE/BOTTOM)

COLSPAN=n

ROWSPAN=n

NOWRAP

BGCOLOR=#99ff99 (purplish blue)

Horizontal alignment of a cell.

Vertical alignment of a cell.

The number (n) of columns a cell spans.

The number (n) of rows a cell spans.

Turn off word wrapping within a cell.

Overrides any background color for table.

-- Examples of Column/Row span attributes:
The previous table uses column span for the green row.
Here is example of row spans.

<ISINDEX>
-- used to search for key words.
FRAMES

Basic Example:

<FRAMESET ROWS = 60%,*> <NOFRAMES> THIS IS WHAT YOU PUT HERE if THERE NO SUPPORT FOR FRAMES </NOFRAMES> <FRAME SRC="http:main-frame.html" NAME=main> <FRAMESET COLS = 25%,75%> <FRAME SRC=http:left-frame.html NAME=link1> <FRAME SRC=http:right-frame.html NAME=link2> </FRAMESET> </FRAMESET>

Click Here to see how the above looks.
To use the name attribute , see the TARGET attribute under hyperlinks .
See our cs colloquium homepage for example!
Other attributes for frames:

MARGINHEIGHT=10: sets margin height to 10
MARGINWIDTH=5 sets margin width to 5
SCROLLING="yes" or "no" Defaults to "yes"
NORESIZE unclear

SPECIAL CHARACTERS

The sequence "&...;"
will be replaced a single character named by "..." provided "..." is recognized. Here, "..." can be a name (e.g., "amp") or a number. Numbers can be in decimal (e.g., 38) or hexadecimal (e.g., x26). Thus, we have three equivalent ways to write the ampersand entity: & or & or &. Not all numbers have names. Decimal is more universal (so our table below uses on decimals). The character is called an ENTITY (with name "..."). Only the ampersand is required --- the trailing semicolon can be omitted if the next character is space or end of line. But the semicolon is never incorrect. Some browsers always require the trailing semicolon.

Symbol Interpretation

& or & gives & (ampersand sign)

< or < gives < ("less than sign")

> or > gives > ("greater than sign")

≤ or ≤ gives ≤ ("less-than or equal to sign")

≥ or ≥ gives ≥ ("greater-than or equal to sign")

" gives " (quote character)

° gives ° (degree symbol).

² or ² gives ² (superscript two).

³ or ³ gives ³ (superscript three).

	 gives a horizontal tab.

± or ± gives ± (plus-minus sign).

× or × gives × (multiplication sign).

÷ or ÷ gives ÷ (division sign).

¦ or ¦ gives ¦ (broken vertical bar).

¬ or ¬ gives ¬ (not sign).

  or   gives the ``nonbreaking space''.

&#nn; gives the ISO Latin-1 character number "nn".
For a complete list, see source link or local copy .

For more information on ENTITIES, see www.htmlhelp.org (unfortunately, browser support for many of the symbol entities are quite poor (e.g., you may not see the "less-than or equal to symbol" in the above table on your browser). An alternative method for special symbols is to use images: a large collection of symbols is available free of charge from Gordon and Breach Publishing Group.
More detailed discussion of the font face issues: Mathematical formulas in HTML 4.0 from Andreas Prilop | Math in HTML and CSS and How to Write Style Sheets from Jukka Korpela |
Other useful links: For font list in mathematical typography (with some links to HTML math fonts) see Luc Devroye. The code chart from www.unicode.org. Useful tutorials from Web Design Group .

COLORS
E.g., <FONT COLOR="0090CC"> THIS COLOR </FONT>
will print as THIS COLOR . (We can also write <FONT COLOR=#0090CC >)
Basically, XXYYZZ where XX=red component, YY=green component and ZZ=blue component.
SEE body attributes that changes color of texts.

code color achieved

FF0000 RED

00FF00 GREEN

0000FF BLUE

059905 dull green

CLICK HERE For more color examples

GIF FILES

Interlacing is recommented. To do this: giftopnm example.gif|ppmtogif -interlaced > new_example.gif
Modifying gifs:
To, say, make a gif smaller, call "% xv FILENAME.gif"
Some local collections: in yap, in cs , and in simulation.

CGI (Common Gateway Interface)

Here are two links:
CGI intro from Netamorphix.
CGI examples with sources (from NCSA?).
CGI language can be C/C++, Perl, TCL, Unix shell, etc.

JAVA

Demo of scrolling banner (Wait for small time delay before scrolling begins)

JavaScript

Here is an excellent guide and reference from netscape.
JavaScript Example that you can use IMMEDIATELY!
Click here for what the browser produces.
Click here for a html file using JavaScript function.
Click here for what the browser produces.
Click here for a html file using JavaScript event handler. Look for the "onClick" keyword.
Click here for what the browser produces.

[ TOP, Table of Contents ] [ References ] [ First Example ] [ Basic Commands ]
[ Topics ] [ HTML parts ] [ Advanced Features ] [ NETSCAPE HINTS ]
[ HTML Tools ] [ Miscellaneous ] [ BOTTOM ]

NETSCAPE HINTS and TRICKS

Reloading
-- to force a non-cache reload, press as you click "reload".
Reloading Frame
-- to force a non-cache reload in frames, press as you click "reload".
Navigation within Frame
-- press within frame to move forward/backwork in frame.
Forcing space
-- to get empty spaces in your display, you can use &nbsp (non-breaking space).
-- to get extra empty lines, it is useless to put multiple copies of <p>. Instead, intersperse <p>'s with <br>'s.

[ TOP, Table of Contents ] [ References ] [ First Example ] [ Basic Commands ]
[ Topics ] [ HTML parts ] [ Advanced Features ] [ Netscape Hints ]
[ HTML TOOLS ] [ Miscellaneous ] [ BOTTOM ]

HTML TOOLS

TeX and HTML

Hyperlatex from Otfried Cheong. A great (free) tool to produce two versions of the same document -- a latex version and a html version. This is installed at our local /usr/unsupported directory.
LaTeX2HTML from Nikos Drakos is a widely used free software for converting a latex file into a html document. At NYU, it is found under /usr/local/bin/latex2html.

Convertors

Webit : Converts text to html.

Html Editors

tkTHML: Tcl based editor for html files

[ TOP, Table of Contents ] [ References ] [ First Example ] [ Basic Commands ]
[ Topics ] [ HTML parts ] [ Advanced Features ] [ Netscape Hints ]
[ HTML Tools ] [ Miscellaneous ] [ BOTTOM ]

Miscellaneous

Wilbur

Wilbur Reference from Web Design Group. Wilbur is code name for the HTML 3.2 from the W3 Consortium, released in 1996.

[ TOP, Table of Contents ] [ References ] [ First Example ] [ Basic Commands ]
[ Topics ] [ HTML parts ] [ Advanced Features ] [ Netscape Hints ]
[ HTML Tools ] [ Miscellaneous ] [ BOTTOM ]

Chee Yap
Courant Institute, New York University

Attribute	Description
BORDER	draws a border
BORDER=10	draws a border of width 10
BGCOLOR=#ffdaff	background color of #ffdaff (lilac) for whole table

Attribute	Description
NOTE: Attributes defined within `<TH>` ... `</TH>` or `<TD>` ... `</TD>` cells override the default alignment set in a `<TR>` ... `</TR>`.
`ALIGN (LEFT/CENTER/RIGHT)` `VALIGN (TOP/MIDDLE/BOTTOM)` `COLSPAN=n` `ROWSPAN=n` `NOWRAP` `BGCOLOR=#99ff99 (purplish blue)`	Horizontal alignment of a cell. Vertical alignment of a cell. The number (`n`) of columns a cell spans. The number (`n`) of rows a cell spans. Turn off word wrapping within a cell. Overrides any background color for table.

MARGINHEIGHT=10:	sets margin height to 10
MARGINWIDTH=5	sets margin width to 5
SCROLLING="yes" or "no"	Defaults to "yes"
NORESIZE	unclear

Symbol	Interpretation
& or &	gives & (ampersand sign)
< or <	gives < ("less than sign")
> or >	gives > ("greater than sign")
≤ or ≤	gives ≤ ("less-than or equal to sign")
≥ or ≥	gives ≥ ("greater-than or equal to sign")
"	gives " (quote character)
°	gives ° (degree symbol).
² or ²	gives ² (superscript two).
³ or ³	gives ³ (superscript three).
	gives a horizontal tab.
± or ±	gives ± (plus-minus sign).
× or ×	gives × (multiplication sign).
÷ or ÷	gives ÷ (division sign).
¦ or ¦	gives ¦ (broken vertical bar).
¬ or ¬	gives ¬ (not sign).
or	gives the ``nonbreaking space''.
&#nn;	gives the ISO Latin-1 character number "nn". For a complete list, see source link or local copy .

code	color achieved
FF0000	RED
00FF00	GREEN
0000FF	BLUE
059905	dull green
CLICK HERE	For more color examples

ONLINE HTML Primer

TABLE OF CONTENTS

BASIC REFERENCES:

FIRST HTML EXAMPLE

BASIC COMMANDS

TOPICS

HTML DOCUMENT PARTS

ADVANCED FEATURES

NETSCAPE HINTS and TRICKS

HTML TOOLS

Miscellaneous