Davis Community Network

HTML Class 2

References:
DCN Information Providers' Resources (www.dcn.davis.ca.us/about/html/)
HTML 2.0 Code Examples (www.dcn.davis.ca.us/go/csandvig/ip/example.html)

Assembled by Anne Hance (rahance@dcn.davis.ca.us)

DCN Business Office (530) 750.1170
TECH Support: (530) 750-0101
New accounts, ISDN accounts, networking: (530) 758-0119

Review

Hyper Text Markup Language (HTML) authoring is not programming.
HTML is a mark-up language. An HTML "page" is a plain text document with descriptive codes (markup) inserted into it. This markup includes codes for forming hypertext links which allow a visitor to the page to connect to other sources of information such as other documents, images, sound files and video clips.

HTML is platform-independent. This means that HTML documents are portable from one computer system to another.

Once an HTML document has been marked up, many different User Agents can process the document based on its structure. The most common User Agents are, of course, web browsers (Netscape, Explorer, Mosaic, Lynx etc.). But there are other User Agents such as speech devices for the blind, various search engines and spiders, and scripts which create tables of contents or outlines.

HTML versions

The official standards for HTML are developed by the World Wide Web Consortium Independent of the WWW Consortium's work, browser-specific tags have been introduced by software developers working for commercial companies (such Netscape, and Microsoft's Internet Explorer etc.) Other browsers tried to duplicate the new effects, but this didn't always work as expected and it has led to confusion and problems when authors used these elements and then found that they didn't work as expected in a browser other than Netscape.

World Wide Web Consortium (W3C) documents explaining existing and planned HTML coding can be found at http://www.w3.org/pub/WWW/MarkUp/Wilbur/

DESIGN

Web sites should be designed so that their contents and layout are clearly apparent to a person browsing the site, and so that the site can easily and efficiently be navigated.

Each page (file/document) should load quickly, fit within the width of most monitors (horizontal scrolling is not popular), have a pleasing, well laid out appearance, and should usually not require extensive vertical scrolling.

Image files (.gif .jpg) should be as small as possible because they slow down loading. Frames should be used only when truly necessary.

CONSTRUCTING AN HTML FILE/DOCUMENT

Your file must be prepared in a "text only" format:

Your file-name must end in .html (Macintosh) or .htm (PC). The file name must be without spaces. Browsers are case sensitive in respect to file names. On your own hard drive when you are testing your pages the browser is sometimes forgiving and will recognize files even if they are not properly cited. However, once your file is on an Internet Server it will only be recognised when the precisely accurate file name is used.

While browsers are very fussy about file names they are not fussy about the tags used within the html file which can be upper or lower case - or even a mixture!

You can construct your HTML page or series of pages in a folder (directory) on your hard drive and test them with your browser but when you want to make them available to the rest of the world via the Internet you have to transfer them onto the Internet Server (just another large capacity hard drive!) of the Internet Service Provider with whom you have an account. You need to be connected to your service to transfer your files and you need the proper software to make the transfer.

The basic elements of an HTML file are:

<HTML>
<HEAD>
<TITLE> The title of the document </TITLE>
</HEAD>
<BODY>
... document body ... the body consists of the text (words) that you mark up using tags that the browser uses to format your words into headings, paragraphs etc. Along with the text you will want to include links to image files (.gif or .jpg formats) that the browser will find and will display on your page with the text.
</BODY>
</HTML>

Terminology

HTML "elements"
Most, but not all, HTML tags are paired so that that an opening tag is followed by the corresponding closing tag, and there can be text or tags between them, as in <H1>Foreword</H1>

In such cases the two tags and the part of the document enclosed by them forms a unit which is called HTML element.

Some tags, e.g. <HR>, are HTML elements by themselves and use no end tag.

HTML "attributes"
For each element, a set of possible attributes is defined. Most elements accept one or a few attributes. In almost all cases the attributes are optional.

An attribute specification consists of the following, in this order:

* the attribute name, e.g. WIDTH
* the equals sign =
* the attribute value, which is a string, e.g. "80".

Attributes, if present, are written into the start tag of an element, after the element name. They must be separated from the element name and from each other by blanks. The order of attribute specifications in a tag is insignificant.

It is always advisable to enclose the attribute value in quotes, using either single or double quotes, using matching quotes of course.

