HTML is the short form or acronym for HyperText Markup Language. HTML documents are the webpages that you look up on the internet. For example, the webpage you're reading right now is an HTML document!
The World Wide Web Consortium or W3C is an international organization that creates internet standards and technologies that continue to advance the internet and make sure it is being used to its full potential. W3C makes the standards for things like URL, HTTP, HTML and XHTML.
XHTML is the successor of HTML created by W3C. XHTML makes regualar HTML more compatable with new standards and technologies. It is a good idea to make webpages in XHTML instead of HTML becuase XHTML documents are more portable and therefor can be read by more people around the world. Also, XHTML will be useable long after HTML are obsolete.
This tutorial will teach you the basics of XHTML 1.0.
There is a really easy way to find the XHTML or HTML code that makes webpages display in your browser
Some complicated websites might have some crazy looking code but it can all be broken down into simple pieces
XTHML webpages can be made with many different programs. You can use a plain text editor like Notepad or advanced graphical webpage editors like Microsoft FrontPage or HotDog HTML. We are going to start off with notepad.
Now that you have saved your document as a webpage if you goto your folder your file should be a webpage icon. If you double click on your webpage icon internet explorer will pop up showing your webpage. All you can see right now is a blank page becuase we have not added anything yet.
XHTML documents are made up of groups of text called Tags. These Tags contain the information a web browser like Internet Explorer needs to display the webpage. Tags are used to shows pictues, tables, paragraphs and anything that goes into a webpage. But before we can add pictures and text we have to add the backbone tags to the XHTML document.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>YOU'RE TITLE GOES HERE</title> </head> <body> <h1> YOU'RE TITLE GOES HERE </h1> <p> YOU'RE TEXT GOES HERE </p> </body> </html> |
Now that you have added the backbone Tags of your XHTML document if you go back to your folder and double click on your webpage file and stuff will show up on the internet browser. If your webpage is open in a browser you can see any changes you make to your XHTML file by clicking on the refresh button on the action bar. Now it's time to start adding your own tags to your webpage
Below is a list of tags you can add to your XHTML file. Rember to write the tags in lowercase text and make sure you have an opening AND closing tag. Also make sure you put your own tags in between the body tags.
| Opening Tag | Description | Closing Tag |
|---|---|---|
| <h1> | The text in between the tags will be big and bold. | </h1> |
| <h2> | The text in between the tags will be big and bold. | </h2> |
| <h3> | The text in between the tags will be big and bold. | </h3> |
| <p> | Put a paragraph of text between these tags. | </p> |
| <b> | The text in between the tags will be bold. | </b> |
| <i> | The text in between the tags will be italic. | </i> |
Now I'm going to tell you the exception to the MUST HAVE AN END TAG rule. Some Tags have built in end Tags. The img Tag is an example of this.
| Tag | Description |
|---|---|
| <img src="imagename.jpg" alt="info about the image" /> | The text in the alt section appears if you place your cursor on top of the image. If your image is not in the same directory as the webpage you will have to use either the full path name "c:\somedir/anotherdir/image.jpg" or "../image.jpg" to go back a directory or "/nestedfolder/image.jpg" to go forward a folder |
www.yahoo.ca is a great search engine for finding picutes for your webpages.
| Opening Tag | Description | Closing Tag |
|---|---|---|
| <a href="http://www.google.ca"> | The text in between the tags will change colour so it looks like and internet link. For example This link text links to GOOGLE. In the first tag the href part containes the address of the webpage you are linking to. | </a> |
| Opening Tag | Description | Closing Tag |
|---|---|---|
| <ul> | These tags set up an unorded list. | </ul> |
| <ol> | These tags set up an ordered list. | </ol> |
| <nl> | These tags set up a numbered list. | </nl> |
| <p> | These tags are used by all the different list types. If you put text inbetween these tags the text will show up on the list. | </p> |
Adding style to XHTML pages is different than with HTML pages. With HTML pages the style tags are imbedded throughout the file. In XHTML pages the style for the whole page is decribed at the start of the file or in an entirely separate file.
| Opening Tag | Description | Closing Tag |
|---|---|---|
| <style> | These tags go in between the head tags at the top of the file. In between the tags themselves goes the actual style information | </style> |
| <link type="text/css" rel="stylesheet" href="style.css" /> | These tags have built in end tags. Just like the imbeded style tags they go in between the head tags at the top of the file. This kind of style tag links the XHTML file to a style.css file that contains all the style information. | none |
Making stylesheats is a little tricky so I made one for everyone to download and use.
If you want to learn more about XHTML 1.0 and HTML 4.01 visit W3C's website.
If you want to learn more about stylesheats visit W3C's stylesheat website.
The webpage you just made is not on the internet yet. To put it on the internet you need to upload it to an internet server that hosts webpages. For this tutorial I used the tripod server. Tripod adds an advertisement to your page but it's such an easy server for now it's a good choice. You can make you're own account at Tripod's site and upload your webpage to the internet using Tripod's browser tools. Or you can make a folder that's easy to upload and I can add it to this sites account. If you want me to add it for you follow these instructions.