HTML Book Chapters 1 9

CHAPTER 1 INTRODUCTION TO THE INTERNET AND THE WEB
The Internet is the world’s biggest computer network. It is often called the Net, the
Information Superhighway or the Cyberspace. It is a global interconnection of computer
networks that use standard Internet Protocol Suite to serve billions of users worldwide
consisting of millions of private, public, academic, business, and government networks, of
local to global scope linked by a broad array of electronic, wireless and optical networking
technologies.
A network is a collection of computers that are connected to share information.
When connecting to the Internet, it enables and accelerates new forms of human
interactions through instant messaging, Internet forums, and social networking.
Exchanging and transferring of data and information over the Internet are widely
use through downloading and uploading. Downloading refers as receiving information
from another computer on the Internet while uploading is sending an information to
another computer on the Net.
HISTORY OF THE INTERNET

Internet origins was research commissioned by the United States Federal
Government in the 1960s to build robust, fault-tolerant communication via computer
networks. The Internet protocol suite (TCP/IP) was developed by Robert E. Kahn and
Vinton Gray “Vint” Cerf (known as the Father of Internet) in the 1970s and became the
standard networking protocol on the ARPANET.
The precursor to the Internet was jumpstarted in the early days of computing
history, in 1969 with the U.S. Defense Department's Advanced Research Projects Agency
Network (ARPANET). ARPA-funded researchers developed many of the protocols used for
Internet communication today. This timeline offers a brief history of the Internet’s
evolution:
1965
Two computers at MIT Lincoln Lab communicate with one another using packetswitching
technology. Ted Nelson coins the word Hypertext in the publication Literary Machines.
1968
Beranek and Newman, Inc. (BBN) unveils the final version of the Interface Message
Processor (IMP) specifications. BBN wins ARPANET contract.
1969
On Oct. 29, UCLA’s Network Measurement Center, Stanford Research Institute (SRI),
University of California-Santa Barbara and University of Utah install nodes. The first
message is "LO," which was an attempt by student Charles Kline to "LOGIN" to the SRI
computer from the university. However, the message was unable to be completed because
the SRI system crashed. The beginning of the Internet ARPANET commissioned by DoD for
research into networking.
1
1971
People first communicate over a network 15 nodes (23 hosts) on ARPANET. Ray Tomlinson
invented e-mail.
1972
BBN’s Ray Tomlinson introduces network email. The Internetworking Working Group
(INWG) forms to address need for establishing standard protocols. First public
demonstration of ARPANET, connecting 40 machines.
1973
Global networking becomes a reality as the University College of London (England) and
Royal Radar Establishment (Norway) connect to ARPANET. The term Internet is born.
1974
The first Internet Service Provider (ISP) is born with the introduction of a commercial
version of ARPANET, known as Telenet.
1976
Queen Elizabeth II hits the “send button” on her first email.
1979
USENET forms to host news and discussion groups.
1980
Tim Berners-Lee writes a notebook program, "Enquire-Within-Upon-Everything", which
allows links to be made between arbitrary nodes. Each node had a title, a type, and a list of
bidirectional typed links.
1981
The National Science Foundation (NSF) provided a grant to establish the Computer
Science Network (CSNET) to provide networking services to university computer
scientists.
1982
Transmission Control Protocol (TCP) and Internet Protocol (IP), as the protocol suite,
commonly known as TCP/IP, emerge as the protocol for ARPANET. This results in the
fledgling definition of the Internet as connected TCP/IP internets. TCP/IP remains the
standard protocol for the Internet. The word “Internet” (short for interconnected
networks) is used for the first time. Invention of Transmission Control Protocol/Internet
2
Protocol (TCP/IP), making it possible to exchange information between many of different
subnetworks
1983
The Domain Name System (DNS) establishes the familiar .edu, .gov, .com, .mil, .org, .net,
and .int system for naming websites. This is easier to remember than the previous
designation for websites, such as 123.456.789.10.
1984
William Gibson, author of "Neuromancer," is the first to coin the term "cyberspace”.
1985
Symbolics.com, the website for Symbolics Computer Corp. in Massachusetts, becomes the
first registered domain.
1986
The National Science Foundation’s NSFNET goes online to connected supercomputer
centers at 56,000 bits per second — the speed of a typical dial-up computer modem. Over
time the network speeds up and regional research and education networks, supported in
part by NSF, are connected to the NSFNET backbone — effectively expanding the Internet
throughout the United States.
1987
The number of hosts on the Internet exceeds 20,000. Cisco ships its first router.
1989
World.std.com becomes the first commercial provider of dial-up access to the Internet.
1990
Tim Berners-Lee, a scientist at CERN, the European Organization for Nuclear Research,
develops HyperText Markup Language (HTML). Tim Berners-Lee starts work on a global
hypertext system, GUI browser / editor using the NeXTStep development environment. He
makes up "WorldWideWeb" as a name for the program.
1991
CERN introduces the World Wide Web to the public. On 6 August 1991, exactly twenty
years ago, the World Wide Web became publicly available. Its creator, the now
internationally known Tim Berners-Lee, posted a short summary of the project on the
alt.hypertext newsgroup and gave birth to a new technology that would fundamentally
change the world, as we knew it. First (text only) web browser available. First Web server
installed outside of Europe.
3
1992
The first audio and video are distributed over the Internet. The phrase "surfing the
Internet" was popularized. Tim Berners-Lee posts the first photo of the band “Les Horribles
Cernettes” on the Web.
1993
The number of websites reaches 600; the White House and United Nations go online. Marc
Andreesen develops the Mosaic Web browser. The number of computers connected to
NSFNET grows from 2,000 in 1985 to more than 2 million in 1993. The National Science
Foundation leads an effort to outline a new Internet architecture that would support the
burgeoning commercial use of the network.
1994
Netscape Communications is born. Microsoft creates a Web browser for Windows 95.
Yahoo! is created by Jerry Yang and David Filo, two electrical engineering graduate
students at Stanford University. The site was originally called "Jerry and David's Guide to
the World Wide Web." The company was later incorporated in March 1995.
1995
Compuserve, America Online and Prodigy begin to provide Internet access. Amazon.com,
Craigslist and eBay go live. The original NSFNET backbone is decommissioned as the
Internet’s transformation to a commercial enterprise is largely completed. The first
online dating site, Match.com, launches.
1996
The browser war, primarily between the two major players Microsoft and Netscape, heats
up. CNET buys tv.com for $15,000. A 3D animation dubbed "The Dancing Baby" becomes
one of the first viral videos.
1997
Netflix is founded by Reed Hastings and Marc Randolph as a company that sends users
DVDs by mail. PC makers can remove or hide Microsoft’s Internet software on new
versions of Windows 95, thanks to a settlement with the Justice Department. Netscape
announces that its browser will be free.
1998
The Google search engine is born, changing the way users engage with the Internet.
The Internet Protocol version 6 introduced, to allow for future growth of Internet
Addresses. The current most widely used protocol is version 4. IPv4 uses 32-bit addresses
4
allowing for 4.3 billion unique addresses; IPv6, with 128-bit addresses, will allow 3.4 x
1038 unique addresses, or 340 trillion trillion trillion.
1999
AOL buys Netscape. Peer-to-peer file sharing becomes a reality as Napster arrives on the
Internet, much to the displeasure of the music industry.
2000
The dot-com bubble bursts. Web sites such as Yahoo! and eBay are hit by a largescale
denial of service attack, highlighting the vulnerability of the Internet. AOL merges with
Time Warner.
2001
A federal judge shuts down Napster, ruling that it must find a way to stop users from
sharing copyrighted material before it can go back online.
2003
The SQL Slammer worm spread worldwide in just 10 minutes. Myspace, Skype and the
Safari Web browser debut. The blog publishing platform WordPress was launched.
2004
Facebook goes online and the era of social networking begins. Mozilla unveils the
Mozilla Firefox browser.
2005
YouTube.com launches. The social news site Reddit is also founded.
2006
AOL changes its business model, offering most services free and relying on advertising to
generate revenue. The Internet Governance Forum meets for the first time. Twitter
launches The Company’s founder, Jack Dorsey, sends out the very first tweet: "just
setting up my twitter."
2009
The Internet marks its 40th anniversary.
5
2010
Facebook reaches 400 million active users. The social media sites Pinterest and
Instagram are launched.
2011
Twitter and Facebook play a large role in the Middle East revolts.
2012
President Barack Obama's administration announces its opposition to major parts of the
Stop Online Piracy Act and the Protect Intellectual Property Act, which would have enacted
broad new rules requiring internet service providers to police copyrighted content. The
successful push to stop the bill, involving technology companies such as Google and
nonprofit organizations including Wikipedia and the Electronic Frontier Foundation, is
considered a victory for sites such as YouTube that depend on user-generated content, as
well as "fair use" on the Internet.
2013
Edward Snowden, a former CIA employee and National Security Agency (NSA) contractor,
reveals that the NSA had in place a monitoring program capable of tapping the
communications of thousands of people, including U.S. citizens.
2015
Instagram, the photo-sharing site, reaches 400 million users, outpacing Twitter, which
would go on to reach 316 million users by the middle of the same year.
2016
Google unveils Google Assistant, a voice-activated personal assistant program,
marking the entry of the Internet giant into the "smart" computerized assistant
marketplace. Google joins Amazon's Alexa, Siri from Apple, and Cortana from Microsoft.
ADVANTAGES OF INTERNET
The Internet is one of the greatest creations of human brain that gives everyone
with instant access to an endless supply of knowledge and entertainment. With the
6
connection to the internet, everything goes possible and it can say that beyond has no
limitations. Therefore, here are some of the advantages of using Internet:
1. Faster Communication
The foremost target of Internet has always been speedy communication and it has
excelled way beyond the expectations. Innovations are only going to make it faster and
more reliable. Internet Relay Chat (IRC), Internet Telephony, and Video Conferencing
are some tools to make communication through internet possible.
2. Information Resources
Information is probably the biggest advantage that Internet offers. Internet brings
anything under the sun. Any kind of information on any topic is available on the
Internet. Reviewing newspapers, magazines, and works of authors, government
documents, job opportunities, and other related data and information that are being
offered free in the Internet.
3. Entertainment
Entertainment is another popular reason why many people prefer to surf the Internet.
Downloading games, movies, songs or just surfing the celebrity websites are some of
the uses people have discovered using Internet.
4. Social Networking
Social networking has become so popular amongst youth that it might one day replace
physical networking. Apart from finding long-lost friends, also looking for job, business
opportunities on forums, communities etc.
5. Online Services
The Internet has made life very convenient. With numerous online services, performing
all transactions online are possible. Booking tickets for a movie, transferring funds,
paying utility bills, taxes etc., just right from the home.
6. E-commerce
The concept of e-commerce is used for any type of commercial maneuvering or
business deals that involves the transfer of information across the globe via the
Internet. It becomes a phenomenon associated with any kind of shopping, business
deal and alike.
7
DISADVANTAGES OF INTERNET
The world is literally accessible at the fingertips of a person connected to the Internet
through a few simple click of a mouse. When the Internet was first introduced to the public,
it marks an extraordinary change in every aspect of lives.
Today, with the explosive increase of sites on the Internet, technology has taken another
dramatic rise. Given the fact that it has so many advantages to count, disadvantages are
also present to an internet-based society. Some of these drawbacks are:
1. Theft of Personal Information

