While the last article was mainly about XML, in this article you’ll actually learn the basics to creating a webpage.
I noted very briefly last time that XHTML has three different flavors, Basic, Transitional and Strict. The only flavor we are going to talk about is XHTML Strict. The Strict specification is designed to totally separate the content from the design. This allows the design to be completely interchangable through “Cascading Style Sheets” (or CSS) without needing to reload the page. This also allows the webpage to provide different style sheets for printing than are used in the browser.
The first step toward creating a web page is to include the XML specification from the last article. This is not required by the XHTML specification, but it is not a bad idea. The second thing is the document type. This tells the web browser what flavor you’re going to be using. If you break from the document type the browser may enter a mode where instead of displaying what it has been told to display, it will attempt to display its best guess. In this case we’ll be saying that we are using the “XHTML 1.0 Strict” specification.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Now that we have document type in there, the rest of the document is going to be exactly like the XML we did before. Instead of having a <pets> tag though, we’re going to be using an <html> tag. The html tag should have a few attributes. The first one is an “xmlns” attribute (short for XML Namespace). This seems sort of redundant, but it tells the browser that all the HTML contained between the html tags are actually XHTML. The second two attributes are to let the browser know both what language the html is in and what language the content is in. After adding the html tag (and closing tag) our document will look like:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
</html>
We’re well on our way to creating our webpage, but there are still a few items that are required by the XHTML strict specification to have a webpage! The first is a head tag. The head tag will contain information about the webpage that isn’t part of the actual content. This includes things like the title and the style information. The second part is the body tag which contains the actual content that is displayed in the browser. The head tag requires a title and the body tag isn’t worth it’s salt unless there’s something in it so we’ll add those items too. Which leads us to:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Tutorial 2a</title>
</head>
<body>
<p>Hello, World.</p>
</body>
</html>
The <p> tag is one that I never explained, but it is very simple. It is a paragraph tag. The text in between the <p> and </p> tag are considered to be complete paragraphs and will be separated from the rest of the text. If you simply hit enter a couple times between paragraphs, the browser will mash all your paragraphs into one big block of text. Now take this code and place it into a text document, saving it with the extension “html”. If you open this file in a web browser you should get something that looks like this.
A fantastic start to a webpage, but normally you will have more than one webpage, so we need to be able to connect them. For this we use an anchor tag. The tag itself uses only the letter “a” and has an “href” attribute to specify where the link goes to. In this case, we’re going to link to our previous page, so we can use a “relative href”. This means that we really only need the page name. If you wanted to link to http://www.example.com, you would have to enter the whole URL including the http://. We’ll save this as a separate file.
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Tutorial 2b</title>
</head>
<body>
<p>Where is the <a href='tut2a.html'>World</a>?</p>
</body>
</html>
This page can be seen here. As you can see, by clicking the linke we are taken back to the last page. If this is not working for you, make sure your new page is saved to the same directory and the href has the name of your last file in it.
The last two things that will be covered in this article are images and headings. There are 6 kinds of headings that you can use, h1 being the largest, h6 being the smallest and the rest falling somewhere in between. Today, we’re just going to use h1. We use it just like any other tag, by putting the text we want as a heading in the middle of it.
The image tag is more complex. It is abbreviated as img and does not have an end tag, instead it requires several attributes. The first is the image’s source, where the image comes from. The second and only other required is the alternate text. This attribute is abbreviated as “alt” and is used when the image cannot be displayed (or if the image needs to be read aloud). Another attribute that is often used is the title text, this is the text that is displayed when you move your mouse over the image. In this case we’re going to use an image hosted by the World Wide Web Consortium which says that our page is 100% XHTML compliant.
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Tutorial 2c</title>
</head>
<body>
<h1>Perhaps we need a title?</h1>
<p>Then there should be some text that goes here to entertain us ^_^</p>
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict"
title="Valid XHTML 1.0 Strict" />
</a>
</p>
</body>
</html>
The completed page is located here. Tomorrow I’ll cover using CSS to style the page.
July 13th, 2008 | XHTML tutorial