Read an Excerpt

HTML

John Wiley & Sons

Chapter One

Hypertext Markup Language, or HTML, is a markup language that enables you to structure and display content such as text, images, and links in Web pages. HTML is a very fast and efficient method of describing and formatting information that can be easily exchanged with other people. Because HTML was created to be a human-readable programming language, it is relatively easy to learn and does not require any special applications to create: you can design HTML pages in simple text editors, such as Notepad in Windows.

Web Servers and Clients

The World Wide Web consists of computers called Web servers that store Web pages, making them available to other Web servers as well as Web clients. Web client is a term used to describe an application, such as a Web browser, that is capable of viewing Web pages. The Web pages are made of plain-text files that contain HTML code and links to other content, such as images, music, and movies. Web pages are stored (or hosted) on Web servers. When a user enters the address of a page into his or her browser, the HTML file stored at that address transfers the content of the Web page over the Internet to the user's computer. The user's Web browser processes the HTML code and displays the Web page according to instructions found within the HTML code.

Standards

Although HTML was initially created by a fewselect organizations, the increasing popularity of the World Wide Web and HTML made it necessary to create an additional organization to ensure that HTML was written according to a standard; this would make HTML easier to implement, and help guarantee that a Web page would look much the same in all Web browsers. The World Wide Web Consortium (referred to as the W3C for short) is the organization that today oversees the development and standards of many Web-related technologies, including HTML: essentially the W3C decides what code will comprise the HTML specification. You can find more information about the W3C, and HTML, at the World Wide Web Consortium's Web site at w3c.com.

Elements

Web pages created using HTML consist of elements. Elements are the content items such as text, images, and movies that make up a Web page. The job of HTML is to tell Web browsers how to display these elements to the user. Text headings, a table containing lists of information, and an image banner are all examples of elements. Elements can contain other elements; for example, a table may contain elements such as text headings or images.

HTML Tags

HTML tags create the elements that comprise a Web page. For example, the

tag denotes text as a paragraph and the tag indicates an image. Most HTML tags consist of two parts: an opening tag and a closing tag. You create both opening and closing tags in the same way: Each tag starts with the symbol for less than (<) and ends with the symbol for greater than (>). The name of the tag goes between the two brackets. In the closing tag, you precede the name of the tag with a forward slash (/). To create an HTML tag, then, you simply place the name of the tag in both the start and the end tag, and then specify the content of the element between the tags. For example, the name of the paragraph tag is simply p. Therefore, the opening tag of the paragraph tag is

and the closing tag is . The text that will comprise the paragraph must be placed within the opening and starting HTML tags, as in

This is some text. Some HTML tags do not require a closing tag. For example, the horizontal rule tag

Tag Attributes

You can enhance HTML tags with the use of attributes. Attributes define additional parameters and characteristics for the HTML element. Although an HTML tag can create a paragraph of text, you can add attributes to the paragraph tag instructing the Web browser how to display that text. For example, an attribute can indicate how to align the text within that paragraph. Apart from straightforward characteristics such as setting the alignment and the color of an element, you can also use attributes to apply programming code such as JavaScript, or formatting information using Cascading Style Sheets, to the element. Insert attributes into the opening tag of the element; the attribute name is followed by the equal sign (=) and then the value of the attribute, which is enclosed in quotation marks. For example, to instruct the browser to center a paragraph on a Web page, add the align attribute with the value center to the

tag, as in

. You do not need to make any other changes to the content of the element or the closing tag.

The Future of HTML

The latest version of HTML (HTML 4.01) is also the last version of the language. XHTML and Cascading Style Sheets (CSS) are intended to replace HTML. XHTML and CSS separate Web page content from any formatting instructions, making that content easier to manage. Although HTML contains code that describes and formats information, XHTML describes the structure of the content, and Cascading Style Sheets formats the information. This creates smaller XHTML documents that are easier for people to read, and faster for clients such as Web browsers to load and interpret (or parse). Although HTML will be replaced eventually by XHTML and CSS, HTML is still available and likely to remain on the World Wide Web for many years to come.

