1 The Internet and the World Wide Web

Learning Objectives

You:
Must create folders to store work produced during this unit and begin to code a basic web page using HTML. (Developing/Level 4)
Should complete a basic HTML web page. (Meeting/Level 5)
Could do all of the above and complete the extra HTML exercises independently. (Exceeding/Level 6)

Learning Outcomes

  • Create folders to store our work for this unit.
  • Understand what the World Wide Web is.
  • Be able to use basic HTML to create a simple web page.

Keywords

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.

  • Web site
  • Line break
  • www
  • HTML
  • Web page
  • Tags
  • Italic
  • Heading
  • Bold
  • Notepad
  • Underline
  • Hyperlinks
  • URL

Starter

Create your folder – We need to create folders where we will save the work we do in this unit.

  1. Open your Year 9 folder
  2. Open your Computing folder
  3. Create a new folder called Web Design
  4. To create a new folder – click in a blank area, right click, select New, then Folder.
  5. All work for this unit must be saved in this folder.

What is the World Wide Web?

The World Wide Web is a 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.

This video will tell you a little about the World Wide Web and its creator, Sir Tim Berners Lee.

 


Main

HTML

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

Ways to create a web page

There are a few different ways to create Web Pages:

  • Text Editors – Notepad
  • Word Processing Packages – MS Word
  • Web Editing Software – Serif Web Plus X8

Activity – Creating a web page

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

What to do? 

Open Notepad.   Select the Windows Button, then all programs, then accessories, then Notepad.  Open your Web Design folder

KEEP BOTH OF THESE OPEN

Now – let us make a web page

Type the text you will see on the next slide into Notepad.

COPY THE TEXT IN BOLD EXACTLY

<html>
<body>
Search Engines
</body>
</html>

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

In order to turn your text file into a HTML file you MUST follow these instruction EXACTLY.
In Notepad

  • File ,Save As
  • Name your Web Page as Search Engines.htm
  • Save the file into your Web Design folder.

Opening and Viewing Your Web Page

  • Browse to your Web Design folder.
  • Look for your Search Engines.htm file.
  • Double click the file to open it.
  • Keep your web page open for the next task.

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 tell the web browser how to display the text sitting between the start and end tags.

Adding a Heading to your Page

Open your Search Engines.htm in Notepad, you need to right click the search engines file  then choose open with Notepad.  This SHOULD 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.

Save your file (do not SAVE AS, just save).

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

Viewing the changes you made

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.

Line break tag

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

Hyperlink Tag

Task – Add the hyperlinks for Google and Excite

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

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

Use the following links to add more code to your web site.

 


Homework

There is a new browser out called Vivaldi.  Do a little research and find out all you can about this browser.