The probability of theft on using personal information such as name, address, credit
card number in transacting online banking, social networking or other online services
is higher.
2. Spamming
Spamming refers to sending unwanted e-mails in bulk, which provide no purpose and
needlessly obstruct the entire system. Such illegal activities can be very frustrating as
it makes Internet slower and less reliable.
3. Virus Threat
Internet users are often plagued by virus attacks on their systems. Virus programs are
inconspicuous and may be activated through clicking a seemingly harmless link.
Computers connected to the Internet are very prone to targeted virus attacks and may
end up crashing.
4. Pornography
Pornography is perhaps the biggest disadvantage of the Internet. Internet allows to
access and to download millions of pornographic photos, videos and other Xrated stuff.
Such unrestricted access to porn can be detrimental for children and teenagers.
5. Social Disconnect
Thanks to the Internet, people now only meet on social networks. More and more
people are getting engaged in virtual world and drifting apart from their friends and
family. Even children prefer to play online games rather than going out and mingling
with other kids. This may hamper a healthy social development in children.
8
THE WORLD WIDE WEB
World Wide Web, or simply the Web, or (W3 or WWW), is a system of interlinked,
hypertext documents accessed via Internet supported by specially formatted documents
called HTML (HyperText Markup Language). It enables the retrieval and display of text
and media in computer.
English scientist Tim Berners-Lee invented the World Wide Web in 1989. He
wrote the first web browser computer program in 1990 while employed at CERN in
Switzerland. The Web browser was released outside of CERN in 1991, first to other
research institutions starting in January 1991 and to the public on the Internet in August
1991.
The World Wide Web has been the central to the development of the Information
Age and is the primary tool for billions of people who use to interact on the Internet. The
Internet and World Wide Web are different terms. The Internet is a global system of
interconnected computer networks. On the other hand, the World Wide Web is a
global collection of documents and other resources, linked by hyperlinks and
Uniform Resource Identifiers (URIs). Web resources are usually accessed using HTTP,
which is one of many Internet communication protocols.
Viewing a web page on the World Wide Web normally begins either by typing the
URL of the page into a web browser, or by following a hyperlink to that page or resource.
The web browser then initiates a series of background communication messages to fetch
and display the requested page.
In 1990s, using a browser to view web pages and to move from one web page to
another through hyperlinks— “browsing”, “web surfing”, or “navigating the Web” were
popularized. Early studies of this new behavior investigated user patterns in using web
browsers. One study found five user patterns: exploratory surfing, window surfing, evolved
surfing, bounded navigation and targeted navigation.
Getting Connected
Hyperlink – ability to go or jump to another page by just clicking a text or images that
works as a link.
Web Browser - displays all the result of the HTML pages. Browsers do not display the
HTML tags, but use them to render the content of the page. Mosaic is the First Global
Web Browser and Netscape Navigator is the First Commercial Web Browser.
9
Web page – an e-document on World Wide Web, which include text, graphics, sounds, and
video.
Website – a collection of web pages connected on the Web, which gives information
about organizations, schools, government agency, company, hospitals, etc.
A unique address of a Web page that assist to display any Web page is Uniform
Resource Locator (URL) and all URLs begin with http. A URL is a complete Web address
used to find a particular web page. Every URL contains a domain name, as well as other
components needed to locate the specific page or piece of content. While the domain name
is the name of the website, a URL will lead to any one of the pages within the website.
Country. Country name
Protocol. begin (hypertext with Web transfer URLs http such Philippines, Japan,
“.de” for Geas “.ph” “.jp” rmany.for for
protocol) protocol https://www.deped.com.ph

Top Level Domain
(TLD). The combination
www. It tells that the site Domain Name. The middle of letters at the end can belongs to the World Wide
term or domain is the place indicate the type of site,
Web. where it is appropriate for a e.g., “.com” for name or business to appear. commercial, “.gov” for
government.
Figure 1.1 Anatomy of a Web Address
PRINCIPLES OF EFFECTIVE WEB DESIGN
As an old phrase “Beauty is in the eye of the beholder” greatly influences the users
of the website and not the website owners to judge effective web designs.
10
Websites should be well-designed to perform effectively. There are many factors
that affect the usability of a website, it is not just about how good it looks but also how easy
is it to use.
It is easy to create a beautiful and functional website; simply by keeping the

following design elements in mind and with these, making website aesthetically pleasing,
easy to use, engaging, and effective:
1. PURPOSE
Know the purpose. Good web design always caters to the needs of the user. Are the web
visitors looking for information, an entertainment, some type of interaction, or to transact
with a business? Each page of website needs to have a clear purpose, and to fulfill a specific
need for website users in the most effective way possible.
2. COMMUNICATION
People on the web tend to want information quickly, so it is important to communicate
clearly, and make information easy to read and digest. Some effective tactics to include in
web design include organizing information using headlines and sub headlines, using bullet
points instead of long windy sentences, and cutting the waffle.
3. TYPEFACES
Generally, Sans Serif fonts such as Arial and Verdana are easier to read online because
these fonts have no decorative finishes. The ideal font size for reading easily online is 16px
and stick to a maximum of three typefaces in a maximum of 3-point sizes to keep the
design streamlined.
4. COLOURS
A well thought out colour palette can go a long way to enhance the user experience.
Complementary colours create balance and harmony. Using contrasting colours for the text
and background will make reading easier on the eye. Vibrant colours create emotion and
should be used sparingly. Finally yet importantly, white space/ negative space is very
effective at giving website a modern and uncluttered look.
5. IMAGES
A picture can speak a thousand words, and choosing the right images for website can help
with brand positioning and connecting with target audience. Also, consider using
infographics, videos and graphics, as these can be much more effective at communicating
than even the most well written piece of text.
6. NAVIGATION
Navigation refers how easy it is for people to take action and move around website. Some
tactics for effective navigation include a logical page hierarchy, using bread crumbs,
designing clickable buttons, and following the ‘three click rule’ which means users will be
able to find the information they are looking for within three clicks.
11
7. GRID BASED LAYOUTS
Placing content randomly on web page can end up with a haphazard appearance that is
messy. Grid based layouts arrange content into sections, columns and boxes that line up
and feel balanced, which leads to a better looking website design.
8. “F” PATTERN DESIGN

Eye tracking studies have identified that people scan computer screens in an “F” pattern.
Most of what people see is in the top and left of the screen and the right side of the screen
is rarely seen. Rather than trying to force the viewer’s visual flow, effectively designed
websites will work with a reader’s natural behavior and display information in order of
importance (left to right, and top to bottom).
9. LOAD TIME
Everybody hates a website that takes ages to load. Tips to make page load times more
effective include optimizing image sizes, combining code into a central CSS or JavaScript
file and minify HTML, CSS, and JavaScript.
10. MOBILE FRIENDLY

It is now commonplace to access websites from multiple devices with multiple screen
sizes, so it is important to consider if the website is mobile friendly.
TEST YOURSELF
I. Multiple Choice. Choose the letter of the correct answer.
1. Which of these is the world’s biggest computer network?

a. Hyperlink
b. Browser
c. Internet
d. Web site
2. Which of the following is a collection of computers that are connected to share
information?
a. Network
b. Web site
c. HTML
d. Web page
3. Who is the “Father of Internet”?
12
a. Robert Kahn
b. Vint Cerf
c. Tim Berners-Lee
d. Ray Tomlinson
4. Which of the following refers to receiving information from another computer
on the Internet?
a. Saving
b. Printing
c. Uploading
d. Downloading
5. Which of the following is not the advantage of using Internet?
a. Faster Communication
b. Theft of Personal Information
c. Social Networking
d. Information Resources
6. What effective web design principles is describe by Sans Serif fonts such as Arial
and Verdana are easier to read online?
a. Purpose
b. Communication
c. Typefaces
d. Colours
7. In a web address www.google.com.ph, which is the domain name?
a. www
b. google
c. .com
d. .ph
8. What do ‘three click rule’ means?

a. Users will be able to find the information they are looking for within four
clicks.
b. Users will be able to find the information they are looking for within three
clicks.
c. Users will be able to find the information they are looking for within
double-click.
d. Users will be able to find the information they are looking for within a click.
9. Which of the following is the First Global Web Browser?
a. Internet Explorer
b. Netscape Navigator
c. Mosaic
13
d. Chrome
10. It is a collection of web pages connected on the Web, which gives information
about organizations, schools, government agency, company, hospitals, etc.
a. Hyperlink
b. Browser
c. Internet
d. Website
II. Matching Type. Direction: Match the notable history in Internet’s evolution in Column
A to its corresponding timeline in Column B. Write only the letter of the answer on the
space provided for.
A B
_____1. Facebook goes online. a. 1965

_____2. Google search engine is born. b. 1971
_____3. E-mail was invented. c. 1974
_____4. The DNS established .edu, .com, etc. d. 1983
_____5. Telnet was born. e. 1984
_____6. Youtube.com launched. f. 1994
_____7. Instagram reaches 400 million users. g. 1998
_____8. Yahoo was created by Jerry Yang and David Filo. h. 2004
_____9. Cyberspace was first coined. i. 2005
____10. Hypertext was used in the literary Machines’ publication. j. 2010
k. 2015
l. 2017
CHAPTER 2 STARTING THE HTML
Weaving a website requires good programming skills. Web creation is associated to

many Web programming languages. In doing this, begin the journey with the simplest of
Web languages: HTML. HTML stands for HyperText Markup Language. It is use to describe
how the text and images will look like so as the page’s appearance.
A HyperText language is one that lets the user move easily between different
documents or parts of the same document. This makes HTML a superb navigational tool for
14
moving around the web, which derives its name from intricate complexity of its links. This
is the language used to create and link Web pages together.
A Markup language uses symbols to specify the appearance of a document. An HTML

document consists of only text – the main text of the document and special instructions and
HTML calls these mark-up symbols tags.
Tags are the basic coding units in the HTML system. They are keywords or phrases
that are enclosed by angle brackets (<>). Tags describe how graphics and text are to be
displayed.
HTML VERSIONS
Since the early days of the web, there have been many versions of HTML:
Version Year Version Year

HTML5 2014 HTML 3.2 1997
XHTML 2000 HTML 2.0 1995
HTML 4.01 1999 HTML 1991
SYSTEM REQUIREMENTS
Creating HTML pages require the following software:
1. Text Editor.
HTML pages are created as plain text also called ASCII (American Standard Code for
Information Interchange) files. All computers will come with some of the basic tools
necessary to write HTML and CSS. An HTML editor is a computer program for
editing HTML, the markup of a webpage. Notepad, WordPad, and Microsoft Word
are some of the popular text editors. Notepad and Notepad++ are the most basic text
editor that can be used to write and edit HTML source code.
2. Web Browser.
It displays all the result of the HTML pages. The most popular web browsers are
Chrome, Edge, Internet Explorer, Safari, Opera and Firefox.
3. Internet Service Provider (ISP).

