HTML – Your First XHTML Page
Hello again. Do you have the necessary programs ?
Okay then, let’s get started creating our first page in XHTML ! As I said before we won’t be using any CSS yet.
Tags & Attributes
Before starting to write our first web page, I need to show you what this famous XHTML language looks like.
For example, to write Welcome to my site !
all you need to do is type : Welcome to my site !
Up to now, it’s not too complicated… but wait, if that was all that was needed it would be too easy, and it wouldn’t be any fun 
Tags
In effect, in an XHTML page, as well as the text, you will find other elements : tags.
A tag starts with <
and ends with >
. For example : <tag>
The tags are invisible to the visitors of the page; they are simply markers to indicate information to browsers. For example, a tag tells the browser that this sentence is the title, that another sentence is a quotation etc…
There are two types of tags : some tags are always in pairs, others are solo.
- Tags in Pairs : These are the most common tags. You write the first tag, then the text, and then you “close” the tag by re-writing it with a slash “/” in front. For example :
<title>Welcome to my site !</title>
The first tag <title> indicates the beginning of the title, and it is closed further on with </title>
The browser understands that what is between <title> and </title> is the title of your web site, and that the title isWelcome to my Site !
- Solo Tags : They are more rare, but they still exist in a page. They are generally used to insert an object into a page. This type of tag always ends with a slash “/”, however this time the slash is at the end of the tag. For example the tag which allows us to insert an image :
<image />
This tag just says that we want to insert an image.
So it is quite easy to see what kind of tag we’re looking at :
- If you see <tag>, it has to be in a pair, and you will find </tag> to end the tag.
- If you see <tag /> it is solo.
Attributes
Attributes are used to give information to the tags. They are used in both types of tags (pairs & solo).
For example, let’s take the solo tag <image /> If we want to insert an image we’ll need to say which image and where the image is. We’ll do this with attributes :
<image source="sun.jpg" />
In the example above the attribute is “source” and its value is “sun.jpg”. This simply means that we want to insert an image called “sun.jpg”.
In the case of tags working in pairs we only need to put the attributes in the opening tag. For example in this quotation by Neil Armstrong from the 21st July 1969 :
<quotation author="Neil Armstrong" date="21/07/1969">
That's one small step for [a] man, one giant leap for mankind.
</quotation>
As you can see we end the tag </quotation> without repeating the attributes.
What You Need To Remember
Right, all I have said there is the only bit of theory that you will find in this lesson. You still don’t know how to make a web page but don’t worry; we’ll start in two minutes.
I had to show you tags before we started so that you could understand what they represented in a web site and wouldn’t pull the following face => 
Before ending this bit of theory, you should know that <image /> & <quotation> don’t really exist. But you will soon start to learn the real names of the tags.
Here are the rules that you will need to remember to create a perfect little web page :
- Tags either exist in pairs (<tag> </tag>) or alone (<tag />)
- The names of the tags and attributes should always be written in small letters (ex : “author, date, quotation”)
- The values of the attributes can contain capital letters (ex: “Neil Armstrong”)
- If tags exist in pairs then the attributes only go in the opening tags.
And now we can finally get started
An XHTML Page
It is now the moment to open your editor (Notepad, Notepad ++, or another), so you can test your page at the same time as me 
Here is the basic code of a page, which will be the starting point of every page we make :
<!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">
<head>
<title>Welcome to my site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Recopy this code in your editor and save the page with the extension .html . For example in Notepad ++, go to the menu File >> Save As, and save it as test.html like in the shot below :
I’ve named my page “test.html”, but you can name yours as you wish.
After that go to the folder where you saved the file. You should be able to see your (x)HTML file :
The icon of your file will change depending on the browser you are using. Personally, I use Mozilla Firefox, so the icon you can see is for Firefox.
With Internet Explorer, the icon is similar but with the blue “e” of IE.
Double click on the file to open it in your browser. Wait for it, your first web page has just opened before your eyes. What can you see ???
Oh, the page is empty ! We had to write all that code just to create…an empty page 
However, no worries. The page isn’t quite as empty as it seems : it contains lots of information for your browser. On top of that the title of your page has already appeared in the top of your browser (look at the top left of your browser : it’s written Welcome to my site !
).
To be able to modify your file you just need to right click on the file then choose “Notepad ++” or “Notepad” or whatever as follows :
A Few Explanations ?
I need to give a few quick explanations on the code I gave you earlier. You need to understand that all this is not simply rubbish & that the code does actually do something !
I’ll write the code again so that you have it straight away :
<!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">
<head>
<title>Welcome to my site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Here are the explications line by line :
- On the first & second lines is the declaration “Doctype”. Normally all this part is on one line. This is quite a peculiar tag & it’s the only one that doesn’t respect the rules I gave you earlier. It lets your browser know that your code is in XHTML & that you’re using the version 1.0 of XHTML (yes, as with everything there is versions !)
Why am I teaching you XHTML version 1.0 ? Because it is one of the most recent versions, so your site will be up to date . However HTML5 is now starting to make its appearance although it won’t be fully usable for a couple of years. -
After that is the tag <html>. This is the main tag that surrounds all of your code. As you can see this tag is only closed right at the end of the document, so there is nothing else after </html>
The tag <html> contains two attributes :- xmlns : this necessary attribute indicates the address needed to decode html. You don’t need to worry about it and can just leave it like that.
- xml:lang : tells the browser & search engines what the language of your sites content is.
- The tag <head> contains information about your website. It is closed further on.
- Inside the tag <head>, you will mainly notice the tag <title> This is an important tag, it contains the title of your web site. Here the title is “Welcome to my site !”, but it is up to you to insert the correct title for your site.
- After is the tag <meta>. There are lots of tags like this, but I will start talking about them later because they’re not indispensable. The only indispensable one is the one I have entered which allows you to enter special characters.
- Inside the tag <head>, you will mainly notice the tag <title> This is an important tag, it contains the title of your web site. Here the title is “Welcome to my site !”, but it is up to you to insert the correct title for your site.
- Finally, after the end of </head> we start a new tag : <body>
It is between <body> & </body> that you will put your page’s content. Therefore we will be spending 99% of our time between these tags. At the moment there isn’t anything between these 2 tags, which explains why the page is empty.
Well, I hope I’ve managed to explain clearly enough what all that means
Once again, it is not indispensable to undertand what all that means. You can just copy that code as a template for each new page
Comments
Before ending this chapter that is quite rich in new knowledge I would like to quickly talk to you about “comments”.
“Comments” are simply information that you write for yourself or other developers. Visitors won’t see your comments & they’re ignored by your browser. You can use them to remind yourself what something does if it’s complicated etc…
A comment is a special tag beginning with <!– and ending with –>
Here’s an example of a comment inserted into our code from earlier :
<!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">
<head>
<title>Welcome to my site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<!-- Your page's content goes here -->
</body>
</html>
Try saving your web page then open it in a browser. There is no difference from the code used earlier. The comments don’t appear at all.
Generally comments aren’t used very often in HTML because it’s not a very complicated language, but I had to show you how to use them so that you wouldn’t be surprised if you came across some.
I will probably use some to explain some of my code in the lessons.
Leave a Reply