In this 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! We hope you enjoy it.
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.
A tag consists of a special word or letter surrounded by angle brackets, < and >. Here are some examples of HTML tags:
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. Let's start putting some stuff in our 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 <title> tag, which goes in between the <head> and </head> tags:
<html>
<head>
<title>My Cat called Lucky</title>
</head>
<body>
</body>
</html>
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 <p> (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>
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 an extra bit into the <p> tags:
<p align="center">My cat is called Lucky and she is
black and white and very friendly.</p>
<p 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 bits to the <body> tag:
<body bgcolor="#000000" text="#FFFFFF">
So our whole Web page now looks like this:
<html>
<head>
<title>My Cat called Lucky</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p align="center">My cat is called Lucky and she is
black and white and very friendly.</p>
<p align="center">She mostly purrs but if she wants
feeding she goes <b>meow</b> very loudly!</p>
</body>
</html>
Try adding your own paragraphs of text, and playing around with different background and text colours. Once you're feeling confident about creating a Web page, check out some of our other tutorials.
The End |