Connecting to the Web requires an ISP. There are companies that connect to the
Internet offering the services need to use for a fee. According to the method of data
transmission, the Internet access that ISPs provide to users can be divided into
several types, the most popular of which are: Dial-up Internet access, DSL (Digital
15
Subscriber Loop or Digital Subscriber Line), Cable Internet, Wireless Broadband
(WiBB), Wi-Fi (Wireless Fidelity) Internet, ISDN (Integrated Services Digital
Network), and Ethernet.
HTML RULES
HTML is a “forgiving” language. It has few simple rules and a great deal of flexibility.
Anything that HTML cannot understand it ignores. The rules governing tags are also
simple; they can be summarized as follows:
Rule 1. Tag Names. Each tag has a name that identifies it. HTML is not case sensitive; the
tag names can be written using any combination of upper- and lower- case letters. For
example, the <HEAD> tag can also be written as <head> or <Head>. Most programmers use
only uppercase letters for HTML tags to make the tags standout.
Rule 2. Tags as Container. Many HTML tags come in pairs and must be enclosed in
opening and closing angular brackets; the two tags bound a container, into which the
programmer places text or other tags or both. Several examples of tags as containers,
including <HTML>…</HTML>, <HEAD>…</HEAD>,
<TITLE>…</TITLE>, and <BODY>…</BODY>. In addition, some contains a tag that does
not have a corresponding end tag or the empty elements: <BR>, <IMG>, <HR>, <EMBED>.
Rule 3. Tag Attribute Names. Almost all HTML tags have at least these five attributes: ID,
CLASS, STYLE, DIR, and LANG. These attributes are used with Cascading Style Sheets (See
Chapter X). Many tags have attributes that control alignment, color, size, or other features
of the text associated with tag. Browsers ignore incorrect tag names and/or attributes. If a
page looks incorrect, check the spelling of the attribute and tag names.
Rule 4. Tag Attribute Values. Tag attributes frequently require an associated value and
are case sensitive. For example, the paragraph tag, <P> tag has an alignment attribute of
center, left-justify, or right-justify paragraphs. Thus, the tag that creates a centered
paragraph is
<P ALIGN=”CENTER”>
Tag Name Attribute name Attribute Value

Rule 5. Spacing. Do not leave any spaces between after the opening angular bracket and
the tag name or before the closing bracket. For example, < HEAD> or <HEAD >, this will
bring unpredictable error.
Rule 6. Nested Tags. End tag of the enclosed tag should appear before the end tag of the
outer tag. Tags must be nested rather than crossed. Crossed tags often produce pages that
do not look right.
(a) Nested Tags (b) Crossed Tags
<HEAD> <HEAD>
<TITLE>My First Web Page</TITLE> <TITLE>My First Web Page</HEAD>
</HEAD> </TITLE>
16
Figure 2.1 Nested and Crossed Tags
CREATING A WEB PAGE
A website is the most powerful tool for communication. Sharing information with people,
can create and publish own Web page. Whether choosing to create a website to share love
of passion, to have a detailed and permanent advertisement informing people about
business, to sell products, or any other reason—there is no doubt that is a perfect place for
project or organization that will be available 24/7 a year or more.
Besides personal preference in building a page, it also needs to decide on a basic

page layout. When everything is settled on organizing site, it is time to begin creating pages
with HTML files.
HTML files are usually created inside a text editor program. Since Notepad is the
most common, the Notepad text editor is used to create and modify HTML files with
different versions.
Managing HTML FILES
A website consists of many files: text content, code, stylesheets, media content, and
so on. When building a website it needs to assemble files into a sensible structure on local
computer, making sure that they will work accordingly and will get the desired content
before eventually upload them to a server. Dealing with files discusses some issues should
be aware of so setting up a right structure for website.
It can be definitely good to create a folder in computer for each project to start with.
Then, every file of a website will fall somewhere inside its corresponding folder, despite
the internal structure design for them. It is important that do not make links in documents
to resources outside the website folder, as these are prone to be moved, especially if
consider the idea to make website public.
The easiest place to save the image is in the same folder or directory as HTML
source file, where the browser will automatically search. If have many images to organize,
place them in a single folder.
Creating a FOLDER
17
1. Do one of the following:
• Click the drive in Windows Explorer, click File>New>Folder.
• On a desktop, Right Click>New>Folder.
2. The new folder will appear. Enter a name in the Folder Name field and then press
Enter.
Starting NOTEPAD and NOTEPAD++
Use either Notepad or Notepad++ to write or edit text files. A notepad is a simple
text editor tool that comes with Windows by default. On the other hand, use Notepad++ as a
replacement of the Notepad. At this time, Notepad will be using as text editor.
Follow the following steps to create first web page with Notepad and Notepad++:
Step 1: Open Notepad (PC)

Windows 8 or later: Open the Start Screen (the window symbol at the bottom left
on the screen). Type Notepad.
Windows 7 or earlier: Open Start > Programs > Accessories > Notepad.
18
: Open Notepad ++
Double-click the Notepad++ icon that usually appears on the desktop.
Step 2:Write or copy some HTML into Notepad.
Scroll Bar. Use to

display the text file
portion in the
window vertically
or horizontally.
Menu Bar. Displays all the

commands in
the program.
Text Area. It is a place where

texts
are enter.
Figure 2.2 Notepad Window

Title Bar. Located
at the top of a
window or a dialog
box that displays
the name of
the window or soft
ware program
being used.
Status Bar . Gives

information like the
number of Lines
and the number of
columns; the text is
occupying.
Figure 2.3 Notepad++ Window

Step 3: Save the HTML Page
Save the file on HTML files designated folder. Select File > Save As in the Notepad
menu. Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files). Use either .htm or .html as file extension.
19
Figure 2.4 Save As Dialog Box
Step 4: View the HTML Page in a Browser
Open the saved HTML file in from favorite browser (double click on the file, or right-
click - and choose "Open with").
The result will look much like this:
Figure 2.5 HTML View in a Browser
20
Printing an HTML DOCUMENT
To print a document
Open a document in the HTML editor.
• On the main menu, click File > Print.
• Press CTRL+P.
Printing OFF A WEBPAGE To print a webpage

Modern browsers make it easy to print directly from the web.
• On the main menu, click File > Print.
21
menu,then selectPrint.
Figure2.6Additional Menu as Ellipses Clicked
2. ThePrint Dialog Boxconstitutes additional menu. Select the printer, the page to
print, set how many copies to print. Then click
Print
oncommand
the button.
Figure2.7Print Dialog Box
The document prints as it appears in the HTML Editor, NOT as it appears in a

browser.
• Click the ellipsis ( ) indicating that it will be brought to an additional STRUCTURE
OF HTML PAGE
An HTML page is divided into a head and body. The head of the page contains tags
that provide a title for the page, that load scripts, or that provide information for search
engines. The body of a page contains the page’s information to display on a web page.
22
A Simple HTML Document
Here is an example of HTML Document: This will produce the following result:
Figure 2.8 A Simple HTML Source Code and Output
Example Explained
The <!DOCTYPE html > declaration defines this document to be HTML5 . A
piece of code that tells the browser what kind of information it is getting so
that it can display web page properly.
The <html> element is the root element of an HTML page.
The <head element contains meta information about the document. It holds
>
all the important behind-the-scenes information about web page, like the
title of web page and links to a CSS stylesheets.
The <title element specifies a title for the document. Stuff between title tags
>
does not appear on the web page, but will see it in search engine results and
browser tabs.
The <body element contains the visible page content. Everything that
>
displays in the browser -- header, navigation, images, content -- goes
23
between the body tags.
The <h1> element defines a large heading.
The <p element defines a paragraph.

>
TEST YOURSELF
1. What does HTML stand for?

a. Hyperlink Text Markup Language
b. Hyperlink Text Makeup Language
c. HyperText Makeup Language
d. HyperText Markup Language
2. These are the keywords or phrases that describe how graphics and text are to be
displayed?
a. Text Editor
b. Tags
c. HyperText
d. Internet Service Provider
3. Which of the following is the most basic text editor that is use to write and edit
HTML source code and comes with Windows by default?
a. Notepad
b. Notepad++
c. Microsoft Word
d. WordPad
4. Chrome, Edge, Internet Explorer, Safari, Opera and Firefox are examples of
________________.
a. Text Editor
b. ISP
c. Web Browser
d. Website
5. Which HTML rules is govern by using any combination of upper- and lower-
case letters?
a. Tag Names
b. Tags as Container
c. Tag Attribute Names
d. Tag Attribute Values
24
6. In writing or copying HTML code into Notepad, this is the place where text are
entered.
a. Menu Bar
b. Text Area
c. Scroll Bar
d. Status Bar
7. In saving HTML page, which of the following file extension can be used?
a. .docx
b. .png
c. .html
d. .pub
8. Which of the following defines the declaration of HTML document is in HTML5?

a. <html>
b. <head>
c. <title>
d. <!doctype html>
9. Which of these specify a title for the document?
a. <html>
b. <head>
c. <title>
d. <!doctype html>
10. Which of the following holds the important behind-the-scenes information like
title of web page and a link to CSS stylesheets?
a. <html>
b. <head>
c. <title>
d. <!doctype html>
II. Sequencing of Events. Rearrange the following procedures in their proper order. Use
numbers to indicate their order of precedence.
A. Creating a Folder
_______ Press Enter
_______ Type the Name in the Folder Name Field
_______ On a desktop, Right Click>New>Folder
B. Starting HTML Page

______ Save the HTML Page
______ View the Html Page in a Browser
______ Open Notepad
25
______ Write or copy HTML into Notepad
C. Printing Off a Webpage

______ Click the Print command button
______ Click File>Print on the main menu
______ On Print Dialog Box, select the printer, set the page to print, and how many copies to
be printed
HANDS-ON NO. 1
CREATING FIRST WEB PAGE Procedure:

