Starting Your Web Page

Now that you know more about the background
of HTML and the types of elements involved in an HTML document, it’s time to delve into the particulars of each element. This chapter covers more specifics of the basic elements and starts to show how easy it is to manipulate HTML to create impressive documents.
Basic Rules for HTML Code
Creating HTML documents is actually quite easy—HTML documents are simply text files embedded with HTML commands. You can create the documents with any editor capable of exporting raw text. In addition, HTML browsers are very forgiving about white space—additional tabs, line feeds, or spaces don’t matter.
As you create your first few HTML files, it is important to start using some good coding habits, habits that will serve you well as you code more complex pages later on. For example, consider the practices outlined in the following sections.
Use liberal white space
Insert liberal line breaks to separate code sections, and use spaces to indent subsequent elements. Both of these will help you read and understand your code. Consider the following two code samples:

        <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
           “http://www.w3.org/TR/html4/strict.dtd”>

        <html>
        <head>
        <title>The Declaration of Independence</title>
        <meta name=“description” content=“Our Nation’s
        Declaration of Independence”><meta name=“keywords”
        content=“declaration, independence,

C 3H3A P T E R
✦✦✦✦
In This Chapter
Basic Rules for HTML Code
Creating the Basic Structure
Declaring a Document Type
Specifying a Document Title
Providing Information to Search Engines
Setting the Default Path
Creating Automatic Refreshes and Redirects
Page Background Color and Background Images
✦✦✦✦

Part I ✦ Understanding (X)HTML

   revolutionary, war, July, 4, 1776”></head><body><h1>The
   Declaration of Independence</h1><p>IN CONGRESS, July 4,
   1776.</p><p>The unanimous Declaration
   of the thirteen united States of America,</p><p>When in the
   Course of human events, it becomes necessary for one people
   to dissolve the political bands which have connected them
   with another, and to assume among the powers of the earth,
   the separate and equal station to which the Laws of Nature
   and of Nature’s God entitle them, a decent respect to the
   opinions of mankind requires that they should declare the
   causes which impel them to the separation.</p> <p>We hold
   these truths to be self-evident, that all men are

   created equal, that they are endowed by their Creator with
   certain unalienable Rights, that among these are Life,
   Liberty and the pursuit of Happiness. . .

and

   <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
      “http://www.w3.org/TR/html4/strict.dtd”>

   <html><head><title>The Declaration of
   Independence</title><meta name=“description” content=“Our
   Nation’s Declaration of Independence”>
   <meta name=“keywords” content=“declaration, independence,
   revolutionary, war, July, 4, 1776”>
   </head><body>
   <h1>The Declaration of Independence</h1><p>IN CONGRESS, July
   4, 1776.</p>
   <p>The unanimous Declaration of the thirteen united States of
   America,</p><p>When in the Course of human events, it becomes
   necessary for one people to dissolve the political bands
   which have connected them with another, and to assume among
   the powers of the earth, the separate and equal station to
   which the Laws of Nature and of Nature’s God entitle them, a
   decent respect to the opinions of mankind requires that they
   should declare the causes which impel them to the
   separation.</p><p>We hold these truths to be self-evident,
   that all men are created equal, that they are endowed by
   their Creator with certain unalienable Rights, that among
   these are Life, Liberty and the pursuit of Happiness. . .

As you can tell, the second example is much easier to read and, hence, easier to troubleshoot.
Use well-formed HTML
Well-formed HTML means that your documents need to have the following characteristics:
✦ Containa<DOCTYPE>tag.
✦ Elements must be nested, not overlapping. This means that you need to close elements in the opposite order of how they were opened. For example, the

Chapter 3 ✦ Starting Your Web Page

following example is wrong:

     <p>The last word is <b>bold</p></b>

Note how the bold and paragraph tags overlap at the end of the block. Instead, the bold tag should have been closed first, as in the following example:

     <p>The last word is <b>bold</b></p>

✦ Element and attribute names must be in lowercase. XHTML is case-sensitive; the tag <HR> is different from the tag <hr>. All the tags in the XHTML Document Type Definitions (DTDs) are lowercase—so your documents’ tags need to be, as well.
✦ All non-empty elements must be terminated. For example, the following is not allowed:
```
     This is one paragraph<p>This is another paragraph<p>
```
Instead, each open paragraph tag needs to be closed.
✦ All attribute values must be quoted. For example, consider the two following tags:
```
     <table border=0>
```
and
```
     <table border=“0”>
```
The first tag is incorrect because the attribute value is not quoted. The second is correct because the attribute is correctly quoted.
✦ You cannot use minimized attributes, that is, attributes without values. For example, consider the two following tags:
```
     <input type=“checkbox” checked>
```
and
```
     <input type=“checkbox” checked=“checked”>
```
The first tag has a minimized attribute; the checked attribute is named but has no value.
✦ Any empty tag must have a closing tag or the opening tag must end with a slash (/). For example, consider the <hr> tag, which doesn’t have a closing tag. As such, it should always appear with an ending slash, <hr />.
Comment your code
Well-written code should speak for itself. However, there are plenty of instances when including comments in your code is warranted. For example, in Chapters 22 and 23, you will learn how to use nested tables to create complex textual layouts. However, such constructs often result in code such as the following:
```
       </table>
     </table>
```

</table>

Part I ✦ Understanding (X)HTML

Without comments, the nested tables are hard to follow. However, adding a few comments allows you to more easily keep track of the nested elements’ purpose:

            </table> <!-- /Top heading -->
          </table> <!-- /Main body -->

        </table> <!-- /Floating page -->

Creating the Basic Structure
The basic structure for all HTML documents is the same and should include the following minimum elements and tags:
✦ <DOCTYPE>—The declared type of the document
✦ <html>—The main container for HTML pages
✦ <head>—The container for page header information ✦ <title>—The title of the page
✦ <body>—The main body of the page
These elements fit together in the following template format:

        <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
           “http://www.w3.org/TR/html4/strict.dtd”>

        <html>
        <head>

             type=“text/css”>
          <style>

             ... any document specific styles go here ...

          </style>
          <script>

             ... client-side scripts go here ...

          </script>
        </head>

<body>
... body of document goes here, paragraphs modified by block elements, characters, words and sentences modified by in line elements ...
</body>
</html>
The following sections provide more detail on each of the various elements.
Declaring the Document Type
The <DOCTYPE> declaration defines what format your page is in and what standard(s) it follows. This is done by specifying what DTD the document adheres

Chapter 3 ✦ Starting Your Web Page

to. For example, the following <DOCTYPE> definition specifies the strict HTML 4.01 DTD:

   <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
      “http://www.w3.org/TR/html4/strict.dtd”>

Cross- Reference

The format and options of the <DOCTYPE> tag are covered in more detail in Chapter 2. You can find a list of valid, public DTDs on the W3C Web site at: http://www.w3.org/QA/2002/04/valid-dtd-list.html.

This book will cover the strict HTML 4.01 DTD unless otherwise noted.
Specifying the Document Title
The <head> element of an HTML document contains several other elements including the document title. The document title is delimited between <title> tags and can include any character or entity. For example, consider the following <head> section that includes a copyright symbol:

        <title>This Page Copyright &copy; 2003</title>

This title shows in the title bar of Internet Explorer, as shown in Figure 3-1.
Copyright symbol
Figure 3-1: Entities are rendered correctly in document titles.
Although it is useful to have the title of your document in the title bar of the client’s browser, the title is used in several other locations, as well—it is used as the default shortcut/favorite name in most browsers, it is linked to in most search engines, and so on. As such, you should always include a title for your documents, and make it as descriptive (but concise) as possible.

Part I ✦ Understanding (X)HTML

Providing Information to Search Engines

Note

The <head> section of your document can also include <meta> tags. These tags are not rendered as visible text in the document—they are used to pass information and commands to the client browser.
As its name implies, the <meta> tag contains meta information for the document. Meta information is information about the document itself, instead of information about the document’s contents. Most of a document’s meta information is generated by the Web server that delivers the document. However, by using <meta> tags, you can supply different or additional information about the document.
The amount of information you can specify with <meta> tags is quite extensive. If you use the HTTP-EQUIV parameter in the <meta> tag, you can supply or replace HTTP header information. For example, the following <meta> tag defines the content type of the document as HTML with the Latin character set (ISO-8859-1):

   <meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1”>

In addition, you can control some aspects of how the client browser treats the document. You can specify how long the document should be cached (if cached at all), refresh the browser with a different page after a delay, and so forth. For example, the following two <meta> tags tell the browser not to cache the current page (pragma, no-cache) and to refresh the browser window with a different page after 3 seconds (refresh):

   <meta http-equiv=“pragma” content=“no-cache”>
   <meta http-equiv=“refresh”
   content=“3;URL=http://www.example.com/newpage.html”>

For a comprehensive list of HTTP 1.1 headers, see the HTTP 1.1 definition on the W3C Web site: http://www.w3.org/Protocols/rfc2616/rfc2616.html.
Always include at least a minimum amount of information in your documents to aid search engines in correctly categorizing your documents. Two important pieces of meta information are a description of the document and keywords relating to its content. The description and keywords information is provided by the following two <meta> tags:

   <meta name=“description” content=“The latest movie news”>
   <meta name=“keywords” content=“movie, movies, production,

     genre, sci fi, horror, drama, comedy, anima, manga, news,
     chat, bbs, discuss, review, recent”>

Search engines such as Google (www.google.com) will also list the provided description and keywords in the site’s entry.

Chapter 3 ✦ Starting Your Web Page

Setting the Default Path
When defining links and references in your HTML document, be as exact as possible with your references. For example, when referencing a graphic with an <IMG> tag, you should make a habit of including the protocol and the full path to the graphic, as shown in the following line of code:

        <img src=“http://www.example.com/images/sailboat.gif”>

However, it isn’t very practical to type the full path to every local element that is referenced in your document. As such, a document residing on the example.com server could reference the same graphic with the following code:

        <img src=“images/sailboat.gif”>

But, what happens if the document is relocated? The images directory might no longer be a subdirectory of the directory where the document resides. The image might be on a separate server altogether.
To solve these problems, you could use the <base> tag. The <base> tag sets the default document base—that is, the default location for the document. Using the preceding example, a document in the root directory of the example.com server would have a <base> tag similar to the following:

        <base href=“http://www.example.com/document.html”>

Any absolute references in the document (those with full protocol and path) will continue to point to their absolute targets. However, any relative reference (those without full protocol and path) will be referenced against the path in the <base> tag.
Creating Automatic Refreshes and Redirects
Meta tags can also be used to refresh a document’s content or redirect a client browser to another page. Refreshing a document is useful if it includes timely, dynamic data, such as stock prices. Redirection comes in handy when a document moves—you can use a redirect to automatically redirect a visitor to the new document.
To refresh or redirect a document, use the http-equiv “refresh” option in a <meta> tag. This option has the following form:
<meta http-equiv=“refresh” content=“seconds_to_wait; url”>
For example, suppose that a page on your site (example.com) has moved. The page used to be on the root of the server as bio.html, but now the page is in a bio directory as index.html (/bio/index.html). However, you want visitors who previously bookmarked the old page to be able to get to the new page. Placing the following document in the server’s root (as bio.html) would cause visitors to

Part I ✦ Understanding (X)HTML

automatically be redirected to the new page after a three-second wait:

        <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
           “http://www.w3.org/TR/html4/strict.dtd”>

        <html>
        <head>

          <title>My Bio has Moved!</title>
          <meta http-equiv=“pragma” content=“no-cache”>
          <meta http-equiv=“refresh” content=“$3$;

URL= http://www.example.com/bio/index.html”> </head>

        <body>
        <p>My bio has moved. You will be redirected to the new page
        in 3 seconds, or you can click the link below.</p>
        <a href=“http://www.example.com/bio/index.html”>My new
        bio.</a>
        </body>
        </html>

To refresh the current page, simply place its absolute URL in the refresh tag.
Tip

Using the pragma no-cache meta tag along with the refresh tag is always a good idea. This helps keep the browser from caching the document and displaying the cached copy of the document instead of the updated document. Because different browsers treat the no cache pragma differently, it is also a good idea to add an expires meta tag, as shown below:

  <meta http-equiv=“expires” content=“0”>

This tag causes the document to be immediately expired in the cache and, hence, not cached at all.

Page Background Color and Background Images
One of the easiest changes you can affect on your Web pages is to change the background color of your document. Most browsers use a white background, and specifying a different background color or a background image can easily make your document distinct.
Specifying the document background color
If you code your HTML against the transitional format of HTML, you can use the bgcolor attribute in the <body> tag. However, using that attribute is not recommended for the following reasons:
✦ The attribute is not valid for strict HTML and might impair the validation of your document.
✦ If you want to change the background color of your documents, you must change each individual body tag in each document.

Chapter 3 ✦ Starting Your Web Page

A better practice is to use appropriate styles, typically in an external style sheet.
The document background color is set using the background-color property. For example, to set the background color to blue, you would use the following style definition:

       <style>
         body { background-color: blue; }

</style>
Cross-
Reference For more information on styles, refer to Chapters 15 and 16.
Specifying the document background image
Besides setting the background of the document to a solid color, you can also specify an image to use as the document background. As with the background color attribute for the body tag, there is also a background image attribute (background) for the body tag. However, as with the background color attribute, it is not a good idea to use that attribute.
Instead, use the background-image property in the body style, as shown here:
Figure 3-2: The grid in the background of the document is courtesy of an image, grid.jpg.

Part I ✦ Understanding (X)HTML

Note

   <style>
     body { background-image: url(grid.jpg); }

</style>
The effect is shown in Figure 3-2.
When you change the background color to a dark color, or use a dark image, you should also change the text color so it will contrast with the background. For example, the following style sets the body background to black and the body text color to white:

        <style>
          body { background-color: black; color: white; }

</style>

Summary
This chapter described the basic elements you need in all HTML documents. You learned some basic guidelines for coding with HTML and how to add header information to your documents, such as a title and meta information for search engines. You also learned how to set a document’s base path and redirect a user to another page. Lastly, you saw how to quickly make a document distinctive by changing its colors.
The next few chapters cover various formatting elements in more detail.
✦✦✦

HTML Tutorials - Learn HTML

Wednesday, 27 May 2015

Starting Your Web Page

No comments:

Post a Comment