Introduction to XHTML

Extensible Hypertext Markup Language, or XHTML, is similar to HTML. If you know how to create Web pages using HTML, then you already know most of what you need to know about creating Web pages using XHTML. Although HTML can define both the structure and the appearance of a Web page, XHTML defines the structure of a Web page while relying on other technologies, such as Cascading Style Sheets (CSS), to specify the formatting information. XHTML is a markup language like HTML, but was made to conform to the XML standard.

XML

Extensible Markup Language, or XML, is a markup language that, like HTML, is used to create documents. Many applications and devices use the XML standard to exchange information, and sometimes between quite dissimilar objects - such as a database application and an application running on a mobile phone. XML is a widely used industry standard. XHTML was an attempt to create a language for constructing Web pages that conforms to the standards and principles of XML. You can think of XHTML as an attempt to rewrite the HTML language using XML.

Differences Between HTML and XHTML

There are a number of differences between HTML and XHTML, the most notable being that, unlike HTML, XHTML requires all tags to have a closing tag. Although most HTML tags have a closing tag, some do not, such as the break tag
. In XHTML these tags must have a closing tag. If the tag does not enclose any content, such as the
tag, you can add a forward slash (/) preceded by a space to the opening tag instead of using two tags, as in
. The tag
is the correct XHTML version of the HTML
tag. Although a number of major differences exist between HTML and XHTML, somebody learning XHTML who is already familiar with HTML would immediately notice only a small number of differences. One example is that all tag names are lowercase in XHTML. So, the HTML tag

XHTML Standards

Although XHTML is a single language, it consists of two major standards: XHTML Strict and XHTML Transitional. XHTML Strict is just that: it requires XHTML code to strictly follow the rules of the XML standard. XHTML Transitional is not as strict as XHTML Strict; XHTML Transitional was deliberately made to be less strict to help bridge the gap between the loose, more forgiving HTML standard of yesterday and the stricter, less forgiving XHTML standard of today. XHTML Transitional was made to be just that - transitory - so it is not a good idea to standardize on XHTML Transitional. XHTML Transitional is more like a short-term solution for quickly re-creating existing HTML pages in XHTML until an XHTML Strict version can be made.

Benefits of XHTML

XHTML allows developers who are specialized in creating content to focus solely on what they are good at: creating and compiling content. By using another technology, such as Cascading Style Sheets (CSS), to format the information, experts such as graphic designers and layout artists can focus solely on the appearance of information without getting bogged down in the content and meaning of the information. Separating information from its formatting also allows that information to be more easily accessed on dissimilar devices such as handheld computers, mobile phones, and television set top boxes. For example, you can create a Web page containing a company directory of personnel, and display the same Web page on a computer monitor, a handheld computer, or mobile phone, completely formatted for printing, without having to create multiple Web pages. Although the formatting instructions for the computers and the printer would be different, the underlying information would remain the same.

XHTML is far stricter in its syntax that HTML, which leads to less errors in your code and makes your Web pages accessible to different Web browsers and other Web-based tools, such as search engines. This strictness is necessary to standardize Web pages across the Internet, but it can result in a learning curve for people used to the more forgiving HTML standard.

XHTML retains the best ideas and features of HTML, but has been created so that XHTML can be improved in the future with minimal impact on existing Web pages. Unlike HTML, XHTML is extensible, meaning that it can easily be added to, and that changes to XHTML will not have to wait for Web browser manufacturers to implement the new features of XHTML before the benefits of these features are realized.

Disadvantages of XHTML

Because XHTML is stricter than HTML and requires the use of other technologies such as Cascading Style Sheets (CSS) to create Web pages, creating Web pages using XHTML will initially take more time. XHTML is also less forgiving than HTML when a Web page's code contains errors. Many of today's Web developers use specialized tools to create Web pages. Any of the tools that are more than a couple of years old may not be able to create valid XHTML Web pages without upgrading or replacing the software.

Because XHTML uses CSS to format Web page elements, users must also learn how to implement CSS if they want their Web pages to resemble those created with just HTML.

