HTML - Creating Your Own WWW Pages

 

 

 

 

An Introductory Guide To Authoring and Design

 

By Jim Hamlin

Copyright © 1995

 

 

 

Table of Contents

Table of Contents

Introduction

SECTION 1

What’s covered in this section?

What is the WWW?

Software to untangle the Web

Web Server

Web Browser

How does a user get information from the Web?

Common web browsers

Lynx

Mosaic

Netscape

Microsoft Internet Explorer

What file formats are out there?

Helper applications

Lets get hyper! Enter the world of 3D documents

What is hypertext?

hypermedia?

Where hypertext/hypermedia used?

What is a markup language anyway?

Markup language

SGML

HTML

Introduction to HTML markups

Tags

Attributes

Markup syntax must be exact

Parts of an HTML document

Header

Body

Footer

Defining a document

Creating a header

Exercise

The body of your document

Footers are a nice addition to a document

Exercise

Headings

Exercise

Introducing HTML layout commands

Line Breaks

Exercise

Horizontal rules

Exercise

Address format

Exercise

Paragraphs

Exercise

Introducing HTML format commands

Boldface

Exercise

Italic

Exercise

Emphasis

Exercise

Keyboard text

Exercise

Blink

Exercise

Short Citation

Exercise

Source Code

Exercise

Definition

Sample text

Exercise

Strong emphasis

Exercise

Typewriter text

Exercise

Variable

Exercise

Consider the following when using text formatting

SECTION 2

What’s covered in this section?

Linking inside and out

What exactly can I link to?

URLs?

How are links structured?

Local files

Exercise

Internal links - moving around a document using jumps

Exercise

Returning to the top of page

Exercise

Links to other documents

Exercise

Heading home

Linking to other Internet resources

Exercise

More about headers

Creating a base URL for your document

Exercise

Creating a base font for your document

Exercises:

Changing your font

Exercises:

SECTION 3

What’s covered in this section?

Adding graphics to your page

GIF and JPEG formats

JPEG

GIF

So which is better?

Inserting graphics to an HTML document

Exercise

Providing an alternate to the graphic

Exercise

Wrapping text around the graphic

Exercise

Graphic links

Exercise

Making transparent GIFs using Paint Shop Pro

Exercise

Sizing an image

Exercise

Changing the border of a linked graphic

Exercise

Using graphics libraries

Exercises

Indenting your paragraphs trick

Exercise

Graphics can cause problems

Changing your background color

The background color

Exercise

Using an image instead

Exercise

SECTION 4

What’s covered in this section?

Not on your keyboard you say... Producing special characters

Exercise

Commenting your code makes for easier maintenance

Exercise:

Lists, why not organize your thoughts?

Numbered lists

Exercise

Unordered lists

Exercise

Definition lists

Exercise

Menu lists

Short/Directory lists

Exercise

Nesting lists

Exercise

Preformatted text

Exercise

More preformatted text

Exercise

Quotations

Exercise

SECTION 5

What’s covered in this section?

Subscripts and superscripts

Exercise

Tables

Exercise

Exercise

Exercise

Exercise

Exercise

Exercise

Exercise

Exercise

Exercise

Exercise

Exercise

Storyboarding

Style

Structure

Page Layout

Graphics

Code layout

URLs

HTML

General

How about a hand? Resources on the net can help you out

Authoring programs can make your job easier

Graphics archives

Help in the newsgroups

Page authoring groups

Web browser groups

Web server groups

Others’ Web pages

Style guides

Useful URLs, etc.

Style Guides

Newsgroups

Icons

Background images

Web color utilities

HTML design pages, more info!

Appendix A: Loading Local Documents Into Netscape Navigator

Appendix B: HTML Tags

Document Structure

Document Headings

Text Formatting

Font

Layout

Links

Graphics

Lists

Tables

 

Introduction

The purpose of this courseware is to introduce you to many of the basic commands which allow you to put your own documents on the World Wide Web, one of the most popular resources on the Internet. Upon successful completion of this courseware, you will be able to:

HTML is a very broad markup language which can be used by a variety of different Web browsers. This courseware presents a basic set of tools which will get you started to creating your own Web pages. Some browsers, such as Netscape have their own "extensions" which can be used. This course demonstrates the use of some of these commands, but for the most part guides you through the use of mainstream HTML commands compatible with most browsers.

This course assumes you have a basic understanding of the Internet and Microsoft Windows.

 

 

SECTION 1

 

What’s covered in this section?

 

 

What is the WWW?

WWW stands for "World Wide Web". The WWW project, started by CERN (the European Laboratory for Particle Physics in Geneva, Switzerland) in 1989, was proposed as a means of transporting research ideas efficiently throughout the organization. This was important to CERN as many of its members were spread across countries.

The initial project proposal outline a simple networked system used to transmit hypertext documents between members. At the end of 1990, the first Web software was demonstrated on the NeXT computer. This software provided users with the ability to edit hypertext documents and to transmit those documents to others connected to the Internet. At this point in time it was still in its infancy only being featured on the NeXT computer and only able to transmit text documents (no multimedia).

In 1992, CERN began promoting the Web outside of its organization. To promote the Web, CERN released the source code for W3 servers and browsers. Once released, the NCSA took over much of the responsibility of development and growth while developing an application used to access the Web known as Mosaic. At the same time, many organizations and individuals began creating Web pages on a spectrum of topics. Since this time, other organizations have been developing servers and browsers for a variety of different computer platforms. Some browsers have grown even further to allow the use of graphics, sound, and animation in documents.

 

Software to untangle the Web

Web Server

A Web server is a program which accepts requests for information from its clients. Upon processing a request, the Web server sends information back to the requester of the information.

Web Browser

To access the Web, a browser application is used. The browser is capable of reading documents and is capable of fetching documents from other sources. In addition to documents, browsers can also access files through other Internet resources such as FTP, gopher, and newsgroups.

Browsers can run on a variety of platforms including MS DOS, Microsoft Windows, Macintosh, UNIX, VMS, AMIGA, NeXT, and others. Each platform requires a browser which was written specifically for that operating system.

 

How does a user get information from the Web?

The WWW is designed as a client/server architecture. A client, the browser, requests information from the server, the Web server, and the Web server responds by sending that information. With distributed architecture the server is left with the responsibility to store the document and the browser is responsible for displaying it. This enables servers and browsers to be on different machines, even different operating systems.

The process of how the Web works can be thought of as four steps:

    1. Using a browser (client), the user selects a hyperlink which connects to another document or resource.
    2. The browser uses the address associates the hyperlink with an address that it can connect to fetch the document which was requested.
    3. The server responds by sending the document which was requested by the browser.
    4. The browser receives the document and renders it for presentation to the user.

 

Common web browsers

Lynx

Lynx is one of the original web browsers. This web browser, incapable of displaying graphics, makes use of different character attributes to display its information in a meaningful way. For example, bullets exist as *’s and links to other resources are boldfaced.

This browser, although primitive, is still useful for some text based operating systems such as DOS, and terminals running a UNIX command line. This browser is particularly useful if you have a slow network connection and no time to wait for the graphics to download.

Mosaic

Mosaic is a graphical Web browser developed by the NCSA (National Center for Supercomputing Applications). This browser has all the advantages of graphical browsers in that it can display different fonts, text attributes, colors, and inline graphics.

Netscape

