Hello World
The tradition when teaching a programming language is to introduce the topic with a simple tutorial showing how to get that language to display the text "Hello World". Well XHTML is a way of marking up text rather than a programming language but creating a page that displays "Hello World" is still probably as good a way as any to introduce the subject.
In this series I am going to show you what the source code looks like, provide a link to a web page that uses that exact code so that you can see what it looks like in your web browser, and then discuss what the newly introduced elements of the XHTML markup language actually do.
Let's start with the code of our first page:
<!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><title>Hello World</title>
</head><body>
<p>Hello World.</p>
</body></html>
Next let's see what the Hello World page looks like in your web browser.
There's not a great deal on the page is there. Most of what we have so far is the code that defines the page as being written in XHTML 1.0 with just enough added to display the text "Hello World" in the title bar of your browser and also in the browser window itself.
XHTML markup puts all of the actual markup commands into containers consisting of one or two tags. Each tag starts ith a less than symbol < and ends with a greater than symbol >. The code that we have so far consists of 12 tags. Apart from the first two tags the remainder make up five containers consisting of a start tag and corresponding end tag.
Let's work our way through the statements to see what they do. Don't worry if the code so far looks complicated because most of what we have so far just needs to be coded exactly as we have it without any changes.
- <?xml version="1.0" encoding="UTF-8"?>
This statement appears first in an XHTML page to define that the page is supposed to be a valid XML document. We don't need to worry about what the code in it means, we just need to include it first in all of our pages.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This statement defines that we are coding our XML document to follow the XHTML 1.0 strict standards. We just need to include this exactly as shown in all of our pages.
- Now we get to the first of the actual containers that we define for our page. The <html xmlns="http://www.w3.org/1999/xhtml"> - </html> container always surrounds all of the content of the web page (apart from the above two tags. The name of this container is html as you can see from what immediately follows the less than symbol that starts the tag. The slash immediately preceding the tag name of the second tag in the container identifies it as the closing thag for the container. The html container has one attribute xmlns which needs to be coded exactly as shown.
- Each web page definition is defined in two parts using the head and body containers. Everything else that is defined for the page will go into one or other of these two containers. The head container is used to supply information about the page while the body container holds the actual page content.
- In this first web page the only content in the head container is the title container. The title container provides a title for our web page that is used by search engines as well as being displayed in the title bar at the top of the browser window itself.
- Inside of the body container is where all of our web page content will go and this is the part of the page that you will be updating the most in the subsequent tutorials. For the purpose of this introduction our page content consists of a paragraph (<p> - </p>) that contains the text "Hello World."
As I said before, most of what we have so far will remain unchanged as we develop our XHTML coding skills. For the most part the changes that we will make will be to change the content of the body container and the page title. Eventually we will return to the head container and look at further uses for that part of the web document.