When to Use XHTML

Generally, if you are creating Web pages that will exist on the Internet for a long period, you should use XHTML to ensure that your Web pages will be compatible with Web browsers of the future. If you are simply creating a list of this week's fixtures for your local sporting club's Web page and do not need the information to be accessible for very long, you can safely use HTML instead of XHTML to structure and format your Web page.

Introduction to Cascading Style Sheets (CSS)

Cascading Style Sheets, or CSS, is a markup language used to specify instructions for displaying XHTML and HTML elements. Unlike HTML and XHTML, CSS is used exclusively for the formatting and display of information. Page background colors, font colors, and colors of hyperlinks on a Web page are the kinds of formatting that CSS controls. For example, you can use CSS to change the color of a paragraph of text and to describe where on the Web page that text is to be placed.

Style Sheet Properties

Style sheets are comprised of style sheet rules that apply to the elements of a Web page. Each style sheet rule consists of a selector and a declaration block. The selector indicates to which part of the Web page the style sheet will apply. For example, if the selector name in the style sheet rules is p, the style sheet rule will apply to all

tags found within the Web page. The declaration block consists of one or more declarations enclosed in curly brackets ({}). The declaration consists of a style sheet property and its value. A colon (:) separates the style sheet property name and the value of the style sheet property. Semicolons (;) separate declarations from each other. You must become familiar with only a few essential properties to effectively use style sheets. For example, the color property defines the color of an element. A simple style sheet rule that defines the color property of a paragraph of text is p {color: blue}.

Internal, External, and Local Style Sheets

There are a number of places where you can define the style sheets for your Web pages. The code for internal (or embedded) style sheets is stored within the code of the Web page that uses the style sheet. The Web browser does not display the style sheet itself; it applies the style sheet information to any elements within the Web page that have been instructed to use that information. External style sheets are style sheets that are saved in a file separate from the Web page code. The Web browser processes the Web page code first, sees from instructions in the Web page code that it needs to access the external style sheet file, and then retrieves and processes the information in the style sheet file. The major benefit of external style sheets is that you can use a single external style sheet to format multiple pages on your Web site. Local (or inline) style sheets consist of style sheet code that is applied to single elements within a Web page. Local style code is actually embedded within the individual tags of the Web page elements to which they apply.

Cascading Style Sheets

Because there are multiple ways of applying style sheet information to an element, a single element within a Web page can use style sheet information from external, internal, and local style sheets. If all of the style sheet properties being applied are different, then all the style sheet properties will be cascaded into one set of style sheet instructions and applied to the single element. This allows the Web developer great flexibility when creating style sheets for Web pages that have many different formatting requirements. For example, if a certain paragraph on a Web page sees a conflicting rule in external, internal, and local style sheets, the three style sheets are applied in a cascading fashion - one after the other. The local style sheet, which is applied last, prevails over the external and internal style sheets and determines the formatting of the element in question. So, if an external style sheet specifies that text on the Web page should be black, an internal style sheet specifies that text should be dark blue, and the local style sheet specifies that text should be white, the text will be white. This cascading effectively enables you to set one global style sheet for the entire Web page and then specify individual exceptions to this rule using internal or local style sheets.

Advantages of CSS

There are many benefits to using CSS to format the information on your Web pages. Style sheets give you enormous control over the appearance of information on your Web pages. You can use style sheets to precisely position elements on a Web page and to apply characteristics such as borders, colors, and backgrounds to individual elements. Using CSS to format the information on your Web pages can save you a large amount of work. You can create one style sheet that will determine the type of formatting used on all the Web pages in a Web site. For example, if you have a Web site that contains hundreds or even thousands of Web pages, you can use a single style sheet to define the background color of all those Web pages instead of coding those formatting instructions into each individual page. Using a single CSS file also saves time when you want to make changes to Web pages that use the CSS file; for example, by changing a few lines of code within a single external style sheet, you can change the background color of all Web pages that use that style sheet.

(Continues...)

---

Excerpted from HTML by Paul Whitehead Excerpted by permission.
All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

---