Netscape is a graphical Web browser which was actually developed by the same person, Marc Andreesen, but this time under a private company known as Netscape Communications. This browser offers many advantages over other Web browsers in that it allows the user to browse documents which have not fully been downloaded and provides a better interface for capturing information and inline images.

Microsoft Internet Explorer

The Internet Explorer is a graphical Web browser which is provided with Microsoft’s Plus Pack for Windows 95. Like other graphical browsers, this browser allows for display of text and inline graphics. More recent version of the Explorer actually support inline multimedia such as sound and animation without the need for helper applications.

What file formats are out there?

Many type of files can be placed in Web pages. Most Web browsers only support a few types of files and are capable of displaying them inline. Many of the other file types require the use of external applications, helper applications, to assist in the viewing. There are three main types of files which can be included with Web documents: still video, sounds, and motion video.

Still video is one of the most popular files which are included with Web pages. Still video can come in a variety of formats, the most common being GIF (graphics interchange format, CompuServe) and JPEG/JPG (Joint Photographic Experts Group). Other formats include EPS (Postscript), BMP (Windows Bitmap), PCX (Zsoft Image), TIFF/TIG (Tagged Image File Format) and many others.

Most browsers require helper applications to play a particular sound. Sounds can be WAV (Microsoft Waveform), SND (Voice grade sound) and others. Motion video formats include FLI (Autodesk Animator Flick), MPEG/MPG (Motion Picture Experts Group), AVI (Audio/Video Interleaved, Microsoft) and others.

Helper applications

A Web document can contain much more than just text. It can include graphics, sounds, and video. Most graphical browsers have some support for graphics. But how are graphics, sound, and video which the browser does not know how to handle itself given to the user? You can assign helper applications to particular file formats which are capable of handling the file.

How are these files displayed in the page? The file will appear as a link to a file which the user can click on. If the browser knows which helper application supports this file type, the helper application takes control, plays the file, and when completed, returns control to the browser. If the browser knows of no helper applications to display the file, nothing happens when the user clicks on the link.

Many browsers are providing facilities to support helper applications. The user would have a facility to name the application, it’s extension which identifies the file type, and the location of the helper application which will ultimately display the file.

 

Lets get hyper! Enter the world of 3D documents

What is hypertext?

A form of a document which removes the linearity from a typical document. Links can be provided so the user can quickly jump to different points within the same document or link to other documents. These links, known as hyperlinks, can be used to create a complex virtual web of connections.

hypermedia?

Hypermedia is a superset of hypertext. Hypertext, by its name implies the use of text documents. Hypermedia is much more than hypertext. Hypermedia is a document which can consist of text, graphics, sounds, and other multimedia.

Where hypertext/hypermedia used?

Aside from the Web, hypertext and hypermedia is used in a variety of different places. User guides and learning aids can be developed with programs which generate hypermedia applications such as HyperCard for the Mac or Toolbook for the PC. A very common place where you will use hypermedia is with Windows online help.

 

What is a markup language anyway?

Markup language

A markup language is used to allow both humans and machines the ability to read and determine the structure, content, and behavior of the document.

SGML

SGML, Standard Generalized Markup Language, was started by IBM in the 60’s to define a standard which would allow for portability of documents across computer platforms. SGML is a broad specification used to define particular markup languages for particular purposes. These include documents used by the government and commercial institutions.

HTML

This is the standard language used for creating and recognizing hypermedia documents on the Web. HTML, Hypertext Markup Language, is one of the particular applications of SGML. Creating HTML is very straightforward. An HTML document is essentially an ASCII text file which contains text and specialized codes to represent the formatting of the document and links to resources which it can connect.

 

Introduction to HTML markups

Tags

The HTML language consists of a number of special text tags used by the browser to setup the document, format text, and establish links to Internet resources.

Tags are very similar to the way you would structure a word processing document. For example, special codes are used to denote a boldface font. In order for the document to know which text to boldface, you must mark the beginning and end of the text. Tags work in very much the same way: you must tell them where to begin and where to end.

Since HTML documents are purely text, unlike word processing documents, you must provide the WEB browser a means by which to identify tags. This is done by enclosing the command within angle brackets: "<" and ">". For example, the force line break would be <BR>.

The force line break is one of the few examples of HTML codes which do not require a corresponding closing code. Many of the tags require you to tell the browser where to end. This is accomplished by using the same tag but only with a "/" beginning the command. Using the example above, boldfacing some text can be accomplished by placing a <B> at the beginning and </B> to close.

<B>This is bolded text</B>

Tags are not case sensitive: <HTML>, <html>, and <HtMl> are all equivalent. Text within tags is displayed as is typed. However, any spaces which are contained with the text are only displayed as a single space, regardless of how many spaces are used.

It is important to note that markup tags can be nested within one another. Again using the example above, you could pose the question: What if I wanted to create a forced line break with some bolded text? You could of course do this:

<B>This is the first line of bolded text.</B><BR>

<B>This is the second line of bolded text.</B>

However, by using nested tags, you could eliminate some of the tags required to accomplish the same task:

<B>This is the first line of bolded text.<BR>

This is the second line of bolded text.</B>

 

Attributes

All of the tags within the HTML language have default characteristics. In order to change those characteristics you must change the tag’s attributes. This is done through the use of predefined attribute commands, with each tag having its own set. For example, the default behavior of the horizontal rule tag can be changed. You can adjust its alignment, length, thickness, and even its shading.

For example, if you wanted to create a thicker left justified centered horizontal rule with a width of 100:

<HR ALIGN=LEFT SIZE="5" WIDTH=100>

As you can see, attributes are enclosed within the angle brackets.

Markup syntax must be exact

Browsers rely on one thing: the recognition of tags. If a browser is unable to recognize a tag, it plainly does not understand it. Browsers are very simple in the way that if they do not understand a tag, they ignore it. Right now you may be asking yourself: why a browser would not be able to understand a given tag? Two of the most common reasons why a browser would not recognize a tag are:

    1. The tag being used is not supported by the browser reading it.
    2. The tag’s syntax is incorrect.

Some browsers, such as Netscape, have their own enhancements to the HTML standard. These enhancements are usually supported only by the browser for which they were created. For example, many Netscape enhancements do not work with Mosaic browsers.

Problems with the tag’s syntax can be caused by a variety of reasons. You may have spelled the tag incorrectly, you may have used attributes which are not associated with that tag, you have nested tags within a tag which does not support nesting of that tag, or extra characters are added to the tag which make its recognition impossible.

Some tips to help you to avoid making these mistakes include:

 

Parts of an HTML document

HTML documents, similar to normal word processing documents, ideally consist of a header, body, and footer.

Header

The header identifies the document as HTML, set defaults for the document, and establishes the title to be displayed in the title bar of the main window.

Body

The body contains the content of the page. This section of the document physically consists of text, links to graphics and multimedia, links to locations within the current document, links to local document, links to documents at other servers, and other Internet services such as FTP.

Footer

The footer, although not formally defined as part of a document, is typically included at the bottom of the body. The footer usually contains the author, copyright information, date of creation, and version number.

Defining a document

Each of the three sections make up a single HTML document. For some browsers to respond correctly to your markup commands, you must identify a document as an HTML document. This is accomplished through the use of a tag. The <HTML> tag is used to show the start of a document and a corresponding </HTML> tag is used to denote the end of the document. Although many browsers do not require you to use this tag, it is a good idea to include it for compatibility reasons.

 

Creating a header

A header is used to define information about the document itself. This includes the document’s name, default font, background color, and others. Defining a header for a document is actually quite simple. All that is required to define a header is to enclose the header information the header tag starting with <HEAD> and closing with </HEAD>.

