Webpage Design MODULE

Webpage Design using HTML
What is this module about?
Good day! Are you ready to start your day in a more productive way? If
yes, good job! Facebook, Myspace, Yahoo, Google, and Twitter are all
websites that people use every day, but how did they get there and how were
they created? Thus, website industry has become one of the fastest growing
industries during the past few decades in this world. Maintaining and
developing an appropriate level of quality is a prime challenge for the
designers in building a website. As the user of this module, you need to
prepare yourself because this will help you find out the secrets of designing
good quality website. You are a step closer to become a successful
professional website designer. Let’s learn and enjoy!
What to learn from this module?
After reading this module, the students should be able to:
a. Understand HTML
b. Know how to code webpage using HTML with a plain text editor
c. Apply the concepts and skills learned in Web designing
d. Understand the anatomy of URL
e. Understand the common internet domains
f. Appreciate the importance of website
1
PRE-TEST:
How Much Do You Know?
Direction: Read the questions carefully. Choose the best answer and write it
on your answer sheet.
1. What do you call the collection of related webpages, including
multimedia content, typically identified with a common domain name, and
published on at least one web server?
A. Web server C. Webpage
B. Web browser D. Website
2. What do you call the computer that hosts a website on the Internet?
A. Web server C. Webpage
B. Web browser D. Website
3. Which of the following are we referring to if the examples are Internet
Explorer, Edge, Safari, Firefox and Chrome?
A. Website C. Web browser
B. Webpage D. Host
4. What is http based on the anatomy of the URL?
A. Protocol C. Filename
B. Host computer name D. Host computer name
5. What is the acronym of URL?
A. Uniform resource location C. Unified resource location
B. Uniform resource locator D. Unified resource locator
6.Who and when was the WWW created?
A. Mark Zuckerberg, 2000
B. Charles Babbage, 1991
2
C. Tim Berners-Lee, 1990
D. Herman Hollerith, 1993
7. Which among the following is the main reason why do people put up
websites these days?
A. Create online school C. Send out information
B. Creates communities D. For business and trade
8. Which among the following is NOT a search engine?
A. Google chrome C. Mozilla Firefox
B. Opera mini D. Youtube
9. Which of the following is the domain name for education?
A. .gov B. .ph C. .com D. .edu
10. Which of the following is the domain name for government?
A. .gov B. .ph C. .com D. .edu
11. Which of the following is the correct tag for hyperlink?
A. <href> C. <vlink>
B. <a> D. <html>
12. Which of the following is NOT a part of a website?
A. Header/Banner C. Sidebar
B. Navigation Bar D. Interaction
13. What do you call the set of tags used to create a Webpage?
A. HTML B. HTTP C. URL D. WWW
14. Which of the following is the correct arrangement of methodology step
in developing a Web site?
1. Developing Site Content
2. Identifying a Web Project
3
3. Determining Your Audience
4. Designing the Site and Navigation
5. Developing Web-Media Elements
6. Deploying a Web site on the WWW
7. Constructing a Web site and Webpages
A. 1,2,3,4,5,6,7 C. 1,2,3,4,5,7,6
B. 1,3,2,4,5,6,7 D. 2,1,3,4,5,7,6
15. What do you call the code for <a href="html">HTML</a>?
A. Font color C. Link
B. Inserting image D. Border color
16. What do you call the code for <tr> and <td> ?
A. Border C. Image
B. Tables D. Link
17. What do you call the code for <a href=" /pix/samples/14s.jpg">?
A. Linking tabs C. Inserting tables
B. Inserting border D. Inserting image with link
18. What do you call the reference of a document to another document?
A. HTML B. Syntax C. Output D. Hyperlink
19. Which of the following is the correct syntax for checkbox?
A. <input type="radio"> C. <input type="submit">
B. <input type="text"> D. <input type = “checkbox”>
20. What do you call the amount of space held between the contents of the
cell and the cell border?
A Cell padding C. Cell spacing
B. Cell spanning D. Cell boarder
4
LESSON 1
INTRODUCTION TO WEB PAGE
DESIGN
This part of the module will help you learn and acquire innovative skills
in creating and designing websites. Discover the exciting lessons below.
Good luck!
In this lesson you will learn the following:
a. Define HTML
b. Understand the history of html
c. Differentiate types of webpage
d. Know the anatomy of the url
Are you ready? Before you learn more about the lesson, let us first
explore what you already know by performing the activity and answering the
guide questions below.
1. Do you have any idea on how to build a website? If YES, sounds good…
2. What are examples of websites you already know? Give at least five.
3. Do you think these websites are important? Why?
DEFINITION OF TERMS
WWW - World Wide Web
HTML - HyperText Markup Language.
URL - Uniform Resource Locator.
Webpage - is the lingua franca of the web. A group of electronic files stored
on computers all over the world containing a vast of information.
5
Website - a site or location on the world wide web. It may consist of one or
more pages that related to a common theme, such as a person,
business, organization, or any other subject.
Web Browser - is the software that you need in order to find, retrieve, view,
and send information on the internet. Examples are google chrome,
mozilla firefox, internet explorer, and opera mini, etc.
Download - to transfer a file from another system to your own computer
system via a modem over telephone or cable lines.
Upload – to transfer a file from your computer system to another system.
FAQ – Frequently Asked Question
GIF – Graphical User Interface, consist of 256 colors.
JPEG – Joint Photographic Expert Group, consist of 16.7 million colors.
PNG – Portable Network Graphics
Home Page – is the navigation center for the website.
Modem – Modulator Demodulator, used between a computer and a phone or
cable to transmit signal to and from the internet in a form of computer’s
digital to an analog signal and vice versa.
TCP/IP – Transmission Control Protocol/Internet Protocol
Chat – a form of a real time communication where participants type what they
want to say and repeated on the screen of the other participants.
6
History of WWW (world wide web) and HTML
In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed
and prototyped ENQUIRE, a system for CERN researchers to use and share
documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based
hypertext system. Berners-Lee specified HTML and wrote the browser and
server software in late 1990. That year, Berners-Lee and CERN data systems
engineer Robert Cailliau collaborated on a joint request for funding, but the
project was not formally adopted by CERN. In his personal notes from 1990
he listed "some of the many areas in which hypertext is used" and put an
encyclopedia first.
The World Wide Web (WWW) was created in 1990 by the British
CERN physicist Tim Berners-Lee. On 30 April 1993, CERN announced that
the World Wide Web would be free to use for anyone. Before the introduction
of HTML and HTTP, other protocols such as File Transfer Protocol and
the gopher protocol were used to retrieve individual files from a server. These
protocols offer a simple directory structure which the user navigates and
chooses files to download. Documents were most often presented as plain
text files without formatting, or were encoded in word processor formats.
The first publicly available description of HTML was a document called
"HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991.
It describes 18 elements comprising the initial, relatively simple design of
HTML. Except for the hyperlink tag, these were strongly influenced by
SGMLguid, an in-house Standard Generalized Markup Language (SGML)-
based documentation format at CERN. Eleven of these elements still exist in
HTML 4.
7
HTML stands for HyperText Markup Language. It is a markup
language that web browsers use to interpret and compose text, images, and
other material into visual or audible web pages. This is the Languange used to
create and link Web pages together. It is the “mother tongue” of your website.
An HTML document consists of only text – the main text of the document and
special instructions called tags. A Web page is designed by using tags. Tags
are the basic coding units in the HTML system. They are key words or
phrases that are enclosed by angle brackets <>. Tags describe how graphics
and text are to be displayed. They are also used to create links between
documents. HTML is run by a Web browser like Internet Explorer, Mozilla
Firefox and Google Chrome. These are the tools that can be displayed and
run HTML documents and their links.
 What is the difference between webpage, website, web server, and
search engine?
A web page is a document that is suitable for the World Wide
Web and web browsers. A document which can be displayed in a web
browser such as Firefox, Google Chrome, Microsoft Internet Explorer or
Edge, or Apple's Safari. These are also often called "web pages" or just
"pages."
A website, or simply a site, is a collection of related web pages,
including multimedia content, typically identified with a common domain
name, and published on at least one web server.
A web server is a computer that hosts a website on the Internet.
"Hosting" means that all the web pages and their supporting files are available
8
on that computer. The web server will send any web page from the website it
is hosting to any user's browser, per user request.
A search engine is a website that helps you find other web pages,
such as Google, Bing, or Yahoo. Examples are InternetExplorer, Edge,
Safari, Firefox, or Chrome.
Web pages, which are the building blocks of websites, are documents,
typically composed in plain text interspersed with formatting instructions of
Hypertext Markup Language (HTML, XHTML). They may incorporate
elements from other websites with suitable markup anchors. Web pages are
accessed and transported with the Hypertext Transfer Protocol (HTTP), which
may optionally employ encryption (HTTP Secure, HTTPS) to provide security
and privacy for the user. The user's application, often a web browser, renders
the page content according to its HTML markup instructions onto a display
terminal.
TWO TYPES OF WEBSITE:
 A static website is one that has web pages stored on the server in the
format that is sent to a client web browser. It is primarily coded
in Hypertext Markup Language (HTML); Cascading Style
Sheets (CSS) are used to control appearance beyond basic HTML.
Images are commonly used to effect the desired appearance and as
part of the main content. Audio or video might also be considered
"static" content if it plays automatically or is generally non-interactive.
This type of website usually displays the same information to all
visitors.
9
 A dynamic website is one that changes or customizes itself frequently
