Scribd
Upload
59 views

Guide To HTML Part1

This document provides instructions for creating a basic HTML page using Notepad to introduce HTML tags and formatting. It includes steps to open Notepad, type sample HTML code to display text, save the file with a .htm extension to view it as a web page, and add various tags like <h1> for headings, <b> for bold, and <a> for hyperlinks. The goal is to have students follow along and create their own simple web page with search engine names formatted with different tags and hyperlinks.

Uploaded by

pilgrim13
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Guide To HTML Part1

This document provides instructions for creating a basic HTML page using Notepad to introduce HTML tags and formatting. It includes steps to open Notepad, type sample HTML code to display text, save the file with a .htm extension to view it as a web page, and add various tags like <h1> for headings, <b> for bold, and <a> for hyperlinks. The goal is to have students follow along and create their own simple web page with search engine names formatted with different tags and hyperlinks.

Uploaded by

pilgrim13
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

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

9. More useful HTML tags

10. Adding hyperlinks

Activity!

EOS

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.

Where do we start?
Open Notepad:
Windows Button All Programs Accessories Notepad

Open your Web Design folder

KEEP BOTH OF THESE OPEN!

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!)
EOS

Basic Page
<html>
<body>
Search Engines

</body>
</html>
This will display the words Search Engines on the web
page.
EOS

How to save your web page


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.

EOS

How to open and view your web


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

EOS

Using Tags
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 = <H1>
End tag example = </H1>
Tags indicate to the Browser how to display the
text sitting between the start and end Tags
EOS

Adding a Heading to your page


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.

EOS

Heading Tag
<html>
<body>
<H1>Search Engines</H1>
</body>
</html>
The <h1> tag sets text as a heading in style 1.
Valid tags are <h1>; <h2>; <h3>; <h4>; <h5>; <h6>.
What effect does changing the number have?
EOS

How to view changes you make


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.

EOS

Line Break Tag


<html>
<body>
<h1>Search engines</h1>
Yahoo<br>
Line Break Tags
Excite<br>
Google<br>
<br> creates a line break
</body>
<p> and </p> can be used to
begin and end a paragraph
</html>
EOS

More Useful Tags


Tag to make text Font Bold:
<B> Hello </B>

Tag to make text Font Italic:


<I> Hello </I>
Tag to make text Font Underline:
<U> Hello </U>

Task!

Bold, Italic and Underline search engine names on


your web page (One of each)
EOS

Hyperlink Tags
<html>
<body>
<h1>Search engines</h1>
<B><a href="http://www.yahoo.co.uk"> Yahoo</a></B><br>
<I>Excite</I><br>
<U>Google</U><br> The URL of a hyperlink must be
</body>
enclosed in quotation marks
</html>
(Shift + 2)

Task!
Add the hyperlinks for Excite and Google.
EOS

Remember how to save and view


your notepad HTML web page
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.
Slide 14
EOS

Search Engines HTML Example


At this stage, your Search
Engine HTML web page
should look like this:

The HTML code


should look like this:

Slide 15
EOS

You might also like