Online Tutorials

FREE Web Design Quote

Tell us about your project and get your web design quote here.

Contact Refresh:

158 Torquay Road
Paignton
Torbay
Devon
TQ3 2AH

Email:

hello@refreshcreations.co.uk

Phone: 01803 558 978
Fax: 0870 80 30 989
Google Maps Click Here

Featured Website Project

Client: Silhouette Photographers

Description:
Business Cards for a local photography company....

View Website

Website Design News

More News

What is XHTML and what is it used for?

Please Note: This is a beginners guide and does not go into great depths regarding styling webpages using CSS (Cascading Style Sheets). Tutorials on CSS usage will becovered in the future in another tutorial section. This tutorial concentrates on the Basic Structures of XHTML documents a.k.a. web pages.

What is XHTML and What does it have to do with Website Design?

XHTML or HyperText Markup Language as is is otherwise known is the language for displaying web pages on a variety of technology from mobile phone to PCs, web TV, the Wii Shop Channel and many more devices. It's based upon a simple tagging structure where you mark areas of text or code as for example:

Basic XHTML Tags
Tag	Function
<p>	Fomat enclosed text as a paragraph
<strong>	Make enclosed text appear bold
<em>	Make enclosed text appear italic
<u>	Underline enclosed text
<img>	Display an image
<title>	Create a title
<h1>	Format enclosed text as a level 1 header

and many more which we will explore into later in this tutorial.

I could go on about how the language came about and it's references to SGML, etc, etc but that's not really important for learning about the stuff. Lets get straight in with our first web page (code shown below)

First web page Code

<html>

<head>

<title>My First web page</title>

</head>

<body>

<p>Hello Internet!</p>

</body>

</html>

Copy and paste the boxed code to the left into a text editor of your choice.

(For the moment a simple program such as Notepad will suffice but later on you may want to consider downloading a copy of Programmers Notepad or perhaps Textpad Both have Code highlighting features which really help!)

Then save the file as index.html on your computer somewhere and open it up inside the web browser of your choice. I prefer Firefox but any slightly recent one should do.

Notepad Users be sure to change your type of file to *.*, not *.txt or (Text File). This will result in the file being named index.html.txt which is incorrect.

Assuming you've saved the file with the correct name you'll probably get something like this displayed on your browser

Groovy! You've made your first web page. Now, lets take a look again at the code behind it in more detail.

First web page Code Explanation

<html>

<head>

<title>My First web page</title>

</head>

<body>

<p>Hello Internet!</p>

</body>
 </html>

<html> tags

These tags help to identify the web page as a web page and are mandatory on all pages at the very start and end of the web page code.

<html>

<head>

<title>My First web
page</title>
 </head>

<body>

<p>Hello Internet!</p>

</body>

</html>

<head> tags

The header section of the document and once again, every web page should have these at the top of it, after the opening XHTML tag. This can be used to contain information about the proceeding document such as it's... wait for it...

<html>

<head>
 <title>My First web
page</title>

</head>

<body>

<p>Hello Internet!</p>

</body>

</html>

<title> tags

Yes, you guessed it, this aptly named tag is for the title of the web page in question. It again is mandatory for each web page to have a title. Ideally one that is relevant to the content inside the main area or body.

<html>

<head>

<title>My First web page</title>

</head>
 <body>

<p>Hello Internet!</p>

</body>

</html>

<body> tags

Where we begin displaying text, images, video, flash movies and lots more fun stuff. Yes, it's also mandatory for each web page to have one of these, otherwise, what would be the point of having a web page with no content!

<html>

<head>

<title>My First web page</title>

</head>

<body>
 <p>Hello Internet!</p>

</body>

</html>

<p> tags

A paragraph of text. Okay, I guess I am bending the rules here, "Hello Internet!" Is hardly a paragraph of text but it does serve it's purpose well In displaying a text as a paragraph.

Beginners Pitfalls

Hopefully you'll have noticed that XHTML uses opening and closing tags to define it's elements and that these can be layered within each other. For example:

The following code is nice and valid and displays itself properly.

<p><strong>Hello</strong>
Internet!</p>

Where as the following code (whilst it will still work in modern browsers) is incorrect and may result in layout or display errors in the document.

<p><strong>Hello
Internet!</p></strong>

You must ensure that inner tags inside outer tags are closed before closing outer tags and aren't left overlapping one another.

The best way to learn more is to play around with some tags.

Try using the following tags to make the body text more interesting.

Basic XHTML Tags
Tag	Function
<strong>Text</strong>	Will make the text the tags inside appear Bold
<em>Text</em>	Will make the text inside the tags appear in Italics
<u>Text</u>	Will underline the text inside the tags
<p>Text</p>	Will make the text inside the tags appear in a paragraph.

And, just for a bonus, the following self-closing tags will do the following:

Self-Closing XHTML Tags
Tag	Function
<br />	Will perform a line break and carriage return (e.g. hit the enter key)
<hr />	Will Add a horizontal Rule to the document.

Summary

In this lesson we have established the following:

A basic understanding of What XHTML is and what it does.
An introduction to the structure of a simple web page.
An introduction to some of the XHTML tags that can be used to format text and how they are used.

That's all for lesson 1.
Congratulations on your first-steps to hand-coding web sites!
Be back for lesson 2 with some photos for your web page!

Viewed 1115 times since 01 Mar 2010

Return to Tutorials Index

Why Refresh Creations?

All our websites we create are secure and customer editable.
From small, brochure websites to large-scale e-commerce and social-network sites.

We tailor our admin system to your website for a simple-to-use, effective form of website management.

Contact Now

ask refresh creations about website design

Webmaster Tutorials

Beginners Guide to XHTML

Difficulty: Easy

View Tutorial

Recent Tweets

More Tweets

Contact Refresh Creations Now on 0845 09 42 987

Legal	Web Design Services	Refresh Creations Website Design
Terms and Conditions of Business Privacy Policy Disclaimer	Web Design Paignton Web Design Torquay Web Design Devon Bespoke Content Management

Tutorials - Beginners Guide to XHTML - What is XHTML and what is it used for? - - Refresh Creations Ltd