Republic of the Philippines

BATANGAS STATE UNIVERSITY

The National Engineering University
ARASOF – Nasugbu Campus
R. Martinez St., Brgy. Bucana, Nasugbu , Batangas, Philippines 4231
Tel Nos.: +63 916 235 8616
Email Address: labschool@g.batstate-u.edu.ph | Website Address: https://batstate-u.edu.ph/

LEARNING MODULE IN
COMPUTER SCIENCE 8
(Computer 8)
 TABLE OF CONTENTS

FIRST SEMESTER

First Quarter

Week Page
Topics
No. No.
1
Module 1. Introduction to Web Development 4
2
3
Module 1. Introduction to Web Development
4
5
Module 2. Basic HTML and Formatting Tags 13
6
7
Module 2. Basic HTML and Formatting Tags
8

Second Quarter

Week Page
Topics
No. No.
9
Module 3. Using HTML 5 Basic, Formatting, List and Link Tags 21
10
11
Module 3. Using HTML 5 Basic, Formatting, List and Link Tags
12
13
Module 4. Introduction to Cascading Style Sheets 35
14
15
Module 4. Introduction to Cascading Style Sheets
16
SECOND SEMESTER

Third Quarter

Week Page
Topics
No. No.
17
Module 5. Using External Style Sheets and Selectors 40
18
19
Module 5. Using External Style Sheets and Selectors
20
21
Module 6. Working with Background, Text, and Font Properties 45
22
23
Module 6. Working with Background, Text, and Font Properties
24

Fourth Quarter

Week Page
Topics
No. No.
25
Module 7. Tables 52
26
27
Module 7. Tables
28
29
Module 8. Advanced CSS 57
30
31
Module 8. Advanced CSS
32
 MODULE 9: Introduction to Web Development

Introduction
OBJECTIVES
To
web development Content Standards:
The learner demonstrates
MODULE 9 understanding of the principles and
importance of web design and web
development.
Performance Standards:
The learner shall be able to create a
site map and wireframe of their
website.
Most Essential Learning
Competencies:
9.1. Define what HTML is
9.2. Identify the usability of a web
site

INTRODUCTION

A website is a collection of web pages and related content identified by a common

domain name and published on at least one web server. All publicly accessible websites
collectively constitute the World Wide Web. Website development refers to the work that
goes into building a website. This could apply to anything from creating a single plain-
text web page to developing a complex web application or social network.
The following questions deal with the fundamental concepts and principles of this
module:
 What is HTML?
 What are the principles of web design and web development?
 MODULE 9: Introduction to Web Development

DATA INPUT

Website Development
Website development refers to the work that goes into building a website. This could apply to
anything from creating a single plain-text web page to developing a complex web application
or social network.

Website
Websites are files stored on servers, which are computers that host websites. These servers
are connected to a giant network called the internet or the World Wide Web. Browsers are
computer programs that load websites via your internet connection, such as Google Chrome
or Internet Explorer. Your computer is also known as the client.

IP Address
Internet Protocol is a set of standards that govern interaction on the internet. To access a
website, you need to know its IP address. An IP address is a unique string of numbers. Each
device has an IP address to distinguish itself from the billions of websites and devices
connected via the internet.

HTTP
HyperText Transfer Protocol (HTTP) connects you and your website request to the remote
server that houses all website data. It’s a set of rules (a protocol) that defines how messages
should be sent over the internet. It allows you to jump between site pages and websites. When
you type a website into your web browser or search for something through a search engine,
HTTP provides a framework so that the client (computer) and server can speak the same
language when they make requests and responses to each other over the internet. It’s
essentially the translator between you and the internet — it reads your website request, reads
the code sent back from the server, and translates it for you in the form of a website.

HTML
HyperText Markup Language (HTML) has been used since the 1990s. It’s the foundation of
all websites and represents the bare minimum of what’s needed to create a website. Web
pages are usually written using Hypertext Markup Language or HTML, a simple scripting
language. HTML is the building block for web pages. HTML primarily describes the
structure and presentation of information via the Internet. Web developers use HTML
keywords or tags to instruct the Web browser application on how to format and display the
content of Web pages.

Coding
Coding refers to writing code for servers and applications using programming languages.
They’re called “languages” because they comprise vocabulary and grammatical rules for
communicating with computers. They also include special commands, abbreviations, and
punctuation that can only be read by devices and programs.
All software is written by at least one coding language, but languages vary based on platform,
operating system, and style. There are many different types of coding languages all of which
fall into two categories, front-end, and back-end.
 MODULE 9: Introduction to Web Development

Front-end
Front-end (or client-side) is the side of a website or software that you see and interact with as
an internet user. When website information is transferred from a server to a browser, front-
end coding languages allow the website to function without having to continually
“communicate” with the internet.
Front-end code allows users like you and me to interact with a website and play videos,
expand or minimize images, highlight text, and more. Web developers who work on front-
end coding work on client-side development.

Back-end
Back-end (or server-side) is the side that you don’t see when you use the internet. It’s the
digital infrastructure, and to non-developers, it looks like a bunch of numbers, letters, and
symbols.

TYPES OF WEB DEVELOPMENT

These different types of web development primarily refer to the different sectors of the
profession in which web developers can work. Some of these distinctions overlap, and
oftentimes, web developers will master multiple types of web development.

1. Front-end Development
Front-end developers work on the client-or user-facing side of websites, programs, and
software — in other words, what users see. They design and develop the visual aspects,
including the layout, navigation, graphics, and other aesthetics.
The main job of these developers is to build interfaces that help users reach their goals, which
is why they also often have a hand in the user experience aspect of their projects. A
background in user experience helps front-end developers form empathy for end-users.

2. Back-end Development
If the front-end is what users see, the back-end is what they don’t. Back-end web developers
work on the servers of websites, programs, and software to make sure everything works
properly behind-the-scenes.
These developers work in systems like servers, operating systems, APIs, and databases and
manage the code for security, content, and site structure. They collaborate with front-end
developers to bring their products to users.

3. Full Stack Development

Full stack developers work in both the front-end and back-end sides of a website. They can
create a website, application, or software program from start to finish. “Stack” refers to the
different technologies that handle different functionalities on the same website, like the server,
interface, etc.

4. Website Development
Website developers can be front-end, back-end, or full-stack developers. However, these
professionals specialize in building websites, as opposed to mobile applications, desktop
software, or video games.

5. Desktop Development
Desktop developers specialize in building software applications that run locally on your
device, rather than over the internet in the web browser.
 MODULE 9: Introduction to Web Development

6. Mobile Development
Mobile developers build applications for mobile devices such as smartphones or tablets.
Mobile apps operate much differently than other websites and software programs, thus
requiring a separate set of development skills and knowledge of specialized programming
languages.

7. Game Development
Game developers specialize in writing code for video games, both console games (Xbox,
PlayStation, etc.) and mobile games — which means this specialty overlaps somewhat with
mobile development.

8. Embedded Development
This includes electronic interfaces, consumer devices, IoT devices, real-time systems, and
more. With a recent rise in interconnected devices as seen with smart appliances, bluetooth
technologies, and virtual assistants, embedded development is becoming an in-demand
practice.

9. Security Development
Security developers establish methods and procedures for the security of a software program
or website. These developers typically work as ethical hackers, trying to “break” websites to
expose vulnerabilities without intending harm. They also build systems that discover and
eradicate security risks.

WEB DESIGN AND WEB DEVELOPMENT

Web design and web development are terms that are frequently used
interchangeably. However, these are two (2) different things.
Web design is the creation of the layout of the visual elements of the website using
various design programs.
Web development, on the other hand, is the creation of web pages using HTML, CSS,
JavaScript, and other scripting languages. It involves all the codes that make a website work.

WEB DESIGNER AND WEB DEVELOPER

Web designer focuses on the appearance of a website while a web developer specializes in
coding and works on making websites with an emphasis on their functionality. A web
designer and web developer work together to create a website that offers quality
user experience.

PRINCIPLES OF WEB DESIGN

There are various factors affecting the aesthetics and usability of a website. Below
are the current design principles that we need to consider:

1. Minimalism
This principle focuses only on including the most essential elements. This reduces
information overload and allows web pages to load faster.
2. Typography
This is an element of design that refers to the visual aesthetics, style, or appearance of the
text. It sets the tone and theme of a website.
3. Color Scheme
This principle has a big impact on how users think and feel about the website.
 MODULE 9: Introduction to Web Development

4. Display
This principle focuses to design a one-page website screen that allows the users to
browse the website’s content in a simple and linear fashion.
5. Animation
This principle is used to capture maximum user attention when used responsibly.
6. Mobile - Friendliness
This principle makes sure that the users can access and browse it on any device, such as
smartphones, tablets, or desktop computers.

PRINCIPLES OF WEB DEVELOPMENT

The following principles can greatly help us develop functional websites:
1. User Focus
This is the key principle to provide them a great user experience by setting up and
enforcing coding standards.
2. Quality Focus
This principle reminds developers to strive for excellence. A high-quality website
provides relevant and useful content and a good user experience.
3. Simplicity
This principle helps to build and maintain websites easier. This also leads to simplifying
codes, so it will be easier to find errors.
4. Efficiency of Codes
This principle reminds us to use code responsibly.

WEB DESIGN AND WEB DEVELOPMENT PROCESS

The process of creating a website is not easy. There are different phases of the website
design and web development process. The exact process may vary from designer to designer
and from developer to developer, but the basics are almost the same.

1. Form a plan / Information Gathering

In this process we need to consider the following:
- purpose/goal of the website
- goals to accomplish
- target audience
- type of website
- content and its purpose

2. Planning/creating a wireframe
All good websites start with a blueprint. Developers call this a wireframe or sitemap. It
doesn’t have to be an official document; it’s simply a vision for your site that’ll give you
direction and a place to start. Just like a business plan gives a potential investor insight into
your goals and deliverables, a sitemap gives an idea of what you’re picturing and the
information needed to meet your vision. You can create your sitemap on your own.
Here are a few questions to ask yourself when planning your site:
-What individual pages do you want?
-What content will be on those pages?
-How can you organize those pages into categories?
-What is the hierarchy of pages on your site?
-How will the pages link together?
-What pages and categories are essential to your site and user experience, and which ones
could be removed or combined?
 MODULE 9: Introduction to Web Development

In this phase, the information gathered are put together, which includes the creation of site
map and wireframe.

Site Map - describes how the

entire site will look like. It
lists all the areas of the
website as well as the sub-
areas if applicable. It also
shows the relationship among
the different pages of the
website.

Wireframe - describes the

user interface of the website,
however, this does not yet
contain any design elements.

3. Design
This determines the look and feel of our website. In this stage, we incorporate the
design elements for the website: themes, colors, logos, etc.
4. Content Writing and Assembly
In this phase, the contents are being prepared so it will be ready before or during website
coding. Appropriate text, images, and videos are chosen in this phase. This also involves
proof reading and editing.
5. Coding
In this stage, the web developer writes the codes for it.
6. Testing, Delivery, and Launching
In this stage, everything on the website should be tested: links, forms, scripts, and
typography. The website files are then uploaded to the server thru FTP (File Transfer
Protocol). After it, another test is made to make sure that all files have been installed
correctly and that the website is fully functional.
7. Maintenance and Regular Updating
In this stage, changes and additions to the website has been made on a regular basis to
keep it updated.
 MODULE 9: Introduction to Web Development

PARTS OF A WEBSITE
These are the main sections we can include on our website.

1. Homepage - main web page of a website

2. Products or Services - information about the different products or services an individual,
group, or company offers
3. About - introduces the creator/s or the company, which may include its history, people,
among others
4. Contact - include phone numbers, email address, physical address, or a map
5. Dynamic Content - includes blog, video, photo gallery, news, events, FAQs, testimonials,
etc.
6. Site Links - displays links relative to other sites that the visitors would find interesting.
 MODULE 9: Introduction to Web Development

DATA CHECK

A. True/False
Direction: Write True on the space provided if the statement is correct, otherwise, write False.
_____1. Internet Protocol is a set of standards that govern interaction on the internet.
_____2. Desktop developers specialize in building software applications that run locally on
your device, rather than over the internet in the web browser.
_____3. Full-stack development includes electronic interfaces, consumer devices, IoT
devices, real-time systems, and more.
_____4. The Back-end is the side of a website or software that you see and interact with as
an internet user.
_____5. Web design is the creation of the layout of the visual elements of the website using
various design programs.
_____6. HTML connects you and your website request to the remote server that houses all
website data.
_____7. Wireframe describes how the entire site will look like.
_____8. Animation is used to capture maximum user attention when used responsibly.
_____9. Minimalism can be achieved by reducing the use of visuals on the web page.
_____10. In the coding phase, the contents are being prepared so they will be ready before or
during website coding. Appropriate text, images, and videos are chosen in this phase.

HANDS ON

Direction: Create the site map and wireframe for your personal website. Be guided with
the given rubrics. Write your answers on a short bond paper/MS Word.

SITEMAP WIREFRAME
 MODULE 9: Introduction to Web Development

RUBRIC
Criteria 5 4 3 2 Score
Site Map The site map The site map The site map The students
clearly described described with was not clear showed little
how the entire some degree of how the or no effort
site will look clarity how the entire site was shown to
like. It listed all entire site will will look do this task.
the areas of the look like. It like. The list
website and listed all the of the areas
showed the areas of the of the
relationship website and website were
among the web showed the not complete
pages. relationship and did not
among the web show the
pages. relationship
among the
web pages
Wireframe The wireframe The wireframe The The students
clearly described described with wireframe showed little
the sketch of the some degree of did not or no effort
user interface of clarity the describe the was shown to
the website. sketch of the sketch of the do this task.
user interface user interface
of the website. of the
website.

MODULE CREATORS

Module Author/Curator : Mrs. Jenny P. Macalalad

Template & Layout Designer : Mr. Luis Philip M. Oropesa

ANSWER KEY
1. TRUE 6. FALSE
2. TRUE 7. FALSE
3. FALSE 8. TRUE
4. FALSE 9. TRUE
5. TRUE 10. FALSE
 MODULE 10: Basic HTML and FORMATTING TAGS

Basic html
OBJECTIVES
And
formatting tags Content Standards:
The learners demonstrate an
MODULE 10 understanding of using Basic HTML
and Formatting Tags.
Performance Standards:
The learner shall be able to develop
a website using HTML basic and
formatting tags.
Most Essential Learning
Competencies:
10.1. Understand the basic HTML
commands.
10.2. Identify the structure of a
basic HTML document.
10.3 Use HTML basic tags and
attributes in creating an HTML

INTRODUCTION

Have you ever right clicked on a web page and clicked “view page source” or
looked at the source code for an email? That’s HTML. HTML, or HyperText Markup
Language, uses tags to alter the structure, or how text or objects appear on a web page.
HTML tags help you to organize content, make a page easier to read, or tell search
engines what the most important keywords are using header tags.
This lesson will show you the structure of a basic HTML document. You will
understand about elements, tags, and attributes. You will also create your first HTML
document.
The following questions deal with the fundamental concepts and principles of this
module:
 What is the structure of a basic HTML document?
 How do we write an HTML document?
 MODULE 10: Basic HTML and FORMATTING TAGS

DATA INPUT

INTRODUCING HTML
HTML or the Hypertext Markup Language is the language in which most websites are
written. HTML is used to create pages and make them functional. Hypertext means that the
document contains links that allow the reader to jump to other places in the document or to
another document altogether.
A Markup Language is a way that computers speak to each other to control how text
is processed and presented

