Scribd
Upload
1K views13 pages

Ict-Webpage 10 q1 w5 Mod5

Uploaded by

Lemuel Ramos Rempillo
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
1K views13 pages

Ict-Webpage 10 q1 w5 Mod5

Uploaded by

Lemuel Ramos Rempillo
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/ 13

Republic of the Philippines

Department of Education
National Capital Region
DIVISION OF CITY SCHOOLS – MANILA
Manila Education Center Arroceros Forest Park
Antonio J. Villegas St. Ermita, Manila

Information and Communications


Technology (ICT)

Grade 10 Webpage Design


Special Science Course

Quarter 1 Week 5
Module 5

UNDERSTANDING WEBPAGE STRUCTURE


HOW TO USE THIS MODULE?
Before starting the module, I want you to set aside other tasks that will disturb
you while enjoying the lessons. Read the simple instruction below to successfully
enjoy the objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated in every page on this
module
2. Write on your notebook or any writing pad the concepts about the lessons.
Writing enhances learning, which is important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let you facilitator/guardian assess your answers.
5. Analyze conceptually the post-test and apply what you have learned.
6. Enjoy studying!

PARTS OF THE MODULE

 Expectations - These are what you will be able to know after completing
the lessons in the module.
 Pre-test - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.
 Looking Back - This section will measure what learnings and skills that you
understand from the previous lesson.
 Brief Introduction-This section will give you an overview of the lesson.
 Activities - These are activities designed to develop critical thinking and
other competencies. This can be done with or without a partner depending
on the nature of the activity.
 Remember - This section summarizes the concepts and applications of the
lessons.
 Checking your Understanding - It will verify how you learned from the
lesson.
 Post-test - This will measure how much you have learned from the entire
module.

2
LESSON 1: CREATING WEBPAGE STRUCTURE

EXPECTATIONS
Upon completion of the module, learners should be able to:
 describe tags and attributes;
 label the structure of a tag;
 identify container and empty tags; and
 outline the basic structure of a webpage.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. What are the hidden keywords within a webpage that define how the browser
will display the contents?
a. attributes c. tags
b. elements d. values
____ 2. What allows a tag to be customized and is always specified in the start tag?
a. attributes c. tags
b. elements d. values
____ 3. Which tag that forms the basic structure of an HTML file contains information
about the document that will not appear in the actual webpage?
a. <body> b. <head> c. <html> d. <title>
____ 4. Which tag that forms the basic structure of an HTML file contains all the visible
contents to be displayed in the webpage?
a. <body> b. <head> c. <html> d. <title>
____ 5. Which tag that forms the basic structure of an HTML file identifies the beginning
and end of the document?
a. <body> b. <head> c. <html> d. <title>
____ 6. Which tag that forms the basic structure of an HTML file defines the title that
will appear in the title bar of the web browser?
a. <body> b. <head> c. <html> d. <title>
____ 7. Which kind of tag wraps around text or graphics and comes in a set?
a. container b. empty c. end d. start
____ 8. Which kind of tag stands alone and do not require end tags?
a. container b. empty c. end d. start
____ 9. In an HTML layout, which part defines the navigation links?
a. <article> b. <details> c. <footer> d. <nav>
____ 10. In an HTML layout, which part defines an independent, self-contained
content?
a. <article> b. <aside> c. <header> d. <section>

3
LOOKING BACK TO YOUR LESSON

A. Directions: Label the parts of an HTML element.

B. Directions: Label the parts of a Notepad window.

4
BRIEF INTRODUCTION

A website’s structure refers to how the website is outlined and how the contents are
organized in the webpage. This includes how the individual webpages are linked to one
another. It is very important that visitors can easily find what they are looking for. This is the
reason why the homepage is important. It should be easy to navigate and explore.

What is a Tag?

Tags serve as the building blocks of an HTML document. They may also be called as
code since writing it may be referred to as coding. They are hidden keywords within a webpage
that define how the browser will display the contents. There are many tags used in creating
webpages and each tag has its own use. Some are used in formatting texts, images, tables,
and layouts to name a few.

Structure of a Tag

There four sets of HTML tags needed to form the basic structure for every HTML file
are:

 Definition <html> </html>


This defines the document as a webpage. It also identifies the beginning
and end of the HTML document. All the other tags must be enclosed in
this tag.
 Header <head> </head>
This contains information about the document that will not appear on the
actual webpage, such as the title of the document, the author, stylesheet
used, and the meta tags.
 Title <title> </title>
This defines the title that will appear in the title bar of the web browser.
This tag must be placed inside the head tags.
 Body <body> </body>
This contains all the information and visible contents of the webpage.
This includes images, links, and plain text. They must be placed inside
the body tags.

Most tags have two parts, an opening and closing part. For example, <html> is the
opening tag and </html> is the closing tag. Always remember that the closing tag has the
same text as the opening tag, but with a forward slash ( / ) character. However, there are a
few tags that are an exception to this rule. These tags do not require a closing tag. An example
is the <img> tag which is used for inserting images.