The name of the document, or the document’s title, is the title which is displayed in the title bar of the browser. A document’s title is defined within the HTML title tag: <TITLE> to begin the heading and </TITLE> to signify its close.

Example:

<HTML>

<HEAD>

<TITLE>Welcome to HTML!</TITLE>

</HEAD>

</HTML>

 

 

Exercise

  1. Create a new text file on your floppy using a text editor. Name it header.htm.
  2. Enter the following text:
  3. <HTML>

    <HEAD>

    <TITLE>This is the title of my document.</TITLE>

    </HEAD>

    </HTML>

  4. Load the document into your browser. (See Appendix A for information about loading your local document into Netscape.) Note title in the title bar of your browser window.

 

 

The body of your document

The body contains the information which you want to convey to the user. This is accomplished through the use of text, media, and links to other documents. The body of a document is represented with the markup tag <BODY> and since it acts on a set of data requires a closing tag </BODY>. The tags which are used in the body as well as the links to resources is described in more detail throughout the section.

 

Footers are a nice addition to a document

Unlike the header and body, the footer is not a marked element in HTML. However, this does not mean that a footer is unimportant. Footers are used to identify the author of the page, the contact information, version information, and a possible link to the home page.

Example:

<CENTER>

<ADDRESS>

For questions or comments about my WEB Pages, please EMail

<A HREF="mailto:jhamlin@somecompany.com">jhamlin@somecompany.com.</A><BR><BR>

Jim Hamlin<BR>

Some Company Corporation<BR>

#000 - 00000 Some Address<BR>

Somewhere, B.C. Canada V6V 2J8<BR>

Tel: (604) 999-9999 Fax: (604) 888-8888<BR><BR>

I can also be reached by EMail at:

<A HREF="mailto:jhamlin@anotheraddress.net">jhamlin@anotheraddress.net</A>.<BR><BR>

Copyright &copy; 1995 Some Company Corporation<BR><BR>

Revised: October 1, 1995<BR><BR>

<B>URL:http://somecompany.com/accounts/jhamlin/default.html</B>

</ADDRESS>

</CENTER>

 

This particular example may show a little more than what is typically shown on a web page. Many commercial pages include one similar to this example. Personal pages usually only show the author, the email address the author can be reached at, copyright information, and the date last revised.

 

 

Exercise

  1. Create a new text file on your floppy using a text editor. Name it document.htm.
  2. Enter the following text:
  3. <HTML>

    <HEAD>

    <TITLE>YourName’s Home Page</TITLE>

    </HEAD>

    <BODY>

    My document Body<BR>

    The footer is also part of the document body.<BR>

    </BODY>

    </HTML>

  4. Load the document into your browser. (We will be covering the tags used in the demo footer in subsequent chapters.)

 

 

Headings

Headings, similar to text formatting commands, are used to help make your document easier to read. However. headings are different from formatting commands as they offer structure for your document. Headings are used to logically divide sections of your document to assist transition from one topic to the next.

The heading tag is used to format a particular range of text, which requires the use of and opening and closing tag. The opening and closing tags used to create headings are <H#> and </H#> where "#" can be a number between "1" and "6". (Levels "1" to "6" range from largest to smallest).

Example:

<HTML>

<H1>Level One Heading</H1>

<H2>Level Two Heading</H2>

<H3>Level Three Heading</H3>

<H4>Level Four Heading</H4>

<H5>Level Five Heading</H5>

<H6>Level Six Heading</H6>

</HTML>

 

 

Recommended guidelines for using headers within printed document, also apply for electronic documents such as HTML.

    1. Headings should get smaller as the topic becomes broken down and more specific.
    2. A sub-header should not be used unless at least two sub-headers of that type will be placed under the super-header. For example, do not make use of the <H4> header if you plan to only use it once within the frame of an <H3> header.

 

The following is an example of how headers should be used:

<HTML>

<H2>Level Two Heading</H2>

<H3>Level Three Heading</H3>

<H4>Level Four Heading</H4>

Text contained within.<BR>

<H4>Level Four Heading</H4>

Text contained within.<BR>

<H3>Level Three Heading</H3>

Text contained within.<BR>

<H2>Level Two Heading</H2>

Text contained within.<BR>

</HTML>

 

 

 

Exercise

  1. Create a new text file on your floppy using a text editor. Name it heading.htm.
  2. Enter the following text:
  3. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <H1>Hobbies</H1>

    <H2>Computers</H2>

    Stuff about computers.<BR>

    <H2>Eating</H2>

    This is what I like to eat.<BR>

    <H1>Sports</H1>

    <H2>Volleyball</H2>

    Stuff about volleyball.<BR>

    <H2>Basketball</H2>

    Stuff about basketball.<BR>

    </BODY>

    </HTML>

  4. Load the document and observe the different heading sizes.
  5. Experiment with other heading sizes and other headings.

 

Introducing HTML layout commands

HTML layout commands help you break the text flow and create divisions in your document. Two commands which help you do this are the line break tag and the horizontal rule tag.

Line Breaks

An HTML browser will always attempt to fit as much text on a line before it wraps to the next line. This is good in most cases, but what if you wanted to ensure that a line break occurred after a certain point? The solution would be to make use of a line break tag to tell the browser that even though there is room for more text on the current line, skip to the next line anyway. The tag used to perform this action is <BR>. (A closing tag is not required in this case as this command is a one time only type of command and does not act on a range of text.)

Example:

<HTML>

The quick brown fox jumped over the lazy dog. Hmmm. This is interesting. Once a line is full the remaining text is printed on the next line. But what if I wanted several shorter lines. I guess I could use the line break tag.<BR>

Short line number one.<BR>

Short line number two.<BR>

</HTML>

 

 

Exercise

  1. Create a new document and name it linebrk.htm.
  2. Enter the example in this section.
  3. Load the document in your browser and note how the text wraps until a line break is reached. Try resizing the viewer window and notice how the text is moved to fit in the window.

 

Horizontal rules

A horizontal rule is a horizontal line used to separate sets of text or links. This line, generated by the tag <HR>, is typically a couple of pixels wide and is shadowed.

<HR>

The horizontal rule is also customizable. You can change the look of the tag by giving it attributes. Attributes include alignment, width, size, and shading:

ALIGN=(LEFT|RIGHT|CENTER)

Change alignment

NOSHADE

Eliminate shading of horizontal bar

SIZE="size"

Number used to define vertical width. Valid values are from 1 to 7

WIDTH=(number|percent)

Used to define the exact width in pixels or the percentage of the line that the rule is to occupy

If you wanted to create a thicker left justified centered horizontal rule with a width of 100:

<HR ALIGN=LEFT SIZE="5" WIDTH=100>

Exercise

  1. Create a new text file on your floppy using a text editor. Name it horizrul.htm.
  2. Enter the following text:
  3. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    This is some info<BR>

    This is more info<BR>

    <HR>

    This is info about a different subject.<BR>

    This is info about another subject.<BR>

    </BODY>

    </HTML>

  4. Load the document into your browser and observe the horizontal rule which separates the two sets of text.
  5. Experiment with the attributes introduced in this section.

 

 

Address format

The address format is used to denote information about the HTML document. This information is typically enclosed as part of the footer and consists of information such as the author’s name, address, signature file, and contact information. The <ADDRESS> tag is used to start the address format and the </ADDRESS> closes the address format. The address tag is typically enclosed within the <BODY> of a document, and can contain many other tags including <A>, <BR>, <P>, and many others.

