Hypertext Markup Language

team lib

Writing HTML code isn't as difficult as you might think.

"Providing Internet and World Wide Web Services" was the first of a multipart series explaining Internet and World Wide Web services. In this tutorial, we'll take a closer look at HTML and examine some actual HTML code from a sample Web page.

There are specialized HTML editors, but HTML code is plain ASCII text and, therefore, can be created using any text editor that can save a file in ASCII text format. Although Web browsers are typically used to access HTML pages from a Web server, most Web browsers also load files from your local disk drive, which allows you to test some simple Web pages without having a Web server up and running.

When creating HTML files, remember to name them using the .html extension. If your Web server is based on Windows 3.x and can only work with file names in the MS-DOS "8.3" format, use the extension .htm.

Rocket Science

Listing 1 displays HTML code for "a sample home page" of a mythical company called Retro Rocket, which manufactures the RetroRocket product line. I named the document retro.htm.

HTML uses tags to tell the Web browser how the text should be displayed. In Listing 1, the code begins with the tag <HTML>. Place this tag at the beginning of your HTML pages; it lets the Web browser know that the following code is HTML and should be rendered accordingly . Note also that Listing 1 ends with the tag </HTML>. Most HTML tags are used in pairs, with an opening tag and an ending tag to delineate which text you want handled in a particular way. Ending tags are the same as opening tags, but with the addition of a forward slash (/).

Web browsers can identify an HTML file by the file extension, and many browsers will display pages that don't carry the <HTML> tag. When viewing your document with your own browser you might be able to get away without the tag, but you can't be sure that everyone who wants to view your page will be using the same browser you use. It's best to stick with good programming habits and to avoid the temptation to take shortcuts.

Following the opening HTML tag in Listing 1, there are three comment lines delineated by <! and >. The browser doesn't do anything with comment linescomment lines are not displayed. A comment's only purpose is to enable you to document your code.

HTML pages consist of a head and a body portion. In Listing 1, the head is that portion of text between the <HEAD> and </HEAD> tags. In this example, there's one item in the head, and that's the title. The title is delineated by (you guessed it) the <TITLE> and </TITLE> tags. The title tags indicate what will be displayed in the title bar of the Web browser.