and automatically. Server-side dynamic pages are generated "on the
fly" by computer code that produces the HTML (CSS are responsible
for appearance and thus, are static files). There are a wide range of
software systems, such as CGI, Java Servlets and Java Server Pages
(JSP), Active Server Pages and ColdFusion (CFML) that are available
to generate dynamic web systems and dynamic sites. Various web
application frameworks and web template systems are available for
general-use programming languages like Perl, PHP, Python and Ruby
to make it faster and easier to create complex dynamic websites.
WHY DO PEOPLE PUT UP WEBSITES THESE DAYS?
1. To do business and trade.
Payment options allow people to receive and send money
online. Websites can be used to promote and advertise
business and sell actual items. People can even bid online
through websites like eBay, amazon, lazada, and Shopee.
2. To share personal interest and entertain people.
10
People can also put up websites to show off their talents and
uniqueness to the whole world. In some cases, site that have become
a hit can be an avenue for income. This can be done by placing ads
such as Google ads.
There are agencies that attach one liner ads to sites and pay the site
owner a reasonable amount for the space. The most famous site is the
Youtube.com.
3. To send out information and push advocacies
Relaying findings and publishing online books can be also done
through websites. Vlogs is one of the example of this. Inform the public
about what really causes or contributes to public health and
development issues, and educate them about the concept of a healthy
community.
11
4. To create communities
Communities can be created on the Web through the use of
forums. Forums are popular online venues where people can talk and
share their opinions about different topics. Recast problems such as
gang violence and drug abuse as public health concerns that affect
everyone, not just individuals. If you asked most people whether they
wanted to stop gang violence, they’d say yes. But they really don’t
consider it their problem unless someone they know or are close to is
involved. The media can help frame it as everyone’s problem, and
gang members as everyone’s children. Encourage other professionals
and community members to find out more about public health and
development issues in general, and to get involved.
12
5. To Search for Information
Websites with database can offer search results by matching
what people need with what other people have. Swap sites offer
this kind of feature.
6. To create an online school or upload a tutorial
A user can also learn online. YouTube.com is a very popular site
for tutorials wherein it may feel like that the instructor is standing
in front of the user. Oftentimes, people share their talent online
by posting tutorials about how to play the guitar or how to solve
an algebraic expression.
13
5 PARTS OF A WEBSITE AND THEIR DESIGN TRENDS
1. Header/Banner
The header or banner is located on
top of a website. It includes the logo of
the company, the publisher, or owner of
the website. This automatically informs
website visitors what the website is about. Websites that offer
products and services usually have banners that feature their latest
offers or even the current news about their company.
2. Navigation Bar
Sidebar – this refers to the placement of the primary
navigation and not the usual content of a regular
sidebar. Usually they put the navigation on the left side.
Navicon – this is common in Facebook mobile app. The navigation
is practically hidden until you tap the icon similar to this:
3. Sidebar are still relevant because of these
advantages:
14
Content marketing – you will be able to market other contents of
your website.
Promotion – you can promote similar websites or companies in the
sidebar.
Navigation – although this is not a primary navigation, it will still
allow users to navigate other parts of the website through links.
4. Content
The quality of a website’s content usually
dictates the value of your website. You can find
different types of content in a website. They could
come in a form of text, image, audio, video, or a
combination of those.
5. Footer
Trends:
About us link
Contact us link
Terms of service
Privacy policy
Sitemap
Social media buttons
Address
Phone number
E-mail address
Other offers
Related links/posts
Subscription boxes
15
ANATOMY OF A URL
URL stands for UNIFORM RESOURCE LOCATOR. It specifies the
internet address of a file stored on a host computer connected to the internet.
Every file in the internet has a UNIQUE URL. Web programs use the URL to
retrieve the file from the host computer and the directory in which it resides.
URL’s are translated into numeric addresses using the Internet DOMAIN
NAME SYSTEM (DNS).
COMMON INTERNET DOMAINS
16
A domain name is an identification string that defines a realm of
administrative autonomy, authority or control within the Internet. Domain
names are used in various networking contexts and for application-specific
naming and addressing purposes. In general, a domain name identifies
a network domain, or it represents an Internet Protocol (IP) resource, such as
a personal computer used to access the Internet, a server computer hosting
a web site, or the web site itself or any other service communicated via the
Internet. In 2017, 330.6 million domain names had been registered
Domain names are formed by the rules and procedures of the Domain
Name System (DNS). Any name registered in the DNS is a domain name.
Domain names are organized in subordinate levels (subdomains) of the DNS
root domain, which is nameless.
DOMAIN WHEN IS IT USED? AN EXAMPLE
.com - commercial - Youtube
Companies that are – youtube.com
trying to make money
- CSU – csu.edu
.edu -education - CNHS – cnhs.edu
- High school, colleges
&
Universities
.gov - Government, or - Department of
government-related Education –
17
entities deped.gov
.org - organization
Special (usually - Consortium.org
nonprofit)
Net - network INQ7.net
Internet service
Provider - Philippines - .ph
- Canada- .ca
.xx - Australia- .au
- Country code - France- .fr
.mil U.S. military The .mil TLD is limited
United States to use by the United
Department of Defense States military.
18
Self-check 1
Directions: Identify the parts/anatomy of the URL. Write your answers on a
separate sheet.
1
2
3
4
5
6
Direction: Write the acronym of the following:
7. HTTPS
8. WWW
19
9. HTML
10. JPEG
LESSON 2
DESIGNING AND CONSTRUCTING WEB PAGES
Now that you have already learned the history of the internet. Are you
ready for our next lesson? If yes, good! If not, think twice.
a. Know the tips on how to design a web page;
b. Know the steps in developing a web site
c. Determine the requirements in creating a Web page using the
HTML;
d. Identify the elements of the Web page; and
e. Know how to save the html file using notepad
DEVELOPING YOUR OWN WEBSITE
Before you learn more about the lesson, let us first explore what you
already know by doing the following:
Instruction: List five (4) browser for computer and mobile phones you
are familiar with. Write your answer on the bubbles provided below:
20
COMPUTER MOBILE PHONE
BROWSER BROWSER
One of the mistakes that new Web developers commit is to start
building a Web page without prior planning. Start answering the following
questions:
1. Why are you building a Web site?
2. What information do you want to share over the internet?
3. Who are your intended audience/client?
4. What is the theme of your site?
Methodology steps in developing a Web site:
1. Identifying a Web Project
Why are you building a Web Site?
 Advertise products
 School web site (let the world know about it)
 Share knowledge and expertise (Blog)
What information do you want to share over the internet?
 Your School web site, Batch web site, Personal web site,
