|
HTML stands for HyperText Markup Language. It is defined using SGML (Standard Generalized Markup Language) and provides tags to identify document structure for later formatting and links to other documents.
|
|
This presentation will cover the most commonly used or important features of HTML; more details can be found in the references.
|
Topics will include
-
formatting text on a web page and creating links to other web pages
-
using images and imagemaps
-
creating forms
-
creating tables
-
creating frames
|
|
Features will be included from both HTML2.0 and HTML3.0, and the enhancements from the Netscape 1.1 and Netscape2.0 browsers.
|
References:
-
HTML Plus! by James E. Powell, Wadsworth Publishing.
-
http://www.netscape.com/toc.html - Various documents on html features, under the Assistance section of this Table of Contents from Netscape.
|
|
HTML stands for HyperText Markup Language. It is defined using SGML (Standard Generalized Markup Language) and provides tags to identify document structure for later formatting and links to other documents.
|
|
This presentation will cover the most commonly used or important features of HTML; more details can be found in the references.
|
Topics will include
-
formatting text on a web page and creating links to other web pages
-
using images and imagemaps
-
creating forms
-
creating tables
-
creating frames
|
|
Features will be included from both HTML2.0 and HTML3.0, and the enhancements from the Netscape 1.1 and Netscape2.0 browsers.
|
References:
-
HTML Plus! by James E. Powell, Wadsworth Publishing.
-
http://www.netscape.com/toc.html - Various documents on html features, under the Assistance section of this Table of Contents from Netscape.
|
There are several software packages to help you with the tedious business of putting in all the formatting tags. Here are some that I know people who use:
-
Adobe PageMill for Macs
-
HotMetal for Unix and Macs
-
MicroSoft FrontPage for PCs
-
BbEdit, not really an editor but nicely formats results
|
Here are some that I know people who DON'T use:
-
Claris Home Page
-
My Software's My Internet Business Page
-
MicroSoft Publisher97
|
Issues to look for
-
Nice interface, ease of use, low reliance on techie terms
-
Templates (example pages) to get you started
-
The program should load any html text file, not just files in its own internal format.
|
|
Editors can never have all the latest features and tags, so knowing how to add tags by hand is always a help.
|
|
A web page has tags to show the different parts and to identify its purpose on the Web.
|
|
Each web page is one Unix, Mac or PC file.
|
|
The top level file (sometimes called the "home page" is usually named "index.html". You can actually call it anything.html, but if it's index.html, your URL can be shorter.
|
The text of each web page is surrounded with html, head, body and title tags:
-
<html>
-
<head>
-
<title>The Oriental Rug Company in Syracuse NY</title>
-
</head>
-
<body>
-
. . . {all your other html, text, links and images
-
</body>
-
</html>
|
|
The title does not actually appear in your homepage, but is an English version of your URL - it serves as a identifier to the WWW. Browers can show the title of the page they are viewing in the header bar and save it in the bookmarks.
|
Headers come in different sizes, from <h1> very large down to <h6> very small. For example, a page might start with a large header of the name of the company, followed by a smaller header with a short description:
-
<h1> Oriental Rug Company </h1>
-
<h3> Imported Handmade Oriental Rugs </h3>
|
|
Blank space and line breaks in your file are ignored in HTML. It will format the lengths of your lines to whatever will fit in the window, disregarding however you may have typed it.
|
To separate two sections of text, you can add a line break tag, <br>, with no blank lines, or a paragraph tag, <p>, which has extra blank lines.
-
Every year we stock thousands of rugs in all patterns
-
which we obtain in our annual rug-buying expeditions
-
to the markets of the Middle East. <p> . . .
|
|
Links can also refer to any other documents on the Web.
|
|
For example, suppose that we want to include references to other information about rugs.
|
|
The Oriental Rug Company is a member of the
|
|
<a href="http://www.unusualrugs.org/general/index.html"> Oriental Rug Consortium </a>, an organization devoted to identifying and preserving sources of Oriental rugs.
|
|
The string of characters in the HREF field is called a Uniform Resource Locator or URL. It provides a unique way of locating any document on the Internet. Server types include http, ftp, gopher, WAIS, news, telnet.
|
|
Note that in the above example, the URL could also be given as http://www.unusualrugs.org/general/
|
|
Sections of text can be marked to be formatted as they appear in the file. <pre> for preformatted and <blockquote> which also indents.
|
|
"Trust your browser":
|
|
Logical Styles:
|
|
<dfn>, <em>, <cite>and <var> typically displayed in italics.
|
|
<code>,<kbd>,<samp> typically displayed in fixed-width font.
|
|
<strong> typically displayed in bold.
|
|
Physical Styles:
|
|
<b> bold
|
|
<i> italic
|
|
<tt> typewriter - fixed-width font
|
|
Escape sequences for characters used for tags
|
|
< for <
|
|
> for >
|
|
& for &
|
|
" for "
|
|
Additional escape sequences support special characters, such as ® for the Registered Trademark symbol and © for the Copyright symbol.
|
Another way to specify larger and smaller sizes of text, is to give font size.
-
<font size=value> where value is from 1 to 7
-
<font size=+1> to increase current size by 1
|
|
The default size is 3. Of course, this is all relative to the sizes chosen by the browser.
|
|
A Netscape 2.0 enhancement:
|
|
where each pair HH of hexadecimal digits specifies a number. The three numbers are taken as Red, Green and Blue in the RGB color representation.
|
|
Netscape also allows certain predefined color names, e.g. "white".
|
|
Another Netscape 2.0 enhancement is providing tags for subscripts and superscripts <sub> and <sup>, HTML 3.0 has come out with more math tags.
|
|
You should always add your address to the bottom of any HTML page you create, so people know how to contact you with questions or comments.
|
|
There is an address tag for this, which just puts the text in italics. Usually people separate this from the rest of the text by a horizontal line.
|
|
<hr>
|
|
<address> This page maintained by the staff of the Oriental Rug Co., Learbury Building, Syracuse NY. Please send comments to oriental@aol.com.
|
|
</address>
|
|
Or you can use the convenient "mailto" feature:
|
|
Please send comments to <a href="mailto:oriental@aol.com">oriental@aol.com. </a>
|
|
People often put a copyright symbol, or an anchor to a copyright notice here. (Copyright issues are still being debated.)
|
|
If the page has information that changes frequently, you may wish to put a notice "Last updated on 1/5/95".
|
|
Browsers such as Mosaic and Netscape allow you to include images inbetween lines of text.
|
|
The image must be in GIF format. (Netscape now allows inlined JPEG images.)
|
|
Suppose that we make a banner for our company that includes the name in a GIF image. Then we can replace our original plain text header with the image:
|
|
<img src="rugbanner.gif", alt="Oriental Rug Company">
|
|
Only the SRC attribute of the image is required. ALT is optional and gives alternate text for text-based viewers such as Lynx which cannot show the image.
|
|
The attribute BORDER=value tells the width of the picture border in pixels (this is blue if the image is a link).
|
|
The VSPACE=value and HSPACE=value attributes specify the numbers of pixels of blank space to surround the image.
|
|
Another attribute is ALIGN=top|texttop|middle|absmiddle|baseline|bottom|absbottom. If there is any text after the picture which can fit on the formatted page besides the picture, this will say how to place it. The default is "bottom".
|
|
Mosaic and Netscape can show images in other formats as well as audio and video.
|
|
The image, audio, or video must be in a file with the correct file extension. For example, images in JPEG or TIFF formats must have the form
|
|
Or one audio format has the form
|
|
In your document, you put an anchor to an external document which has the image, audio, or video
|
|
<a href="tekke.gif"> Click here to see a picture of a Tekke rug. </a>
|
|
Saying "click here" is not usually recommended. Instead people generally put a tiny version of the picture, called a thumbnail. Any such picture will have a blue bar around it and everyone assumes that it can be clicked on to get a larger version of the picture.
|
|
<a href="tekke.gif"> <img src="tekketn.gif"> </a><b>Tekke Prayer Rug </b>
|
|
There is a fairly standard list of free viewers which are available to anyone with a Mosaic or Netscape client. However, this is an area where you should know what kind of viewers your intended audience is likely to have.
|
|
Audio and video are available through anchors.
|
|
<a href="rugsales.au"> Here is a message from one of our friendly salespersons. </a>
|
|
Or simply put an audio icon to indicate an audio file.
|
|
<a href="rugsales.au"> <img src="iconaudio.gif"></a>
|
|
Since people have a wide variation in how fast their network is, it is a nice style to warn people if an image, audio, or video is likely to be large enough to cause some people to have too slow a download time. The download time is roughly equivalent to the size of the file, so these objects often have sizes posted.
|
|
<a href="video.mpeg"><img src="iconvideo.gif"> My video </a> 3 Mbytes - Very Slow!
|
|
HTML for sample text field
|
|
Type your name: <input type="text" name="username" value="nobody" size=20 maxlength=40>
|
|
What shows on the browser window is
|
|
Type your name: nobody
|
|
The typing box is of length 20 characters (default=20) and will scroll up to a max of 40 characters (default=unlimited). The value, size and maxlength fields are optional - "nobody" is the initial value in this case.
|
|
What is sent to the CGI program is the name and value pair: username=<whatever the user typed>
|
|
The password field is the same, except that whatever the user types is not shown, <input type="password" . . .>
|
|
The hidden field is the same, except that nothing shows on the browser, <input type="hidden" . . .>. This is a technique for one CGI program to pass data to another.
|
|
A checkbox field has the form
|
|
Pepperoni <input type="checkbox" name="pepperoni">
|
|
If the user checks the box, then pepperoni=on is sent to the CGI program. Or you can add a value attribute such as value="ok", and then value=ok is sent.
|
|
Radio buttons are similar except that you typically put several of them with the same name field and the browser only allows one of them to be checked.
|
|
<input type="radio" name="topping" value="pepperoni"><br>
|
|
<input type="radio" name="topping" value="mushroom">
|
|
If the user checks mushroom, then topping=mushroom is sent to the CGI program.
|
|
Both fields allow an attribute checked, which makes the default value be on.
|
|
<input type="checkbox" name="pepperoni" checked>
|
|
This example asks for the name and email address, some demographics, and for feedback.
|
|
<form method=post action="http://??/cgi/users.pl">
|
|
Name: <input text name="username" value="noname"><br>
|
|
Email: <input text size=30 name="usermail"><br>
|
|
Zipcode: <input text name="userzipcode"><p>
|
|
<select name="usersex">
|
|
<option> Male <option> Female </select><p>
|
|
Please send us your comments!<br>
|
|
<textarea name="usercomments" rows=6 cols=50> </textarea>
|
|
<input type="submit" value="send comments">
|
|
<input type="reset" value="clear form">
|
|
</form>
|
|
Before the end of the form, we will ask for all the information from one customer. (There is no way to tell if two different forms came from the same session.)
|
|
Allow users to click on areas of a map or picture to get more information on the subject represented there.
|
|
To define a map, get an image and find the pixel coordinates of the "hot spots" (link areas). xv is a handy program for this.
|
|
Each hotspot has a shape of circle, polygon, or rectangle. The rectangle is given by Upper Left corner and Lower Right corner pixel coordinates, the circle by Center and an edge-point, and the polygon by a sequence of points.
|
|
Example definition of an image map file (called usa.map) with two hot spots:
|
|
default default.html
|
|
rect /map/indiana.html 230,100 260,150
|
|
circle /map/rhodeisland.html 600,90 600,85
|
|
Put a link to an image map in your html document and use the ISMAP attribute in the <img> tag that refers to the actual image.
|
|
<a href="http://www.orc.com/map/usa.map">
|
|
<img src="map/usa.gif" ISMAP></a>
|
|
Multiple, independently scrollable frames in a single browser screen. Each frame can have its own URL.
|
|
Frames can be used to place static objects within the window, such as banners, table of contents, control bars, copyright notices, etc.
|
|
Frames also provide the ability to view more than one information source, such as submitting a keyword for searching in one frame and viewing its results in another. Both can be on the screen at one time.
|
In an html frame document, the tags <frameset> . . . </frameset> replace the <body> tags of a normal html document. The frameset tag can have one of the attributes:
-
ROWS="rowheightvaluelist" where each value is either in pixels or a percent.
-
COLS="columnwidthlist", also is pixels or percents.
|
Within the frameset tags, only the tags, <frame>, <noframes>, and <frameset> . . . </frameset> (for nested frames) can appear.
-
The <noframes> tag pair can give a normal html body for browsers that don't have frames.
|
|
In Client Pull, the web server can send an HTTP response with a header of type Refresh. This causes the browser to request a new page automatically after some time.
|
|
In Server Push, the web server can send an HTTP response indicating a multi-part response. The browser then expects more pages to be sent, which the server can do at its own timing.
|
|
In Server Push, the HTTP connection is kept open between the browser and the server for the duration of the responses. In Client Pull, the connection is closed and reopened each time the browser sends another request for a refresh. Thus Server Push is best for small size files that are going to be sent at small intervals, like animations of small images, and Client Pull is best for larger or longer interval transmissions, such as stock ticker updates.
|
Outside Index
Summary of Material
Denote Foils where Image Critical
Denote Foils where HTML is sufficient
denotes presence of Additional linked information which is greyed out if missing
