Basic HTML Tags

Lesson 1

  1. Double click the ‘Notepad++’ icon on your desktop. You should now see a blank page
  1. Type the following code:

<head>
<title>My Name is</title>
</head>
<body> Hello World </body>
</html>

Remember: Each tag you open <tag> must be closed </tag>

Your page should now look like this.

  1. Click ‘File’, ‘Save As’ – A pop up will now appear
  2. Choose where you wish to save your file. (Remember this location)
  3. In the ‘Filename’ box at the bottom name your file ‘index’.
  4. From the ‘Save as type’ box, click the drop-down and choose ‘HyperText Markup Language file’ – this is about halfway down.

Test Your First Page

Now we will test your first HTML page.

  1. Click the ‘Run’ menu and choose ‘Launch in IE’. Your page will now be displayed and look like this:

Note how Internet Explorer has translated the tags and displayed only ‘Hello World’ and your name on the page.

Close ‘Internet Explorer’ and go back to ‘NotePad ++’.

We will now increase the size of the ‘Hello World’ text using ‘H’ tags. To do this:

  1. Change the ‘Hello World’ line, so it looks as follows
     <h1>Hello World</h1>
  2. Now save your file by clicking the blue ‘Disk’ icon.

Now rerun your page.

  1. Click the ‘Run’ menu and choose ‘Launch in IE’.

Try This

What happens to the ‘Hello World’ text when you add the <h1> tag?

If you have time, try the following:

  1. Change the ‘Hello World’ line, so it looks as follows

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>

  1. Now save your file by clicking the blue ‘Disk’ icon.
  2. Click the ‘Run’ menu and choose ‘Launch in IE’.

Common Tags

Some of the available tags:

Tag Description
<a> Defines an anchor
<b> Define bold text
<blockquote> Defines a long quotation
<body> Defines the document’s body
<br /> Defines a single line break
<button> Defines a clickable button
<cite> Defines a citation
<div> Defines a section in a document
<em> Defines emphasized text
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<hr /> Defines a horizontal line
<html> Defines the root of an HTML document
<i> Defines italic text
<img> Defines an image
<li> Defines a list item
<ol> Defines an ordered list
<p> Defines a paragraph
<q> Defines a short quotation
<span> Defines a section in a document
<strong> Defines strong text
<style> Defines style information for a document
<table> Defines a table
<td> Defines a cell in a table
<title> Defines a title for the document
<tr> Defines a row in a table
<ul> Defines an unordered list

There are lots more tags available to use but these are the key ones we will be focusing on.

Take me to the next lesson 'Using Colour'.

Scroll to Top
Scroll to Top