Favorite subject web site, Student Organization web
2. Developing Site Content
What specific information is needed in order to accomplish your
site goals? Information that goes into a web site must be well-selected,
accurate, and complete.
21
Example: Building a School Site (look into the school archives, get info
from the library, school history, mission and vision, past administrators,
list of teachers, list of courses/subjects, photos, logo, charts and
videos).
3. Determining Your Audience
Your intended readers or site visitors are your audience. Try
answering the following questions related to building a School web site:
What do parents want to know about a school?
What information do new students need to know about a school?
What is a student from other schools interested to know about your
school?
4. Designing the Site and Navigation
The purpose, content, and intended audience of your site are
your main bases for determining the theme and “LOOK and FEEL” of
your site. Use the same type/font style, size, background color, position
of logo and other navigation tools such as menu items, buttons and the
like. (Formal, Hi-tech, little cartoonish, and funny).
5. Developing Web-Media Elements
A webpage can contain a lot of things such as text, pictures,
hyperlink, forms, sound, and animations.
Two general types of web elements:
1. Media – are used to present information. Ex: text, pictures,
illustrations, graphics, sound, animations and video clips
22
2. Links – add interactivity to the page.
6. Constructing a Web site and Web pages
Web site – collection of web pages.
Web page – collection of web media elements.
Four (4) ways to develop your Web site:
1. Writing HTML tags
2. CSS codes
3. Java script codes
4. Using an HTML editor (notepad, Front Page, Adobe Dreamweaver,
Sublime)
HTML – Hypertext Mark-up language, markup tags, which are
used to specify how your web page are to be displayed, can be
written in Notepad.
CSS – Cascading Style Sheet, allows you to layout your web page
efficiently separating the page’s contents from its design
specifications.
JavaScipt – makes static HTML dynamic (interactive)
HTML Editor – can facilitate development by allowing you to see
exactly the how web page look like “What you see is what you get”.
7. Deploying a Web site on the WWW
Complete the webpage and test the site. Check if all text is displayed
as you have planned them. Test to make all other media elements load
properly. Now upload the site. You will need a web server in a host
computer to do it. Example: GeoCities (free web hosting site)
23
Web server has two components:
1. A computer that is connected to the internet
2. A web server software that can manage the request for information
in browser.
REQUIREMENTS IN CREATING A WEB PAGE USING THE HTML
1. Editor – using the Notepad (source code) in text and extension name
- .html or .htm.
2. Browser – usually internet explorer as it is designed by Microsoft, or google
chrome, opera mini, firefox, and safari.
3. Program in HTML (syntax) / HTML Structure
Syntax:
24
<Html>
<Head>
<Title></Title>
</Head>
<Body></Body>
</Html>
Sample code:
Output:
25
How to do it?
1. Encode the HTML tags in NOTEPAD. (Start Button/All
Programs/Accessories/NOTEPAD)
2. Save the activity. Select FILENAME. Type .html at the end of the
name of the file. Example: ACTIVITY1.html
3. Click SAVE. (Make sure to create a folder named after you to organize
the file, Folder name: LASTNAME, FIRST NAME)
ELEMENTS OF A WEB PAGE
BASIC CODES OR AND ITS MEANING
TAGS
<HTML></html> - Placed at the beginning and end of the
document, this tag tells the browser that
the entire document is composed in HTML.
<HEAD> - Defines the head (also called “header”) portion
HEADING of the document that contains
information about the document.
26
</HEAD> - cose tag for the head
<TITLE> - Specifies the title of the document. The title
generally appears in the top bar of the
browser window.
</TITLE> -close tag for the title
<BODY> - contains the contents of the document—the part
that you want to display in the browser window
</BODY> -closing the body tag
<HR> -Inline images that display lines across the page
HORIZONTAL to separate
RULE different sections
IMAGE -Graphics, icons, bullets, line photos, or pictures
that are not
part of the HTML file.
IMAGEMAP -a type of inline image that defines hotspots.
These are
areas that activate functions when selected.
NORMAL TEXT -The text that makes up the main content of the
Web page.
It has many formats. It can be in paragraph form
or bulleted
list.
<BG> - The wallpaper of the Web page. It can be a solid
BACKGROUND color, a picture or a graphic, or a default standard
with white or
27
gray background.
ANIMATED - inline images that include motion and animation.
IMAGES These
images are more attractive to the user.
LINKS - Text, phrases, or graphics that help the user to
<BODY> navigate
</BODY> more on the Web page. By clicking the links, the
browser
goes to a location in a file or to request a file from
the
server.
<BR> BREAK -means break or line space
<P> -means break or line space
PARAGRAPH
<pre></pre> -a blank line is inserted between text
<font></font> -preformatted text
28
STARTING NOTEPAD
Notepad has different parts, namely, the main menu bar, the scroll
bars, and the text are. The main menu bar displays all the commands in the
program. The scroll bar is used to display different portions of the text file in
the window. There are two kinds of scroll bars: the vertical and the horizontal
scroll bars. The text area is the place where you input the text.
29
TO SAVE THE HTML FILE USING NOTEPAD
1. From the Menu bar, click the File menu and then click Save or Save As.
The Save As dialog box displays and changes the Save-in box to the target
folder or drive.
2. Type the filename inside the Filename box below. (Remember to use
an .HTML extension for the file name.)
3. Then click the Save button.
TO DISPLAY THE HTML FILE TO THE BROWSER
1. Click the Start button, then Program.
2. Look for the default browser, then double click.
30
Let’s See What You Have Learned!
Try to explore the NOTEPAD application to familiarize yourself with the
different tools to be used in coding website.
Do the following to test your understanding.
1. Click START button – all PROGRAMS – ACCESSORIES – open
NOTEPAD application.
2. From the Menu bar, click the File menu and then click Save or Save As.
The Save As dialog box displays and changes the Save-in box to the target
folder or drive.
3. Type the filename inside the Filename box below. (Remember to use
an .HTML extension for the file name.)
4. Then click the Save button.
31
Self-check 2
I. Direction: Arrange the correct steps in developing a Web site by
ranking it from 1-7.
_____ Developing Web-Media Elements
_____ Designing the Site and Navigation
_____ Deploying a Web site on the WWW
_____ Developing Site Content
_____ Determining Your Audience
_____ Constructing a Web site and Web pages
_____ Identifying a Web Project
II. Direction: Identify the parts of a Web page.
3
4
5
6
32
LESSON 3
THE HTML TAGS
In the previous lesson, you have learned the step in opening notepad
application. Similarly, you have gained knowledge of the elements of the web
and its parts. Now it is time to learn how to code and follow the correct syntax
of HTML.
a. Define tags
b. Apply the rules in using tags
c. Enumerate the main types of tags
d. Identify the Tags and their functions
e. Know the heading tags for formatting text
f. Understand the formatting in text tags
g. Knows how to create a list
Tags - It is the root of the html document which is used to specify that the
document is html. Tags are paired.
 The Beginning tag and END Tag. </> forward slash before the
command.
 An HTML page is indicated with an <HTML> </HTML> tag pair. It
contains two sections the HEAD and the BODY.
 The HEAD section is indicated by a <HEAD> tag closed with the
</HEAD> tag.
 You can set title of your page declaring it inside a <TITLE> </TITLE>