BRIEF HISTORY
The world wide web was a vision of Sir Tim Berners-Lee in 1989. He is a British computer
scientist, born to both computer scientist parents. Sir Berners-Lee exploited the use of
Hpertext although computers are already being connected through the internet. In October
1990, the three technologies that became his fundamental foundation are the HTML, URL,
and HTTP. When he joined MIT (Massachusetts Institute of Technology) in 1884, the World
Wide Web Consortium was founded.

Sir Timothy John Berners-Lee

 aka Tim Berners-Lee

 Born: 8 June 1955
 Father of the World Wide Web
 created HTML in late 1991

HTML EDITORS

Now that we have gotten the basic theory out of the way. It is the time to learn
how to build our first website. First off, we must ensure that we have the right tools.
Most important, we need an HTML editor.
There are many choices on the market. Here are the handful of the most popular:
Notepad is the default text editor for Windows.

Text Edit is the default text editor for Mac.

Sublime Text 3 offers cross-platform support for Windows, Mac, and

Linuxusers.

Komodo Edit offers a simple, open-source editor with a variety of

extensionsand language support.
 MODULE 10: Basic HTML and FORMATTING TAGS

However, for the succeeding lessons, we will use Notepad++ as our text
editor. Notepad++ is a free source code editor for use with Microsoft Windows. It
supports editing and allows working with multiple open files in a single window.

Notepad++ Environment
To download Notepad++ 7.5.8 for free, let us go to this website:
https://notepad-plus-plus.org/download/v7.5.8.html

The Notepad++ environment has the following parts:

1
6 1. Title bar. It shows the file
7
2 name and file type of the current
file. It is also used to show the file
location.
2. Tab bar. It gives access to all
opened files.
3. Line number. It identifies the
location ofa line of codes.
4. Text area. It is the working space
3
where the codes are typed in.
4
5. Status bar. It identifies the location
of the cursor.
6. Menu bar. It has the commands
that can be used on Notepad++.
7. Toolbar. It contains commonly
used commands when editing afile.
5

BASIC COMMANDS
The basic commands on Notepad++ follow the same steps when using any
Windows-based programs.

1. Open a file

To open a file, we can either use The newly opened file has its own
the menu bar or the toolbar. tab on the tab bar.
 MODULE 10: Basic HTML and FORMATTING TAGS

2. Save a file
To save an HTML file, we include the file type as we enter its file name. For
example, homepage.html.
To save a current file, we can also either use the menu bar or the toolbar.
The Save All command is a convenient tool used to save all opened files at the
sametime.

3. Run a file
To check for the output, we have to launch our webpage by selecting the Run
menu.

4. Close a file
We can choose the Close command from the File menu, or we simply click the
Close button from its tab.

5. Exit Notepad++
Exiting doesn’t mean closing all the opened files, it only closes the program.

STRUCTURE
 MODULE 10: Basic HTML and FORMATTING TAGS

TAG DESCRIPTION
<!DOCTYPE> defines the document type Let us remember these
and HTML version guidelines as we type our
<body> contains the web page codes:
content that will be 1. The codes are indented.
displayed on the browser 2. The codes are not on one (1)
window line.
<head> contains the document's 3.The opening and closing tags
header information of an element must be at the
<html> encloses the complete same level.
HTML document
<title> specifies a title for the
document and displays it
on the title bar of the
browser window
Our first HTML document uses the tags below:

FILE

HTML is a document format that tells a computer how to display a web page.
The filename extension of an HTML file is .htm or .html

Writing an HTML Document

Let us start writing an HTML document by following these steps:

1. Open Notepad++
2. To save the file, we do the following:
a. Choose File, and select the Save As option.
b. In the file name box, type mypage.html
c. Click the Save button.
3. Type the following text in the code editor window.
Note that the tags are automatically colored on blue.

4. Save the file again. Click the Save button on the toolbar.
5. View the web page using a browser. Use the Run menu.
 MODULE 10: Basic HTML and FORMATTING TAGS

It must display the output below:

HTML ELEMENT

The anatomy of our element is:

The opening tag: This consists of the name of the element (in this example, p for
paragraph), wrapped in opening and closing angle brackets. This opening tag marks
where the element begins or starts to take effect. In this example, it precedes the start of
the paragraph text.
The content: This is the content of the element. In this example, it is the paragraphtext.
The closing tag: This is the same as the opening tag, except that it includes a forward
slash before the element name. This marks where the element ends. Failing toinclude a
closing tag is a common beginner error that can produce peculiar results.
The element is the opening tag, followed by content, followed by the closing tag.

HTML ATTRIBUTE
Attributes are additional values that configure the elements or adjust their
behavior in various ways to meet the criteria the users want.

Attributes contain extra information about the element that won't appear in the
content. In this example, the class attribute is an identifying name used to target the
element with styleinformation.
An attribute should have:
 A space between it and the element name. (For an element with more than one
attribute,the attributes should be separated by spaces too.)
 The attribute name, followed by an equal sign.
 An attribute value, wrapped with opening and closing quote marks.
 MODULE 10: Basic HTML and FORMATTING TAGS

DATA CHECK

Directions: Write TRUE if the statement is correct, otherwise FALSE.

1. The opening tag consists of the name of the element wrapped in opening
and closing angle brackets.
2. Attributes contain extra information about the element that won't
appear in the content.
3. Text area the working space where the codes are typed in.
4. <title> encloses the complete HTML document.
5. Web development includes the visual aesthetics and usability of a website.
6. <head> contains the document's header information.
7. Notepad ++ is a default text editor software packed in Windows computer.
8. <title> tag specifies a title for the document and displays it on the title bar.
9. Sir Timothy John Berners-Lee is the Father of World Wide Web.
10. Status bar identifies the location of a line of codes.

HANDS ON

CODING: Create the HTML5 document that contains your basic information such as full
name, address, age, grade, and section, and your favorite quotation that suits your personality.
Write your code in the box.

ADDITIONAL LEARNING RESOURCES

SCORING SCHEME:

Criteria Highest Possible Your Score

Score
Correct Usage of HTML Syntax 10
Execution of guidelines 5
TOTAL 15
 MODULE 10: Basic HTML and FORMATTING TAGS

REFERENCES

Cobre, Frago, Olalia, Tingzon (2019) Computers for Digital Learners Web Development
Teachers Wraparound Edition

HTML Basic.Retrieved from https://www.w3schools.com/html/html_basic.asp

HTML.COM. (2020, Jan 1) HTML For Beginners The Easy Way:Start Learning HTML &
CSS Today. Retrieved from
https://html.com/#Welcome_You8217ve_Found_the_Easiest_Way_to_Learn_HTML
_and_CSS

MDN. Getting Started with HTML. Retrieved from

https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/Getting_started

MODULE CREATORS

Module Author/Curator : Mrs. Jenny P. Macalalad

Template & Layout Designer : Mr. Luis Philip M. Oropesa

ANSWER KEY
1. TRUE 6. TRUE
2. TRUE 7. TRUE
3. TRUE 8. TRUE
4. FALSE 9. TRUE
5. TRUE 10. FALSE
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

Using html5 basic, formatting, OBJECTIVES

list and link tags Content Standards:
The learners demonstrate an
MODULE 11
understanding of using HTML
Basic, Formatting, List and Link
Tags.
Performance Standards:
The learners shall be able to develop a
website using HTMLbasic, formatting,
list and link tags.
Most Essential Learning
Competencies:
11.1 Use HTML5 formatting tags
in creating an HTML5
document.
11.2 Use HTML5 list and link tags
in creating HTML5 document.
document.

INTRODUCTION