Example:

<CENTER>

<ADDRESS>

For questions or comments about my WEB Pages, please EMail

<A HREF="mailto:jhamlin@somecompany.com">jhamlin@somecompany.com.</A><BR>

<BR>

Copyright &copy; 1995 Some Company Corporation<BR><BR>

Revised: October 1, 1995<BR><BR>

<B>URL:http://somecompany.com/accounts/jhamlin/default.html</B>

</ADDRESS>

</CENTER>

 

 

 

Exercise

  1. Create a new text file on your floppy using a text editor. Name it address.htm.
  2. Enter the following text:
  3. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <CENTER>

    <ADDRESS>

    For questions or comments about my WEB Pages, please EMail

    <A HREF="mailto:yourname@somecompany.com">yourname@somecompany.com.</A><BR>

    Revised: October 1, 1995<BR><BR>

    <B>URL:http://somecompany.com/accounts/jhamlin/default.html</B>

    </ADDRESS>

    </CENTER>

    </BODY>

    </HTML>

  4. Load the document into your browser and observe the result.

 

Paragraphs

You would use a paragraph in a Web page for typically the same reason you would use a paragraph in printed information: to separate ideas or concepts into distinguishable divisions. The paragraph tag will cause a line break followed by an additional line. The paragraph is a singleton tag in that it does not act on a range of text. The markup to create a paragraph division is <P>.

Example:

<HTML>

<BODY>

What is this you may ask? What exactly are we trying to demonstrate? Why it is one of our useful tags known as the paragraph. You will notice that the paragraph tag makes a paragraph which resembles what a paragraph would look like in a printed document. A line break from the current line followed by a blank line is symbolic of the paragraph.<P>

What is this you may ask? It is the second paragraph. It is not as long though.

</BODY>

</HTML>

 

 

Exercise

  1. Create a new text file on your floppy using a text editor. Name it paragrph.htm.
  2. Enter the above example into your editor.
  3. Notice the behavior of <P> tag.
  4. Create the same behavior using the <BR> tag. (Use two consecutive <BR>’s).

 

Introducing HTML format commands

There are many tags used exclusively to manipulate the characteristics of the text displayed on the screen. Since this family of tags acts on a given set of text, both opening and closing tags are required. These tags can be used to change the attributes of the text by adding bold, italics, and emphasis. In addition, the font itself can also be changed to reflect a particular type of text.

Boldface

The boldface tag changes the text enclosed within its starting tag and closing tag to become bolded. The tag is started with a <B> and closed with </B>. This tag should be used when you want to draw attention to specific words or sentences.

Example:

<HTML>

This is <B>bolded</B> text.

</HTML>

 

 

Exercise

  1. Create a new text file on your floppy using a text editor. Name it formating.htm.
  2. Enter the following into your document:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    </HTML>

  4. Load the document into your browser.

Italic

The italic tag makes the text which is enclosed within the start <I> and the </I> appear in italics.

Example:

<HTML>

The time to strike is when <I>the opportunity presents itself.</I>

</HTML>

 

 

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    </HTML>

  4. Load the document into your browser and observe the result. Notice how formatting tags can be combined to form other formatting combinations.

 

Emphasis

The emphasis tag changes the characters enclosed within to appear emphasized. (This is very similar to making text italics.) This tag is started with <EM> and is closed with </EM>. It should be noted that when you want something to appear different from the rest of the text on the screen, the emphasis tag should be used rather than the italics tag. This is because some users set their browsers to emphasize text in a different color rather than the default of italics.

Example:

<HTML>

this system is <EM>fully</EM> customizable

</HTML>

 

 

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    This is <EM>emphasized text!</EM><BR>

    </HTML>

  4. Load the document into your browser and observe the result.

 

 

Keyboard text

The keyboard text tag changes the characters enclosed to signal to the user that it is text which is typed at the keyboard. This tag is started with <KBD> and closed with </KBD>. This text is typically displayed as courier, common to many text based display systems.

Example:

<HTML>

If you want to copy all the files from your current directory to your floppy, one way is to type:<BR>

<BR>

<KBD>COPY *.* A:\</KBD>

</HTML>

 

 

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    This is <EM>emphasized text!</EM><BR>

    Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>

    </HTML>

  4. Load the document into your browser and observe the result.

 

Blink

The blink tag changes the text characteristic to blinking for any text enclosed. The tag is started with a <BLINK> and closed with a </BLINK>.

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    This is <EM>emphasized text!</EM><BR>

    Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>

    <BLINK>Look at this text blink!</BLINK><BR>

    </HTML>

  4. Load the document into your browser and observe the result.

 

 

Short Citation

The short citation tag produces a different font which is characteristic of citations in printed documents. The tag is started with a <CITE> and closed with </CITE>. The citation command will typically be used to show a citation or a reference to other data sources.

Example:

<HTML>

From <CITE>The HTML Handbook</CITE> by John Doe, 1995.

</HTML>

 

 

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    This is <EM>emphasized text!</EM><BR>

    Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>

    <BLINK>Look at this text blink!</BLINK><BR>

    From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>

    </HTML>

  4. Load the document into your browser and observe the result.

Source Code

The source code tag is useful if you have documents which include snippets of source code. This tag will change the font to a type which resembles a font often used when source code is printed. This tag is started with <CODE> and closed with </CODE>.

Example:

<HTML>

The following code is an example in C++ which demonstrates output:<BR>

<BR>

<CODE>

void main() { <BR>

cout << var1 << var2; <BR>

} <BR>

</CODE>

</HTML>

 

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    This is <EM>emphasized text!</EM><BR>

    Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>

    <BLINK>Look at this text blink!</BLINK><BR>

    From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>

    Basic Source Code: <CODE>PRINT "HI"</CODE><BR>

    </HTML>

  4. Load the document into your browser and observe the result.

 

Definition

The definition tag is used to emphasize a term which is to be defined in the text which follows. This tag is started with <DFN> and is closed with </DFN>.

Sample text

The sample text tag is used for literal characters or to represent the output of a program. This tag is started with <SAMP> and closed with </SAMP>.

Example:

<HTML>

Typing an unknown command at the command prompt on an MSDOS will often result in:<BR>

<BR>

<SAMP>Bad command or file name</SAMP>

</HTML>

 

 

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    This is <EM>emphasized text!</EM><BR>

    Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>

    <BLINK>Look at this text blink!</BLINK><BR>

    From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>

    Basic Source Code: <CODE>PRINT "HI"</CODE><BR>

    Computer Output: <SAMP>Sorry, I can’t do that.</SAMP><BR>

    </HTML>

  4. Load the document into your browser and observe the result.

 

Strong emphasis

The strong emphasis tag is used when you want to bring attention to particular words within the text of a document. The strong emphasis tag is started with <STRONG> and closed with </STRONG>. It is recommended that use of this tag is limited to words which need to stand out. Overuse of this tag will nullify the effect.

Example:

<HTML>

There was <STRONG>absolutely no</STRONG> reason to respond in that fashion.

</HTML>

 

 

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    This is <EM>emphasized text!</EM><BR>

    Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>

    <BLINK>Look at this text blink!</BLINK><BR>

    From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>

    Basic Source Code: <CODE>PRINT "HI"</CODE><BR>

    Computer Output: <SAMP>Sorry, I can’t do that.</SAMP><BR>

    <STRONG>NO!</STRONG>, he exclaimed.<BR>

    </HTML>

  4. Load the document into your browser and observe the result.

 

 

Typewriter text

The typewriter (teletype) tag is used when you want text which is monospaced. This type of text typically is shown in block courier and is used with text you want to appear output from a line printer of typewriter. This tag is started with <TT> and is closed with </TT>.

Example:

<HTML>

If you were to redirect the output of a directory listing to the printer, the result would be: <BR>

<BR>

<TT>

Volume in drive C is MSDOS <BR>

Volume Serial Number is 12D8-3C33 <BR>

Directory of C:\ <BR>

</TT>

</HTML>

 

 

 

 

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    This is <EM>emphasized text!</EM><BR>

    Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>

    <BLINK>Look at this text blink!</BLINK><BR>

    From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>

    Basic Source Code: <CODE>PRINT "HI"</CODE><BR>

    Computer Output: <SAMP>Sorry, I can’t do that.</SAMP><BR>

    <STRONG>NO!</STRONG>, he exclaimed.<BR>

    <TT>This is monospaced text.</TT><BR>

    </HTML>

  4. Load the document into your browser and observe the result.

 

 

Variable

The variable tag is used to indicate to the users that this is information which they must supply. For example, if you were describing a command line utility for DOS or UNIX, the parameters which the user should supply would be formatted with the variable tag. This tag is started with <VAR> and is closed with </VAR>.

Example:

<HTML>

The syntax for the delete command in DOS is: <BR>

<BR>

<CODE>DEL</CODE> <VAR>filename</VAR>

</HTML>

 

 

Exercise

  1. Open the existing file formating.htm in your text editor.
  2. Edit the document to the following:
  3. <HTML>

    This is normal text.<BR>

    <B>This is boldface text</B><BR>

    <I>This is italics</I><BR>

    <B><I>This is bold and italics.</I></B><BR>

    This is <EM>emphasized text!</EM><BR>

    Keyboard text is good to demonstrate commands: <KBD>DEL *.*</KBD><BR>

    <BLINK>Look at this text blink!</BLINK><BR>

    From <CITE>The HTML Handbook</CITE> by John Doe, 1995.<BR>

    Basic Source Code: <CODE>PRINT "HI"</CODE><BR>

    Computer Output: <SAMP>Sorry, I can’t do that.</SAMP><BR>

    <STRONG>NO!</STRONG>, he exclaimed.<BR>

    <TT>This is monospaced text.</TT><BR>

    To delete a file: <CODE>DEL</CODE> <VAR>filename</VAR><BR>

    </HTML>

  4. Load the document into your browser and observe the result.

 

Consider the following when using text formatting

 

SECTION 2

 

What’s covered in this section?

 

Linking inside and out

What exactly can I link to?

In hypertext systems, users can use links to jump to different locations within the current document or can jump to other hypertext documents. With HTML, all links are treated as an association between the current document and a resource. These resources not only consist of jumps to portions of the same document and to other documents, but also to other hypertext documents on the network, graphics, sounds, and video.

URLs?

A Uniform Resource Locator (URL) is used to instruct the WWW browser how to connect to an Internet resource. A URL represents the type of resource and the exact location the resource can be located at. The URL’s syntax for an HTML file is:

aaaa://bbb.bbb.bbb:cc/ddd/ddd/ddd/eee#fff

aaaa: Data source / protocol / access method

This specifies the mechanism used to access the data which exists at the link. Recognized links include:

ftp:// Use the FTP (File Transfer Protocol) to retrieve a file.

gopher:// File system index accessed through the gopher protocol.

http:// A hypertext HTML document.

mailto:// Send email to a particular address using a predefined form generated

by the browser.

news:// Points to a USENET newsgroup or article name.

telnet:// Links to a remote system using the login arguments passed.

WAIS:// Points to a Wide Area Information Server on the Internet.

file:// Points to a locally accessible file (local disk system).

Here are some others (these are not commonly used in your documents):

https:// Hypertext Transfer Protocol

nntp:// Local Network News Transport Protocol

cid:// Content identifiers for MIME

mid:// Message identifiers for electronic mail

afs:// AFS file access

prospero:// Prospero link

x-exec:// Executable program

//bbb.bbb.bbb Domain name / node

The domain name or internet address where the resource is located. The default is the current computer.

:cc Port

The process address a Web session needs to connect with. Most of the time it is 80, which also happens to be the default. If you want to use the default, the port can be omitted.

/ddd/ddd/ddd/ Path

This represents the resource’s path on the server. This path can include directories and subdirectories.

eee Resource name

The resource name is the actual name of the object which is to be connected to.

#fff Arguments

Arguments can be used to pass parameters to a program or can be used to locate a particular spot in an HTML document.

How are links structured?

Links to Internet resources are accomplished through the use of an HTML tag. This tag, known as the anchor <A>, provides a method for the user of a page to make hypermedia links. The anchor tag can be used to define a "link to" or can be used to define a destination; these also happen to be the minimum attributes which can be used with this tag.

In order to "link to" using the anchor tag you are required to use the HREF attribute. The HREF attribute is used to define the Internet resource which you wish to link to. The syntax of the HREF attribute is simply HREF="URL". The URL can be any Internet resource which you wish to provide a link to. For example, if you wanted to provide a link to the Netscape home page:

<A HREF="http://home.netscape.com/">Netscape Inc.</A>

The words "Netscape Inc." in this particular example are used as the anchor to the home page at home.netscape.com. The text is visually changed through the use of color to indicate to the user of the page that the text "Netscape Inc." is an anchor.

Defining a destination is used within web pages to further subdivide the document. With anchors, you can specify various points throughout the document which the user can jump to. This makes it easier to locate specific information within a document from the document itself or from another document.

Local files

When loading a local file from your computer the URL syntax can be described by:

file:///drive|directory/filename

Note that the ":" normally used to separate the drive letter from the directory path on a local file system is replaced by the "|" (pipe/vertical slash) character.

Exercise

The basic premise behind this exercise to get you familiar with linking pages on your local machine.

  1. Create a new text file on your floppy using a text editor. Name it page1.htm.
  2. Enter the following lines:
  3. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <H2>This is page 1</H2>

    This is the content of page 1.<P>

    Go to <A HREF="file:///a|page2.htm">Page 2</A>

    </BODY>

    </HTML>

  4. Create another text file on your floppy. Name this one page2.htm.
  5. Enter the following lines:
  6. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <H2>This is page 2</H2>

    This is the content of page 2.<P>

    Go to <A HREF="file:///a|page1.htm">Page 1</A>

    </BODY>

    </HTML>

  7. Load the first file, page1.htm.
  8. Test the anchors.
  9. Both of these files exist in the same directory. This would indicate that they are in the same relative directory. Edit the first file and remove file:///a| from the URL.
  10. Load the first file and test the link. Notice that the link is still accomplished as the anchor can still find the file.

Internal links - moving around a document using jumps

Some web document designers like to maintain larger documents rather than having many smaller documents. It is reasonable to assume that a larger document would resemble a similar logical structure to the smaller document method: the document would contain a table of contents and the associated data. The solution is to use internal links within a document. By providing internal links, the user can quickly jump to particular points in the document. Links at jump points should also be provided to related points and the table of contents.

This process of providing internal links, known as intra-document linking, is performed using the anchor, <A>, tag. The first step to setting up an intra-document link is to establish a name for the beginning of text you want to jump to. This is done using the extension NAME, whose syntax follows: NAME="thename". As with other tags, you must remember to provide the closing </A> at the end the text you wish to name.