1. Launch Notepad.
2. Type the following on editor:
<!DOCTYPE HTML>
<HTML>
<HEAD><TITLE>PAGE TITLE</TITLE></HEAD>
<BODY>
<H1>My First Web Page</H1> <P>Hello!
I’m (Your Name). </P> This is my first Web
page.
</BODY>
</HTML>
3. Save work with a filename First.html.
4. View work in a Browser.
5. Print the OUTPUT and paste on a separate sheet.
26
CHAPTER 3 HTML TAGS, ELEMENTS, AND ATTRIBUTES
When dealing with HTML, it is common for many people in figuring out the
difference between the confusing terms when referring to "tag", "element", and "attribute".
Using the correct terminology will make easier to interpret correctly of what are trying to
convey. The following are the quick explanation of tags, elements, and attributes in HTML:
HTML tags are sets of instructions that tell the browsers what layout of text to use, what
graphics to be displayed, and where or what links are needed. It is also used to mark up the
start and end of an HTML element. A start tag consists of an opening angle bracket (<)
followed by the element name, zero or more space separated attribute/value pairs, and a
closing angle bracket (>).
Example:
<p>…</p> <h1>…</h1> <br>
HTML elements usually consists of a start tag and end tag, with the content inserted in
between:
<p>My first paragraph.</p>
HTML elements with no content are called empty elements. Empty elements do not have
an end tag, such as the <br> element, which indicates a line break.
HTML attributes define a property for an element, consists of an attribute or value pair,
and appears within the element's start tag. An element's start tag may contain any number
of space separated attribute or value pairs. An HTML code for a paragraph demonstrating
the use of STYLE attribute:
27
<p style="text-align:center; font:16pt; courier; color:blue">My first paragraph. </p>
The <BR> and <P> TAGS
These two tags are frequently used in the body of Web pages. The <BR> tag is HTML’s
equivalent of pressing the Enter or Return key in a Word Processor. It breaks a line. It has
no ending tag. It can be repeated consecutively to create several blank lines. For example,
<BR><BR><BR> creates two blank lines. The <BR> tag has single attribute, CLEAR; it is
often used in conjunction with tables.
Syntax:
<BR CLEAR=”ALL” | “LEFT” | “RIGHT” | “NONE”>
The <P> tag use to denote the HTML paragraph element. The paragraph element
begins with the HTML <P> tag and ends with the HTML </P> tag. The HTML paragraph
element should not contain tables and other block elements. HTML does not indent the
first line of the paragraph instead; it denotes the start of a new paragraph. The end tag
</P> is optional. Browsers automatically add some space (margin) before and after each
<P> element. The margins can be modified with CSS (with the margin properties). It has
attributes, ALIGN, CLASS, ID, STYLE, TITLE.
Alignment values are “LEFT” (default),”CENTER”, “RIGHT”, and “JUSTIFY”. The
“JUSTIFY” value does not always work.
Syntax:
<P ALIGN=”CENTER” | “LEFT” | “RIGHT” | “JUSTIFY”> … </P>
Figure 3.1 HTML Source Code for Break and Figure 3.2 The Break and Paragraph Page
Paragraph Page
Sampl
e HTML Break and Paragraph Tags as shown below:
HEADING TAGS
28
HTML has a separate heading tag that creates six different levels of headings. The
tag is <Hn>…</Hn>, where n represents the size between 1 to 6. The larger the heading
number, the smaller the size of the heading. Most browsers display a heading in bold font.
Heading separates text and introduces new topics on the Web page. Text formatted
with heading appears differently in the Web browsers if different points are used.The <h1>
to <h6> tags are used to define HTML headings. <H1> defines the most important heading.
<H6> defines the least important heading.
Figure 3.3 HTML Source Code for Heading Tags Page Figure 3.4 The Heading Tags Page
Sample HTML Heading Tags as shown below:
29
HORIZONTAL RULE TAG
The HTML <HR> tag is used for creating a horizontal line. This is also called
Horizontal Rule in HTML. Horizontal rules separate each section and it has no
corresponding end tag.
The <HR> tag has several attributes that control the size and the appearance of the
horizontal rule. For instance, the size attribute controls the rule's thickness (height) in
pixels. The width attribute controls the rule's width in percentages or pixels. The align
attribute sets the alignment of the rule to left, right, justify, or center. Finally, the noshade
attribute renders the rule without a surrounding shadow.
Here is an example of Horizontal Rule Tags:
Figure 3.5 HTML Source Code for Horizontal Rule Page Figure 3.6 The Horizontal Rule Page
THE <CENTER> and <DIV> TAGS
30
The <CENTER> tag and its corresponding end tag </CENTER> centers all text and
other page components it contains. This tag is simply a shorthand way of writing <DIV
ALIGN=”CENTER”>.The division tags, <DIV>…</DIV>, contain an align attribute that uses
the same values as the paragraph align attribute.
Sample HTML Center and Div Tags as shown below:
Figure 3.7 HTML Source Code for Center and Figure 3.8 The Center and Div Tags Page
Div Tags Page
INVISIBLE COMMENTS
This element is used to add a comment or to explain the code to an HTML

document. An HTML comment begins with <!–– and the comment closes with ––>.
HTML comments are visible to anyone that views the page source code. Browsers
ignore comments.
31
Figure 3.9 HTML Source Code for Invisible Figure 3.10 The Invisible Comments Page
Comments Page Sam
ple HTML Invisible Comments Tags as shown below:
The <BLOCKQUOTE> TAG
Block quotations refer to quotations that extend beyond two or three lines of text. It
creates a block quotation in HTML. This tag leaves a blank line before and after the block
quotation. Physical and logical style tags can be used to change the appearance of text
contained within the <BLOCKQUOTE>…</BLOCKQUOTE> tags.
32
The <BLOCKQUOTE> tag specifies a section that is quoted from another source.
Browsers usually indent <BLOCKQUOTE> elements.
Sample HTML <BLOCKQUOTE> Tag a s shown below:
Figure 3.11 HTML Source Code for BLOCKQUOTE Page
33
Figure 3.12 The BLOCKQUOTE Page
The <PRE> Tag
The tag’s name stands for pre-formatted text, which means that the browser
displays the text as we entered it on the page. Spaces and blank lines are preserved. HTML
prints the encased text in monospaced font, and leaves a blank line before and after the
text contained within <PRE>…</PRE> tags. It denotes text to be treated as pre-formatted
rendering a fixed-width font. White spaces, tabs, and carriage returns found between the
<PRE></PRE> tags are not ignored.
Sample
HTML <PRE> Tag
as shown below:
34
Figure 3.13 HTML Source Code for PRE Tag Page
Figure 3.14 The PRE Tag Page
PHYSICAL STYLE TAGS
These tags dictate the physical appearance of the text they enclose. Since the
physical style tags form containers for text, they have beginning and ending tags. The
physical style tags available in HTML are as follows:
Bold. The <BOLD>… </BOLD> tags is the physical equivalent of the <strong> contentbased
style tag, but without the latter has extended meaning. It displays the enclosed text in bold.
If a boldface font is not available, the browser may use some other representation, such as
reverse video or underlining.
35
Big. The <BIG>… </BIG> tags display font that is larger than the standard HTML font size. If
the text is already at the largest size, <big> has no effect. Be careful in using <big> tag
because browsers are quite forgiving and try hard to understand a tag, those that don't
support <big> often interpret it to mean bold.
Blink. The <BLINK>… </BLINK> tags make the enclosed text blink on and off. Netscape for
Macintosh, for example, simply and reiteratively reverses the background and foreground
colors for the <blink> enclosed text. Blinking text has two primary effects: it gets reader's
attention, and then promptly annoys them to no end.
Italics. The <ITALIC>… </ITALIC> tags display the enclosed text in an italic or oblique
typeface. If the typeface is not available to the browser, highlighting, reverse video, or
underlining might be used.
Strike. The <S> tag is an abbreviated form of the <STRIKE>…</STRIKE> tags supported by both
Internet Explorer and Netscape. Most browsers will put a line through ("strike through")
text that appears inside the <strike> tag and its </strike> end tag.
Small. The <SMALL>…</SMALL> tags as it decreases the size of text. If the enclosed text is
already at the smallest size <SMALL> has no effect. Each <small> tag makes the text one size
smaller than the containing <small> tag, down to a limit of size one.
Subscripts. The <SUB>…</SUB> tags writes half a character's height lower. Both <sub>and
its <sup> counterpart are useful for math equations and in scientific notation, as well as
with chemical formula.
Superscripts. The <SUP>…</SUP> tags writes half a character's height higher. This tag is
useful for adding footnotes in documents, along with exponential values in equations. In
combination with the <a> tag can create nice hyperlinked footnotes.
Monospaced. In a manner like the <CODE> and <KBD> tags, the <TT>…</TT> tags direct the
browser to display the enclosed text in a monospaced typeface. For those browsers that
already use a monospaced typeface, this tag may make no discernible change in the
presentation of the text.
Underline. The <U>…</U> tags tells the browser to underline the text.
36
Sample HTML Physical Style Tags a s shown below:
Figure 3.15 HTML Source Code for Physical Style Tags Page
Figure 3.16 The Physical Style Tags Page
37
LOGICAL STYLE TAGS
Logical tags are used to indicate to the visually impaired that there is some
emphasizes on the text. The logical style tags available in HTML are as follows:
Character Sequence. The <SAMP>… </SAMP> tags indicate that the enclosed text is literal
sequence of characters, or WYSIWYG, that are usually displayed in monospaced font.
Emphasis. The <EM>… </EM> tags indicate that characters should be emphasized in some
way. Emphasized text is usually displayed in italics.
STRONG. The <STRONG >… </STRONG> tags emphasizes characters more strongly than
<EM>. Usually displayed in a bold font.
CODE. The <CODE>… </CODE> tags is a phrase tag that define a piece of computer code.
Keyboard Input. The <KBD>… </KBD > tags indicate that the enclosed text is a keyboard
input. Keyboard input is usually displayed in a monospaced font.
Variable. The <VAR>… </VAR> tags indicate that the enclosed text is a variable in a
mathematical expression. Variables are often displayed in italics or underlined.
Citation. The <CITE>… </CITE> tags indicate short quotes or citations. Often display
citations in italics.
Example:
Sample HTML Logical Style Tags as shown below:
38
Figure 3.17 HTML Source Code for Logical Style Tags Page
Figure 3.18 The Logical Style Tags Page
THE <FONT> TAGS
The font tag brings HTML’s life to allow designers to change the size, typeface and
color of their text. It proceeded to do more harm than good because it is a hugely inefficient
way to format text. CSS text formatting is vastly superior, but knowledge of these old-style
techniques is still useful.
39
HTML has a very flexible tag, the <font> tag. It will show the many ways it can be
used. Keep in mind that this tag is deprecated (See Appendix B- Deprecated Tags and
Attributes), so when feel like know enough about HTML, move on to CSS stylesheets for
formatting, and forget ever learned about this tag.
Colors. HTML provides tags that change the background color of a page or a table
and the font color for displaying text or links. We change the background and text colors
for a page in the <BODY> tag. We change the font color in the <FONT> tag. The <BODY> tag
contains attributes that change the background and foreground color of an entire page.
Background Color. The BGCOLOR attribute changes the background color of the
page.
Text Color. The TEXT attribute changes the text color or font color for the entire
page. The COLOR attribute of the <FONT> tag changes only the text contained between the
<FONT> and </FONT> tags.
Color Names
HTML contains two sets of color names: standard and custom. Colors that appear
identical on all systems are called browser-safe colors. HTML also contains a set of
approximately 100 additional color names. Unfortunately, most of these colors are not
browser-safe: some browsers will not display some of these colors correctly.
RGB Values
Custom colors can be created using RGB (Red, Green, and Blue) values. The format
for these custom colors is #RRGGBB, where RR represents a two-digit hexadecimal red
value, GG represents a two-digit hexadecimal green value, and BB represents a two-digit
hexadecimal blue value.
FONTS
Format the text in a webpage by setting the <font > ... </font> tag and various font
attributes. The font tag is having three attributes called face, size, and color for customize
text in a webpage.
Font Face. This attribute specifies the font name of the text inside a font tag.
<font face="Arial"> Arial Font </font>
40
Font Size. Set the size of the font by changing the size attribute of <font> tag. This
attribute requires a value between 1 and 7, where 1 is the smallest font size, 3 is the
default size, and 7 is the largest font size.
<font size=7>Font size 7</font>
Set font size by specify the relative font size also. That is, how many sizes larger or
how many sizes smaller than the present font size.
<font size=”-2”>font size -2 from the current font size</font> <font

