[Site map] You are here --- > Newbies Paradise > Tutorials > Official > Website > Reading a tutorial

Your first xHTML page

	Author : M@teo21 Creation : : on 01/23/2007 11:13:23 AM Last modification: : on 07/22/2008 02:05:30 PM Rate and comment this tutorial Print this tutorial

All set? Everything needed handy?
Let's move on, we are about to make our first xHTML page! As I mentioned before, no CSS for now.
Here we go!

Chapter Contents :

Tags and attributes
An xHTML page
Comments
Quiz

Tags and attributes

Before starting off with the creation of our first web page, let's see what this famous xHTML language looks like!
For instance, how would we write "Welcome to my website!" in xHTML? Well, you just need to type
"Welcome to my website!".

For now, no big deal... Sure, but if it was just that, it would be too easy and obviously not funny.

Attributes

Attributes give details about a tag, they may apply to both kinds of tags (paired or standalone ones).
For instance, consider the standalone tag "<picture />". Good to know we want a picture here, but we need to specify which one it is. We do that with the appropriate attribute:

Code: Others

1	<picture name="sun.jpg" />

In this case, the attribute is "name" and its value is "sun.jpg". It simply states the name of the picture is "sun.jpg".

With paired tags, attributes are only specified within the opening tag, never in the closing one.
For instance, the following code means the quotation is from Neil Armstrong, on July the 21st, 1969:

Code: Others

1
2
3

<quotation name="Neil Armstrong" date="07/21/1969">
"That's one small step for man, one giant leap for mankind."
</quotation>

As you can see, we just close the tag with "</quotation>" without repeating the attributes (which would be useless).

What you have to remember

Everything said up to this point represents the only pure theory part of this tutorial. You do not know how to create a webpage yet, but no worries, we will cover that part in a couple of minutes.

I just wanted to show you what a tag looks like, because you will have to use them all the time, so you would not be bummed when you see some (a bit like this: o_O

).
Of course, most of the tags I used so far are pure invention: quotation and picture do not exist. But you will have all the time to learn the real names.

Before we close this little chapter, I will give you some simple rules you should keep in mind if you plan to make a perfect little webpage:

Tags exist by pair (<tag> </tag> ). They can be standalone but in this case, it will be mandatory to add a / at the end (ex.: <tag /> ).
Tags' names and attributes are always lower case (ex.: "quotation, author, date").
Attributes' values may have capital letters (ex.: "Neil Armstrong").
If there are attributes in paired tags, they are located within the opening one only (cf: example above).

Alright, let's practice some now!

An xHTML page

It is time to open your editor (Wordpad, Notepad++ or another one), and test with me your first webpage.

Here is the basic code for a webpage, which is going to be our start point for each of our pages:

Code: HTML

<!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 Website!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   </body>
</html>

Copy this code in your editor, and save the page with the .html extension (.htm will also work). For instance with Notepad++, go in the "File / Save" menu, and choose "HTML File (*.html)" down in the "Type" field.

I named my page "test.hmtl", but you can give it any name you want.

Head back to the folder where you saved the page. You should see your (x)HTML file :

The icon of the file may be different, it depends on the web browser you are using.
Personnally, I use Mozilla Firefox, so what you are seeing now is the icon of an HTML file if you have Firefox.
With Internet Explorer, the icon is quite similar, but instead you will see the blue "e" of Internet Explorer.

Double-click the icon in order to open it in your browser. Suspense, your first Web page is opening for the first time in front of your eyes. And what do you see???

Yes, the page is blank! We had to use all this code to make... a blank page!

But do not worry, this page is not as empty as you would think: it contains tons of information for your navigator. Moreover, the title of the page is already displayed in the title bar of the window (I am not kidding! Just look on the top left corner of the window: "Welcome to my Website!").

If you like, you can watch how I created the xHTML file and tested it in this video:

Save and test your first Web page (873 Ko)

Notice that once your xHTML file is created, you can always reopen it by right-clicking the icon and clicking "Notepad++" like that :

Some explanation?

I have to give you a few explanation about the above piece of code. I want you to understand that all of this is not gibberish and it is really something useful!

I have copied this code again so you have it in front of your eyes (it is the same as before, no differences):

Code: HTML

<!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 Website!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   </body>
</html>

Here are the explanations line by line:

On the very first line you should see the "Doctype" declaration. It is a pretty peculiar tag, and is the only one which does not comply to the rules I talked about previously. Actually, this tag tells your browser that what you are doing is an xHTML page, and that you are using the version 1.0 of the xHTML language (yes, just like programs there are versions!). Why do I teach you xHTML 1.0? Because it is one of the most recent versions, thus your site will be up to date.
Then comes the <html> tag. That is the main tag which is going to include your whole (x)HTML page. As you can see, it is closed only at the end with </html>, which indicates your (x)HTML page stops here. Thus, there is nothing after </html>.The <html> tag has 2 attributes:
1. xmlns: This compulsory attribute points to an address dealing with xHTML. Do not worry about it at this time, it is not that interesting.
2. xml:lang: This attribute indicates in which language your webpage is written. If you write a webpage in English, put "en" like I did. If the page is in French, put "fr", in Italian "it", Spanish "es", etc.
The <head> tag contains some heading information for your webpage. It is closed a bit further.
1. Inside the <head> tag, you will find the <title> tag. This one is really important: it is the one which contains the title of your webpage. Here, the title is "Welcome to my website!", but it is up to you to put the right title for your page.
2. Then, you can see the <meta> tag. There are lots of this kind of tags, but I will talk about it later because they are not essential. The one I gave you is essential though: it states that you are going to type specific English characters.
Finally (phew!), after the <head> tag is closed begins a new tag: <body>. It is between <body> and </body> that you are going to type the content of your webpage. Actually, we will spend 99% of our time in between those 2 tags. For now, there is nothing there, so nothing is displayed (but a white background as you noticed before).

Yay!
All right, I explained everything about this mess.

Once again: it is not essential to remember what all of this means exactly. What is essential is to use the code provided as a template every time you make a new webpage.

Comments

Before we close this chapter, I would like to quickly tell you about "comments".

Comments are indications you write for yourself which cannot be seen by users.
For instance, you can use comments to put landmarks if your xHTML page is really big, or you can use them as reminders.

A comment is a special tag which begins by .
Here is an example of a comment in the code we used previously:

Code: HTML

<!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 website!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <!-- Reminder: We put the content of our web page here -->
   </body>
</html>

Try to save this web page and see what it looks like in your browser: there is no difference between this and what we saw before. The comments do not appear anywhere.

Usually, comments are not used much, but I wanted to show you what it looks like so you are not going to be surprised if you see some.
I may use them in some of my examples to give you explanations inside the xHTML code.

Quiz

Which one of the following can be written with capital letters?

A tag
An attribute's name
An attribute's value (in between "")

How are standalone tags peculiar?

They begin with <!--
They end with a slash (/>)
They begin with a slash (</)

What is the related tag to xml:lang attribute?

<html>
<head>
<title>

What would be the tag to set a webpage's title?

<title>
<titre>
<titke>

Within what other tags would the <meta> tags be located?

<body> and </body>
<title> and </title>
<head> and </head>

Which one of the following tag would be a proper comment?

<-- This is a comment -->
<!-- This is a comment >

You were not expecting to write all this code just to get a blank webpage, would you?

However, it was a mandatory step to making a real webpage.
But take it easy, all we are going to do from now on will appear on your screen, and in the next chapter, you will make your web browser display some text!