Tutorial: HTML Tutorial - The Basics of HTML
Level: Beginner. Published on 28 August 2001 in HTML
Just starting out with HTML? Check out this easy to follow HTML tutorial, which explains HTML basics and shows you how to create your first simple Web page.
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:
<b>- Makes text bold
<i>- Makes text italic
<p>- 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!
Sponsor message
Download CoffeeCup HTML Editor - Click Here
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 <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>
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 <p> 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 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 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>
See it in action in your browser!
Try adding your own paragraphs of text, and playing around with different background and text colours. Once you're feeling confident about creating an HTML Web page, check out some of our other HTML tutorials, such as the ones on HTML images and HTML links. Good luck!
Share and enjoy
If you liked this article, you can share it with others by adding it to any of the following social bookmarking sites:
Link to this page
Feel free to link to this article in your own Web pages. Click one of the boxes below to select the text, then copy and paste it into your page:
Keep in touch
Subscribe to our feed or follow us on Twitter for news of our latest articles and other fun stuff.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you need help with a Web-building issue, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!