tag pair inside the HEAD section.
33
RULES IN USING TAGS
1. Each tag must be enclosed in <brackets>.
2. You can use small or capital letters.
3. Most tags come in pairs: the starting tag and the ending tag.
Example: <HTML> (starting tag)
</HTML> (ending tag)
4. The browser ignores spaces around the tags. To read the codes easily, it is
advisable to put spaces around the tags.
MAIN TYPES OF TAGS
TYPES TAGS OUTPUT
1. Document Structure
<HTML>
<HEAD>
<TITLE> BOOK</TITLE>
</HEAD>
<BODY>
HELLO!
</BODY>
</HTML>
2. Formatting
<HTML>
<HEAD>
<TITLE> hi</TITLE>
</HEAD>
<BODY>
<H1>My First Web page design</H1>
<H3>HELLO</H3>
</BODY>
</HTML>
34
3. Links <HTML>
<HEAD>
<TITLE>hi</TITLE>
</HEAD>
<BODY>
<H1>My First Web page</H1>
<H3>HELLO!</H3>
<A HREF=“C:\publication.htm”>click
this link</A>
</BODY>
</HTML>
<HTML>
4. Image <HEAD>
<TITLE> hi</TITLE>
</HEAD>
<BODY>
<H1>My First Web page</H1>
<H3>HELLO!</H3>
<img src="1.jpg" width="350"
height="300" alt="Photo of three cats">
</BODY>
</HTML>
TAGS AND THEIR FUNCTIONS
COMMAND FUNCTION COMMAND FUNCTION
<HTML> The beginning and the end of the
</HTML> HTML document.
<HEAD> Used for header information. It is the
</HEAD> beginning and the end of the section
of the document.
<TITLE> Indicates the beginning and the end
</TITLE> of the title. The title is not displayed
in
35
the body of the Web page but on the
title bar of the browser.
<BODY> It contains all the contents of an
</BODY> HTML document, such as text,
hyperlinks, images, tables, lists, etc.
HEADING TAGS FOR FORMATTING TEXT
<H*> AND </H*>
This indicates the beginning and the end of the heading section. “H”
represents the heading and “*” represents the size. There is a special tag for
specifying headings in HTML. There are 6 levels of headings in HTML ranging
from <h1> for the most important, to <h6> for the least important.
<h1>Heading 1</h1> 24 pt. in size
36
FORMATTING TEXT TAGS
The Text formatting feature is a powerful tool for organizing the content
of your Web pages and for easier navigation. The HTML tags <BR> and <P>
are used to format the text. They control the space between the lines of text
and point where lines break on the screen.
Command/Code Function
<HR> Thematic Break
You can create a paragraph-level thematic break by
using the <hr> element. Therefore, this element allows
you to separate different topics into logical groups. It
also inserts horizontal line.
<BR> Line Breaks
You can force a line break by using the <br> element.
The <br> tag inserts a single line break. The <br> tag is
an empty tag which means that it has no end tag.
<P> The <p> tag defines a paragraph.
Browsers automatically add some space (margin) before
and after each <p> element.
37
SYNTAX
OUTPUT
CREATING LIST
TWO BASIC TYPES OF LISTS:
1. Unordered List
Also known as (un-numbered) list. Unordered lists should be used
whenever the order is not important. A grocery list is a typical example of an
unordered list (as long as it doesn't matter which order you get each item).
Bullet characters appear in place of the number next to the item.
To create an unordered list, use the <ul> element to define the list, and
the <li> element for each list item.
38
SYNTAX: <ul>
<li>List item 1</li>
</ul>
SYNTAX
OUTPUT
2. Ordered List
Also known as (numbered) list. Ordered lists should be used for when
the order is important. They should be used only in cases where, if you were
to change the order, it would change the meaning. For example, a list of step
by step instructions should be placed in an ordered list if the order of the steps
39
are important (i.e. the steps need to be carried out exactly in the same order
that is presented in the list). Another example could be a list ordered by
ranking, such as a "top 10" list.
To create an ordered list, use the <ol> element to define the list, and
the <li> element for each list item.
SYNTAX: <ol>
</ol>
SYNTAX
OUTPUT
40
Direction: Display the output of the following HTML code.
41
Self-check 3
Multiple Choice. Directions: Read the questions carefully. Choose the best
answer and write it on your answer sheet.
1. What is the HTML element for the largest heading?
A. <h1> C. <heading>
B. <head> D. <h6>
2. What must be used to enclosed each tag?
A. Brackets
B. Parenthesis
C. Double Quote
D. Asterisk
3. What is the HTML element for inserting a line break?
A. p B. hr C. br D. break
4. Which character is used to indicate an end tag?
A. < B. * C. ^ D. /
5. How can you make a numbered list?
A. <ol> B. <dl> C. <ul> D. <list>
Direction: Write the correct END tag of the following:
6. <HTML>
7. <HEAD>
8. <BODY>
9. <TITLE>
10. <P>
42
LESSON 4
HTML TEXT FORMATTING
In the previous lesson, you have learned the different functions of tags
used in web designing and apply the rules in using tags. Similarly, you have
gained knowledge in creating lists. Now it is time to learn how to code and
follow the correct syntax in formatting HTML text.
a. Describe text formatting
b. Enumerate the types of text formatting
c. Identify the text formatting and their functions
d. Know the importance of text formatting
HTML provides us with the ability for formatting text just like we do it in
MS Word or any text editing software.
Text formatting is a styling or changing the appearance of a text. It includes
changes in colors, size, font, and alignment.
TYPES OF TEXT FORMATTING
A. TEXT APPEARANCE - the following tags affect the appearance of text.
1. Making text BOLD or STRONG.
We can make the text bold using the <b> tag. The tag uses both
opening <b> and closing tag </b>. We can also use the <strong> tag
to place a strong importance on a piece of text. It also opens with
<strong> tag and ends with </strong> tags.
43
SYNTAX OUTPUT
2. Making text Italic or Emphasize
The <i> tag is used to italicize the text. The tag uses both opening <i>
and closing tag </i>. We can also use the <em> tag to emphasize the text,
with added semantic importance. It also opens with <em> tag and ends with
</em> tags.
SYNTAX OUTPUT
44
3. Highlighting a Text
It is also possible to highlight a text in HTML using the <mark> tag. The
tag uses both opening <mark> and closing tag </mark>.
SYNTAX OUTPUT
4. Making a text Subscript or Superscript
The <sup> element is used to superscript a text and <sub> element is
used to subscript a text. They have both opening and closing tags.
SYNTAX OUTPUT
45
5. Making text smaller or bigger
The <small> element is used to make the text smaller. The text that
needs to be displayed smaller should be written inside <small> and </small>
tag. The <big> element is used to make the text smaller. The text that needs
to be displayed smaller should be written inside <big> and </big> tag.
SYNTAX OUTPUT
6. Striking through the text
The <del> element is used to strike through the text marking the part
as deleted. The tag uses both opening <del> and closing tag </del>.
SYNTAX OUTPUT
46
7. Placing underline in a text
We can put underlined text using the <u> tag. The tag uses both
opening <u> and closing tag </u>.
SYNTAX OUTPUT
8. Editing Font Tag
Used to affect the style (color, typeface, and size) of the enclosed text.
<font> </font>
SYNTAX: <font color=”#” size=”#” face=”font face”>
SYNTAX OUTPUT
47
9. <abbr>… </abbr> - Identifies the enclosed text as an abbreviation. It has
no inherent effect on text display, but can be used as an element
selector in a style sheet.
SYNTAX: <ABBR TITLE = “Massachusetts”> Mass. </ABBR>
SYNTAX OUTPUT
10. <acronym> … </acronym> - Indicates an acronym. It has no inherent
effect on text display, but can be used as an element selector in a style
sheet.
SYNTAX: <ACRONYM TITLE = “World Wide Web”> WWW
</ACRONYM>
48
SYNTAX OUTPUT
11. <blink> … </blink> - Causes the contained text to flash on and off.
SYNTAX: <blink> hello </blink>
12. <KBD> … </KBD> - Indicates text that is typed on a keyboard. It is
displayed in the browser’s monospace font (usually Courier). Some
browsers also display it in bold.
SYNTAX: <KBD> Hello </KBD>
13. <tt> … </tt> - Formats enclosed text as typewriter text. The text enclosed
in the <tt> tag will be displayed in a monospaced font such as Courier.
B. PARAGRAPHS AND HEADINGS
A formatting that controls the paragraph.
1. <address>… </address> - Identifies ownership or authorship information,
typically at the beginning or end of a document. Addresses are
generally formatted in italic type with a line break (but no extra space)
above and below.
SYNTAX OUTPUT
49
2. <blockquote> … </blockquote> - Enclosed text is a blockquote, which is
generally displayed with an indent on the left and right margins and
added space above and below the paragraph.
SYNTAX OUTPUT
3. <div> … </div> - Denotes the beginning and end of a division of the page.
align=center|left|right - Aligns the text within the tags to the left, right, or
center of the page.
SYNTAX
OUTPUT
50
4. <h1> … <h6> - specifies that the enclosed text is a heading. There are six
different levels of headings, from <h1> to <h6>, with each subsequent
level displaying at a smaller size. <h5> and <h6> usually display
smaller than the surrounding body text.
SYNTAX OUTPUT
5. <p> … </p> - Denotes the beginning and end of a paragraph when used as
container.
SYNTAX
OUTPUT
51
6. Horizontal Rule - Places a horizontal line in the page.
SYNTAX: <hr align=”center” color=”blue” size=”30”>
SYNTAX
OUTPUT:
C. SPACING AND POSITIONING
The following tags give authors control over the line breaks, alignment, and
spacing within an HTML document.
1. Line Break - You can force a line break by using the <br> element. It is an
empty tag which means that it has no end tag.
SYNTAX OUTPUT
52
2. <center> … </center> - Centers the enclosed text horizontally on the
page, same as <DIV align = center>.
SYNTAX
OUTPUT
3. <nobr> … </nobr> - Text (or graphics) within the “no break” tags will
always display on one line, without allowing any breaks. The line may run
beyond the right edge of the browser window, requiring horizontal scrolling.
IMPORTANCE OF TEXT FORMATTING
1. It makes your Web page appealing to the audience.
2. It allows you to emphasize a certain word or text and idea on your Web
page.
3. It allows you to sort or organize the content of your Web page.
53
54
Self-check 4
1. Which HTML tag is used to add importance on a piece of text?
A. <i> C. <strong>
B. <u> D. <em>
2. Which HTML tag denotes the beginning and end of a paragraph?
A. <br> C. <strong>
B. <p> D. <em>
3. Which HTML tag is used to insert underlined text in a web page?
A. <i> C. <b>
B. <u> D. <em>
4. Which HTML tag is used to highlight text in a web page?
A. <highlight> C. <blink>
B. <abbr> D. <mark>
5. Which HTML tag is used to place a horizontal line in the page?
A. <nbr> C. <hr>
B. <div> D. <br>
Direction: Write the correct syntax of the following code:
6. Line break
7. Bold text
8. Italic text
9. Underline text
10. Font Tag
55
LESSON 5
ADDING IMAGES IN WEBPAGE
How was the experience in formatting text and paragraph? Was it
exciting? During the last lesson you were able to perform simple coding your
first webpage. This time you will face more challenging tasks.
a. Define file format and images
b. Analyze the standard format of the image tag
c. Apply the steps in inserting images in a Web page
d. Know the advantages of adding image in a Web page
e. Perform the rules in inserting background image
f. Discuss the steps in creating a marquee
g. Appreciate the importance of image in a website
Before you learn more about the lesson, let us first explore what you
already know by playing What If:
Instruction: What if is a forecasting game, below are codes on your webpage
and all you have to do is to predict what will happen after the action is taken.
What if you add this to your code?
1. <IMG SRC=”ImageName.jpg/.gif/.png> ____________________________
2. <IMG SRC="star.gif" WIDTH=50 HEIGHT=50> ______________________
3. <marquee> HELLO, CNHS!!! </marquee> __________________________
56
A web page with all text and no pictures isn’t much fun. The Web’s
explosion into mass popularity is due in part to the fact that there are images
on the page. A file format is a standard way that information is encoded for
storage in a computer file. It specifies how bits are used to encode
information in a digital storage medium. It refers to the way data are arranged
logically within a file.
STANDARD FORMAT OF IMAGE TAG
The basic format of IMG:
Attribute
<IMG SRC=”luneta.jpg”>
Image Tag Image File
IMG stands for “image”. It tells to the browser that an image will go here on
the page.
SRC stands for “source”. It tells the browser where to go to find the image.
The commonly used image file formats are: .gif and .jpeg. GIF stands for
Graphics Interchange Format while JPEG stands for Joint Photographic
Experts Group.
57
HOW TO INSERT IMAGE IN HTML?
To insert image in an HTML page, use the <img> tags. It is an empty tag,
containing only attributes since the closing tag is not required. Just keep in
mind that you should use the <img> tag inside <body>…</body> tag. The src
attribute is used to add the image source.
SYNTAX: <IMG SRC=”ImageName.jpg/.gif/.png> OUTPUT
ALIGNING IMAGE
The placement of the image on the page can be controlled by using the
Image Align
tag. Here are the different attributes of alignments.
Attribute Function
left or right Aligns to the side and wraps the text above, around, and
below it.
top Aligns with the tallest item available.
text top Aligns with the tallest text character available
middle Aligns the baseline of the current line with the middle of
the image
58
absmiddle Aligns the middle of the current line with the middle of the
image.
Baseline Aligns the bottom of the image with the baseline of the
bottom current
bottom line.
absbottom Aligns the bottom of the image with the bottom of the
current line.
SPECIFYING WIDTH AND HEIGHT
Although src is the only truly required attribute in the <img> tag, a few
others come strongly recommended. The first is alt, discussed in the previous
section. width and height are the others. The width and height attributes
simply indicate the dimension of the graphic in pixels, such as:
SYNTAX: <IMG SRC="star.gif" WIDTH=50 HEIGHT=50>
SYNTAX OUTPUT
59
ADDING BORDER TO THE IMAGE
You set the <IMG> tags BORDER attribute to the width of the border in pixels.
Borders may be set from 0 to 10. If you set it to 0, you will not see any border.
SYNTAX OUTPUT
ADVANTAGES OF ADDING IMAGES IN A WEB PAGE
1. Images can Make your Pages Attractive
2. Images can Increase Traffic & Hits to your Website
3. Images Boost up Audience Response
4. Picture messages, Info graphic Images can Bring Natural Links
5. It attracts buyers to purchase your products.
60
CREATING BACKGROUND
Background is the picture behind something.
1. Background color
SYNTAX OUTPUT
2. Background Image
SYNTAX OUTPUT
61
MARQUEE
The HTML <marquee> element is used to insert a scrolling area of text. You
can control what happens when the text reaches the edges of its content area
using its attributes.
SYNTAX: <marquee> … </marquee>
MARQUEE ATTRIBUTES
1.behavior - Sets how the text is scrolled within the marquee. Possible values
are scroll, slide and alternate. If no value is specified, the default value
is scroll.
2. bgcolor - Sets the background color through color name or hexadecimal
value.
3. direction- Sets the direction of the scrolling within the marquee. Possible
values are left, right, upand down. If no value is specified, the default
value is left.
4. height - Sets the height in pixels or percentage value.
5. hspace - Sets the horizontal margin
6. loop - Sets the number of times the marquee will scroll. If no value is
specified, the default value is −1, which means the marquee will scroll
continuously
7. scrollamount - Sets the amount of scrolling at each interval in pixels. The
default value is 6.
8. scrolldelay - Sets the interval between each scroll movement in
milliseconds. The default value is 85. Note that any value smaller than
60 is ignored and the value 60 is used instead, unlesstruespeed is
specified.
62
9. truespeed - By default, scrolldelay values lower than 60 are ignored.
If truespeed is present, those values are not ignored.
10. vspace - Sets the vertical margin in pixels or percentage value.
11. width - Sets the width in pixels or percentage value.
SYNTAX
OUTPUT
63
64
SELF-CHECK 5
1. Which of the following tag is used to insert image in a web page?
A. <IMG SRC=”picture.jpg” >
B. <IMAGE SOURCE = “picture.png”>
C. <IMG SRC = picture.jpg >
D. <IMAGE SOURCE = picture.png>
2. Which of the following is the advantage of inserting image in a web
page?
A. Images can Make your Pages Attractive
B. Images can Increase Traffic & Hits to your Website
C. Images Boost up Audience Response
D. All of the above
3. Which of the following HTML element is used to insert a scrolling area
of text?
A. <bgcolor> B. <marquee> C. <img src> D. <move>
4. Which of the following is the correct syntax in adding background color
in a web page?
A. <body bgcolor = pink>
B. <bgcolor = pink>
C. <body background color = pink>
D. <background color = pink>
65
5. Which of the following is the correct syntax in adding background color
in a web page?
A. <body bg = picture.jpg>
B. <background = picture.jpg >
C. <body background = picture.jpg >
D. <background image = picture.jpg >
Direction: Match the syntax/code of the following with its correct output.
COLUM A COLUMN B
1. A.
2. B.
3. C.
66
LESSON 6
CREATING HYPERLINK
On your previous lesson you were able to learn ways on how to insert
image on a webpage. Now this lesson will provide you an interesting
procedure to create links on your webpage.
But before you learn more about this lesson, let us first explore what
you already know about hyperlink.
Direction: Answer the following briefly.
1. What is a hyperlink?
2. Cite at least 2 importance of the hyperlink.
3. Where can you find hyperlinks?
a. Define hyperlink
b. Apply the steps in changing the color of a hyperlink text.
c. Know the syntax in creating a hyperlink on the Web page.
d. Perform the steps in removing the underline of the hyperlink text.
e. Discuss how to link image on the Web page.
A HYPERLINK or simply called link is a reference in a document to
another document. If you click on a hyperlink, the referenced document is
loaded. Hyperlinks are what connect pages and other resource all over the
web to each other. They are what makes the web what it is. Without
hyperlinks, there would be no web.
You can find hyperlinks in all sorts of places. Mostly they show up in text, but
they can also be:
Images, Videos and Buttons
67
HYPERLINK STYLES
The linked text is called the anchor text for the link. Most of the time, a
hyperlink’s anchor text is styled differently than the surrounding text. The
standard way of differentiating hyperlinks is to color them blue, but other
colors are common too. Hyperlinks are often underlined, or they become
underlined when hovered.
HTML LINKS – SYNTAX
Hyperlinks are defined with the HTML <a> tag:
<a href="url">link text</a>
LINK EXAMPLES
1. To a local file:
<A HREF="filename.html">...</A>
2. To an external file:
<A HREF="http://server/path/file.html">...</A>
3. To a named anchor:
<A HREF="http://server/path/file.html#fragment">...</A>
4. To a named anchor in the same file:
<A HREF="#fragment">...</A>
5. To send an email message:
<A HREF="mailto:username@domain">...</A>
6. To a file on an FTP server:
<A HREF="ftp://server/path/filename">...</A>
SIMPLE HYPERTEXT LINKS
The anchor (<a>) tag is used to identify a string of text or an image that
serves as a hypertext link to another document. The href (hypertext
68
reference) attribute specifies the destination address. In its simplest
incarnation, it looks like this:
I’m <A HREF="link.html">linking</A> to you!
Clicking on the link text will send you to the specified address.
SYNTAX OUTPUT
69
CHANGING THE HTML LINK COLORS
Link color specifications in the <body> tag are applied to the whole document.
By default, a link will appear like this (in all browsers):
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Attribute Syntax Function
Links <BODY Sets the color for hyperlinks. The
LINK="color"> default color for links is blue.
Visited <BODY Sets the colors for links that have
links VLINK="color"> already been clicked. The default color
for visited links is purple.
Active links <BODY Sets the color for a link while it is in the
ALINK="color"> process of being clicked. The default
color for an active link is red.
Specifying Color for a Specific Link:
You can override the color of a specific link by placing <font> tags
within the anchor tags. There is no way to set the visited link and active link
colors for specific links. This feature is supported by versions 3.0 and 4.0 of
Internet Explorer, but only version 4.0 of Netscape Navigator.
<A HREF="document.html"><FONT COLOR=aqua>Specially colored
link</FONT></A>
70
SYNTAX
OUTPUT
REMOVING THE UNDERLINE OF THE HYPERLINK TEXT
SYNTAX OUTPUT
71
IMAGE AS LINK
The image link is used as the linking tool in connecting to another Web page
or Web site. To make a graphic a link, place anchor tags around the image
tag just as you would around any string of text characters:
<A HREF="document.html"><IMG SRC="picture.gif"></A>
SYNTAX
OUTPUT
MAIL LINKS
Here’s a nifty little linking trick: the mailto link. By using the mailto
protocol in a link, you can link to an email address. When the user clicks on a
mailto link, the browser opens a new mail message preaddressed to that
address in a designated mail program.
A sample mailto link is shown here:
<a href="mailto:[email protected] ">Contact NORIE
MANDAC</a>
72
SYNTAX
OUTPUT
73
74
Self-check 6
1. What do you call the reference of a document to another document?
A. HTML
B. Syntax
C. Output
D. Hyperlink
2. Which of the following is the correct tag for hyperlink?
A. <href>
B. <a>
C. <vlink>
D. <html>
3. Which of the following is the correct syntax in linking image to another
web page?
A. <A HREF="document.html"><IMG SRC="picture.gif"></A>
B. <A HREF="document.html"><IMG SRC="picture.gif">
C. <A HREF=document.html><IMG SRC=picture.gif>
D. <A HREF="document"><IMG SRC="picture.gif"></A>
4. Which of the following is the correct syntax in linking to an email address?
A. <a href="mailto:[email protected] ">Contact NORIE
MANDAC</a>
B. <a = "mailto:[email protected] ">Contact NORIE
MANDAC</a>
C. < href="mailto:[email protected] ">Contact NORIE MANDAC
75
D. <a href="mailto:[email protected] ">Contact NORIE
MANDAC
5. Which of the following is the correct syntax in specifying color for a
specific Link?
A. < A HREF="document.html"> <FONT COLOR=aqua> Specially colored
link</FONT></A>
B. < HREF="document.html"> <FONT COLOR=aqua> Specially colored
link</FONT></A>
C. < A HREF="document.html"> <FONT COLOR=aqua> Specially colored
link</FONT>
D. < HREF="document.html"> <FONT COLOR=aqua> Specially colored
link</FONT>
Direction. Write True if the statement is correct and FALSE if the statement is
wrong.
6. A hyperlink or simply called link is a reference in a document to another
document.
7. You can find hyperlinks in all sorts of places, mostly they show up in text,
but they can also be Images, Videos and Buttons.
8. The anchor (<a>) tag is used to identify a string of text or an image that
serves as a hypertext link to another document.
9. You can override the color of a specific link by placing <font> tags within
the anchor tags.
10. You cannot add link to an email address.
76
LESSON 7
ADDING TABLES
In the last lesson you were able to learn and understand how to insert
hyperlink in a web page. You were also able to experience how to apply them
on your hands on activity. The next lesson is all about adding tables in a
webpage.
a. Define table
b. Enumerate the table and border attributes.
c. Determine the proper way of coding the table elements.
d. Apply the spanning table column and row.
e. Perform the cell padding and cell space adjusting.
f. Discuss working with width and height.
g. Set the border color and background color for table row.
HTML tables were created to add tabular material (data arranged into
rows and columns) to a web page. Tables may be used to organize
calendars, schedules, statistics, or other types of information. A table cell may
contain any sort of information, including numbers, text elements, even
images and multimedia objects.
TABLE ATTRIBUTES
Tag Name Syntax Function
Table Tag <table></table> Creates a basic table
Table Row tag <tr></tr> Creates a basic table
Table Data tag <td></td> Creates individual cells
77
To display a border for table, use the BORDER attribute.
Tag Name Syntax Function
BORDER=0 <table border=”0”></table> Borders are invisible
BORDER=1 <table border=”1”></table> Borders are visible
BORDER=N <table border=”2”></table> If you increase the
value
greater than 1, it will
make the border
thicker.
SYNTAX for TABLE ELEMENTS:

<table>
<tr>
<td></td>
</tr>
</table>
SPANNING CELLS
One fundamental feature of table structure is cell spanning, which is
the stretching of a cell to cover several rows or columns. Spanning cells
allows you to create complex table structures, but it has the side effect of
making the markup a little more difficult to keep track of. You can make a
header or data cell span by adding the colspan or rowspan attributes.
78
1. Column spans
Column spans, created with the colspan attribute in the td or th
element, stretch a cell to the right to span over the subsequent columns. Here
a column span is used to make a header apply to two columns.
SYNTAX:<table> OUTPUT:
<table border="3">
<tr>
<th colspan="2">Fat</th>
</tr>
<tr>
<td>Saturated Fat (g)</td>
<td>Unsaturated Fat (g)</td>
</tr>
</table>
2. Row spans
Row spans, created with the rowspan attribute, work just like column
spans, except they cause the cell to span downward over several rows.
SYNTAX: <table> OUTPUT
<table border="3">
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<tr>
<td>Medium (16oz.)</td>
79
</tr>
<tr>
<td>Large (24oz.)</td>
</tr>
</table>
CELL PADDING AND SPACING
1. Cell padding
Cell padding is the amount of space held between the contents of the
cell and the cell border. If you don’t specify any cell padding, the cells will
have the default value of one pixel of padding.
SYNTAX: <table>
<table border="3" table cellpadding="15"> OUTPUT
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
</tr>
<tr>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
</table>
80
2. Cell spacing
Cell spacing is the amount of space held between cells, specified in
number of pixels. If you don’t specify anything, the browser will use the default
value of two pixels of space between cells.
SYNTAX:<table>
<table cellpadding="15" cellspacing="15"> OUTPUT
<table border="3">
<tr>
<td>CELL 1</td>
<td>CELL 2</td>
</tr>
<tr>
<td>CELL 3</td>
<td>CELL 4</td>
</tr>
</table>
WORKING TABLE BORDER WITH WIDTH AND HEIGHT
Table width and height allows you to control the width and height of the
table.
SYNTAX OUTPUT
81
SETTING BORDER COLOR AND BACKGROUND COLOR FOR TABLE
ROW
These attributes set the colors of the borders and the background for a table
row.
SYNTAX
OUTPUT
FRAME 1 FRAME 2
82
Direction: Decode the correct HTML Syntax of the following output:
83
SELF-CHECK 7:
1. Which of these elements are <table> elements?
A. <table><tr><td>
B. <table><tr><tt>
C. <table><head><tfoot>
D. <thead><body><tr>
2. Which among the following is the correct syntax for table row?
A. <tr></tr>
B. <td> </td>
C. <tr> <tt>
D. <table></table>
3. What do you call the amount of space held between the contents of the
cell and the cell border?
A. Cell padding C. Cell spacing
4. Which of the following allows you to stretch a cell to cover several rows
or columns?
A. Cell padding C. Cell spacing
5. Which among the following is the correct syntax for table data?
A. <tr></tr>
B. <td> </td>
C. <tr> <tt>
D. <table></table>
84
LESSON 8
ADDING FORMS
Good job, you were able to create a simple table with correct syntax
and you were able to change the format. Now, you are ready to take the next
lesson adding forms.
a. Define form element
b. Apply the steps in creating a form tag.
c. Know the uses of two special buttons in the form tag.
d. Perform the steps in creating a password tag.
e. Discuss the steps in creating check boxes.
f. Determine the steps in adding radio buttons.
g. Perform the steps in grouping form data
But before we move on further with your lesson, let us check the things
you already know about the topic.
Instruction: Give your idea about the following picture.
1.
2.
3.
85
Adding Web forms to your Web pages, allows you to communicate
through your Web site. Web form allows the user to enter information and
provides predefined choices from which the user can select. Forms can
resemble paper or database forms because web users fill out the forms using
checkboxes, radio buttons, or text fields.
The <form> Element
The HTML <form> element defines a form that is used to collect user input:
Syntax: <form> form elements </form>
The <input> Element
The <input> element is the most important form element. The <input> element
can be displayed in several ways, depending on the type attribute.
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of
many choices)
<input type="submit"> Defines a submit button (for submitting the
form)
1. Text Input – let the user text in the form.