<A NAME="Subject1">This is subject 1.</A>

In order to make it possible for a user to make a jump you must provide an anchor to that point. This is also performed using the anchor tag. However this time you must provide a jump mechanism to the named point. The extension which is used to perform this is called HREF, whose syntax follows: HREF="URL". As noted earlier, a URL represents a network resource such as another page, FTP, Telnet, etc. What we want to do is connect to a web page. (The syntax of the URL is: "locationandnameofpage#nameoftext".) However, we want to connect to the name of a point on the page we are currently on. To accomplish this, simply omit the name and location of the document (or you can specify the name and location of the current document if you like typing. J )

<A HREF="#Subject1">(Subject 1)</A>

Some style guides recommend that the text which is to be used as the anchor, in this particular example "Subject 1", be placed in brackets to represent an internal jump.

Exercise

The exercise will make you familiar with the naming of sections of your document and the ability to link to those sections.

  1. Create a new file using your text editor. Name it intlink.htm.
  2. Enter the following text into your new file:
  3. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <H2><A NAME="TOP">Linking 101</A></H2>

    This is a demonstration of internal linking within a document.<BR>

    This document covers a wide variety of different topics. Some of these include:<P>

    <A HREF="#Intern">Internal linking</A><BR>

    <A HREF="#Docs">HTML documents</A><BR>

    <A HREF="#Res">Internet resources</A>

    <P>

    <H3><A NAME="Intern">Internal Linking</A></H3>

    This is a section about internal linking.<BR>

    See also:<BR>

    <A HREF="#Docs">HTML documents</A><BR>

    <A HREF="#TOP">Start of document</A>

    <P>

    <H3><A NAME="Docs">HTML documents</A></H3>

    This is a section about linking HTML documents.<BR>

    See also:<BR>

    <A HREF="#Intern">Internal Linking</A><BR>

    <A HREF="#Res">Internet Resources</A><BR>

    <A HREF="#TOP">Start of document</A><BR>

    <H3><A NAME="Res">Internet Resources</A></H3>

    This is a section about linking Internet resources.<BR>

    See also:<BR>

    <A HREF="#Docs">HTML documents</A><BR>

    <A HREF="#TOP">Start of document</A><BR>

    </BODY>

    </HTML>

  4. Load the file into your browser and test the links. Note that links, if they have been accessed before change color.

Returning to the top of page

Returning to the top of the page is performed using internal jumps. What is required is that you set up a name for the top of the document and then at appropriate places within the document, provide the jumps to that particular name. This is commonly used in larger documents which have a table of contents. Jumps to the table of contents would be placed after each logical division of text. This will provide the user of the page with the ability to quickly locate your table of contents and be able to move to another topic of interest. In the following example, a table of contents is constructed with three topics. Each of the topics in turn has a link back to the table of contents.

<HTML>

<HEAD>

</HEAD>

<BODY>

<H2><A NAME="TOC">Table of Contents</A></H2><P>

<A HREF="#Topic1">Topic 1</A><BR>

<A HREF="#Topic2">Topic 2</A><BR>

<A HREF="#Topic3">Topic 3</A><BR>

<P>

<H2><A NAME="Topic1">Topic 1</A></H2>

This is text about topic 1.<BR>

<A HREF="#TOC">(TOC)</A><BR>

<P>

<H2><A NAME="Topic2">Topic 2</A></H2>

This is text about topic 2.<BR>

<A HREF="#TOC">(TOC)</A><BR>

<P>

<H2><A NAME="Topic3">Topic 3</A></H2>

This is text about topic 3.<BR>

<A HREF="#TOC">(TOC)</A><BR>

<P>

</BODY>

</HTML>

 

 

Exercise

Setting up a table of contents is just one way of making your document easier to use using internal links.

  1. Create a new page using a text editor. Name the file toc.htm.
  2. Enter the code shown in this section.
  3. Observe the way the link from a table of contents item takes the user from the table of contents to the subject heading. Notice that links are always provided back to the table to contents.

Links to other documents

As you have already seen the syntax for a URL for the document name itself and for the position within that page is "locationandnameofpage#nameoftext". In the previous section you discovered how to make links within the current document. In contrast to linking within the current document, to link to other documents you must provide the location and name of the document you wish to connect to. Additionally, you can specify a specific point in that document the same way you do to provide jumps within the current document. The following example demonstrates the linking of one document to another within the same relative directory:

<HTML>

<HEAD>

</HEAD>

<BODY>

<A HREF="title.htm">Link to title page</A><BR>

</BODY>

</HTML>

 

As in the example shown in the beginning of this section, linking to other documents on other servers require the full name of the server and its directory structure.

<A HREF="http://home.netscape.com/">Netscape Inc.</A>

Exercise

The focus of this exercise is to demonstrate the linking of particular spots within multiple documents.

  1. Load page1.htm into your editor.
  2. Revise the text of page1.htm so it matches the following:
  3. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <H2>This is page 1</H2>

    This is the content of page 1.<P>

    Go to <A HREF="file:///a|page2.htm#TOP">Page 2</A><BR>

    Go to <A HREF="file:///a|page2.htm#impoint">point</A><BR>

    </BODY>

    </HTML>

  4. Load page2.htm into your editor.
  5. Revise the text of page2.htm so it matches the following:
  6. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <H2><A NAME="TOP">This is page 2</A></H2>

    This is the content of page 2.<P>

    <A HREF="file:///a|page2.htm#impoint">TESTING POINT</A><BR>

    a<BR>b<BR>c<BR>d<BR>e<BR>f<BR>g<BR>h<BR>i<BR>j<BR>k<BR>l<BR>

    <H2><A NAME="impoint">This is page 2</A></H2>

    This is the text of an important point on page 2.<P>

    Go to <A HREF="file:///a|page1.htm">Page 1</A><BR>

    </BODY>

    </HTML>

  7. Now load page1.htm into your browser and test the links.

Heading home

Another popular link is used to link the current page to the page which all other pages are derived, the home page. By providing a link to the home page, a user can jump to the page from which they started should they get lost or want to explore from the root again. This is accomplished in the same way you link one page to another, the only difference being that the page it links to is at the top of the hierarchy.

Linking to other Internet resources

