Writing your first XHTML or HTML Webpage
How do you begin your foray into web design? It’s a common question and one which (for me) is impossible. I started so young that I can’t recall it at all.
There are a number of programs you could use (and would use) but to start with, I would like to show the principles and for this you can use notepad/vi/pico/whatever you like.
Create a text file called mypage.html
Within that, typethe following:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>My First Page</title>
<meta name=”keywords” content=”my, first, xhtml,web, page, webpage” />
<meta name=”description” content=”This is my first XHTML page” />
<meta name=”robots” content=”index,follow” />
<meta name=”author” content=”MyName” />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”Content-Language” content=”en” />
</head>
<body>
<!–This is a comment and comments
do not show up in the browser –>
Here is my first XHTML page
</body>
</html>
So what does all the code mean?
<!DOCTYPE….. = Allows us to specifiy what rules we are following for our site. In this example we are following XHTML 1.1 which is the latest web standard.
<html xmlns….. = Allows us to specify the location of the rules we are following and also starts our HTML code
<head> = Our HEAD tag contains the information which we would like to tell brwsers and search engines, some javascript code, our information tags etc. This is information which is sent prior to sending the page layout and content.
<meta name=”keywords” … = Our first ‘meta tag’. This tag will tell search engines what individual words to use as keywords to enable visitors to find or site when they use these words in a search engine.
<meta name=”description”… = This also tells search engines what info they can find here and is commonly the text you would see shown on a search engine description of your site.
<meta name=”robots”… = Sadly, this isn’t as interesting as it could appear but it is very important. This tag will tell search engine ’spiders’ to firstly INDEX this site (that is, to list it in their search engine) and secondly to FOLLOW (which means that it should follow any links it finds on this page to be able to list the rest of our site).
<meta name=”Author”… = Kind of like your name on the front of a book you have written. This tag could be your name, your company name or anything else you would like to use to identify this page as yours.
<meta http-equiv=”Content-Type”… = This tag indicates the type of information we are sending (more specifically the format of it) Our tag tells our users browsers that this is HTML and to display it as such.
<meta http-equiv=”Content-Language”… = Gives the browser the information that our page content is written in English (en), if you are in the USA then this tag would be “en-us” to show the american dialect of English.
</head>… = As we opened our HEAD tag earlier we must now close it to show we have finished writing everything in it.
<body>… = After all that, we now open the body tag to tell browsers to start displaying what we are typing from now on.
<!–This … = Comments are text which is not displayed in a browser. It enables you to write notes for yourself explaining the code, error trap, leave messages etc etc. Comments must be closed “–>” or your whole page may disappear.
Here is my … = This is the text which we want to be displayed on our site. Anything between the body tags will be presented to the browser. Although comments will be hidden when the browser displays the page, they are still present in the source code of the page.
</body>… = This closes out BODY tag to tell browsers that the text to display on our page is now finished.
</html>… = Now we close our HTML tag to tell our browser that we are no longer sending HTML to it and our page is finished.
If you now view your page (In Internet Explorer, Firefox, Safari etc), you should find (hopefully 
) that “Here is my first XHTML page” is shown. And there you have it.
XHTML is a newer ‘version’ of HTML which allows us to reduce our code and keep it tidy by not requiring us to open and close tags seperately. For example, the linebreak tag now becomes <br />. I would highly recommend using XHTML for all websites and I will try to do more tutorials to get into more depth with it when I can.
