In this beginner HTML tutorial I’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!
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 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>
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!
Which does a search engine pick up? The web page title? Or the file title?
e.g.
ga plus the extension – the name of the file
or simply greenapples – the name of the page?
I’ve been using short acronyms for my site pages. Would it be better to write out the subject title in full?
@wycan: Most search engines look at all aspects of a page, including its title element, the rest of the page content, and the page’s URL. However, the page title is what is shown in the search results.
Thanks it really helped.
Hi,
I need help. God will bless you if your help will reach on solution of my probelm.
I am trying to load an image onto canvas using html5. i got success.
but my main motive is to load an xml file into this html code, but it is being problamatic.
my xml contains attributes to position control on the image which i put onto canvas.
xml file deals with coordinates of control which are going to put into an image.
please help.
And the code you have already is???