Content - XHTML
XHTML Format and guidelines
XHTML is a subset of regular HTML, with some stricter guidelines. It was created because HTML had grown so loose that in order to support this code, browsers had to be unweildly beasts that took up loads of computer memory. As people began to build browsers for PDAs or mobile phones, they found these small machines didn't have enough memory to support all of the errors and unnecesary tags contained in the HTML 4.0 specification.
So, XHTML was created, a markup language that works exactly like HTML, but will also function in many less powerful browsers that cannot support regular HTML. When you code in XHTML, you are ensuring that your work can reach a wider audience.
Let's take another look at that code from the introdution, to get an idea of what XHTML looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>Hello World</title>
</head> <body>
Hello Word! <img src="world.gif" alt="picture of the world" />
</body> </html>
You'll notice some stuff between <>'s, and some sitting on it's own. And when we look at the page
|||SNAPSHOT OF THE PAGE||||
you'll notice that only some of the code shows up. The stuff between the pointy brackets ("carrots" or greater-than/ less-than signs) are called the tags. Tags are the bits we don't see, but which tell the browser how to digest the stuff between the tags.
<tag> this is the text you would see through the browser. </tag>
In XHTML, every single tag needs to be balanced, meaning that if it is opened like this <p> (which opens a new paragraph), we would need to close it at the end </p>. In regular HTML you can get away with forgetting some end-tags, but for your work to validate as XHTML, you need to be sure to close every single tag. Take another look at the document above, every tag has a partner that closes it. Some tags may contain other tags within them, but eventually they all balance out. The <html> is closed at the bottom by a </html>. The <title> closes out with </title> after we've filled in what the title should be.
Can you find any discrepancies? There is one, can you find it?
If you look at the <img> tags you'll notice there is no separate </img>. This is because unlike <title> or <html>, which hold their information between the opening and closing tags, <img> is one of a few tags that are self-contained; all the necessary information is contained within itself. When a tag is self-contained, we can close it within itself by putting the end "/" at the end of the tag. Notice the end of the image tag is <img ... />. There are a few other tags like this, and we'll point them out as we go along.
Before we go into the specifics, let's look a little more at the basic format of XHTML. We've pointed out the pointy brackets - the tags that are always balanced - what are some other common features we see repeating in the code? You may have noticed that within the tags we often have something set = to something else. For instance
<img src="world.gif" alt="picture of the world" />
These are called attributes and values. Exactly what src and world.gif mean isn't important now. We'll cover that shortly. What's important is that you understand the basic rules.
<tag attribute="value">
For instance, <apple color="red">. Now, apple is not a valid XHTML tag, but you get the idea. Attributes and values specify the details of particular tags. In XHTML, you have to be sure to put quotes around every value of an attribute, and make sure that the tags, attributes and values are specified in lowercase. In regular HTML, you can get away with leaving out some quotes and going uppercase, but in XHTML you need to be careful.
Well, I think we've got a good idea of the basic rules for XHTML. Let's start coding.
<!DOCTYPE>
The first thing we have to do is tell the browser what to expect. Is this HTML, XHTML, or maybe just plain text? The doctype is where we tell the browser what the document type is.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
Here we tell it that the Doctype is XHTML, and that it should be applied strictly. Then we tell it where to find the Document Type Description (DTD), which explains how to read XHTML. There are variations for the different types of HTML, and for varying levels of strictness. For instance, setting a document type to be transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
means that the document is XHTML, but that the browser shouldn't react too strictly to invalid code. This is a way of allowing developers to transition into fully strict XHTML.
Don't worry about memorizing all the different document typesre are loads of places on the web where you can copy tham, and most HTML editing applications have a variety built in.
You may have noticed that the !DOCTYPE doesn't obey some of our rules for XHTML: there are capitals, there is no closing tag, there's not even a clear demarcation of what is attribute and what is value. This is because the XHTML hasn't really started yet. At this point, the browser is just finding out what the document is. The XHTML doesn't actually start until we open it with the <html> tag. This allows us to mix several types of code within one document, which will be important later when we look at PHP.
So, let's get into the meat of the XHTML.
<html>
Quite simply, this opens the HTML document, telling the browser that everythign between these tags is HTML. We specify the type of html further with:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
The head is mostly for specifying details the browser needs to render the page properly, but which the user won't actually see. This is where we would specify the style sheets we are using, or link to some scripts. It is where we can specify what keywords this should be logged under in search engines, and point out who the author was. All of this effects the handling of the page, but is invisible to the user, and is stored in <meta> tags. We'll get into that later. Since I'm sure you're anxious to actual create something you can see, we'll dive right into the one section of the head that is immediately visible in a page: the <title>.
<title>
The title is always contained within the head, and in most browsers, whatever you put in the title appears in the top of the browser. Also, whens omeone bookmarks your site, whatever is in your title will be the name of the bookmark in their browser, so be sure to choose a useful title.
<title>Hello World</title>
|||PICTURE OF TITLE IN BROWSER |||
<body> The head, as we said, is mostly for internal information. The <body> is where most of what the user will actually see goes on.
So, while the <head> will only hold a <title> tag, a few <meta> tags, and some links to external scripts of style sheets, the <body> holds just about everything else.
Block and Inline elements
Within the <body> there are two basic types of elements we can use: block-level and inline. Block elements, as the name suggests, are inserted as a chunk into the page, leaving space above and below them. Inline elements can be slipped within these block-level elements with adding additional space. <p> is the most widely used block-level element. It denotes a new paragraph, adding space before and after the tag.
<p>
<p>Here is some text on my site. Here is some text on my site. Here is some text on my site. Here is some text on my site. Here is some text on my site. Here is some text on my site.</p>
<p>Here is some more text on my site. I have put it in a new paragraph. Notice that I have balanced my tags</p>
<p />If I wanted, I could just close my paragraph tag in itself, like we saw with the img tag above.
<a href>
The anchor tag <a>, however, is an inline element. It doesn't add any space. What <a> does is specify a link.
<p>Here is some text. <a href="alink.html">Here is some linked text</a>. The paragraph tag is a block-level element, so it adds space, but the anchor tag is inline, so it doesn't add space.</p>
<a target>
The href specifies where the browser should go if the link is clicked. You can further specify where you want the link to open with the target attribute. The default (no target) will open in the same window. "_blank" will open a new window for the link each time it is clicked. If you give the target a name of your own, it will open in a new window, and any other link targetted to the window will open in that window.
<p /><a href="apage.html">I have not specified a target on this link so the link will open in the same window</a>.
<p /><a href="apage.html" target="_blank">This link will open in a new window</a>. <a href="apage.html" target="_blank">So will this one</a>.
<p /><a href="page1.html" target="mywindow">This link will open in a window named "mywindow."</a> We don't see the name, but <a href="page1.html" target="mywindow">if we open another link with the same target name, it will open in that window</a>.
|||ILLUSTRATION OF NEWWINDOWS|||
<a title>
Another attribute of an anchor tag is "title." Title gives a little more information about the link when it is rolled over, before it is clicked.
<p /><a href="page1.html" target="mywindow" title="this will open in a new window">A link to page 1</a>
||| SNAPSHOT OF TITLE |||
<a name>
The name attribute works the opposite way to the other attributes we have seen. While href links out, name gives an anchor for other links to link to.
<p />Here is some text. Perhaps you would like to skip to the <a href="#para2">second paragraph</a>, because this is not very interesting writing. The <a href="page2.html#para3">third paragraph</a> is on another page. <p /><a name="para2"></a>Here is some more text. This is the second paragraph.
As you can see, we let the broser know that the anchor we want is a name, not a separate page, by preceding it with a #. <a href="#para2"> brings us to the anchor named para2 on the same page. If we precede the # by a page reference, the browser will load that page, and then search for the name following #. So, <a href="page2.html#para3"> brings us to page2.html, and then scrolls down to <a name="para3">.
|||ILLUSTRATION OF NEW PAGE AND SCROLLING DOWN TO NAME #|||
So, now we have text, and hypertext, How about some images!
<img>
The image tag is pretty self explanatory.
<img src="world.gif" alt="a picture of the world" width="10" height="10" />
First, we let the browser knwo that this is an image with <img> then the "src" attribute tells the browser where to find the image. Width and height are not absolutely necessary, but they will make the page load a lot faster, as the browser can build the rest of the page while waiting for the images to load. "alt" specifies the text that will be seen while the image loads, if the image is broken, or when the user rolls over the image. Alt tags also give search engines some information about the image, making it more likely that someone will fidn your site through a search engine. And finally, for blind people, or for people with low bandwidth who need to turn images off, it is very important to let the user know what the image would have been.
<h1><h2><h3>
These specify the level of headings in the text. They default to huge sizes, but when we get into styles in the next chapter, we'll be able to modify the sizes to our liking. Basically, the highest level category gets <h1>, and as we go deeper and deeper down the ladder of importance, the numbers get higher.
For instance:
<h1>Archives</h1> <h2>2002</h2> <h3>January</h3> Some text here about January. <h3>February</h3> Some text here about February. <h3>March</h3> etc... <h2>2001</h2> <h3>January</h3> Some text here about January. etc...
<ul><ol><li>
<h1> and <h2> are a way of showing hierarchy between chunks of text or images on a site. <ul><ol><li> are sued to organize your content into lists. <ul> stands for Unordered List. <ol> stands for Ordered List. And <li> frame each list entry.
For example:
<ul>An UNoredered list of the XHTML tags we have learned so far</ul> <li><html doctype></li> <li><head></li> <li><body></li> <li>etc...</li> </ul>
<ol>An Ordered list of the XHTML tags we have learned so far</ul> <li><html doctype></li> <li><head></li> <li><body></li> <li>etc...</li> </ol>
You can also nest lists within each other.
<ol>XHTML tags <li><html></li> <li><head></li> <li><body></li> <li><p /></li> <li><a ...>
<ul> <li>href</li> <li>target</li> <li>name</li> </ul>
</li> <li><h1></li> <li><h2></li> <li>etc...</li> </ol>
<table>
Tables are another way of organizing content. As you know, tables are made of rows and columns. This is a simple concept, but the way it is applied in HTML makes tables a concept many people initially have some troubles with.
<tr> is used to designate a new row (horizontal) and <td> denotes the columns (vertical) with that row. The trick is to think of the columns as sitting within the rows.
Cups of Kava drunk per day <table>
<tr>
<td>Monday</td> <td>Tuesday</td> <td>Wednesday</td> <td>Thursday</td> <td>Friday</td> <td>Saturday</td> <td>Sunday</td>
</tr> <tr>
<td>2</td> <td>3</td> <td>2</td> <td>6</td> <td>8</td> <td>10</td> <td>0</td>
</tr>
</table>
Colspan
But tables aren't always perfect grids. Sometimes we need one column to span over several other columns. To do this, we use the colspan attribute:
Cups of Kava drunk per day <table>
<tr>
<td colspan="7">January 2002</td>
</tr> <tr>
<td>Monday</td> <td>Tuesday</td> <td>Wednesday</td> <td>Thursday</td> <td>Friday</td> <td>Saturday</td> <td>Sunday</td>
</tr> <tr>
<td>2</td> <td>3</td> <td>2</td> <td>6</td> <td>8</td> <td>10</td> <td>0</td>
</tr>
</table>
The colspan attribute tells the browser hwo many columns this one column should take. For instance, we could break this table up another way.
<table>
<tr>
<td colspan="5">Weekdays</td> <td colspan="2">Weekend</td>
</tr> <tr>
<td>Monday</td> <td>Tuesday</td> <td>Wednesday</td> <td>Thursday</td> <td>Friday</td> <td>Saturday</td> <td>Sunday</td>
</tr> <tr>
<td>2</td> <td>3</td> <td>2</td> <td>6</td> <td>8</td> <td>10</td> <td>0</td>
</tr>
</table>
Rowspan
Sometimes you want a row to span so that it takes up the space of several rows toe the right or left. For this we use the rowspan attribute.
<table>
<tr>
<td rowspan="2">week 1</td>
<td>Monday</td> <td>Tuesday</td> <td>Wednesday</td> <td>Thursday</td> <td>Friday</td> <td>Saturday</td> <td>Sunday</td>
</tr> <tr>
<td>2</td> <td>3</td> <td>2</td> <td>6</td> <td>8</td> <td>10</td> <td>0</td>
</tr> <tr>
<td rowspan="2">week 2</td>
<td>Monday</td> <td>Tuesday</td> <td>Wednesday</td> <td>Thursday</td> <td>Friday</td> <td>Saturday</td> <td>Sunday</td>
</tr> <tr>
<td>3</td> <td>1</td> <td>2</td> <td>5</td> <td>7</td> <td>13</td> <td>0</td>
</tr>
</table>
When HTML first came out, CSS-positioning hadn't yet been created, so people used tables to position elements on the screen, rather than for the use for which they were designed, to organize data in rows and columns. The problem with using tables to position elements is that we lose all the benefits of flexibility and multi-purposing the separation of style content and structure gives us. So, stick to using tables for data organiStyle chapter, you'll learn the benefits of using CSS for all of your positioning.
<div> and <span>
Just as <head> and <body> are built in containers that allow us to organize our code for the browser, <div> and <span> are containers for our own manipulation: containers we can personalize to organize our page as we like. They won't actually 'do' anything until we activate them with styles in the next chapter, but they are good to use to help us organize our code anyway.
For instance, let's say our site has a header, a menu and a body. We could organize our page like this:
<div id="header"> ... </div>
<div id="menu">
<span class="smalltext">...</span>
</div>
<div id="body">
<span class="smalltext">...</span>
</div>
When we add styles and scripting, we can manipulate the content according to which id or class it has. id and class are two ways of specifying content. The basic difference is that a particular id can only be used once per document, while class can be used multiple times. For instance, above we have only one menu, one header, and one body. However, we'll have text we want to be small in many different sections of the site, so we'll use class to define those attributes.
And as you can see, the <span> is inerted within the <div>. Block elements can hold numerous inline elements. However, an inline element can never hold a block-level element. As we learn some more code, we'll see more examples of this.
<meta>
We mentioned meta tags earlier. They are contained in the <head> and give all sort of additional information that the user rarely actually sees, but which help the browser and search engines work more efficiently.
content-type
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
robots
<meta name="robots" content="noindex,nofollow" /> Robots or spiders are scripts that crawl the web, indexing sites for their search engines. If you want to keep your pages private, then set them to "noindex, nofollow". If you'd like the robots to index your page and follow all of the links, then set it to "index,follow".
keywords
<meta name="keywords" content="Web Class, HTML, XHTML, learning to code, hand-coding" />
The keywords you enter here will be used by search engines to help people find related sites.
description
<meta name="description" content="A lesson on hand-coding XHTML" /> Description gives a description that the search engine will oftenb use to describe your site in its search results.
There are tons of other metatags.
Resources
www.webmonkey.com