PC TRAINING: XHTML

XHTML

XHTML is a markup language for Web pages from theW3C(World Wide Web Consortium). XHTML combines HTMLand XML into a single format (HTML 4.0 and XML 1.0). LikeXML, XHTML can be extended with proprietary tags. Also like XML,XHTML must be coded more rigorously than HTML. Over the years,HTML coders have become sloppy, because Web browser software was originally written to tolerate many variations in HTML coding, but, with XHTML, coders must conform to the XML rules.

In one sentence we can say that XHTML is a superset of HTML, but unlike HTML it is stricter to rules and requires a document to follow XML rules.Whereas HTML is an application of SGML, a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML.

Introduction to XHTML

History of XHTML

HTML abbreviation for HyperText Markup Language. It is the document format used on the Web. Web pages are built with HTML tags (codes) embedded in the text.

HTML defines the page layout, fonts and graphic elements as well as the hypertext links to other documents on the Web. Each link contains the URL, or address, of a Web page residing on the same server or any server worldwide, hence "World Wide" Web.

HTML 2.0 was defined by the Internet Engineering Task Force (IETF) with a basic set of features, including interactive forms capability. Subsequent versions added more features such as blinking text, custom backgrounds and tables of contents. However, each new version requires agreement on the tags used, and browsers must be modified to implement those tags.

HTML is not a programming language

HTML is a markup language (the ML in HTML) that uses a fixed set of markup tags. A markup language can also be thought of as a "presentation language," but it is not a programming language. You cannot "if this-do that" like you can in Java, JavaScript or C++. However, in order to make pages interactive, programming code can be embedded in an HTML page. For example, JavaScript is widely interspersed in Web pages (HTML pages) for that purpose.

HTML was conceived as a simple markup language to render research documents. No one originally envisioned Web pages turning into multimedia extravaganzas. HTMLpages have been reworked, jury-rigged and extended into full-blown applications. As a result, the source code behind today's Web pages is often a hideous concoction of tags and scripting.

Accessing a Web document requires typing in the address, or URL (Uniform Resource Locator), of the home page in your Web browser. The home page is an HTMLdocument, which contains hypertext links to other HTML documents that can be stored on the same server or on a server anywhere in the world.

Origins

In 1980, physicist Tim Berners-Lee, who was an independent contractor at CERN, proposed and prototyped ENQUIRE, a hypertext system for CERN researchers to use to share documents. In 1989, Berners-Lee and CERN data systems engineer Robert Cailliau each submitted separate proposals for an Internet-based hypertext system providing similar functionality.

The following year, they collaborated on a joint proposal, the WorldWideWeb (W3)project, which was accepted by CERN. At the time, HTML was not a specification, but a collection of loosely defined elements to solve an immediate problem: the communication and dissemination of ongoing research between Berners-Lee and his colleagues.

Rather than reusing existing hypertext systems which were too commercial, too platform-specific, or too complicated for authors, Berners-Lee developed his own, relatively simple system. His original browsing software, a client called "WorldWideWeb", interacting with a server called "httpd", was written in November 1990 on a NeXTcube workstation, using the NEXTSTEP development environment.

It tied together his inventions of a document identification system (which later evolved into the URI standard), a protocol (HTTP) for transmitting documents over a TCP/IPnetwork, and a document annotation convention he later referred to as Hypertext Markup Language (HTML).

HTML essentially grafted hypertext capability onto a homegrown SGML-like markup language, and Berners-Lee's software allowed a computer user to view and navigate between HTML documents accessed via the Internet. His solution later combined with the emerging international and public Internet to garner worldwide attention.

The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991. It describes 22 elements comprising the initial, relatively simple design of HTML. Thirteen of these elements still exist in HTML 4.

Berners-Lee considered HTML to be, at the time, an "application" of SGML, but it was not formally defined as such until the mid-1993 publication, by the IETF, of the first proposal for an HTML specification: Berners-Lee and Dan Connolly's "Hypertext Markup Language (HTML)" Internet-Draft, which included an SGML Document Type Definition to define the grammar.

The draft expired after six months, but was notable for its acknowledgment of the NCSAMosaic browser's custom tag for embedding in-line images, reflecting the IETF'sphilosophy of basing standards on successful prototypes.

Similarly, Dave Raggett's competing Internet-Draft, "HTML+ (Hypertext Markup Format)", from late 1993, suggested standardizing already-implemented features like tables and fill-out forms.

HTML is not a computer programming language. It is simply a set of markup codes that structure and style text and graphics appearing on a Web page. Learning HTML is, basically, learning these markup tags and how to use them to style your Web pages.

There certainly are methods available to create Web pages without having to learnHTML. You already may be familiar with Microsoft FrontPage or Macromedia Dreamweaver. These are drag-and-drop, WYSIWYG ("what-you-see-is-what-you-get") Web page editors that produce the underlying HTML codes for you. You can, in fact, make Web pages with these software packages in total ignorance of HTML. Why, then, bother to learn HTML?

If you are a casual or occasional Web page author who maintains a simple, personal Web site then it is probably sufficient to remain in the dark about HTML. A visual, drag-and-drop editor permits you to compose and arrange page content without knowledge of the underlying code. Ignorance is bliss.

As a knowledgeable developer, though, one with professional responsibility for creating and maintaining commercial sites, it is vitally important to know the HTML language. This is the case even if you use visual editors to create pages.

As Web applications become more sophisticated you need to be able to take pages apart and put them back together again at the code level, not just at the content level. You need, in a sense, to be able to raise the hood and tinker with the engine.

It is a common occurence that once students have been exposed to HTML coding they actually come to prefer working at the code level rather than using WYSIWYGauthoring tools. You have more control over page designs and, quite often, you will find it easier to work directly with the code than through the editor software. Hopefully this will be your experience as you learn the HTML language.

Introduction to XHTML

Evolution of XHTML

XHTML abbreviation for EXtensible HyperText Markup Language is a markup language for Web pages from the W3C. XHTML combines HTML and XML into a single format (HTML 4.0 and XML 1.0). Like XML, XHTML can be extended with proprietary tags. Also like XML, XHTML must be coded more rigorously than HTML.

Over the years, HTML coders have become sloppy, because Web browser software was originally written to tolerate many variations in HTML coding. With XHTML, coders must conform to the rules.

There are only a handful of differences between HTML and XHTML. Fortunately, they are all minor, which makes it much easier to convert your website from HTML toXHTML.

XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C recommendation May 31, 2001.

What is XHTML?

Once again, some say it's HTML with XML qualities. Others, like me, say it's XML withHTML written into the Document Type Definition (DTD).

Here's the scoop as I understand it. XML has become the chosen language for the Web's future. At least, that's the feeling I get from reading the pages on the W3C Web site. Obviously, you cannot simply eliminate HTML, so they did what, I think, was a pretty smart thing. They combined them.

I just don't know that I'm overly thrilled with the way they combined them. XHTML is the successor to HTML. As such, many consider XHTML to be the current or latest version of HTML. However, XHTML is a separate recommendation; the W3C continues to recommend the use of XHTML 1.1, XHTML 1.0, and HTML 4.01 for web publishing.

The need for a more strict version of HTML was felt primarily because World Wide Web content now needs to be delivered to many devices (like mobile devices) apart from traditional computers, where extra resources cannot be devoted to support the additional complexity of HTML syntax.

Another goal for XHTML and XML was to reduce the demands on parsers and user-agents in general. With HTML, user-agents increasingly took on the burden of “correcting” errant documents. Instead XML requires user-agents to fail when encountering malformed XML.

This means an XHTML browser can theoretically be faster and made to run more easily on miniaturized devices than a comparable HTML browser. The recommendation for browsers to post an error rather than attempt to render malformed content should help eliminate malformed content. Even when authors do not validate code, and simply test against an XML browser, errors will be revealed.

Evolving HTML Standards

As noted, the World Wide Web Consortium (W3C) maintains standards for Internet technologies, including standards for Web markup languages. The earliest standard forHTML appeared in 1995, followed by versions HTML 3.0, HTML 3.2, and culminating in HTML 4.01 in 1999. Subsequent to this latest HTML standard, however, an extensive reformulation of markup languages occurred.

Evolving HTML versions.

Recent W3C efforts have focused on defining a new XML (eXtensible Markup Language) language for use as a universal markup language, replacing older languages, and with standards for creating future languages for special markup needs.

For instance, versions of XML have been designed for generating Web graphics (VML - Vector Markup Language), for displaying mathematical equations (MathML - Mathematical Markup Language), for authoring interactive audio/video presentations (SMIL - Synchronized Multimedia Integration Language), for digital signature recognition (InkML - Ink Markup Language), and others.

Recent efforts to reformulate HTML as an XML-based language has led to its current incarnation as the eXtensible HyperText Markup Language (XHTML). The initial version,XHTML 1.0, appeared in the year 2000 as a transitional standard that still recognized some of the popular features of HTML. By 2001, however, it had evolved into version XHTML 1.1 and completely abandoned the hold-over features of previous HTMLstandards. The language currently is in revision towards XHTML 2.0.

The various browser products attempt to honor HTML and XHTML standards, some more successfully than others. If you are using current versions of Internet Explorer or Firefox, for example, you have all the capability needed for learning and applying the XHTML language described in these tutorials.

XHTML Coding Standards

These tutorials attempt to strike a balance between strict conformance with XHTML 1.1 (the current standard) and popular HTML hold-over features included in XHTML 1.0. The primary content is based on XHTML 1.1, however, supplementary sections present features from XHTML 1.0 that are still popular and still recognized by modern browsers.

When creating Web pages it is recommended that coding be included to indicate theW3C standard being followed in its coding. For this reason it is recommended that all Web pages include the following initial line of code to indicate that the Web document is, in fact, an XML-based document:

<?xml version="1.0" encoding="UTF-8"?>

XML declaration for Web page.

XHTML 1.1 Conformance

In addition, the Web page should indicate with which set of standards it is in conformance. A Web page denotes its conformance standard with a Document Type Definition (DTD) coded at the top of the page, following the XML declaration. Since the primary conformance standard followed in these tutorials is XHTML 1.1, the conformance DTD is coded as follows.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Document Type Definition (DTD) for XHTML 1.1 conformance.

XHTML 1.0 Conformance

Certain Web page coding features described in these tutorials are based on older coding practices that are still popular and are recognized in most modern browsers. For Web pages containing these features, the XHTML 1.0 standard needs to be applied. There are three versions of this standard. A Web page can be in strict conformance withXHTML 1.0 standards, meaning that coding practices are very similar in restrictions toXHTML 1.1.

A page can be in transitional conformance to permit use of historically common coding practices that are not permitted under the strictest standards. A page can be in frameset conformance to permit subdividing the browser window into separate subwindows (frames) each of which can display different Web pages.

The three conformance DTDs that can be coded for these XHTML 1.0 versions are,

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

XHTML 1.0 conformance standards.

In this tutorial, all pages except as noted are coded in conformance with XHTML 1.1, which is nearly identical to the XHTML 1.0 Strict standards. The latter, therefore, need not be used. For those Web pages that go beyond XHTML 1.1 (and XHTML 1.0 Strict) standards, notice is given about which DTD to apply to the page.

The <html> Root Element

Finally, the root element (the opening tag) of an XHTML page should be an <html> tag indicating the namespace of the applicable standard, that is, the Web location of theXHTML standard being applied to the page. In all cases, the root element is coded as shown in Listing

Listing The <html> root element.

Coding Conformance Standards

In summary, then, any Web page you create should include initial lines of code to indicate the conformance standard applied to the page. Listing gives the Web page layout to use for most pages illustrated in these tutorials, indicating compliance withXHTML 1.1. In this example, additional coding is included to compose a complete Web page to display the formatted line of text shown above in Figure .

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Web Page in XHTML 1.1 Conformance</title>
</head>
<body>

<h2>Format this line of text.</h2>

</body>
</html>

Code to indicate page compliance with XHTML 1.1 standards.

Web pages in these tutorials that are not in strict conformance with XHTML 1.1 standards can use XHTML 1.0 Transitional standards. These pages are prefaced as shown in Listing .

<?xml version="1.0" encoding="UTF-8"?>

<!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" xml:lang="en">
<head>
  <title>Web Page in XHTML 1.0 Transitional Conformance</title>
</head>
<body>

<h2>Format this line of text.</h2>

</body>
</html>

Code to indicate page compliance with XHTML 1.0 Transitional standards. Throughout the tutorials, information is provided on which of the above two standards should be indicated when coding your Web pages.

XHTML Tags Types

XHTML formatting codes, or tags, surround the material to be formatted and are enclosed inside angled brackets ("<" and ">") to identify them as markup instructions. On the basis of these markup tags, the browser displays the page in the specified layout and style. Each Web page is described by its own separate XHTML document containing whatever tags are necessary to structure and style the page according to the design envisioned by the page author.

Various types of XHTML tags are used for different layout and styling purposes. The list below is one way to categorize tags according to their primary usages.

• Document Layout Tags. These tags are used to structure the XHTML document. They organize the information content on a page so that text and graphical elements appear where you want them to appear. These are the tags you use to design the overall physical and visual relationships between page elements.

• Text Formatting Tags. These tags are used to apply font faces, styles, sizes, and colors to the text appearing on the page. They package and decorate the text content of the page.

• List Formatting Tags. Certain tags are used to organize text information into lists. List structures include bulleted lists, numbered lists, and others.

• Graphic Formatting Tags. These tags are used to position, size, and style drawings and pictures that appear on the page.

• Linking Tags. Web pages are hypertext documents meaning there are linkages between them. With the click of a mouse you can jump from one page to another, or from one page to a particular location on another page, immediately. It is not necessary to traverse the pages sequentially. Therefore, certain tags are used to set up these linkages between pages and between different sections of a single page.

• Table Tags. Web pages provide information to visitors; they display data. Often times data need to be organized in tabular form, into rows and columns, for better presentation, readability, and understanding. Table tags permit you to arrange data into tables; they also can be used as structuring devices for laying out the entire content of Web pages.

• Frame Tags. Web pages also can be organized into frames, or into separate windows each containing a different Web page that is accessible at the same time. Frame tags permit this structural option for laying out information on a page.

• Form Tags. Forms are data collection devices. They are used to collect information from visitors in order to capture data for processing or to solicit visitor preferences about content displays. Forms are the mechanisms through which visitors interact with your Web page. A number of different form tags permit various means of user interaction.

• Multimedia Tags. Modern Web pages provide a multimedia experience, presenting audio and video information and entertaiment as well as text and graphic images. Certain tags are used to link to and play audio and video files through special media players that can be embedded on the Web page.

This tutorial is organized around these tag types. Initially, you learn the various ways to arrange and style text for Web page presentation. Then you learn how to display graphic images and how to use text and pictures as links to other Web pages.

Thereafter, you learn special content formatting through use of tables, frames, and forms, followed by integration of multimedia content on the page. In the end, you will learn most of the XHTML tags needed to arrange and style page content to your exacting requirements.

Container and Empty Tags

XHTML tags are special keywords surrounded by "<" and ">" angle brackets. These element "names" indicate the purpose of the tag and direct the browser to treat the enclosed content in a specified fashion. In the example page shown in Listing , the <html> tag surrounds all the content on the page and indicates that this is an HTML document that the browser should treat as such.

That is, the browser should look for XHTML tags and use the enclosed markup specifications to style the information surrounded by the tags. Likewise, <body> tags enclose all page content that is displayed inside the browser window. In conformance with XHTML standards, all keywords are typed in lower-case characters.

Most XHTML tags are coded as pairs of opening and closing tags, called container tags. The opening tag is the keyword itself appearing inside < and > symbols; the closing tag is in the same format with the keyword preceded by a forward slash (/). This pair of container tags encloses the information to which the formatting applies.

Thus, the pair of container tags <html>...</html> encloses the entire HTML document to indicate that everything in between is coded in HTML. In the same way the pair of<body>...</body> container tags encloses all page content that is displayed inside the browser window.

