HTML and XHTML - Lesson 2
To create an XHTML document you need a text editor such as Notepad. In Windows XP, go to the Start Menu > All Programs > Accessories > Notepad.
Alternatively, you can go to the Start Menu, open Run, type in notepad.exe and press OK.
Opening this program will open a plain page that you can type in. Do not use rich text editors such as Word or Wordpad. Use a plain text editor only, such as Notepad.
Now, we will use Notepad to create our first XHTML file.
Type in this:
Code:
<html>
<head>
<title> My Web Page </title>
</head>
<body>
This is my first XHTML Document.
</body>
</html>
Displays as:
This is my first XHTML Document.
Now, in Notepad go to File > Save As...
Name the file index.html
Save it into a folder where you know you can find it.
Press the Save Button.
You can view your first XHTML document by locating the file on your computer and opening it with a Web Browser such as Internet Explorer or Netscape.
It should look like this with "This is my first XHTML Document" inside the window, and "My Web Page" on the title bar:
Displays as:
This is my first XHTML Document.
Let's go back to our Notepad file where we have this typed out:
Code:
<html>
<head>
<title> My Web Page </title>
</head>
<body>
This is my first XHTML Document.
</body>
</html>
Notice that these are tags and the same rules apply that we learnt in the previous lesson. The page is XHTML, so we start and close with a set of html tags:
Code:
<html>
</html>
XHTML documents have a separate head and body section, so we create a set of those:
Code:
<html>
<head>
</head>
<body>
</body>
</html>
Inside the head we have a title, and inside the body we have some information:
Code:
<html>
<head>
<title> My Web Page </title>
</head>
<body>
This is my first XHTML Document.
</body>
</html>
The head of the document is for specific information we'll learn later.
The body of the document is used much more. This is where most of the information is typed that is displayed in the Web page.
Since we are now working with many tags at once, it is important to emphasise the way tags are ordered. For example, to have tags that are both bold and italic it is written like this:
Code:
<b><i> This text will display both bold and italic. </i></b>
Displays as:
This text will display both bold and italic.
Tags open and close from the outside, inwards. It is important to inspect the previous example because an incorrect order of tags is a very common mistake. If we want this bold and italic text to display inside and XHTML document we place it in the body (between the set of body tags):
Code:
<html>
<head>
<title> My Web Page </title>
</head>
<body>
<b><i> This is my first XHTML Document. </i></b>
</body>
</html>
Displays as:
This is my first XHTML Document.