86
Syntax: <input type="text"> Function: defines a one-line input field for
text input
SYNTAX
OUTPUT
TWO SPECIAL BUTTONS
1. Submit button – gathers all information entered in the form when it is
clicked.
2. Reset Button– clears the form and returns all the settings to their original
default values.
87
2. Radio Button Input - let the user select ONE of a limited number of
choices.
Syntax: <input type="radio"> Function: defines a radio button.
OUTPUT
88
3. The Submit Button
Syntax: <input type="submit"> Function: defines a button for submitting the form
data to a form-handler. The form-handler is typically a server page with a script for
processing input data. It is specified in the form's action attribute.
OUTPUT
CREATING CHECK BOXES
Check boxes allow users to make multiple selections from a list. They
display an array of choices that are all visible at once, and from which users
may select any, all, or none. The <input type="checkbox"> defines a
89
checkbox. The checkbox is shown as a square box that is ticked (checked)
when activated. Checkboxes are used to let a user select one or more options
of a limited number of choices.
SYNTAX
OUTPUT
90
CREATING A PASSWORD TAG
Several Web sites would require the user to input a password to be able to
access any of the Web pages. The MAXLENGTH attribute specifies the
maximum number of characters a user may enter into the field. If a
MAXLENGTH is used, which is longer than the size of the text field, then the
text field will scroll to allow the user to enter more data. If MAXLENGTH is not
included in the code, the user may type any amount of text. But in most
PASSWORD fields, you will notice that there is limitation on the number of
characters that you can type.
SYNTAX
OUTPUT
91
GROUPING FORM DATA WITH <fieldset>
The <fieldset> element is used to group related data in a form. The
<legend> element defines a caption for the <fieldset> element.
SYNTAX
OUTPUT
92
Direction: Decode the correct HTML Syntax of the following output:
93
SELF-CHECK 8:
1. What is the most important form element?
A. Input element
B. Checkbox element
C. Radio Button element
D. Field set
2. Which of the following is the correct syntax for radio button?
A. <input type="radio">
B. <input type="text">
C. <input type="submit">
D. <input type = “checkbox”>
3. Which of the following is the correct syntax for submit button?
4. Which among the following element is used to group related data in a
form?
A. <legend> C. <form>
B. <fieldset> D. <input type="text">
5. Which of the following is the correct syntax for checkbox?
94
LESSON 9
ADDING FRAMES
Good job, you were able to create forms with correct syntax. Now, you
are ready to take the next lesson adding of frames.
a. Define frames
b. Enumerate the attributes of frame tag.
c. Apply the steps in setting frameset column.
d. Knows how to specify rows
e. Perform the attributes in formatting frames.
Frames are a method for dividing the browser window into smaller sub-
windows, each displaying a different HTML document. It works very much like
Tables. They are used to divide the screen into two or more Web pages, and
simultaneously display their contents in a single browser window. Frames are
used to assist in the navigation of many pages over a large number of topics.
CREATING FRAMES
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows
attribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames. Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame.
95
The <frameset> Tag Attributes
Following are important attributes of the <frameset> tag:
Attribute Description
cols  Specifies how many columns are contained in the
frameset and the size of each column. You can
specify the width of each column in one of the four
ways −
 Absolute values in pixels. For example, to create