One internet resource which you are already quite familiar with is the hypertext HTML document (http://). You have also seen how to connect to HTML documents on a local computer through the use of the file:// URL. You can connect to several other Internet resources including ftp, gopher, email, USENET news, remote system login, and WAIS.

To connect to a remote directory to download files via the File Transfer Protocol, you simply specify the protocol ftp followed by the directory you wish to connect to. For example, to connect to the public directory at Netscape you would use the following URL:

ftp://ftp.netscape.com/pub/

<A HREF="ftp://ftp.netscape.com/pub/">Netscape public directory</A>

 

If you wanted to connect to a USENET newsgroup, the protocol "news" is used followed by the newsgroup you wish to connect to. For example, to connect to a newsgroup which deals with HTML development try:

news: comp.infosystems.authoring.html

<A HREF="news: comp.infosystems.authoring.html">HTML Authoring News</A>

In order to provide a facility for the users of your page to send you feedback, you can use the "mailto" protocol. In fact, the way this particular anchor is interpreted varies depending on the browser that your user uses. Most of the new graphical browsers actually bring up a form which allows the user to enter information which they can send to you. For example, to provide a facility for users to access my page at anotheraddress.net I would use the following:

<A HREF="mailto:jhamlin@anotheraddress.net">jhamlin@anotheraddress.net</A>

or you could just specify your name

<A HREF="mailto:jhamlin@anotheraddress.net">Jim Hamlin</A>

 

 

The following is an example of the email form which is presented to the users of Netscape 1.1N:

 

Exercise

  1. Create a new document. Name it email.htm.
  2. Type the following into your new document:
  3. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <A HREF="mailto:yourname@youraddress">Your Name</A>

    </BODY>

    </HTML>

  4. Load the file and test in your browser. If you have an error which states that you do not have an email address set up, you must first set an email address up through your browser. For example, in Netscape the option is (Options|Preferences|Mail and News).

 

More about headers

As you have seen, you place items in your header which are relative to your whole document. Besides the title, there are many other things you can define for your document: The background color, the background image, the base HREF, and the base font size.

Creating a base URL for your document

Creating a base URL in your document can be very useful. For example, if many of your references on a particular page point to a given URL, you can simplify the need for long URL entries in your anchors. By creating a base URL which all other URLs in that document are based you will make your references more compact.

It is a good idea to include a base URL in each of your documents. This will ensure their usability should they ever be moved to a new location. By using a base URL you eliminate the need to change the relative URLs contained within the document. A case could arise where you have a several pages in the same directory. You will notice that it is not necessary to place the entire path of the page. You may also place pages in subdirectories of the directory where the current document resides. In these cases only the subdirectory name and the name of the page is all that is required. (This is because the default base URL is the location of the document.) Now consider what would happen if you wanted to move the current page to another location. You would have to either move all the other pages to replicate the relative structure which existed before or you would have to modify all the links of the current document to include either new relative links or full URL names. (This is because the default base URL has now changed.) By creating a URL base and setting it to the current location of your page, you can move this page anywhere you like and never have to move any files or update any links for it to continue functioning.

The URL base is tagged using <BASE> and consists of one attribute HREF: <BASE HREF="...">. The following example illustrates this using a file HREF to a HTML page on a disk drive labeled C:

<HTML>

<HEAD>

<BASE HREF="file:///C|/Classes/HTML/">

</HEAD>

<BODY>

This page can be moved anywhere on my hard drive and it will still find the following link:<P>

<A HREF="TITLE.HTM">Title</A>

</BODY>

</HTML>

 

 

Exercise

This exercise will show you how a base HREF can slim down your URLs throughout your document. In addition, you can test the portability of your page and then by changing only one base HREF, migrate all the links.

  1. In a text editor, create a new document named basehref.htm.
  2. We will be using the two pages already created, page1.htm and page2.htm.
  3. Enter the following text:
  4. <HTML>

    <HEAD>

    <BASE HREF="file:///a|">

    </HEAD>

    <BODY>

    This is the main document.We will be testing base HREFs.<P>

    <A HREF="page1.htm">Page 1</A><BR>

    <A HREF="page2.htm">Page 2</A><BR>

    </BODY>

    </HTML>

  5. Now load basehref.htm into your browser. Try the links.
  6. Move basehref.htm to another drive, say C. Load the page and try the links again. Notice that the links are maintained through the use of the base HREF.
  7. Move both of the other pages to another directory. Update the base HREF of basehref.htm to reflect the change. Try the links.

Creating a base font for your document

Often you will want to define the default size of the font to be used in your document. Although you normally see a base font in the header of your document, you can actually place the command anywhere in the document. (Although it is not recommended as there is a font command which can be used to change the text within your document.) The base font tag is considered a singleton where it only requires one tag to implement. When a base font tag is used, all text under the declaration of the base font will be set to a size defined in the tag. This base font is ended when the browser has finished displaying all the text of the document on the screen or until another base font tag is found later in the document.

You would want to use this command to enlarge the text of a document for easier readability or reduce the font so more text can be placed on the screen. It should be noted that this particular tag is a Netscape extension and may not work with all browsers.

The tag is constructed with the tag <BASEFONT>. This particular tag has only one attribute, SIZE. This attribute is required! Valid sizes range between 1 and 7. The complete syntax is then <BASEFONT SIZE="#"> where "#" is a valid number from 1 to 7. (1 is the smallest and 7 is the largest, in contrast to the way that the headers work with 1 being the largest and 6 being the smallest.) The default size in Netscape is 3.

In this particular example the basefont is placed in the header of the document:

<HTML>

<HEADER>

<BASEFONT SIZE="4">

</HEADER>

<BODY>

This is a test of basefont size 4.

</BODY>

</HTML>

 

As noted earlier, it is possible to change the base font anywhere throughout the document. (Note: Although it is possible to change the base font anywhere in the document, it is recommended that the base font tag be used only in the header of the document. There is a another tag, font, which can be used to change font sizes with the document.) The following example shows the use of the base font tag in the body of the document. Initially the base font is set to 3 (the default for Netscape), the font is then changed to 4, and then back to the default.

 

<HTML>

<BODY>

The base font defined by Netscape is 3.<BR>

<BASEFONT SIZE="4">

Now the base font is 4.<BR>

<BASEFONT SIZE="3">

Now the base font is back to 3.<BR>

</BODY>

</HTML>

 

 

How does the base font size affect the size of headers? They don’t! For example, an <H1> header defined with a base font of 3 will be the same size when a base font of 1 is defined. As noted earlier, the base font ranges from 1 to 7. To compare relative font size, a base font size of 6 will be the same font size as an <H1> header.

Exercises:

  1. Create a page which uses a base font size of 5 throughout the document.
  2. Create a page which initially uses a base font size of 4, then switches to a base font size of 3. (Netscape default).

 

Changing your font

The font command is used very much the same way the base font tag. This command is most typically used within the body of your document to change the size of the font relative to the text which follows. The font tag consists of the following: <FONT SIZE="#"> where # is a valid number between 1 and 7 (7 being the largest.)

The following example sets a base font size then redefines the size within the body of the document:

<HTML>

<HEAD>

<BASEFONT SIZE="4">

</HEAD>

<BODY>

This is the size of base font 4.<BR>

<FONT SIZE="6">

Now we have changed the font to 6 using the font tag.<BR>

<FONT SIZE="4">

Now the font is back to 4.

</BODY>

</HTML>

 

 

Now you have seen how the base font size and the font size can alter the size of the font. Up to this point they have been both used in the same manner. Now you may be asking yourself, why bother with two different tags if they both can be used the same way? The interesting thing to note about the font tag is that it does not require an exact number in its size attribute. Instead of having to specify the exact size of the font, you can specify an offset from the base font. This offers a big advantage! If you made use of offsets for your sizing of your fonts and decided that you wanted to make all your fonts one size smaller, all you would have to do is change the base font size to one smaller. All the other fonts tags throughout the document would follow suit as they are relative to the base font. (Note: You do not necessarily need to define a base font to use the offsets with the font command as Netscape defines the default base font of 3.)

 

To make use of font offsets, you simply specify how much smaller or how much larger you want your font compared to the base font. This is defined using the same attribute as before, SIZE. For example, if you wanted your font to be one larger than the base, you would use SIZE="+1". One smaller would be SIZE="-1". If you wanted to return to your base font size you could use SIZE="+0". The following example is the same as the one before with only one difference: the font sizes are being adjusted relative to the size of the base font.

<HTML>

<HEAD>

<BASEFONT SIZE="4">

</HEAD>

<BODY>

This is the size of base font 4.<BR>

<FONT SIZE="+2">

Now we have changed the font to 6 using the font tag.<BR>

<FONT SIZE="+0">

Now the font is back to 4.

</BODY>

</HTML>

 

 

Exercises:

  1. Create a page which constructs a base font.
  2. Change the font to three different sizes using the font tag with an explicit size.
  3. Create another page which duplicates the page created in step 2. This time use incremental size changes.

 

SECTION 3

What’s covered in this section?

 

Adding graphics to your page

GIF and JPEG formats

The two most commonly supported still graphics formats are the GIF and JPEG.

JPEG

The JPEG or JPG is a graphics format produced by the Joint Photographic Experts Group. This format is known for its compressed size and quality with scanned images.

GIF

The GIF, graphics interchange format, is known for it’s sharp image. A GIF can come in two formats: interlaced and non-interlaced. A GIF also supports the ability to make one of the colors in the palette a transparent color.

Interlaced GIFs

Interlaced GIFs appear as a poor resolution first and then improve in resolution until the entire image has arrived. This type of GIF is ideal if you want to provide the users of your page with a general idea of what the content of your page is before the entire page is loaded. If the browser that the user of your page uses does not support progressive display then this option will not take the intended effect; the image will be entirely loaded and then displayed.

Non-Interlaced GIFs

Non-interlaced GIFs appear on the screen in a linear fashion from the top row of pixels to the bottom row of pixels until the entire image arrives.

Transparent GIFs

Transparent GIFs are great because they give the illusion that they are blending in with the user’s display. This is accomplished by assigning one color to be transparent. When the image is received by the user’s browser, the transparent color is replaced with the color of the browser’s background. Note that this is only available if your user’s browser supports transparent colors.

So which is better?

The answer to this question is a simple it depends. The JPEG graphic format typically does a better job with realistic images such as scanned photographs. The GIF format, on the other hand, is better for images which need to be sharp, such as buttons, icons, and bullets. The JPEG format is typically smaller than the GIF as a result of different compression algorithms. The GIF format has more options available to it such as transparency and interlaced/non-interlaced.

Inserting graphics to an HTML document

Adding images to your document will make it look better than just a plain old text page. Graphics add color and often help to convey your message better (A picture is worth a thousand words - couldn’t resist!) Including graphics on your page is not as hard as you may think. The tag to accomplish such a feat is the image, <IMG>, command.

The <IMG> command always requires a location of a graphic which it is to display on your page. The definition of a graphic to be loaded is represented in the attribute SRC (SRC follows the syntax SRC="...".)

<IMG SRC="...">

<IMG SRC="ROCKET.GIF">

<IMG SRC="/graphics/ROCKET.GIF">

<IMG SRC="file:///C|/Classes/HTML/rocket.gif">

The image source as shown above can be in a variety of forms. It can be a filename, relative filename and directory, or be a URL to a graphic file.

Exercise

  1. Using Netscape, select (Help|About).
  2. Right mouse click on the image. From the popup menu select (Save this image as).
  3. Using the save as dialog box, save the image to your floppy disk. (Name it netscape.gif).
  4. Create a new document and name it image.htm. (Ensure that it is saved in the same location as the image.)
  5. Type the following text:
  6. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <IMG SRC="netscape.gif"><BR>

    </BODY>

    </HTML>

  7. Load the file into your browser to test the loading of the image.
  8. Change the line in your document which loads the file to:
  9. <IMG SRC="file:///A|netscape.gif"><BR>

  10. Reload the file into your document to test the loading of the image.

Providing an alternate to the graphic

In many cases, users of a page who are not capable of displaying a graphic on their page are left with a big mess! In other cases users who are using a graphical browser but have graphics turned off are left with icons in the place of the graphic. It is your responsibility to try to make the screens of these people as easy to read as possible. Rather than just not loading a graphic, you should provide a text alternative.

There are many conventions used. If the graphic represents a logo or icon you generally use an alternative phrase such as "[Image]". If you use graphics in a list, you would most likely provide the user with an alternative that makes sense, such as "*".

 

Creating an alternative to loading an image is accomplished through the use of the attribute ALT. Alt follows the syntax ALT="..." where ... represents the text to put in the graphic’s place. For example, if you had a graphical bullet and wanted to provide an alternative such as "*":

<IMG SRC="redball.gif" ALT="*">

If you wanted to replace an image such as a logo with a text representative you could do something like this:

<IMG SRC="logo.gif" ALT="[Image]">

Exercise

  1. Load the file image.htm into your editor.
  2. Add the ALT attribute to your image source:
  3. <IMG SRC="file:///A|netscape.gif" ALT="[IMAGE]">

  4. Load the document into your browser.
  5. Disable auto load of graphics in your browser (Under options menu in Netscape.) *Note: You may notice that using this option still loads the graphic. This is because the graphic is cached in memory by Netscape. To solve, change the name in the SRC statement so a non existent graphic and try reloading with the auto load of graphics off.
  6. Reload the document. Notice how the ALT attribute is used in Netscape.

Wrapping text around the graphic

You may often have a large image that you want to display on your page. Whenever you insert a picture the default is not to wrap text around it. (Floating text). This can make your image appear as a foreign object in the document and can make your document longer than it needs to be. To wrap text around an image you can use the ALIGN attribute. There are two values of this attribute which define how text is wrapped: LEFT and RIGHT. The LEFT value will place the image on the left side of the page and allow text to wrap the right side. The RIGHT attribute will do the opposite, placing the image on the right side and wrapping the text on the left.

ALIGN=LEFT|RIGHT

<IMG SRC="logo.gif" ALT="[Image]" ALIGN=LEFT>

<IMG SRC="logo.gif" ALT="[Image]" ALIGN=RIGHT>

Exercise

  1. Create new page and name it grphwrap.htm.
  2. Type the following text into your document:
  3. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <IMG SRC="file:///A|netscape.gif" ALT="[IMAGE]" ALIGN=RIGHT>

    This is line wrap 1<BR>

    This is line wrap 2<BR>

    </BODY>

    </HTML>

  4. Load the file into your browser and observe the result.
  5. Edit grphwrap.htm and change the alignment to LEFT. Observe the result.

Graphic links

You have already seen how to make text based anchors which link to Internet resources. In fact, you can use images as well. To use an image as a link you simply include the image within the anchor tag. In the following example a link to Netscape’s home page is chosen by a Netscape graphic anchor.

<HTML>

<HEAD>

</HEAD>

<BODY>

<A HREF="http://home.netscape.com/"><IMG SRC="netscape.gif"></A>

</BODY>

</HTML>

 

 

It is important to note that you are not limited to using either text or graphics. You can use them both! Simply include whatever you want to be used as the anchor within the anchor tag.

<HTML>

<HEAD>

</HEAD>

<BODY>

<A HREF="http://home.netscape.com/"><IMG SRC="netscape.gif">Netscape Inc.</A>

</BODY>

</HTML>

 

Exercise

  1. Create a new document and call it imgling.htm.
  2. Type the following lines:
  3. <HTML>

    <HEAD>

    </HEAD>

    <BODY>

    <A HREF="page1.htm"><IMG SRC="netscape.gif"></A>

    </BODY>

    </HTML>

  4. Load the file into your browser and observe the result.
  5. Now edit your document again to include text in the link:
  6. <A HREF="page1.htm"><IMG SRC="netscape.gif">Page 1</A>

  7. Reload your page in your browser and observe the result.

 

 

Mak