An HTML 3.2 compliant document (file) should look basically as follows:

(Note: the line numbers are only for reference - they are referred to on the pages following this one)

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
  2. <HTML>
  3. <HEAD>
  4. <!-- Document authored by ------------- and created on -------- -->
  5. <TITLE>A brief but descriptive title</TITLE>
  6. <META NAME="DESCRIPTION" CONTENT="Description of the document">
    <META NAME="KEYWORDS" CONTENT="keywords separated by commas">
  7. <BODY BACKGROUND="gifs/tiled.jpg">
  8. <H1 ALIGN="center">The visible page title here</H1>
    <H2>and perhaps a subtitle</H2>
  9. <P>Since joining DCN , I seem to spend a <EM>lot</EM> of my time <BR> reading about and writing HTML.</P>
  10. <P>I often use <A HREF="http://www.yahoo.com> Yahoo</A> to search the web.
    Take a look at my list of <A HREF="bookmarks.html> favorite sites </A> <P>
  11. <IMG SRC="gifs/photo.gif" ALT="photo" ALIGN="left" width="128" height="115">
    Photo of me!<BR CLEAR="left"></P>
    <H2>Some Useful Sites</H2>
  12. <OL>
    <LI><A HREF="http://www.w3.org/">The World Wide Web Consortium (W3C)</A>
    <LI><A HREF="http://www.werbach.com/barebones/barebone.html">The Barebones Guide to HTML</A>
    <LI><A HREF="http://www.dcn.davis.ca.us/about/webpage.html">DCN Web Page Setup</A>
    </OL>
  13. <A HREF="homepage.html> Homepage </A>
  14. <ADDRESS>
    Last updated 23 July 1998 by
    <A HREF="mailto:rahance@dcn.davis.ca.us" >rahance@dcn.davis.ca.us (Anne Hance)</A>
    </ADDRESS>
    </BODY>
    </HTML>

The numbered sections below refer to the numbered lines of the document above

1. DOCTYPE

This is a so-called DOCTYPE declaration. It is used by Standard General Markup Language (SGML) tools (eg. "browsers") to detect what kind of document is being processed.
A document that is HTML 2.0 compliant would use the following DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
If the document is HTML 3.2 compliant), the DOCTYPE declaration should look like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

The DOCTYPE declaration identifies the Document Type Definition (DTD) which defines the elements used. The declaration tells us that this is an HTML document conforming to the public, unregistered (the minus sign) final version of the DTD for HTML 3.2, which was developed by the World Wide Web Consortium (W3C) and is written in English (EN).

Some web page editors include an arbitrary DOCTYPE declaration in the documents they produce, even when it is not correct. Note that in particular, any doctype for HTML 3.0 is not an "official" declaration, since that proposal has been expired for a long time.

2. <HTML> </HTML>

This tag goes around the entire document. Basically, it states that the rest is all HTML, as opposed to some other language which may use tags within < and > brackets.

3. <HEAD> </HEAD>

The head of your document contains information about the document itself. Nothing within the HEAD section will be displayed in the document window. The head section must include the TITLE of the document. It can optionally contain things like a description, a list of keywords for search engines, and the name of the program used to create the HTML document.

4. <!-- COMMENT -->

Comment elements can be placed in the head or body elements. Browsers do not display them and so they are very useful for recording the page author's notes to him/herself

5. <TITLE> </TITLE>

The TITLE tag: <TITLE>The title of the document</TITLE> is the only required tag for the head section.

It is typically displayed in the browser's window title bar, and used in bookmark files and search engine result listings. For the last two situations, you should make sure the title is descriptive for the document - "Homepage" or "Index" doesn't say much in a bookmark file.

6. <META ..... >

META tags provide "meta information" about the document. For example, a Meta tag can give a description of the document, indicate when the document will have expired or what program was used to generate it. There are many possible META constructs - for example:

To provide information which is used by search engines such as Alta Vista and Infoseek:
<META NAME="DESCRIPTION" CONTENT="put a line about the page here">
<META NAME="KEYWORDS" CONTENT="keywords separated by commas">
To keep robots out of a document:
<META NAME="ROBOTS" CONTENT="NOINDEX">
To redirect a link:
<META HTTP-EQUIV="REFRESH" CONTENT="3; URL=filename.html"> This page has moved. Please wait and I will take you to the new page.

7. <BODY> </BODY>

The BODY of the document contains the actual information. There must be only one BODY statement in the document. Some web-page editors incorrectly insert another BODY statement for each new attribute you want to add to the body, but this can have unexpected side-effects (such as some of the attributes getting ignored completely).

<BODY BACKGROUND=" ? ">

If you use attributes such as backgrounds, you do not add a second BODY tag. Instead, the attribute is added to the existing BODY tag. An example of a tiled background tag might be:

<BODY BACKGROUND="gifs/tiled.jpg">

A simpler way of enhancing your page (much quicker loading than a tiled image) is to simply use a background color. The tag below will make the window the color "aqua".

<BODY BGCOLOR=" ? ">

Research has shown that windows (pages) with white backgrounds are easier to read than the default grey or another color. So, it depends on your purpose for the page. If it contains serious reference information I suggest a white background. If it is a "fun" page go ahead and use background colors or tiled images!.

To make a white background you use either of the following body tags:
<body bgcolor="white"> or <body bgcolor="#ffffff">
(Notice that I used lower case - it makes no difference which case you use in this situation)

8. <H?> HEADINGS </H?>

Most browsers will display the text inside heading tags with some sort of emphasis (large font, etc). In addition, when webcrawlers are indexing your page, text that is inside headings may be given extra weight. Levels 1 through 6 are recogtnized by most browsers.
<H1>The main, page title</H1>
<H2>and perhaps a subtitle</H2>

The main, page title

and perhaps a subtitle

9. <P> PARAGRAPHS AND <BR> LINE BREAKS (hard returns)

The <P> tag instructs the browser to end the previous line and leave a two line space before starting the next line of text. The <BR> tag simply results in an end-of-line and the text continues on the next line.
<P> Attributes - are limited to: <P ALIGN=CENTER> which centers the paragraph and, in more recent browser versions <P ALIGN=RIGHT> which right-aligns the paragraph.
<BR> Attributes - include: <BR CLEAR=LEFT> used to stop text flowing alongside an image that is aligned to the left margin Also - <BR CLEAR=RIGHT> and <BR CLEAR=ALL> (used when there are images aligned to each margin)

You will notice that spaces in your HTML text are always collapsed by the browser to a single space. If you have spaces on the html page, the extra spaces will not show on the web page when it is displayed by the browser.

10. CREATING LINKS - WITH THE ANCHOR ELEMENT

How do we manage links to and within Local documents?
a) A link to another file/document <A HREF="chemistry.html"> xxx </A>
b) A link to a spot in the current document <A HREF="#keyword"> xxx </A>
c) How to mark the target for b) above <A NAME="keyword"> xxx </A>

How do we manage links to other documents in various locations?
a) Relative links - this method requires that an author determine a site's heirarchy ahead of time so that the directories retain the same names and the same relationship to each other.
www.dcn.davis.ca.us/~rahance

(Directory names in the diagram below are in bold and shaded in grey)
public_html




contents.html


Science


science.html



chemistry.html



Chemistry




atoms.html


Biology




Organic




carbon.html

* from science.html to chemistry.html <A HREF="chemistry.html"> xxx </A>
* from science.html to atoms.html <A HREF="Chemistry/atoms.html"> xxx </A>
* from science.html to carbon.html <A HREF="Biology/Organic/carbon.html"> xxx </A>
* from carbon.html to atoms.html <A HREF="../Chemistry/atoms.html"> xxx </A>
* from carbon.html to science.html <A HREF="../../science.html> xxx </A>
* from carbon.html to contents.html <A HREF="../../../contents.html> xxx </A>

b) Absolute links using full domain and directory/file path names

* a link to a file in rahance's top-level (public_html) directory
<A HREF="http://www.dcn.davis.ca.us/~rahance/contents.html"> xxx </A>
* a link to a document in a subdirectory of rahance's public_html directory
<A HREF="http://www.dcn.davis.ca.us/~rahance/Science/chemistry.html">xxx </A>

11. <IMG SRC=" ? "> Linking inline images using the <IMG element

<IMG SRC="gifs/photo.gif" ALT="my photo"><BR>
This is a picture of me working at my computer
On graphics-capable browsers this will display the inline graphic specified by the SRC attribute - the graphic image is a separate file and in the example given is in a folder named gifs.
An image file has a suffix describing the type of image eg. .gif, .jpg or .jpeg which can be rendered/displayed by the browser into an image on your web page. Other graphic formats such as .pict or .eps etc. are not understood by web browsers.
On non-graphics browsers, and on graphics browsers which have image-loading turned off, the text of the ALT attribute will be displayed instead. The IMG element has no end tag.

Considerations when managing images:

  1. Graphic Programs are used to create images and converters are used to convert from one format to another.
  2. Graphics formats (gif, jpeg or jpg)
  3. Use image pixel size information <IMG HEIGHT="25" WIDTH="50" SRC="name.GIF">
The IMG element supports the following attributes:

ALT ... This is used to provide a text description of the image and is vital for interoperability with speech-based and text only user agents.
ALIGN=TOP ... positions the top of the image with the top of the current text line. User agents vary in how they interpret this.
ALIGN=MIDDLE ... aligns the middle of the image with the baseline of the textline.
ALIGN=BOTTOM ... is the default and aligns the bottom of the image with the baseline.
ALIGN=LEFT ... floats the image to the current left margin, temporarily changing this margin, so that subsequent text is flowed along the image's righthand side.
ALIGN=RIGHT ... floats the image to the current right margin, and subsequent text is flowed along the image's lefthand side.
WIDTH=" " ... Specifies the intended width of the image in pixels. When given together with the height, this allows user agents to reserve screen space for the image before the image data has arrived over the network.
HEIGHT=" " ... Specifies the intended height of the image in pixels. The WIDTH and HEIGHT attributes are HTML 3.2 options for specifying the size of the image. Although they can be used to resize images, this is definitely not recommended.
BORDER=" " ... When the IMG element appears as part of a hypertext link, the user agent will generally indicate this by drawing a colored border (typically blue) around the image. This attribute can be used to set the width of this border in pixels. Use border=0 to suppress the border altogether.
HSPACE=" " ... This can be used to provide white space to the immediate left and right of the image.
VSPACE=" " ... This can be used to provide white space above and below the image

12. <UL> </UL> Lists

On the left we have an unordered list containing two items, on the right is an ordered list.:
<UL>
<LI>Item
<LI>Item
</UL>
<OL>
<LI>Item (will be numbered 1.)
<LI>Item (will be numbered 2.)
</OL>
Attributes allowed within the <UL> tag are: TYPE=circle / square (default is usually a bullet)
Attributes allowed within the <OL> tag are: TYPE=A / I / a / i (the default is 1,2 ...)

What should you put at the end of your page?

13. Because visitors can arrive at many different pages of a site it is important to have a link on every page of the site to take the visitors to a page that lets them know what the rest of the site includes. A link to the homepage is commonly used this way.

14. It is good style to include the date the document was created and/or last updated, and an email address for the author:

<ADDRESS> Last updated 23 July 1998 by
<A HREF="mailto:rahance@dcn.davis.ca.us">rahance.dcn.davis.ca.us (Anne Hance)</A> </ADDRESS>

Finally, the document is finished off by inserting the </BODY> end tag and the </HTML> end tag.

MISCELLANEOUS ELEMENTS & attributes

Block Quote <BLOCKQUOTE> </BLOCKQUOTE> this element is indented
Center <CENTER> </CENTER> (for text and images)
Font Size <FONT SIZE=" "> </FONT> (ranges from 1-7)
Font Color <FONT COLOR="#********"> </FONT>
Horizontal Rule <HR> Can have a number of attributes: WIDTH/SIZE/ALIGN/NOSHADE
e.g. <HR WIDTH="100%"> or <HR SIZE="5" WIDTH="50%" ALIGN=CENTER>

CHARACTER STYLES

1. logical <STRONG> </STRONG> <EMPHASIS> </EMPHASIS>
2. physical <B> </B> <I> </I>
3. preformatted text <PRE> </PRE>

COLORS

The sixteen color names below are recognized by most user agents. You can also specify colors by their Red Green and Blue components using hexadecimal (base 16) equivalents for the actual RGB numbers. The hex numbers for the named colors are shown as they must be written as attributes.
aqua ="#00FFFF" black ="#000000" blue ="#0000FF" fuchsia ="#FF00FF"
grey ="#808080" green ="#008000" lime ="#00FF00" maroon ="#800000"
navy ="#000080" olive ="#808000" purple ="#800080" red ="#FF0000"
silver ="#C0C0C0" teal ="#008080" white ="#FFFFFF" yellow ="#FFFF00"
The hex numbers use numerals 0 - 9 and letters a - f

TABLES

Define Table <TABLE> </TABLE>
Table Border <TABLE BORDER=" "> </TABLE>
Cell Spacing <TABLE CELLSPACING=" "> (inpixels)
Cell Padding <TABLE CELLPADDING=" "> (in pixels)
Desired Width <TABLE WIDTH=" "> (in pixels)
Width Percent <TABLE WIDTH=" %"> (percentage of page)
Table Row <TR> </TR>
Table Cell <TD> </TD> (must appear within table rows)
Columns to Span <TD COLSPAN=" ">
Rows to Span <TD ROWSPAN=" ">
Cell Color <TD BGCOLOR="#******">
Table Header <TH></TH> (bold and centered)
Columns to Span <TH COLSPAN=" ">  
Rows to Span <TH ROWSPAN=?>  

CONSTRUCTING A TABLE

Tables are set up with columns and rows in order to place text so that it is organized in a specific way on a web page as displayed by a browser. Most browsers have recognized TABLE tags for several years but other types of User Agents may not.

A table opens and closes with TABLE tags; a table row opens with <TR> and closes with </TR> and each table data cell of that row opens with <TD> and closes with </TD> Here is a simple table:

<TABLE WIDTH="450" BORDER="1">
<TR>
<TD> put as much information here as you wish </TD>
<TD> and more information here </TD>
</TR>
<TR>
<TD> this is the second row of this table and the first data cell in the row. <P> A number of elements can be used inside a data cell
<P> </TD>
<TD bgcolor="#abcdef"> Some browsers recognize the bgcolor element inside a table cell and some do not. Try it! </TD>
</TR>
</TABLE>
[Table Exercise #2a] ...- ... [Table Exercise #2b]

ALMOST ANYTHING YOU NEED TO KNOW CAN BE FOUND ON THE WWW.

You might benefit from checking some of these resources:

  1. Introduction to HTML by Dianne Gorman, at http://www.awpa.asn.au/html/index.htm
  2. Getting Started with HTML, at http://www.hut.fi/u/jkorpela/html-primer.html
  3. Introduction to HTML at http://www.cwru.edu/help/introHTML/
  4. NCSA Beginner's Guide to HTML is available at http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
  5. Yahoo!'s computer area, http://www.yahoo.com/Computers/, which contains, in its World Wide Web section, a list of guides and tutorials on HTML (quality varies).
  6. When you have doubts about the exact form, meaning, and limitations of an HTML tag, you should consult the most official documents on HTML available: the World Wide Web Consortium documents at http://www.w3.org/pub/WWW/MarkUp/Wilbur/ especially the W3C new recommendations for HTML 4.0 Reference Specification
CHECKING YOUR HTML

When you have started creating and maintaining important HTML documents, you should learn to use a validator, i.e. a program which checks your HTML code against the HTML 3.2 (or some other) specifications. Even if you know HTML 3.2 well, you will by mistake violate the specification; for instance, just forgetting an ending quote can cause problems. Since different browsers have different error handling, you may not notice the error in your environment but your readers may get confused.

It is not sufficient to check that "it works" on your browser. Other people will use that browser in a different environment or with different settings, different versions of the browser, or even quite different browsers. Browsers very often pass invalid HTML without giving error messages, perhaps even handling in such a way that things seem to work fine. For other people, it might be a mess.

Therefore, validate your code. There are online services ( i.e. Web pages containing forms which accept a URL of a document and send back the validation report. One of them is the * W3C HTML Validation Service at <http://validator.w3.org/>.

You can also test your page for accessibility at * the Bobby Site <http://www.cast.org/bobby/>

Yet another important issue is checking the links. One of the worst problems in Web authoring is "linkrot". Documents to which you have linked might have been deleted or moved to another location. * NetMechanic at <http://www.netmechanic.com/index.shtml> allows you to send a URL to be checked for technical validity of links, and it will reply by E-mail.

PUTTING YOUR WEB PAGE ONTO THE DCN WEB