HTML Tutorial - The Basics of HTML Tutorial

Fri, 07/16/2010 - 13:58 — Isk

In this beginner HTML tutorial we'll show you how to create a simple HTML Web page. If you're just starting out with Web design, then you'll find this tutorial to be a handy introduction to the world of HTML!

What is HTML?

HTML (HyperText Markup Language) is the language used to create Web pages. HTML is pretty easy to work with. It uses a system called tags to specify things such as bold or italic text, or images, or links. Any text that is not in a tag is displayed as it is on the page.

An HTML tag consists of a special word or letter surrounded by angle brackets, < and >. Here are some examples of HTML tags:

: Makes text bold
: Makes text italic
: Creates a paragraph of text
<img>: Inserts an image in the Web page

A lot of HTML elements have two tags: an opening tag, and a closing tag. The closing tag looks just like the opening tag, but with a slash (/) after the <. For example, here's the HTML to bold some text:

Here is some <b>bold</b> text.

When viewed in a Web browser, the above HTML looks like this:

Here is some bold text.

The anatomy of an HTML page

Most Web pages have a couple of things in common - they have a head and a body. Information about the page, such as its title, goes in the head, while the page contents themselves go in the body. The head and body are marked by using the HTML tags <head> and <body> respectively.

In addition, every HTML page is surrounded in an opening and closing <html> tag, to tell the Web browser that it is an HTML page.

So the "bare bones" of a Web page look like this:

<html>

<head>
    (The tags for the head go in here)
</head>

<body>
    (The page body, such as text and images, goes here)
</body>

</html>

However, if you viewed this page in a Web browser, you wouldn't really see anything, as there's no actual text or images in the page. You can see for yourself by viewing this page in a new window or tab in your browser.

Let's start putting some stuff in the page!

Giving the page a title

The first thing we need to do is give our page a title. Let's say we wanted to make a Web page about your cat. (If you're a dog-lover, by all means make the page about your dog instead!) We want to call the Web page "My Cat called Lucky".

To give the page a title, we use the HTML <title> tag, which goes in between the <head> and </head> tags:

<html>

<head>
<title>My Cat called Lucky</title>
</head>

<body>

</body>

</html>

View this page in your browser. Notice how the title bar right at the top of the browser window now says "My Cat called Lucky"!

Putting some text on the page

The next stage is to fill our page up with some text. We'll add a couple of paragraphs to the page, using the  (paragraph) tag. As we said earlier, the page content goes inside the <body> and </body> tags:

<html>

<head>
<title>My Cat called Lucky</title>
</head>

<body>

<p>My cat is called Lucky and she is
black and white and very friendly.</p>

<p>She mostly purrs but if she wants
feeding she goes meow very loudly!</p>

</body>

</html>

View this page to see the results.

Now we've made our first Web page! Let's add some finishing touches.

The finishing touches

We can use HTML tags to do some more cool things to our page. First, let's make the word "meow" bold:

<p>She mostly purrs but if she wants
feeding she goes <b>meow</b> very loudly!</p>

We can also center the text by adding a bit of CSS into the  tags:

<p style="text-align: center;">My cat is called Lucky and she is
black and white and very friendly.</p>

<p style="text-align: center;">She mostly purrs but if she wants
feeding she goes <b>meow</b> very loudly!</p>

Finally, we can make the background black and the text white by adding more CSS to the <body> tag:

<body style="background-color: #000000; color: #ffffff;">

So our whole Web page now looks like this:

<html>

<head>
<title>My Cat called Lucky</title>
</head>

<body style="background-color: #000000; color: #ffffff;">

<p style="text-align: center;">My cat is called Lucky and she is
black and white and very friendly.</p>

<p style="text-align: center;">She mostly purrs but if she wants
feeding she goes <b>meow</b> very loudly!</p>

</body>

</html>

Forums:

Web Development