size=”+2”>font size +2 from the current font size</font>
Font Color. The color attribute specifies the color of the text inside a font tag.
Specify the color either by the color name or hexadecimal code.
<font color=”green”>font color is green</font>

<font color=”#008000”>specify hexcolor #008000</font>
A visitor will only be able to see the font if they have that font installed on their computer. If
none of the given fonts is installed in computer, then the default font face Times New Roman
will display. Otherwise, specify two or more font face alternatives by listing the font face
names, separated by a comma.
<font face=”Arial,Helvetica”>
<font face=”Lucida Calligraphy,Comic Sans MS,Lucida Console”>
Use face, size and color attributes together in one <font> tag.
Sample HTML Font Face, Size, and Color Tags as shown below:
41
Figure 3.19 HTML Source Code for Font Face, Size, and Color Tags Page
Figure 3.20 The Font Face, Size, Color Tags Page
42
TEST YOURSELF
I. Identification. Identify the tag/s to be used in the following tasks.
_____________________ 1. How to insert a horizontal line?

_____________________ 2. How to create a line break?
_____________________ 3. How to create a largest heading tag?
_____________________ 4. How to begin and end an HTML document?
_____________________ 5. How to indicate the beginning and end of the title?
_____________________ 6. How to center all text and other page components it contains?
_____________________ 7. How to add visible comments to anyone that views the page
source code and ignore by browser?
_____________________ 8. How to create a block quotation in HTML?
_____________________ 9. How to denote the start of a new paragraph?
_____________________ 10. How to indicate the beginning and the end of the heading
section?
_____________________ 11. How to display font that is larger than the standard HTML
font size?
_____________________ 12. How to write half a character’s height higher?
_____________________ 13. How to tell the browser to underline the text?
_____________________14. How to indicate that the enclosed text is a variable in a
mathematical expression?
_____________________ 15. How to specify the color of the text inside a font tag?
43
HANDS-ON NO. 2
Directions: Create a web page for each activity. Include an appropriate title for the page.
The activities use various combinations of the <BR>, <P>, <DIV>, <Hn>, <HR>, <CENTER>,
and <PRE> tags. Write the HTML Source Code of each activities on a separate sheet.
The Blockbuster Week. Figure 3.21 contains official entry in Metro Manila Film Festival
(MMFF) 2016. Recreate this
announcement.
Figure 3.21 The Blockbuster Week Page
44
HANDS-ON NO. 3
Directions: Search a poem written by Filipino authors and make an interesting page
applying the Physical Style Tags.
HANDS-ON NO. 4
Directions: Pick an interest of you. Make your own story and be able to apply HTML for
Logical Style Tags on your page.
HANDS-ON NO. 5
Directions: Create a web page for this activity. Include an appropriate title for the page. The
activity combines the different font attributes. Specify the color using either the color name
or the hexadecimal code. Write the HTML Source Code on a separate sheet.
The Fonts Page. Figure 3.22 contains font attributes: face, size, and color using the first
five letters of the alphabet. Recreate this.
Figure 3.22 The Fonts Page
45
CHAPTER 4 LISTS
Aside from a paragraph format, contents can be displayed or explained in a

formatted list. Lists are popular because it helps itemize information to make it easier to
understand. HTML has three list alternatives, namely: unordered lists, ordered lists, and
definition lists.
HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more of the following list elements:
<ul> − An unordered list. This will list items using plain bullets.
<ol> − An ordered list. This will use different schemes of numbers to list items.
<dl> − A definition list. This arranges items in the same way as they are arranged in
a dictionary.
UNORDERED LISTS
Also known as unnumbered list or bulleted list. These lists are created with <UL>…
</UL> tags together with <LI> tags.
Type Attribute for Unordered Lists
46
The <UL> tag has a single attribute, TYPE. It changes the type of bullet used for the
list items. The TYPE values recognized by HTML are disc (default), circle, and square. The
TYPE attribute in the <UL> tag changes the bullet type to square.
Sample
Figure 4.1 HTML Source Code for Unordered List Type
HTML Tags for Unordered List Type using disc, circle and square type attribute:
47
Figure 4.2 The Unordered List Type Page
ORDERED LISTS
Also called numbered list. As the name implies, an ordered list contains items that
are arranged according to some ordering principle. Ordered lists use the same list item tag,
<LI>. The <LI> tag has additional attributes when used with ordered lists. The <OL> tag
contains attributes that set a list’s TYPE and STARTing value. The <LI> tag for ordered lists
also contains attributes for the list item’s TYPE and VALUE.
Type Attribute for Ordered Lists
The TYPE attribute of the <OL> tag changes a lists ordering principle. The allowed
types are “1” (default), “A”, “a”, “I”, and “i”. The “A” and “a” types produce upper- and lower-
case alphabetical lists. The “I” and “i” types produce upper- and lower-case Roman
numerals.
The START Attribute for Ordered Lists
Start attribute requires a numeric value, even if the list TYPE is not numeric. The
HTML would be easier to write if the value used in the START attribute matched the list
TYPE, but the use of a numerical starting value is quite annoying.
48
Sample HTML Ordered List Types T ags as shown below:
Figure 4.3 HTML Source Code for Ordered List Type Page
49
Figure 4.4 The Ordered List Type Page
Nested Lists
A nested list or a sublist is a list within a list. The trick to marking nested lists up
correctly in HTML is to recognize that the sublist is actually a child of a list item and not of
a list.
50
Sample HTML Nested List Type T ags as shown below:
Figure 4.5 HTML Source Code for Neste d List Type Page
Figure 4.6 The Nested List Type Page
DEFINITION LISTS
51
Definition lists construct a list of terms and definitions. These lists use three
different tags:
Definition List Tags. The <DL>…</DL> tags form a container for a definition terms and the
definitions are placed in this list.
Definition Term Tags. The <DT>…</DT> tags form a container for a definition term. The
term may be a single word or phrase. Each term should be followed by at least one
definition tag.
Definition Tags. The <DD>…</DD> tags form a container for a definition. HTML uses left
indention for the definition.
Sample HTML Ordered List Type Tags as shown below:
Figure 4. 7 HTML Source Code for Definition List Page
52
Figure 4.8 The Definition List Page
TEST YOURSELF
I.A.Identification. Identify the word/s being described in each sentence.
_____________________ 1. Which is use to itemize information to make it easier to understand?
_____________________ 2. Which is also known as unnumbered or bulleted list?
_____________________ 3. As the name implies, what type of list contains items that are
arranged accordingly?
_____________________ 4. What type of list uses three different tags: definition list tag, definition
term tag, and definition tag?
_____________________ 5. What attribute changes the type of bullet to use for the list items?
_____________________ 6. What element list the items in plain bullets?
_____________________ 7. Which element uses different schemes of numbers to list the items?
_____________________ 8. What type of list arranges the items in the same way as they are
arranged in a dictionary?
_____________________ 9. What tags form a container for a definition term?
_____________________ 10. Which tags form a container for a definition?
B. Definition. Direction: Give the meaning of the following terms:
1. Unordered Lists -
53
2. Ordered Lists -
3. Definition Lists -
HANDS-ON NO. 6
Directions: Combine the different list element tags to perform this task. Write the HTML
Source Code on a separate sheet.
The Lists Page. Figure 4.9 contains Parts of Computer with the elements of ordered list,
unordered lists, and definition lists. Try to recreate this page.
54
Figure 4. 9 The Lists Page
CHAPTER 5 CREATING TABLES
55
Tables play an important role on documents printed on paper. Tables are used to
present data. The HTML table tags contain a rich set of attributes that use to create
sophisticated tables.
TABLE BASICS
HTML contains five distinct table tags, each with its own set of attributes:
The Table Tags. The <TABLE>…</TABLE> tags form a container for an HTML table. The
<TABLE> tag contains several optional attributes that change the table’s background color,
alignment, border, cell padding and spacing, and width.
The Caption Tags. The <CAPTION>…</ CAPTION > tags form a container for the table’s
caption. The caption is optional. The ALIGN attribute changes the caption’s alignment. The
alignment values are “TOP” (default), “BOTTOM”, “LEFT”, and “RIGHT”.
The Row Tags. The <TR>…</TR> tags create the rows of the table. The rows contain either
headings or data.
The Table Heading Tags. The <TH>…</TH> tags create heading cells. Headings, which are
defined in <th> tag, are centered and bold by default.
The Table Data Tags. The <TD>…</TD> tags create data cells. Table data are leftaligned
and are written in a plain font.
The HTML tables are created using the <TABLE> tag in which the <TR> tag is used
to create table rows and <TD> tag is used to create data cells. The elements under <TD>
are regular and left aligned by default.
56
Figure 5.2 The HTML Tables Page
Figure 5.1 HTML Source Code for HTML

Tables Page
Sa
mple HTML Tags for HTML Tables: The result will look much like this:
TABLE HEADING
This tag will be put to replace <TD> tag, which is used to represent actual data cell.
Normally it will place at the top row as table heading as shown below, otherwise can use
<TH> element in any row.
Sample HTML Tags for Table

Heading:
57
Figure 5.3 HTML Source Code for Table Heading Page

Figure 5.4 The Table Heading Page
CELLPADDING AND CELLSPACING ATTRIBUTES
There are two attributes called cellpadding and cellspacing, which will use to adjust
the white space in table cells. The cellspacing attribute defines space between table cells,
while cellpadding represents the distance between cell borders and the content within a
cell.
Sample HTML
Cellpadding
and Cellspacing
Tags as shown
below:
58
Figure 5.5 HTML Source Code for Table Heading Page
Figure 5.6 The Table Heading Page
COLSPAN AND ROWSPAN ATTRIBUTES
Use colspan attribute to merge two or more columns into a single column. Similar way use
rowspan to merge two or more rows.
59
Sample HTML Colspan and Rowspan T ags as shown below:
Figure 5.7 HTML Source Code for Table Colspan and Rowspan Page
Figure 5.8 The Table Colspan and Rowspan Page
60
TABLE BACKGROUNDS
Table background can be set using one of the following two ways:
bgcolor attribute − can set background color for whole table or just for one cell.
background attribute − can set background image for whole table or just for one cell.
The border is an attribute of <TABLE> tag and it is used to put a border across all the cells.
If border is not needed, then use border = "0". Border color can also be set using
bordercolor attribute.
Figure 5.9 HTML Source Code for Table Backgrounds Page
Sample HTML Table Background using COLOR as shown below:
61
Figure 5.10 The Table Backgrounds Page
62
Sample HTML Table Background using IMAGE as shown below:
Figure 5.11 HTML Source Code for Table Backgrounds using Image Page
Figure 5.12 The Table Backgrounds using Image Page
63
TABLE HEIGHT AND WIDTH
Set the table width and height using width and height attributes. Specify table width
or height in terms of pixels or in terms of percentage of available screen area.
Sample HTML Table Width and Height Tags a s shown below:
Figure 5.13 HTML Source Code for Table Width and Height Page
64
Figure 5.14 The Table Width and Height Page
TABLE CAPTION
The caption tag will serve as a title or explanation for the table and it shows up at
the top of the table.
Sample HTML Table Caption Tags a s shown below:
Figure 5.15 HTML Source Code for Table Caption Page
65
Figure 5.16 The Table Caption Page
TABLE HEADER, BODY, AND FOOTER
Tables can be divided into three portions − a header, a body, and a foot. The head
and foot are rather similar to headers and footers in a word-processed document that
remain the same for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are:
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups
of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>.
66
Sample HTML Table Header Body Footer Tags a s shown below:
Figure 5.17 HTML Source Code for Table Header Body Footer Page
Figure 5.18 The Table Header Body Footer Page

NESTED TABLES
Use one table inside another table. Not only tables but also almost all the tags inside
table data tag <TD>.
Following is the example of using another table and other tags inside a table
67
cell.
Figure 5.19 HTML Source Code for Table Nested Page
Figure 5.20 The Table Nested Page
TEST YOURSELF
68
I. Modified True or False. Write TRUE if the statement is correct otherwise change the
underlined word/s that make/s the sentence incorrect and write the correct answer on
the space provided before each number.
_______________ 1. The border is an attribute of <table> tag and it is used to put a

border across all the cells. If border is not needed, then use border = "2".
_______________ 2. The cellspacing attribute represents the distance between cell
borders and the content within a cell.
_______________ 3. The <TR>…</TR> tags contain several optional attributes that
change the table’s background color, alignment, border, cell padding and
spacing, and width.
_______________ 4. The HTML tables are created using the <table> tag in which
the <tr> tag is used to create table rows and <td> tag is used to create data
cells.
_______________ 5. Use colspan attribute to merge two or more columns into a single
column.
_______________ 6. Table background can be set using the bgcolor attribute only.
_______________ 7. Table width or height can specify in terms of pixels or in terms of
percentage of available screen area.
_______________ 8. The header tag will serve as a title or explanation for the table and it
shows up at the top of the table.
_______________ 9. Tables can be divided into three portions − a header, a body, and a
foot.
_______________ 10. Table data are right-aligned and are written in a plain font.
HANDS-ON NO. 7
Directions: Create table for the following exercises by using the given figure and data. Write
the HTML Source Code of each activities on a separate sheet.
69
The Calendar Page. Figure 5.21 contains a calendar for the month of January 2018. Feel
free to experiment on background color, font color, font face and other table elements.
Figure 5.21 The Calendar Page
HANDS-ON NO. 8
The Daily Planner Page. Figure 5.22 contains a Daily Planner. Create a similar appearing
in the figure and supply the needed information.
Figure 5.22 The Daily Planner Page
70
CHAPTER 6 INSERTING IMAGES AND BACKGROUNDS
Proper formatting, organizing, and layouting of a web page pictures, links to other
documents, and text or links to other files greatly affects an attractive Web page
appearance.
Web pages often contain images, ranging from simple line drawings to photographs
and/or from small or large images. Not all browsers can process image. Generally, the
larger the size of the file, the more slowly it loads into a browser. Therefore, it is important
to choose image files that are high quality yet the smallest possible size.
IMAGE FORMATS
Images are very important to beautify as well as to depict many complex concepts
in simple way on the web page. It can enhance the design and the appearance of a web
page. Generate or customize images using different available photo tools or buy and
download via internet. The following are the main types of images that can be used on the
Web:
BITMAP
Bitmap (bmp) format creates images that take up a lot of bytes and is not very
efficient at storing data. Bitmaps are good images but they are not the best type of graphics
format to use on the web.
GIF FORMAT
GIF (pronounced with a soft “g”) stands for Graphics Interchange Format. It has an
extension of .gif. GIF images are compressed using the Lempel–Ziv– Welch (LZW) lossless
data compression technique to reduce the file size without degrading the visual quality. The
GIF format uses a single byte to store a color, so it can be represent only 2 8, or 256, distinct
colors. GIF images use the standard RGB palette and one transparent color. Since GIF files
have limited color, a computer program attempt to approximate a color from a mixture of
other colors when the required color is not available through dithering.
JPEG FORMAT
JPEG (pronounced like two nicknames, “Jay-Peg”) stand for Joint Photographic
Experts Group. The JPEG format uses 24 bits to store each color, so it recognizes 2 24 or 16,
777, 216 colors. This format is called “Millions of Colors”. JPEG files have an extension
of .jpeg or .jpg. The JPEG format uses a lossy compression method. This means that it does
not preserved the details in the original image.
71
PNG FORMAT
PNG stands for Portable Network Graphics. PNG supports two image techniques:
PNG-8 and PNG-24. PNG-8 uses 8 bits to store a color, PNG-24 uses 24 bits. The PNG format
supports animation, transparency, and interlacing. It uses nonproprietary compression
method and it can preserve the sharpness of the original image. PNG files have a clarity not
seen in other formats.
THE <IMG> TAG
In HTML, images are defined with the <IMG> tag. The <IMG> tag is empty; it
contains attributes only, and does not have a closing tag.
The <IMG> tag contains several attributes and some of these are optional but the
src (source) attribute that specifies the URL (web address) of the image is required.
ALT = “alternate text”. The alt attribute of the <IMG> tag provides an alternate text to
nongraphic browsers. If a browser cannot find an image, it will display the value of the alt
attribute.
BORDER = “Number”. The BORDER attribute specifies the image’s border. Images that do
not serve as hot links have by default a border of zero pixels. An image that serves as a hot
link has a border of one pixel by default. Most web-page developers remove the borders on
clickable images. Simply include BORDER= “0” in the <IMG> tag to remove the border.
HEIGHT and Width = “pixels or percent”. These attributes change the scale of the image.
ALIGN = “Left” | “Right”. The ALIGN attribute wraps text around an image. It has also TOP,
MIDDLE, and BOTTOM positions attribute.
CREATING BACKGROUND
One design element of a Web page is the background design. It captures a Web page
visitor’s attention to look for the content of the Web. There are different colors available
for Web page background, text and links.
By default, the webpage background is white in color but HTML provides the
following two good ways to decorate webpage background:
- HTML Background with Colors

- HTML Background with Images
72
HTML BACKGROUND WITH COLORS
We have used the attributes of the <BODY> tag to change the background, text, and link
colors. The BACKGROUND attribute of the <BODY> tag uses an image file as the
background for a page.
The bgcolor attribute is used to control the background of an HTML element,

specifically page body and table backgrounds.
Sample HTML Background Colors using Color Name, Hex Value, and RGB Value as
shown below:
Figure 6.1 HTML Source Code for Background Colors Page
Figure 6.2 The Background Colors Page
73
HTML BACKGROUND WITH IMAGES
The background attribute can also be used to control the background of an HTML
element, specifically page body and table backgrounds. Specify an image to
Figure 6.3 HTML Source Code and Output for Image Page
set
background of HTML page or table.
PATTERNED AND TRANSPARENT BACKGROUNDS
Many pattern or transparent backgrounds on various websites have might be seen.

This simply can be achieved by using patterned image or transparent image in the
background.
It is suggested that while creating patterns or transparent GIF or PNG images, use
the smallest dimensions possible even as small as 1x1 to avoid slow loading.
Sample HTML Background Patterned and Transparent Tags as shown below:
74
Figure 6.4 HTML Source Code for Background Patterned and Transparent Page
Figure 6.5 The Background Patterned and Transparent Page
SET IMAGE HEIGHT AND WIDTH
Set image width and height based on the requirement using width
and height attributes. Specify width and height of the image in terms of either pixels or
percentage of its actual size.
75
Sample HTML Image Height and Width Tags as shown below:
Figure 6.6 HTML Source Code and Output for Image Height and Width Page
SET IMAGE BORDER
By default, image will have a border around it. Specify border thickness in terms of
pixels using border attribute. A thickness of zero means no border around the picture.
Sample HTML Image Border Tags as shown below :
Figure 6. 7 HTML Source Code and Output for Image Border Page
76
SET IMAGE ALIGNMENT
By default, image will align at the left side of the page, but it can use align attribute
to set it in the center, top, middle, or bottom as shown below:
Figure 6.8 HTML Source Code and Output for Image Alignment Page
The placement of the image on the page can be controlled by using the image align
attribute. Images are treated like a character in the line of text. Don’t wrap text alongside
the graphics, specify where the image can align in relation to the
77
text.
Figure 6.9 HTML Source Code for Image Alignment Top Middle Bottom Page
Figure 6.10 The Image Alignment Top

Middle Bottom Page
ANIMATED IMAGES
HTML allows animated graphics using the .gif format. To include animated graphics
on a Web page it is just the same as adding any non-animated graphics. Place the animation
on the page using the same procedure.
78
Sample HTML Animated Images Tags as shown below :
Figure 6.11 HTML Source Code for Animated Images Page
Figure 6.12 The Animated Images Page

TEST YOURSELF
79
1. Which of these can enhance the design and appearance of a webpage?
a. Background c. Link
b. Image d. Table
2. What image format is also known as “Millions of Color”?
a. Bitmap c. JPG/JPEG
b. GIF d. PNG
3. Which of the following is an image attribute that specifies the URL of an image?
a. alt c. height and width
b. border d. src
4. Which of the following attributes provide an alternate text to non-graphic
browsers?
b. border d. src
5. An attribute that tells how text wraps around an image.
b. border d. src
6. By default, what is the webpage background color?
a. gray c. white
b. blue d. black
7. Which attribute is use to control the page body and table backgrounds of an
HTML element?
a. body background bgcolor c. background
b. body d. bgcolor
8. Which of the following use the color value in RGB terms?
a. <table bgcolor=”yellow”> c. <table bgcolor=”RGB(255,0,255)”>
b. <table bgcolor=”#6666FF”> d. All of the above 9. In setting the
image border, a thickness of 0 means?
a. No border c. 1 cm thickness
b. 1 inch thickness d. 1 percent thickness
10. Which of the following correctly describe animated graphics?
a. Moving image
b. Scrolling image
c. Shiny image
d. Still image
80
HANDS-ON NO. 9
Directions: This exercise cover the setting image height and width, image border, and image
alignment. If you have saved images, feel free to substitute those images provided that you
will create your own title. Write the HTML Source Code on a separate sheet.
The Travel Page. Figure

