This is a short introduction to writing XHTML. First, we will go over HTML (Hypertext Markup Language). What is HTML? It is a set of markup symbols or codes placed in a document to display text and graphics in a Web browser. HTML documents are often referred to as "Webpages". The Web browser retrieves webpages from web servers (the computers on which webpages are stored) and displays the pages on your computer monitor.
HTML Allows you to:
So where does XHTML come in? XHTML is the successor to HTML and combines HTML with XML which is a language designed to extend the power of HTML by separating data (content) from presentation. Therefore XHTML is much more powerful and extensible than HTML.
TIP: A good way to learn is to look at how other people have coded their html pages. To do this in your Web browser, click on the "View" menu and then on "Source". On some browsers, you instead need to click on the "File" menu and then on "View Source".
Today we will go over how to:
The simplest way to create and view a basic web page is to use a text editor (such as NotePad) to create the page and a Web Browser (such as Internet Explorer) to view the page.
Steps:
Every time that you would like to view the file in your browser:
XHTML uses tags to format content displayed on a page. These tags are usually used in pairs and are always in lowercase. They are formatted in the following way:
Opening Tag |
Content |
Closing Tag |
<p> |
This is a paragraph |
</p> |
<strong> |
This text will be bolded |
</strong> |
The document generally starts with a declaration of which version of XHTML being used, and is then followed by an <html> tag followed by <head> and at the very end by </html>. The <html> ... </html> acts like a container for the document. The <head> ... </head> contains the title, and information on style sheets and scripts, while the <body> ... </body> contains the markup with the visible content. Here is a template you can copy and paste into Notepad for creating your own pages:
<!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> [replace with your document's title] </title> </head> <body> [replace with your document's content] </body> </html>
Every HTML document needs a title. Here is what you need to type:
<title>TC-210 In-Class Exercise: My first XHTML document</title>
You can change the text from "TC-210 In-Class Exercise: My first XHTML document" to suit your own needs. The title text is preceded by the start tag <title> and ends with the matching end tag </title>. The title should always be placed at the beginning of your document. Most browsers show the title in the window caption bar.
In HTML there are six levels of headings. H1 is the most important, H2 is slightly less important, and so on down to H6, the least important.
Here is how to add an important heading:
<h1>An important heading</h1>
and here is a slightly less important heading:
<h2>A slightly less important heading</h2>
Each paragraph you write should start with a <p> tag and end with the closing </p> tag. For example:
<p>This is the first paragraph.</p> <p>This is the second paragraph.</p>
You can emphasize one or more words with the <em> tag, for instance:
This is a really <em>interesting</em> topic!
You can also make some words stronger than the others, for example:
This is a really <strong>strong words</strong>!
Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the <img> tag. Let's assume you have an image file called "sample.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high.
<img src="sample.jpg" width="200" height="150" />
The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:
<img src="sample.jpg" width="200" height="150" alt="This is a sample picture" />
The alt attribute is used to give the short description, in this case "This is a sample picture". For complex images, you may need to also give a longer description. Assuming this has been written in the file "sample_description.html", you can add one as follows using the longdesc attribute:
<img src="sample.jpg" width="200" height="150" alt="This is a sample picture" longdesc="sample_description.html" />
You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, and newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files.
Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined.
What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!
Links are defined with the <a> tag. Lets define a link to the page defined in the file "sample_description.html":
This a link to the <a href="sample_description.html">Sample Description Page</a>.
The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.
To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to USP's homepage you need to write:
This is a link to <a href="http://www.usp.edu">USP's Homepage</a>.
You can turn an image into a hypertext link, for example, the following allows you to click on the sample image to get to USP's homepage:
<a href="http://www.usp.edu"><img src="sample.jpg" alt="Go to USP's Homepage"></a>
HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags, for instance:
<ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ul>
The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance:
<ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol>
The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance:
<dl> <dt>the first term</dt> <dd>its definition</dd> <dt>the second term</dt> <dd>its definition</dd> <dt>the third term</dt> <dd>its definition</dd> </dl>
Note that lists can be nested, one within another. For example:
<ol>
<li>the first list item</li>
<li>
the second list item
<ul>
<li>first nested item</li>
<li>second nested item</li>
</ul>
</li>
<li>the third list item</li>
</ol>
You can also make use of paragraphs and headings etc. for longer list items.