What is HTML?

HTML stands for Hypertext Markup Language. HTML is simply a file format, it is the file format of web pages. Just like MSWord uses .DOC files and Notepad uses .TXT files -- web browsers display HTML (.HTM) files. On the web, each web page is one HTML document! So "page" and "HTML file" mean the same thing.

What does HTML do?

HTML is a language we can use to create and edit web pages. As creators of web pages we get to see the HTML, but people using a web browser can see the finished product – a web page!

What does HTML look like?

Task 1:-

  1. Open up your web browser
  2. Navigate your way to the Google home page (
  3. Select View from the menu bar
  4. Select and click on Source
  5. In the window that opens up you will see something that looks like this:

This is what HTML looks like. This HTML is the code that makes the Google homepage look how it does in a browser window.

Now lets make our own web page

Task 2:-

  1. In the Notepad window with Google’s HTML select the File menu and then click New
  2. Now select file again and click Save As
  3. In the Save screen name your document My Web Page.htm and save it as All Files

4. In the newly saved Notepad page enter the following text (including the arrows):-

<html>

<head>

<title> This is my first ever web page! </title>

</head>

<body>

<h1> Hello World </h1>

<p> I just made a web page! </p>

</body>

</html>

5. Go to File and click Save. Now go to your My Documents folder where you saved the file called My Web Page and double click it.

How does the HTML work?

Each of the bits inside the arrows is called an HTML tag. Notice that each tag

also has a matching closing tag that contains a ‘/’, for example:-

<title> This is my first ever web page! </title>

The first <title> tells the web page where the start of the title begins. The

second </title> tells the web page where the title ends. Everything in between

will be displayed at the top of our web page.

Below is what the different parts of the HTML code are doing:-

<html>

<head>

<title> This is my first ever web page! </title>The blue bar

</head>

<body>

<h1> Hello World </h1>The main sectionThe whole page

<p> I just made a web page! </p>

</body>

</html>

Task 3:-

  1. If it isn’t open already open the source window for your new web page
  2. There are three bits of text that make up the content. Change all three so that it says something else.
  3. Now click Save
  4. Now go back to the web page in your browser
  5. Click the Refresh button

Important:-

Whenever you make changes to your HTML file, if you want to see them you must save then refresh your web page.

How to Add Colour

To add colour to text we use tags to indicate where the colour starts and ends.

We will look at how to use the <FONT COLOR</FONT> tags

Task 4:-

  1. In your source code find the section that says “I just made a web page”
  2. Now add HTML tags before and after it so that it will look like this:

<p> <FONT COLOR="red"> I just made a web page! </FONT> </p>

  1. Save your source code.
  2. Refresh your web page in your browser.

Note: The <p> and </p> tags request your web page should take a new paragraph

We can also add colour to our page background.

  1. This is very easy. Now change the <body> tag to look like this:

<body bgcolor="blue">

Colour Names/Codes

HTML only knows some colour names i.e. red, blue, green etc

It also gives each colour a unique code. All codes start with # for example:

Red = #ff0000

Blue = #0000ff

Green = #008000

So instead of writing <body bgcolor="blue">

We could have written <body bgcolor="#0000ff ">

They both do exactly the same thing.

Task 5:-

  1. Keeping your own web page open, open a new web page in your browser
  2. Enter the following address
  1. Add this page to your internet Favourites
  2. Look at the list of colours and the codes
  3. In your source code for your web page try using different colours and different codes to change the text colour and background colour.

Adding Images

To add an image to your web page you must first decide what image you wish to insert.

Task 6:-

  1. Find and save an image that is a .jpg or a .gif
  2. Make sure the image is saved in the same folder as your web page.
  3. Once your image is saved type the following line inside the body of the web page:-

<img src="image.jpg" alt="image" align = left>

  1. You must also change the word “image” for the correct name of your picture.
  2. Save and Refresh
  3. Where you type the line is where in the page your image will be displayed. Try it in different places.
  4. Try also changing left to either middle or right.

Adding Background Images

Adding a background image is just like adding a background colour.

Instead of typing <body bgcolor="blue"> type this instead:

<body background="image.jpg">

Save your source code and refresh the browser screen.

Adding Hyperlinks

Hyperlinks (or links) allow the user to navigate (move) around and between sites.

There are two types of link: Local Path and URL.

Local Path: a link to other files or pages within your site

For example: c:\MyWeb\index.htm

URL: a universal path to another website

For example:

Task 7:-

  1. Open the folder which your web page is saved in.
  2. Highlight the folder and using the Edit menu select Copy
  3. Click anywhere else within the window and using the Edit menu select Paste.
  4. Highlight “Copy of my Web page” and using the File menu click Rename. Call the new file “My 2nd Web page”.
  5. Open the source code for the original “My Web page”
  6. In the body of your source code enter the following line of code:

<a href="My 2nd web page.htm">Click this link</a>

The tags <a href= and </a> tell the browser to insert a link

The part that says Click this link tells the browser what the link itself will actually look like.

  1. Save your source code and refresh your browser. You have just created a local path link to a second page.

Warning: You may think when you click the link that your link disappears. This is not true, you are simply moving to a different page that does not have the link in the source code.

Extension: Make your second page look different to your first so you can tell them apart. Try putting a link on your second page so you can move back and forward between both pages.

Task 8:-

  1. Open the source code on your original My Web Page file
  2. In the <body> of the code enter the following:

<a href=" here for Google</a>

This is a universal path. It will take users away from your site to a different one. In this case Google.

  1. Save your source code and refresh the page in your browser.

Task 9:-

  1. You now have used all the basic functions of HTML to create web pages. We will now create a 2 or 3 page website on a topic of your choice. Discuss your ideas for sites with your teacher before you start. Here are some ideas to get you started:

Sports clubs, animals, actors and films, the environment, music, your family, cars, hobbies, food, TV programme, travel……………..use your imagination!

Tag List

<html> </html> : start and end of page

<head> <title> text goes here </title> </head> : the blue bar at top of page

<body> main source code goes here </body> : main section of page

<h1> text </h1> : heading one style text

<p> source code here </p> : new paragraph

<FONT COLOR="red"> text goes here </FONT> : selects font colour

<body bgcolor="blue"> : selects background colour

<img src="image.jpg" alt="image" align = left> : inserts image

<a href="My 2nd web page.htm">Click this link</a> : inserts a link