Certain other tags are not container tags; that is, they do not "surround" information to be formatted but are coded as single, stand-alone tags. These empty tags are coded in a special way to conform to XHTML standards. They must include a forward-slash (/)character immediately before the closing angle bracket.

For example, the single tag to display a horizontal line across the page is coded as<hr/> and the single tag to create a line break in a text paragraph is coded as <br/>. This special coding indicates that the tag serves as both the opening and closing tag.

As the various tags are introduced in this tutorial you will quickly learn how to code container tags and empty tags and the variations they permit.

Introduction to XHTML

XHTML vs. HTML

XHTML is not very different from the HTML 4.01 standard. So, bringing your code up to the 4.01 standard is a good start. In addition, you should start NOW to write your HTMLcode in lowercase letters, and NEVER skip ending tags (like </p>).

The Rules

At the moment, the best one can hope to do is to write XHTML documents that are compatible with current browsers. I'll run down a few of the rules for writing in XHTML. If you've already read our XML tutorial, many will be familiar to you.

1. You will use the XML & XHTML declaration statements to start every XHTML page:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

The commands will alert the browser displaying the page that XHTML is the language to render.

2. The head and body tags are now mandatory.

3. Every tag must be closed.

In HTML, you could get away with simply putting a <P> between paragraphs and the browser would render it just fine. If you only had one table on a page, you didn't need the end TD and end TR tags. Under the XHTML DTD, that's no longer true. All tags that require end tags get end tags.

4. Empty tags get a terminating slash.

An empty tag is a tag that doesn't require an end tag. Examples include <BR> and <HR>.
Under the XHTML DTD, empty tags will now carry a space following the tag text and then a terminating slash, like so:

You may have noticed above that I wrote head, body, br, hr, and img in lower case in the XHTML examples. That's because:

5. All tags must be lower case.

This does not apply to attributes, only tags. For example, both of these formats are acceptable under the XHTML DTD:

You may have noticed that I have quotes around all of the attributes. That's because:

6. Attribute quotes are now mandatory.

7. Tags may not nest.

In HTML, this is an acceptable format. It will render:

No more. Now the tags must follow a logical begin and end pattern. They must end at the same level as they are started. This is the proper XHTML method of writing the code above:

Once again, note the lower case tags.

8. Attribute values must be denoted.

Most attributes are done this way. For example, FONT FACE="arial". Notice that "arial" follows the attribute "FACE=". The attribute and equal signs, in some cases, have been eliminated in HTML.

For example:

The word "checked" is a minimized attribute. But under XHTML it is no more a minimized attribute. You must denote every attribute. Here's the correct method of writing what is above under the XHTML DTD:

These don't come up too often. Here are a few examples in HTML format:

In each case, you'll need to set the minimized attribute to one that is denoted. The easy way to remember it is that it always denotes itself: checked="checked" and selected="selected".

9. The <pre> tag cannot contain: img, object, big, small, sub, or sup.

10. You may not have any forms inside of other forms.

11. If your code contains a &, it must be written as &.

12. Any use of CSS should use all lower case lettering.

13. Any use of JavaScript should be done through external JavaScripting.

OK, this is not always true. You can set up a JavaScript within an XHTML page. Here's a look at the format:

I think you'll agree, my statement above, although not totally true, will save you multiple headaches.

14. Instead of you should write comments like<[CDATA[comments ]]>

If you want to write a comment in an XHTML document, you write it as:

<[CDATA[comment goes in here]]>

15. JavaScripts are no longer commented out.

That will throw big errors in some browsers.

XHTML Syntax

The semantics of XHTML elements and their attributes are defined by the current HTML4.01 Specification. XHTML 1.0 specifies three XML document types that correspond to the three DTDs specified in HTML 4.01: Strict, Transitional, and Frameset.

These XHTML DTDs are more restrictive than HTML because XML is more restrictive in its syntax. Table 1 lists the three DTDs and the DOCTYPE tag used to specify each in a Web page.

Table : XHTML Document Type Definitions.

XHTML 1.0 Strict: Use when you're doing all of your formatting in Cascading Style Sheets (CSS), and not using <font> and <table> tags to control how the browser displays your documents.
        <!DOCTYPE html
                PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                "DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional: Use when you need to use presentational markup in your document, so that you don't limit your audience to users with browsers that support CSS.
        <!DOCTYPE html
                PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                "DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset: Use when your documents have frames
        <!DOCTYPE html
                PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
                "DTD/xhtml1-frameset.dtd">

The DOCTYPE tag doesn't affect the page by itself, it just tells the browser how to validate the XHTML code in the document.

A strictly conforming XHTML 1.0 document is restricted to tags and attributes from theXHTML 1.0 namespace. (The Strict DTD moniker shouldn't be confused with 'strictly conforming' documents. Strict DTDs specify a particular format of DTD in HTML 4.01, and strictly conforming means that it fully complies with the XHTML spec.) Such a document must meet some rather exacting requirements:

• The document must validate against one of the three DTDs.
• The root element of the document must be <html>.
• The root element of the document must designate an XHTML 1.0 namespace using the xmlns attribute.
• There must be a DOCTYPE declaration in the document prior to the root element. If present, the public identifier included in the DOCTYPE declaration must reference one of the three required DTDs.

The code in Figure 1, taken from the XHMTL proposed recommendation, is an example of a minimal XHTML 1.0 document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://vlib.org/">vlib.org</a>.</p>
</body>
</html>

Figure : A minimal XHTML 1.0 document, based on the Strict DTD

The spec requires that a strictly conforming document specify the XHTML namespace using the xmlns attribute, defined to be http://www.w3.org/1999/xhtml. Figure shows how the XHTML namespace can be used with another namespace, and Figure shows how the XHTML 1.0 namespace can be incorporated into another XML namespace. Both these examples are from the XHTML specification.

The implications of this kind of flexibility are enormous, letting you build Web documents that take advantage of various features of different namespaces.

Introduction to XHTML

Why XHTML

XHTML documents have a simple, common structure that forms the basis for designing all Web pages. This basic structure of tags is shown in the following listing with associated tags described in the following sections.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>page title goes here</title>
</head>
<body>
  .
  page content goes here
  .
</body>
</html>

A simple Web page template.

As you begin coding an XHTML page you can start with this template. In fact, you may wish to create this document and save it as a template file. Then, when you start a new page, simply open this document, save it under the name of the new page, and continue coding for the particular information to appear on that page.

The Prolog

All XHTML documents should begin with the prolog lines shown in Listing. The first line indicates that this document is based on XML version 1.0. The remaining lines point to the Document Type Definition indicating the W3C coding standard used for the page, in this case XHTML version 1.1.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Web page prolog.

As with any time an irresistible new technology comes along, a Web author has to decide whether to migrate pages from HTML or start over from scratch and take full advantage of XHTML. There are a number of benefits to upgrading as well as some major pitfalls.

Because HTML is a pervasive standard and XML is becoming one, users can view carefully crafted XHTML documents in current versions of many browsers. In fact, a strictly conforming XHTML page is almost a joy to a browser because there isn't all the messy ambiguity that it finds in most Web pages built with HTML. Earlier browsers may choke on new HTML 4.01 tags, but that isn't XHTML's fault.

XHTML supports three main media types supported by most browsers, text/html, text/xml, and application/xml. Any scripting code that uses the HTML or XML document object models will work just fine in the new format.

The biggest time sinks in migrating HTML pages to XHTML will be converting tags and attributes to lower case, and adding quotes to attribute values. The cleaner the HTMLcode, the quicker that you'll be able to convert it to XHTML.

As this new standard sees wider adoption, new and existing Web editors are supportingXHTML and some will automatically convert existing pages. Code translators have long been the holy grail of computer science, but there is a reasonable chance that HTML to XHTML tools will actually work reliably.

This is because most of the work is pretty mechanical: straightening out non-nested tags, embedding script in CDATA, including the DOCTYPE directive, etc. But some sloppy HTML code, acceptable to many old browsers, will translate poorly.

There are various tools listed on the W3C's XHTML Web site, but my favorites so far are HTML Kit and HTML Tidy working together.

Introduction to XHTML

XHTML Tags & CSS Styles

A Web page originates as a standard text file containing the information to be displayed along with formatting instructions for its presentation on the computer screen. These formatting instructions are written in a special markup language, so-called because it is used to "mark up" the information on the page to describe its arrangement and appearance when rendered in a Web browser.

HTML Markup Language

From the beginning, the markup language for Web pages has been the HyperText Markup Language (HTML). It works by surrounding text and graphic content appearing on the page with special codes instructing the browser on how to arrange and display this content. As a very simple example the line of code shown in Listing ,

<h2>Format this line of text.</h2>

HTML code to format a line of text.

surrounds the text string Format this line of text. with the HTML markup codes <h2> and </h2> (heading 2 style) in order to display the text in the style shown in Figure.

Format this line of text.

Browser output of formatted line of text.

These markup codes instruct the browser to format the text by applying sizing and boldness to the characters appearing between them. Markup codes, also called HTMLtags or elements, are always enclosed inside "<" and ">" symbols to set them apart from the text content to which they apply.

Normally, an "opening" tag indicates the beginning point of formatting (<h2> in the above example) and a separate "closing" tag indicates the ending point of formatting (</h2> in the above example). By learning the available HTML tags you can create your own Web pages to present your text and graphics in about any way you please.

Cascading Style Sheets

XHTML tags are identifiers and containers of text and graphic information appearing on a Web page. Their primary use is to describe the structure of that content, to package it for placement on the page. However, most Web pages are more than straight text and in-line images placed there by XHTML tags.

The information on the page has styling applied to make it more attractive and readable. Various type faces, text sizes, colors, and other formatting characteristics make the page more inviting to read and, when used judiciously, can make the information more understandable.

Under previous versions of HTML, most of the styling of page content took place through attributes coded as part of its tags. Attributes provided additional formatting specifications beyond those implied by the tag name itself. For example, font styles could be assigned to text information by surrounding it with a <font> tag containing attributes to set the font face, size, and color: <font face="arial", size="4", color="red">. Various tags supplied various attributes to format their contained content in various ways.

Under current versions of XHTML, tag attributes have all but disappeared, being deprecated (depreciated in use) in favor of Cascading Style Sheets (CSS), or just "style sheets" for short. A style sheet is a set of styling characteristics associated with XHTMLtags.

These styling characteristics are composed of style properties and values, written in the special syntax of style sheets, and assigned to the tags that will inherit these styles. For instance, one way to assign a style sheet to a tag is to include it as a style attribute inside the tag.

<p style="font-family:arial; font-size:14pt; color:red; font-weight:bold"> This is a text paragraph. </p>

Assigning a style sheet to a paragraph.

In this example, a paragraph of text, surrounded by a <p> (paragraph) tag is given an Arial type face of size 14pt (14 points), coloured red, and displayed in bold characters. Four property :value specifications (e.g., font-family:arial) apply these styles. This is an example of including a style sheet as part of the tag to which it applies.

All XHTML tags can be assigned one or more styling characteristics, and there are hundreds of different style properties and values that can be applied. A large part of learning XHTML is in learning these many styling possibilities. Styling categories include:

• Font Styles - for setting font faces, sizes, and weights.

• Text Styles - for setting letter and word spacing, line heights, horizontal and vertical spacing, and indentions.

• Color Styles - to set background and foreground colors.

• Border Styles - to display various borders surrounding text and graphic elements.

• Margin Styles - to assign various margin widths surrounding text and graphic elements.

• Filter Styles - to apply special effects to text and graphic elements.

• Sizing Styles - to set widths and heights for text and graphic containers.

• Positioning Styles - to position page elements at exacting pixel locations on the page.

The World Wide Web Consortium maintains standards for the Cascading Style Sheets language just as it does for the XHTML markup language. The current version of standards followed in this tutorial is CSS Level 2 (CSS2).

The main task in learning XHTML is learning the tags and their styling characteristics which apply browser formatting to whatever page content they enclose. The general practice in this tutorial is to present only those tags and style sheet settings that are essential to the discussion at hand. Additional tags and styling possibilities are introduced as you proceed through the tutorial.

It is worth noting that the examples shown in this tutorial are fairly simple illustrations of tags and styles. The intent is to emphasize the XHTML code and basic styling approaches rather than to produce elaborate page displays. In this way you can focus on the code without being distracted by a great amount of information content. Understand, however, that you can produce quite elaborate page displays by combining the basic set of XHTML and style sheet elements presented here.

Basic Document Layout

Getting started with XHTML

XHTML documents have a simple, common structure that forms the basis for designing all Web pages. This page isn't very fancy but it will familiarize you with the process ofcoding, editing, saving, and retrieving a page for display in your browser. So, begin by opening the Notepad editor and enter the text and code shown in the following listing.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>1st XHTML Compitable web page</title>
</head>
<body>
<![CDATA[ my first XHTML page]]>
<hr />
 <h2>My First XHTML Web Page</h2>
<hr />
</body>
</html>

When entering the text paragraph it is not necessary to type it line for line as in theexample. If your editor permits word wrapping you can take advantage of that; otherwise, and perhaps preferably, you can enter line breaks to maintain a consistent editing format. Remember, the browser ignores any spaces, tabs, and blank lines you enter in the editor, so type the information in your preferred readable manner.

The <html> Tag

The <html> container tag surrounds all XHTML coding in the document. This tag indicates that the enclosed information contains XHTML coding and should be rendered as such in the browser.

In conformance with XHTML standards the opening tag includes a reference to the location namespace of the validation standards to be applied to this document along with attributes that specify the language used, English (en) in this case.

The <head> Tag

The <head> container tag encloses the head section of the XHTML document. The head section supplies a title for the document (see below) along with other information related to formatting and indexing of the document. For present purposes only a title appears in the head section. Other tags that can be included in the head section are discussed as needed.

<head>
<title>page …….. .. </title>
</head> The <head>
section.

The <title> Tag

The <title> container tag gives a title to the document. This tag encloses a string of text that appears in the browser's Title Bar when the page is opened. The <title> tag provides helpful page identification information to the person visiting the various pages of your Web site. Note that <head> and <title> sections are required for conformance with XHTML 1.1 standards.

<title>1st XHTML Compitable web page</title>

The <body> tag

The <body> tag contains the content that we want to display in the web page. All the tags that produces some output/formatting effect/style effect etc are written inside the body tag.

<body>
<hr />
<h2>My First XHTML Web Page</h2>
<hr />
</body>

XHTML Comments

It is usually a good idea to place comments in your Web document to describe its various sections. Comments are general descriptions or explanations of XHTML code. These serve as useful reminders of the purposes or contents of sections of code when you or someone else returns at a later time to edit the document. In the aboveexample, a general comment has been placed at the beginning of the <body> section.

<![CDATA[ my first XHTML page]]>

Comments are coded between a pair of  tags. These tags can enclose a single-line comment as illustrated above, or they can enclose multiple lines of XHTMLcoding. Any code or text appearing between these symbols is ignored by the browser and does not show up on the page.

Besides their use for including comments in a document, comment tags can be used to temporarily suspend browser display of a section of code. This purpose is often useful in "debugging" your page, that is, in trying to discover errors by selectively removing sections of code from display until the problem is isolated.

A second method of commenting a small section of HTML code is by using the exclamation mark (!) within a tag. This symbol can be used to suspend display of an entire tag -- by adding it to the beginning of the tag -- or one of its attributes -- by adding it in front of the attribute. In the following example this symbol is used to remove formatting from the line of text by commenting its surrounding <p> tag.

<!p style="font-family:arial; color="red">
Format this line in red.
<!/p>

Incidentally, the exclamation mark is not a formal, approved comment symbol. Any other character can be used since it simply corrupts the tag name or attribute name, making it meaningless to the browser. An exclamation mark is used here simply for compatibility with the standard comment tag.

Saving and Displaying Your Web Page

After coding the page, save the document so that it can be retrieved by your browser. Where you save the document depends on your development environment. If you are working on a standard destop PC save the document to a diskette or to a folder on your hard drive. Also remember to save the document with the special file extension .htm. Save this current document under the name FirstPage.htm or any other name of your choosing.

Now, open your browser and retrieve the page. You should leave your editor open on the desktop so that it is handy for making corrections or changes to your page. If you had coded your document as in the example above, your Web page should appear in the browser window similar in style to that shown below.

Viewing your page on Firefox

On Apple Safari

Basic Document Layout

Structuring Page Content

XHTML tags have the primary purpose of structuring and arranging text and graphiccontent on a Web page. They are not designed to style or decorate the content, only to arrange it so that information is presented in a visual order for ease of reading and in a logical order for enhanced understanding.

In addition to arranging content on the page you can apply visual styles to it. You can apply different sizes, colors, and font styles to text, and you can size and decorate graphic images. Throughout these tutorials you are introduced to styling methods that add these kinds of visual appeal to text and graphic elements. First, however, it is necessary to become familiar with the basic tags that bring layout order to page content.

Editor versus Browser Displays

Recall that Web page design begins with a standard document setup that gives its overall structure. This page template is reproduced below.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>1st XHTML Compitable web page</title>
</head>
<body>
<![CDATA[ my first XHTML page]]>
<hr />
 <h2>My First XHTML Web Page</h2>
<hr />
</body>
</html>

A Web page template.

Each page you design begins with this coding. You need to code an appropriate title for the page within the <title> tag. This text appears in the browsers Title Bar when you open the page. Then you add information content inside the <body> tag. Only the information appearing in the body of the document shows up in the browser window. It is inside the <body> tag where text and graphic images are placed, surrounded byXHTML tags to order and arrange them.

It is important to understand that no formatting of Web pages takes place except through XHTML tags. To emphasize this point consider the heading and three paragraphs coded in the Notepad editor in Figure. The intent is to display this information in the browser in this same general format.

Web document appearing in the Notepad editor.

A heading appears at the top of the document and all paragraphs are separated from one another by single blank lines. Care has been taken to enter information in theeditor in much the same way it is to appear in the browser. This practice should be followed so that the editor display itself is orderly and readable. However, editor formatting has little to do with how the entered information appears as a Web page.

When this example document is saved as an XHTML file and subsequently opened in the browser it is displayed as shown below.

Unformatted Web page appearing in the browser.

Its appearance is very different from its display in the editor. The reason is, of course, that no XHTML tags appear in the document to guide the browser in laying out the text on the page. Therefore, the browser treats the information as one continuous string of text. All blank spaces and line breaks appearing in the editor are collapsed to single blank spaces separating the words; the result is a single block of text on the page.

Formatted Text Content

It is an easy step to return to the Notepad editor and include some basic XHTML tags to arrange the text for display in the browser

Basic Document Layout

Paragraph & Blockquote tags

Paragraphs

Most Web pages are text documents, and the most common way to arrange text on a Web page is in paragraph layout. For purposes of a Web page, a paragraph is a block of text preceded and followed by a single blank line. A paragraph is aligned at the left margin of the page and is word-wrapped inside the browser window.

The <p> Tag

In order to format a block of text as a paragraph, the <p> (paragraph) tag surrounds the enclosed text. The general format for this tag is given in Figure

In Given Figure General format for <p> tag.

Any amount of text can appear between the opening and closing tags. When displayed in the browser the enclosed text is single spaced and preceded and followed by a single blank line to separate it from surrounding page content.

You can see the effects of <p> tags in the Web page shown previously in Figure which displays text as four separate paragraphs. These tags are added in the editor as shown below.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML Paragraph</title>
 
</head>

<body>
Web Page Layout

<p>A Web page begins with preliminary sections of code that identify it as an
XHTML document. Also included is a title which appears in the browsers Title 
Bar.</p>

<p>All content that appears in the browser window is coded in the body section
of the page. Text information, graphic images, links, and other page content 
are added to the page and are surrounded by XHTML tags to order and structure
them for presentation.</p>

<p>It is important to note that content is arranged on the page only through 
XHTML tags coded in the document. Otherwise, all content runs together as an 
unformatted string of text.</p>

</body>
</html>

A Web page formatted with paragraph tags.

Example running on Safari web browser.

Click here to view the file online.

The text is now easily readable because organization is brought to its information content. Note that back-to-back paragraphs are separated by a single blank line even though each <p> tag itself produces a blank line before and after a paragraph. The browser collapses into a single blank line the one that follows a paragraph and the one that precede the next.

(Note that on this and subsequent pages complete coding for a Web page may not be shown in order to focus on the code being discussed. Still, it is assumed that the code shown is surrounded by the page preliminaries down through the <body> tag and by the closing </body> and </html> tags.)

Block-level and In-line Tags

A <p> tag is known as a block-level tag. It creates a line break and begins displaying its content on a new line in the browser. After its content is displayed, another line break takes place, creating a block of text set off from surrounding content in the browser. All groupings of content on a Web page must appear inside block-level tags.

A block-level tag differs from an in-line tag, which produces no line breaks. Its enclosed content is embedded in-line within the stream of page elements, normally separated from surrounding content by a single blank space. Most XHTML tags are in-line tags.

It is important to remember this difference between block-level and in-line tags. UnderXHTML 1.1 standards all content must be coded inside block-level tags to identify these separate blocks of content that compose the page.

Also, all in-line tags must appear inside block-level tags; that is, in-line content must be placed inside a block of text rather than appear stand-alone outside a block of text. Throughout these tutorials various tags are identified as block-level or in-line tags, and reminders are given of the need always to enclose in-line page elements inside block-level page elements.

Deprecated Tags and Attributes

XHTML is a replacement for the older HTML language. Still, it retains many of the coding features of HTML in order to ease transition between the two. Hold-overs include several tags and tag attributes that can be coded inside of tags to change their default display characteristics. For example, the <p> tag includes the align attribute to control text alignment. By setting this attribute to <p align="center">, for instance, the text on each line of a paragraph is centered rather than aligned at the left margin.

Under XHTML, most tag attributes are being phased out, or deprecated. They are still recognized by browsers for compatibility with HTML, but the recommendation is to refrain from using them. Instead, newer style sheet declarations should be used for the same effects. Still, deprecated attributes are described in these tutorials since you may encounter them on existing Web pages even though most attributes are not valid underXHTML 1.1 standards.

Certain HTML tags are also deprecated under XHTML. Tags that are being phased out are presented since you will likely encounter them in existing pages. These tags may display properly in modern browsers, but newer alternatives should be used in their place.

Deprecated align Attribute

By default, paragraph text displayed in a browser is word wrapped and blocked at the left margin of the page. It is possible, however, to block text at the right margin, to center it, or to justify all lines by expanding them to both margins. These alignment options are specified by coding the align attribute inside a block-level tag. The general format for coding this attribute along with its possible values are:

align="left|center|right|justify"

The keyword align is assigned one of the quoted alignment values. For example, the following code centers the heading of the previous example page and justifies all paragraph lines by expanding them to the right margin. Browser output is shown in Figure.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML Paragraph with Justified alignment </title>
 
</head>

<body>
<p align="justify">A Web page begins with preliminary sections of code 
that identify it as an XHTML document. Also included is a title which 
appears in the browserï¿½s Title Bar.</p>

<p align="justify">All content that appears in the browser window is coded 
in the body section of the page. Text information, graphic images, links,
and other page content are added to the page and are surrounded by XHTML 
tags to order and structure them for presentation.</p>

<p align="justify">It is important to note that content is arranged on the 
page only through XHTML tags coded in the document. Otherwise, all content 
runs together as an unformatted string of text.</p>
</body>
</html>

Web page formatted with aligned paragraphs.

Just be aware that the align attribute is deprecated under current XHTML standards. It is presented here as a quick and easy way to align paragraphs and will serve as a convenient, but temporary, styling method until you learn how to code and integrate style sheets on your Web pages.

The <blockquote> Tag

The <blockquote> tag offers a way to indent a block of text, to offset it from surrounding content for special emphasis as would be done for a quoted citation from which the tag gets its name. This container tag indents its enclosed text a fixed number of pixels (approximately 40 pixels) from the left and right margins. Its enclosed text is word-wrapped and preceded and followed by a blank line. The general format for the <blockquote> tag is shown in Figure.

<blockquote>
<p>text</p>
</blockquote>

General format for <blockquote> tag.

Note that the <blockquote> tag is not considered to be a block-level tag under XHTML1.1 standards, even though it produces line breaks and blank lines before and after its enclosed text. It does not take the place of the block-level <p> tag required to enclose a block of text and set it off from surrounding content. The <blockquote> tag simply surrounds the paragraph block, including its enclosing <p> tag.

In the following example a <blockquote> tag offsets the middle paragraph from surrounding text. Browser output is shown below.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML Blockquote element </title>
 
</head>

<body>
Blockquote example
<p>Here are three paragraphs. This first paragraph is formatted with a 
standard paragraph tag and is blocked at the left margin of the page.</p>

  <blockquote>
  <p>This second paragraph is formatted with a blockquote tag to indent its
  left and right margins approximately 40 pixels from the edges of the page.</p>
  </blockquote>

<p>This final paragraph is coded like the first one. It is enclosed within a 
standard paragraph tag and is blocked at the left margin.</p>

</body>
</html>

A text block formatted with a <blockquote> tag.

Click here to view the example online.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML Blockquote element </title>
 
</head>

<body>
Blockquote example
 <p>Here are five paragraphs. This first paragraph is formatted with a standard
paragraph tag and is blocked at the left margin of the page.</p>

  <blockquote>
  <p>This second paragraph is formatted with a blockquote tag to indent its
  left and right margins approximately 40 pixels from the edges of the page.</p>
  
    <blockquote>
    <p>This paragraph is also surrounded by blockquote tags. It is further 
    indented within the margins produced by its outer blockquote tag.</p>
    </blockquote>
    
  <p>This paragraph is aligned like the second paragraph since it also appears 
  inside the outermost blockquote tag.</p>
  </blockquote>

<p>This fifth paragraph is coded like the first one. It is enclosed within
a standard paragraph tag and blocked at the left margin.</p>

</body>
</html>

Click here to view the example online.

In this example, the two <blockquote> tags are nested; that is, a <blockquote> tag appears inside a <blockquote> tag. The outer <blockquote> tag surrounds and indents its three contained text blocks approximately 40 pixels from the left and right margins of the page. The inner tag indents its enclosed text an additional 40 pixels from the margins established by the outer tag. Any additional nested tags further indent their enclosed text from the previous margins.

When nesting <blockquote> tags inside one another make sure that opening and closing tags are properly paired -- that inner tags are fully closed inside their next outer-most enclosing tags. As in the case with <p> tags, back-to-back <blockquote> tags have their preceding and following blank lines collapsed to a single blank line.

The <blockquote> tag is one method of intenting paragraphs of text. In a later tutorial you will learn style sheet methods to duplicate the effects of the tag and also to have greater control over indention spacing.

Basic Document Layout

Line Breaks <br/>

Coding paragraphs with <p> tags is the most common method of structuring text on aWeb page. Most Web pages are text pages, and paragraphs are convenient and readable methods of text presentation. Other varieties of text structuring, however, are available.

The <br/> Tag

The <br/> (line break) tag causes the browser to end a line of text and continue display on the next line in the browser window. It does not, as in the case of paragraphs, leave blank lines before or after the ended text line. The general format for the break tag is shown in Figure.

<br/>

The <br/> tag is not a container tag; it does not enclose text and it does not have an accompanying closing tag. This empty tag is simply placed within the text wherever a line break should occur. The tag is handy for displaying lists of items, lines of verse, or other groupings of individual, single-spaced text lines. The following code uses line breaks, for example, to end individual lines of verse packaged inside a <blockquote> tag.

Example:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML Line break </title>
 
</head>

<body>
<p>Here is a tale about Mahesh and a   little Dog which followed her 
anywhere and everywhere she went.</p>

  <blockquote>
  <p>Mahesh had a little Dog,<br/>
  Its fleece was white as snow;<br/>
  And everywhere that Mahesh went,<br/>
  The Dog was sure to go.</p>
  </blockquote>
	
<p>Mahesh had an awkward social life. It is awfully difficult to date with sheep
trailing around after you all the time.</p>

</body>
</html>

Click here to view the file online.

The four lines of verse are enclosed inside a blockquoted paragraph to offset and indent them from surrounding paragraphs. Each line of verse appears on a separate text line a single space below the preceding line.

It is important to remember that a <br/> tag is an in-line tag, not a block-level tag; therefore, under XHTML 1.1 standards it cannot appear on a line by itself or as a stand-alone tag. It must be enclosed inside a <p> or other block-level tag as is done in the previous example.

Deprecated <br> Tag

All browsers still recognize the <br> tag, coded without the closing slash required for anXHTML empty tag. Future versions of XHTML will not recognize this tag, so it is best to avoid its use.

Basic Document Layout

Heading

Text appearing on a Web page is displayed in a default font style and size unless specified otherwise.Most browsersdisplay text in the Times New Roman font face, or font family, at approximately 12-point size.

In order to add visual variety to your pages you will likely want to choose other font faces and sizes for different sections of your document. This is a topic that is taken up in more detail later; however, there are simple ways to change text sizes to permit you to add various levels of headings to your pages.

The <hn> (heading) tag is a block-level tag that encloses a string of text for display in one of six heading styles. Its general format is shown below:

<hn>Heading text</hn>

The number n in the tag ranges from 1 (largest) to 6 (smallest). These six heading levels are coded in the following example and displayed in the browser as shown inFigure. A standard paragraph is displayed for comparison.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML Headings Demo</title>
 
</head>

<body>
<h1>XHTML Heading example</h1><br />
<h1>This is Heading Level 1</h1>
<h2>This is Heading Level 2</h2>
<h3>This is Heading Level 3</h3>
<h4>This is Heading Level 4</h4>
<h5>This is Heading Level 5</h5>
<h6>This is Heading Level 6</h6>

<p>This is a normal text paragraph.</p>

</body>
</html>

Output in the browser is shown below:

Click here to view the file online.

Headings are displayed in bold characters in the default font face. They appear on a line by themselves preceded and followed by a single blank line. Thus, the <hn> tag cannot be used to change text sizes in the middle of a line or middle of a paragraph since it forces a line break before and after its enclosed text. It is used for block-level, stand-alone text, most often as content headings to identify and set apart sections of aWeb page.

Deprecated align Attribute

Headings can be aligned to the left (default) or right, or they can be centered on the line by applying the

align="left|center|right"

attribute to the <hn> tag. The following code, for example, centers a heading horizontally between page margins.

<h1 align="center">Centered Heading</h1>

Since align is a deprecated attribute under XHTML standards it should be used only as a temporary method to align headings. Later tutorials cover style sheet standards for aligning text horizontally on a page

Basic Document Layout

Horizontal Rules

The primary way to separate and identify sections of a Web page is by use of major and minor headings coded within <hr> tags. Different sections of a Web page also can be visually separated by displaying horizontal rules between them. This is done with the <hr/> (horizontal rule) block-level tag to draw a separator line across the page. The general format for this tag is shown below.

<hr/>

The <hr/> tag causes a line break with the rule appearing on a line by itself. The default rule is 2 pixels in height and spans the width of the browser window. The rule shown in Figure is produced by the <hr/> tag coded on a line by itself as show inListing.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML Horizontal Rule</title>
 
</head>

<body>
<h2>Horizontal Rules</h2>

<p>A horizontal rule is used to separate content sections of a page. The
following is a default rule.</p>

<hr/>

<p>The rule is 2 pixels in height and spans the width of the browser
window. It is preceded and followed by blank lines.</p>

</body>
</html>

Click here to view the result online.

In a later tutorial you learn how to style a horizontal rule by adjusting its height, width, color, alignment, and display characteristics. For present purposes the default rule can be visually effective in breaking up lengthy spans of text or indicating logical breaks in content.

Deprecated <hr> Tag and Attributes

The <hr> tag (without the closing slash) is still recognized by browsers and produces the same rule as the <hr/> tag. It is not valid under XHTML 1.1 standards. The tag also can include the following attributes to style the rule, attributes which also are recognized in the <hr/> tag but are deprecated.

align="left|center|right"
size="n"
width="n|n%"
noshade
color="color"

The align attribute positions the rule to the left (default), centered, or to the right across the line. The size attribute sets the height of the horizontal rule in pixels. The width attribute sets the rules width in pixels or as a percentage of the window width.

Rules can be displayed as a solid bar by coding noshade (without an associated value) and assigned a color with the color attribute. The color value is given as a color name or hexadecimal value, assignments which are discussed in a later tutorial.

The following rule is given by the code:

Since the <hr> tag has been deprecated under current standards it should not be used. Similar alignment and styling attributes can be assigned to the newer <hr/> tag although they should be avoided in favor of newer styling methods discussed later.

Basic Document Layout

XHTML Lists

List Structures

XHTML provides text structuring in the form of lists. You can produce lists of bulleted items, lists of numbered items, and lists of terms and definitions. The first two lists resemble single-spaced lines of text with the addition of prefixed bullets or numbers. The latter list is similar in display to a series of blockquoted paragraphs.

Unordered Lists

An unordered list is a series of items preceded by bullet characters and set off from surrounding text by blank lines. The list is single spaced and indented from the left margin. An example unordered list appears in the browser as shown in Figure.

• List Item 1
• List Item 2
• List Item 3

Figure. Browser display of an unordered list.

An unordered list is created with the block-level <ul> container tag enclosing listed items identifed with block-level <li> (list item) container tags. The general format for an unordered list is shown below:

<ul>
  <li>list item</li>
  <li>list item</li>
  ...
</ul>

General format for unordered list.

<?xml version="1.0" encoding="UTF-8" ?>
<!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> XHTML list </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h2>XHTML List Demo</h2>
 <hr />
  <ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>
<hr />
 </body>
</html>

Click here to view the result.

Items in the list are single spaced and preceded by a bullet character. If text for a list item is wider than the width of the page it is word wrapped and indented inside the bullet character. Items can be enclosed inside <p> tags -- or <br/> tags can be coded between items -- to increase line spacing between them. The following list, for example, surrounds list items with <p> tags to leave blank lines between entries.Browser output is shown in Figure.

<?xml version="1.0" encoding="UTF-8" ?>
<!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> XHTML list </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h2>XHTML List Demo</h2>
 <hr />
  <ul>
  <li><p>This is the first item in the list. Text following the bullet
  character is word wrapped inside the bullet. Paragraph tags are used to
  leave blank lines between items in the list.</p></li>
  
  <li><p>This is the second item in the list. Text following the bullet
  character is word wrapped inside the bullet. Paragraph tags are used to
  leave blank lines between items in the list.</p></li>
</ul>

<hr />
 </body>
</html>

Click here to view the result.

• This is the first item in the list. Text following the bullet character is word wrapped inside the bullet. Paragraph tags are used to leave blank lines between items in the list.

• This is the second item in the list. Text following the bullet character is word wrapped inside the bullet. Paragraph tags are used to leave blank lines between items in the list.

Nested Unordered Lists

Unordered lists can be nested inside each other. For example, a bulleted list appearing inside a second bulleted list appearing inside a third bulleted list is produced by the following code and is displayed in the browser as shown in Figure.

Note that a nested unordered list is part of the list items of its container list. That is, the <ul>...</ul> tags for the nested list appear inside a pair of <li>...</li> tags of the enclosing list.

<?xml version="1.0" encoding="UTF-8" ?>
<!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> XHTML Nested list </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h2>XHTML Nested List Demo</h2>
 <hr />
 <ul>
  <li>List Item 1</li>
  <li>List Item 2
      <ul>
        <li>List Item 2a</li>
        <li>List Item 2b
            <ul>
              <li>ListItem 2b1</li>
              <li>List Item 2b2</li>
            </ul>
        </li>
      </ul>
  </li>
  <li>List Item 3</li>
</ul>

<hr />
 </body>
</html>

Code for nested unordered lists.

Click here to view the result.

Browser display of nested unordered lists.

Each nested list is further indented inside its container list. Also, different bullet characters are used for nested lists. By default, a disc character marks the outer-most list, a circle marks the next inner-most list, and a square marks the inner list.

Notice that when lists are contained inside other lists that no blank lines surround the interior lists as they do when a single list appears within the normal flow of text on the page.

Deprecated type Attribute

The type="disc|circle|square" attribute can be coded inside the opening <ul> tag in order to specify the style of bullet character to use if different from the default disc character. Current XHTML standards do not promote use of the type attribute and provide other means shown later for specifying bullet characters.

Ordered Lists

An ordered list is a series of items preceded by sequence numbers and set off from surrounding text by single blank lines. By default, the list is numbered with decimal numbers beginning with 1 and numbered consecutively through the last item in the list. The list is single spaced and indented from the left margin in the same way as an unordered list. An example ordered list is shown below :

1. List Item 1
2. List Item 2
3. List Item 3

Browser display of an ordered list.

An ordered list is created with the <ol> container tag enclosing list items identifed with <li> container tags. The general format for coding an ordered list is shown in Figure.

<ol>
  <li>list item</li>
  <li>list item</li>
  ...
</ol>

General format for ordered list.

<?xml version="1.0" encoding="UTF-8" ?>
<!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> XHTML ordered list </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h2>XHTML Ordered List Demo</h2>
 <hr />
 <ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>


<hr />
 </body>
</html>

Code for an ordered list.

Items in the list are single spaced and word-wrapped inside the numbering character. List items can be enclose inside <p> tags or separated by <br/> tags to increase line spacing between items.

Nested Ordered Lists

Ordered lists can be nested inside each other, with subordinate lists indented from the next outer-most list. All nested ordered lists use the same decimal numbering system beginning with decimal 1. The following code, for example, produces the numbered lists shown in Figure.

<?xml version="1.0" encoding="UTF-8" ?>
<!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> XHTML nested ordered list </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h2>XHTML Nested Ordered List Demo</h2>
 <hr />
<ol>
  <li>List Item 1</li>
  <li>List Item 2
      <ol>
        <li>List Item 2.1</li>
        <li>List Item 2.2</li>
      </ol>
  </li>
  <li>List Item 3</li>
</ol>



<hr />
 </body>
</html>

Code for nested ordered lists.

Browser display of nested ordered lists.

Note that when ordered lists are contained inside other ordered lists that no blank lines surround the interior lists as they do when a list appears within the normal flow of page text.

Deprecated type and start Attributes

A type attribute can be coded inside the opening <ol> tag in order to specify one of five different numbering characters. The attribute value can be type="1" for decimal numerals (the default), type="A" for upper-case letters, type="a" for lower-case letters, type="I" for upper-case Roman numerals, and type="i" for lower-case Roman numerals. The tag <ol type="A">, for example, produces the following list of alphabetically ordered items.

A. List Item 1
B. List Item 2
C. List Item 3

You can choose the beginning sequence value of an ordered list by coding the optional start="n" attribute for the <ol> tag. A starting sequence value is needed, for example, when an ordered list is interrupted by other elements on the page.

As shown in the output below two consecutively sequenced lists are separated by a paragraph. The first list begins with "A" and is sequenced through "E" since there are five items in the list. The second list needs to begin its sequence with the sixth letter "F". If a starting value is not specified sequencing begins anew with "A".

This is the beginning of the list:

A. List Item A
B. List Item B
C. List Item C
D. List Item D
E. List Item E

This is a continuation of the list:

F. List Item F
G. List Item G
H. List Item H
I. List Item I
J. List Item J

Code for the above lists is shown below. The first ordered list uses upper-case letters (type="A") beginning with "A" and ending with "E". The second list overrides this default sequencing by specifying start="6" in its opening <ol> tag. Thus, the second list is ordered consecutively from "F" through "J".

<?xml version="1.0" encoding="UTF-8" ?>
<!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> XHTML  ordered list </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h2>XHTML  Ordered List Demo</h2>
 <hr />
<p>This is the beginning of the list:</p>

<ol type="A">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
  <li>List Item D</li>
  <li>List Item E</li>
</ol>

<p>This is a continuation of the list:</p>

<ol type="A" start="6">
  <li>List Item F</li>
  <li>List Item G</li>
  <li>List Item H</li>
  <li>List Item I</li>
  <li>List Item J</li>
</ol>



<hr />
 </body>
</html>

Definition Lists

A definition list is a series of terms and definitions offset from surrounding text by blank lines. The terms in the list are blocked at the left margin; definitions are indented and word wrapped on the following lines. An example definition list is shown in Figure.

Term 1
This is the Term 1 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.

Term 2
This is the Term 2 definition. The definition term appears on a line by itself and is followed by a definition text block. The definition is indented and word wrapped.

Browser display of a definition list.

The general formats for tags used to create definition lists are given in Figure.

<dl>
  <dt>Term 1</dt>
   <dd>Definition text for Term 1</dd>
  <dt>Term 2</dt>
    <dd>Definition text for Term 2</dd>
  ...
</dl>

General formats for definition list tags.

A definition list is enclosed inside <dl> tags and contains one or more <dt> (definition term) tags listing the items to be defined. Each definition term has an associated <dd> (definition description) tag enclosing the definition for the term.

The definition list shown above in Figure is produced with the following code.

<?xml version="1.0" encoding="UTF-8" ?>
<!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> XHTML  Difinition list </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h2>XHTML  Difinition List Demo</h2>
 <hr />
<dl>
  <dt>UNICEF</dt>
    <dd>United Nations Internation Children Education Fund</dd>
  <dt>ADB</dt>
    <dd>Asian Development Bank .</dd>
	
	<dt>ARPANET</dt>
		<dd>Advanced Research and Project Agency Network</dd>
</dl> 




<hr />
 </body>
</html>

Code for a definition list.

When displayed in the browser, items in the list are single spaced with no blank lines appearing between the terms. If you wish to include additional line spacing you can code <p> tags surrounding the definitions or <br/> tags between them.

A definition list, of course, can be used for purposes other than defining terms. Any time you need a list of items (terms), each followed by an indented paragraph (definitions), you can use a definition list.

Basic Document Layout

Linking Pages

The original purpose of the World Wide Web was to provide a mechanism for non-linear access to information. In order to activate this type of retrieval, information is packaged as a set of Web pages; then hypertext links, or hyperlinks, are created to navigate from one page to another in whatever sequence the reader prefers.

In a later tutorial the varieties of page links are discussed more fully. Here you are introduced to the basic concept of linking and how to set up text links for navigation between pages.

Most often a link from one page to another is made by creating a text hot spot on one page that, when clicked with the mouse, opens a second page which replaces the first page in the browser window.

The string of text that is made sensitive to a mouse click can be a single word or several words, usually suggestive of the contents of the destination page. Normally, a second link appears on the linked page for return to the original page. It is consideredpoor Web citizenship to leave visitors at the end of a series of links with no way to get back to the starting page.

The <a> Tag

The most common type of link is a clickable word or phrase that transfers directly to the target page. A text link of this sort is created by surrounding the text string with an <a> tag, also called an anchor tag, specifying the location of the page to which to link. The basic format for coding this tag is shown in Figure.

<a href="url">linking text</a>

General format for <a> tag.

The href (hypertext reference) attribute specifies the URL of the linked page. Linkscan be made to other pages at the local Web site or to pages at remote sites anywhere on the World Wide Web.

If the linked page is in the same location -- in the same directory -- as the linking page, then the URL is simply the page name. This local link is called a relative link since the path to the linked page is relative to the location of the linking page.

When linking to a remote site the URL must be a full Web reference including the"http://" protocol followed by the domain name of the site. This external link is called an absolute link since the path to the linked page is a full Web address.

The <a> tag surrounds a string of text that is to be made click-sensitive and that activates the link. Usually the text is descriptive of the destination link. It can be a single letter, a word, a phrase, or any amount of text that can reasonably serve as a link. When this text is clicked, the linking page is immediately replaced by the linked page in the browser window.

The <a> tag is an in-line tag, meaning that it must appear inside a <p> tag or other block-level tag for compatibility with XHTML 1.1 standards.

Local Links

When creating your own Web site, most of the links will be between your own pages. The easiest way to store these pages for linking is to save them in the same location, that is, in the same disk directory or on the same diskette or storage unit. In this case the URL specified in the <a> tag is simply the name of the page.

In the example in below, there are two Web pages named page1.htm, and page2.htm. The page1.htm page contains text links to the other two pages and is coded as follows.

<?xml version="1.0" encoding="UTF-8" ?>
<!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> XHTML  Hyperlink Demo </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
<h2>Linking Web Pages</h2>
  <hr />

<p>Navigation between pages of a Web site is made possible through hypertext
links. One or more words on a "linking" page are made sensitive to mouse
clicks that take the reader to a different "linked" page. There are two main
reasons for breaking up a topic into separately linked Web pages:</p>

<p>
<a href="pag1.htm">Page1</a><br/> 
<a href="page2.htm">Page 2</a><br/>
</p>

<p>When creating links between Web pages it is important to provide return
links to the linking pages. The page author should not leave readers dangling
at the end of a series of links with no direct way to return to the home page.
</p>


<hr />
 </body>
</html>

Code for linking pages.

Notice the line containing the code

An <a> tag surrounds the string of text "Page 1" to convert it into a hyperlink to open the page1.htm page in the browser window. Only the name of this page is required as the href URL since the linked page appears in the same directory as the Home.htm page from which the link is made. Similar coding links to the page2.htm page. When either of the two links is clicked, the associated page is retrieved and loaded into the browser, replacing the link.htm page.

When either page1.htm or page2.htm is showing in the browser window it is easy to return to the link.htm page by clicking the Back button on the browsers Tool Bar. However, it is a better navigation solution to code your own internal links between pages. That is, both the page1.htm and page2.htm pages should include, as shown here, their own links back to link.htm.

Coding for the page1.htm page is shown below. Here the string of text "Return to Home" is made into a link by surrounding it with an <a> anchor tag. A click on this link reopens the link.htm page in the browser window. Similar coding appears on the Supplement.php page to return to the home page.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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>Page 2 </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body bgcolor="#33CCFF">
  <hr />
  <h3>Page 2</h3>
  <hr />
  <p><a href="link.htm">Return to Home</a></p>
 </body>
</html>

Code for linking back to original page.

Output of the Page1.htm

The manner in which you set up links between your pages is at your discretion. It depends to a large extent on how you subdivide your site into separate pages and the way in which the separate topics relate to one another.

Remote Links

If you know the URL of a Web site anywhere on the World Wide Web you can make a link to that site. This URL is normally in the form

http://domain name

where the http protocol prefixes the site location (domain name). This type of absolute reference takes you to the home page of that site. The following link code, for example, is used to open the home page at www.google.com.

Go to eBIZ home page.

Code and link to an external Web site.

To find out the URL of a Web site simply go there and read the URL that appears in theAddress box of your browser. Copy this address into the href attribute of your <a> tag and add the text to make a clickable link.

The Deprecated target Attribute

By default, linked pages are opened in the same browser window as the linking page, replacing it. When linking to a remote site a risk is that your visitors will navigate the remote site and eventually loose contact with your site.

They can repeatedly click the browsers Back button to get back to your site, but if they have wandered around the remote site to any great extent then backing up to your site may be impractical. You end up losing your visitors to the remote site.

One way around this problem is to always link to remote sites in a separate browser window. It is quite easy to open a page in a different window; just add the attribute target="_blank" to your <a> tag as shown below for the above link to the Google site.

<a href="http://www.google.com" target="_blank">Go to Google</a>

With this technique visitors can browse the remote site as much as they wish in a second browser window, and by closing that window return immediately to your linking page in the original window.

It should be noted that the target attribute is not valid under XHTML 1.1 standards. Its use should be considered a temporary way to open Web pages in a new browser window. Later you are introduced to an alternative method to the target attribute that does not violate XHTML standards.

PC TRAINING

XHTML - PART I

0 comments:

CATEGORIES

POPULAR POSTS

BLOG ARCHIVE

ABOUT ME

Categories

About

Link list 2

Follow us

Link list 3