Key Word Vocabulary. Web Site. Line Break. Web Page WWW HTML. Heading. Tags. Italic. Notepad. Bold. Underline Hyperlinks URL EOS

Size: px

Start display at page:

Download "Key Word Vocabulary. Web Site. Line Break. Web Page WWW HTML. Heading. Tags. Italic. Notepad. Bold. Underline Hyperlinks URL EOS"

Randolph Norris
7 years ago
Views:

1 Unit 8.1 Web Design

2 Key Word Vocabulary 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. WWW Tags Line Break Italic HTML Web Site Heading Web Page Bold Notepad Underline Hyperlinks URL

3 Lets create our folders! 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 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

4 The World Wide Web (WWW) 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.

5 URL (Web Address) Hyperlinks

6 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

7 HTML: Hypertext Markup Language Right Click Page, then View Source, to see the HTML code.

8 Ways to create web pages 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)

9 Activity! 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.

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

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

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

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

14 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 Tags indicate to the Browser how to display the text sitting between the start and end Tags

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

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

17 How to view changes you make 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.

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

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

20 Hyperlink Tags <html> <body> <h1>search engines</h1> <B><a href=" Yahoo</a></B><br> <I>Excite</I><br> <U>Google</U><br> </body> </html> The URL of a hyperlink must be enclosed in quotation marks (Shift + 2) Task! Add the hyperlinks for Excite and Google.

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

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

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

CREATING WEB PAGES USING HTML INTRODUCTION

CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual