INTRODUCTION TO HTML:
Publishing for the World Wide Web Class Notes

Get the Book!

The closest thing we have to a textbook for this course is A Beginner's Guide to HTML at http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html.

Topics covered:

At the end of each section are short exercises for hands-on practice with HTML.

 

CONSTRAINTS

First a few words of caution...

Copyright Issues

Publish for Non-commercial Purposes

 

[Return to top]

REVIEW OF CLIENT/SERVER & URL's

Client/Server Architecture

Client/server is a essentially division of labor among networked computers. A server stores information and sends it upon request to the client. A client requests information from the server and displays that information to the user.

Hypertext Markup Language (HTML) files are not platform-specific. A WWW server stores your HTML files and can send them to any machine running on any platform (Mac, Windows, Unix, etc.). The client machine uses platform-specific software (browser) to display HTML files on your computer.

Different browsers may display your HTML file differently. There are text-based browsers (Charlotte on UKCC, Lynx at telnet sites), and graphical browsers (Mosaic, Netscape, etc.). UK supports Netscape.

Graphical browsers are supplemented by helper applications for playing audio or video, displaying word-processor files, etc. The text editor we will use in this course can be a helper application working in conjunction with Netscape.

 

How Does Client/Server Work?

 

Uniform Resource Locators (URLs)

A Uniform Resource Locator (URL) is a type of Internet address. Be aware that they are VERY case sensitive! DOS/Windows users should note that these addresses use forward slashes, not backslashes.

The general URL format is:
protocol//server machine:port/directory path/file name

For example:
http://www.uky.edu/WWWClass/introclass.html

Protocol (http:)
Protocols are access methods. They include ftp, telnet, gopher, news, http, etc...

Server Machine:Port (www.uky.edu)
This refers to the machine name (the fully qualified domain name) or the numerical IP address. If a port number is required, it follows the machine name and is separated by a colon.

Directory Path (WWWClass)
This is the route followed from the point of entry through hierarchically arranged subdirectories or folders to get to the needed file.

File Name (introclass.html)
Usually the file name for an URL ends with an .html or .htm extension. Media files will end with other extensions (.au, .mov, .avi, .jpg, .gif, etc...).

 

[Return to top]

Exercise 1: Is Your Web Account Active?

 

WRITING HTML

What is Hypertext Markup Language (HTML)?

 

What does HTML look like?

Go to http://www.uky.edu/ArtsSciences/Classics/uklibr.html (note the capitalization). Go to VIEW menu at the top of your Netscape screen and select the SOURCE option. In this file, you see three common types of HTML tags:

 

How do tags work?

Tags mark up your document. A browser then reads the tags to render your document on screen, link to other information, or play media files (often using helper applications).

There are a few rules:

 

Writing an HTML File

You can use any word processor or text editor to create an HTML file, as long as you save it in ASCII or plain text format. You can also try one of the many HTML editors or convertors (such as Web Weaver, HoTMetaL, Arachnid). Common text editors include:

 

Working between windows to write HTML and see the results

It is easier to see the relationship between your HTML text file and what is rendered in your browser if you align the windows of your text editor and browser side by side. You may need to resize the windows to accomplish this. The following steps walk you through the process:

  1. Open your text editor and resize its window to fill about half of your monitor screen. (Hint for Windows users: minimize all unneeded windows to icons.)

  2. Open Netscape and resize it to fill the other half of your screen.

  3. Begin typing your HTML document in your text editor.

  4. Save it with the extension .html (MAC) or .htm (DOS/Windows).

  5. The first time you bring up your file in Netscape, select the File menu and the Open File option. Select your HTML file and click OK.

  6. Move back to your text editor to make changes and additions. Be sure to save your file after making changes!

  7. Return to Netscape and click on the Reload button to display your changes.

 

Common Tags for Basic HTML Documents

<HTML>....</HTML>
Encloses the whole document. The start tag is your very first tag and the end tag is your very last.

<HEAD>....</HEAD>
Encloses the first section of your document document; usually the title information.

<TITLE>....</TITLE>
The title text is displayed in the browser titlebar. It is also the text that is displayed in bookmarks.

<BODY>....</BODY>
This is the rest of your document, everything that will appear inside the browser window.

<H1>....</H1>;<H2>....</H2>;<H3>....</H3>
Heading tags in various sizes, H1 being the largest and H6 the smallest. Headers are automatically rendered in bold text and insert spacing above and below the enclosed text.

<P>....</P>
This is a paragraph tag. The start tag can be used alone in HTML 1.0. Newer versions of HTML allow centering of paragraph text and the end tag is required.

<BR>
Standalone tag for a forced line break. Does not have the automatic spacing of the paragraph tag.

<HR>
This standalone tag adds a horizontal rule line. Automatically adds a blank line for spacing.

 

[Return to top]

Exercise 2: Create & Display a Basic HTML Document

 

ESTABLISHING LINKS

Anchor tags will allow you to set up hyperlinks.

Linking to Another Document

  1. Start by typing an anchor tag and the text you want to be rendered as a clickable link:
    <A>University of Michigan</A>

  2. Add an attribute in the opening tag to indicate what kind of link you will be making (for this example we will use a Hypertext Reference or HREF):
    <A HREF>University of Michigan<A>

  3. Add the address or URL for your link after HREF in the opening link (remember to insert an equals sign and enclose the URL in quotation marks):
    <A HREF="http://www.umich.edu/">University of Michigan<A>

  4. Now switch to your browser and test your link!

 

Link to a Specific Section in Another Document

A handy feature is the ability to link to a particular point in a document you've placed on the Web. By naming a specific point in a document and linking to that name, a user can go right to that spot instead of only to the top of the document. You can link to places within one document or link from one document to another (provided you placed both documents on the Web).

Check out the UK Classics site at www.uky.edu/ArtsSciences/Classics/faculty.html for an example of using named links within a single document.

  1. In your target document, insert an anchor tag in the spot you want to name:
    <A>...</A>

  2. Add a NAME attribute in the start tag:
    <A NAME>...</A>

  3. Create any handy name you like and add it after the NAME attribute (remember to use an equals sign and include quotation marks):
    <A NAME="sectg">...</A>

  4. Between the start and end tags add some text (or an image) representing the spot you want the user to jump to:
    <A NAME="sectg">Section G: Scanning Guidelines</A>

  5. In your main document, establish a link to the named section of the target document by specifying:
    1. a hypertext reference anchor

    2. the filename of the target document

    3. a hash mark (#)

    4. the name you previously created for the name anchor.

    <A HREF="documentname.html#sectg">Scanning Your Document</A>

  6. Now switch to your browser and test your link! When you click on your hyperlink you should jump to the point in your document where you inserted the NAME anchor, not to the top of the document.

 

Incorporating Image and Media Files

The fun of using a graphical browser is of course the graphics! Graphics come in two flavors: external and inline.

External images do not appear on your browser page with the rest of the text. A user must click on a highlighted link and the image is loaded onto a new page in the browser. External images are frequently JPEG files (.jpeg or .jpg extensions), but can be large GIF files (.gif extension)

Inline images do appear on the page with the text in your browser. Graphical bullets, logos, and decorative bars are examples of common inline images. Most browsers support GIF files (.gif extension) as inline images and some will also render inline JPEG images.

 

Incorporating Basic Inline Images

  1. Start with the standalone image tag:
    <IMG>

  2. Indicate the file source in quote marks :
    <IMG SRC="inline.gif">

Include subdirectories or full URL (in quotes) if needed.

 

Linking to an External Image

Include subdirectories or full URL (in quotes) if needed.

 

Create inline thumbnail images linking to larger external images:

  1. Prepare two files for your image: a small GIF and a larger JPEG

  2. Create an anchor tag linking to your JPEG file:
    <A HREF="biglion.jpg">.....</A>

  3. Between the start and end anchor tag, add a standalone image tag for the GIF file:
    <A HREF="biglion.jpg"><IMG SRC="smllion.gif"></A>

  4. Switch to your browser. The small image should appear on the page with the rest of your text. It should be highlighted indicating it is an active link. When you click on it, the larger image will appear in a new page.

 

More on Inline Images

 

Linking to Other Media Files

Include subdirectories or full URL (in quotation marks) if needed.

 

[Return to top]

Exercise 3: Create Links

 

LISTS AND LONG QUOTES

Creating Numbered Lists

Lists begin and end with list tags. The tag for numbered lists, also called ordered lists, is <OL>. Each item in the list begins with the standalone <LI> tag.

For example:

     <OL>
     <LI>List Item A
     <LI>List Item B
     <LI>List Item C
     </OL>

 

Creating Bulleted Lists

Lists begin and end with list tags. The tag for bulleted lists, also called unordered lists, is <UL>. Each item in the list begins with the standalone <LI> tag.

For example:

     <UL>
     <LI>List Item A
     <LI>List Item B
     <LI>List Item C
     </UL>

 

Creating Definition Lists

You can present a single definition or an entire glossary in a definition list. You can also use these tags to format a bibliography.

Definition lists begin and end with list tags. The tag for definition lists is <DL>. Each term to be defined begins with the standalone <DT> tag. Each definition begins with the standalone <DD> tag.

For example:

     <DL>
     <DT>Definition Term
     <DD>This is the definition description for the above term.
     </DL>

 

Using Preformatted Text

Preformatted text is useful when you need to maintain indentations, specific line spacing, or present a simple noninteractive table format.

Preformatted text areas begin and end with tags. The tag for preformatted text is <PRE>. Text enclosed in these tags will be displayed as typewriter text.

For example:

     <PRE>
     Preformatted Text Sample
     
     Notice that line spacing and line breaks are
     maintained without further HTML coding.
     </PRE>

 

Creating Long Quotes

To indent and set off a long quotation, use <BLOCKQUOTE> tags. Include paragraph tags if needed for multiple paragraphs.

For example:

     <BLOCKQUOTE>
     <P>Use this tag to include quotations in a separate block on the screen. 
     Most browsers will indent to separate it from surrounding text.</P>

     <P>Note that paragraph tags are needed to separate paragraphs.</P>
     </BLOCKQUOTE>

 

[Return to top]

 

Exercise 4: Creating Lists

 

FORMATTING CHARACTERS

You can make words or phrases stand out with character formatting. These tags come in two flavors: logical and physical.

Logical tags are more in keeping with the spirit of HTML in that they mark the content and let the browser software decide how to render the formatting, while physical tags specify a particular appearance. Please refer to A Beginner's Guide to HTML for a more detailed discussion of why and when to use logical or physical tags and a complete listing a tags.

 

Formatting Text with Logical Tags

These are a few of the more common logical tags:

<EM>......</EM>
Words inside emphasis tags will usually be rendered in italics.

<STRONG>......</STRONG>
Words inside strong tags will usually be rendered in bold face.

<KBD>......</KBD>
Words inside keyboard tags will usually be rendered in monospace Courier.

 

Formatting Text with Physical Tags

These are the physical tags:

<I>......</I>
Italic tags specify italics.

<B>......</B>
Bold tags specify bold face.

<TT>......</TT>
Typewriter tags specify monospace.

 

Formatting Text with Character Entities

Use character entities to render international and other special characters.

Character entities begin with an ampersand (&) and end with a semicolon (;). In between is the specific character code. For a full listing of possibilities, go to http://itrc.on.ca/~jason/sober2/ascii.htm.

Some examples:

Ü - Type this as &Uuml;
[Typing &uuml; (note the small u) will render ü]

ñ - Type this as &ntilde;
[Typing &Ntilde; (note the capital N) will render Ñ]

æ - Type this as&aelig;

 

Rendering HTML Characters with Escape Sequences

Use escape sequences to render special characters (<, >, & ;, ") used in HTML coding.

For example:

< - Type this as &lt;

> - Type this as &gt;

& - Type this as &amp;

; - Type this as &#59;

" - Type this as &quot;

 

[Return to top]

 

Exercise 5: Use Special Character Formatting

 

FINISHING TOUCHES

Add Reader Helps

 

Check Your Work

 

[Return to top]

 

Exercise 6: Add Reader Helps