1. HTML = HyperText Markup Language describes the way that a Web page should look. HTML files are Ascii text files that contain some combination of Tags and Text. Tags are directives placed inside a pair of angle brackets (less than and greater than). 2. Syntax: <tag>Some text goes here</tag> Most tags as shown above, have a scope of influence on the embedded text from the Tag opening (<tag>) or start Tag to the Tag closing (</tag>) or stop Tag. Some Tags are optional due to their popularity in html files. 3. Essential HTML Tags
Tag | What it Does | Where to put it |
<html> |
Starts and ends every HTML File. | Put <html> at the start of every Web page; Put </html> at the end of that Web page (file). |
<head> |
Marks the borders of the preface (Meta Data) of an HTML file. | Put <head> right under <html>; Put </head> just above <body> |
<title> |
Defines the (window) title of the Web page. A Browser usually displays the title in the Window banner and the title is listed in Browser Bookmarks or Favorites. |
Put <title> under <head> and put </title> just after the Text title. This is usually within the border of the preface (before </head>) |
<body> |
Marks the borders of the displayable content of an HTML file. | Put <body> right under </head>; Put </body> just above </html> |
<p> |
Marks the start and end of a text paragraph | Anywhere after </head> and before </body> The use of </p> at the end of a paragraph is optional. |
<pre> |
Marks the start and end of a formatted text paragraph | Anywhere after </head> and before </body> The use of </pre> is at the end of the text passage. |
<br> |
Marks the end of a line that is to be displayed | Put as the rightmost tag on a line. </br> is not used. |
<address> |
Marks the start and end of text that contains page creator information | Surround the creator information with the start and end tags: <address>created by name, email address</address> |
<!--comment--> |
Marks the start and end of an undisplayed web page comment | Surround the comment string with the start and end tags: <!--;comment lines--> |
4. Notes about Tags.
Tag | What it means | Where to put it |
<hn> |
Document Header level n=1,...,6 | Within the Body of the page, surround Text with <hn>, and </hn> |
<hr> |
Horizontal Rule (line). There is no close tag | Within the Body of the page, insert <hr> under a section of Text. |
<b> |
Display text in bold style | Within the Body of the page, surround text with <b> and </b> |
<strong> |
Display text in logical bold style | Within the Body of the page, surround text with <strong> and </strong> |
<i> |
Display text in italics | Within the Body of the page, surround text with <i> and </i> |
<em> |
Display text in logical italics | Within the Body of the page, surround text with <em> and </em> |
<u> |
Display text underlined | Within the Body of the page, surround text with <u> and </u> |
<tt> |
Display text as nono-spaced (teletype) | Within the Body of the page, surround text with <tt> and </tt> |
<code> |
Display text as nono-spaced (program code) | Within the Body of the page, surround text with <code> and </code> |
<small> |
Display reduced text size compared to current size | Within the Body of the page, surround text with one or more <small> and </small> |
<big> |
Display increased text size compared to current size | Within the Body of the page, surround text with one or more <big> and </big> |
<font> |
Display named typeface via option | Within the Body of the page, surround text with <font> and </font> |
Options for <font> include: CLASS=name (specify a style class controlling the appearance of the font) COLOR="#ffff00" (Set the color to the 6 character hexadecimal string reflecting RGB color wheel) FACE="name of typeface" (Uses the typeface specified or approximate rendering). SIZE="[+-][1-7]" (provides the font size specification in absolute terms (n=1-7) or relative to a base font size +n or -n.) 5. Lists and Special Characters There are 3 types of lists used in HTML: Unordered (Bulleted) Lists, Ordered (Numbered) Lists and Definition Lists (Glossary). Each type has its own tag and one or more special subtags to identify the list components. Definition Lists use <DL> to start the list, <DL> to indicate the glossary item and <DD> to identify each item's meaning. The other two lists use <UL> and <OL> respectively to start the list, and <LI> to identify each component. These Subtags do not require closing Tags. The structure would look like: <UL> <LI> text <LI> more text </UL> <OL> <LI> text <LI> more text </OL> <DL> <DT> glossary term <DD> glossary item definition <DT> another glossary term <DD> another glossary item definition </DL> Sometimes you'd like to display as text in the web page text strings that are HTML Tags. or interpreted as special characters. (This page is a prolific example). The following table gives an alternate text representation of selected special characters.
Character | HTML Code | Meaning |
& | & | symbolic ampersand |
< | < | symbolic less than |
> | > | symbolic greater than |
1 space | | symbolic non-breaking space character |
" | " | symbolic double quote character |
© | © | symbolic copyright sign |
hyphen | ­ | symbolic hyphen |
° | ° | Degree sign |
superscript number | &supn; | superscript n. superscript 3 becomes ³ |
fraction | &fracnumer.denom.; | fraction a/b becomes &fracab; |
6. Hyperlinks To create a hyperlink (or Anchor) from a Web page to another URL destination, use the Anchor Tag as follows: <a href="destination URL"> text description of destination</a> Examples: To access the URL: http://www.speakeasy.org/~arkay/cis216.html, you would write: <a href="http://www.speakeasy.org/~arkay/cis216.html"> CIS 216 Home Page</a> and the browser would display: CIS 216 Home Page Other Options include: HREF="Destination URL" NAME="#text" (To pinpoint a location in a Web Page.) REL=["next"|"previous"|"parent"|"made"] (Relative) REV=["next"|"previous"|"parent"|"made"] (Reverse) TITLE="title">Title</a> (To reference the title of the anchor) In general, Destinations use the following (case sensitive) syntax (without spaces!): Service ://host name:port number/directory path[/filename] Special characters that can be symbolicized within a URL include: Space as %20 Tab as %09 Enter as %0A Linefeed as %0D Percent as %25 Destination Services include: Protocol Meaning afs File accessed via the Andrew File System cid Content identifier for a Mime body part message file Access to a [local] file ftp File accessed via [anonymous] ftp gopher Gopher resource http Hypertext Transfer Protocol resource mailserver Data accessed via a mail server mailto Mail a message to a specified address mid Identifier of a specific mail message news Usenet Newsgroup nfs File accessed via the Network File System nntp Usenet news for local NNTP access only prospero Resource accessed via a Prospero directory server rlogin Interactive rlogin session telnet Interactive telnet session tn3270 Interactive 3270 telnet session wais Access to a Wais database z39.50 Access to a database via a Z39.50-type query 7. Images To display images (pictures) on the web page the <img> Tag is used. The Tag has numerous options but only the src option is required. Most graphical browsers are set to support only two graphical formats: GIF and JPEG The Syntax for this tag is: <img src="destination" [option=value]> Options include: SRC="destination" (destination is the path to the *.gif or *.jpeg, *.jpg file containing the image) ALIGN=alignment (Aligns the subsequent object to TOP, MIDDLE, or BOTTOM of image, as specified. ALT="text description of image" (provides a verbal description of the image for text browsers). ISMAP (provides an image map with multiple click spots.) BORDER=n (Border pixel thickness that surrounds image) HEIGHT=n (Height of image in scan lines) HSPACE=n (Space to be added in pixels to the left and right of the image) WIDTH=n (Width of image in pixels) VSPACE=n (Space to be added in pixels to the top and bottom of the image) References: 1. Barry Rosenberg, Hands-on Korn Shell Programming, Addison-Wesley, 1999
2. Dave Taylor, Creating Cool Web Pages with HTML, ITG Books, 1995
3. Chuck Musciano and Bill Kennedy, HTML The Definitive Guide, 3rd Edition, O'Reilly & Associates, 1998
4. Beginning html at www.htmlgoodies.com 5. Web Design Group HTML Reference 6. Vancouver B.C. Meta-Tag Builder 7. Vancouver B.C. HTML Tool Index