HTML: A Gentle Introduction

 in
In the May issue of Linux Journal, Eric explained how to set up and install CERN's World Wide Web server software. This month, he tells us how to use HTML to create hypertext documents for viewing by Web surfers.
References

Why do we care about URLs? URLs are used to make references to image, sound and other media files that you may want to include or have a hypertext link to. URLs are also used to create links to other documents. Let's look at an example of how to include an inline image in a document.

<IMG SRC="http://remote.host.name/gifs/foo.gif">

The IMG tag has an attribute, a specification which indicates a particular characteristic about a tag. In this case, the SRC attribute indicates the image the tag refers to. Assuming that your browser is capable of displaying inline GIFs, foo.gif would be displayed along with the text of the document containing the IMG reference. Remember to use proper file extensions for image references. A browser will use the extension to determine how to properly display an image. For instance, .gif is used for GIF images while .xbm is used for X bitmaps.

To create a hypertext link to another HTML document you might use the following HTML directive:

<A HREF="http://remote.host.name/docs/foo.html">Foodocument</A>

This is an example of an anchor. An anchor is specified using an A tag, which typically has an HREF attribute. Unlike the IMG tag, an anchor has to be terminated with a </A>. In this example, “Foo document” will be displayed in the documents as a hypertext link, or anchor, to foo.html. Many browsers will display this anchor using colored text or some other indication that the text represents a link. When the reader selects such an anchor, the browser will attempt to retrieve the document specified by the HREF attribute.

Hypertext links may also point to images which are viewed using an external viewer or to sounds which are played when the link is selected. An image can be used as a link instead of using text. The following code demonstrates how to do this:

<A HREF="http://remote.host.name/docs/foo.html"></A>
<IMG SRC="http://remote.host.name/gifs/foo.gif"></A>

In this example an IMG tag is used as the anchor for foo.html. This effectively makes the inline foo.gif an anchor a user selects. Anchors which are images present another problem. How is a text mode browser going to present an image, and if it can't present the image, how is a user going to select the link? Fortunately, HTML provides an additional attribute for the IMG tag. The ALT attribute can be used to specify a text string as an alternate to displaying the image. This can be done as follows:

<IMG SRC="http://remote.host.name/gifs/foo.gif" ALT="FOO">

The ALT attribute is also useful to provide a method a text browser can use to display an inline logo, or some other image that isn't necessarily a hypertext link.

A Second Example Document

Now let's look at a second example document which contains inline images and anchors. The HTML source for the second example document is presented below. Figure 2 shows how Mosaic might display this document.

<TITLE>Example Document 2</TITLE>
</HEAD>
<BODY>
<H1>The Second Example Document</H1>
<HR>
<IMG SRC="http://remote.host.name/gifs/foo.gif"> An inline image
<HR>
 This is an <A HREF="http://remote.host.name/docs/foo.html">
anchor</A> to the foo.html document.
<HR>
<A HREF="http://remote.host.name/docs/foo.html">
<IMG SRC="http://remote.host.name/gifs/foo.gif" ALT="FOO!!!"></A>
This image is also an anchor to the foo.html
document.
</BODY>

Notice how the anchor, anchor, is embedded in the text of the document, as are the inline images. Further, the document text is aligned at the bottom of the image. This can be changed by using the ALIGN attribute of the IMG tag. Here is an example which aligns the text with the center of the image:

<IMG ALIGN=middle SRC="http://remote.host.name/gifs/foo.gif">

top and bottom are also valid options for the ALIGN attribute.

Online HTML References

Further Things To Explore

This article is only designed to give you an introduction to HTML. HTML includes other logical styles which were not covered, and provides methods for displaying special characters. HTML can be used to construct a form which users fill out and through which they can interact with a server. In short, there are many more avenues to explore than I have space to introduce you to in this article. Enjoy making your own WWW waves with HTML!

Eric Kasten has been a systems programmer since 1989. Presently he is pursuing his Masters in computer science at Michigan State University, where his research focuses on networking and distributed systems. Well-thought-out comments and questions may be directed to him at tigger@petroglyph.cl.msu.edu. You may also visit his home page at petroglyph.cl.msu.edu/~tigger.

______________________

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState