XHTML stands for eXtensive HyperText Markup Language. It is the successor to the more commonly known HTML. HTML is now depricated (considered outdated; obselete) and will be replaced by XHTML in the future. XHTML is built upon from XML and shares the same rules. If you haven't already, read the XML Tutorial for the syntax of XML documents.
Currently there are 2 XHTML versions: 1.0 and 1.1 (2.0 is currently a working draft). XHTML 1.0 may be served as the text/html mimetype for backwards compatibility with HTML. By using this mimetype, the document is treated as HTML rather than XHTML. But the true mimetype for XHTML is application/xhtml+xml. Depending on the mimetype used, the document is treated differently. If the page is served with the application/xhtml+xml mimetype, then it is treated as XML and must be well-formed. In XHTML 1.1, text/html cannot be used. Another difference between XHTML and HTML is that some tags were dropped in XHTML because their effects are already available by using CSS. And also when served as application/xhtml+xml, some CSS rules are treated differently as some things were revised in CSS 2.0. Also, some javascript methods have become depricated and will not work with XHTML (use the DOM instead, which is also backwards compatible).
Just like with XML files, have your text editor and web browser ready so you can save and refresh toview changes. You can view your pages offline before you put them online. For your main page, name it "index.htm" and put it in the root directory of your site's files (for example, on your hard drive, it may be /webserv/index.htm).
There's two ways to view your pages: locally and through a server. When you view your pages locally (from your own hard drive), your operating system determines the file type by the file extension (htm) and calls your browser when you open the file. When viewing the file from a server, the server tells your browser what kind of file it is (associated mimetype). It can send your XHTML pages as either text/html (compatible with HTML) or application/xhtml+xml. (the true mimetype for XHTML). They will be most likely sent as text/html in order for older browsers such as Internet Explorer to read your pages.
In XHTML, you have several DOCTYPES to choose from. For XHTML 1.0, They are: Frameset, Transitional, and Strict. There's also XHTML 1.1. We'll use XHTML 1.0 Strict since it will be the easiest to maintain and easiest to parse. Start your page out with the following:
<?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">
These will be on the first 2 lines of the page. The next sections won't show these in every step. Their tags go below these.
If you understand everything so far, then you're ready to make your first page. First, we start out with the <html> tag. This is the root tag of the page. Picture it as the edges of a paper. If anything is outside these edges, then they're not on the page.
<html> </html>
The <html> tag has only two allowable child tags. They are the <head> and <body> tags. These two tags make up two sections in the page. The <head> should come first (above the <body> of course).
<html> <head> </head> <body> </body> </html>
The <head> is intended for information about the page and the <body> is intended for the content you can see. Every tag you use will either belong in the <head> or the <body>. Next we have the <title> tag.
<html> <head> <title>The title of the page</title> </head> <body> </body> </html>
You'll never see the tags on the pages you create. With what we worked with so far, your page should still be blank. But now, you'll see the title you gave the page in the title bar of your browser. This title will also represent your page if a visitor adds your page to their bookmarks. If your page has no title, the URL (web address) will be in the title bar instead. It's important that the title accurately represents the page.
Next, you'll be working with text. To write a paragraph, we use the <p> tag inside of the <body>. The text we want to show up on the screen belongs between the starting and ending tags of <p>. If there's too many words to fit on one line, the remaining words will wrap to the next line.
<body> <p>Hello World!</p> </body>
Each <p> tag has blank line before and after it. We can make multiple <p> and they will spaced apart from each other on the page.
<p>Paragraph 1</p> <p>Paragraph 2</p>
Another thing to note when working with text is that spaces, tabs, and line breaks (pressing enter) are all treated as a single space. The following example will create 3 equally spaced paragraphs.
<p>This appears on one line</p> <p>This appears on one line</p> <p>This appears on one line</p> <p>This Appears on one line</p>
The rules mentioned in Tag Organization still apply outside the <p> tags. This means that you can add as many spaces, tabs, and blank lines, between paragraphs and your page will still keep the same formatting.
If you'd like to force a line break in your text, use the <br /> tag (We'll explain the syntax of this tax in the next section). This tag ends the line, forcing all text to wrap to the next line. This tag is only allowed where text is allowed.
<p>Line 1<br />Line 2</p>
So far you should be familiar with the typical opening and closing tags
<tag>Content</tag>
Some tags are called "empty tags." This is because they con't have content, nor do they have an ending tag. The <br /> tag we used in the previous section is an empty tag. The starting tag is also the ending tag. This is why we have the ending slash at the end.
<tag />
Sometimes it's a nice idea to have a heading above a paragraph. To do this, you can use the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> is the largest size. <h6> is the smallest.
<h2>Some heading to get your attention</h2> <p>The full details about it here</p>
In addition to the different size headings, the headings are also bold. Use headings sparingly and only where necessary.
<h1>Very Large heading</h1> <h2>Next largest heading</h2>
It is not necessary to use line breaks at the end of the headings. They do this on their own.
HTML tags alone cannot accomplish everything. Sometimes they need additional information in order to control its content to fit your needs. Here's how it works:
<tag attribute="value">Content</tag>
In the above syntax example, we have a tag called <tag> followed by whitespace. Next, we have the attribute. Attributes always point to a value using an equals (=) sign to point to a value. The value must always be surrounded by quotation marks (" and '). You can use double or single quotes as long as it matches on both sides. When you use attributes in a tag, the closing tag will never change. If you want to use multiple attributes in the same tag, separate them with spaces.
<tag att-1="first" att-2="second">Content</tag>
The example above has 2 attributes. The order that you put the attributes doesn't matter since the tag will use each attribute at the same time. You are not allowed to have two of the same attributes in the same opening tag. Each tag has a set of tags that it is allowed to be a parent of. Likewise, each tag also has a set of allowable attributes. And each attribute has different allowable values. In all three cases, you can never place content that isn't allowed inside the tag, attribute, or value. Allowable attributes in the tag can be optional or required in order for the tag to perform it's duty. Attributes are case sensitive and must always be lowercase.
There are two types of tags. They are classified as block and inline. Block-level tags always take up the entire width of the line it's on. Any tag that comes after it will be forced onto the next line. <p> and the heading tags are both block tags. Because of this rule, two block tags will not display on the same line. They will alway stack themselves up like blocks.
Inline tags and content don't stack themselves up like blocks. Instead, they can be displayed side-by-side until you run out of space on that line. When this happens, the next line will be used, and so on. All inline content must be contained inside a block type tag. This is why text and tags such as <br /> must always be contained inside a block tag such as <p>. Some (but not all) block tags can contain more block tags. But an inline tag must never contain a block tag.
<block> Text <inline>Text</inline> </block>
<p> is a block tag but it cannot contain nested block tags. <p> can only contain inline content (content that wraps). If there's a time when you must nest block tags, use the <div> tag instead. <div> is a multi purpose block tag that you can use for many things. There is also a multi purpose inline tag called <span>. <div> and <span> don't do anything on their own. But you can use them to apply attributes to and modify the content inside them.
<div> Text <span attribute="X">text</span> </div>
For now, all you need to remember is the rules about where block and inline tags are allowed. This way, when we introduce a new tag, we can tell you if it's block or inline and you'll know where you can use it.
Images can make a dull web page more exciting. But beware of the page loading times. To display an image, we use the <img />. This tag is both empty and inline. It requires you to use the src and alt attributes.
<div> <img src="http://mytailssite.com/logo.gif" alt="Logo" /> </div>
We could put the <img /> tag inside <p> as well since it's a block tag. But <div> works just as well if you don't like blank lines that <p> inserts. The required src attribute must point to an URL of an image in order for the image to be displayed on your page. The required alt specifies some text. This text will be displayed if the image cannot be displayed. If the server hosting the image is offline, the URL is incorrect, or the browser cannot display images, then the text inside the alt will be displayed in its place. Be sure to give a descriptive value for it if it has to do with the page's content. You can always put alt="" (no value in the attribute) if you don't want the alt text displayed.
In HTML, you're allowed to type almost anything you want where text is allowed. However, you cannot use the <, >, and & since you use them with tags. You also cannot use the ampersand & because this symbol is reserved for entities. Entities are special codes that you can use to display characters that aren't on your keyboard on the screen. To display an entify, you must type &, followed by the name of the entity, and then a semi colon (;). There are no spaces in between. You must be wondering how you can see me writing <, >, and & throughout the tutorial when I said you couldn't. But here's how I'm doing it:
<p> Type < to display < (less than) <br /> Type > to display > (greater than) <br /> Type & to display & (ampersand) </p>
Due to the nature of HTML and XHTML, any tag you type into the source, whether the browser recognizes it or not, you will not see the tag on the page. And if you type the less than (<), greater than (>) or ampersand (&) on the page in any other way, your page will not display properly. There are no exceptions to this rule. Even if an URL has an &, it has to be changed.
Every character (whether they're on your keyboard, or if they're special characters) has a number. In addition to having a number, special characters have names. This means we can display a special character using it's name or it's number. Here's an example that shows you three ways to write the ampersand:
<p> Here is the entity's name: & <br /> Here is the entity's number in base 10: & <br /> Here is the entity's number in hex: & </p>
To display an entity by it's number, use a pound (#) sign after the ampersand, sign, followed by the number, and ending with a semicolon (;). If the number is in hexadecimal, put an x before the number. A hex editor can display the hex value of a character. Hex is just a different numbering system. You'll only need to display the entities for special characters by names, so you don't need to understand how base 10 and hex work yet. A list of special characters and their entity names will be created in the future.
