This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
The advantage? It's really too easy for words. Within HTML documents, elements are denoted by a
tag. HTML ignores blank lines and indentation in the document. Therefore, to skip a line and begin a new paragraph, using
is necessary (unlike TEX, for example, which causes paragraph breaks at blank lines). Viewing the document Before we go much further with HTML, let's describe how to look at your first work of hypertext art. Most web browsers allow you to open a local HTML document and view it. For example, under Navigator, selecting Open Page from the File menu and then clicking Choose File... allows you to view an HTML file. Other browsers, such as Lynx, provide similar mechanisms. You should first save your HTML document in a file (such as sample.html) and view it with your web browser.
* HTML is really a Document Type Definition in Standard Generalized Markup Language (SGML). SGML defines the
< previous page
page_573
next page >
< previous page
page_574
next page > Page 574
When viewed in Netscape Navigator, our sample document looks like Figure 16-4. As you can see, Navigator does the actual "text formatting" for you; all that is required on your end is to write the document and point your web browser at it.
Figure 16-4: Sample HTML document displayed by Netscape It's also quite easy to make your new HTML documents available via the Web. Assuming you have configured httpd as described in the previous section, you can place the HTML file in the httpd DocumentRoot directory (in our case, this is /usr/local/httpd/htdocs). Therefore, assuming the previous document is saved as /usr/local/httpd/htdocs/sample.html, and httpd is running on your system, anyone can access the document by opening the URL: http://www.veggie.org/sample.html with a web browser. (Of course, substituting your own hostname for www.veggie.org.) Note that you can create directories, symbolic links, and so forth within the DocumentRoot directory. Any HTTP URLs to your system will access filenames that are relative to DocumentRoot. So if we create the directory /usr/local/httpd/htdocs/mydocs and place sample.html there, the corresponding URL is: http://www.veggie.org/my-docs/sample.html Using links In order to refer to other documents, or sections within the same document, links are used within the HTML source. For example:
You can find more information about HTML You can also access the <em>Amazing, she thought. The find command can be used for almost <strong>anything! This is displayed within Navigator as seen in Figure 16-10. All right, I dare you to cross this one:
< previous page
page_574
next page >
< previous page
page_575
next page > Page 575
Figure 16-5: Link displayed by Netscape The word "here" is highlighted, indicating that it is a link. Clicking on the link within Netscape retrieves the document pointed to by the URL: http://www.w3.org/MarkUp/ The element is known as an anchor; it specifies a link that is associated with a particular region of text (in this case, the word "here"). The element we used is known as an absolute link. That is, the URL includes the complete machine and pathname specification. For documents on the same machine, you should use relative links, such as:
< previous page
page_575
next page >
< previous page
page_576
next page > Page 576
You can also use links to refer to sections within the same document. For example, the link: See Genetically Engineered Vegetables: Our Specialty
Here, the anchor uses the name attribute, instead of href. In addition, the text within the anchor is the entire heading name. It's not required that you use headings as name anchors, but it usually makes sense to do so when you want to have cross references to other "sections" of the document. For instance, when a user selects the link pointing to this anchor, they will see the section heading: Genetically Engineered Vegetables: Our Specialty at the top of the Netscape Navigator document window. Links can also refer to particular locations within other documents. For example:
http://www.veggie.org/pics/artichoke.gif
< previous page
page_576
next page >
< previous page
page_577
next page > Page 577
the browser will be responsible for running a separate program to display the image. However, the server providing the image must tell the browser what type of data the incoming image is. This is handled by the mime.types file, in the httpd configuration directory. This file contains lines such as: image/gif
gif
image/jpeg
jpeg jpg jpe
audio/basic
au sun
application/postscript ai eps ps text/html
html
text/plain
txt
The first field in each line defines the MIME type name for the document in question. The remaining fields indicate filename extensions that the MIME type corresponds to. In this case, any filenames ending in .gif are treated as image/gif type documents. When the browser (say, Netscape Navigator) retrieves a document, it also gets information on the MIME type associated with it from the server. In this way, the browser knows how to deal with the document. For text/html documents, Navigator simply formats the HTML source text and displays it in the document window, for image/gif documents, it uses internal image viewing code to display the graphic. For image/png documents, Navigator runs a separate image viewer, such as xv. Similarly, application/postscript documents are viewed using Ghostview on most Unix systems. How individual MIME types are dealt with is up to the browser. Navigator provides an option that allows you to specify a program to be run to process documents of a particular type. The srm.conf file can also contain a DefaultType directive, which specifies which MIME type to use when all the other types do not apply. We use: DefaultType text/plain If the server is unable to determine the type of document, it assumes text/plain, which is used for unformatted text files. Netscape displays these text files in a constant-width font in the document window. Embedded images One of the nicer features provided by HTML is the ability to include images directly in the document. This is accomplished with the element:
as well.
< previous page
page_577
next page >
< previous page
page_578
next page > Page 578
Figure 16-6: Image displayed by Netscape In theory, the element can be used to embed "any" document into the current one. However, it is most commonly used for small images. The kind of images that can be inline depends on the particular browser. GIF and JPEG images seem to be universally accepted. However, note that not all browsers can display inline imagesmost notably text-based browsers such as Lynx. You can also use
within an anchor, as in:
< previous page
page_578
next page >
< previous page
page_579
next page > Page 579
providing an alt tag that displays explanatory text for people who can't see the image, such as blind readers or anyone using a text-only browser. The final version of our little page is shown in Figure 16-7.
Figure 16-7: Image and link displayed by Netscape More HTML features Obviously, you need more than section headings, links, and inline images to write nicely formatted HTML documents. HTML provides many other text-layout features. A numbered list can be obtained with the element, using
This list appears as shown in Figure 16-8 when formatted by Netscape Navigator. An unnumbered list can be obtained by using in place of
. Unnumbered list items are marked with bullets instead of incremental numbers. Lists can be nested as well. When unnumbered lists are nested, the bullet style usually changes at each level, as in Figure 16-9. The HTML source used to produce this list is:
< previous page
page_579
next page >
< previous page
page_580
next page > Page 580
Figure 16-8: List displayed by Netscape Here is an example of a nested list.
The indentation is used strictly to make the source easier to read; feel free to use whatever indentation style you deem appropriate.
Figure 16-9: Nested lists displayed by Netscape Various types of text emphasis are available. We've already seen <em>, which usually causes words to be placed in italics. Note that how these items are displayed depends entirely on the browser. The most commonly used emphasis tags are: <em> Emphasized text, usually rendered as italics
< previous page
page_580
next page >
< previous page
page_581
next page > Page 581
Program source code, usually rendered in a constant-width font <samp> Sample output from a program, also in constant width User keyboard input <strong> For strong emphasis, usually in boldface Here is an example that uses several of these elements.
Figure 16-10: Fonts displayed by Netscape Note that , <samp>, and are all usually displayed as a constant-width typewriter font. However, it is important to distinguish between different types of logical emphasis in documents. In this way, we can change the typeface used to display items (for example, to a slanted font), but allow and <samp> to remain the same. HTML also provides the , , and tags to produce boldface, italic, and constant-width text, respectively, should you wish to specify fonts directly. The <pre> element allows you to include "preformatted" or "verbatim" text within an HTML document: The source code for hello.c is as follows. <pre> #include <stdio.h> void main() { printf("Hello, world!"); } This text will be displayed as seen in Figure 16-11.
< previous page
page_581
next page >
< previous page
page_582
next page > Page 582
Figure 16-11: Preformatted text displayed by Netscape Note the use of < to obtain < and > to obtain >. This is necessary because the < and >> characters have a special meaning within HTML documents. Even within a <pre> element, substitution is necessary. Other special characters are available as well, including: " To obtain a double-quote:'' & To obtain an ampersand: & é To obtain an acute-accented e: é ö To obtain an o-umlaut: ö The complete HTML specification, located at: http://www.w3.org/TR/REC-html40/ lists all the available codes. You'll often seen a horizontal rule used in HTML documents to visually divide the page. This is obtained with the
element, as so: All right, I dare you to cross this line:
Finally, the element is often used at the end of HTML documents to specify the name and address of the author, or maintainer, of the page. For example:
< previous page
page_582
next page >
< previous page
page_583
next page > Page 583
Many people link the name within the item to a personal home page. Finding out more Within Netscape Navigator, you can view the HTML source for any document on the Web. While viewing the document in question, select the Document Source option from the View menu. This gives you an inside look at how the page was written. The Lynx web browser provides a similar option in the form of the back-slash (\) command. Building Interactive Forms As mentioned in previous sections, Netscape Navigator and Apache httpd include support for forms, which allow the user to provide input (in the form of text-entry fields, buttons, menus, and so forth) to a script, executed on the server. For example, one form might include a text field for entering a username. Submitting the form causes the server to run a finger script, displaying the output as an HTML document. The ability to use forms depends on the capabilities of both the browser and httpd server. Not all browsers can view forms, but nowadays most do. Also, not all implementations of httpd understand forms. We suggest using Apache httpd, discussed earlier in this chapter, which provides extensive forms support. The canonical example of an interactive form is one where users can send electronic mail to the maintainer of the form page. In this section, through the use of this example, we'll demonstrate how to write forms and the server scripts that are executed by the forms. Of course, with a browser that includes a mail client of its own or that can be connected to a mail program, just putting mailto:mail_address into the HTML page would suffice. But a form could also be part of a larger application; for example, you might not only want to send feedback via mail, but also order goods in an online shopping application. The HTML form document The first step in building a form is to write an HTML document that corresponds to the form itself. These HTML pages contain a When viewed within Netscape Navigator, this form looks like Figure 16-12.
Figure 16-12: Form displayed by Netscape As you can see, the form uses several additional features of HTML Let's walk through the file and describe them all.
< previous page
page_584
next page >
< previous page
page_585
next page > Page 585
Line 6 uses the end tag.
Multiple forms can be used within a single HTML document; however, you cannot nest one