Welcome to chapter 2 of part 1. In the last tutorial, we familiarized ourselves with XHTML and the kind of environment we require to make HTML pages! Don't panic,I will explain what HTML is in a bit! In today's tutorial we are going to create our first HTML page,OK? Let's go.
Chapter 2: Your first page!
Fire up your favourite text editor,copy and paste the following text :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>My first web page !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
I owe you an explanation right?
On the very first line is the statement "Doctype". It is a special tag that tells the browser what you are doing is an XHTML page, and you are using version 1.0 of XHTML.
The "Doctype" is a special tag because it doesn't follow the XHTML rules that apply to all other XHTML tags.The rules are simple and easy to remember:
- The tags are either in pairs (<tag> </ tag>) or by themselves, but in later case you must put a slash at the end of the tag (eg <tag/>)
- Tag names and attributes are always written in lowercase (eg "quotation, author, date)
- Attribute values can contain uppercase (eg <tag attribute="MY VALUE"></ tag>)
- Attributes in a pair tag can only be put in the opening tag (like the above example).
The "Doctype" tag is then followed by the <html> tag. This is the main tag that will encompass your entire page (X) HTML.As you can see,the html tag is a pair tag that opens with <html> and ends with </html>.The <html> tag contains two attributes :
- xmlns: this is a text that defines the default namespace for the document. And what exactly is a namespace? A namespace is name used to specify attributes for a specific information.
- Xml: lang: This attribute is used to indicate the language you are using. If you write a web page in English, put "en" . If the page is in French, put "fr" etc etc ...
The <head> tag contains header information like the title of the page as shown above.Our title in this case is <title>My first web page!</title>
And finally the <body> tag. Your content goes between <body> and </body>. As for now we have no content between these two tags, so our page is blank.
I promised to explain what HTML is,didn't I? HTML is the ancestor of XHTML. If you were born in a remote and a marginalised area like me, and your kids were born in a big city, chances are your kids get better education thus better lives but they still inherit some traits from you, right?Same applies to XHTML. It is an extension of HTML with new and improved functionalities but inherited some of the old goodies from HTML.
Let's now see what our code does! Create a folder on your machine and name it my website. Save the code that you copied earlier on your text editor as myfirstpage.html or myfirstpage.htm which ever you prefer, both will work perfectly.
Now go to your folder and double click myfirstpage.html. And that is your first html page! Do you notice the title of your page? See the image below to get a better grasp of the <title> tag! .
And that is your first HTML page!
Things you should remember:
- Most HTML tags go in pair like <body>(the opening tag) and </body>(closing tag).Always put a slash at the end of the tag if it is not in pair a perfect example is <img/> a tag used for inserting images on our web page.
- Make sure the extension of your file is either html or htm, otherwise your page will not function correctly!
Till then, XoXo
HTML, XHTML, and CSS, Sixth Edition
Related links
Learn how to create you website from scratch :Chapter 1 of Part 1
No comments:
Post a Comment