Quarter1_ICT Programming |Week 2

Learning Activity Sheet (LAS) for ICT PROGRAMMING

CHAPTER 2: Introduction to HTML

I. Learning Objectives
At the end of the lesson, the Grade 8 learners must have:

A. Defined website.
B. Discussed the meaning and types of web sites.
C. Compared the different web sites found of the internet.

II. Background Information for Learners

LESSON 1: Understanding Website

What is a Web Site?

A web site is simply a collection of web pages viewable on the vast World Wide Web
(WWW) when using the internet. A web site is a home page and several pages thereafter. A
web site contains collection of media including text, images and photos, video clips, and other
information.

TYPES OF WEB SITES

Name Description
Personal Web sites by individuals like you and me,
with the purpose of personal expression and
publication.
Non-Profit Individual, groups and organizations who
launched their website usually with the
purpose to help others and not expecting
monetary returns from their efforts.

Business Individuals, groups, and organizations

whose purpose is to offer products and
services for certain fees and remunerations

Government Web sites by government and their

departments to facilitate serving and dealing
with their citizens.

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
 Web Page Elements

Title

Heading

Background

Text Links

Image Link

Planning a Web site

Making a good web design plan requires you to ask some basic questions, some of
them are as follow:

1. Set your purpose and goals.

This question requires your personal answer on why you are creating your webs site. Do
you want to create this to give information or to entertain? information will you share?
What entertainment is available?

2. Determine your target audience.

Who do you want to view your web site? Is it your friends? Is it your classmates or
teachers? Is it just for yourself and your family? Your target audience is important on how
you create your own website. This is how you will determine what kind of web site you
will create.

3. Collect ideas for your web site.

Once you are clear with your goals, you will need to determine the requirements to build
the site. Collect information, ideas, photos, videos, and other necessities in accomplishing
your web site goals.

4. Start designing.

Luckily today, there are a lot of templates and applications available to your web site
designs. You can use these templates on your own or you can browse the internet and seek
for designs that you like.

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
5. Test it out!

Testing is important for getting out bugs out and catching details that you might have
missed initially. Make sure your website shows up the way you want it to in all browsers.

Tools that you need to create a web site using HTML

1. Computer

The computer requirement to code in HTML

is very minimal however if you will be
including images and video clips in your web
site, this would mean computers with more
power and memory.
https://edu.gcfglobal.org

2. Text Editor

The text editor is the software that you need to code in HTML. In Windows, Notepad is a
simple and most commonly used program to code for HTML.

https://recomhub.com/blog/wp-content/uploads/2015/01/Notepad-tricks-tips-windows.png

3. Browser

When you start coding in HTML, you would need to check your progress every now and
then using a web browser. A web browser is a program that will interpret and display the
HTML codes on the internet. Web browsers are the most dynamic computer programs. It
means that they are updated and changed more often. There are several web browsers to
choose from and most of them are free.

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
 MOST COMMONLY USED BROWSER

Internet Explorer

Mozilla Firefox

Google Chrome

Safari

Opera

Microsoft Edge

4. Web hosting

A web site needs a host to launch it to the World Wide Web. A web host is a web service
wherein a group of computer web servers are available where your HTML codes will be
uploaded so that they can be viewed in the web.

5. Domain Name

A domain name is the designated name which will eventually become your address and
is managed by a domain registrar so that no duplication happens. This is what you see in
your uniform resource locator (URL) for example www.yahoo.com, this is also the domain
name.

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
 LESSON 2: Starting HTML

What is HTML?

HTML or HyperText Markup Language is a format for creating documents and web
pages. It was originally invented in the 1990s by Tim Berners-Lee. It provides the structure,
layout, and format of a web page. When writing an HTML, you are instructing the web
browser how to display your web pages, how to put the text on the center, what images and
videos and videos to put, use a certain color for a certain text, etc.

HTML is written in the form of tags with angle parenthesis. The tags are usually
created in MS Notepad or any text editor programs.

The Notepad Window

The Notepad window contains elements which are the same with any document
window such as MS Word. The elements of a Notepad window are the Title Bar, Menu Bar,
Scroll Bar, Text Area, and the Control Buttons.

Control Buttons

Title Bar

Menu Bar

Scroll Bar

Text Area

What is a Tag?

