Rulers (hr) with "noshade", various "size", and "width"
(hr align=left) and (hr align=right)
Square rulers of different sizes.
Fancier rulers generated from .gif files.
Fancier rulers generated from a series of .gif files. (There is a slight
opening the spacing at every fourth ball.)
Heading
Level 4 Heading; default is align=left
Right Justified Level 4 Heading
Centered Level 4 Heading
Justified Level 4 Heading
Justified Level 4 Heading
Paragraph breaks are inserted before and after heading.
Alignment
Comments are enclosed in (!-- comments --)
Blank lines
and extra spaces are ignored.
This is a new paragraph.
This is the second line of the second paragraph in the source code (but will
not appear that way when displayed, as carriage returns are ignored).
This is between (p) and (/p). The closing tag (/p) is not required.
Materials are generally left aligned (like this paragraph).
The following is right aligned with (div align=right).
(div)...(/div> defines a chunk of HTML codes that the various options
can operate on; commonly used in stylesheets.
See the floating text/graph example here.
This material is right aligned with (p align="right") tag;
default is "align=left".
Nam Sun Wang
Chemical Engineering
This material is right aligned with (div align="right") tag
Nam Sun Wang
Chemical Engineering
(div style="") can control all sorts of attributes.
The text in this paragraph has a grey shadow.
This paragraph is center aligned by starting with (p align="center").
This is the second line of the center-aligned paragraph.
This is the third line of the center-aligned paragraph.
You can get the same effect with the (center) ... (\center) tag.
Paragraphs, Margins, Indenting
This is a normal paragraph.
Use a few non-collapsing white spaces ( ) to achieve the
effect of indentation at the beginning of the paragraph.
Use a blank graphics file (nothing.gif) as a spacer. With this technique,
one can control both the horizontal and vertical spacing exactly --
perfectly suited for a control freak.
Use a blank graphics file (nothing.gif) to create a line (or any rectangular area) -- again for a control freak.
Draw a red line below this point.
Combine a series of blank graphics files to create shades, or any color.
Draw a bordered red line below this point.
Draw a red line below this point.
This paragraph is within (blockquote) and should be indented a little on both sides.
Note how the horizontal ruler below is also indented.
This paragraph is within (blockquote) and should be indented a little on both sides.
Paragraph breaks are inserted before and after (blockquote).
This paragraph is within double (blockquote) and should be indented even more.
This paragraph is within double (blockquote) and should be indented even more.
Paragraph breaks are inserted before and after (blockquote).
For precise control of margins and paragraph width (if you are a
control freak), use (table) as a formatting tool with the "width"
and "cellpadding" attributes.
This paragraph is within (table width=70% cellpadding=50) and
should be indented a little on both sides with 50 pixels as
specified by "cellpadding" and should have a width which is 70%
of that of the display window. Note how the horizontal ruler
below is also indented. This paragraph is within (table)
and should be indented a little on both sides. For a control freak.
----------------------------------------------------------------
This paragraph is within the (pre) tag, i.e., preformated
stuff. Should follow the same line breakes and blank spaces as
the source file. Good for program listings.
Blank spaces and lines are significant inside the (pre) tag.
Paragraph breaks are inserted before and after (pre).
----------------------------------------------------------------
This paragraph is within the (pre) and (table) tags. (table) tag is
convenient for program listings with a different background color.
----------------------------------------------------------------
This paragraph is within the (xmp) tag. Similar to the (pre) tag.
Should follow the same line breakes and blank spaces as
the source file. Good for program listings.
Blank spaces and lines are significant inside the (xmp) tag.
Paragraph breaks are inserted before and after (xmp).
This is before the (code) tag.
This paragraph is within the (code) tag. Usually displayed in teletype.
The tag is for programmers to display programming codes.
Will not follow line breaks.
Blank spaces and lines are NOT significant.
Paragraph breaks are NOT inserted before and after (code).
This is after the (code) tag. Almost identical to the
(tt)...(/tt) tag.
Tab
Netscape does not support (tab).
There is a tab right before this;
There is a tab right after this;
this material is after the tab.
Header1
Header2
1st Line1112
2nd Line2122cde
"char" ... align text on the decimal point character, or text
material (units etc)
... align at the at sign "@"
Font Styles, Sizes, Colors
Background color
Specify background colors with the #RRGGBB format.
This document specifies the following at the beginning.
(body background="junk.gif" bgcolor="#B0E0E6")
(This document will be displayed with "junk.gif" as the
background image if it exists.) Caution: The browser on the
other end may disable the background color or sets one's own
color; thus, what you specify may not be seen at the other end
at all.
Click here to see a file with a
different background color.
Font Styles
bold (b) tag italic (i) tag teletype (tt) tag bold itablic
kbd tag (usually monospaced) samp tag (usually monospaced) strong tag (usually bold) em tag (usually italic) strike tag
Font Sizes
Font size is a number between 1 and 7.
Change to Bigger font size with (font size=+2).
Change to Smaller font size with (font size=-2).
This is (font size="1")
This is (font size="2")
This is (font size="3")
This is (font size="4")
This is (font size="5")
This is (font size="6")
This is (font size="7")
This is (font size="8")
Another way of changing to smaller font size with (small).
Back to Normal.
Another way of changing to bigger font size is to use (big).
Superscriptsup font with the (sup) tag.
Subscriptsub font with the (sub) tag.
Font Colors
Specify colors with the #RRGGBB format.
Red Color with (font color="#FF0000")
Green Color with (font color="#00FF00")
Blue Color with (font color="#0000FF")
Specify colors with English (16 supported named colors, but much more in IE and
Navigator.)
Red Color with (font color="red")
Green Color with (font color="green")
Blue Color with (font color="blue")
Yellow Color with (font color="yellow")
Purple Color with (font color="purple")
Black" Color with (font color="black")
Silver Color with (font color="silver")
Gray Color with (font color="gray")
White Color with (font color="white")
Lime Color with (font color="lime")
Olive Color with (font color="olive")
Maroon Color with (font color="maroon")
Fuchia Color with (font color="fuchia")
Navy Color with (font color="navy")
Teal Color with (font color="teal")
Aqua Color with (font color="aqua")
Font Faces
T i t l e
By Nam Sun Wang
The following has "face=" in the font tag. Many font styles are
possible, but are machine dependent because different users have
different set of fonts on their system. The same font names may
look different on different computers; conversely, different font
names (e.g., Helvetic & Ariel) may look the same. See a list of fonts.
Give multiple font faces to make sure that at least one is
present in the browser's computer.
Arial
Anchors & Links
"A" is for anchor (i.e., link).
The short file format, also known as relative addressing,
entry for clicking is shown.
Another short file format (without ")
for clicking is shown.
The following is a long file format, also known as absolute
addressing, for clicking.
See my page in the Chemical Engineering brochure.
(base href="...") specifies the base location such that a short file
format starts from the base location.
Example: <base href="http://www.glue.umd.edu/~nsw/">
The "target" attribute displays the linked page in a different window.
It has the appearance of another copy of the browser, but in
actuality only another document opened by the same copy of the
browser.
test1.htm in a different window.
Here is another (3rd) window.
test1.htm in a different window.
Some browsers (e.g., IE4) support a bubble help with the
"title" attribute.
link with bubble help. Netscape does not support the
"title" attribute.
Echo text in the status line with the "onMouseOver=" attribute.
At the University of Maryland, the web server automatically
displays file named "Welcome.html" when a link is made to a
directory without specifying the file name. Another default file
being displayed, which is also fairly common in other
installations, is "index.html". If neither "Welcome.html" nor
"index.html" is found, the server will send the directory listing
to the broswer. Click here for an
example.
When you move your pages, you can automatically redirect the user
to another page with a line like the one below at the beginning
of your old .html file. The following example will load
"foo.htm" from the subdirectory "ench250" after 1 second. If
content is set to "0", redirection will occur immediately.
The next example shows how to change the image's display size.
Put material next to the graph, either with enough (br) to force
other material below the picture or use any tag with "clear", for
example, (br clear) or (hr clear) to instruct the browser to
proceed to a space where the page is clear before putting down
(br) or (hr). Generally, you use "clear" to end text material in
right/left aligned image. Note that the first line extends in
the RHS space and the second line extends over the entire page.
Nam Sun Wang
Associate Professor
Department of Chemical Engineering
University of Maryland
College Park, MD 20742
This is the same as above but accomplished with the (table) format.
Put material next to the graph here.
Nam Sun Wang
Associate Professor
Department of Chemical Engineering
University of Maryland
College Park, MD 20742
Sandwitch text between 2 images.
Put material between the images here.
Nam Sun Wang
Associate Professor
Department of Chemical Engineering
University of Maryland
College Park, MD 20742
The following pictures seem to come from nowhere!!
Undefined .gif files are represented with a question mark or a broken image
(depending on the broswer).
You can click either a
WORD or
(a picture) to link to another place.
Preload images
A trick to preload quickly image files used in subsequent pages
is to give the option of (img src="..." width=1 height=1).
Ideally, we should give "width=0" and "height=0", but that does
not seem to work. The image files are downloaded while one is
viewing the current page. One should do this nul img tag at the
end of the current page. There is an image tag after this, but
you should not see the picture.
Client Side Image Map
Client side image map is limited to certain browsers. Clicking
on the following centered image will bring up different links.
(Note the blue frame around the picture and the arrow pointer
changes to a finger.) The coordinates are specified in pixel
units as: (x1,y1) (x2,y2), with 0 being the upper left corner.
(Figure out the pixel locations with a WYSIWYG tool or other
software.)
The above image is displayed with the following source codes
("img" followed by "map" information). We
also adjust the width to 150 and height to 100, and center the
picture.
Server side image map is universally valid, because it depends on
the server, not the browser. The map information can also be
provided in a separate file. The following example does NOT work
when loaded via "file" but works on the GLUE web server when
loaded via "http". This is because one must have access to an
image-map program, which is not on my local PC but is present on
the Glue server. This is nontrivial if the web server is not
already set up properly to handle an image map.
The above image is displayed with the following source codes
("a" anchor which links to the map file "test.map").
(center)
(a href="test.map")
(img src="test.gif" ismap border=0 width=150 height=100)(/a)
(/center)
One needs to create a separate map file (test.map). The
following is the content of an image map in NCSA's format.
rect test1.htm 0, 0 49,99
rect test2.htm 50, 0 99,99
rect test3.htm 100, 0 149,99
default test3.htm
Listing
All listings can be nested and mixed.
Paragraph breaks are inserted before and after listing.
First item with "type=disk" as bullet (default for 1st level)
Second item
First item with "type=circle" (default for 2nd level)
Second item
First item with "type=square" (default for 3rd level)
Second item
Example of Unordered Listing (ul) with nesting.
First item
Second item
First line of Second item
Second line of Second item
Each of the listing methods (ul) (ol) etc. can include listing header (lh):
This is the Listing Header (lh)
First item
Second item
First line of Second item
Second line of Second item
Example of Ordered Listing (ol).
First item with "type=I start=3"; other types are 1, A, a, I, i
(Default is "type=1", i.e., number)
Second item
Example of Ordered Listing (ol) with nesting.
First item
Second item
First line of Second item
Second line of Second item
Example of Directory Listing (dir) with nesting.
First item
Second item
First line of Second item
Second line of Second item
Example of Menu Listing (menu) with nesting.
Example of Definition Listing (dl) with nesting.
First term (dt)
Definition of first term. (dd)
Second term (dt)
Definition of second term. (dd)
First term in Second item (dt)
Definition of above (dd)
Second term in Second item (dt)
Definition of above (dd)
Use (dl) and (dd) to effect indentation:
Nam Sun Wang
Department of Chemical Engineering
University of Maryland
College Park, MD 20742
Use (table) to simulate listing with a bullet.
Why bother with (table)? Because it gives a user finer control
over formatting (for control freaks). For example, you may want
to use other bullet symbols.
•
This is a long sentence that spans more than one
line. See how the bullet stays at the left and
listing item is indented to the right of the bullet.
•
This is the second line.
(
This item has a telephone bullet.
J
This item has a smiling bullet.
<
This item has a diskette bullet.
Table
Simplest table.
(th) is table header (usually bold italic and centered);
(tr) is table row;
(td) is table data.
The attributes of the (table) tag include:
(table border=0) ... (no border, default) border=2 etc.
(table cellspacing=?) ... space between cells
(table cellpadding=?) ... space cell contents and border
(table width=?) ... table width in pixels or %
The attributes of the (tr) (td) tags include:
(tr align=left|right|center)
(td align=left|right|center)
(tr valign=top|middle|bottom)
(td valign=top|middle|bottom)
(td colspan=?)
(td rowspan=?)
(td nowrap)
Table Caption with (caption align=bottom).
Other option: "align=top". This section is justified and centered within table.
1st column
2nd column
1st Line
1
2
2nd Line
3
4
3rd Line
5
6
Traditional table.
1st column
2nd column
1st Line
1
2
2nd Line
3
4
3rd Line
5
6
Simulate a colored header (Note the degrees of indentation are
slightly different in the following three examples.
Yellow Colored Heading
Yellow Colored Heading
Yellow Colored Heading
Change color of the border (not working in Netscape v4, but ok in IE4).
This one has orange-red colored border
Font color is back to default.
ABCD
Another table-in-table.
1st row
2nd row
3rd row
4th row
Change color in each cell individually (Not working in Netscape v2).
1st column
2nd column
1st Line
1
2
2nd Line
3
4
3rd Line
5
6
Change background color in each line individually.
This line is red
5
6
This line is green
5
6
This line is yellow
5
6
This line is white
5
6
Change background color in the whole table.
This entire table is red
5
6
This entire table is red
5
6
Flow diagram with (table)
Block #1 2nd line
-----------> Process #1
Block #2 2nd line
Process #2 ----------->
Block #3
---->Outlet
Flow diagram with (table) in (table) to achieve the border box.
The last box has only 1 line; increase its cellpadding by 10 to force the box to be as tall as the first two.
Block #1 2nd line
-----------> Process #1
Block #2 2nd line
Process #2 ----------->
Block #3
---->Outlet
Backgound picture in a cell. (for Netscape v4 only)
This line has a picture background
5
6
This is second line
5
6
Slightly more complicated with center (for each entry in the table),
cellpadding (indentation), cellspacing (lots of space between cells),
and width (80% of the page width for the entire table).
This is a very long liine; just keeps going on and on and on and on and on
This too is a long line and go on and on and on
2
2nd Line
3
4
3rd Line
5
6
Short line
4th Line
7
8
Sum
0
0
Table header (th) highlights that entry:
1st Line
1
2
2nd Line
3
4
3rd Line
5
6
Example of "colspan=2" and "rowspan=2" to span across multiple columns and rows:
Average
3rd Column 2nd Line
4th Column
Height
Weight
1st Line
1
2
2nd Line
3
4
3rd Line
5
6
Another example of "rowspan"
1st column
2nd column
3rd Column
1st Line
1st Line
2nd Line
2nd Line
3rd Line
3rd Line
The same table with default borders, alignment, and more items
(including image files). Note the lack of borders around missing entries.
align in the (table) tag does nothing;
align in the (tr) tag affects all the entries in that row;
align in the (td) tag affects only that one entries.
align works horizontally; valign works vertically.
Average
3rd Column 2nd Line
4th Column
Height
Weight
1st Line
1
2
2nd Line
3
4
3rd Line
5
6
7
Table with "border=0", "cellspacing=0", "cellpadding=0"
cap1
cap2
cap3
Image files with descriptions with "cellspacing=30" and "cellpadding=10"
Nam Sun Wang
Assoc. Professor
Department of Chemical Engineering
University of Maryland
Use table to create a two-column output (including table-in-table) format.
This material fits into the first column.
1st col
2nd col
1st col
2nd col
Use table to create a two-column output.
This material fits into the 2nd column. We can go on and on and on...
Nam Sun Wang
Assoc. Professor
Department of Chemical Engineering
University of Maryland
Table can be used to place a border around phrases etc. (border=5)
Note: (h1) automatically includes a (br) after. So include another (br) to center.
The second examples uses (font size=+3).
This is displayed with a border
This is displayed with a border
This is in many borders
Double Borders with Large Font
Use table to create a post format ...
Left of column #1
Right of column #1
Left of column
Right of column
For more complicated table-in-table format, (/td) is needed to nest properly.
Table header
ABC
Left Aligned
Right Aligned
DEF
Create Border with the frame attribute
Only in HTML4.0.
frame="above"
frame="below"
frame="border"
frame="box"
frame="hsides"
frame="vsides"
frame="LHS" (left hand side)
frame="RHS" (right hand side)
frame="void" (default)
Create Border with the rules attribute
Only in HTML4.0.
11
12
13
21
22
23
31
32
33
11
12
13
21
22
23
31
32
33
11
12
13
21
22
23
31
32
33
11
12
13
21
22
23
31
32
33
The following is the same as "border=0", which is the default.
11
12
13
21
22
23
31
32
33
The following is the same as "border=1"
11
12
13
21
22
23
31
32
33
Split Screen
We can split the display screen to several windows with (frameset).
Click for examples:
With (input type="submit"), it calls up the file/URL specified in
"action=" in the (form) tag. The URL can be just a file name,
http:, ftp:, mailto:, etc. For example, the following does
nothing but displays test1.htm.
A form to email me information. The e-mail function of the browser has to be
set correctly before it works.
Radio buttons (Select only one).
(Use "checked" to begin with checked status.)
Each entry has the same variable name, because radio buttons allow
only one selection.
Another set of radio buttons (Select only one).
Check boxes.
Each entry has a different variable name, because check boxes allow
independent selections.
The following is a selection menu, starting out with Choice 3, showing 1 out of 3.
Same as above, except with "multiple" to show all 3.
Same as above, except displaying 3 out of 5 entries and 2 selected items.
Click & drag to select many items.
Click with CTRL key to select disjoint items.
The following is a Reset Button to reset the above choices.
Input Button with "type=submit".
The following is an input button, using an image.
(Choose a point on the picture.) Clicking will send out varname11.x=?? varname11.y=??
The following uses the default form submitted with "post-query"
cgi, which does nothing but echos back the value of the variables.
The following displays "Searchable index"
(form) enclosed in (pre) tags.
Counter
A borrowed counter example (I could not yet find one at UMCP):
Number of visits:
Automatic Link -- Slide Show Effect
Display another file (or take some other actions) after 10 seconds.
A slide show example.
But not yet fully
supported by Netscape and IE3.
There are over 32K characters in the Unicode system which covers
the characters of the most popular languages, as well as most
mathematical symbols. You may need to choose
|View|Fonts|Universal Alphabet Font (UTF-8)|. For exampe the
following are different ways of specifying the Greek letter
alpha.
α (Unicodes in hexadecimal format)
See the Unicode homepage α (decimal "ASCII" format)
α (name format)
The following insert a video and start playing it once after the file is loaded.
Control play/stop by right-clicking on the video.
Ditto, but start playing when the mouse is over it and loop twice.
Ditto, but with controls and loop forever.
Marquee does not work in a table.
Some of the options for (marquee) are
direction=|left|right|
behavior=|scroll|slide|alternate|
scrollamount=10 (i.e., controls the speed)
loop=10
The following is responsible for background sound; press "Stop" button on
the menu bar to stop.
(bgsound src="test.mid" loop="2")
The following (style) tag changes the behavior of the "a" tag.
The (style) tag usually resides in the header section.
The style tags (as well as the header or footer material) can reside in another file.
Here is a page that changes the look/feel of a document by "(link)" to a style sheet.
Server Side Include (SSI). Here is an example. The file must have extension
of ".shtml", not ".html" nor ".htm".
Use a blank graphics file (nothing.gif) as a spacer. With this technique,
one can control both the horizontal and vertical spacing exactly --
perfectly suited for a control freak.
This setence follows the (img) tag.
