HTML Tutorial 2. A First Web Page

Lesson 2. Tutorial introducing the basics of producing a simple Web page, using HTML tags, HTML elements

Results per page:


Match: any search words all search words

First Simple Web Page - Introduction

In this first HTML tutorial you will learn:

  1. How to create a folder on your computer to hold your web pages and graphic files
  2. Learn make a simple web page in HTML using HTML tags
  3. The code for a simple HTML page
  4. How to add additional HTML tags to produce a very simple web page named:
  5. The use of HTML elements and attributes.
  6. How this code consists of HTML tags and plain text
  7. How to save the HTML files to a folder named my-first-web-pages on your hard drive.
  8. How to validate your file to ensure that it correct HTML
  9. How to view those pages in your browser.
  10. Tutorial 7 shows you 'How to link pages together', so that the viewer can easily view other pages.
  11. Tutorials 3 - 6 show you 'How to improve the look of your pages'

You will find out how producing you first web page is very gratifying

Step 1. Create a Folder

You require a dedicated Folder to hold your Web site files & sub folder(s) that you will produce on your own computer.

Folder Name

In this tutorial I will name the folder

I will keep referring to this name. If you wish to use use a name of your own choice make a note of it for future reference.

my-first-web-pages folder location

In this tutorial I want to place the my-first-web-pages folder in the following location:
C: > Users > Your User Name>

  1. Copy from this Tutorial the name of the folder you will create
  2. In Windows Explorer browse to C: > Users > Your User Name>
  3. Right Click your User Name, in my case it is Jon
  4. In the drop down menu Mouse over New then select Folder
  5. A New Folder will be highlighted Paste or Type in my-first-web-pages

The actual folder name & where you save it is up to you - What is essential is that you make a note of the folder name and where you save it, so that you can find it easily.

How to Create a Folder in Windows Video

The video shows you how to create the folder my-first-web-pages

My First Web Page

Lesson 1. My First Web Page

Required HTML tags

All HTML5 web pages require the following code, in the form of HTML tags, which will work & produce a simple BLANK web page, that will validate as correct.

 <html  lang="en">

        <meta charset="UTF-8">




When you start a new page in a web editor, the editor will usually create these lines of Source Code automatically.

To check this: Select the Source view / Code or similar named option in your editor and see the code produced. Note the code produced may vary slightly depending on the editor used.

Use the following code if you are using either Blue Griffon, Notebook or Dreamweaver or a web editor that can prepare HTML5

Click for specific instructions information & videos

for using these Web Editors



Microsoft WebMatrix


Example for HTML5

        <meta charset="UTF-8">
        <title>Your Page TITLE goes here</title>
       <p>Your Page CONTENT goes here. The p tag indicates that this is a paragraph</p>

View the results of this code in a browser

Use the following code if you are using Kompozer or a web editor that can't prepare an HTML5 page

Example for HTML 4.01

     <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
     <title>Your Page TITLE goes here</title>

      <p>Your Page CONTENT goes here and is in a Paragraph</p>


View the results of this code in a browser

When you view in your browser Note the 3 areas in the screen shot below taken from the Firefox browser

  • Look for Your Page TITLE goes here in the
    • top line of the window (Not in the Chrome browser)
    • & in the Tab
  • Look for Your Page CONTENT goes here in the browsers main window.

Then re-read the code & compare to the result.

Browser view

Code Explanations

HTML Tags & HTML Elements


In the above code you will see several letters or words within angle brackets <> such as <html> & <p>

These are HTML tags

  • Basically HTML tags are the markup code that imparts information to either the web browser or to search engines.

  • HTML tags are enclosed in a pair of less than and greater than brackets < > these brackets are known as the open delimiter and close delimiter respectively.
    • Although the Declaration is enclosed in < > brackets it is a Declaration & not a tag.
  • It is now recommended that tags are written in lower case letters
  • Most HTML tags, but not all, require both a
    • start tag e.g. <body>
    • end tag, </body>
      Note how the end tag, is the same as the start tag, with the inclusion of a / before the tag name.
  • HTML has a few tags that do not have a end tag,
    • <br> (Break, starts a new line)
    • <img> (Image tag)
  • Tags are not displayed by the browser.
  • Examples of tags are:
    • <p> defines a paragraph. This is the most frequently used element.
    • <br> defines a line break. Starts a new line
    • <img> defines an image. Such as a photograph or graphic
  • Some tags are not supported by some browsers, some are supported differently, hence the different appearance of web pages in different browsers.


HTML Elements

  • Most but not all tags have some content with them e.g.  <p>These words within the P tag are content<p>
  • An HTML tag + it's content is known as an HTML Element.

!DOCTYPE Declaration Explanation

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration informs the web browser what type of document to expect

The <!DOCTYPE> tag does not have an end tag.

!DOCTYPE Declaration Explanation






  • This is the declaration to the Web browser that this page (file) is an HTML 4.01 document
  • If you wish to use HTML 4.01 or to amend an HTML 4.01 file then see more information on
  • There are 3 HTML 4.01 !DOCTYPEs

HTML 4.01 Strict

This is the one we recommend to use


HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "">

<head> Tag Explanation

Opening tag <head>   Closing Tag </head>

  • The <head> element is a container for all the head elements.
  • The <head> element must include a title for the document
  • May include scripts, styles, meta information, and more.
  • The following elements can go inside the <head> element:
    • <title> (this element is required in the head section)
    • <style> CSS styles
    • <base> The <base> tag specifies the base URL/target for all relative URLs in a document. Often not used. Ideal to use if all your images are located in one folder.Example:
      • <base href="" target="_blank">
    • <link> Mostly used to link to external style sheets, or other external resources
    • <meta>
    • <script>Defines a script, usually Javascript
    • <noscript> Defines an alternate content for users that do not support client-side scripts

<title> Tag Explanation

Opening tag <title>   Closing Tag </title>

  • Defines a title in the browser toolbar and or Tabs
  • Provides a title for the page when it is added to favourites.
  • Displays a title for the page in search-engine results

Only 1 title tag is allowed, must be within the HEAD element. Limit the contents of the Title to 64 characters.

Should contain some of your pages main key words or key phrases & describe your page.

Please note that there is a Title attribute

<meta> Tag Explanation

The meta element imparts data that is used by the Web browser & search engines

There are several different meta elements. In this tutorial 2 we have introduced the charset meta element

This defines the set of characters - Letters, numbers & symbols that should be used by the browser.

In the UK the sets normally used are either

  • UTF-8 contains more characters than ISO-8859-1. In western Europe HTML5 expects the UTF-8 character set to be used
  • ISO-8859-1

No closing Tag in HTML. Required in XHTML


<meta charset="UTF-8">

HTML 4.01
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<html> Tag Explanation

Opening tag <html>   Closing Tag </html>

The <html> tag tells the browser that this is an HTML document. The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

<body> Tag Explanation

Opening tag <body>   Closing Tag </body>

The <body> tag defines the document's body.  Everything that appears in the browsers window

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, videos, tables, lists, etc

<br> Line break Explanation

Opening tag <br>   No closing Tag in HTML. Required in XHTML as a combined opening / closing tag <br />

The content following a line break starts on a new line, without the gap between the lines that a <p> tag produces.

Ideal to place text a the line immediately under an image

<p> Paragraph tag Explanation

Opening tag <p>   Closing Tag </p>

Similar to the Line break in that the following content is place on a new line and in addition a space is created between the lines.

Your content goes between the opening & closing tag. Your content may contain:

  • Nothing - actually it should contain a special space called a 'Non breaking space' this would tagged as <p>&nbsp;</p>.
    This places a blank line into your page
  • A single letter, number, word or image
  • Several lines of text
  • Several lines of text & images
  • Several images

Opening & Closing Tags along with its contents is called an Element

The Paragraph element is very versatile and the most widely used element in web pages

The Paragraph Element is a Block-level element, this means that:

  • The Paragraph starts on a new line
  • An element placed after a Paragraph Element is placed on a new line.
  • There is a space above & below the paragraph