Creating Your First Webpage Tutorial

Made by: Nick

What is HTML?


HTML stands for Hyper Text Markup Language, this does mean that HTML is not a programming language, it is a markup language (I know that some people are picky about the difference, so that is why I want to make people aware that it isn't a programming language). HTML uses a set of tags which when interpreted by a browser (such as Internet Explorer or Firefox) will display any content that is held inside the tags (i.e. the web page).

A HTML document is a document which has the ".html" or ".htm" extention, more commonly known as a web page. HTML documents are made up of lots of HTML tags which will display the content through the use of a browser.

The reason for having two different extentions for HTML documents is because file extentions used to be limited to only three characters, and so HTML couldn't use ".html" it had to use ".htm" instead. After more characters were allowed ".htm" was kept because otherwise most of the web pages on the internet would have ceased to work. These days it doesn't really matter which extension you use, there isn't any difference in the way that browsers render them.

HTML Tags

HTML uses a set of tags (like every Markup Language does). These tags can tell the browser to do a range of different things including but not limited to displaying images, hyperlinks, video and audio.

HTML tags are basicly words placed inside angled brackets (less than and greater than symbols).

Most HTML tags come in pairs with an opening and a closing tag, for example <p> and </p> are used to indicate that a paragraph is being used. There are some tags which come on their own such as the <br /> tag which is used to indicate a line break, these should still be ended with a forward slash as I have shown to conform to the W3C web standards.

Your First Webpage

To create your first webpage all you need to do is open up a text editor such as notepad, copy and paste the code below into it and then save it as "hello.html" or "hello.htm".

<!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" lang="en">

<head>
    <title>Hello World!!!</title>
</head>

<body>
    <p>Hello World!!!</p>
</body>

</html>


The Above Tags Explained


The DOCTYPE I have explained in another tutorial.

The <html> and </html> tags indicate the start and end of the web page (don't worry about the attributes I have attached onto the <html> tag at the moment).

The <head> and </head> tags indicate the start and end of the header section of the webpage. The header section is not displayed on the webpage, but tells the browser other information such as the web page's title.
The text inbetween the <title> and </title> tags indicate what the website's title is.

The <body> and </body> tags indicate the start and end of the content of the web page. This is the section that is displayed to anyone who looks at your webpage and so should have all your content inside it.
And finally the <p> and </p> tags indicate to the browser that the text inbetween is a paragraph.

I will more than likely go over a lot of other tags in other tutorials at a later date.

Feed the Dragon MySpace Tutorials