Previous Page Next Page

16.3. Creating a Web Page with HTML

In order to write Web pages, you must learn at least some of what makes up the HTML language. There are volumes written on this subject. Here we will cover just enough to introduce you to HTML and give you the basics so you can write some simple dynamic pages with forms and CGI scripts.

As previously stated, Web pages are written as ASCII text files in HTML. HTML consists of a set of instructions called tags that tell your Web browser how to display the text in the page.[2] When you type in the URL or click on a hyperlink in a page, the browser (client) communicates to the server that it needs a file and the file is sent back to the browser. The file contains HTML content that may consist of plain text, images, audio, video, and hyperlinks. It's the browser's job to interpret the HTML tags and display the formatted page on your screen. (To look at the source file for a Web page, you can use the View Document menu under View in the Netscape browser or, using Internet Explorer, select the View menu and then select Source to see the HTML tags used to produce the page.)

[2] If you have ever used the UNIX programs nroff and troff for formatting text, you'll immediately recognize the tags used for formatting with HTML.

Creating Tags

The HTML source file can be created with any text editor. Its name ends in .html or .htm to indicate it is an HTML file. The HTML tags that describe the way the document looks are enclosed in angle brackets < >. The tags are easy to read. If you want to create a title, for example, the tag instruction is enclosed in brackets and the actual text for the title is sandwiched between the marker that starts the instruction, <TITLE>, and the tag that ends the instruction, </TITLE>. The following line is called a TITLE element, consisting of the <TITLE> start tag, the enclosed text, and the </TITLE> end tag. A tag may also have attributes to further describe its function. For example, a text input area may allow a specified number of rows and columns, or an image may be aligned and centered at the top of the page. The elements and attributes are case insensitive.

<TITLE>War and Peace</TITLE>

When the browser sees this instruction, the title will be printed in the bar at the top of the browser's window as a title for the page. To put comments in the HTML document, the commented text is inserted between <!-- and -->.

Because HTML is a structured language, there are rules about how to place the tags in a document. These rules are discussed later in the chapter.

A Simple HTML Document

The following HTML file is created in your favorite text editor and consists of a simple set of tagged elements that will be rendered by the browser when the file is displayed. See http://www.w3.org/MarkUp/Guide/.

Example 16.5.

Code View:
1   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
2   <html>
3   <head>
4       <title>Simple HTML Template</title>
5   </head>
6   <body bgcolor="silver">
7       <div align="center">
8       <h1>Getting Started</h1>
9       <p>This is a paragraph in the body of my document.
            It starts and ends with a paragraph tag.
10          </br>You can put pictures, links, movies, here,
            whatever you like..
        </p>
        <p>
11          <img src="file:///c:/wamp/www/mexico.jpg" border="1"
                width="200" height="250">
        </p>
        <br/>
        For a great HTML tutorial:
12          <a href="http://www.w3schools.com/html/default.asp">
            <strong>Click here</strong></a>
        </div>
13  </body>
14  </html>

Explanation

  1. This line declares the DOCTYPE; i.e., what flavor of HTML or XHTML you are using. This declaration can be used later when validating the page for the correct syntax for a particular version. For plain HTML4, we use a DOCTYPE of transitional. Other types are frameset and strict, beyond the scope of this discussion.

  2. All of the text for the HTML document is between the <html> start tag and the </html> end tag. Although HTML is the standard language for creating Web pages, there are other markup languages that look like HTML. The HTML element identifies this as an HTML document. You can omit these tags and your browser will not complain. It is just more official to use them.

  3. Between the <head> tag and </head> tag, information about the document is inserted, such as the title. This information is not displayed with the rest of the document text. The <head> tag always comes right after the <html> tag.

  4. The <title> tag is used to create the title shown at the top of the browser window.

  5. This is the closing tag for the <head> tag.

  6. The main part of the document appears in the browser's window and is enclosed between the <body> start tag and </body> end tag.

  7. The <div> tag creates a creates a division in the page. All content between the opening and closing </div> tags will be centered on the page.

  8. A level 1 heading is enclosed between the <h1> and </h1> start and end tags.

  9. The <p> starts a new paragraph. </p> marks the end of the paragraph.

  10. This line uses a <br> tag to create a line break in the text.

  11. The <img> tag allows you to place logos, photographs, illustrations, animations, etc., such as a gif, png, or jpeg images within a document. The src attribute to the img tag states the location of the document on the server. You can also scale the image to a specific size by specifying its height and width in pixels.

  12. You can also create links on the page with the <a href> tag. When the user clicks on the link, he will be redirected to a tutorial on how to use HTML.

  13. This tag marks the end of the body of the document.

  14. This tag marks the end of the HTML document.

Figure 16.5. The HTML document from Example 16.5, as displayed in Mozilla Firefox.

[View full size image]


Table 16.4. Simple HTML Tags and What They Do
Tag ElementFunction
<!-- text -->Commented text; nothing is displayed.
<BASE HREF="http://www.bus.com/my.html">Where this document is stored.
<HTML>document</HTML>Found at the beginning and end of the document, indicating to a browser that this is an HTML document.
<HEAD>headinginfo</HEAD>First element inside the document. Contains title, metatags, JavaScript, and CSS. Only the title is displayed directly.
<TITLE>title of the document</TITLE>Title of the document; displayed outside the document text in a window frame or top of the screen. Can be placed in the bookmark list.
<BODY>document contents</BODY>Contains all the text and other objects to be displayed.
<H1>heading type</H1>Creates boldface heading elements for heading levels 1 through 6. The levels elements are: H1, H2, H3, H4, H5, and H6. The largest, topmost heading is H1.
<P>text</P>Paragraph tag. Marks the beginning of a paragraph. Inserts a break after a block of text. Can go anywhere on the line. Ending paragraph tags are optional. Paragraphs end when a </P> or another <P> (marking a new paragraph) is encountered.
<B>text</B>Bold text.
<I>text</I>Italic text.
<TT>text</TT>Typewriter text.
<U>text</U>Underlined text.
<BR>Line break.
<HR>Horizontal shadow line.
<UL>Start of an unordered (bulleted) list.
<LI>An item in a list.
<LI>Another item in a list.
</UL>The end of the list.
<OL>Start of an ordered list.
<DL>Descriptive list.
<DT>An item in a descriptive list.
<DT>Another item in a descriptive list.
</DL>End of the descriptive list.
<STRONG>Bold text.
<EM>Italic text.
<BLOCKQUOTE>text</BLOCKQUOTE>Italicized blocked text with spaces before and after quote.
<A HREF SRC="URL">Creates a hotlink to a resource at address in URL on the Web.
<IMG SRC="URL">Loads an image into a Web page. URL is the address of the image file.


Previous Page Next Page