6.13 contains beautiful
sceneries in the Philippines.
Figure 6.13 The Travel Page
HANDS-ON NO. 10
Directions: Examine the following exercise. Try to modify the page. Write the HTML Source
Code on a separate sheet.
The Native Delicacy Page. Figure 6.14 contains a recipe for famous native delicacy –
Sapin- sapin.
81
This exercise is a combination of table elements, font entities, lists, inserting images, and
backgrounds.
CHAPTER 7 CREATING HYPERLINK
A web page can contain various links that take directly to other pages and even
specific parts of a given page. Hyperlinks allow visitors to navigate between websites by
clicking on words, phrases, and images. Thus, hyperlinks can create using text or images
available on a webpage.
HYPERLINK
Hyperlinks are the backbone of web pages. It makes the page more interactive
because it simply links to some other resources and let jump to some other content in web
browser, usually to another page.
Adding links to pages requires anchor tags, <A>…</A>. The <A> tag contains three
attributes: href, name, and target. The HREF attribute creates a link to another page. The
NAME attribute creates a target for a link within a page. The TARGET attribute indicates
that the file associated with an HREF attribute should be loaded into the frame associated
with the TARGET attribute.
DEFAULT LINK COLORS
By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue.
A visited link is underlined and purple. An
active link is underlined and red.
The default link colors can be changed by adding VLINK, ALINK, and LINK attributes
to the <BODY> tag.
The LINK attribute changes the default color for unvisited links.
82
The VLINK attribute does the same for visited links.
The ALINK attribute changes the default color for the active link.
ABSOLUTE LINKS
An absolute link is a hyperlink containing a full URL, which includes all the protocol
required to get the document, the server to get it from, the directory it is located in and
then the name of the document itself.
An absolute link will look like this:
<a href="http://www.navegabem.com/index.html">HOME</a>
RELATIVE LINKS
A relative link on the other hand takes advantage of the fact that the server knows
where the current document is. Thus, if link wants to be on another document in the same
directory, no need to write out the full URL just use the name of the file.
A relative link will look like this:
<a href="/index.html">Home</a>
Alternatively referred to as a link, a hyperlink can be icon, graphic, or text in a
document that links to another file or object. The World Wide Web is comprised of
hyperlinks linking trillions of pages and files to one another. There are different types of
links:
Link to E-mail. This link allows the visitor to contact the Web developer for comments and
additional
information
regarding
the Web page.
Figure 7.1 HTML Source Code and Output for E -mail Link Page
83
Link to other HTML documents. Linking is very effective on the Web site that consists of
multiple pages.
Figure 7.2 HTML Source Code and Output for Linking to other Documents Page
Link to another Website.
84
Figure 7.3 HTML Source Code and Output for Link to Web Site Page
Link to Image. The image link is used as the linking tool in connecting to another Web
page or Website. Text and graphics may be used as anchors for a link. To use an image as a
link, put the <img> tag within <a> tag followed by the HREF tag.
Figure 7.4 HTML Source Code and Output for Link to another Website Page
85
IMAGE MAPS
Use the <MAP> tag to define an image-map. An image-map is an image with clickable
areas. An image map divides an image into clickable regions, each region being associated
with a URL.
The required name attribute of the <map> element is associated with the <IMG>'s
usemap attribute and creates a relationship between the image and the map. The <MAP>
element contains a number of <AREA> elements that defines the clickable areas in the
image map.
Coordinate System
The actual value of coords is very dependent on the shape in question. Here is a
summary, to be followed by detailed examples:
rect = x1 , y1 , x2 , y2 x1 and y1 are the coordinates of the upper left corner of the
rectangle; x2 and y2 are the coordinates of the lower right corner.
circle = xc , yc , radius
xc and yc are the coordinates of the center of the circle, and radius is the
circle's radius. A circle centered at 200,50 with a radius of 25 would have the
attribute coords = "200,50,25"
poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
The various x-y pairs define vertices (points) of the polygon, with a "line"
being drawn from one point to the next point.
A diamond-shaped polygon with its top point at 20, 20 and 40 pixels across
at its widest points would have the attribute coords = "20, 20, 40, 40, 20, 60, 0, 40".
All coordinates are relative to the upper-left corner of the image (0,0). Each shape
has a related URL. Use any image software e.g. Paint and Photoshop to know the
coordinates of different positions.
86
Refer to Figure 7.5 HTML for Image Map Page to see on how coordinate system is
use.
Figure 7.6 The Image Map Page shows that once it move the mouse over a link, the
mouse arrow will turn into a little hand, and when attempting to click it will show the
coordinates being made.
Sample HTML Image Map T ags as shown below:
Figure 7.5 HTML Source Code for Image Map Page
87
Figure 7.6 The Image Map Page
Sample Link Page of an image once click as shown below:
88
Figure 7.7 The Image Map Pinter Page
Figure 7.8 The Image Map Mouse Page
THE TARGET ATTRIBUTES
Target attribute is used to specify the location where linked document is opened.
Following are the possible options:
_blank. Opens the linked document in a new window or tab.
_self. Opens the linked document in the same frame.
_parent. Opens the linked document in the parent frame.
_top. Opens the linked document in the full body of the window.
89
Targetframe. Opens the linked document in a named targetframe.
Example
Try to do Figure 7.9 HTML for Link Target Page example to understand basic difference in
few options given for target attribute.
Figure 7.9 HTML Source Code for Link Target Page
This will produce the following result, click on different links to understand the
difference between various options given for target attribute.
Figure 7.10 The Link Target Page
90
SETTING LINK COLORS
Set colors of links, active links and visited links using link,
alink and vlink attributes of <body> tag.
Example
Save the following and open it in any web browser to see how link, alink, and vlink attributes
work.
Sample HTML for Link Alink Vlink T ags as shown below:
Figure 7.11 HTML Source Code for Link Alink Vlink Page
This will produce the following result. Just check the color of the link before clicking
on it; next check its color when activate it
and when the link has been visited.
Figure 7.12 The Link Alink Vlink Page

before
visiting
91
when activated

after visiting
TEST YOURSELF
I. Enumeration. Give what is asked in each number.

1. Types of Links
a. _____________________________________
b. _____________________________________
c. _____________________________________
d. _____________________________________
2. Attributes that Set Link Colors
a. _____________________________________
b. _____________________________________
c. _____________________________________
3. Target Attributes
a. _____________________________________
b. _____________________________________
c. _____________________________________
d. _____________________________________
e. _____________________________________
4. Anchor Tag Attributes
a. _____________________________________
b. _____________________________________
c. _____________________________________
92
HANDS-ON NO. 11
Directions: This activity include several use of different types of links. Write the HTML
Source Code on a separate sheet.
The Hyperlinks Page. Figure 7.15 contains a link to another HTML Document, link to an e-
mail, link to another website, and an
image use as link. Try to recreate this page.
CHAPTER 8 HTML LAYOUT AND FRAMES
A webpage layout gives better look

to website. It takes considerable time to
design a website's layout with great look
and feel. Mostly, all modern websites are
using CSS and JavaScript based
framework to come up with responsive and
dynamic websites but using pure HTML
tables or division tags in combination with
other formatting tags can also create a
simple and good Figure 7.15 The Hyperlinks Page layout
HTML Layout Using Tables
The simplest and most popular way of creating layouts is using HTML <TABLE> tag.
These tables are arranged in columns and rows, so utilize these rows and columns in
whatever way it like.
Example
The following HTML layout example is achieved using a table with 3 rows and 2
columns but the header and footer column spans both columns using the colspan
93
attribute:
Figure 8.1 HTML Source Code for Layout Using Tables Page
This will produce the following result:
94
Figure 8.2 The Layout Using Tables Page
Multiple Columns Layout Using Tables
In designing the webpage, put the web content in multiple pages. Keep the content
in middle column, use left column to use menu, and right column can be used to put
advertisement or some other stuff.
Example
Here is an example to create three -column layout:
Figure 8.3 HTML Source Code for Layout Using Tables 3 Cols Page
95
Figure 8.4 The Layout Using Tables 3 Cols Page
HTML Layout Using DIV, SPAN
The <div> element is a block level element used for grouping HTML elements. While
the <div> tag is a block-level element, the HTML <span> element is used for grouping
elements at an inline level.
Although nice layouts can be achieved with HTML tables, tables were not really
designed as a layout tool rather they are more suited in presenting tabular data.
This example makes use of Cascading Style Sheet (CSS), to understand this example
having a prior knowledge on how CSS works is needed.
Example
Try to achieve same result using <div> tag along with CSS on the next page.
96
Sample HTML Layout Div Span T ags as shown below:
Figure 8.5 HTML Source Code for Layout Div Span Page
97
Figure 8.6 The Layout Div Span Page
HTML FRAMES
HTML frames are used to divide browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window
is known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames
in webpages –
1. Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
2. Sometimes page will be displayed differently on different computers due to
different screen resolution.
3. The browser's back button might not work as the user hopes.
4. There are still few browsers that do not support frame technology.
The basic concept behind frames is pretty simple:

1. Use the frameset element in place of the body element in an HTML document.
2. Use the frame element to create frames for the content of the web page.
3. Use the src attribute to identify the resource that should be loaded inside each
frame.
4. Create a different file with the contents for each frame.
98
CREATING FRAMES
To use frames on a page 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.
The <FRAME> Tag Attributes
Following are the important attributes of <FRAME> tag:
SRC. This attribute is used to give the file name that should be loaded in the frame. Its value
can be any URL. SRC means source.
NAME. This attribute allows to give a name to a frame. It is used to indicate which frame a
document should be loaded into.
FRAMEBORDER. This attribute specifies whether or not the borders of that frame are
shown; it overrides the value given in the frameborder attribute on the <frameset> tag if
one is given, and this can take values either 1 (yes) or 0 (no).
MARGINWIDTH. This attribute allows to specify the width of the 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".
MARGINHEIGHT. This attribute allows to specify the height of the 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, frame can resize 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 to provide a link to another page containing a long
description of the contents of the frame. For example longdesc =
99
"framedescription.html"
The <FRAMESET> Tag Attributes

Following are important attributes of the <frameset> tag:
COLS. Specifies how many columns are contained in the frameset and the size of each
column. 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%".
Using a wildcard symbol.
For example, to create three vertical frames, use cols = "10%, *, 10%". In this case
wildcard takes remainder of the window.
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. Use relative widths of the browser window. Here the
window is divided into sixths: the first column takes up half of the window, the
second takes one third, and the third takes one sixth.
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%". 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 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.
NOFRAME. This attribute defines alternate page content for browsers without frames.
SETTING THREE-FRAMESET COLUMNS
100
Step 1.
Create
a first
Web
page.
Figure 8.7 HTML Source Code and Output for Top Page
Step 2. Create a second Web page.
Figure 8.8 HTML Source Code and Output for Main Page
Step 3. Create a third Web page.
Figure 8.9 HTML Source Code and Output for Bottom Page
101
Step 4. Create Frameset Columns.
Figure 8.10 HTML Source Code and Output for Frames Page
SETTING THREE-FRAMESET ROWS
When using HTML files in creating three-frameset column, set the threeframeset rows as
follows:
102
Figure 8.11 HTML Source Code and Output for Frame Rows Page
FRAME'S NAME AND TARGET ATTRIBUTES
One of the most popular uses of frames is to place navigation bars in one frame and
then load main pages into a separate frame.
Example
Create the following HTML files to see example where Frame’s name and target
103
attributes are use:
Figure 8.12 HTML Files for Creating Frame’s Name and T arget Attributes
Here is an example of complete Frame’s Name and Target Attributes:
Figure 8.13 HTML Source Code and Output of It’s More Fun in the Philippines
This example shows that the left frame contains a list of links, which upon clicking,
will display a separate HTML document on the bottom right frame.
104
Sample HTML Luzviminda T ags as shown below:
Figure 8.14 HTML Source Code and Output for Luzviminda Page
Figure 8.15 HTML Source Code and Output for Morefun Page
105
HTML Tags for Luzon, Visayas, and Mindanao as shown below:
Figure 8.16 HTML Source Code and Output for Luzon Page
Figure 8.17 HTML Source Code and Output for Visayas Page
106
Figure 8.18 HTML Source Code and Output for Mindanao Page
TEST YOURSELF
I. Matching Type. Match the description use in creating HTML Layout and Frame in
Column A to its corresponding tags in Column B. Write only the letter of the answer on
the space provided for.
A B
_____1. Used to divide browser window a. Layout

