Category list

Quick Reference: Adding Images

In this chapter, you have learned the basics of adding images to your Web pages. Although there is more to learn, this will give you enough to practice with as you become comfortable with HTML. The following table lists some of the markup required to embed and position images on your Web page:

To Do This	Use This
Embed an image	<img src="image.gif" />
Make an image a link	<a href="webpage.htm"><img src="image.gif" />
Make a combined image link and text link	<a href="webpage.htm"><img src="image.gif" />Place Text Here</a>
Provide alternate text	<img src="image.gif" alt="alternate text" />
Specify an image’s height and width	<img src="image.gif" height="#" width="#" /> (# in pixels)
Align an image to the left or right, with text wrapping (Deprecated)	<img src="image.gif" align="left" /> or "right"
Position an image relative to text or another image (Deprecated)	<img src="image.gif" align="top"> or "middle," or "bottom"
Add white space on the sides of an image (Deprecated)	<img src="image.gif" hspace="#"> (# in pixels)
Add white space on an image’s top and bottom	<img src="image.gif" vspace="#" /> (# in pixels)
Use CSS to add a background image (tiled)	<style> body {background-image: (url)image.gif} </style>
Use CSS to add a background watermark	<style> body {background-image: (url)image.gif; background-attachment : fixed}</style>
Use CSS to add a background image down the left side of your page	<style> body {background-image: (url)image.gif; background-repeat : repeat-y; background-position: left}</style>
Use CSS to add a red inset border around your images	<style> img { border-style : inset; border-width : thick; border- color : red} </style>

Chapter 7: Enter the World of XHTML

Overview

How to…

Understand XHTML
Create an XHTML document
Validate your XHTML
Plan, publish, and promote your Web site

In Chapters 1 through 6, you learned enough HTML basics to construct a simple Web site. You have also been introduced to XHTML and its somewhat stricter rules. By now you may be wondering if all you have to do to write in XHTML is to write your HTML markup more carefully . Well, that’s a good start, but there’s a bit more to writing XHTML than that. In this chapter, you will enter the world of XHTML. You will also learn how to plan, publish, and promote your XHTML Web site.

Understand XHTML

As you recall, XHTML was developed because of HTML’s inability to grow and change with the ever-expanding technology of our day. After all, when HTML was first developed, the concept of accessing the Internet by means of your cellular phone was more the stuff of science fiction than science. Because HTML markup is, as it were, set in stone, it does not have the capacity for being adapted on the fly to new, ever-changing technologies. XHTML, on the other hand, can be adapted and changed. As you’ll learn in Chapter 16, even you can adapt XHTML and design your own markup. How is this possible? It is possible because of XHTML’s powerful “parent” language, XML.

XML Means Extensibility

The acronym XML stands for the Extensible Markup Language, a powerful meta -language that is a subset of an even more powerful meta-language called the Standard Generalized Markup Language (SGML) . Just in case you’re wondering, a meta-language is a language that is used to develop or describe other languages. For example, HTML is actually a daughter language (or subset ) of SGML. XML is also a daughter language of SGML, but there’s one big difference between XML and its older sibling HTML: extensibility. HTML was not designed with adaptability in mind. XML, on the other hand, was designed to be a meta-language in its own right. In other words, XML was developed to make it possible for you to create your own markup languages. With XML, instead of being restricted to a fixed set of elements, attributes, and values, you define your own . You’ll learn how to do this in Chapter 16, but for now, it’s important to understand that your personalized markup is defined by means of a Document Type Description (DTD) .

Understand DTDs

If you were working in XML and wanted to use it to develop your own markup language, you would create a DTD (Document Type Description) . This is essentially a “blueprint” that lists all the possible elements, attributes, and values for your new markup language. For example, say you developed several different markup languages with XML. Each language would have its own DTD. Then, when you want to use one of your new languages, you simply include a statement at the top of your document that identifies which language the document conforms to and where to find your “blueprint” (DTD). This enables a browser to properly interpret your “homemade” elements, attributes, and values. This identifying statement is known as a document type declaration or DOCTYPE declaration.

Understand Document Type Declarations

A document type declaration is found at the very beginning of an XML document and functions as a pointer, directing a browser (or other software) to the location of that document’s DTD. That way, the browser can look up the “blueprint,” compare your document to it, and then display your document properly. For example, the document type declaration for an HTML 4.01 document looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">. You don’t often see the HTML Doctype declaration used because Web browsers don’t need it for interpreting HTML pages. However, when a document type declaration is used, it is placed before the opening HTML tag, as in the following code listing:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> (and so on)

Although this strange line might appear to be an element (because of the “less than” and “greater than” symbols enclosing it), it is actually an SGML command. It identifies for a Web browser the DTD that should be used in displaying that particular Web page. Although document type declarations are not often used for conventional HTML pages, if you plan on working with XHTML, you had better get used to them. As you’ll soon see, they are very important.

Sort Out XHTML’s Relationship to HTML and XML

So how do you sort out the differences between SGML, HTML, XHTML, and XML without getting a headache ? It’s really quite simple. SGML is the “source” language for HTML, XHTML, and XML. As for XHTML, it is simply HTML 4.0 reformulated as an XML application. Remember that XML can be used for creating markup languages? What the W3C did was to use XML to “recreate” HTML. This is reflected in a new name XHTML, or Extensible Hypertext Markup Language. On the one hand, XHTML will bring to the Web designer’s arsenal a greatly increased flexibility; on the other hand, it requires a bit more discipline in its use.

XHTML Documents Must Conform to a DTD

The current specification is XHTML 1.1, and it will be covered in Chapter 16. However, the original version of XHTML (and the one still most commonly used) is XHTML 1.0. This specification actually uses three different DTDs: Transitional, Strict, and Frameset.

The Transitional DTD still allows for the use of HTML’s deprecated elements and attributes.
The Strict DTD does not permit the use of any presentational (deprecated) elements or attributes. In other words, you may not use HTML elements and attributes to control the appearance ( color , font size , layout, and so on) of your document. You must use CSS to add “style” to your document.
The Frameset DTD is for use when you are designing frame-based pages.

When you write an XHTML 1.0 page, you need to identify which of the preceding DTDs the document will conform to. You do this by adding the appropriate <!DOCTYPE> command at the beginning of the document. The <!DOCTYPE> declarations for each of the DTDs are as follows :

Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Caution

The <!DOCTYPE> command is case sensitive. Make sure that you type the commands in exactly as you see them here, or your page will not validate. See Chapter 16 for the XHTML 1.1 <!DOCTYPE> command.

XHTML Documents Should Use the XHTML Namespace

Another small change in how an XHTML document is written is found in the opening <html> tag. Although you still use <html> as your root element, you must add a reference that points to the XHTML namespace . If you’re confused about what this term means, think of a namespace as sort of a glossary of names associated with an XML application. That’s a bit of an oversimplification, but it’s all you need to be concerned with at the moment. Because your document is an XHTML document, it must point to the XHTML namespace. You do this by adding an attribute to the opening <html> tag, as in the following code listing:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

xmlns="http://www.w3.org/1999/xhtml"

>

As you’ll see in Chapter 16, it is this ability to identify with a namespace that enables you as a Web designer to extend XHTML by adding your own markup. For now, just remember to add the namespace attribute to your opening <html> tags.

XHTML Documents Must Be Well Formed

Another requirement for writing XHTML documents is that they must be well formed . This is in contrast to HTML, which can be (and often is) written rather haphazardly. Browsers sometimes ignore mistakes in HTML code. You don’t have this luxury with XHTML. Your document must be well formed, which simply means it must contain no errors in syntax. A simple guideline for writing well-formed XHTML is as follows:

All elements (except empty elements) must have opening and closing tags:
```
<element> </element>
```
All elements must be properly nested:
```
<a> <b> </b> </a>
```
Empty elements must be properly closed:
```
<

empty-element

/>
```
All attribute values must be quoted:
```
<element attribute="value">
```
Attributes must always have values:
```
<input checked="checked">
```
Elements and attributes must be written in lowercase:
```
Incorrect: <HTML>, <Html> Correct: <html>
```

XHTML Documents Must Be Valid

An XHTML document must not only be well formed, but must also be valid . What’s the difference? The term “well formed” applies to the document’s grammar or syntax. If an XHTML document is written correctly, according to the rules mentioned in the preceding section, then it is well formed. However, in order to be “valid,” the document must be checked or validated against a DTD. Think of it this way: Suppose you were a counterfeiter and had access to a high quality color printer. You would be able to reproduce $20 bills with a high degree of accuracy. In fact, you could produce bills of such quality that most people could not tell them from the real thing. Those bills would be “well formed.” However, for the bills to have any monetary value, they would also have to be valid. In other words, they would have to pass the test of genuineness. In the case of a $20 bill, it would be validated by the security watermark and other built-in features. Thus, a counterfeit $20 bill can be well formed but not valid. Likewise, an XHTML document can be well formed (syntactically correct), but not valid.

How do you validate your pages? The first step is by including the proper <!DOCTYPE> declaration for the version of XHTML you are using. The second step is to write your pages according to the rules that apply for that DTD. For example, if you decide to use the Strict DTD, be sure that you don’t use any of the deprecated elements or attributes. Otherwise, your document will not validate. This is because those elements and attributes are not recognized in the Strict DTD.

Finally, you will be wise to validate (compare) your page against that DTD. How do you do this? Many HTML editors have built-in validation programs that will point out where your pages need to be changed if you want them to be valid. The W3C has a validation service (http://validator.w3.org/) that checks your pages free of charge. You simply go to the site, enter the URL of the page you want validated into the form, and in a few seconds you will have a generated report showing where your page measures up against the DTD you’ve chosen . Some programs, such the HTML Tidy program, actually make the changes for you. HTML Tidy is freeware and can be downloaded from the W3C’s site at www.w3.org. It is also bundled with the freeware HTML editor HTML-Kit , available at www.chami.com.

Caution

You are not required to validate your pages against a DTD in order to write XHTML. In fact, even if they are not valid, your XHTML pages will still display correctly—for now. However, there are at least two good reasons to take the time to validate your pages. First, it will speed up your learning process. These sites help you find mistakes in your code and learn why your pages are not doing what you want them to. Second, in the future as browsers begin to follow the stricter standards, invalid pages may fail to display at all. That is why it’s a good practice to validate all of your XHTML pages. It’s more work now, but you will save yourself a lot of work in the future.

Project 11: Create and Validate an XHTML Document

Although the idea of well-formed and valid XHTML documents is simple once you’ve had time to think about it, there still can be a rather large intimidation factor. This project is designed to walk you through the process of creating and validating a simple XHTML document. To complete the project, you need Internet access so that you can use the W3C’s free validation service. An alternative is to download HTML Kit from www.chami.com and use HTML Tidy to validate your document. When you are ready, complete the following steps:

Open the first page of your sample Web site, index.htm, and save it as xhtml1.htm .
Add the <!DOCTYPE> declaration for the XHTML Transitional DTD. This should be inserted just before the opening <html> tag.
Modify the opening <html> tag to include the XHTML namespace:
```
<html

xmlns="http://www.w3.org/1999/xhtml"

>
```
Because the W3C’s validator requires that your document provide character encoding (or Unicode) information, add the following <meta> element between the <head> tags:
```
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />
```

Because of the explosive growth of the Internet, it’s a good idea to always provide character-encoding information in your pages. This lets browsers know what character set they need to use in displaying your text. In the preceding code, this is done by using the <meta /> (descriptive) element.

Now save your document and go online to http://validator.w3.org.
Under the Validate Files heading, select the Local File option by entering into the input window the location of the page you just saved, as shown here:
If you don’t want to type the information, click Choose. The Open dialog box pops up, and you can navigate to the proper file folder and click the file you want to validate, as in the illustration that follows:
When the location of the file has been entered into the input window, click Validate File. If your xhtml1.htm file is valid, you will see a window that looks like this:

Note
If your page validates , the W3C provides you with a nice little icon that you can display on that page, identifying it as valid XHTML.

But what if your page is not valid? Then you will see a different window, informing you that the page has not validated and giving you the reasons why. To see what this looks like ( assuming your page validated on the first try), try changing the <!DOCTYPE> declaration for your xhtml1.htm page from the Transitional to the Strict DTD.

Note

You’ll discover that the page does not validate according to the Strict DTD. Why? Because the home page link near the bottom of the page is not nested inside another element. According to the Strict DTD, the < a > element cannot stand on its own. It must be nested in another element (such as < p > , < h1 > , and so on). To bring the page into conformance, just enclose the < a > element inside a set of < p > tags, as in the following: < p >< a href="index.htm" > Home < /a >< /p > .

If you are having difficulty getting the page to validate, try working from the code listing that follows. It validated against the XHTML 1.0 Transitional DTD and, with the correction made in the above Note, against the XHTML 1.0 Strict DTD.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My HTML Reference Guide</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" /> </head> <body> <h1>Pages I've Created</h1> <ul> <li><a href="headings.htm">Headings</a></li> <li><a href="text.htm">Text Elements</a></li> <li><a href="sup.htm">Superscript &amp; Subscript</a></li> <li><a href="del.htm">Deleted Text</a></li> <li><a href="pre.htm">Preformatted Text</a></li> <li><a href="ulist.htm">Unordered List</a></li> <li><a href="ulist2.htm">Multi-level Unordered List</a></li> <li><a href="olist.htm">Ordered List</a></li> <li><a href="olist2.htm">Ordered List with Start Attribute</a></li> <li><a href="olist3.htm">Outline List</a></li> <li><a href="dlist.htm">Definition List</a></li> <li><a href="text-format.htm">Text Formatting</a></li> <li><a href="generic-fonts.htm">Generic Fonts</a></li> <li><a href="font-colors.htm">The Color Property</a></li> <li><a href="16colors.htm">The Sixteen Basic Colors</a></li> <li><a href="css-color.htm">CSS Color</a></li> </ul> <a href="index.htm">Home</a> </body> </html>