Scribd
Upload
14 views10 pages

D Computing Fundamentals Quarter 3 Module 4 Tanongtanong

This document is a module on starting HTML, covering essential topics such as testing a web page in a browser, using heading and body tags, and creating a basic HTML page. It includes pre-assessment questions, objectives, and exercises to reinforce learning. The document also provides references for further reading on HTML elements and browser compatibility.

Uploaded by

Alicia Tenio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views10 pages

D Computing Fundamentals Quarter 3 Module 4 Tanongtanong

This document is a module on starting HTML, covering essential topics such as testing a web page in a browser, using heading and body tags, and creating a basic HTML page. It includes pre-assessment questions, objectives, and exercises to reinforce learning. The document also provides references for further reading on HTML elements and browser compatibility.

Uploaded by

Alicia Tenio
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

9

Internet and Computing


Fundamentals 9
Quarter 3 – Module 4:
Starting HTML

Prepared by: Mary Cherylie G. Tanongtanong


TABLE OF CONTENTS

Lesson 2: Testing Your Page in a Browser


Giving Your Page a Title
Heading Tags
Body Tags
Exiting the Web Page and HTML File

Pre-assessment 1
Objectives 2
Testing Your Page in a Browser 2-3

Giving Your Page a Title 3-4

Heading Tags 4-5


Body Tags 5-6

Exiting the Web Page and HTML File 7

Post-Assessment (Exercise I & Exercise II) 7-8

References 8
Pre-assessment

Multiple Choice: Choose the correct answer.

1. What are the two parts of HTML files?


A. Heading and Body C. Heading and Title
B. Body and Title D. Paragraph and Body

2. It helps in defining the hierarchy and the structure of the web page content.
A. Body C. Title
B. Headings D. Paragraphs
3. It appears on the title bar of the browser.
A. Body C. Title
B. Headings D. Paragraphs
4. This heading must have the biggest font size.
A. <h1> C. <h6>
B. <h2> D. <h4>
5. This heading will have the smallest font and least essential among the headings.
A. <h3> C. <h6>
B. <h1> D. <h5>
6. What tag defines the main content of the HTML document?
A. Title C. Body
B. Head D. Paragraph
7. Everything that appears on your Web page may it be the texts, the images, the videos, etc.
should then be put on this tag.
A. Head C. Title
B. Paragraph D. Body
8. What is the syntax for the body tag?
A. <body><body> C. <body><body/>
B. <body></body> D. None of the above
9. These engines use the headings to index the structure and content of your web pages.
A. Game engine C. Software framework
B. Search engine D. Layout engine
10. Don't use headings to make text BIG or bold.
A. True C. Maybe
B. False D. None of the above

1
OBJECTIVES:

1. Identify the steps in testing your page in a browser


2. Identify the heading tags and body tags
3. Create a basic HTML page

Testing Your Page in a Browser

There are many widely used web browsers, including Internet Explorer, Firefox, Chrome,
Safari and Opera. And there are dozens of mobile browsers available, with more in development
as each new device arrives on the shelves. But, not all browsers, and versions of those browsers,
work the same.

Below are the steps in testing your page in a browser:


1. Go to that file location, right click on that file, click open with and select the browser of
your choice.

Browsers

2. Test the page. The first page of your web page will appear.

2
3. Refresh your Browser. If you want to change the code in Notepad for any adjustments while
the web page is open, click the Refresh button, press F5 or right click then click Reload.

Refresh button

Reload

Giving your Page a Title

Each HTML page requires a title to indicate what the page describes. It appears on the title bar
of the browser. You have to use a title that is brief, relevant and descriptive of the content.

1. Add the <title> Tag Pair


You can use the tag pair <title></title> and type your title between the tags.

<html>
<head>
<title> Latest IT Books</title> Title
</head>
<body>
Office productivity with MS Office 2007, Internet and
Communication Technology for Grade 7-9, Internet and Computing Fundamentals for
Grade 7-9 and Computer Hardware Servicing for Grade 8
</body>
</html>

3
2. Test Your Page
Save your file and view the result.

Title

Heading Tags

Headings help in defining the hierarchy and the structure of the web page content.

HTML files are divided into two parts: the heading and the body. A document has a main
heading and sub-headings and they are assigned font sizes to differentiate one from the other.
The main heading will have the biggest font size and designated as <h1>, the next heading is
<h2> and so on up to <h6>. The heading <h6> will have the smallest font and least essential
among the headings. In most applications however, you would probably use 3 headings at the
most.

1. Add <h> Tag Pair

<html>
<head> Main heading
<title> Latest IT Books</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
Heading levels
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

2. Test Your Page


Save your file and view the result.

4
Different
heading
levels

Note: Only use one <h1> per page - this should represent the main heading/subject for the whole
page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

Browser Support

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.
Users often skim a page by its headings. It is important to use headings to show the document
structure. <h1> headings should be used for main headings, followed by <h2> headings, then
the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Body Tags

The HTML <body> tag defines the main content of the HTML document or the section of
the HTML document that will be directly visible on your web page. This tag is also commonly
referred to as the <body> element.
Everything that appears on your Web page may it be the texts, the images, the videos,
etc. should then be put on the body which is enclosed in <body></body> tags.

Syntax
In HTML, the syntax for the <body> tag is:

<body>
</body>

5
1. Add the <body> Tag Pair

Body

2. Test Your Page


Save your file and view the result.

Body

Note:
The HTML <body> element is found within the <html> tag.
The most common elements to be placed in the HTML <body> tag
are: <h1>, <p>, <div>, <table> tags.

Browser Compatibility
 The <body> tag has basic support with the following browsers:
 Chrome
 Android
 Firefox (Gecko)
 Firefox Mobile (Gecko)
 Internet Explorer (IE)
 Edge Mobile
 Opera
 Opera Mobile
 Safari (WebKit)
 Safari Mobile

6
Exiting the Web Page and HTML File

1. Click the Close button on the Notepad title bar or on the Menu Bar, click File and click Exit.

2. Click the Close button on the Web page or on the Menu bar, Click File, and click Exit.

Act 3.2
In a long bond paper with ½ margin in all sides. Create a basic HTML page
containing five sentences about yourself.

Post-assessment

Exercise 1
Instructions:
1. Use one whole yellow pad. Copy and write your answer in the box.
2. Add six headings to the document with the text "Cheer up".
3. Start with the most important heading (the largest) and end with the least important heading
(the smallest).

<html>
<body>

</html>
</body>

Exercise 2
Instructions:
1. Use one whole yellow pad. Copy and write your answer in the box.
2. Mark up the text with appropriate tags:
"Universal Studios Presents" is the most important heading.
"Jurassic Park" is the next most important heading.
"About" is the third most important heading.
The last sentence is just a paragraph.

7
Start with the most important heading (the largest) and end with the least important heading
(the smallest).

Universal Studios Presents

Jurassic Park

About

On the Island of Isla Nublar, a new park has been built:


Jurassic Park is a theme park of cloned dinosaurs!!

References
https://www.practicalecommerce.com/How-to-Test-a-Website-on-Different-Browsers
https://www.techonthenet.com/html/elements/body_tag.php
https://www.w3schools.com/html/html_headings.asp
https://www.w3schools.com/tags/tag_hn.asp

You might also like