In the previous lesson, you learned different tools that may be used to
create content for your HTML files. These HTML files contain commands
called scripts that tell a browser such as Google Chrome how content is
displayed as a webpage. You mighthave also encountered that some websites
are displayed differently when viewed in another browser such as Mozilla
Firefox. Can you control how these productivity tools create HTML files that
will properly run in all browsers?
As a part of our lesson, you will be asked to share ideas on how and
what to do in the given situation that requires the management of an existing
website. You will also be asked to share ideas on possible tags in HTML, the
things to consider when creating templates for other people and how to manage
the presentation of a website.
Using lists in HTML allows us to make an outline for the content of our
webpage, making it more organized. Lists are used to group together related
information on the web page. This gives us clear association of the items and
makes them easy to read.
Links are found in almost all web pages. These allow users to navigate
from pageto page. They make our websites more useful and more attractive for
website visitors. They also create connections.
The following question deals with the fundamental concepts and
principles of this module:
 How does one develop and manage a website with total control?
 How do lists help you in organizing content in your HTML document?
 How does linking to other websites enhance the user’s site experience?
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

DATA INPUT

HTML BASIC TAGS

1. Heading Tag
Heading tags are indicators used in HTML to help structure your webpage
from an SEO (Search Engine Optimization) point of view, as well as helping the
browser to read your piece of content. Heading tags range from H1-H6 and form a
hierarchical structure to your page. Heading tag 1 is the most important header in
browser’s eyes and forms the title of the page. Identifying the title with an H1 tag will
help the browser quickly know what the contentis about.
Syntax: <h1>Heading</h1>
Example: Output:

Note: What’s the Difference Between a Heading 1 and Page Title Tags?
*The main difference between the page title tag and the H1 tag is where they
appear.Page Title’s appear in the title bar at the top of the web browser
when youare reading the content. An H1 tag is what readers will see on the
page. It is often in larger text and acts as a title for the page.

2. Paragraph Tag
The <p> tag defines a paragraph. Browsers automatically add a single
blank linebefore and after each <p> element.

Syntax: <p>paragraph</p>

Example: Output:
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

3. Line Break tag

The <br/> tag inserts a single line break.
The <br/> tag is useful for writing addresses or poems.
The <br/ > tag is an empty tag which means that it has no end tag.

Note: Use the <br> tag to enter line breaks, not to add space between paragraphs.
Syntax: <br/>

Example: Output:

4. Preformatted tag
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text
preserves bothspaces and line breaks. The text will be displayed exactly as written in
the HTML source code.
Syntax: <pre>Text</pre>

Example: Output:

5. Horizontal Rule tag

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to
separatecontent (or define a change) in an HTML page.
Syntax: <hr/>

Example: Output:
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

Some of the Useful HTML Character Entities

Result Description Entity Result Description Entity
Name Name
non-breaking &nbsp; ₵ cent &cent;
space £ pound &pound;
< less than &lt; ¥ yen &yen;
> greater than &gt; ₤ euro &euro;
& ampersand &amp; © copyright &copy;
“ double quotation &quot; ® registered &reg;
mark trademark
‘ apostrophe &apos;

Non-breaking Space
This is used to add spaces to our text.
Syntax: &nbsp;
Example: Output:

Comment Tag
This is used to insert comments in the HTML source code, but will not be
displayedby the browser.
Syntax: <!--Comments-->
Example: Output:

HTML FORMATTING TAGS

Formatting tags are used to display special types of text with special meanings.

1. Bold Tag
This is a physical tag that diplays a bold text.
Syntax: <b> Text </b>
2. Strong Tag
This is a logical tag which is used for a strong text to add importance in meaning.
Syntax: <strong> Text </strong>
3. Italic Tag
This is a physical tag that diplays an italic text.
Syntax: <i> Text </i>
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

4. Emphasized Tag
This is a logical tag which is used for an emphasized text to add
importance inmeaning.
Syntax: <em> Text </em>
5. Superscript Tag
This tag displays a superscripted text.
Syntax: ^Text
6. Subscript tag
This tag displays a subscripted text.
Syntax: _Text
7. Nested Tags
These are tags put inside a pair of tags.
Syntax: <tag1><tag2><tag3>Text </tag3></tag2></tag1>
Note: The last tag opened should be the first tag closed.

Other Formatting Tags

Tag Description
<del> it displays a deleted text
<ins> it displays as inserted text
<small> it displays text one font size smaller than
the rest of the text
<mark> it displays a marked or highlighted text

Example: Output:
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

HTML LIST TAGS

HTML Lists are used to specify lists of information. All lists may contain one or
morelist elements. There are three different types of HTML lists:

1. Ordered List (ol)

2. Unordered List (ul)
3. Definition List (dl)

HTML Ordered List

In the ordered HTML lists, all the list items are marked with numbers by default.
It isknown as numbered list also. The ordered list starts with <ol> tag and the list items
start with <li> tag.
SYNTAX:

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Example:
TAG DESCRIPTION

type = list items will be numbered wit

“1” h numbers

type = list items will be numbered wit

“A” h uppercase letters

type = list items will be numbered wit

“a” h lowercase letters Output:

type = “I” list items will be numbered wit

h uppercase Roman numerals

type = “i” list items will be numbered wit

h lowercase Roman numerals
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

HTML Unordered List

In HTML Unordered list, all the list items are marked with bullets. It is also
known asbulleted list also. The Unordered list starts with <ul> tag and list items start
with the <li> tag.
SYNTAX:

<ul>
Example:
<li>Item 1</li>
<li>Item 2</li>
</ul>

Output:

HTML Definition List

HTML Description list is also a list style which is supported by HTML and
XHTML. It is also known as definition list where entries are listed like a dictionary or
encyclopedia.The definition list is very appropriate when you want to present glossary,
list of terms or other name-value list.
The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

SYNTAX:

<dl>
<dt>Term</dt>
<dd>Term definition</dd>
</dl>
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

Example: Output:

HTML Nested List

We can put a list inside a list to create what we call a sub-list or nested list.

SYNTAX:

<ol>
<li>Item 1</li>
<ul>
<li>Subitem1</li>
<li>Subitem2</li>
</ul>
<li>Item 2</li>
</ol>

Example: Output:
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

HTML LINK TAGS

Anchor Tag and Href Attribute
A link is specified using the anchor tag or <a>tag. The hypertext reference or
href attribute is used to indicate the Uniform Resource Locator (URL) or the address of
the web page or the document we are linking to. The text between the opening and
closing anchor tag will be displayed as a hyperlink.

TYPES OF LINKS
Underlined and blue. It is an
unvisited link.Underlined and purple.
It is a visited link. Underlined and
red. It is an active link.

Anchor Tag and Name Attribute

Together with the <a> tag, the name attribute is used to create a named anchor.
To save us from scrolling around to find what we are looking for within the page, we
can create links that can jump directly to a specific section of a web page.

Anchor Tag and Target Attribute

The target attribute specifies where to open the linked document.

TAG DESCRIPTION

_blank it opens the linked document in a new window or tab

_self it opens the linked document in the same window or tab.

This is the default

_parent it opens the linked document in the parent frame

_top it opens the linked document in the full body of the wind
ow

TYPES OF HYPERLINK
1. Link to a Website
When we link to a different website, the value of the href attribute is the absolute
url.
An absolute URL includes the domain name of the website and can be
followed bythe path to a specific page.
Syntax:
<a href=”absolute URL”>link text</a>

Example: Output:
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

When we click the hyperlink, it will go directly to the specified website.

2. Link to Another Web Page on the Same Website

To link to another web page within the same site, we can use a relative url.
A relative url is a shorthand version of an absolute URL.
Syntax:
<a href=”relative URL”>link text</a>

Example: Output:

When we click the hyperlink, it will go to the specified web page. We can also
link to a document in our computer using a relative URL.

3. Link to a Web Page Section

We can also create a link to a particular section of a web page using the
name attribute.

Let us follow the steps below:

1. Identify the point on the page where the link
willgo to.

Syntax:
<a name=”name of page section”></a>