three vertical frames, use cols = "100, 500, 100".
 A percentage of the browser window. For example,
to create three vertical frames, use cols = "10%,
80%, 10%".
 As relative widths of the browser window. For
example, to create three vertical frames, use cols =
"3*, 2*, 1*". This is an alternative to percentages.
rows This attribute works just like the cols attribute and
takes the same values, but it is used to specify the
rows in the frameset. For example, to create two
horizontal frames, use rows = "10%, 90%". You can
specify the height of each row in the same way as
explained above for columns.
border This attribute specifies the width of the border of each
frame in pixels. For example, border = "5". A value of
zero means no border.
frameborder This attribute specifies whether a three-dimensional
96
border should be displayed between frames. This
attribute takes value either 1 (yes) or 0 (no). For
example frameborder = "0" specifies no border.
framespacing This attribute specifies the amount of space between
frames in a frameset. This can take any integer value.
For example framespacing = "10" means there should
be 10 pixels spacing between each frames.
The <frame> Tag Attributes
Following are the important attributes of <frame> tag:
Attribute Description
src This attribute is used to give the file name that should
be loaded in the frame. Its value can be any URL. For
example, src = "/html/top_frame.htm" will load an
HTML file available in html directory.
name This attribute allows you to give a name to a frame. It
is used to indicate which frame a document should be
loaded into. This is especially important when you
want to create links in one frame that load pages into
an another frame, in which case the second frame
needs a name to identify itself as the target of the link.
frameborder This attribute specifies whether or not the borders of
that frame are shown; it overrides the value given in
97
the frameborder attribute on the <frameset> tag if one
is given, and this can take values either 1 (yes) or 0
(no).
This attribute allows you to specify the width of the
marginwidth space between the left and right of the frame's borders
and the frame's content. The value is given in pixels.
For example marginwidth = "10".
This attribute allows you to specify the height of the
marginheight space between the top and bottom of the frame's
borders and its contents. The value is given in pixels.
For example marginheight = "10".
noresize By default, you can resize any frame by clicking and
dragging on the borders of a frame. The noresize
attribute prevents a user from being able to resize the
frame. For example noresize = "noresize".
scrolling This attribute controls the appearance of the scrollbars
that appear on the frame. This takes values either
"yes", "no" or "auto". For example scrolling = "no"
means it should not have scroll bars.
longdesc This attribute allows you to provide a link to another
page containing a long description of the contents of
the frame. For example longdesc =
"framedescription.htm"
98
SYNTAX
OUTPUT
Frame 1 Frame 2
SPECIFYING ROWS
The frameset row attributes specifies the row height of each row (vertical)
within the frameset. It is measured in terms of pixels (fixed) percentage of the
99
area of the browser window (variable), or as a relative value of space
remaining (variable) using the “*”
symbol.
SYNTAX
OUTPUT
Frame 1
Frame 2
100
Different examples of framesets:
SYNTAX OUTPUT
<frameset rows="16%,84%"> TOP

