XHTML the basics

Sections of this page

Introduction

Learning the basics is where all web designers including the author of this site start from, to better undestand XHMTL we must go to its predecessor HTML, as XHTML, uses HTML tags for markup. HTML is very easy to understand as its markup tags are usually self descriptive and there isn't much dfference in the way the two are markedup, also you don't need to have any formal qualifications, or even have a programming background to learn HTML, as HTML is not a programming language.All you need to start making web sites is a computer, and have a copy of notepad or a similar text application. The reason we use notepad or another smiliar application, is that unlike Microsoft Word it doesn't contain any extra formatting, this in itself makes it perfect to make and create web pages. Although the idea of hand coding HTML documents in notepad is daunting at first, it is worth it when you can see the results of your hardwork as a completed site or web page.

HTML is made up of two parts a head and a body, to understand these elements better lets use them in a simple HTML document, open notepad or a similar application and insert the example below, after you are finished save it as index.html, then view it in your browser by either double clicking on the file or right clicking on the file, and choosing open with, then select the browser you want to use, for example Internet Explorer.

Top tip: don't close the browser or the index.html text document, having both either open or minimized will save you time. Also to see any changes you do make to your HTML document, click refresh on your browser after you have saved the document. To begin open notepad or a similar text editor and copy the example below, once you are finished save the file as index.html.

Example 1

<html>
<head>
<title>My website</title>
</head>
<body>
<p>Hello World!!</p>
</body>
</html>

What does  that all mean?

Lets work through the code together, HTML pre-defined tags are declared in between the angle <> (more than less than) brackets, this tells the browser how to render the HTML document. In this basic markup you tell the browser that what follows is a HTML document, we do this by using the <html> tag, next we tell the browser what needs to be in the head section by using the <head> tag, within the head section one of the most common used tags is the <title> tag, a title is what displays in the top left hand side of the screen when you go to a web site, for this example it says My website, there is no more information in the title so you close the title using the </title> closing tag.

Most HTML pre-defined tags have closing tags, these tags are defined by using the opening tag name and then use an '/' in between the angle brakets for example a closing tag looks like this </tagname>, there are a few tags that don't have closing tags, we will show you these later. You are finished with the head so you now close that also using the </head> closing tag . Now we move onto what we want our potential visitors to see, we declare this by using the <body> tag, within the body we want a paragragh so we use the <p> tag, and write the text that we want to be displayed, in this example it is "Hello World!!". We then close the paragraph tag using the </p> closing tag, we are for now finished with the body also, so we close this using the </body> closing tag, finally we end our html document so we close this using the </html> closing tag.

The last thing we do is save the file as index.html, the reason for this is that all home page's are called index pages, without an index page web crawlers (search engines) won't be able to find you, so by doing this it is good practice to name the first html document you make and save, index.html. Through out the following examples within this tutorial, unless stated otherwise, we will be using the same file you are working on now, index.html, if you have accidentally closed this file, don't worry just right click on index.html, select open with, and choose your text editing application like notepad.

Adding Color and alignment   Back to top

As you can see from the previous example it was quite dull, lets put some life into it by adding color to your web page. Re open index.html and make the following changes to the document, remember to save it and keep it as the filename index.html.

Example 2

<html>
<head>
<title>My website</title>
</head>
<body bgcolor="#0000FF">
<p align="right"><font color="#00CC33">Hello World!!</font></p>
<p align="left"><font face="Arial"><b>Big Hello!!!</b></font></p>
<p align="center">This is my site</p>
</body>
</html>

Here is how it will look on your page:

Hello World

Big Hello!!
This is my site

What does that all mean?

We first change the color of the body background from its browser defaults to a lovely blue color, we do this by by using bgcolor meaning background color and then its hexadecimal value, hexadecimal values are web safe colors and are defined by " #hexadecimal number ".

Within the first paragraph tag we align the text "Hello World!!" to the right by using align="right", we also want the text to be a nice green color we do this by using the <font> tag, and then add the color of the text by using color="#hexadecimal number ", the <font> tag allows you to change how the text is displayed like in this example it is green, the <font> tag can also be used to change the face(style) of the font, and make the text bigger or smaller. Next we align the text "Big Hello!!" to the left and change the face of the font using face="text font name", you will only notice the change if your browsers default isn't the text you are changing to. Lastly we align the text "This is my site" to the center by once again using align="alignment". We also remember to close each tag respectively using the </tagname> closing tag.

Headings and Spaces   Back to top

The next part of this tutorial moves onto headings and the use of page breaks and adding spaces. Open up index.html and make the following changes to it. Remember to save the file afterwards to be able to view the changes in your internet browser.

Example 3

<html>
<head>
<title>My website</title>
</head>
<body>
<h1>This is really big</h1>
<h6>This is a<br />page break</h6>
</body>
</html>

What does that all mean?

In this example we use the heading tag <h#>, heading tags come in 6 sizes ranging from 1 being big to 6 being small, we write the text that we want displayed in between the tags, we use the <h1> biggest heading tag and <h6> tags in this example to show the two extremes of this tag, we also include a page break, you will notice that the page break <br /> tag has no closing tag like <head> or <body>, these tags like the page break <br /> tag are known as empty tags, they don't have closing tags as they ammend themselves by using the / after there tag name.

We can also add extra space if we wanted, to declare an extra space put &nbsp; meaning non breaking space, also note that this tag ammends itself by using the ; semi colon, to try this tag out go back into index.html and delete the space between really big and add the non breaking space tag in.

Lists Back to top

Our final tutorial on this page, touches on ordered and unordered lists, an ordered list is also known as a numbered list, the best way to describe this, for example is you want to keep an order of the top 10 chart albums, it would be easier to have a list from 1 to 10 listing where the bands/artists are in the top ten than just have their album name and artist, an unordered list is the opposite, and is generally used like in this tutorial (click back to top to see an unordered list) to show an index of points of interest, or different subjects. Lets see both in action, open up index.html and make the following changes to it. Once again remember to save it retaining the filename index.html

Example 4

<html>
<head>
<title>My website</title>
</head>
<body>
<p>Top 3 nice places to go on holiday </p>
<ol>
<li>Spain</li>
<li>France</li>
<li>Morroco</li>
</ol>
<p>Parts of a car</p>
<ul>
<li>Engine</li>
<li>Tyres</li>
<li>Exhaust</li>
</ul>
</body>
</html>

What does that all mean?

We want to do two lists to show the differences between them, first we want an ordered or numbered list of the top 3 places to go on holiday, we tell the browser that what follows is an ordered list by using the <ol> tag, now we want to display the contents of this ordered list so we use the list item <li> tag, we then write the text that we want displayed and close each tag respectively using the </tagname> closing tag, we then decide to do an unordered list or bulleted list to show points of interest, in this example its parts of a car, we declare an unordered list by using the <ul> tag, we once again want to display the contents of this list so we use the list item <li> tag again, and like the ordered list above we close each tag respectively. This ends the basics of XHMTL next we will be learning how to add images and how to do hyperlinks.

left_arrowHome
Top
Links and imagesright_arrow