• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / HTML Tutorial – The Basics of HTML

HTML Tutorial – The Basics of HTML

28 August 2001 / 5 Comments

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!

Filed Under: HTML Tagged With: build, html basics, html body, html head, html text, html titles, HTML tutorial, introduction, starter

Reader Interactions

Comments

  1. wycan says

    14 March 2011 at 4:55 pm

    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?

    Reply
  2. matt says

    16 March 2011 at 10:01 pm

    @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.

    Reply
  3. af123 says

    24 March 2011 at 5:34 am

    Thanks it really helped.

    Reply
  4. vishalisuser says

    25 February 2014 at 4:25 am

    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.

    Reply
  5. chrishirst says

    25 February 2014 at 1:39 pm

    And the code you have already is???

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits