Source code editor
Website development
|
|
Understanding HTMLHTML is the payload that is transmitted through the processes of HTTP. As you learned earlier in this hour, an HTML document includes text, formatting codes, references to other files, and links. When you inspect the contents of a basic HTML document using a text processing application such as Windows Notepad or Unix's vi, you'll find that the document is actually an ordinary text file. The file contains any text that will appear with the page, and it also includes a number of special HTML codes called tags. Tags are instructions to the browser. They do not appear as written on the Web page, but they affect the way the data appears and the way the page behaves. The HTML tags supply all the formatting, file references, and links associated with a Web page. Some important HTML tags are shown in Table 17.2.
Of course, there is much more to HTML than a single table can convey. Many tags apply to a block of text. If so, the tag appears at the beginning and the end of the block. The tag at the end of the block includes the slash character (/) to signify that it is an end tag. In other words, the callout for an H1 heading would be tagged as follows: <H1>Dewey Defeats Truman</H1> An HTML document is supposed to begin with a <!DOCTYPE> declaration. The !DOCTYPE defines the version of HTML used for the document. For HTML 4.0, the !DOCTYPE command is <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN"> (Web pages that use special browser extensions might specify a different document type.) Most browsers don't require the !DOCTYPE statement, and many HTML tutorials don't even discuss the !DOCTYPE. Following the !DOCTYPE statement is the <HTML> tag. The rest of the document is enclosed between the <HTML> tag and a corresponding </HTML> tag at the end of the file. Within the beginning and ending <HTML> tags, the document is divided into the following two sections:
A very simple HTML document is as follows: <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE> Ooh This is Easy </TITLE> </HEAD> <BODY> Easy! </BODY> <HTML> If you save the preceding HTML to a text file and then open the file with a Web browser, Easy! will appear in the browser window. The title bar will include the title Ooh This is Easy (see Figure 17.4). Figure 17.4. A very easy Web page example.
You can spice up the page with additional text and formatting in the body section. The following example adds the <H1> and <H2> tags for headings, the <P> tag for a paragraph, the <B> tag for bold, the <I> tag for italics, and the <FONT> tag for font information. Note that the <FONT> tag includes an attribute. Attributes are parameters enclosed within the tag that provide additional information. See Table 17.3 for other font attributes. <!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE> Ooh This is Easy </TITLE> </HEAD> <BODY> <H1>The Easy and Hard of HTML</H1> <P><U>Webster's Dictionary</U> defines HTML as <I>"a small snail found originally in the Archipelago of Parakeets." I borrow from this theme in my consideration of HTML.</P><H2>HTML is Easy</H2> <P>HTML is easy to learn and use because everyone reacts to it energetically. You can walk into a bar and start speaking HTML, and the man beside you will <B>happily</B> tell you his many accomplishments.</P> <H2>HTML is Hard</H2> <P>HTML is hard because the options are bewildering. You never know when to use <FONT SIZE=1>small text</FONT> and when to use <FONT SIZE=7>big text</FONT>.</P> </BODY> </HTML> The preceding example appears in the browser as shown in Figure 17.5. Figure 17.5. Expanding the easy example.
As you learned earlier in this hour, the hypertext link is a very important element of Web design. A link is a reference to another document or another part of the current document. If the user clicks on the highlighted text of the link, the browser immediately opens the document referenced in the link. The effect is that the user appears to lilt through an endless garden of colorful and informative content. By the way It is occasionally worth remembering that the term browser originally referred to a giraffe or a large dinosaur eating leaves out of the trees. A link appears in the HTML file as a tag. The simplest form of a link uses the <A> tag with the URL of the link destination given as a value for the HREF attribute. For instance, in the preceding example, if you would like the words "Archipelago of Parakeets" to appear as hypertext with a link to a Web site that tells about the archipelago, enclose the words within <A> tags as follows: originally in the <A HREF=http://www.ArchipelagoParakeets.com> Archipelago of Parakeets</A>. I borrow from this theme The versatile HTML format includes many additional options that cannot be included in this brief introduction. You can place a hotspot link inside a picture. You can create your own style sheets with special tags for preformatted paragraph styles. You can structure the Web page with tables, columns, forms, and frames. Or you can add radio buttons, checkboxes, and pull-down menus. In the early days of HTML, designers coded all the HTML directly into their documents using text editors (as described in the preceding examples). Professional Web designers now work with special Web development applications, such as Dreamweaver or FrontPage, that hide the details of HTML and let the designer view the page as it will appear to the user. Static, preformed HTML documents like those described in this section are still widely used, but many Web sites today use Dynamic HTML techniques to generate the Web content at the time of the request. You'll learn more about Dynamic HTML later in this hour.  |
|
|
Source code editor
Website development