Tags are the basic unit or building blocks of an HTML file. Web pages are designed,
and HTML codes are made up of these tags. They control how the HTML does its structuring,
lay outing, and formatting. Tags are enclosed in angle brackets < and >.

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
Structuring and HTML Page

Every HTML page should have the following structure:

1. Add the <html> Tag Pair

The <html> tags identify the documents as an HTML document. The whole HTML file
is enclosed in <html></html>. Every web page should begin and end with these tags.

<html>
</html>

2. Add the <head> Tag Pair

The <head> tag encloses heading information such as page title, indexing information,
date created and other information by the author. The information typed within these tags
will not appear on the heading.

<html>
<head>
</head>
</html>

3. Add the <title> Tag Pair

Whatever you type within the <title> tags will appear in the title bar at the top of the
browser. Search engines use the information found in the title to help identify the page
content.

<html>
<head>
<title></title>
</head>
</html>

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
 4. Add the <body> Tag Pair

You will write most of the contents of your web page within the <body> tags. The
information you type here will appear on your web page.

<html>
<head>
<title></title>
</head>
<body></body>
</html>

Creating HTML Tags and Attributes

HTML code or source code is comprised of a series of commands called tags. To

produce a Web page, you have to make a complete and accurate set of HTML code. The
browser will then interpret these codes and shows formatted text ang graphics on the web
page.

HTML Code

Title

Body

As seen on the sample above, each tag has a beginning tag and an end tag which are
enclosed in brackets. The end tag is structed with backslash (/) as </html> or </body>.

You can type your HTML codes on the left margin, but it is recommended that you
organize your tags with the use of indentions or tabs. This will help you when you are
working on a long and more complicated codes.

View the result

Title

Body

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
 Save Your HTML Page

1. Choose the Save Command

After you have created your HTML code, on the Menu Bar, click the File and click
Save. You can also press Ctrl+S on your keyboard.

Save

2. Define a Storage Location

Create an order of folders to organize your files.

HTML

pages

videos

images

3. Name the File

When the Save As dialog box appears, type the name of your file.

File Name

4. Add the File Extension .html

HTML pages require an .html or .htm file extension.

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
Testing Your Page in a Browser

1. File Explorer

Click the Start button and click the File Explorer.

2. File and Open

Open the file location of your saved output. Right Click on the output, click Open
with and select the browser you want to use to view your web page.

3. Test your Page

The first page of your web page will appear.

4. 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 to reload the updated page.

Refresh

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
Giving Your Page a Title

HTML page requires a title to indicate what the page is all about. It appears on the title
bar of the browser. It is advisable use a brief, relevant, and descriptive title for your web site.

1. Add the <title> Tag Pair

Use the tag pair <title></title> and type the title of your web site between the tags.

Title

2. Test Your Page

Save your file and view the result.

Title

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
Heading Tags

The content of your web document usually has the heading, sub-headings, and the
main body. The heading and sub-headings have assigned font sizes to differentiate one from
the other. The main heading will give the biggest font size and designated as <h1>, the next
heading is <h2> and so on. In most applications, you will probably use at most 3 headings.

1. Add <h> Tag Pair

Contents in the head part are enclosed in <head></head> tags and contents in the body
part are enclosed in <body></body> tags. Inside the body are the heading tags <h></h>.

Main Heading

Heading levels

2. Test Your Page

Save your file and view the result.

Different
heading levels

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
Body Tags

Everything that appears on your web page may it be texts, images, videos, etc. should
be out on the body which is enclosed in <body></body> tags.

1. Add the <body> Tag Pairs

Text and images that you want to appear in your page should be placed within the
tags <body></body>.

Body

2. Test Your Page

Save your file and view the result.

Body

Printing a Web Page and HTML File

After you have created your HTML file, you can print a copy of the HTML code and
the resulting web page.

To print the Web page:

1. View the Web page.

2. Right click on the web page and click Print or click the three vertical dots under
the close button and click Print.

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS
To print the HTML Code:

1. Open the Notepad.

2. On the Menu Bar, click File and click Print.

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 click the three vertical dots under
the close button and click Exit.

III. Links and/or Other References

Jemma Development Group (2010). Harnessing Computers 2nd Edition. Jemma, Inc.,
Philippines.

Prepared by: J-Lynn B. Ramos

ICT Teacher, ANS JHS