Everything that shows up on the Web page itself is found in the body of the HTML document. (I'll let you figure out which tags delineate the main body of the HTML page.)

Any text in an HTML document that doesn't have specific HTML tags bracketing it will be displayed by the Web browser as body copy. In Listing 1, the paragraph that begins with "Welcome to the RetroRocket World Wide Web site" is body copy and is displayed in the font and point size that has been determined for the browser.

Web developers can't live by text alone, so I included a graphic imagethe RetroRocket Co. logoon the sample page. Web browsers can display files in the .gif and jpeg file formats. I created the sample logo using the Windows Paintbrush program, then converted the .bmp file to .gif format with a graphics conversion program.

In Listing 1, I referenced the image with the HTML statement <IMG ALIGN=bottom SRC="retro.gif">. This statement is one that does not use beginning and ending tagsit's all one statement. The SRC="retro.gif" portion of the statement tells the Web browser which file to request. In this case, the .gif file (retro.gif) is located in the same directory as the retro.htm file. If it were in another directory, I would need to enter the file's full path name. If the file were on another Web server, I would need to give the full URL, including path extensions, such as SRC="http://www.lanmag.com/images/retro.gif".

In addition to body text, HTML lets you have several subhead text styles, ranging (in descending order of point size) from H1 to H6. I used the H1 headline style for the main headline (Retro), which I positioned next to the graphic. If you look at the HTML image statement in Listing 1, you'll note that it is bracketed by the <H1> and </H1> tags, and the word Retro immediately follows the image statement. The H1 tags cause all the text between those tags (the word Retro is all there is) to be rendered in Headline 1 stylethe largest headline size. The ALIGN=bottom portion of the image statement aligns the bottom of the text with the bottom of the graphic. (You can also use ALIGN=top or ALIGN=middle if you want a different text position. ALIGN=top aligns the top of the text with the top of the image, while ALIGN=middle aligns the middle of the text with the middle of the image.)

The line following the image statement ("Your best buy in a luxury spacecraft.") is set as Headline 6the smallest head.

Listing And Linking

I have already mentioned the body copy ("Welcome to the RetroRocket World Wide Web site."), so I won't belabor it, except to point out the <P> tag I used at the end of the paragraph. This tag tells the Web browser that it has reached the end of a paragraph. The Web browser will insert a carriage return followed by a blank line wherever you place a <P> tag in the document.

You can use carriage returns and blank lines when writing your HTML code to make it easier to read and understand, but Web browsers will ignore them. This means you will have to use HTML tags to force carriage returns and blank lines to appear in the displayed pages. The Web browser will automatically enter a carriage return at the end of a headline, but in most cases, you need to specifically call for carriage returns or blank lines in your HTML code.

Following the body text, you'll notice three bulleted items ("RetroRocket Product Line," " Dealer Listings," and "History of Retro Rocket Co."). I decided to make these three items hyperlinks to other documents, but the list feature is not necessarily tied to hyperlinking; I simply decided to combine the two features, as you will likely do in many cases.

Let's discuss lists first. In general, there are two broad categories of lists in HTML: ordered lists and unordered lists. Ordered lists are numbered lists. You would most likely use an ordered list when items must be displayed in a specific order. One example might be steps you need to follow to assemble some product: Step 1 comes first, then Step 2, and so on. You create ordered lists by surrounding them with the <OL> and </OL> tags. Then, at the beginning of each item in the list, insert the <LI> tag (for "list item"). The Web browser will automatically take care of numbering the ordered list, starting with "1" for the first list item.

The second type of list is the unordered list, which is what I used in the sample. This list is not numbered ("ordered"). It is also called a bulleted list, as each list item is preceded by a bullet. You create an unordered list by surrounding the collective list items with the <UL> and </UL> tags. As before, you need to place the <LI> tag at the beginning of each list item.

As I mentioned, each list item is also a hyperlink, so now let's look at the creation of hyperlinks. A hyperlink, also known as an "anchor," takes the following form: <A HREF= "file name">displayed text </A>. Here, "file name" is the name of the document to which you want to link and Displayed Text is the underlined wording that you want the reader to see. (I should note here that by convention, text representing hyperlinks is usually displayed in a different color from regular text, and the hyperlink text is underlined. It is the Web browser that does this displaying, and these displays are usually configurable options, so the end result will vary according to the browser and user choices.)

If you look at the HTML code for the first of the three list items, you'll note that the opening tag (<A HREF="rockets.htm">) gives the file name of the document to which we are linking, while the second portion ("RetroRocket Product Line") is what the reader sees when looking at the hyperlink via his or her Web browser. In this case, I didn't need to reference a complete URL, or even a path, as the file rockets .htm is in the same directory as the current document (retro.htm).

Just below the three list items in our sample document, you will see the tag <HR>; it calls for a horizontal rule.

Finally, I added a line that asks for readers' comments, and I included the e-mail address of the Webmaster at retrorocket.com. There's even an <ADDRESS> tag in HTML, which my browser (Netscape Navigator 2.0) converts to italics.

In the tutorial "HTML and CGI," we'll continue our discussion of HTML. In the meantime, fire up those text editors and Web browsers and try a few experimental Web pages!

Listing 1: A: Sample Web Page
start example
 <HTML>  <! This is a sample HTML file, to show you what's behind a Web>   <! page. This line, the one above, and the line below this>   <! are comments. Comments don't show up in the displayed page.>  <HEAD>   <TITLE>Retro Rocket Company </TITLE>   </HEAD>  <BODY>  <H1><IMG ALIGN=bottom SRC="retro.gif">Retro</H1>   <H6>Your best buy in a luxury spacecraft.</H6>   Welcome to the RetroRocket World Wide Web site. This is the place    to check out the latest in personal spacecraft technology.<P>  <UL>   <LI><A HREF="rockets.htm">RetroRocket Product Line</A>   <LI><A HREF="dealers.htm">Dealer Listings</A>   <LI><A HREF="history.htm">History of Retro Rocket Co.</A>   </UL>  <HR>  Comments? Please e-mail to:    <ADDRESS>webmaster@retrorocket.com</ADDRESS>  </BODY>   </HTML> 
end example
 

This tutorial, number 95, by Alan Frank, was originally published in the July 1996 issue of LAN Magazine/Network Magazine.

 
team lib


Network Tutorial
Lan Tutorial With Glossary of Terms: A Complete Introduction to Local Area Networks (Lan Networking Library)
ISBN: 0879303794
EAN: 2147483647
Year: 2003
Pages: 193

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net