into multiple sections. b. Frames
_____2. Tag that defines how to divide the c. <frame src="frame_a.htm"
window into frames. frameborder="0">
_____3. An element use for grouping elements. d. <frameset>
_____4. Colspan Attribute e. <frameset cols=”25%,50%,*”>
_____5. Used to give the file name that should f. <frameset rows=”25%,75%>
be loaded in the frame. g. <frameset rows="*"
_____6. To specify the rows in the frameset. cols="200, *"
_____7. Specifies how many columns are framespacing="30">
contained in the frameset. h. <frame src=”Luzon.html”
_____8. It specifies whether a three-dimensional name=”frame3”> border
should be displayed between i.<frame src="frame_a.htm" frames .
scrolling="yes">
_____9. Use to specifies the amount of space j. <span>
between frames in a frameset. k. <td colspan=”3”>
____10. It controls the appearance of the l. <td rowspan=”3”>
scrollbars that appear on the frame.
107
HANDS-ON NO. 12
Directions: Create these frames using HTML Tags. Use different colors for each frame. Write
the HTML Source Code for each frame on separate sheets.
Figure 8.19 A Column and Two-Row Frames Figure 8.20 Two-Column and Three-Row Frames
HANDS-ON NO. 13
Directions: Recreate this Online Shopping Page. The page should contain <FRAME> and
<FRAMESET> attributes. Write the HTML Source Code on a separate sheet.
The Online Shopping Page. Figure 8.21 contains a One Stop One Shop Online
108
Shopping Page.
Figure 8.21 The Online Shopping Page
CHAPTER 9 ADDING FORMS
The form is just like the paper forms use to fill-up in real life. Creating a form is
easier than processing it. HTML forms are use when wanting to collect some data or
information from the site visitor such as name, email address, etc.
HTML provides a set of tags to create a form and the elements that go into it. The
flexibility of HTML forms makes them one of the most complex structures in HTML; build
any kind of basic form using dedicated form elements and attributes. Using correct
structure when building an HTML form will help ensure that the form is both usable and
accessible.
Most form elements are created with an HTML <INPUT> tag. This tag is used in
various form elements available like text fields, text area fields, drop-down menus, radio
buttons, checkboxes, etc.
All elements created with an <INPUT> tag have TYPE and NAME attributes. The
remaining attributes are determined by the element’s type.
CREATING FORM TAG
109
The <FORM> element formally defines a form and attributes that determine the
behavior of form. Each time desires to create an HTML form, start it by using this element,
putting all the contents inside.
HTML forms are constructed with a pair of tags: <FORM>…</FORM>. The form’s
elements are placed between these opening and closing tags.
There are different types of form controls that can use to collect data using HTML
form:
TEXT INPUT CONTROLS
There are three types of text input used on forms:
Single-line text input controls. This control is used for items that require only one line of
user input, such as search boxes or names. They are created using HTML <INPUT> tag.
Password input controls. This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTML <input> tag.
Multi-line text input controls. This is used when the user is required to give details that
may be longer than a single sentence. Multi-line input controls are created using HTML
<TEXTAREA> tag.
Attributes
Following is the list of attributes for <input> tag for creating text field.
Type. Indicates the type of input control and for text input control it will be set to
text.
Name. Used to give a name to the control that is sent to the server to be recognized
and get the value.
Size. Allows specifying the width of the text-input control in terms of characters.
110
Maxlength. Allows specifying the maximum number of characters a user can enter
into the text box.
Rows. Indicates the number of rows of text area box.
Cols. Indicates the number of columns of text area box
Example
Here is a basic example of a single-line text input used to take first name, middle
name and last name.
Figure 9.1 HTML Source Code and Output for Form Text Input Page
Example
111
Here is a basic example of a single -line password input used to take user password:
Figure 9.2 HTML Source Code and Output for Form Password Input Control Page
Example
112
Here is a basic example of a multi -line text input used to take item description:
FORM MULTIPLE LINES
Figure 9.3 HTML Source Code and Output for Form Multiple Lines Page
CHECKBOXES CONTROLS
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 simplest INPUT type is the CHECKBOX. The square is a toggle switch. If it is ON,
the boxes are checked. If it is OFF, the boxes are unchecked. Check boxes are created using
the <INPUT> tag with the type attribute set to “checkbox”.
The CHECKBOX has three options: NAME, VALUE, and CHECKED. Set to checked if
wanting to select it by default.
Example
113
Here is a basic example of a CHECKBOX CONTROL using checked option :
Figure 9.4 HTML Source Code for Form Checkbox Page
Figure 9.5 The Form Checkbox Page
RADIO BOX CONTROLS
Radio buttons create a set of options that a user can see all at once. The users are
allowed only to make a single choice from the provided lists by clicking the small white
circle. Use the <INPUT> tag with the type attribute set to radio.
Example
114
Here is example HTML code for a form radio buttons.
Figure 9.6 HTML Source Code for Form Radio Box Page
Figure 9.7 The Form Radio Box Page
SELECT BOX CONTROLS
115
A select box, also called drop down box, provides option to list down various options
in the form of drop down list, from where a user can select one or more options.
The <SELECT>…</SELECT> tag creates a list field in which some choices are hidden.
Start and end tags surround list options that are marked with <OPTION>.
The method to use in order to limit user’s choices is by using the SELECT tag
together with the OPTION tag. The OPTION tag defines each individual choice that the user
will see.
Example
Here is example HTML code for a form with drop down box :
Figure 9.8 HTML Source Code for Form Select and Option Page
116
Figure 9.9 The Form Select and Option Page
CLICKABLE BUTTONS
There are various ways in HTML to create clickable buttons. Also create a clickable
button using <INPUT>tag by setting its type attribute to button. The type attribute can take
the following values:
Submit. This creates a button that automatically submits a form.
Reset. This creates a button that automatically resets form controls to their initial
values.
Button. This creates a button that is used to trigger a client-side script when the
user clicks that button.
Image. This creates a clickable button and also can be used as background of the
button.
Example
117
Here is example HTML code for a fo rm with three types of buttons:
Figure 9.10 HTML Source Code for File Upload Box Page
Figure 9.11 The File Upload Box Page
HIDDEN FORM CONTROLS
Hidden form controls are used to hide data inside the page which later on can be
pushed to the server. This control hides inside the code and does not appear on the actual
page.
For example, following hidden form is being used to keep current page number.
When a user will click next page then the value of hidden control will be sent to the web
server and there it will decide which page will be displayed next based on the passed
current page.
Example
118
Here is example HTML code to show the usage of hidden control:
Figure 9.12 HTML Source Code for Form Hidden Control Page
Figure 9.13 The Form Hidden Control Page
TEST YOURSELF
I. Labelling. Label each element of the browser screen.
119
ONE STOP ONE SHOP
User ID:
Password:
What items are you interested to buy in?

Bags
Shoes
Pants
Are you a regular customer?
Yes
No
Select Your Province …
Sketch you location.
1.
II. Multiple Choice. Direction: Choose the letter of the best answer.
1. Which tag marks a menu item in a pull-down?
a. <FORM>…</FORM> c. <SELECT>…</SELECT>
b. <INPUT> d. <OPTION>
2. Which attribute to use to preselect an item in a radio button list?
a. CHECKED c. ORDER
b. NAME d. TYPE
3. Which of the following form fields requires the OPTION attribute?
a. Checkbox c. Radio Button
b. Hidden Form d. Select Box
4. Which tag marks a menu item in a check box menu?
a. <FORM>…</FORM> c. <SELECT>…</SELECT>
b. <INPUT> d. <OPTION>
5. Which attribute allows customizing a text input controls?
a. CHECKED c. ORDER
b. NAME d. TYPE
120
HANDS-ON NO. 14
Directions: Recreate the exercise showing the different types of form controls that are used
to collect data using HTML form. Write the HTML Source Code on a separate sheet.
The Student Profile Page. Figure 9.14 contains some of the student’s profile such as name,
address, gender, grade level, sports where they are engaged in, and dream in life as well as
the Submit and Cancel buttons.
Figure 9.14 The Student Profile Page
121
122

HTML Book Chapters 1 9

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

HTML Book Chapters 1 9

Uploaded by

Copyright:

Available Formats

CHAPTER 1 INTRODUCTION TO THE INTERNET AND THE WEB

HISTORY OF THE INTERNET

1. Theft of Personal Information

Country. Country name

protocol) protocol https://www.deped.com.ph

Figure 1.1 Anatomy of a Web Address

PRINCIPLES OF EFFECTIVE WEB DESIGN

It is easy to create a beautiful and functional website; simply by keeping the

8. “F” PATTERN DESIGN

10. MOBILE FRIENDLY

I. Multiple Choice. Choose the letter of the correct answer.

1. Which of these is the world’s biggest computer network?

8. What do ‘three click rule’ means?

_____1. Facebook goes online. a. 1965

Weaving a website requires good programming skills. Web creation is associated to

A Markup language uses symbols to specify the appearance of a document. An HTML

Version Year Version Year

3. Internet Service Provider (ISP).

Tag Name Attribute name Attribute Value

Besides personal preference in building a page, it also needs to decide on a basic

Managing HTML FILES

Starting NOTEPAD and NOTEPAD++

Step 1: Open Notepad (PC)

Scroll Bar. Use to

Menu Bar. Displays all the

Text Area. It is a place where

Figure 2.2 Notepad Window

Status Bar . Gives

Figure 2.3 Notepad++ Window

Step 4: View the HTML Page in a Browser

The result will look much like this:

Figure 2.5 HTML View in a Browser

Printing OFF A WEBPAGE To print a webpage

Figure2.6Additional Menu as Ellipses Clicked

Figure2.7Print Dialog Box

The document prints as it appears in the HTML Editor, NOT as it appears in a

Figure 2.8 A Simple HTML Source Code and Output

The <html> element is the root element of an HTML page.

The <h1> element defines a large heading.

The <p element defines a paragraph.

I. Multiple Choice. Choose the letter of the correct answer.

1. What does HTML stand for?

8. Which of the following defines the declaration of HTML document is in HTML5?

B. Starting HTML Page

C. Printing Off a Webpage

CREATING FIRST WEB PAGE Procedure:

The <BR> and <P> TAGS

Sample HTML Heading Tags as shown below:

Here is an example of Horizontal Rule Tags:

THE <CENTER> and <DIV> TAGS

Sample HTML Center and Div Tags as shown below:

This element is used to add a comment or to explain the code to an HTML

Sample HTML <BLOCKQUOTE> Tag a s shown below:

Figure 3.11 HTML Source Code for BLOCKQUOTE Page

Figure 3.12 The BLOCKQUOTE Page

The <PRE> Tag

The result will look much like this:

Figure 3.14 The PRE Tag Page

PHYSICAL STYLE TAGS

The result will look much like this:

Figure 3.16 The Physical Style Tags Page

Sample HTML Logical Style Tags as shown below:

The result will look much like this: