Unit 8.1 Web Design

Unit 8.1

Web Design

Key Word Vocabulary

Bold

WWW

Web Site

HTML

Line Break

Heading

Italic

During this lesson you will hear the following key words.

Make sure you listen carefully to the lesson as you may be

asked questions at the end.

Underline

Hyperlinks

Notepad

URL

Web Page

EOS

Tags

• We need to create folders where we will save the work we do in this unit.

1. Create a folder called Year 8

2. Open the Year 8 folder

3. Create a folder called ICT

4. Open the ICT folder

5. Create another folder called Web Design

Lets create our folders!

To create a new folder:

• Click in a BLANK SPACE

• Click New Folder

All work for this unit

should be saved in

the Web Design folder

EOS

• Huge collection of Web Sites that we can access using the Internet.

• These Web Sites contain Web Pages which are made up of all sorts of information including:

– Text

– Images

– Multimedia (Sound, Video etc).

• We can access Web Sites by typing in a URL

(Web Address) into the bar at the top of the screen.

• We can also access Web Sites using Hyperlinks which allow us to jump from one Web Site to another and within Web Pages contained within the Sites.

EOS

The World Wide Web (WWW)

URL (Web Address)

Hyperlinks

EOS

• HTML stands for “Hypertext Markup Language”.

• It is a form of Programming Language which is specifically

used for creating Web Pages.

• HTML is written in the form of Tags which tell the Web

Browsers how to display the information.

Web Browsers are just the

programs that we use to access

the Internet such as Internet

Explorer, Chrome and Firefox

HTML

EOS

HTML: Hypertext Markup Language

Right Click Page, then View Source, to see the HTML code.

EOS

• There are a few different ways to create Web Pages:

1. Text Editors (Notepad for example)

2. Word Processing Packages (Microsoft Word for Example)

3. Graphical Software Package (Front Page or Dreamweaver)

Ways to create web pages

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.

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.

<html>

<body>

Search Engines

</body>

</html>

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 = <H1>

End tag example = </H1>

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 <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?

<html>

<body>

<H1>Search Engines</H1>

</body>

</html>

Heading Tag

EOS

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

1. Browse to the file and re-open 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

<html>

<body>

<h1>Search engines</h1>

Yahoo<br>

Excite<br>

Google<br>

</body>

</html>

<br> creates a line break

<p> and </p> can be used to

begin and end a paragraph

Line Break Tags

Line Break Tag

EOS

• Tag to make text Font Bold:

<B> Hello </B>

• Tag to make text Font Italic:

<I> Hello </I>

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:

<U> Hello </U>

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

</body>

</html>

Hyperlink Tags

The URL of a hyperlink must be

enclosed in quotation marks “”

(Shift + 2)

EOS

Task!

Add the hyperlinks for Excite and Google.

• 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

• 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

What have you learned?

• The following questions are designed to test your HTML

knowledge so far.

• The answer to each question should be written into the

correct place on the crossword found on the next slide.

EOS

1

2

3 4

5

6

7

8

9

10

Unit 8.1 Web Design

Documents

Transcript of Unit 8.1 Web Design