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:

TABLE OF CONTENTS

  1. Basic References
  2. First Example (Hello World!)
  3. Basic Commands
  4. Topics
  5. HTML document parts
  6. Advanced Features
  7. Netscape Hints and Tricks
  8. HTML Tools
  9. Miscellaneous
  10. 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:


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

FIRST HTML EXAMPLE

<!-- COMMENTS: my first html document! -->
< 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:
  1. HTML commands are idicated in red. These enclosed in tags which usually come in pairs:
    <tag-name> stuff between tags </tag-name> .
  2. Tag names are case insensitive.
  3. 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


[ 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., Xn is produced by <I>X<SUP>n</SUP>.
-- E.g., Xn 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 &nbsp;).

-- 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: &amp; or &#38; or &#x26;. 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
&#38; or &amp; gives & (ampersand sign)
&#60; or &lt; gives < ("less than sign")
&#62; or &gt; gives > ("greater than sign")
&#8804; or &le; gives ≤ ("less-than or equal to sign")
&#8805; or &ge; gives ≥ ("greater-than or equal to sign")
&quot; gives " (quote character)
&#176; gives ° (degree symbol).
&#178; or &sup2; gives ² (superscript two).
&#179; or &sup3; gives ³ (superscript three).
&#09; gives a horizontal tab.
&#177; or &plusmn; gives ± (plus-minus sign).
&#215; or &times; gives × (multiplication sign).
&#247; or &divide; gives ÷ (division sign).
&#166; or &brvbar; gives ¦ (broken vertical bar).
&#172; or &not; gives ¬ (not sign).
&#160; or &nbsp; 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
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