LEARNING RESOURCE

SPA - MEDIA ARTS

THE INTERNET & THE WORLD WIDE WEB

QUARTER 3 - MODULE 1
 LEARNING RESOURCE for Media Arts

Media & Communication

The Internet and the World Wide Web 1

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 Learning Resource are owned by their respective copyright holders.
Reasonable efforts have 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 National Commission for Culture and the Arts

Development Team of the Learning Resource

Writers: Katrina Juane
Editors:
Reviewers:
Illustrator:
Graphic Designer: Erika V. Garalde, MSc
Management Team: Marichu Tellano and Henrietta Kangleon (NCCA), Tanya P. Lopez
(PerfLab)

For inquiries or feedback, please write or call:

NATIONAL COMMISSION FOR CULTURE AND THE ARTS
633 General Luna Street, Intramuros, Manila
E-mail: [email protected]
Trunkline: (02) 85272192 • 8527-2202 • 8527-2210 • 8527-2195 to 97 • 8527-2217 to 18
SPA-MEDIA ARTS – Grade 8
Quarter 3 – The Internet and the World Wide Web 1

Objective
Welcome to Quarter 3! We are halfway through the school year and so many topics about
media arts have been explored. This quarter, you will learn more about the Internet and the
World Wide Web and prepare you in creating your first web page by discovering about the
online world, how the internet media and communication have evolved throughout the years,
and the different creative and technical sides of creating a website.

To be able to acquire the necessary hands-on experience, a basic computer with a free Text
Editor software is recommended so you can try the codes yourself as you go through the
module.

At the end of this quarter you will be able to:

1. Discuss the history of the internet in the Philippines;
2. Explain how the developments of internet media changed the way we communication;
3. Relate the different internet safety tips and netiquette;
4. Differentiate the basic HTML codes to create a webpage;
5. Develop a website based on the lessons learned in web development.

So, if you are ready, let us begin!

Review
Last quarter, you were able to demonstrate a better understanding of more advanced concepts
and principles of photography. You were able to identify different techniques and processes,
learned how to use simple lighting to illustrate different effects on a subject and apply your
learnings through your own photographs. Make sure to save those awesome photographs
because you will be using these for your portfolio project at the end of this term.

2
 INTRODUCTION

Long before Google was invented, our parents and grandparents relied on big bulky
encyclopedias for information, yellow pages for directories, the radio and television for news,
the good ‘ol mailman for letters and the Nintendo, Betamax, and board games as a source of
entertainment.

With the advancements of technology and the proliferation of different and innovative tools
using the internet, people now enjoy countless ways to search for content, connect with friends
and family, purchase different products, watch movies and TV series, and listen to music.

The internet has opened an entire new world of opportunities for everyone around the world,
and has improved our quality of life.

3
 LESSON 1
The Internet in the Philippines

The internet in the Philippines was first established on March 29, 1994 by a Filipino engineer,
Benjie Tan who was then working for ComNet. He established the Philippine’s first 64 kbit/s
internet connection at a PLDT network center. He posted a short message to a newsgroup to
alert the Filipinos overseas about his success.

The message read: “As of March 29,1994 at 1:15

am Philippine time, unfortunately 2 days late due
to slight technical difficulties, the Philippines was
FINALLY connected to the Internet via SprintLink.
The Philippine router, a Cisco 7000 router, was
attached via the services of PLDT and Sprint
communications to SprintLink’s router at Stockton
Ca. The gateway to the world for the Philippines
will be via NASA Ames Research Center. For
now, a 64K serial link is the information highway
(Image source https://twitter.com/enjoyGLOBE/
to the rest of the Internet world.”
status/449872764405428224/photo/1)

Using the internet has become part of our daily activities. Almost everything that we do is
online whether for entertainment, news, or productivity. It has become an integral part of our
culture, and in our society. Different individuals, businesses and institutions have started to
adapt to this digital change that has become widely accepted.

The Internet became an avenue for online content and it became a virtual place for people
to share text, videos, photos and use it to send messages and converse with anyone from
other parts of the world. Different websites were developed that enabled us to digitally share
content, sell products and services in different platforms, socialize and connect with friends
and family.

Statistics
According to statistica.com, 70.7% of the population in the Philippines was using the internet
as of 2019. That’s equivalent to 79 million internet users. The Philippines is ranked as the 12th
country with most internet users in the world. It is estimated by year 2025 that there will be an
increase of 77.1% of the population using the internet.

4
https://wearesocial-net.s3.amazonaws.com/uk/wp-content/uploads/sites/2/2020/04/10-Increases-in-Social-
Media-by-Country-DataReportal-20200422-Digital-2020-April-Global-Statshot-Report-Slide-48.png

Going Digital
Going digital has become a norm, especially during the COVID-19 pandemic wherein schools,
businesses and other establishments were forced to close due to the government mandate
of a countrywide lockdown. Everyone had to adapt to the new normal of doing things, which
is doing mostly everything online. Employees had to work from home and communicate with
colleagues through email, chat and video conferences. Students had to participate in online
classes, and people embraced the concept of online selling and shopping more.

According to the survey by We Are Social and Hootsuite, the Philippines has seen a rise in the
use of the internet, smart phones, and tablets even before the COVID-10 pandemic began.
And because of the new normal way of living, there is generally going to be an increase in
internet usage from different types of users.

5
 LESSON 2
The Internet & Media Communication

The internet media is continuously growing because of the increasing number of people who
have started to adapt to these technological advances and choose digital channels instead
of traditional ones. Online communication was established during the 1970’s when posting of
news or articles in different online newsgroups started. Since then, the developments of online
communication evolved in tremendous ways that changed the way the internet has influenced
us in our daily lives.

1971: Email Email was developed in 1971 by Ray Tomlinson.

1971: Project Project Gutenberg, established by Micheal Heart in 1971, was the first
Gutenberg and provider of free online electronic books (eBooks) and is considered as
eBooks the oldest digital library.
1978: The Bulletin Board System was one of the first forms of social media. This
Bulletin Board system allowed users to connect online and upload or download data,
System (BBS) read news articles, and exchange messages with other users through
message boards.
1988: Instant Also known as the IRC, this is the first program for modern instant
Messaging Time messaging for PCs.
1997 - 2001: During this period, different social media platforms have emerged such as
Different Social the Sixdegrees, Asianavanue, Migente and Blackplanet in which allowed
Media Platforms users to personalize their pages and add profile photos and friends.
2002: Friendster Frienster started in 2002 and has more than a hundred million registered
users, which was mostly from Asia. Users can discover friends, send
testimonials and messages to other users in different parts of the world.
2003: LinkedIn LinkedIn was established in 2003 and is used by professionals to build
networks for business and create an online resume. LinkedIn’s services
have evolved throughout the years and now allows you to access
knowledge through shared articles and find new business and career
opportunities.
2003: The Wordpress was created by Matt Mullenweg and Mike Little. It started
Wordpress as a blogging platform and was well received when it was first launched
in 2003. This created a whole lot of new opportunities for developers,
designers, writers and web publishers to create a new venue to share
content.

6
2004: MySpace MySpace is a social media platform which allows users to connect and
share content. It was the most famous social media platform in the world
by 2006. Aside from its instant messaging platform, users were allowed
to embed videos and music in their pages.
2004: Facebook Facebook was first launched in 2004 for Harvard students, and publicly
by 2008. It has become the most popular social media platform and
continues to grow. It allows users to share content and connect with
other people. Facebook is now also an integral tool for marketing for
businesses, and allows other people to sell products and services as
well.
2005: YouTube YouTube was launched in 2005 and became one of the first major sharing
sites for video platforms. Users can upload different videos and embed
them in other sites or blogs. This became one of the most popular tools
in sharing content of short documentaries, films, tutorials, unboxing, and
even vlogs.
2006: Twitter Twitter came in 2006 and is now considered as a microblog. Different
news sites also use Twitter as a platform to share articles.
2010: Instagram Instagram is mainly a photo sharing site that uses visual communication
to connect to people. It allows users to share photos and videos.

The proliferation of these different online tools for communication opened up a lot of creative
opportunities for everyone to communicate, share stories and ideas that can be easily
accessible for everyone in the world.

7
 LESSON 3
Internet Safety & Netiquette

https://www.freepik.com/free-photo/hands-with-laptop-virtual-world-map_979060.
htm#page=1&query=internet&position=36

The internet is a space where people can easily get information even from across the world all
in one click. As convenient as this may seem for most, it is important to keep in mind that there
are predators lurking online and look for potential targets. Revealing personal information
online such as your phone numbers, address, current locations, passwords, and even the
content that you share such as your photos and videos can put your privacy and safety at risk.
Hackers are always on the lookout for these personal information that they can use against
you, and use to access your online accounts

Likewise, netiquette (or online etiquette) is just as important online as it is in the real world.
Having poor netiquette can cost you relationships with your family and friends, your job, or
even can get you in trouble with the law.

8
Below are different internet safety tips and netiquette to protect yourself online.

Always Use Strong Passwords

Using your birthday as your password is a big no-no. It’s a common combination and it
seems it’s everyone’s default password. Try combining special characters (if permitted),
with capital letters and numbers.

Keep Your Personal Information

You can protect yourself by not exposing too much about yourself. Sure it’s great to share
photos of your OOTDs or your recent getaway or where you are currently hanging out.
But hackers can find a way on how to know your location and the places you have visited.
Avoid exposing other information such as your place of residence, your school, your mobile
number and even your full name.

Be Mindful of What You Post

Posting something online can be quicker than a lightning speed, and so does the ability of
other people screen grabbing your posts. Any comments, photos, or videos of yourself that
you post may stay online and can always resurface anytime. Your parents, or even your
employers, might come across that screenshot.

Not Everyone Online is Trustworthy

There are some people online who use fake accounts and not always who they claim to
be. Hackers use fake social media accounts to lurk in cyberspace and pick unwary users.

Only Purchase for Secure Sites

Be cautious when purchasing from online sites. Even the most secure sites sometimes
get hacked and sensitive information can be obtained by hackers such as your credit card
account information. Only purchase from reputable online stores, and never save your
passwords and credit card information.

Be Careful of What You Download

Not all downloadable content is safe. Cybercriminals often try to trick unwary users into
downloading malicious files that contain malware through apps or games or even from
different websites. Always double check the website before downloading anything.

Choose Your Friends Wisely

This applies most especially to your online friends. Try to keep your social media accounts
9
as private as possible by choosing the people that can follow you. Avoid accepting friend
requests from people you do not know.

Respect Other People’s Posts

Respect should be given to everyone at all times, regardless of their opinions or ideas. You
can comment, question or critique an idea but not to attack that person. Always practice
kindness online.

Make Yourself Look Good Online

And this does not mean your physical appearance. The kinds of things that you post online
reflect who you are as a person. Headhunters and employers do background checks
through social media accounts. Avoid posting fake news, cyberbullying, and generally
being a toxic person online.

Activity 1:
It’s reflection time! Answer the following the questions:

1. How do you think the internet has improved our way of living? Give examples on
how the internet has made your life easier.
2. Aside from the positive things that we can benefit from the internet, what do you
think are the negative things about the internet?

10
 LESSON 4
Introduction to HTML

HyperText Markup Language (HTML) is the language used to create web pages that can be
viewed using a web browser (such as Google Chrome, Firefox, and Safari to name a few). A
markup language consists of different characters in a document which tells the web browser
how the page should be displayed. HTML provides structure to a document and allows you
to organize the information that you want to display so that it can be understood easily by
your viewers. Headers, paragraphs, bulleted and numbered lists, and even images can be
formatted using HTML.

Planning Your Website

Planning your website’s content and pages will save a great deal of time for development.
You can create a sitemap that shows the outline of your website’s pages, and shows the
connection between web pages. A sitemap can help you plan and organize your content and
identify the goals of your website, and ensure that every page within the website reaches your
goals.

The image above shows an example of a sitemap of a basic portfolio website. The website has
four pages. As you can see in the image, the pages About Me, My Portfolio, and Contact Me
can be accessed through the Home page, and vice versa.

Creating Your Website’s Folder

Now that you understand the importance of a sitemap, it is now time to create the directory
of your website in your computer. Create a designated folder in your computer for your web
pages which includes other assets such as your images and videos. Check out the image
below.

11
 The designated folder for
the web pages and assets
is named as “webproject”.
The “webproject” folder
contains different .html
files and two sub-folders
named as “images” and
“videos”. This is where
you can save your assets. Saving your web files like this will help you create a more organized
folder, therefore it will be easier for you to locate your files later on.

Working With HTML Files

Although for this module you will be working offline and will be saving your files in your computer
rather than uploading them in a server, it is best to know that the default name of the first page
of your website should be named as index.html.

When viewed online, this is the default file that a server will look for if no specific file is
requested. The index.html also serves as the home page of a directory and will be the first
page that a user will see when a website’s URL is accessed. For example, if a user enters
“www.domainname.com/aboutme.html”, then the server will display the aboutme.html page.
Otherwise, if a user enters “www.domainname.com”, the server will display the default home
page which is the index.html.

Naming the first page as index.html also serves as a security measure so that others will not
see the contents of your directory. The images below show a comparison between a website
with an index.html file, and a website without an index.html.

When a user enters

“www.imagemaxprints.
com” in the web
browser, the home
page (or the index.
html) will be displayed.

12
 If an index.html file
does not exist in
the directory, the
server will display all
the files (including
images and videos!)
in the directory, which
can compromise
the security of your
website.

Saving HTML Files

Make sure to save your web pages using the .html file extension (example: aboutme.html,
portfolio.html, contact.html, and so on) so that the web browser can recognize the file as a
web page.

When saving an HTML page, filenames in lowercase letters are strongly suggested to avoid
errors. Filenames should not have special characters and spaces. You can use a dash ( - )
to separate the words instead of using spaces. Otherwise, spaces will be converted into a
percent sign ( % ) which is not ideal for a web page’s filename. Lastly, make sure to keep your
filenames short and easy to remember.

13
THIS: INSTEAD OF THIS:
✓ aboutthecompany.html ✘ AboutTheCompany.html

Use all small letters to avoid confusion and errors for your
viewers when they type the web page’s name.
✓ missionvision.html or ✘ mission vision.html
mission-vision.html
Because when viewed in a web browser, it will become like
this: mission%20vision.html. Notice the space is converted
into a percent sign?
✓ projectbooking.html ✘ learnhowtobookmeforprojects.html

Keep your file name short and easy to remember.

Activity 2: Create your own sitemap

Get a piece of paper (or you can do this using your computer), draw a sitemap. Your site-
map needs to have a total of 4 pages including the index.html (or (home”).

Activity 3: Create your own directory based from your sitemap

In your computer, create a folder in your desktop or documents folder. Name this folder as
“myfirstwebsite”. In that folder, create two more subfolders and name them as “images”,
and “videos”.

14
 LESSON 5
Basic HTML Elements

HTML elements use different tags that command a browser what to display and how to display
them. All web pages consist of many different HTML tags that can make a web page functional
and aesthetically pleasing. There are over a hundred of different tags that you can use and
you will eventually learn all of them as you practice creating web pages.

The DOCTYPE declaration, <html>, <head>, <title>, and <body> are the 5 basic elements
needed for a web page to work.

If you notice below, the html, head, title and body appear in pairs and are in between brackets.
These are called tags, which are instructions that command a web browser how to display a
web page.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Each pair of tags consist of an opening tag and a closing tag. For example:

<head>
<title>This is the Title of the Page</title>
</head>

<head> and </head> is one pair of tags, and so is <title> and </title>. The opening tag
of each pair indicates where the instruction begins. The ending tag should always include a
forward slash ( / ) just after the first bracket symbol. This indicates the ending of an instruction.

Remember, a pair of tags should always have an opening and a closing tag.
<head> and </head>
<title> and </title>

15
 <body> and </body>
<h1> and </h1>
<p> and </p>

For a web page to work, the following elements must always be included in the document:

1. DOCTYPE declaration
Although not a tag, this line indicates what type of HTML the page is using since there
are several other different types of HTML. The DOCTYPE declaration is important to
make sure that your styles will also work in other web browsers.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

2. <html> tag
The opening <html> tag appears at the beginning just after the DOCTYPE declaration,
and the </html> tag appears at the very end of the document. This is an important
element because this tells the web browser that the information in the document is
written in HTML.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

16
3. <head> tag
The <head> tag appears after the <html> tag. Elements such as the page title, styles,
javascript, and other invisible information may be included between the opening and
closing <head> tags.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

4. <title> tag
The opening and closing <title> tag appear inside the <head> tag. This is where you
can place the title of your web page, which is usually seen on the page tabs in your
web browsers.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

17
 5. <body> tag:
The opening and closing <body> tag is placed after the closing </head> tag. The
<body> tag contains the content that you want to appear in a web browser. These can
be text, images, videos, and other multimedia content that are compatible for web use.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

When translated to a web page, the set of codes that you created will look like this when
viewed in a web browser:

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

18
Activity 4: Create your first index.html file

Step 1:
Create a new HTML file by opening any available Text Editor software you have on
your computer. One of the most common Text Editors is the Notepad for Windows, or
TextEdit for Mac. Click on FILE > NEW to create a new document, and save the file as
index.html and place it in the directory that you previously created from Activity 3.

Step 2:
In your index.html file, type these codes and save the file.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Step 3:
Check the index.html file in the web browser. Open your web browser (example: Goo-
gle Chrome, Safari, or Mozilla) and click FILE > OPEN > and a dialogue box will open.
Select your index.html file click the OPEN button.

19
 LESSON 6
HTML Headings

HTML headings consist of six different sizes, from <h1> to <h6>, that can be used for titles or
subtitles on a webpage. These headings have their own default sizes and can differ from one
web browser to the other.

<h1>, or Heading 1, is the biggest which is usually deemed as the most important heading;
while <h6>, or Heading 6, is the smallest and can be the least important. It is important to use
headings properly to create hierarchy on your web page. Using headings will also help your
users skim through your web page and see right away the information they need.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is Heading 1 - The Biggest</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6 - The Smallest</h6>
</body>
</html>

20
 LESSON 7
Paragraph

The <p> tag defines a paragraph and always starts on a new line. Browsers automatically white
space before and after a paragraph which is called a margin. A paragraph may contain several
lines in your codes but the web browser ignores this and displays it differently. However,
adding a <br>, or a line break, will allow you to create a space in between each line such as
this one </p>.

This paragraph contains several lines in your text editor. However, the document will just
display the text as one single line when viewed on a web page.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<p>
The quick brown fox
jumps over the lazy dog.
</p>
</body>
</html>

21
This example uses the <br> tag, which allows you to create several lines in one paragraph.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<p>
The quick brown fox <br>
jumps over the lazy dog.
</p>
</body>
</html>

22
 <!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<p>This is an example of a paragraph.</p>
<p>A new line is created by using a paragraph tag.</p>
<p>Blank lines will be ignored.</p>
<p>However, adding a line break will <br> allow you to create a
space <br>
in between each line such as this one</p>
</body>
</html>

Activity 5
In the same index.html file, add the following content:

Heading 1: The Little Prince

Heading 2: by: Antoine de Saint-Exupéry

Paragraph using this format:

“If you love a flower that lives on a star,

it is sweet to look at the sky at night.
All the stars are a-bloom with flowers...”

23
 LESSON 8
Text Formatting

Different formatting elements in HTML can be used to convey different meanings, whether you
want to place importance or emphasis on a certain word or phrase.

1. <b> and <strong>

The <b> tag simply makes a text or a sentence in bold format, but not necessarily
convey meaning. Whereas the <strong> tag can be used to convey importance,
usually applied in a heading, caption, or other parts in the paragraph that needs to be
deemed as with value or significance.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<p><b>This is an example of a line with bold formatting.</b></p>
<p><strong>This tag can be for important words!</strong> Use this
tag
to distinguish strong importance to your users.</p>
</body>
</html>

24
2. <i> and <em>
The <i> tag makes a text or a sentence in italic format and can be used on captions
and different languages. On the other hand, <em> tag can be used if you want to
emphasize a text or a phrase.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<p><i>This is an example of a line with italic formatting.</i></p>
<p>This tag can be used to <em>emphasize</em> something!</p>
</body>
</html>

25
 LESSON 9
HTML <style> Attribute

The HTML <style> attribute allows you to apply certain styles to enhance the look and feel of
the content in your web page. Different styles consist of font styles, size, alignment and colors.

1. Font Family
The default font of HTML in most browsers is Times New Roman. When you create
your web page and do not define a font style, the web page will automatically display
Times New Roman font when viewed in a browser.

Example:
<h1 style="font-family:verdana;">This is H1 using Verdana font.</h1>

It is important to note that browser display fonts differently, that is why using a web
safe font for your web page is ideal. These web safe fonts appear the same regardless
of the browser. There are different web safe fonts that you can use such as Arial,
Verdana, Georgia, Trebuchet MS, Times New Roman, and Tahoma.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1 style="font-family:verdana;">This is H1 using Verdana
font.<h1>
<p style="font-family:Arial;">This is paragraph is using Arial
font.</h1>
</body>
</html>

26
2. Font Size
Headings 1 to 6, and as well as the paragraph all have default sizes. If no font size
is declared in the syntax, the web page will automatically display the default sizes for
each of these tags.

HTML element Pixel Height Font Size (em)

<h1> </h1> 32px 2em
<h2> </h2> 24px 1.5em
<h3> </h3> 18.72px 1.17em
<h4> </h4> 16px 1em
<h5> </h5> 13.28px .83em
<h6> </h6> 10.72px .67em
<p> </p> 16px 1em

You can set different sizes for your fonts. Just make sure to indicate a font size in your
<style> tag. Otherwise, the web page will display the default sizes when viewed in a
browser.

Example:
<h2 style="font-size:22px;">This H2 using font size of 22px instead of
the default 24px.</h2>

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h2 style="font-size:22px;">This H2 using font size of 22px
instead
of the default 24px.</h2>

<h2>However, this H2 is using the default 24px size. Notice there

is
no declaration of font size?</h2>
</body>
</html>

27
3. Color
Colors for the web are defined by using default color names (example: Coral),
hexadecimal (example #FF7F50), or RGB (example: rgb(255, 127, 80)). There are
different color names supported by browsers that you can use. You can also find a lot
of websites that offer free color picker tools so you can get the hexadecimal or RGB
values of a certain color.

https://www.w3schools.com/colors/colors_names.asp

28
 You can set different colors for text and background. See the example below:

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1 style="background-color:LightBlue;">This is Heading 1 with a
Light Blue background color</h1>
<h2 style="color:Indigo;">This is Heading 2 using an Indigo text
color.</h2>
</body>
</html>

4. Background Color
You can apply a different background color on an entire web page by using the
background-color property within the <body> tag.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body style="background-color:LavenderBlush;">
<h1>The background color is in Lavender Blush.</h1>
<p>Oh what a nice color! There are a total of 140 color names
that
are supported by HTML</p>
</body>
</html>

29
5. Text Alignment
You can define the alignment of your text by using the text-align property. By default,
the text alignment is left. However, you can declare a center or right alignment. But take
note! Be careful when using center or right alignment. You can use center alignment
for headings or captions. It is not ideal to use center alignment for long paragraphs.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1 style="text-align:center;">This is Heading 1 in Center.</h1>

<h2 style="text-align:center;">This is your sub heading which also in

center text alignment. Use center alignment with care!</h2>

<p style="text-align:center;">This is your paragraph in center text

alignment. </p>

<p>If no alignment is declared, then the text will be on left

alignment by default.</p>
</body>
</html>

30
Activity 6
Using the same content from Activity 5 in the index.html file apply the following styles in
the headings and paragraph:
1. Font Family
2. Font Color or Background color
3. Text Size
4. Center Text Alignment

31
 LESSON 10
Hypertext Links

Hyperlinks (or links) are defined using the <a> tag or the anchor element followed by the href
attribute. Adding a hyperlink in your text allows you to go to a new location or webpage by
clicking on the text.

1. Syntax
The syntax that we use to create a hyperlink is <a href="url">link text</a>. The
href attribute indicates the destination of the link. The link text is the one that will be
displayed when the web page is viewed in a browser.

Example:
<a href="https://www.google.com/">Click here to go to Google!</a>

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<a href="https://www.google.com/">This text is linked to
Google.</a>
</body>
</html>

The hyperlinks have default styles and are displayed as follows:

● Unvisited Link - underlined, in blue color
● Visited Link - underlined, in purple color
● Active Link - underlined, in red color

32
2. Link Targets
The <link> target attribute can be used to specify where you want the web page to be
loaded. By default, the linked web page will be displayed in the current tab or window
of your browser. Opening the linked web page in the current tab or window is most
ideal especially if the users are navigating within the pages of your website.

There are four different target attributes that command where the web page will be
loaded:

_self This is the default target. It opens the web page in the same tab or
window of the website.
_blank This target attribute opens the web page in a new tab or window of
a browser. You can use this attribute when you are linking a different
website.
_parent This loads the web page within the parent frame, which is still within the
same tab or window. However, this target attribute is only applicable
when you are using frames.
_top This attribute loads a web page in the full body of the same tab or
window. If frames are being used within the link, clicking the hyperlink
with the _top attribute cancels out the frames.

Try this yourself. Copy the syntax below and try applying the different target attributes
to see the difference.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<a href="https://www.google.com/" target="_blank">This link
opens a
new window or tab when clicked.</a>
</body>
</html>

33
 LESSON 11
Images

Images can enhance the look of a web page. Using images to support your web page’s text
content is one of the best ways to catch the attention of your users. You can insert images
in the content, make use of them as links, and even apply in the main background of your
webpage. Take note that your images must be optimized for the web (meaning, avoid using
high resolution files which can cause web pages to load slowly), and image file types must be
.jpeg, .png, or .gif.

Remember the “images” folder that you created in the previous activity? Make sure to save
your images in that folder so you can locate and link your files easily. If a web page cannot
locate the source of the image in relation to what was encoded in the syntax, it will display a
broken link icon.

1. <img> Tag
To embed an image in your web page, you can use the <img> tag. Using this tag links
the images to a web page. That’s why it’s important that the source folder of your
images are defined so that you won’t have broken link icons in your web page.

2. <img> Attributes
The <img> tag has different attributes that you can use to tell how to display an image.
The src attribute is the path to the image. You won’t be able to display the image
without the src attribute. Aside from the src, there are three other attributes that you
can use with the <img> tag. These are alt, width, and height.

src This is a required attribute and is placed after the img. This contains
the path to the image.
Example: <img src="flower1.jpeg">

34
 alt alt means Alternate text. This is also an important attribute as it
plays as a label of your image in a form of a text in case the image
does not load in the browser.
Example:
<img src="flower3.jpeg" alt="This is another flower.">

https://www.freepik.com/free-photo/beautiful-shot-pink-flowers-by-sea-sunny-day-
britain_10376297.htm#page=1&query=flower&position=7

width This is an optional attribute. You can specify the width of the image
to display in the browser. If no width is declared, the web page will
display the actual width of the image.
Example:
<img src="flower3.jpeg" alt="This is another flower."
width="300px">
height Same as the width attribute, you can also specify the height of the image.
If no height attribute is declared, the web page will also display the
actual height.
Example:
<img src="flower3.jpeg" alt="This is another flower."
width="300px" height="200px">

When declaring the width and height attributes of the images that you will use, make
sure that you are declaring sizes that are proportional to the images so that the images
will not look stretched.

35
 <!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<img src="images/flower1.jpg" alt="This is a flower."> <br>
<img src="images/flowers02.jpeg" alt="This is another flower.">
</body>
</html>

3. Image Links
You can also use images as links, instead of a text. You can do this by placing an
<img> tag inside the <a> tag, together with the other img attributes.

36
<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<a href="https://www.google.com/">
<img src="images/flower1.jpg" alt="This is a pretty flower"
width="400px" height="267px">
</a>
</body>
</html>

As you notice in the screenshot above, the curser of the mouse changes when hovered
on the image link.

37
4. Background Image
Background images are also a great way to enhance the look of a webpage. You can
add an image on an entire page by adding the <style> tag within the <head> tag and
specify the file of the image on the <body> element. The background-image property
should be within the opening and closing curly brackets ( { and } ).

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
<style>
body {
background-image: url("images/flower1.jpg");
}
</style>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>

Just be careful when choosing a background image so as not to overpower the text
content of your webpage. Using subtle patterns and designs are ideal, and as well as
images with seamless edges.

The background-image has different styles that you can use for your webpage.

38
Background Repeat
The image that you used will, by default, repeat throughout the page horizontally and
vertically if the image is too small. If you don’t want this to happen, you can use the
background-repeat: no-repeat property.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
<style>
body {
background-image: url(“images/flower1.jpg”);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>

39
 Background Cover
If you want the background image to fill the entire page, you can use the background-
size property and set it to cover. Using background-attachment: fixed property
will also help the background image cover the entire page while keeping the original
proportions of the image.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
<style>
body {
background-image: url(“images/flower1.jpg”);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>

Activity 7
Using the same content index.html from Activity 6, enhance your webpage by adding im-
ages of the Little Prince and links to proper sources of these images. You may add small
images and subtle background images.

40
 LESSON 12
Table

You can create tables in HTML which will allow you to present data in a structured way. HTML
tables consist of rows and columns. The <table> tag is used to create tables, and like other
HTML elements, the syntax should also have a closing </table> tag.

<table> Elements:
<table> </table> A required tag to be able to create a table.
<tr> </tr> Represent a row within a table.
<td> </td> Represent a data cell within a row. Each set of data cells is
contained in one row. This is where data is placed, which includes
text, images, lists, etc.
<th> </th> Represent a header row within a table. This is by default in bold
letters.

Check out the sample below. The table consists of three rows. The first set of <tr> contains a
table header, which displays bold text. The second and third sets of <tr> contain three <td> or
data cells for each set.

41
<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>Hello!</h1>
<table>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
</tr>
</table>
</body>
</html>

You can also add different styles to the table to make it more presentable and easier to
understand. Similar to how we created styles in the background of your web page, styles for
tables are also included within the <style> </style> tags that are placed in the <head> section
of your HTML. There are different style properties that you can use for your table.

42
<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
<style>
table {
width: 100%;
font-family: Verdana, sans-serif;
font-size: 16px;
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: #30A1BB;
color: #ffffff;
}
td, th {
border: 1px solid #000000;
text-align: left;
padding: 9px;
}
</style>
</head>
<body>
<h1>Hello!</h1>
<table>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Middle Name</th>
</tr>
<tr>
<td>Reyes</td>
<td>Mark</td>
<td>Delfin</td>
</tr>
<tr>
<td>Santos</td>
<td>Jose</td>
<td>Gonzales</td>
</tr>
<tr>

43
 <td>Cruz</td>
<td>Katrina</td>
<td>Perez</td>
</tr>
</table>
</body>
</html>

Activity 8
Using the same index.html file from Activity 7, create a table after the paragraph with the
following:
The Characters (use H3)
Character Description
The Little Prince One of the two protagonists of the story.
The Fox Always helps steer the prince toward what is important
in life.
The Three-Petaled Flower A coquettish flower who has trouble expressing her love
for the Little Prince
Source: https://www.sparknotes.com/lit/littleprince/characters/

44
 LESSON 13
HTML List

Formatting a list properly in your web page provides a sense of organization especially to your
users. A list depicts hierarchy of content from most important to least, and as well as helps you
enumerate your points in an ordered way.

1. Ordered List
Ordered lists are usually used when the order is important or plays a significant role
in your content. Example of this is when you have a step-by-step process, or a list of
ranking (ex: Top 10 Most Favorite Flowers). The <ol> </ol> tags are used to create
an ordered list. The <li> </li> tags are used to list the item inside the <ol> </ol>.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h2>This is an Ordered List</h2>
<ol>
<li>Roses</li>
<li>Orchids</li>
<li>Lilies</li>
</ol>
</body>
</html>

45
 2. Unordered List
If the order of your list is not important, and you simply want to enumerate items, then
an unordered list can be used. The <ul> </ul> tags are used to create an ordered list.
The <li> </li> tags are used to list the item inside the <ul> </ul>

<!DOCTYPE html>
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h2>This is an Unordered List</h2>
<ul>
<li>Roses</li>
<li>Orchids</li>
<li>Lilies</li>
</ul>
</body>
</html>

Activity 9
Using the same index.html file from Activity 8, create a list of characters from The Little
Prince. You can choose between an unordered list, or an ordered list.
Characters:
● The Little Prince
● The Fox
● The Three-Petaled Flower
● The Rose
● The Vain Man

Source: https://www.sparknotes.com/lit/littleprince/characters/

46
 LESSON 14
Basic Website Layout

There are different ways on how you can layout the content of your website. However, knowing
the basic web layout will help you create a more effective (and easy to navigate!) web page
design.

A basic web page can consist of these four important parts:

Header
The header is found on the top most part of the web page. A logo and other
branding elements are usually found on the header. A slogan and a main image
can also be placed here. The header serves as the main focal point of your web
page.

Navigation
The navigation contains the main links of your website. The typical labels of
navigation are “Home”, “About”, “Services”, “Portfolio”, “Products”, “Contact Us”, or
other labels that are considered as main pages of your website. When you create
labels for your navigation, make sure that these labels are short, and contain one
or two words at most.

Main Content
The main content of the website is where the text content, images, videos, forms,
and other elements that help you communicate your message. The main content
can also contain tables, rows, and columns that can be used to enhance a layout.

Footer
The Footer signifies the end of the web page. Just like the Navigation, the Footer
contains the main links of the website and other information such as the contact
details, copyright, and social media links. You can be creative with how you design
your footer and also use tables, rows, and columns to help you achieve the layout
that you want.

47
7 Deadly Sins of Web Designs

1. No Visual Hierarchy
A site visitor should be able to easily know the most important elements on your page
because of proper visual hierarchy. Site branding, slogans, and main images can be
found on the top most part of your website.

48
2. Poor Color Scheme
Simplicity is key in web design. Minimalist looking designs have become more popular
than those flashy ones. Make sure to plan the color scheme of your website properly.
There are a lot of color scheme generators online that you can use for free which can
help you come up with professional color combinations.

3. Poor Typography
Keep in mind that most websites nowadays are also being viewed on mobile devices.
Fancy fonts that do not look good on a small screen can make your website look like it’s
not professionally done.

4. Making Your Users Think

People do not have all day to browse through your website and figure out which way to
go first. You should plan the navigation of your website properly so that your users will
be able to find the content they need right away.

5. Using Flashy Images

Subtle is key when you plan on including background images. Avoid using bright and
busy background images so as not to create a poor contrast with the text and other
content.

6. Outdated Designs
There are a lot of websites nowadays that feature the best websites for inspiration. Take
a look at these websites to give yourself an idea on design trends and how to properly
design a website. Go easy on the design assets, have some breathing space and don’t
cram everything in one page.

7. Lack of Content
Your users go to your website to look for information. If your website does not present
correct or enough content, your users will most likely never go back to your website
again. Quality content means credibility. Don’t go overboard though! Too much content
on the other hand might leave your users overwhelmed with information. Make sure to
present just enough text and images to communicate your message.

49
 ASSESSMENT
PORTFOLIO WEBSITE FINAL PROJECT

Web Project Brief:

1. You are an aspiring photographer or a graphic designer. You feel you are ready
to accept commissioned works. But first! You need an online portfolio to show
off your works.
2. Create a 4-page portfolio website with the following pages:
a. Home Page - This is your index.html
b. About Me - A page about you, your skills, or anything what you want
your future clients to know about you. Remember the internet safety
tips discussed in the previous lesson.
c. Portfolio - Place your sample works here. A brief description per work
is recommended.
d. Contact Me - Let your clients know how they can get in touch with you
if they want to hire you!
3. You can be as creative as you want. Just make sure not to go overboard and
still apply the basic principles and elements of design.

References

• http://www1.udel.edu/it/help/web-development/HTML103.pdf
• https://www.lifewire.com/index-html-page-3466505
• https://www.slideshare.net/nanakannan/2015-week-1-44777878
• http://zuga.net/articles/html-heading-elements/
• https://www.quackit.com/html/tutorial/
• https://dict.gov.ph/the-history-of-internet-in-the-philippines/
• https://www.rappler.com/technology/features/internet-philippines-20-years
• https://www.statista.com/statistics/221179/internet-users-philippines/
• https://www.webfx.com/blog/web-design/the-history-of-the-internet-in-a-nutshell/
• https://www.future-marketing.co.uk/the-history-of-social-media/
• https://www.webfx.com/blog/web-design/the-history-of-the-internet-in-a-nutshell/
• https://newsinfo.inquirer.net/1332871/sws-45-of-filipino-adults-use-internet-1-in-4-read-
news-through-facebook
Cover photo and icons used are from freepik.com

50