Article
About the Author
James Ussher-Smith
James is a student and freelance Web developer, specialising in database driven Websites. He is also developing a powerful link directory script, SideLinks.
Beginners' HTML - Part 1
HTML is by far the most popular language on the Web today. Without it, the Internet wouldn't be anything like it is now. HTML can be thought of as the building blocks of the Internet - like the bricks and mortar of a house. So it’s a must for every Web developer to learn!
There are a number of different HTML standards to which people can choose to conform, but we'll use HTML 4.01. This isn't the newest standard, but it is the one which is the most widely adopted across the Internet
Getting Started
There are a few things you'll need in order to learn HTML:
- A text editor (e.g.: EditPlus, Notepad, etc. but not WordPad or Word)
- A browser (e.g.: Internet Explorer, Opera etc)
You’ll code your HTML in your text editor, and then view it as it takes shape in your Web browser. I'll be using EditPlus as my text editor, and Internet Explorer 5.5 for my browser throughout this tutorial, but you're welcome to use whatever you're comfortable with.
HTML is made up of a simple structure of 'tags' (enclosed in < and >) and text. The tags control the layout and appearance of the page, and are interpreted by the browser when the document is viewed. All tags are in the format "<name>" - and anything outside of the angular brackets is presumed to be text that you want the visitors to see. For every tag (with a couple of exceptions - but we'll come to those later), there must be a closing tag. This is exactly the same as the opening tag, except with a "/" before the name of the tag, for example "</tag>".
Every HTML page must conform to this basic layout:
<html>
<head>
<title>Title</title>
</head>
<body>
content
</body>
</html>
Now this may appear confusing at first - so let’s go through it line by line:
<html> This is the opening tag of every HTML page - it tells the browser that the page uses HTML.
<head> This tells the browser that the header has started. The header contains information about the page that doesn't display in the main body of the browser window.
<title>Title</title> The <title> tag tells the browser that the text that follows is the title of the page. It will appear in the title bar of the browser and also in the task bar (next to the start menu on Windows computers).
</head> This signifies the end of the header - anything that appears after this, and is not a tag, will be displayed to the user.
<body> This is the start of the main body of the page.
</body> The end of the main body of the page.
</html> The end of the entire Web page.
See? It's not that hard after all! That is (or should be) the basic layout of every HTML page. That page is well-formed (with indenting) and fully compliant with that latest W3C standards.
Formatting and Structure
Now that you know what a basic HTML page looks like, it's time to put some text in and see it all come together. So, load up your text editor and type (or cut and paste) the structure we looked at before into this blank page. Then add some text into the body of the page. It can be about whatever you like - format it as you would if you were typing into Word. Afterwards, you should have a page basically resembling this:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
Welcome to my first Web page!
The purpose of this Web page is to learn some HTML so that
perhaps I can make a really fantastic Web page
later on.
Please come back and visit soon,
James
</body>
</html>
Now, save the file as "webpage.html" or something similar. If you use Notepad, you’ll need to put the file name in quotes ("filename.html") for it to save correctly. Then double-click on the file in Windows Explorer – it’ll open your chosen browser, probably Internet Explorer. But, rather than the nicely-formed, well-paragraphed text you typed earlier, all of the text will display on a single line. This is because HTML takes no notice of formatting within the code itself. You can get past this problem with some more HTML tags, namely these:
<p>This tag creates a paragraph of text, leaving a blank line before it.<br>This is the line break tag - it starts a new line. This is our first example of a tag that doesn't need a closing tag (i.e. there is no such thing as a</br>tag).
So, with the tags applied, your page should look something like this:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>
Welcome to my first web page!
</p>
<p>
The purpose of this web page is to learn some HTML so that
perhaps I can make a really fantastic web page
later on.
</p>
<p>
Please come back and visit soon,
<br>
James
</p>
</body>
</html>
Now, there are a few things you've probably spotted there. I've included both <p> and </p> tags to signify the start and end of the paragraphs. While this isn't completely necessary, it is good practice to do so and means you will be fully compliant with future HTML standards. I've also indented the code for neatness, again something that certainly isn't necessary but I always do it to make the code easier to read and modify.
Now you know how to construct a basic HTML page, how to add in line breaks, and which tags are required to create a normal Web page. The next step is to look at using different fonts and font sizes, as well as formatting the color of text in your pages.