The Guide to HTML

Part 1

Menu:

1. Opening notepad 2. Making a basic HTML page

3. How to save a HTML Page 4. How to open and view your page

5. Using HTML tags 6. Adding a heading

7. How to view changes 8. Line Break tag

10. Adding hyperlinks 9. More useful HTML tags

Create a Web Page using HTML.

Use NOTEPAD to do this.

Add some content with formatting.

Give it a title and use headings.

Add working hyperlinks.

Save file with correct extension.

Activity!

EOS

Now Lets Make Our First Web Page!

Type the text you can see in the blue box on the next slide

into NOTEPAD (COPY THE TEXT EXACTLY!)

Where do we start?

Open Notepad:

Windows Button All Programs Accessories Notepad

Open your Web Design folder

KEEP BOTH OF THESE OPEN!

EOS

This will display the words Search Engines on the web page.

Search Engines

Basic Page

EOS

In order to turn your Text file into a HTML file you MUST follow these instructions EXACTLY

In Notepad:

File Save As

Name your Web Page as Search Engines.htm

Save the file in your Web Design Folder.

How to save your web page

EOS

Browse to your Web Design folder.

Look for your Search Engines.htm file. The file should look like this:

Double Click your Web Page to open.

Keep Web Page open for next task.

How to open and view your web

pages

EOS

Tags are used to tell Web Browser how to display text and images

Tags are indicated by using < and >

Tags almost always work in pairs Start Tag and End Tag

Start tag example =

End tag example =

Using Tags

EOS

Tags indicate to the Browser how to display the text sitting between the start and end Tags

Open your Search Engines.htm in Notepad.

(Right Click Search Engines file Open With Notepad).

This will open up your HTML Text File.

Enter the text you can see in the blue box on the next slide.

DO NOT enter the same text again --- just add anything you can see which is new. (New Items are Coloured Red)

Save your file.

Adding a Heading to your page

EOS

The tag sets text as a heading in style 1.

Valid tags are ; ; ; ; ; .

What effect does changing the number have?

Search Engines

Heading Tag

EOS

You can view changes you make to the HTML file in 2 ways:

1. Browse to the Search Engines file and double click it

2. Click the Refresh button in the Browser

Both of these methods will load up your updated Web Page.

How to view changes you make

EOS

Search engines

Yahoo

Excite

Google

creates a line break

and can be used to

begin and end a paragraph

Line Break Tags

Line Break Tag

EOS

Tag to make text Font Bold:

Hello

Tag to make text Font Italic:

Hello

Task!

Bold, Italic and Underline search engine names on

your web page (One of each)

More Useful Tags

EOS

Tag to make text Font Underline:

Hello

Search engines

Yahoo

Excite

Google

Hyperlink Tags

The URL of a hyperlink must be

enclosed in quotation marks

(Shift + 2)

EOS

Task!

Add the hyperlinks for Excite and Google.

Slide 14

File Save As.

File name should be Search Engines.htm.

Save file in Web Design folder.

Open the web file which should look like:

Refresh button can be used to view any changes you make to the web page.

Remember how to save and view

your notepad HTML web page

EOS

Slide 15

At this stage, your Search Engine HTML web page

should look like this:

The HTML code should look like this:

Search Engines HTML Example

EOS