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:

• Understand the basics of the Web and hypertext documents
• Identify the parts of a Web document
• Use headings
• Use basic HTML layout commands
• Use basic HTML formatting commands
• Compose a variety of links to other documents and resources
• Add graphics to your document
• Place graphics in your document in a variety of ways
• Change your background color and image
• Use lists
• Use Subscripts and superscripts
• Make use of tables
• Understand the basics of style
• Be able to locate more information on the net

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.

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.

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.

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.

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.
1. The browser uses the address associates the hyperlink with an address that it can connect to fetch the document which was requested.
1. The server responds by sending the document which was requested by the browser.
1. The browser receives the document and renders it for presentation to the user.

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.

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.

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 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.

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.

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, 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.

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.

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.

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:

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

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:

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

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.
1. 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:

• Ensure that you have spelled the tag correctly.
• Ensure that no extra characters have been included within the tag which do not belong. This includes spaces! For example, with the tag <CENTER>, putting spaces before < CENTER>, after <CENTER >, or anywhere in the middle <CE NTER> will make the tag unrecognizable.
• Get a reference guide for the commands. This will tell you three important things: the attributes which can be used with this tag, tags that this tag can be nested in, and tags which be nested in this tag.

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

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.

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.

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.

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.

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:

Exercise

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.

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:

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

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:

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.
1. 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:

Exercise

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.

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:

Exercise

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.

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:

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

Exercise

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:

Exercise

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:

Exercise

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.

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:

Exercise

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

Example:

Exercise

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:

Exercise

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:

Exercise

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

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:

Exercise

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:

Exercise

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>.

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:

Exercise

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:

Exercise

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:

Exercise

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:

Exercise

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.

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: Data source / protocol / access method

//bbb.bbb.bbb Domain name / node

:cc Port

/ddd/ddd/ddd/ Path

eee Resource name

#fff Arguments

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:

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.

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

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.

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.

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.

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.

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.
1. Enter the code shown in this section.
1. 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.

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:

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.

Exercise

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

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.

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:

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:

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

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 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:

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.

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:

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.

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:

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:

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.

Exercises:

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

JPEG

GIF

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.

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="...".)

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

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 "*":

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

Exercise

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.

Exercise

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.

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.

Exercise