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)
- 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.
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
- Web page
Create your folder – We need to create folders where we will save the work we do in this unit.
- Open your Year 9 folder
- Open your Computing folder
- Create a new folder called Web Design
- To create a new folder – click in a blank area, right click, select New, then Folder.
- 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:
- 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.
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
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.
- 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.
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
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:
- Browse to the file and re-open it
- 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)
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.html
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.
There is a new browser out called Vivaldi. Do a little research and find out all you can about this browser.