Term 2Grade 7 Computer Studies

UNIT: BASIC HTML

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

1

Unit Overview:

By the end of this unit, students should be able to:

•Use notepad (text editor)to author an HTML document.

•Be able to use basic tags to denote paragraphs, emphasis or special type.

•Add images to documents.

•Use a table for layout.

•Apply colours to your HTML document.

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

Timeframe and Instructions

• This presentation covers some of the activities found in the pdf file‘ tkaumas module 3 html basics’. Each slide consist of the activity, the model and the outcome of the webpage/s.

• There should be 3 student’s handout that will accompany this presentation.

• Please refer to the handout and this presentation to complete the activities on the slides.

• Please ask your parents to assist you in dropping off your answered activity at the front office. Alternatively a scanned copy can be emailed to postofficebox@pomgrammar.ac.pg

3

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

WEEK 1

TOPIC: INTRODUCTION TO HTML

4

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

Week 1 - Topic: Introduction to HTML• What is a HTML file?

• Text Editor

• What are HTML tags?

• Logical and Physical tags

5

Topic Outcomes:

By the end of the PowerPoint presentation, students will be able to:

• understand what HTML is

• differentiate between the different tags used in webpage designing.

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

What is a html file?• HTML is a language format that tells a computer how to

display a web page.

• A web page is a hypertext document connected to the World Wide Web. These documents are written in HTML (hypertext markup language).

• A Web site is a collection of pages. A Web page is an individual HTML document.

6

This is an example of hypertext markup language (html)© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

Text Editor

• A text editor is a program that allows you to type plain texts without formatting it.

• An example of a simple text editor is Notepad.

• The examples that are shown in Notepad.

• Notepad is the default Windows text editor. On most Windows systems, click your Start button and choose Programs then Accessories. It should be a little blue notebook.

7

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

What are HTML tags?

• HTML tags are used to mark-up HTML elements

• HTML tags are surrounded by the two characters < and >

• The surrounding characters are called angle brackets

• HTML tags normally come in pairs like <b> and </b>

• The first tag in a pair is the start tag, the second tag is the end tag

• The text between the start and end tags is the element content

8

Start tagEnd tag

Element content

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

Logical Tags

• Logical tags are designed to describe (to the browser) the enclosed text’s meaning.

• Examples of logical tags:

9

Logical tag Meaning

<abbr> Defines an abbreviation

<acronym> Defines an acronym

<samp> Defines sample computer code

<strong> Defines strong text

<q> Defines a short quotation

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

Physical Tags• Physical tags provide specific instructions on how to display the text

they enclose.

• Physical tags were invented to add style to HTML pages.

• Examples of physical tags:

10

Physical Tags Meaning

<b> Makes the text bold

<big> Makes the text usually one size bigger than what’s around it

<i> Makes the text italicised

<small> Makes the text smaller

<sup> Makes superscripted text

<sub> Makes subscripted text

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

© © Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

11

Activity

WEEK 2

TOPIC: SAVING AND VIEWING A WEBPAGE

12

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

Week 2 - Topic: Saving and Viewing a Webpage

• Saving a Notepad

• Viewing a Webpage

13

Topic Outcomes:

By the end of the PowerPoint presentation, students will be able to:

• understand the steps of saving a Notepad.

• access and view a webpage.

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

How to save Notepad

Step 1: Type the html code in Notepad

14

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

How to save Notepad

Step 2: Go to the File tab and select Save As.

15

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

How to save NotepadStep 3: Type a file name of your choice. The one below is mypage. Be sure to type .html after the name you have given (mypage.html). This will allow the Browser to locate the html file that you have just created. Then click Save.

16

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

How to save NotepadStep 4: Once the file has been saved, it should now show icon. This means that the file can be viewed in the browser.

Step 5: Double click on the icon to open the file. The webpage should look like the diagram below.

17

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT

Using Notepad

Title

Element Content Element Content that is bolded

© Copyright 2020 Port MoresbyGrammar School Limited – All RightsReserved PREPARED BY TKAUMAS – IT DEPARTMENT