Example: Output:
There is no output.
The page section is just
a given a name.

2. Create a hyperlink to the named

web pagesection.
Syntax:
<a href=”name of page section”>link text</a>

Example: Output:
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

When we click the hyperlink, it will go to the part where we placed the named
pagesection.

4. Open Links in a New Window

By default, the link will open in the current window. To open a link in a new
browser window, the value of the target attribute should be _blank.

Syntax:
<a href=”URL” target=”_blank”>link text</a>

Example: Output:

When we click the hyperlink, it will open the specified website in a new window.

4. Create Email Links

We can also create email links. Using the mailto: value of the href attribute
followed by the email address we want the email to be sent to, the link will start up the
user’s email program and will address the email to the specified email address.

Syntax:
<a href=”mailto:email address”>link text</a>
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

DATA CHECK

A. Identifying the syntax

Write the correct syntax for each tag. Write your answers on the space provided.

1. Horizontal rule <hr>

2. Superscript <sup>
3. Line break <br>
4. Paragraph <p>
5. Preformatted <pre>
6. Bold <b>
7. Italic <i>
8. Emphasize <em>
9. Subscript <sub>
10. Strong <strong>

B. Match the Tag

Match the descriptions to the appropriate tags correspondingly. Write the
letter of the correct answer on the space provided.

11. Ordered list

a. <dt>
12. creates hyperlinks on a web page
b. _blank
13. Item list
c. <dd>
14. the attribute that indicates the URL or
d. Name
the document you are linking to
e. <dl>
15. Term to be define
f. <a>
16. creates a named anchor
g. mailto:email address
17. Unordered list
h. <li>
18. value of the target attribute so that a
i. <ol>
link can be opened in a new browser
j. href
19. Definition list
k. <ul>
20. value of the href to create an emaillink
 MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

HANDS ON

CODING:
1. Open your HTML document from the previous lesson.
2. Modify the look and contents of your webpage by using some tags from this lesson.
3. Explore with the tags and be creative.
4. Save your file as your Section_LastName_FirstName_Ptask3.html

For modular learners, submit a screenshot of your web page and your code on a short
bond paper with your name and section.

SCORING SCHEME:
Criteria Highest Possible Your Score
Score
Usage of HTML Syntax 15
Creativity 15
TOTAL 30

REFERENCES

Cobre, Frago, Olalia, Tingzon (2019) Computers for Digital Learners Web Development
Teachers Wraparound Edition

HTML Basic.Retrieved from https://www.w3schools.com/html/html_basic.asp

HTML.COM. (2020, Jan 1) HTML For Beginners The Easy Way:Start Learning HTML &
CSS Today. Retrieved from
https://html.com/#Welcome_You8217ve_Found_the_Easiest_Way_to_Learn_HTML
_and_CSS

MDN. Getting Started with HTML. Retrieved from

https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
MODULE 11: Using HTML5 Basic, Formatting, List and Link Tags

MODULE CREATORS

Module Author/Curator : Mrs. Jenny P. Macalalad

Template & Layout Designer : Mr. Luis Philip M. Oropesa

ANSWER KEY

1. <hr> 11. I
2. <sup> 12. F
3. <br> 13. H
4. <p> 14. J
5. <pre> 15. A
6. <b> 16. D
7. <i> 17. K
8. <em> 18. B.
9. <sub> 19. C
10. <strong> 20. G
 MODULE 12: Introduction to Cascading Style Sheets

Introduction to cascading style OBJECTIVES

sheets Content Standards:
The learner demonstrates
MODULE 12
understanding in the use of
Cascading Style Sheet 3.
Performance Standards:
The learner shall be able to use
CSS3 in creating website.
Most Essential Learning
Competencies:
12.1 Understand how Cascading Style
Sheets (CSS) can be used to add
fantastic layout to your pages.
12.2 Manipulate the appearance of web
page elements through Cascading
Style Sheets;

INTRODUCTION

CSS is a language that defines style constructs such as fonts, colors, and
positioning, which describe how information on a web page is formatted and
displayed.
Cascading Style Sheets or CSS has given web designers and developers
alike the ability to incorporate stylish and creative elements into the overall
design of applications. This provides a lot of flexibility by providing an almost
limitless set of opportunities, which improves the overall user experience.
The following questions deal with the fundamental concepts and
principles of this module:
 What is Cascading Style Sheets (CSS)?
 What are the syntax and types of CSS?
 What are the basic commands when creating a website?
 MODULE 12: Introduction to Cascading Style Sheets

DATA INPUT

Cascading Style Sheets

Cascading Style Sheets (CSS) is a language used for designing Hypertext Markup
Language (HTML) documents.
The cascading part of the name CSS refers to how stylesheet rules are applied to
elements in an HTML document.
A stylesheet is a grouping of formatting instructions that control the appearance
ofseveral HTML pages at once.

CSS Advantages
These are the advantages of designing a website using CSS:
1. Consistency
A consistent style of multiple web pages on a website is possible with CSS, thus
saving us more time in designing.
2. Bandwidth reduction
The file transfer size is being reduced since styles in CSS are accessed only once,
resulting in a faster loading time of a web page.
3. Browser Compatibility
CSS increases our websites' adaptability to be viewed by more visitors on their chosen
web browsers.
4. Accessibility
A website can be viewed using any preferred devices.

CSS Styles
There are three (3) styles that we can use to design an HTML document.
1. External style sheet. It is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire web site by changing to
the CSS style sheet file.
2. Internal style sheet. This applies styles to a single page or style sheet. An internal
style sheet should be used when a single document has a unique style.
3. Inline style sheet. It specifies or defines a style to a single element on a web page.

CSS Syntax
We can specify the style using this syntax: selector{property:value;}
 A selector is the HTML element you want to format.
 A declaration consists of a set of properties and its value that are separated by a
colon (:). It ends with a semicolon (;).
 A declaration block has a property and a value surrounded by curly braces ({}). It
performs the actual formatting of the selected element.
 A property is the aspect of the selector to style.
 A value is the chosen value of the property.
 MODULE 12: Introduction to Cascading Style Sheets

The figure below summarizes this:

In this case, the rule specifies that all the level 1 headings will be pink in color and
have a font size of 10.

Saving a CSS File in Notepad++

External style sheets are the only CSS file saved separately to its HTML document. In
saving a CSS file, both CSS and HTML files must be located in the same folder. Once you
enter the file name for your document, make sure that the file type is set to "Cascade Style
Sheets File (*.css)"

File Management
When working on a website, a common and best practice is to place all files, such as
HTML and CSS files, photos, and videos, in one (1) folder that is our main folder so we can
easily retrieve them as we work on our website.

Format
We also follow a format when we write
CSS styles, which help us navigate and review our codes.
In this example, the body and h1 selectors are
vertically aligned. The declarations (background-color,
color, and margin-left) are indented, and each is placed
in the next line.

Comments
A comment is a string of non- executable text
included in code as a means of explaining the code. It is
helpful when you or someone else edits the source code
at a later date.
In CSS, a comment starts with /* and ends with */.
A comment can span more than one line. The example
besides demonstrates how comments are used:
 MODULE 12: Introduction to Cascading Style Sheets

DATA CHECK

I. TRUE OR FALSE
Direction: Read each statement carefully. On the space provided, write TRUE if the
statement is correct, otherwise, write FALSE.

______1. The declarations of a selector are separated with colons (:).

______2. The external style sheet applies styles to a single page or style sheet.
______3. The CSS file is represented by a gear icon once saved.
______4. A stylesheet is a grouping of formatting instructions that control the
appearance of several HTML pages at once.
______5. In CSS, a comment starts with*/ and ends with /* .
______6. The inline style sheet defines a style to a single element on a web
page.
______7. CSS increases our websites' adaptability to be viewed by more visitors on
their chosen web browsers.
______8. The declaration block has a property and a value surrounded by curly
braces ({}).
______9. CSS stands for Cascading Style Sheets.
______10. The file extension when saving a CSS file is .css.

REFERENCES

Cobre, Frago, Olalia, Tingzon (2019) Computers for Digital Learners Web Development
Teachers Wraparound Edition
Learn to Code with Me. CSS Basics: Learn More About Cascading Style Sheets. Retrieved from
https://tinyurl.com/y4edupqo
HTML Basic.Retrieved from https://www.w3schools.com/html/html_basic.asp
HTML.COM. (2020, Jan 1) HTML For Beginners The Easy Way:Start Learning HTML &
CSS Today. Retrieved from
https://html.com/#Welcome_You8217ve_Found_the_Easiest_Way_to_Learn_HTML
_and_CSS
MDN. Getting Started with HTML. Retrieved from
https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
Rwanda Education Board. (2019). Cascading Style Sheet. Retrievedfrom
https://tinyurl.com/y5h5mhnf
MODULE 12: Introduction to Cascading Style Sheets

MODULE CREATORS

Module Author/Curator : Mrs. Jenny P. Macalalad

Template & Layout Designer : Mr. Luis Philip M. Oropesa

ANSWER KEY

1. True 6. True
2. False 7.True
3. True 8. True
4. True 9. True
5. False 10. True
MODULE 13: Using External Style Sheet and Selectors

USING EXTERNAL STYLE SHEET AND OBJECTIVES

SELECTORS Content Standard:
The learner demonstrates an
MODULE 13
understanding of creating
standards-based websites using
external style sheet and
selectors.
Performance Standards:
The learners shall be able to
develop and manage a website
with the use of an external style
sheet and selectors.
Most Essential Learning
Competencies:
13.1 Describe the function of
External Style Sheet.
13.2 Use External Style Sheet
tomultiple web pages.
13.3 Use selectors on a webpage.

INTRODUCTION

The presentation of the page should be separate from its content. As recommended by
the W3C, separating the presentation tasks from the content should be done by using style
sheets. With the use of style sheets, web developers will specify how content shall be
presented by simply modifying style rules contained in a style sheet. Style sheets also help
web developers to modify the site theme easily.

The following questions deal with the fundamental concepts and principles of this
module:
 What is an External Style Sheet?
 How do you use an External Style Sheet?
 How do you use different selectors?
MODULE 13: Using External Style Sheet and Selectors

DATA INPUT

External Style Sheet

A separate text file containing the style definitions. The CSS file is created the same
way HTML documents were created except that the extension is .css. The external style sheet
is applied by linking it in the <head> tag of the HTML document. We use the syntax below,
where we only change the value of the href attribute with the file name and file type of the
CSS file
. <head>

<title>SYNTAX:
Title of the Web Page </title>
<link rel=”stylesheet” type=”text/css” href=”Filename.css”>
</head>
The <link> tag has the following attributes:

 rel - defines the relationship of the linked file

 type - defines the content of the data in the file
 href - defines the filename of the CSS file
Example:
HTML FILE CSS FILE

OUTPUT

CSS Selectors
Selectors are ways of choosing or indicating which and how elements are to be
styled.
1. Grouping Selectors
At times, we would want a number of our selectors to use the same style.
SYNTAX: Selector, selector, selector{
property:value;}
MODULE 13: Using External Style Sheet and Selectors

2. Class Selector
In CSS, a class selector is created by adding a period (.) and a name of your choice to
name a class.
.className{
SYNTAX:
property:value;
}

In HTML, we put class as the attribute in the opening tag and its value is the
className.
<tag class=”className>
SYNTAX: Content
</tag>
3. ID Selector
In CSS, an id selector is created by adding a number sign (#) and a name of your choice
to name an id. An id is a unique identifier and should be assigned to a single instance of
an element.
#idName{
SYNTAX:
property:value;
}

In HTML, we put id as the attribute in the opening tag and its value is the idName.
SYNTAX: <tag id=”idName>
Content
</tag>

Example Codes in Using CSS Selectors

CSS File HTML File

Output
MODULE 13: Using External Style Sheet and Selectors

DATA CHECK

TRUE OR FALSE
Direction: Read each statement carefully. On the space provided, write TRUE if the
statement is correct, otherwise, write FALSE.
_______1. A class selector is created by adding a period.
_______2. A comma separates the value from the succeeding sets of properties and
values.
_______3. In CSS, an id selector is created by adding a number sign (#).
_______4. Creating the link to the external CSS will apply its style to the HTML file.
_______5. Multiple selectors can apply the same styles to multiple elements.
_______6. The type attribute defines the relationship of the linked file.
_______7. In the CSS link, .css is also included in the value of the href attribute.
_______8. The correct CSS syntax is body {color: black;}
_______9. The correct place to refer to an external style sheet is in the body> section.
_______10. The href attribute defines the filename of the CSS file

HANDS ON
Performance Task 4.1

1. Open the html file of your website.

2. Use External CSS and selectors in your website.
3. Have a screen shot of your output as well as the source code of your HTML and CSS
file and submit in PDF file.

Be guided by the rubric below:

Source code 10
Creativity 5
Overall Impact 5
TOTAL 20 pts.
MODULE 13: Using External Style Sheet and Selectors

ADDITIONAL LEARNING RESOURCES

In this tutorial, you will learn how to use an external style sheet so you can style
multiple web pages at once. Using an external style sheet will also help us learn CSS easier as
notepad++ changes colors to help us differentiate between selectors, properties, and values.

REFERENCES

Cobre, Frago, Olalia, Tingzon (2019) Computers for Digital Learners Web
DevelopmentTeachers Wraparound Edition

Patiño (2014) Fundamentals of Web Design and Development Second Edition

Quentin Watt Tutorials. (2014, Mar 8). HTML5 and CSS3 beginners tutorial 12 - External
style sheet [Video File]. Retrieved from https://tinyurl.com/y6zx8ao6

MODULE CREATORS

Module Author/Curator : Mrs. Jenny P. Macalalad

Template & Layout Designer : Mr. Luis Philip M. Oropesa
MODULE 14: Working with Background, Text, and Font Properties

\\\
Working with Background, Text, OBJECTIVES
and Font Properties Content Standard:
MODULE 14 The learner demonstrates an
understanding of the various
properties of background, text,
and font.
Performance Standards:
The learners shall be able to
develop a website using the
different properties for
background, text, and font
properly.
Most Essential Learning
Competencies:
14.1 Describe the functions of
background, text, and font
properties.
14.2 Develop creativity when
using these properties
effectively.

INTRODUCTION

In many website design projects, you want to modify the background, text, and
font to something more suitable for your layout because the presentation of the content affects
the audience.
Simple backgrounds are key to creating clear, high quality images that
your audience will be able to see, register, and respond to no matter where they see it.
Typography accounts for 90% of website design. The words on your website
matter, so, how you present these words should hold equal importance. The fonts add value to
your text. It helps readers to perceive information from the text. The correct choice of color,
font, and text size can prove to be vital for attracting your target audience
The following question deal with the fundamental concepts and principles of this
module:
 What are the functions of background, text, and font properties in an HTML
element?
MODULE 14: Working with Background, Text, and Font Properties

DATA INPUT

Background Properties
Background properties may be used to define the background of an HTML element. A
common use for the background property is for setting the background of the body. The
following properties are used to define the background of an HTML element:

PROPERTY DESCRIPTION VALUES SYNTAX

background-color Sets the  color name selector{
background  transparent background-color:value;
color (default value }
- no
background)
background-image Sets the  file name and selector{
background file type of the background-image:value;
image image }
 none
background- Sets the initial  top-left selector{ back
position position of the (default) ground-
background  top-center position:value;
image  top-right }
 center-left
 center-right
 bottom-left
 bottom-center
 bottom-right
 x% y%
(0%,0% refer
to top-left
corner,
100%,100%
refer to
bottom right
corner)
 x y (x and y
position in
pixels or other
CSS unit
background-size Sets the size of  auto (default) selector{
the background  length background-size:value;
image ( indicate x,y) }
 percentage
(indicate
x%,y%)
 cover ( set the
image large
MODULE 14: Working with Background, Text, and Font Properties

PROPERTY DESCRIPTION VALUES SYNTAX

enough to
cover the
background
area; some
parts may not
be visible)
 contain (set
the image
large enough
to cover the
area
background-repeat Sets how the  repeat selector{
background will (default) background-
tile or repeat in  repeat-x repeat:value;
the page (repeat }
horizontally)
 repeat-y
(repeat
vertically)
 no-repeat
Text Properties
Text properties may be used to define the style of text in an HTML element. The
following properties are used to define the style of the text in an HTML element:

PROPERTY DESCRIPTION VALUES SYNTAX

text-align Sets the  left (default) selector{
alignment of text  right text-align:value;
 center }
 justify
color Sets the text  color name selector{
color  color in color:value;
hexadecimal }
format
text-decoration Sets the  none (default) selector{
decoration of the  underline text-
text  overline decoration:value
 line-through ;
}
text-indent Sets the  0 (default) selector{
indention of thefirst  length in px, text-indent:value;
line of text em, cm }
 percentage(%)
letter-spacing Sets the space  px, em, cm selector{
between the letter-spacing:value;
characters }
line-height Sets the space  normal selector{
between lines (default) line-height:value;
 px,em,cm,% }
 MODULE 14: Working with Background, Text, and Font Properties

PROPERTY DESCRIPTION VALUES SYNTAX

text-shadow Sets the text  h-shadow selector{
shadow  v-shadow text-shadow:value;
 blur-radius }
 color
 none (default)
text-transform Sets the case of  none (default) selector{
the text  capitalize text-transform:value;
 uppercase }
 lowercase
word-spacing Sets the space  normal selector{
between words (default) word-spacing:value;
 length in px, }
em, cm

Font Properties
Font properties may be used to define the style of the text in an HTML element.
Three (3) Types of Font
 SERIF FONTS are with tails on their ends.
 SANS SERIF FONTS are clean cut. They are widely used on the web and
freefonts are available online.
 MONOSPACED FONTS have a fixed width. The letters cover the same
amount of space horizontally.
SERIF SANS SERIF MONOSPACED
Baskerville Century Gothic Consolas
Garamond Trebuchet MS Courier New
Georgia Verdana Lucida Console
The following properties are used to define the style of the text font in an HTML
element:
PROPERTY DESCRIPTION VALUES SYNTAX
font-family Sets the list offonts to  family name selector{
be used font-family:value;
}
font-size Sets the size ofthe  small selector{
font  medium font-size:value;
 large }
 pixels (px)
 em
 percent (%)
font-style Sets the style ofthe  normal selector{
font (default) font-style:value;
 italic }
 oblique
font-weight Sets the weightof the  normal selector{
font (default) font-weight:value;
 bold }
 bolder
 lighter
 100-900
MODULE 14: Working with Background, Text, and Font Properties

PROPERTY DESCRIPTION VALUES SYNTAX

font-variant Sets whether ornot  Normal selector{
text is (default) font-variant:value;
displayed insmall  Small-caps }
caps
MODULE 14: Working with Background, Text, and Font Properties

DATA CHECK

Directions: Identify the five (5) CSS Text and Font values used in the given output below.
Choose your answers from the table and write them in the space provided. (any
order)

OUTPUT:

TABLE:

center strikethrough bottom strong

underline right rtl bold
big-caps line-through top uppercase
overline capitalize small-caps italic

ANSWER:
1.
2.
3.
4.
5.

HANDS ON
Performance Task 4.2

1. In the CSS file you created in Module 13, modify your website’s background, text, and
font.
2. Use the various background, text, and font properties.
3. Save your work and submit screenshots of your output and source code in .pdf format
with proper labeling.

Be guided by the rubric below:

Source code 10
Creativity 10
Overall Impact 5
TOTAL 25 pts.
MODULE 14: Working with Background, Text, and Font Properties

ADDITIONAL LEARNING RESOURCES

This tutorial covers everything to do with background images. It shows you how to add
a background image, manipulate the repeating image, change the position, and even how to fix
the background image so that does not move while scrolling

There are a lot of CSS text properties. They define how text is displayed on a website.

REFERENCES

Full Stack Coding Tutorials. (2017, Jul 21). Learn All CSS3 Text Properties In One Short
Video [Video File]. Retrieved from https://tinyurl.com/y6zzw8uo

Cobre, Frago, Olalia, Tingzon (2019) Computers for Digital Learners Web Development
Teachers Wraparound Edition
Quentin Watt Tutorials. (2014, Apr 9). HTML5 and CSS3 beginners tutorial 20 - background
images [Video File]. Retrieved from https://tinyurl.com/yyu2z8cy

Patiño (2014) Fundamentals of Web Design and Development Second Edition

MODULE CREATORS

Module Author/Curator : Mrs. Jenny P. Macalalad

Template & Layout Designer : Mr. Luis Philip M. Oropesa
MODULE 15: Tables

\\\
TABLES OBJECTIVES
Content Standard:
The learner demonstrates an
MODULE 15
understanding of the use of HTML
table tags and attributes.
Performance Standards:
The learner shall be able to develop
a website that includes a table.
Most Essential Learning
Competencies:
15.1 Create tables on a web page
using Cascading Style Sheets
(CSS).
15.2 Apply table and border
properties.

INTRODUCTION

A table is one way of showing data or information. The contents of the table are
arranged in columns and rows. The data is enclosed in borders that can be customized
according to how we want it presented.
Tables can be created in HTML using table tag. The same can also be done using
cascading style sheets. The HTML table model allows authors to arrange data -- text,
preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and
columns of cells. Each table may have an associated caption that provides a short description
of the table's purpose.
Tables should not be used purely as a means to layout document content as this may
present problems when rendering to non-visual media. Additionally, when used with graphics,
these tables may force users to scroll horizontally to view a table designed on a system with a
larger display.
The following questions deal with the fundamental concepts and principles of this
module:
 What are the steps in creating tables in a web page?
 How to add elements in a table using external CSS?
MODULE 15: Tables

DATA INPUT

HTML Table
Using HTML, a table is defined with the <table> tag; a table row is defined with the
<tr> tag; a table header is defined with the <th> tag; and a table data/cell is defined with
<td> tag.
By default, table headings are bold and centered.
Below is a sample HTML code and output for using tables.

Table Property
CSS allows us to change the table properties. Below are some table properties we can
work with.
Property Description
border It sets all the table properties in one declaration.
border-collapse It specifies whether or not table borders should
MODULE 15: Tables

be collapsed.
border-spacing It specifies the distance between the borders of
adjacent cells.
caption-side It specifies the placement of a table caption.
empty cells It specifies whether or not to display borders
and background on empty cells in a table.
Table-layout It sets the layout algorithm to be used for a
table.

Border Property
The border property in CSS can be used to set all individual property values at once.
We use border to set border-width, border style, and border-color.

Let us apply some table and border properties. Using the HTML file, let us add a style
sheet to modify the table.

Here is the style sheet: mytable.css

Here is the output:

MODULE 15: Tables

DATA CHECK

Multiple Choice
Directions: Choose the letter of the best answer. Write the chosen letter on the space
provided before the number.

________1. Which of the following tags is used to create a heading within an HTML table?
A. <h1>
B. <head>
C. <th>
D. <h2>

________2. Which of the following creates a table row?

A. <tr>
B. <row>
C. <trow>
D. <rw>

________3. Which of the following tag is used to begin in creating a table in an HTML document?
A. <table>
B. <tbl>
C. </table>
D. </tbl>

________4. Which opening and closing tags are used to define a cell in an HTML table element?
A. <td> </td>
B. <cell> </cell>
C. <tc> </tc>
D. <td> <td>

________5. By default, what is the alignment of table headings?

A. italic and right
B. italic and left
C. bold and centered
D. italic and centered

HANDS ON
Performance Task 4.3 & 4.4

CREATE A TABLE
1. Create your web page that contains a table with a minimum of 5 rows and 3 columns. (any
topic that you want)
2. Use HTML for your content and use external CSS for formatting.
3. Modify the border and border spacing values.
MODULE 15: Tables

4. Save your file as: LastName-FirstName-Section-Ptask4.3.html

For modular learners, submit a screenshot of your web pages and your code on a short
bond paper with your name and section.
SCORING SCHEME:

Criteria Highest Possible Your Score

Score
HTML Codes 20
CSS Codes 20
TOTAL 40

REFERENCES

Cobre, Frago, Olalia, Tingzon (2019) Computers for Digital Learners Web
Development Teachers Wrapround Edition
TechnicalCafe. (2013, Oct 9). CSS Tutorials #13-Styling Tables [Video File]. Retrieved from
https://tinyurl.com/y4yt6k26
W3Schools (2021). HTML Tables Retrieved from
https://www.w3schools.com/html/html_tables.asp

MODULE CREATORS

Module Author/Curator : Mrs. Jenny P. Macalalad

Template & Layout Designer : Mr. Luis Philip M. Oropesa
MODULE 16: Advanced CSS

Advanced CSS OBJECTIVES

Content Standard:
MODULE 16 The learner demonstrates an
understanding of the various
features of CSS3.
Performance Standards:
The learners shall be able to apply
CSS text effects and CSS image
sprite.
Most Essential Learning
Competencies:
16.1 Familiarize with CSS3
features
16.2 Use CSS image sprite in a
web page.

INTRODUCTION

Cascading Style Sheets (CSS) is a language that is used to illustrate the

look, style, and format of a document written in any markup language. In simple
words, it is used to style and organize the layout of Web pages. CSS3 is the latest
version of an earlier CSS version, CSS2.

CSS3 provides more than formatting and text effects. It also provides
advanced image and animation tools that enable the developer to create a more
visually stimulating site. In this lesson, you will learn the techniques that a web
page designer can apply to the text of an HTML page by using different CSS text
effects properties.
The following questions deal with the fundamental concepts and
principles of this module:
 What are the features of CSS3?
 What are the CSS Text Effects
MODULE 16: Advanced CSS

DATA INPUT

The CSS3 has the following features:

1. Selectors
Selectors allow the designer to select on more precise levels of the web page. They are
structural pseudo-classes that perform partial matches to help match attribute and attribute
values. New selectors target a pseudo-class to style the elements targeted in the URL. Selectors
also include a checked pseudo-class to style checked elements such as checkboxes and radio
buttons.

2. Text Effects and Layout

With CSS3, we can change the justification of text, whitespace adjustment of the
document, and style the hyphenation of words.

3. First-Letter and First-Line Pseudo-Classes

CSS 3 includes properties that help with kerning (adjusting the spacing between
characters to achieve a visually pleasing effect) and positioning drop-caps (large decorative
capital letter at the starting of a paragraph).

4. Paged Media and Generated Content

CSS 3 has additional choices in Paged Media, such as page numbers and running
headers and footers. There are additional properties for printing Generated Content as well, like
properties for cross-references and footnotes.

5. Multi-Column Layout
This feature includes properties to allow designers to present their content in multiple
columns with options like the column-count, column-gap, and column-width.

Advantages of CSS3
 CSS3 provides a consistent and precise positioning of navigable elements.
 It is easy to customize a web page as it can be done by merely altering a modular file.
 Graphics are easier in CSS3, thus making it easy to make the site appealing.
 It permits online videos to be seen without using third-party plug-ins.
 CSS3 is economical, time-saving, and most browsers support it.

CSS Text Effects

Many properties of CSS text effects help to provide various styling in the words of a
sentence in an HTML page with CSS. So that words will get the various pattern, orientations,
and designs by using various text effects of the CSS. Utilizing its various values of the
parameters to get a better design of the web page which is as per the required design in a web
page development.
MODULE 16: Advanced CSS

CSS Text Overflow

The CSS text-overflow property specifies how overflowed content that is not displayed
should be signaled to the user.
For example:
overflow: hidden;
white-space: nowrap;

The text-overflow property only affects content that is overflowing a block container element
in its inline progression direction.

Example:

Output

CSS Word Wrapping

The CSS word-wrap property allows long words to be able to be broken and wrap onto
the next line. If a word is too long to fit within an area, it expands outside.

This paragraph
contains a very long
word:
thisisaveryveryveryveryveryverylongword.
The long word will
break and wrap to
the next line.
MODULE 16: Advanced CSS

The word-wrap property allows you to force the text to wrap - even if it means splitting it in the
middle of a word:

This paragraph
contains a very long
word:
Thisisaveryveryveryv
eryveryverylongword
. The long word will
break and wrap to
the next line.

CSS Links
With CSS, links can be styled in many different ways.
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Example Output

In addition, links can be styled differently depending on what state they are in.

The four links states are:

 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

Example Output
MODULE 16: Advanced CSS

When setting the style for several link states, there are some order rules:
 a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover

Text Decoration
The text-decoration property is mostly used to remove underlines from links.

Example Output

Background Color
The background-color property can be used to specify a background color for links.

Example Output

CSS Image Sprites

Image Sprites
An image sprite is a collection of images put into a single image. A web page with
many images can take a long time to load and generates multiple server requests. Using image
sprites will reduce the number of server requests and save bandwidth.
MODULE 16: Advanced CSS

Image Sprites - Simple Example

Instead of using three separate images, we use this single image ("img_navsprites.gif"):

With CSS, we can show just the part of the image we need.
In the following example the CSS specifies which part of the "img_navsprites.gif" image to
show:

Example Output

 <img id="home" src="img_trans.gif"> - Only defines a small transparent image

because the src attribute cannot be empty. The displayed image will be the background
image we specify in CSS
 width: 46px; height: 44px; - Defines the portion of the image we want to use
 background: url(img_navsprites.gif) 0 0; - Defines the background image and its
position (left 0px, top 0px)
MODULE 16: Advanced CSS

DATA CHECK

TRUE OR FALSE
Direction: Read each statement carefully. On the space provided, write TRUE if the
statement is correct, otherwise, write FALSE.

______1. Cascading Style Sheets is used to style and organize the layout of Web pages.
______2. CSS provides advanced image and animation tools that enable the developer to create
a more visually stimulating site.
______3. The background-color property allows long words to be able to be broken and wrap
onto the next line.
______4. The word-wrap property can be used to specify a background color for links.
______5. An image sprite is a collection of images put into a single image.
______6. Image sprites help reduce the number of server requests and save bandwidth.
______7. CSS advanced image and animation tools that enable the developer to create a more
visually stimulating site.
______8. CSS 3 includes properties that help with kerning and positioning drop-caps.
______9. CSS3 provides a consistent and precise positioning of navigable elements.
______10. When setting the style for several link states, a:hover must come before a:link

REFERENCES

Cobre, Frago, Olalia, Tingzon (2019) Computers for Digital Learners Web Development
Teachers Wraparound Edition
Lane, Patrick T. Advanced HTML5 and CSS3 Specialist: CIW Web and Mobile Design
Series Student Guide
Patiño (2014) Fundamentals of Web Design and Development Second Edition
W3Schools (2021). CSS Text Effects Retrieved from
https://www.w3schools.com/css/css3_text_effects.asp

MODULE CREATORS

Module Author/Curator : Mrs. Jenny P. Macalalad

Template & Layout Designer : Mr. Luis Philip M. Oropesa