<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset> BOTTOM
<frameset rows="16%,84%">
<frameset cols="50%,50%"> Act1 Act2
<frame src="act1.html" name="act1">
<frame src="act2.html" name="act2">
</frameset> BOTTOM
<frame src="bottom.htm" name="bottom">
</frameset>
<frameset rows="16%,84%">
<frame src="top.htm" name="top"> TOP
<frameset cols="50%,50%">
<frame src="left.html" name="left">
<frame src="right.html" name="right"> left right
</frameset>
</frameset>
<frameset rows="50%,50%" cols="50%,50%"> tople

topright
<frame src="topleft.htm" name="topleft"> ft
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright"> botleft botright
</frameset>
101
Direction: Read and follow the following steps below. (Self-check 9)
Title: Adding Frames
Performance Objective: Perform the steps in creating Frames in web
page
Supplies, Tools and Materials: Desktop Computer with Notepad
application
Equipment:
Steps/Procedure:
1. Open desktop computer
2. Open Notepad
3. Type the correct syntax/code in adding Frames
4. Save your activity on your folder.
5. Rename the file into Activity9.html
6. Click save
Assessment Method:
Demonstration, Performance Criteria checklist
102
PERFORMANCE CRITERIA CHECKLIST 9
CRITERIA YES NO
Did you…
Create frames in your web page
Add boarder in your web page
Add frame spacing in your web page
Manage the scroll button in your web page
Apply different frameset in your web page
Save your file into web format using .html
103
LESSON 10
ADDING HTML MULTIMEDIA
Congratulations! For successfully performing all the activities of the
past lesson. Now, you are ready to take the last lesson adding of multimedia.
a. Define multimedia
b. Identify common video and audio format
c. Know how to add video and audio on the web page
But before we move on further with your lesson, let us check the things you
already know about the topic.
Instruction: Give your idea about the following picture.
1.
2.
3.
WHAT IS MULTIMEDIA?
Multimedia on the web is sound, music, videos, movies, and
animations. Multimedia comes in many different formats. It can be almost
anything you can hear or see. Examples: Images, music, sound, videos,
records, films, animations, and more. Web pages often contain multimedia
elements of different types and formats.
104
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files. The
most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions
like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Video Formats
MP4 is the new and upcoming format for internet
video.
MP4 is recommended by YouTube.
MP4 is supported by Flash Players.
MP4 is supported by HTML5.
Format File Description
MPEG .mpg Developed by the Moving Pictures Expert Group.
.mpeg The first popular video format on the web. Used to
be supported by all browsers, but it is not supported
in HTML5.
AVI .avi AVI (Audio Video Interleave). Developed by
Microsoft. Commonly used in video cameras and
TV hardware. Plays well on Windows computers,
but not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by
Microsoft. Commonly used in video cameras and
TV hardware. Plays well on Windows computers,
but not in web browsers.
105
QuickTime .mov Developed by Apple. Commonly used in video
cameras and TV hardware. Plays well on Apple
computers, but not in web browsers.
RealVideo .rm Developed by Real Media to allow video streaming
.ram with low bandwidths. It is still used for online video
and Internet TV, but does not play in web browsers.
Flash .swf Developed by Macromedia. Often requires an extra
.flv component (plug-in) to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org
Foundation. Supported by HTML5.
WebM .webm Developed by the web giants, Mozilla, Opera,
Adobe, and Google. Supported by HTML5.
MPEG-4 .mp4 Developed by the Moving Pictures Expert Group.
or MP4 Based on QuickTime. Commonly used in newer
video cameras and TV hardware. Supported by all
HTML5 browsers. Recommended by YouTube.
AUDIO FORMATS
MP3 is the newest format for compressed recorded music. The term
MP3 has become synonymous with digital music. If your website is about
recorded music, MP3 is the choice.
Format File Description
MIDI .mid MIDI (Musical Instrument Digital Interface). Main
106
.midi format for all electronic music devices like
synthesizers and PC sound cards. MIDI files do not
contain sound, but digital notes that can be played
by electronics. Plays well on all computers and
music hardware, but not in web browsers.
RealAudio .rm Developed by Real Media to allow streaming of
.ram audio with low bandwidths. Does not play in web
browsers.
WMA .wma WMA (Windows Media Audio). Developed by
Microsoft. Commonly used in music players. Plays
well on Windows computers, but not in web
browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by
Apple as the default format for iTunes. Plays well on
Apple computers, but not in web browsers.
WAV .wav Developed by IBM and Microsoft. Plays well on
Windows, Macintosh, and Linux operating systems.
Supported by HTML5.
Ogg .ogg Developed by the Xiph.Org Foundation. Supported
by HTML5.
MP3 .mp3 MP3 files are actually the sound part of MPEG files.
MP3 is the most popular format for music players.
Combines good compression (small files) with high
quality. Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for
107
audio. MP4 video is the upcoming video format on
the internet. This leads to automatic support for
MP4 audio by all browsers.
HOW TO ADD VIDEO IN A WEB PAGE?
Playing Videos in HTML
Before HTML5, a video could only be played in a browser with a plug-in (like
flash). The HTML5 <video> element specifies a standard way to embed a
video in a web page.
Browser Support
The numbers in the table specify the first browser version that fully supports
the <video> element.
The HTML <video> Element Syntax:
OUTPUT:
108
HOW IT WORKS?
The controls attribute adds video controls, like play, pause, and
volume. It is a good idea to always include width and height attributes. If
height and width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files
which the browser may choose from. The browser will use the first recognized
format.
The text between the <video> and </video> tags will only be displayed
in browsers that do not support the <video> element.
HTML <VIDEO> AUTOPLAY
To start a video automatically use the autoplay attribute:
109
SYNTAX
OUTPUT:
Note: The autoplay attribute does not work on some mobile devices
110
HTML VIDEO TAGS
Tags Description
<video> Defines a video or movie
<source> Defines multiple media resources for media

elements, such as <video> and <audio>
<track> Defines text tracks in media players
HOW TO ADD AUDIO ON THE WEB PAGE?
Before HTML5, audio files could only be played in a browser with a plug-in
(like flash). The HTML5 <audio> element specifies a standard way to embed
audio in a web page.
Browser Support
The numbers in the table specify the first browser version that fully supports
the <audio> element.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
SYNTAX
111
OUTPUT:
HTML Audio - How It Works
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
HTML Audio Tags
Tags Description
<audio> Defines sound content
<source> Defines multiple media resources for media
elements, such as <video> and <audio>
112
Sample output
113
Direction: Read and follow the following steps below. (Self-Check 10.1)
Title: Adding Forms
Performance Objective: Perform the steps in adding forms
Supplies, Tools and Materials: Desktop Computer with Notepad application
Equipment:
Steps/Procedure:
2. Open Notepad
3. Type the correct syntax/code in adding audio and video in the web page
4. Save your activity on your folder.
5. Rename the file into Activity10.html
6. Click save
Assessment Method:
Demonstration, Performance Criteria checklist
114
Performance Criteria Checklist 10.1
CRITERIA YES NO
Did you…
Add video in your web
Use the correct syntax/code in adding video in your web
Specify the correct height and width of the video in your web
Add Autoplay in your video
Add audio in your web
Use the correct syntax/code in adding audio in your web
Add Autoplay in your audio
115
Self-Check 10.2
Title: Creating CNHS Website
Performance Objective: Perform all the steps in creating website
Supplies, Tools and Materials:
Desktop Computer with Notepad application
Web browser: Google Chrome, Internet Explorer, Mozilla Firefox
Editing Tool (Adobe Photoshop)
Equipment:
Steps/Procedure:
2. Open Notepad
3. Apply all what you have learned in creating web page
4. All images must be placed in a folder called “images”.
5. Create a folder (FINAL WEBPAGE), All html pages must have the
“.html” extension and not the “.htm” extension.
6. Click save
Design Guidelines
A. Layout. Create well-designed wekb pages. Place important items
consistently and establish level of importance
B. Navigation and Structure. Website must have suitable structure and
easy to navigate. If possible place primary navigation menu in the left
panel. Use of frames is strongly not recommended.
C. Menu. Provide tabs, buttons, etc. referencing each page/content/event
116
and when clicked on shows the specific page/event/content and allows
navigation within its content.
D. Main Page Area. The area where the main event will appear.
Assessment Method:
Demonstration, Criteria
CRITERIA FOR ASSESSMENT 10.2
117
Criteria Percentage
Originality & Creativity of design/ideas/ 30
Graphics/presentation/harmony and balance
Combination of materials
Additional use
Methods/Workmanship/Hyperlink 30
Use of tools, materials & equipment
Safety work habits & housekeeping
Functionality 20
Affordability
Visual appeal
Wise use of time/Speed 10
Fluency of oral communication 10
Flow of thoughts
TOTAL 100%
POST-TEST:
Direction: Read the questions carefully. Choose the best answer and write it
on your answer sheet.
118
1. Which of the following is NOT a part of a website?
A. Header/Banner
B. Navigation Bar
C. Sidebar
D. Interaction
2. Which of the following is NOT a reason why do people put up websites?
A. To do business and trade
B. To share personal interests and entertain people
C. To send out information and push advocacies
D. To create fraud communities
3. What type of website can be change or customize itself frequently and
automatically?
A. Dynamic C. HTML
B. Static D. HTTP
4. Which of the following type of website that can be save on the server in the
format that is sent to a client web browser?
A. Dynamic C. HTML
B. Static D. HTTP
5. When did the WWW was created?
A. 2000 B. 1991 C. 1990 D. 1993
6. Which of the following are we referring to if the examples are Internet
Explorer, Edge, Safari, Firefox and Chrome?
A. Web server
B. Website
C. Webpage
119
D. Search Engine
7. What do you call the collection of related web pages, including multimedia
content, typically identified with a common domain name, and published
on at least one web server?
A. Webpage C. Web server
B. Website D. HTML
8. Which of the following is the building blocks of websites?
B. Website D. HTML
9. What do you call the hosts of a website on the Internet?
B. Website D. HTML
10. Which of the following specifies the internet address of a file stored on a
host computer connected to the internet?
A. HTML C. URL
B. HTTP D. WWW
For numbers 11-15. This is an example format of a URL:
http:www.deped.gov.ph/index.html. Identify the specific name of the URL.
11. http: is called _________.
A. Protocol C. Host
B. Path D. Filename
12. www. is called _________.
A. Protocol B. Path C. Host D. Filename
13. index.html. is called _________.
A. Protocol C. Host
120
B. Path D. Filename
14. .ph is called _________.
A. Host C. Top level domain name
B. Country level domain name D. Second level domain name
15. .gov is called _________.
A. Host C. Top level domain name
B. Country level domain name D. Second level domain name
16. Which of the following is the end tag of <HTML>?
A. <\HTML> C. <!HTML>
B. <?HTML> D. </HTML>
17. What do you call the code for <form> <input type="radio" name="lunch"
value="pasta"> Pasta <input type="radio" name="lunch" value="risotto">
Risotto </form>?
A. Radio button C. Submit button
B. Check box D. Form action
18. What do you call the code for <href="html">HTML</a>?
A. Font color C. Link
B. Inserting image D. Border color
19.Which of the following is the syntax for spacing?
A. <P> B. C. <OL> D. <UL>
20. Which of the following is the syntax for bold style text?
A. <P> B. <B> C. <U> D. <UL>
Let’s Summarize!
After carefully reading all the topics, answering all the guide questions
and activities, and doing all the challenges, always remember that!
121
 Hypertext Mark-up Language is a markup language that web
browsers use to interpret and compose text, images, and other
material into visual or audible web pages. It is the “mother
tongue” of your website.
 A Web page is designed by using tags. Tags are the basic
coding units in the HTML system.
 HTML is run by a Web browser like Internet Explorer, Mozilla
Firefox and Google Chrome. These are the tools that can be
displayed and run HTML documents and their links.
 Uniform Resource Locator specifies the internet address of a file
stored on a host computer connected to the internet. Every file
in the internet has a UNIQUE URL. Never forget the different
syntax and codes in creating a website
 A beginning tag should always have an end tag <> </>.
 Don’t forget to always save your activity into .html extension
format.
 Have a Plan. Ask yourself, 1. Why are you building a Web site?
2. What information do you want to share over the internet? 3.
Who are your intended audience/client? 4. What is the theme of
your site?
 Create a user-friendly website.
Answer Key:
Pre-test:
1. D 11. A
2. A 12. D
122
3. C 13. A
4. A 14. D
5. B 15. C
6. C 16. B
7. D 17. D
8. D 18. D
9. D 19. D
10. A 20. C
LO1 – SELF-CHECK1
1. protocol
2. host computer name
3. second-level domain name
4. top-level domain name
5. country-level domain name
6. filename
7. Hypertext transfer protocol security
8. World Wide Web
9. Hypertext Mark-up Language
10. Joint Photographic Expert Group
LO2- SELF-CHECK2
1 Identifying a Web Project
2 Developing Site Content
3 Determining Your Audience

5
6 123
4 Designing the Site and Navigation
5 Developing Web-Media Elements
6 Constructing a Web site and Web pages
7 Deploying a Web site on the WWW
LO3 – SELF-CHECK3
1. A
2. A
3. C
4. D
5. A
6. </HTML>
7. </HEAD>
8. </BODY>
9. </TITLE>
10. </P>
LO4 – SELF-CHECK4
1. D
2. B
3. B
124
4. D
5. C
6. <br>
7. <b>
8. <i>
9. <u>
10. <font color=”#” size=”#” face=”font face”>
LO5 – SELF-CHECK5
1. A
2. D
3. B
4. A
5. C
125
LO6 – SELF-CHECK6
1. D
2. A
3. A
4. A
5. A
6. TRUE
7. TRUE
8. TRUE
9. TRUE
10. FALSE
LO7 – SELF-CHECK7
1. A
2. A
3. A
126
4. B
5. B
LO8 – SELF-CHECK8
1. A
2. A
3. C
4. B
5. D
6.
POST-TEST
1. D 11. A
2. D 12. C
3. A 13. D
4. B 14. B
5. C 15. C
6. A 16. D
7. B 17. A
8. A 18. C
9. C 19. B
10. C 20.
REFERENCES:
en.wikipedia.org/wiki/HTML
https://brahmaitsolutions.com/benefits-of-using-images-in-web-pages/
127
https://www.conservationtools.org
https://www.geeksforgeeks.org/most-commonly-used-tags-in-html/
https://www.shopee.com/html
https://www.tutorialspoint.com/html/html_frames.htm
https://www.w3schools.com/html
https://www.youtube.com/html
Learning Web Design, Jenifer Niederts Robbins, 3 rd Edition.
Web Design in a Nutshell, eMatter Edition. Copyright © 2000 O’Reilly &
Associates, Inc. All rights reserved.
128
129

Webpage Design MODULE

Uploaded by

Copyright:

Available Formats

Webpage Design MODULE

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Webpage Design MODULE

Uploaded by

Copyright:

Available Formats

Webpage Design using HTML

What is this module about?

developing an appropriate level of quality is a prime challenge for the

designers in building a website. As the user of this module, you need to

good quality website. You are a step closer to become a successful

professional website designer. Let’s learn and enjoy!

What to learn from this module?

After reading this module, the students should be able to:

c. Apply the concepts and skills learned in Web designing

d. Understand the anatomy of URL

e. Understand the common internet domains

f. Appreciate the importance of website

How Much Do You Know?

on your answer sheet.

1. What do you call the collection of related webpages, including

multimedia content, typically identified with a common domain name, and

published on at least one web server?

A. Web server C. Webpage

B. Web browser D. Website

A. Web server C. Webpage

B. Web browser D. Website

3. Which of the following are we referring to if the examples are Internet

Explorer, Edge, Safari, Firefox and Chrome?

A. Website C. Web browser

4. What is http based on the anatomy of the URL?

B. Host computer name D. Host computer name

5. What is the acronym of URL?

A. Uniform resource location C. Unified resource location

B. Uniform resource locator D. Unified resource locator

6.Who and when was the WWW created?

A. Mark Zuckerberg, 2000

B. Charles Babbage, 1991

D. Herman Hollerith, 1993

websites these days?

A. Create online school C. Send out information

B. Creates communities D. For business and trade

8. Which among the following is NOT a search engine?

A. Google chrome C. Mozilla Firefox

B. Opera mini D. Youtube

9. Which of the following is the domain name for education?

A. .gov B. .ph C. .com D. .edu

10. Which of the following is the domain name for government?

A. .gov B. .ph C. .com D. .edu

11. Which of the following is the correct tag for hyperlink?

12. Which of the following is NOT a part of a website?

B. Navigation Bar D. Interaction

A. HTML B. HTTP C. URL D. WWW

14. Which of the following is the correct arrangement of methodology step

in developing a Web site?

1. Developing Site Content

2. Identifying a Web Project

4. Designing the Site and Navigation

5. Developing Web-Media Elements

6. Deploying a Web site on the WWW

7. Constructing a Web site and Webpages

15. What do you call the code for <a href="html">HTML</a>?

A. Font color C. Link

B. Inserting image D. Border color

A. Linking tabs C. Inserting tables