5
Also, notice that tags are enclosed in angle brackets < and > and an example of it is
<html>. Below is an illustration of how a tag is used and its parts.

This is how the browser will display the codes written above.

Container and Empty Tags

There are two kinds of tags: container and empty. The container tag always wraps
around text or graphics and comes in a set. It has start and end tags with the content in
between. On the other hand, the empty tags stand alone and do not require the end tags.
They do not have to be wrapped around text.

Example of container tags Example of empty tags


 <p>This is a paragraph.</p>  <br>
 <b>This is used to display bold text.</b>  <hr>
 <u>This is used to display underlined text.</u>  <img src=”sample.jpg”>

HTML is also not case sensitive. It can be written using either lowercase or uppercase.
<HTML> is the same as <html>. To maintain consistency, decide which one to use. It is highly
recommended not to use a combination of the two.

6
A whole HTML file is always enclosed in <html> </html>. See the example below
which has the appropriate HTML start and end tags.

This is how the browser will display the codes written above.

What are Attributes?

HTML attributes provide additional information about HTML elements. Attributes allow
a tag to be customized and are always specified in the start tag, for example <img
src=”sampleimage.jpg”> or <p align=”left”> … </p>. They are usually assigned with a
value using the equal sign, such as border=”0” or width=”50%”, but there are also some
attributes that only need to be declared in the tag like this: <hr noshade>.

Majority of attributes are optional for most tags. They are only used when changing
something about the default way a tag is displayed in the browser. However, some tags such
as the <img> tag has required attributes such as src and alt which are basically needed for
the browser to display the webpage properly.

7
Common Attributes
href attribute It defines a hyperlink and specifies the URL of the webpage the link
goes to.
src attribute It specifies the path to the image to be displayed.
width and height It specifies the width and height of the image.
attribute
alt attribute It specifies an alternate text for an image if the image cannot be
displayed. This may be because of slow connection, or an error in the
src attribute, or if the user uses screen reader.
id attribute It specified a unique id for an HTML element (the value must be unique
within the HTML document). It is mostly used to point to a style in a
stylesheet.
class attribute It specifies one or more classnames for an element. It is mostly used
to point to a class in a stylesheet.
style attribute It is used to add styles to an element, such as color, font, size, etc.
lang attribute It is used to declare the language of the webpage. This is meant to
assist search engines and browsers.

Basic Page Structure

When designing a webpage, it is important to consider which information has the most
importance in achieving the site goals. It is essential to create a simple outline to easily create
the webpage. HTML layout has several semantic elements that define the different parts of a
webpage:
<header> Defines a header for a document or a
section
<nav> Defines a set of navigation links
<section> Defines a section in an HTML document
<article> Defines an independent, self-contained
content
<aside> Defines content aside from the content
and serves as a sidebar
<footer> Defines a footer for a document or a
section
<details> Defines additional details that the user
can open and close on demand
<summary> Defines a heading for the <details>
element

8
ACTIVITY: Identification

Directions: Match Column A with the correct answer on Column B, write only the letter of
the correct answer on the space provided.

Column A Column B
_____ 1. It provides additional information to tags. a. Angle brackets
_____ 2. End tags have this additional character. b. Attributes
_____ 3. It is a stand-alone kind of tag that do not require end tags.
c. Body tag
_____ 4. It encloses all the tags in the HTML file.
_____ 5. It always comes in a set with start and end tags. d. Container tags
_____ 6. They are the basic building blocks of HTML. e. Content
_____ 7. Everything between the start and end tag.
f. Empty tags
_____ 8. This tag contains all the information and visible contents
of the webpage. g. Equal sign
_____ 9. Attributes are usually assigned with a value using this. h. Forward slash
_____ 10. This attribute defines a hyperlink and specifies the URL
i. Href
of the webpage the link goes to.
j. HTML tag
k. Tags

REMEMBER

Tags serve as the building blocks of an HTML document They are hidden keywords
within a webpage that define how the browser will display the contents. HTML attributes
provide additional information about HTML elements. Attributes allow a tag to be customized
and are always specified in the start tag.

The four sets of HTML tags needed to form the basic structure for every HTML file
are the <html> </html> tag, <head> </head> tag, <title> </title> tag, and <body>
</body> tag. Most tags have two parts, an opening and closing part. The closing tag has the
same text as the opening tag, but with a forward slash ( / ) character.

There are two kinds of tags: container and empty. The container tag always wraps
around text or graphics and comes in a set. It has start and end tags with the content in
between. On the other hand, the empty tags stand alone and do not require the end tags.
They do not have to be wrapped around text

HTML layout has several semantic elements that define the different parts of a
webpage. The basic parts include the <head>, <nav>, <section>, <article>, <aside>, and
<footer>.

9
CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. Samantha would like to display an image in the webpage she is creating. She
knows the tag to be used is the <img> tag. Which attribute is required so the
browser can display the webpage properly?
a. alt c. src
b. href d. style
____ 2. Bryan would like to indicate title and author of the website he is developing. In
which tag should it be enclosed with?
a. <body> </body> c. <html> </html>
b. <head> </head> d. <title> </title>
____ 3. Sonny is trying to debug the HTML document because the web browser is not
displaying the contents of his webpage. Which of the following is the possible
reason?
a. He did not use the <body> tag. c. He did not use the <title> tag.
b. He did not use the <head> tag. d. b and c
____ 4. Jamaine is creating an outline of the website she is developing. She wants to
provide a section that links to other pages or parts within that page. Which tag
does she need to use?
a. <article> b. <aside> c. <nav> d. <section>
____ 5. In addition, Jamaine would like to place a section in the page that consists of
content that is related to the main article in her page and can also be placed as a
side bar. Which tag does she need to use?
a. <aside> b. <head> c. <nav> d. <section>

10
POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. What allows a tag to be customized and is always specified in the start tag?
a. attributes c. tags
b. elements d. values
____ 2. What are the hidden keywords within a webpage that define how the browser
will display the contents?
a. attributes c. tags
b. elements d. values
____ 3. Which tag that forms the basic structure of an HTML file contains all the visible
contents to be displayed in the webpage?
a. <body> b. <head> c. <html> d. <title>
____ 4. Which tag that forms the basic structure of an HTML file contains information
about the document that will not appear in the actual webpage?
a. <body> b. <head> c. <html> d. <title>
____ 5. Which tag that forms the basic structure of an HTML file defines the title that
will appear in the title bar of the web browser?
a. <body> b. <head> c. <html> d. <title>
____ 6. Which tag that forms the basic structure of an HTML file identifies the beginning
and end of the document?
a. <body> b. <head> c. <html> d. <title>
____ 7. Which kind of tag stands alone and do not require end tags?
a. container b. empty c. end d. start
____ 8. Which kind of tag wraps around text or graphics and comes in a set?
a. container b. empty c. end d. start
____ 9. In an HTML layout, which part defines an independent, self-contained content?
a. <article> b. <aside> c. <header> d. <section>
____ 10. In an HTML layout, which part defines the navigation links?
a. <article> b. <details> c. <footer> d. <nav>

11
ANSWER KEY

Pre-test
1. C 3. B 5. C 7. A 9. D
2. A 4. A 6. D 8. B 10. A

Looking Back To Your Lesson


A.
1. Opening / Start tag 2. Content 3. Closing / End tag
B.
1. Title bar 2. Control button 3. Menu bar 4. Text are 5. Scroll bar

Activity
1. B 3. F 5. D 7. E 9. G
2. H 4. J 6. K 8. C 10. I

Checking Your Understanding


1. C 2. B 3. A 4. C 5. A

Post-test
1. A 3. A 5. D 7. B 9. A
2. C 4. B 6. C 8. A 10. D

REFERENCES

Books:
Web Design 3rd Edition by Jemma Development Group

Online Sources:
http://www.simplehtmlguide.com/whatishtml.php
http://www.simplehtmlguide.com/essential.php
https://www.w3schools.com/html/html_attributes.asp

Photo Credits:
Notepad window print screen
Sample.html in Notepad print screen
Sample.html in MS Edge print screen
Sample2.html in Notepad print screen
Sample2.html in MS Edge print screen

12
Acknowledgement
First Edition 2020
Republic Act 8293, section 176 states that: No copyright shall subsist in any
work of the Government of the Philippines. However, prior approval of the government
agency or office wherein the work is created shall be necessary for exploitation of such
work for profit. Such agency or office may, among other things, impose as a condition
the payment of royalties.

Borrowed materials (i.e. songs, stories, poems, pictures, photos, brand names,
trademarks, etc.) included in this module are owned by their respective copyright
holders. Every effort has been exerted to locate and seek permission to use these
materials from their respective copyright owners. The publisher and authors do not
represent nor claim ownership over them.

Published by the Department of Education


Secretary: Leonor Magtolis Briones
Undersecretary: Diosdado M. San Antonio

Development Team of the Module

Writer: Jessica Frances B. Dominguez, MTE


Teacher, Manuel G. Araullo High School

Editor: Ariel D. Tosio


Education Program Supervisor – TLE-TE/Voc

Reviewer/Validator: Anthony H. Ducta


Head Teacher, Manila Science High School

Management Team: Malcolm S. Garma, Regional Director


Genia V. Santos, CLMD Chief
Dennis M. Mendoza, Regional EPS in Charge of LRMS
and Regional ADM Coordinator
Maria Magdalena M. Lim, CESO V
Schools Division Superintendent
Aida H. Rondilla, Chief-CID
Lucky S. Carpio, Division EPS in Charge of LRMS and
Division ADM Coordinator

13

You might also like