You might be a little intimidated by all these acronyms, abbreviations, and specifications-speak. Don’t be. Heck, I had to look most of that stuff up as I was writing this, just to make sure I was up-to-date! In most cases, HTML and XHTML concepts are surprisingly simple after you have the basic sense of the way the markup works.
It may be comforting to keep repeating to yourself that HTML isn’t anywhere near as complex as programming. Whereas programming is the process of creating scripts or applications using complicated computer languages such as C++ or Java, creating Web pages is generally referred to as authoring.
That’s because most of what you’re doing is simply entering text, and then adding codes in and around that text to organize it on the page. From there, you add elements that cause images or multimedia to appear on the page, or elements that make the page look better. That’s what a good portion of this book deals with and it’s all you need to know to put together informative, organized Web pages.
Beyond basic XHTML markup, two other Web publishing concepts are discussed here. The first concept is style sheets, which make Web pages look pretty (or at least different), with a variety of sizes, fonts, colors, and so on. The second concept is scripting, which actually is programming, but on a smaller scale and used in tandem with XHTML markup and style sheets.
While scripting and style sheets can get a little involved, the markup itself is pretty straightforward. Essentially, you type text on a page, and then you add elements to the page to organize it. HTML and XHTML have only two basic types of elements— empty elements and non-empty elements.
Empty elements do something on their own—they add a line to the page, add an image to the page, or cause a multimedia file to be loaded and displayed. One example is a simple element that’s used to create a horizontal line on the page: <hr />
Non-empty elements, also called containers, are used to do something to the text that they surround. For example, if you wanted to strongly emphasize certain text on the page, you could do so with strong tags surrounding the text: This is a <strong>verystrong>
Notice the slash. In both HTML and XHTML, the slash is used to indicate the closing tag of a nonempty element, such as the strong element. In XHTML, it’s also important to put that closing slash in an empty element, such as the horizontal rule tag shown earlier. In older HTML implementations, the trailing slash wasn’t necessary.
HTML and XHTML must be much more complicated than this, right? Otherwise, it’s tough to justify the other hundreds of pages in this book. Well, they are a bit more complicated, but not so much in theory as in practice. A good deal of getting to know HTML or XHTML is understanding the element attributes, which are simply used to fine-tune the way a particular element appears or acts on the page.
For example, consider the basic tag for placing an image on the Web page:
The portion of the tag is really the complete image element, although it wouldn’t be of much use without the src (source) attribute that tells the image element what file to locate. Beyond that attribute are others, such as the alt (alternative text) attribute that offers text that can be displayed when the image can’t be, or the align (alignment) attribute that can be used to align the image, as in the following:
Now you see how elements can get more complicated—they tend to offer a lot of options. If you’re familiar with previous versions of HTML, these lines of code may look slightly different from what you’ve seen. The examples in this book conform to the syntax guidelines for XHTML coding, which include the following:
- XML is case-sensitive, so all elements should be lowercase.
- All elements must have closing tags or trailing slashes, even if they are empty elements.
- All attributes must have quotes around them.
Even if you aren’t used to the HTML of the past, know that XHTML is easy to read and learn, thanks to these new conventions.
Basic markup elements are the first level of complexity in HTML and XHTML. The second level of complexity, particularly with XHTML, comes from the need to use and understand style sheets. Style sheets are how Web pages get some of their personality and, well, style.
You’ll use style sheets to change the fonts, colors, sizes, and placement and positioning of text and other elements on the Web page. This is an important distinction. When you’re using typical XHTML markup to create a Web page, you’re not really altering or determining the exact appearance of the text—at least, not in terms of the font faces, sizes, and other such attributes.
Instead, XHTML markup is used to categorize and arrange text. In the past, HTML and HTML extensions (elements supported by browsers, but not endorsed by the W3C) have made it possible to directly alter the appearance of text or other items on the page, using elements such as the element or attributes such as color and various others.
Although many such pages continue to use those conventions, the transition to XHTML requires that these elements be avoided in favor of style sheets. When using style sheets, instead of directly altering text or other items on the page, portions of the page are labeled and then compared against a style sheet that the Web browser can use to style the page.
The Web browser can also opt not to style the page, as in the case of the more limited browsers built into mobile phones and handheld computers. In that case, the style sheets separate the XHTML code from the styling of the page, making it possible for more devices to access the page and organize it correctly, while using as much of the style information as it can.
For instance, a text-only browser built into a mobile phone may be able to display certain text as a heading and other text as a hyperlink, but may not be able to specify Arial as the font family and 14- point as the font size. When you place those stylespecific commands in a style sheet, the text-only browser is free to ignore them, while still displaying the page and its organizational elements.
The third level of complexity for the Web author is scripting. Today’s browsers support standard scripting languages, which enable you to do quite a bit to make your Web page less static and more exciting and interactive to the user. The possibilities range from something as simple as a rollover effect (when the user points at text in the browser window, it changes the color, size, or some other attribute of the text) to complex applications that can be accessed via a Web browser.
Scripting also works with both XHTML and style sheets to add interactivity to your pages, bringing things together in Dynamic HTML or DHTML. Although XHTML has replaced DHTML as everyone’s favorite Web-related acronym, you’ll see that creating dynamic pages can be useful and entertaining as well.