1

Introduction to

HTML5
(Series 2– with simple JavaScript jump-start)

Copernicus P. Pepito

Available at Nationwide!
 2

Dedication
This book is excitedly dedicated to
Queenie lyn Lenterna Tautjo for being simply unbelievable!
 3

Acknowledgement

I would like to express my heartfelt gratitude to Ms. Letty Custodio and Ms. Mildred
Villapando of National Bookstore - Purchasing Department whose tandem made this book
possible.
I am very thankful also to Madam Zeny Alulod of Cacho Hermanos Publishing, for the
heart-to-heart talks and to Ms. Lyn Francisco of National Bookstore – Accounting Department
whose inspiring words (based on biblical wisdom) can never be forgotten .
If there is someone who motivated me to be brave in expressing myself through written-
words, she was no other than my beloved grandmother, Dr. Roberta Pepito. Her editing-style
made me feel very confident about my English-grammar proficiency (eventhough, I’m not good
at it - honestly speaking).
Most of the time, my book was written behind an inspiration coming from a “girl-next-
door”. But in the case of Queenie lyn Lenterna Tautjo, she is a “girl-next-jungle”, literally
speaking! Well, probably this makes her unbelievable! Until now, I cannot believed in my
experience that I had to pass-through a small jungle before reaching the house where you lived.
And to think of it that you lived in a faraway place right there at the top of the mountain, made
me feel a little bit eerie. I am sure that if I say again that you are beautiful, you won’t believe it
(as you usually do). But who cares? The most important thing is that I said what I feel. And you
know what? It makes me happy.
Lastly, I give thanks to our Almighty God who unceasingly poured out a lot of blessings
to me, and whose plan to my life and the lives of my loveones I cannot questioned, and who
answered my questions about life, trials, and death through the books written by His servants.
 4

Preface

I learned Java applet, Java Server Pages (JSP), Active Server Pages (ASP.NET), and
JavaScript, before knowing HTML scripting. In fact, I had already written books about an
introductory JavaScript and Java programming. It was a big surprise to me, learning that all the
above software technologies require a basic foundation of HTML scripting, because all of them
must be embedded within HTML. Needless to say, I was in big trouble because when I practiced
working with Java Server Pages (JSP) particularly, I have a hard time rectifying my code. The
minor errors of my JSP code were due to my total ignorance of HTML scripting. This means that
I applied the proven and tested time-waster method: the trial-and-error method. Like for
example, I try to put the JSP code at the top part of the script hoping that it would work. Now if
not, I transfer the JSP code at the bottom part. Now if not again, I would transfer the JSP code at
the middle part. And you know what? I spend more time doing this ineffective technique, only to
discover that a basic understanding of HTML scripting would solve the problem in no time at all.
Because of this discovery I was inspired to write this book. And I do fervently hope that may you
have a very productive programming experience ahead as you embark into your journey learning
these very powerful software technologies: JSP, ASP.NET, and JavaScript programming. I
promise you that life will be much easier when you have the knowledge and skills of HTML
scripting. Not to mention the great things an HTML can offer to you in developing web pages
that will surely amaze the web surfers. So good luck to you now, buddy!

Copernicus P. Pepito
Member, PSITE-NCR
Makati, Metro Manila

Note:
PSITE- Philippine Society of Information Technology Educators
NCR- National Capital Region
 5

About the Author

Copernicus P. Pepito is formerly an Assistant Professor of AMA Computer University –
Quezon City Campus for 11 years and once a Training Consultant of Mapua IT Center – Makati
Campus. He holds 4 degrees: Bachelor of Science in Computer Science (BSCS), Bachelor of
Science in Computer Engineering (BSCoE), Master of Science in Computer Science (MSCS),
and Master in Business Administration (MBA). Professor Pepito earned 7 international
certifications in Information Technology: Cisco Certified Network Associate (CCNA), Cisco
Certified Academy Instructor (CCAI), Microsoft Certified Professional (MCP), Microsoft
Certified Systems Administrator (MCSA), Microsoft Certified Database Administrator
(MCDBA), Microsoft Certified Solution Developer (MCSD), and Microsoft Certified Systems
Engineer (MCSE). He is an author of 14 computer books, all of which are published by National
Bookstore.
 6

Contents

Dedication 2
Acknowledgement 3
Preface 4
About the Author 5

Chapter 1 Introduction 9
HTML Overview 9
What’s New in HTML5? 9
Blocking Content on the Web Page 10
Using Block Elements to Organize Script 10
Applying the HEADER and FOOTER Elements 11
Applying the ASIDE Element 12
Applying the NAV Element 13
Using the MARK Element 13
Using the TIME Element 14
Using the METER Element 15
Using the PROGRESS Element 16
Common HTML Tags 17
Five Simple Rules in Designing Web Site 17

Chapter 2 Learning Blocking Elements 19

Example 1: Applying SECTION Element 19
Example 2: Applying ARTICLE Element 20
Example 3: Applying DIALOG Element 22
Example 4: Applying FIGURE Element 25
Example 5: Applying FOOTER Element 26
Example 6: Applying FOOTER & Mark Elements 1 27
Example 7: Applying FOOTER & Mark Elements 2 30
Example 8: Applying Superscript (<SUP>) & Subscript (<SUB>) tags 32
Sample 1: Applying Header(<H?>) tag 1 34
Sample 2: Applying Header (<H?>) tag 2 35
Sample 3: Applying Header Colors in Web Page 36
LAB ACTIVITY TEST 1 39

Chapter 3 Using Lists 43

Example 1: Using List (<LI>, <UL>) tags 43
Example 2: Using List (<LI>, <UL>, <OL>) tags 45
Example 3: Setting the List Appearance Differently 48
Sample 1: Applying Other Option of List tag 50
Example 4: Applying Nested Ordered Lists 51
Example 5: Applying Definition List 53

Chapter 4 Designing HTML Tables 58

 7

Example 1: Applying Simple HTML Table 1 58

Example 2: Adding a Row Data into Table 60
Example 3: Adding a Column Data into Table 63
How to Delete the Rows and Columns 65
How to Span Rows and Columns 67
Example 4: Spanning One Cell 67
Example 5: Spanning Two Columns 70
How to Add a Caption 73
Example 6: Adding Caption into Table 73
How to Format Tables 76
Example 7: Adding Border into Table 1 76
Example 8: Adding Border into Table 2 78
Example 9: Adding a Background Color into Table 81
Example 10: Adding an Image Background into Table 83
Example 11: Specifying Header Cell’s Width 1 85
Example 12: Specifying Header Cell’s Width 2 88
Example 13: Cell spacing and padding 90
Example 14: Specifying Table Width 93
How to Use Advanced Table tags 96
Example 15: Grouping similar table parts 96
How to Use Table Borders 100
Example 16: Applying FRAMES=HSIDE & RULES=NONE 101
Example 17: Applying FRAMES=HSIDES & RULES=GROUP 104
Example 18: Applying FRAMES=HSIDES & RULES=ROW 106
Example 19: Applying FRAMES=HSIDES & RULES=COLS 109
Example 20: Applying FRAMES=HSIDES & RULES=ALL 111
Example 21: Applying FRAMES=HSIDES & RULES=COLGROUP 114
LAB ACTIVITY TEST 3 117

Chapter 5 Designing HTML Forms 125

The <FORM> Element 125
The Form Controls 126
The <INPUT>, Text Boxes, and Text Area 127
The Password Boxes, Button, and Check Boxes 128
The Option Button, Selection Lists, and Menu Options 128
The FieldSet and Legend Tags 129
How to Determine the Form Content 129
Example 1: Using Text Field (Text Box) 129
Example 2: Using Text Box and Buttons 130
Example 3: Applying Password Box Control 132
Example 4: Applying Check Boxes 135
Example 5: Applying Option Buttons (Radio Buttons) 138
Example 6: Applying Text Area Control 139
Example 7: Applying Selection List (List Box) Control 141
Example 8: Applying OPTGROUP tag 142
Example 9: Applying FIELDSET and LEGEND tags 146
 8

Example 10: Applying Submit Query and Reset Buttons 147

LAB ACTIVITY TEST 4 151

Chapter 6 Learning Cascading Style Sheets 153

The CSS Syntax 153
Sample 1: Formatting the color of Heading (<H?>) tags 153
Sample 2: Formatting first line of paragraph 155
Sample 3: Formatting first letter of paragraph 156
Sample 4: Formatting how to Float the Header text 158
Example 1: Inserting generated content like list item 1 159
Example 2: Inserting generated content like list item 2 162
Example 3: Using CSS on nested Ordered List 1 163
Example 4: Using CSS on nested Ordered List 2 168
Example 5: Using CSS Regular Classes 172
Example 6: Using CSS Background-image formatting 1 175
Example 7: Using CSS Background-image formatting 2 177
Example 8: Using CSS on OPTGROUP tag 179
Example 9: Using CSS on TABLE tag 183
Example 10: Using CSS List-style image formatting 187
LAB ACTIVITY TEST 5 189

Chapter 7 Printing Text on a Web Page Using JavaScript 191

What JavaScript Can Really Do? 191
How to Embed JavaScript in HTML 192
Example 1: Displaying text on a webpage 1 192
Example 2: Displaying text on a webpage 2 194
Example 3: Displaying text on a webpage 3 196
Example 4: Coloring text on a webpage 198
How to Use String Values 199
Example 5: Displaying Quoted text 1 200
Example 6: Displaying Quoted text 2 202
Coding Convenience by using the with Statement 203
How To Use Date Object 205
Example 7: Displaying unformatted date & time 205
Example 8: Displaying formatted date 207
Example 9: Displaying formatted time 208
Example 10: Programming Back page 210
Example 11: Displaying .GIF formatted picture 212
Example 12: Displaying .JPG formatted picture 213
Do You Have Some Comments? 215
LAB ACTIVITY TEST 6 216
 9

Chapter 1
Introduction

HTML Overview
The HTML is a scripting language that was developed by Tim Berners-Lee back in 1989.
We will use HTML in writing simple web pages. The HTML stands for Hypertext Markup
Language, which defines a set of common styles for web pages. These common styles or
elements are the tags, headings, paragraphs, lists, tables and character styles (fonts) such as
boldface, italics, or underlined. Furthermore, the HTML describes also the structure of a
document.
Markup language means that we start with the text of our page and add special tags
around paragraphs and words. The tags indicate the different parts of the page and produce
different effects in the web browser. The HTML tags are the information inside the brackets (<
>).
The web pages written in HTML are plain text file. They can be read by any text editor
that supports text writing. Each HTML page needs a title to indicate what the page describes.
The title indicates what the web page is about and how it is used to refer to that page in
bookmark or hotlist entries.

Note:
Markup is a data that is added to a document to convey information about its presentation or structure.

What’s New in HTML5?

HTML5 introduces new elements to allow us to control our code. The new elements cover the
following functions: blocking of content on the web page, form structure, and media
management.
The blocking of content in HTML is traditionally accomplished using either complex tables or
the infamous DIV element. This time with HTML5, we can now easily insert blocks of content
into the web page. These new elements have names that identify what the block of content
accomplishes: HEADER, SECTION, ARTICLE, ASIDE, FOOTER, and NAV. The role of the
new page layout elements is to better describe specific parts of a document. In other words, the
new blocking elements in HTML5 approach HTML code in logical sections, or blocks.
Moreover, the FORM element of HTML5 enables us to add the following visual effects to Form
fields:
• Format the form for adding only telephone numbers.
• Allow a form field that is picking a web address to validate it against the client browser
history.
• Force a field to be the first default field in the form.
• Format a field to only accept valid e-mail addresses.
• Enable a field to pick from a calendar to choose a date.
 10

• Highlights fields that are required.

Blocking Content on the Web Page

The updated HTML5 structure is looking to more accurately describe areas of content on the
screen. We call it “blocking” in HTML5. We use blocking every time we develop web pages.
A role of HTML5 is to make syntax more meaningful. With this, we can leverage the new
ARTICLE element to block out the section of the web page of our main article. We can add
emphasis to specific content by applying the MARK element. We can even highlight the
date/time information within our HTML using the TIME element.
The new move to describing more accurately the web page content has several benefits. The first
is for search engines such as Google or Bing, which can use the blocked content to identify
regions on the web page. The second is within your company. It is simply easier to organize
content when we know what the content is.
The goal of HTML5 is to make searching, organizing, and sharing billions and billions of web
pages more easily. With HTML5, we are looking to place meaning to the content that we are
adding to the web page. Generally speaking, HTML5 allows us to block the overall content of a
web page and text-level content structure. These two levels of content structure will add meaning
to our web page.

Note:
Our simple DOCTYPE in HTML5 is: <!DOCTYPE html>

Using Block Elements to Organize Script

There are only few ways we can do to define content in HTML 4. The most common and
familiar is to use the P element to identify the start and end of a paragraph. The other one is the
DIV element to identify the start and end of a section of content. Unfortunately, these both
elements do not adequately describe the content.
With HTML5, the new SECTION element, clearly identifies a block of content. This is called
block level semantics. The SECTION element is part of a new set of elements that describe the
content on a web page. We can think of the SECTION element as enclosing a significant part of
a web page, in the same way that a chapter is a significant section of the book.
 11

The New and Common Elements in HTML5

Applying the HEADER and FOOTER Elements

The header and footer information is found on most web pages. The HTML5 allows this area of
content to be clearly identified as either a header or footer using the new HEADER and
FOOTER elements.
For example, we can assume that the header of National Bookstore web site can be look like the
following script:
.
.
<HEADER>
<SECTION> <a href=”/”> <img src=”/images/nbslogo.gif”
border=”none” alt=”National Bookstore logo”
title=”National Bookstore Home” />
</SECTION>
<a title=”Your cart’s icon”
href=”/cart.aspx”>Your Cart </a>
<a title = “Your profile icon”
href=”profile.aspx”>Your Profile </a>
</HEADER>
.
.
Here’s the actual National Bookstore web site below:

The FOOTER section to a web page is also viewed on most web pages. Assuming again, the
footer for National Bookstore could be like the following script:
.
.
<FOOTER>
 12

<P>Copyright 2012 National Bookstore, Inc. </P>

</FOOTER>
.
.
We can have a header and footer also that can be placed around the ARTICLE or SECTION
element if those pieces require specific header and footer content.

Applying the ASIDE Element

The role of the ASIDE element is to describe content that is related to but is not part of the main
content on the web page. We can think of the SIDE element as fitting the role of a side-bar
reference or an aside found in articles and books.
Here is our example:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>ASIDE Element Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<P>Oracle is the world’s largest business software company, with
more than 320,000 customers – including 100 of the Fortune 100 –
representing a variety f sizes and industries in more than 145
countries around the globe. </P>
<P>Thousands of large and midsize organizations from every industry
around the world use Oracle products to transform their businesses
and achieve greater success.</P>
<ASIDE>
<H1>What is Oracle Database? </H1>
<P>Oracle Database is the world's number one relational database
management system (RDBMS). </P>
</ASIDE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

You could observe that the main content of the web page and a support aside can be clearly
separated using the ASIDE element. However, we have to apply the CSS formatting to visually
show where the ASIDE is on the screen.
 13

Applying the NAV Element

The NAV is actually a navigation element of HTML5. Navigation is important to any web site.
The role of the NAV element is to clearly identify groups of links that when grouped together
form navigation. The different types of content that can be grouped together as navigation
include the following:
• Links that move you through data such as “Next” and “Previous” (Back page).
• Top-level links typically found in the top right corner of a web page.
• Links found in the footer of a web page.
Here is our example of navigation group using the NAV element:
.
.
<NAV>
<a href=”/homepage.htm”>Home</a>
<a href=”/contactus.htm”>Contact Us</a>
<a href=”/aboutus.htm”>About Us</a>
</NAV>
.
.

The Additional Text-level Semantics

The HTML5 version is expanding text-level semantic changes. The goal of these additional
elements is to clearly identify fundamental qualities such as emphasis, time, numbers, and
progress.

Using the MARK Element

We apply the MARK (M) element when we want to emphasize or highlight a particular part of a
section without formatting the text. Here is our example wherein we highlight or put an extra
emphasis to the acronym PSITE, as well as to the word: peer.

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>MARK Element Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<P>The <M>PSITE</M> tag-line is <M>Peer-to-PEER</M>.
The first <M>Peer </M> refers to us, colleagues, peers, not only
individuals but also institutions, helping one another to achieve a
 14

common goal.
The second <M>PEER</M> is a mnemonic. It stands for Partnership,
Education, Extension, and Research. </P>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

Warning!
Unless we apply the Cascading Style-Sheet (CSS) to the MARK element, we will not see the emphasis change on
the HTML on the screen.

Using the TIME Element

The TIME element identifies the text as being a measurement of time. We have here the
example below:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>TIME Element Example 1</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<P>
The above example script is quoted from the Message of Dr. Randy S.
Gamboa, PSITE National President, during the PSITE Region 3 General
Assembly on <TIME>July 23, 2010 </TIME>.
</P>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

The complete use of TIME element is to add a datetime attribute. Here is our example:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>DATETIME Attribute Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
 15

<P>
The PSITE President will deliver his keynote speech at
<TIME datetime="2010-07-23F 22:00:00>10:00 O'Clock in the morning
of July 23, 2010. </TIME>
</P>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

In the above example, the goal of the TIME element is to describe the date/time text on the
webpage.

Note:
PSITE stands for Philippine Society of IT Educators.

Using the METER Element

The METER element identifies a numeric value over a specific range. For example, we can use it
to identify the price for products or even a distance of the runner in a race. In the following
example, we can see that the price of super-food called Spirulina is a value with the METER
element wrapped around it:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>METER Element Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<P>
The super-food called Spirulina is going on sale everyday for the
unbelievable price of just <METER> P472.00 </METER> pesos.
Be a member now of the Century Chinese Drugstore to avail up to
20% discount in all Vigor Green products. See you there!
</P>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

The METER element has many additional attributes for showing a range in the value. We have
the following attributes: min, max, low, high, optimum, and value.
Here is our example that demonstrates the additional METER element attributes:
 16

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>METER Attribute Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<P>
The distance I run in the track and field was <METER value="200"
min="0" max="300" low="100" high="200" optimum="300">
200 meter-dash.</METER>
</P>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

The value attribute is the number of meters actually ran. The minimum attribute is the minimum
number of meter I can run, with the maximum number of meter is being 300. The low value is
the lowest number of meters actually run, and the high value represents the most meters ran.
Lastly, the optimum value represents the optimum number of meters.

Using the PROGRESS Element

The PROGRESS element represents the progress for an ongoing process. For example, we can
use this element if we are downloading an e-book, mp3 files, image, or video. Or the other way
around – uploading pictures at the Flickr or uploading e-books at scribd. This element has two
attributes: value and max. The value attribute is the current value for a download at this specific
point of time. The max attribute refers to the total value. For example, we can identify a
downloaded file in the following example:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>PROGRESS Element Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<P>
The downloading of file now is in progress. Please, don't interrupt
the downloading process. Thank you for your cooperation.
<PROGRESS value="345987" max="1000000"> 30% </PROGRESS>
 17

</P>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

Note:
We have to remember t that the PROGRESS element is, by itself, static. We will need to tie this element to a
JavaScript program to track the progress of what we are tracking.

Common HTML Tags

Originally, the <!DOCTYPE…> tag tells the web browser and validation services the HTML
version with which the document complies. This is in the case of older HTML such as version
3.2 and 4 which uses the Document Type Definition (DTD) element.
The <HTML> tag identifies the document as an HTML document. This is helpful to people who
read the HTML code.
The <HEAD> tag contains information about the document, including its title, scripts used, style
definitions, and document descriptions. Additionally, the <HEAD> tag can contain other tags
that have information for search engines such as Google and Bing, as well as indexing programs.
The <TITLE> tag briefly summarizes your document’s content.
The <BODY> tag encloses all the tags, attributes, and information that we want a visitor’s web
browser to display.
Lastly, the most common tags that we will use is the paragraph (P). To use the paragraph (P) tags
is easy. We simply put them around the text that we want to format as a paragraph. Here is the
paragraph (P) tags syntax:

<P>
A whole paragraph goes right here.
</P>

That’s the end of the overview of HTML5.

Five Simple Rules in Designing Web Site

It is a good idea for us to think first clearly before designing a web site. In this way, we can give
ourselves the needed direction which in return results to less reorganization of our web pages
later in our task. Here are the five simple rules to guide us below:

• Let us first figure out why we are creating the web site. What do we want to convey to
our audience?
 18

• Second, let us think about our audience. How can we tailor our content to appeal to our
targeted audience?
• How many web pages will we need? What sort of structure would we like it to have? Do
we want our visitors to go through our website in a particular direction, or do we want to
make it easy for them to explore in any direction?
• Like designing a gown for a beauty queen, we have to sketch our website on paper first.
• Lastly, let us devise a simple and consistent naming convention (such as filenames) for
our web pages, images, and other external files.
 19

Chapter 2
Learning Blocking Elements

With HTML5, we have several elements that block content. These elements are
SECTION, ARTICLE, HEADER, FOOTER, ASIDE, FIGURE, and NAV. The new names for
each of these elements identify the type of content they block on a web page.

Example 1:

Design and develop an HTML script that will display the given web page content. Apply the
SECTION element. Follow the design specification below:

Oracle is the world’s largest business software company, with more than
320,000 customers – including 100 of the Fortune 100 – representing a
variety of sizes and industries in more than 145 countries around the
globe.

Thousands of large and midsize organizations from every industry around

the world use Oracle products to transform their businesses and achieve
greater success.

• World’s number 1 database

• World’s number 1 application platform suites

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>SECTION Element Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<P>Oracle is the world’s largest business software company, with
more than 320,000 customers – including 100 of the Fortune 100 –
representing a variety f sizes and industries in more than 145
countries around the globe. </P>
</ARTICLE>
<ARTICLE>
<P>Thousands of large and midsize organizations from every industry
 20

around the world use Oracle products to transform their businesses

and achieve greater success.</P>
</ARTICLE>
<UL>
<LI>World’s number 1 database </LI>
<LI>World’s number 1 application platform suites </LI>
</UL>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: section1.htm.

3. To run the script, double-click the section1.htm file with the big E icon.

Sample Output (Partial):

Explanation:

We can see clearly that the two paragraphs, wrapped in the <P> element, and the two bullet
points are part of the same content wrapped in the SECTION element. In short, the SECTION
element is an efficient way to organize content in our script.
We also applied here the unordered list (<UL> and <LI>) tags which provide information in a
structured and easy-to-read format.

Note:
NAV means NAVigation in HTML5 application.

Example 2:

Design and develop an HTML script that will display the given web page content. Apply the
ARTICLE element. Follow the design specification below:
 21

Introduction To HTML5
June 15, 2011 by Copernicus Pepito

This book will teach you how to learn HTML5

in an easy way. Nothing less!

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>ARTICLE Element Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H1>Introduction To HTML5 </H1>
<P><TIME>June 15, 2011 </TIME>by Copernicus Pepito</P>
<P>This book will teach you how to learn HTML5 in an easy way.
Nothing less! </P>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: article1.htm.

3. To run the script, double-click the article1.htm file with the big E icon.

Sample Output (Partial):

 22

Explanation:

The ARTICLE element is used to clearly identify content in a web page. We can consider
“blogs” as good example where content is clearly identified. The main section of a web page is
the content that we can wrap using the ARTICLE element. We can have additional elements that
we can include within an ARTICLE element. Let us remember always that more than one
ARTICLE can be added to a web page. We should think of the ARTICLE element as a tool that
logically breaks up content. Similar content separated by the ARTICLE element can be
contained within a SECTION element.
We applied here also the heading (<H1>) tags that display our topic in bigger letters.

Example 3:

Design and develop an HTML script that will display the given web page content. Apply the
DIALOG element. Follow the design specification below:

Jenjen Tagalog
How old are you and what is your business?
Coper Pepito
I’m 39 and has a monkey-business.
Jenjen Tagalog
You’re such a comedian! Aren’t you?
Coper Pepito
Not really. But if you want to buy a monkey from me,
I’ll give you a discount!
Jenjen Tagalog
Ha! Ha! Ha!
Coper Pepito

I love the way you laughed, Jenjen. By the way, here are some
things I’d like to tell you:

• You have the most beautiful eyes I had ever seen.

• You are the prettiest girl I had ever met.
 23

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>DIALOG Element Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<DIALOG>
<DT>Jenjen Tagalog </DT>
<DD>How old are you and what is your business? </DD>
<DT>Coper Pepito </DT>
<DD>I'm 39 and has a monkey-business. </DD>
<DT>Jenjen Tagalog </DT>
<DD>You're such a good comedian! Aren't you??? </DD>
<DT>Coper Pepito </DT>
<DD>Not really. But if you want to buy a monkey from me,
I'll give you a discount! </DD>
<DT>Jenjen Tagalog </DT>
<DD> Ha! ha! ha! </DD>
<DT>Coper Pepito </DT>
<DD><P>I love the way you laughed, Jenjen. By the way,
here are some things I'd like to tell you: </P>
<UL>
<LI>You have the most beautiful eyes I had ever seen. </LI>
<LI>You're the prettiest girl I had ever met. </LI>
</UL>
</DD>
</DIALOG>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: dialog1.htm.

3. To run the script, double-click the dialog1.htm file with the big E icon.

Sample Output:
 24

Sidebar:
See? I told you so. I knew how to court a girl! After my losing-streak with Susan and Bianca, I’m now winning with
Jenjen. That’s life! Sometimes you lose…sometimes you lose again. But if you keep on trying, winning is just
around the corner. So, keep on trying, buddy.
By the way, in reality, I’m losing a dozen times…or honestly a dozen of dozen times (I can’t remember exactly).
But it’s not about the numbers of failures. It’s about winning the very best…the very best girl I ever had. I hope so.

Explanation:

We knew that comments and conversation (chatting) are commonplace on the Internet web. The
DIALOG element allows us to identify conversation on a screen. We have here the three main
parts of a DIALOG element:
• The wrapping DIALOG element that identifies a conversation.
• A DT element that identifies the speaker.
• A DD element that identifies the conversation.
Each new conversation starts with a DT element that identifies the speaker.
We can also observed here in our script that we can add other HTML elements within the DD
DIALOG element such as paragraph, list, or even an article.
 25

Note:
DT is a list tag that identifies definition terms.
DD is a list tag that identifies definitions.
DL is a list tag that specifies that the information appear as a definition list.

Example 4:

Design and develop an HTML script that will display the given web page content. Apply the
FIGURE element. Follow the design specification below:

Figure 1.5 Using the Figure Element

Cat’s image
should be
displayed here

Note:
Get the cat’s image from Microsoft Office 2007 (or probably other version), in ClipArt folder,
and in PUB60COR sub-folder. The filename is: J0099165.JPG. The Microsoft Office 2007 is
under the Program Files folder.

Tip:
Just press the Ctrl-F keys in the keyboard to search the needed filename in an instant!

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>FIGURE Element Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<FIGURE>
<LEGEND>Figure 1.5 Using the FIGURE Element </LEGEND>
<IMG ALT="The FIGURE element is another example
of block semantics in HTML5 scripting"
SRC="J0099165.JPG" WIDTH="220" HEIGHT="150" BORDER=1>
</FIGURE>
</ARTICLE>
</SECTION>
 26

</BODY>
</HTML>

2. Now save the script with the filename: figure1.htm.

3. To run the script, double-click the figure1.htm file with the big E icon.

Sample Output (Partial):

Explanation:

We knew that inserting images or pictures into a web page is a common practice. However, in
previous version of HTML (HTML 4 or below), identifying the image and supporting text as a
figure is much more difficult. The HTML5’s FIGURE element clearly identifies an image and
supporting description as being part of a set. This set is called a figure group. This further means
that the FIGURE element is a method of blocking related content with itself. You can also add
other elements to use within it. Take note also that the LEGEND element identifies the text that
is to be associated with the image. We can also use the FIGURE element many times in our web
page.

Example 5:

Design and develop an HTML script that will display the given web page content. Apply the
FOOTER element together with the copyright symbol element. Follow the design specification
below:

Copyright © 2012 National Bookstore, Inc.

 27

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>FOOTER Element Example</TITLE>
</HEAD>
<BODY>
<SECTION>
</ARTICLE>
<FOOTER>
<P>Copyright &copy; 2012 National Bookstore, Inc. </P>
</FOOTER>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: footer1.htm.

3. To run the script, double-click the footer1.htm file with the big E icon.

Sample Output:

Explanation:

We have a very simple example about the FOOTER element wherein we wrapped the copyright
statement within it. Now, to display the copyright symbol, we apply the &copy; syntax. This is
how simple it is!

Example 6:

Design and develop an HTML script that will display the given web page content. Apply the
FOOTER and MARK elements together with the copyright symbol element. Follow the design
specification below:
 28

Flower image should be

displayed here.

J0145168.JPG

We are continually amazed at the beautiful and lovely flowers that

can be found in the CLIPART folder of Microsoft Office 2007.
They are so very attractive that we cannot resist putting them right
here in our web page. They are what the girl's want to receive.

©2007 Microsoft Corporation.

Note:
Get the cat’s image from Microsoft Office 2007 (or probably other version), in ClipArt folder,
and in PUB60COR sub-folder. The filename is: J0145168.JPG. The Microsoft Office 2007 is
under the Program Files folder.

Tip:
Just press the Ctrl-F keys in the keyboard to search the needed filename in an instant!

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>COPYRIGHT Symbol Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<IMG SRC="J0145168.JPG" ALT="Flowers(MS Office 2007)
WIDTH="300" HEIGHT="175" />
<P>
We are continually amazed at the beautiful and lovely flowers that can
be found in the CLIPART folder of Microsoft Office 2007.
They are so very attractive that we cannot resist putting them right
here in our web page.
They are what the girl's want to <M>receive.</M>
</P>
</ARTICLE>
 29

<FOOTER>
<P>&COPY; 2007 Microsoft Corporation.</P>
</FOOTER>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: mark2.htm.

3. To run the script, double-click the mark2.htm file with the big E icon.

Sample Output:

Explanation:

In this example, we found out that although we want to emphasize the word “receive” by using
the MARK (M) element, it has no effect whatsoever. This is because the MARK element will
only take effect on our web page when we format it with CSS.

Note:
CSS means Cascading Style Sheet, which offer great formatting capabilities for our web page to become more
attractive and appealing to our website visitors.
 30

Common Character-Formatting Tags

Character Tag & Its Effect

<B> Applies boldface.

<I> Applies italic.
<U> Applies underline.
<SUB> Format text as subscript.
<SUP> Format text as superscript.
<STRONG> Applies strong emphasis; usually displayed as bold.
<EM> Applies emphasis; usually displayed as italic.
<CITE> Indicate citations or references.
<BLINK> Makes text blink.

Example 7:

Design and develop an HTML script that will display the given web page content. Apply the
FOOTER and MARK elements together with the copyright symbol element. Then add some
specified common character-formatting tags. Follow the design specification below:

Flower image should be

displayed here.

J0145168.JPG

We are continually amazed at the beautiful and lovely flowers that

can be found in the CLIPART folder of Microsoft Office 2007.
They are so very attractive that we cannot resist putting them right
here in our web page. They are what the girl's want to receive.

©2007 Microsoft Corporation.

Note:
Get the cat’s image from Microsoft Office 2007 (or probably other version), in ClipArt folder,
and in PUB60COR sub-folder. The filename is: J0145168.JPG. The Microsoft Office 2007 is
under the Program Files folder.

Tip:
Just press the Ctrl-F keys in the keyboard to search the needed filename in an instant!
 31

Character-formatting specifications:

The word beautiful is displayed in bold.

The word lovely should be displayed as italic.
The words Microsoft Office 2007 should be displayed as underlined.
Then, let the word CLIPART to blink.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Character-Formatting Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<IMG SRC="J0145168.JPG" ALT="Flowers(MS Office 2007)
WIDTH="300" HEIGHT="175" />
<P>
We are continually amazed at the <B>beautiful</B> and
<I>lovely</I> flowers that can
be found in the <BLINK>CLIPART</BLINK> folder of
<U>Microsoft Office 2007</U>.
They are so very attractive that we cannot resist putting them right
here in our web page.
They are what the girl's want to <M>receive.</M>
</P>
</ARTICLE>
<FOOTER>
<P>&COPY; 2007 Microsoft Corporation.</P>
</FOOTER>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: mark3.htm.

3. To run the script, double-click the mark3.htm file with the big E icon.

Sample Output:
 32

Explanation:

As you could noticed in our script above, that in order to display the word “beautiful” in
boldface, we have to surround it with the starting <B> tag and ending </B> tag. The same also
with the word “lovely”, in order to display it in italic, we have to surround it with the starting <I>
tag and ending </I> tag. Other tags that we applied here in our script are self-explanatory. Isn’t
it, buddy? Yes, you have to agree. Right?

Example 8:

Design and develop an HTML script that will display the given web page content. Apply the
superscript <SUP> tags and subscript <SUB> tags. Follow the design specification below:

Let us have some fun with formulas now!

E = mc2 is the famous equation formulated by

Albert Einstein.

St = S1+S2+S3+Sn is the summation of all S1 up to

Sn.

Got it?
 33

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Superscript & Subscript Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
Let us have some fun with formulas now!
<P>
E=mc<SUP>2</SUP> is the famous equation formulated
by Albert Einstein.
</P>
<P>
S<SUB>t</SUB>=S<SUB>1</SUB>+S<SUB>2</SUB>+
S<SUB>3</SUB>+S<SUB>n</SUB>
is the summation of all S<SUB>1</SUB> up to
S<SUB>n</SUB>.
</P>
Got it?
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: superscript1.htm.

3. To run the script, double-click the superscript1.htm file with the big E icon.

Sample Output:
 34

Explanation:

As you could noticed in our script above, that in order to display the number 2 as a superscript in
the famous equation of Albert Einstein, we surrounded it with the <SUP> and </SUP> tags:
.
E=mc<SUP>2</SUP>
.
The same also with the numbers and letters in our summation equation wherein we have to
display them as subscripts. We simply surrounds those numbers and letters with the <SUB> and
</SUB> tags:
.
S<SUB>t</SUB>=S<SUB>1</SUB>+S<SUB>2</SUB>+
S<SUB>3</SUB>+S<SUB>n</SUB>
.
Got it, buddy? I believe so.

Applying Common Tags and Attributes

In this section we will learn how heading <H1> and </H1> tags work. Plus, we will also learn
how to add colors to the text or to the background color. Then, we will also learn how to specify
fonts and font sizes. So, what are we waiting for! Let us see them now in action!!! No more, no
less.

Sample 1:

This HTML script will demonstrate how the heading <H> tag actually works. We have here the
three levels of heading tags which are the only recommended levels.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Headings Sample 1</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
Reccommended levels of headings:
<BR>
<H1>1st Level Heading </H1>
<H2>2nd Level Heading </H2>
<H3>3rd Level Heading </H3>
</ARTICLE>
</SECTION>
 35

</BODY>
</HTML>

2. Now save the script with the filename: heading1.htm.

3. To run the script, double-click the heading1.htm file with the big E icon.

Sample Output:

Explanation:

The most important thing to remember when applying headings to our web page is to limit
ourselves to two or three heading levels. After three heading levels, many visitors in our web site
begin to lose track of our design and presentation hierarchy. Additionally, let us use heading tags
for document headings only. This means that the heading tags should not be used to emphasize
some information within text (like the way we use the <B> tag for boldface or <I> tag for italic)
or for figure captions.
So what does the heading tags really do? Heading tags break up large areas of text, announces
topics to follow, and arrange information according to a logical hierarchy. Actually, HTML
provides six levels of headings; <H1> is the largest of the headings, and <H6> is the smallest.

Sample 2:

This HTML script will demonstrate how the heading <H> tag actually works. We have here the
aligning or centering of headings in action.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Headings Sample 2</TITLE>
 36

</HEAD>
<BODY>
<SECTION>
<ARTICLE>
Aligned or Centered Heading Demonstration:
<BR>
<H3 ALIGN="left">Left-Aligned Heading </H3>
<H3 ALIGN="center"> Centered Heading </H3>
<H3 ALIGN="right">Right-Aligned Heading </H3>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: heading2.htm.

3. To run the script, double-click the heading2.htm file with the big E icon.

Sample Output:

Explanation:

The ALIGN=”left” heading attribute aligns the heading in the left corner of the web page, which
also served as the default alignment of headings. The ALIGN=”center” heading attribute aligns
the heading in the center part of the web page, while the ALIGN=”right” heading attribute aligns
the heading in the left corner of the web page.
To use the alignment heading attributes, we simply include them in the initial heading tag. Very
simple, isn’t it?

Sample 3:

This HTML script will demonstrate how we can apply colors to the text in our web page.

Solution:

1. At the Microsoft Notepad, write the following script:

 37

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Header & Color Tags</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H2><FONT COLOR="green"> Beautiful Flowers </FONT></H2>
<IMG SRC="J0145168.JPG" ALT="Flowers(MS Office 2007)
WIDTH="300" HEIGHT="175" />
<P>
We are continually amazed at the <B>beautiful</B> and
<I>lovely</I> <FONT COLOR="red"> flowers </FONT> that can
be found in the <BLINK>CLIPART</BLINK> folder of
<U>Microsoft Office 2007</U>.
They are so very attractive that we cannot resist putting them right
here in our web page.
They are what the <FONT COLOR="pink"> girl's </FONT> want to <M>receive.</M>
</P>
</ARTICLE>
<FOOTER>
<P> <FONT COLOR="blue"> &COPY;2007 Microsoft Corporation. <FONT/> </P>
</FOOTER>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: color1.htm.

3. To run the script, double-click the color1.htm file with the big E icon.

Sample Output:
 38

Explanation:

We assigned a green color for our heading (<H2> and </H2> tags) which we titled as “Beautiful
Flowers”. Then we assigned a red color for the word “flowers”, pink color for the word “girl’s”
and blue color for the words “Microsoft Corporation”. We do it simply with the <FONT
COLOR=”color-name”> and </FONT> tags. If we know the syntax, coloring the text is so very
easy. Isn’t it?
 39

LAB ACTIVITY
TEST 1

1. Design and develop an HTML script that will display the given web page content. Apply
the SECTION and ARTICLE element. Follow the design specification below:

Philippine Society of Information Technology

Educators (PSITE)
General Objective
The general objective of this society shall be the promotion of quality
Information Technology (IT) Education.

Specific Objective
This society shall serve as a venue for the optimization and development
of faculty members, curricula projects, research, resources, linkages, and
assistance in policy formulation related to IT education.

Types of Membership
• Institutional Membership
• Individual Membership
• Honorary Membership

2. Design and develop an HTML script that will display the given web page content. Apply
the DIALOG element with the FOOTER element and a superscript for trademark ™ of
Forbes.com. Follow the design specification below:

Additional Requirements:

a. The first Elizabeth Corcoran and www.Teach12.com should be underlined. Plus the
www.Teach12.com should have a text color of blue.
b. The Who’s Teaching Your Children should be written as italic.
c. The copyright symbol: © and trademark symbol: ™ should appear as a FOOTER
element.
d. The date and time: 06.23.08 6:00 P.M. ET should be formatted as TIME datetime tags
together with “Date: June 23, 2008”.
 40

Bill Gates Unfiltered

(An Interview with Forbes.com Correspondent Elizabeth Corcoran, on
06.23.08 6:00 P.M. ET)
Date: June 23, 2008

Elizabeth Corcoran:
What’s been Microsoft’s biggest innovation?

Bill Gates:
The most innovative thing in our industry was the idea of
creating a software industry around the personal computer.

Elizabeth Corcoran:
What are you reading these days?

Bill Gates:
I read a lot. I read Who’s Teaching Your Children? That was
super-good. And all these disease books.

Elizabeth Corcoran:
Is it OK not to be the richest man anymore?

Bill Gates:
Sure. I gave $36 Billion to my foundation. That’s how I did it,
right? So obviously, I don’t care.

Elizabeth Corcoran:
You’re taking classes online?

Bill Gates:
I love the lectures that are showing for free online—and some
you can buy commercially at www.Teach12.com. Some of these lectures
are incredible, very high quality.
In terms of the free stuff, MIT has physics classes that are very well
known by [Walter] Lewin, and [Eric] Lander on biology. And there’s a
chemistry course by Don Satterway that is very, very good.

Elizabeth Corcoran:
And what’s your prediction about a new device we’ll be using
10 years from now?

Bill Gates:
The student tablet, where you don’t have any more textbooks.
Interactive information, and you’re collaborating in a new way. That’s
one that I’m very passionate about.

Footnote:
This interview was conducted just a week before Bill Gates stepped down as Chairman of
the Board of Microsoft Corporation, at age 52. The legendary entrepreneur and
technologist will focus all his energy in his own foundation, the Bill and Melinda Gates
Foundation.

© 2010 Forbes.com LLC™ All Rights Reserved

 41

As a Reminder:
In 2008, Bill Gates was dropped to third as the world’s richest man after reigning that honor for 13 years. It seems
that number 13 is the unlucky number of Bill Gates (opinion is only mine). His net worth on that year is only $58
Billion. The second richest man during that year was Carlos Slim Hleu, whose net worth is $60 Billion. He is a
Mexican telecommunication mogul. Though his middle name is “Slim”, but I think he is “Fat” (this is just my joke
only thing). And the richest man for the first time is Bill Gates’ close and best friend: Warren Buffet, the legendary
investor whose net worth during that year is $62 Billion. Ironically, this happens just a year or two when Warren
Buffet pledged to donate 96 percent of his net worth to a foundation headed by Bill Gates. What a coincidence? Or
is this really the great secret of stupendous financial success? That in order to be very very rich, you have to give
“very, very much”. No wonder only few achieved such great wealth, for it is not easy to give, only easy to receive.
Joke only. After Warren Buffet, Carlos Slim Hleu became the richest man in the world. What is so ironic about this
man is that he had already established a charitable foundation in the early 80’s when Bill Gates had just started
engaging in software business. I think this is no coincidence. The people who give much, also get so much wealth in
return. As what the late Sam Walton (founder of WalMart) once said, “The more you give, the more you get.” Well,
take it from the man who during his time is the world’s richest man.

3.Design and develop an HTML script that will display the given web page content. Add some
specified common character-formatting tags and coloring of text tags. Follow the design
specification below:

February 14 – Valentine’s Day

Roses, Angel, and Heart-
shape should be displayed
here.

J0384888.JPG

Everybody knew that Valentine’s is a very special day for lovers

around the world. This is the day when the roses are sold like gold.
And chocolates are bought like “hot pandesals”. But do you really
believe in true love? Even when you were hurt a thousand times,
and dumped a thousand times more? Yes, it’s true, LOVE really
exist! And you know where? At the scoreboard in a tennis court.
Agree? You don’t have to. Joke only.

Note:
Get the cat’s image from Microsoft Office 2007 (or probably other version), in ClipArt folder,
and in PUB60COR sub-folder. The filename is: J0384888.JPG. The Microsoft Office 2007 is
under the Program Files folder.

Tip:
Just press the Ctrl-F keys in the keyboard to search the needed filename in an instant!

Character-formatting specifications:
 42

February 14-Valentine’s Day should be formatted as <H2> heading tags.

The word Valentine’s is displayed in bold.
The words roses and chocolates should be displayed as underlined.
The text roses should be colored as red.
The text chocolate should be colored as brown.
The word true love should be displayed as italic.
Then, let the word LOVE to blink and its color should be red.
 43

Chapter 3
Using Lists
Lists are often easier to read than paragraphs. They are also a great way to provide information in
a structured, easy-to-read format. Furthermore, they help our visitor to easily spot information,
and they draw attention to important information. Lists come in two varieties: numbered
(ordered) and bulleted (unordered).
To use a list, we first specify that we want information to appear as a list, and then we identify
each line-item in the list. Let us now have our working script for this list element.

List Tag & Its Effect

<UL> Specifies that the information appear as an unordered (bulleted) list.

<OL> Specifies that the information appear as an ordered(numbered) list.
<LI> Specifies a line item in either ordered or unordered lists.

Example 1:

Design and develop an HTML script that will show the advantage of the list tags over the
paragraph tags. Follow the design specification below:

Information in a Paragraph Presentation

Presenting information in a paragraph form is not nearly as
effective as putting the same information using a list element.
By chunking information into a list, we make the information
easier to read, easier to find, more attractive and more
presentable.

Information in a List Presentation

Presenting information in a paragraph form is not nearly as
effective as putting the same information using a list element.
By chunking information into a list, we make the information

• easier to read
• easier to find
• more attractive
• more presentable

Agree? You have to!

 44

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>List Element Example 1</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H3>Information in a Paragraph Presentation </H3>
<P>
Presenting information in a paragraph form is not nearly as effective
as putting the same information using a <B>list</B> element.
By chunking information into a list, we make the information easier to
read, easier to find, more attractive and more presentable.
</P>

<H3>Information in a List Presentation </H3>

<P>
Presenting information in a paragraph form is not nearly as effective
as putting the same information using a <B>list</B> element.
By chunking information into a list, we make the information
<UL>
<LI>easier to read
<LI>easier to find
<LI>more attractive
<LI>more presentable
</UL>
</P>
Agree? You have to!
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: list1.htm.

3. To run the script, double-click the list1.htm file with the big E icon.

Sample Output:
 45

Explanation:

We have here the comparison of information that is presented using the paragraph tags, then we
have the equivalent presentation using the list element.
To use a list, we first specify that we want information to appear as a list. This is the very reason
why we have the <UL> and </UL> tags for the list. Then we identify each line item in the list by
preceding each item with the <LI> tag. Very simple, isn’t it?

Example 2:

Design and develop an HTML script that will show the UnOrdered List and Ordered List. Follow
the design specification below:
 46

UnOrdered List
• Kambing
• B aka
• Kalabaw
• Baboy

Ordered List
1. Kambing
2. Baka
3. Kalabaw
4. Baboy

See? I listed above all your favorite foods!

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Ordered & UnOrdered Lists</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H3>UnOrdered List</H3>
<UL>
<LI>Kambing
<LI>Baka
<LI>Kalabaw
<LI>Baboy
</UL>
<H3>Ordered List</H3>
<OL>
<LI>Kambing
<LI>Baka
<LI>Kalabaw
<LI>Baboy
</OL>
See? I listed above all your favorite foods!
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: list2.htm.

3. To run the script, double-click the list2.htm file with the big E icon.
 47

Sample Output:

Explanation:

We have here the presentation of unordered (bulleted) list and ordered (numbered) list.
The unordered or bulleted list is so easy to present because we just simply put the <UL> and
</UL> tags. Then, the ordered or numbered list is equally easy also because we just put the
<OL> and </OL> tags. No hassle!

Setting List Appearance Differently

By default, bulleted lists use small and rounded bullets, while the numbered lists use
Arabic numerals. We can change the appearance of these lists by using list attributes.

More of the List Tag & Its Effect

a.) For numbered list:

TYPE=A Specifies the alphabetical letter or number with which the list should start:
A, a, or 1(default). Or even capital letter I or lowercase letter i for roman numerals
format.

TYPE=a
 48

TYPE=A
TYPE=i
TYPE=I
TYPE=1

b.) For bulleted list:

TYPE=CIRCLE
TYPE=SQUARE
TYPE=DISC Specifies the bullet shape (default).

Example 3:

Design and develop an HTML script that will set the list appearance differently using different
list attributes. Follow the design specification below:

A. Outlines apply sequential lists with letters.

B. As well as unpopular number schemes for
documentation.

Use square bullets for non-sequential items

sometimes?
Use numbers for sequential items often.

Use circle bullets for non-sequential items?

• Use disc bullets for visual interest, always.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>List Attributes</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Demonstrating Different List Attributes</H3>

<OL TYPE="A">
<LI>Outlines apply sequential lists with letters.
<LI>As well as unpopular number schemes for documentation.
</OL>

<UL TYPE="square">
<LI>Use square bullets for non-sequential items sometimes?
 49

<LI>Use numbers for sequential items often.

</UL>

<UL>
<LI TYPE="circle">Use circle bullets for non-sequential items?
<LI TYPE="disc">Use disc bullets for visual interest, always.
</UL>

</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: list3.htm.

3. To run the script, double-click the list3.htm file with the big E icon.

Sample Output:

Other Options for Ordered Lists

In reality, ordered lists have additional attributes that we can apply to specify the first number in
the list, as well as to create hierarchical presentation of information.
Like for example, we can start a numbered list with a value other than 1 which is the default or
other than letters such A, a, I, or i. We will simply include the START= attribute in the initial
<OL> tag, as in <OL START=11>. Or, we can change even the specific numbers within a list by
using the VALUE= attribute in the <LI> tag, as in <LI value=9>. To use these attributes, we
will include them in the <OL> tag.
 50

Furthermore, we can use nested ordered lists and different TYPE= attributes to create outlines.
The numbering continues past each lower-level section without the need to manually renumber
with a VALUE= attribute.
Let us have a working script for this other options of ordered lists to understand it better.
Because there is no substitute of a real action. Isn’t it?

Sample 1:

This HTML script will demonstrate how the list element works. We are applying here the other
options for ordered lists.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Other Options for Ordered Lists</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H3>Other Options for Ordered Lists</H3>
<OL START="11">
<LI>This is the eleventh item.
<LI>And this is the twelfth item.
<LI TYPE="I" VALUE="9">This item was renumbered to be the ninth,
using uppercase roman numerals. Can you see it?
</O>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: list4.htm.

3. To run the script, double-click the list4.htm file with the big E icon.

Sample Output:
 51

Explanation:

See? We can really start a numbered list other than 1 or letter A. We just simply include the
START= attribute in the initial <OL> tag, as in <OL START=”11>.
We can even change the specific numbers within a list by using the VALUE= attribute in the
<LI> tag, as in <LI value=”9”>.

Example 4:

Design and develop an HTML script that will show the nested ordered lists. Follow the design
specification below:

Ordered Lists Demonstration

I. Top Level Item
II. Another Top Level Item
A. A 2nd Level Item
B. Another 2nd Level Item
1. A 3rd Level Item
2. Another 3rd Level Item
C. Another 2nd Level Item again?
III. A Top Level Item again!

This is a Sample Outline

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
 52

<HEAD>
<TITLE>Nested Ordered Lists</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H3>Ordered Lists Demonstration</H3>
<OL TYPE="I">
<LI>Top Level Item
<LI>Another Top Level Item
<OL TYPE="A">
<LI>A 2nd Level Item
<LI>Another 2nd Level Item
<OL TYPE="1">
<LI>A 3rd Level Item
<LI>Another 3rd Level Item
</OL>
<LI>Another 2nd Level Item again?
</OL>
<LI>A Top Level Item again!
</OL>
This is a <B>Sample Outline</B>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: list5.htm.

3. To run the script, double-click the listt5.htm file with the big E icon.

Sample Output:
 53

Explanation:

We applied here the nested ordered lists.

Try to observe and analyze our ordered lists demonstration above. You will notice that the top
level item is in roman numerals wherein we format them with <OL TYPE=”I”> tag. Now, in
our second level, we used the alphabetical letters which we format them using <OL
TYPE=”A”> tag. Lastly, in our third level item, we format them with <OL TYPE=”1”> tag to
display the numbered list in decimal number representation. This is how to generate roman
numerals, alphabetical orders, and decimal number representation of our ordered list. Got it?
Take note also the way we code our script, wherein we structure it strategically. In this way, we
can easily read our script and insert additional code easily.

Using Definition Lists

The definition list can be useful for providing two levels of information. We can think of
definition lists as dictionary entries – we have two levels of information: the entry, followed by a
definition. We can use these lists to provide glossary-type information, or we can use them to
provide two-level lists.

List Tag & Its Effect

<DL> Specifies that the information appear as a definition list.

<DT> Identifies definition terms.
<DD> Identifies definitions.

Example 5:

Design and develop an HTML script that will show the application of definition lists. Follow the
design specification below:

Definition Lists Demonstration

HTML
Hypertext Markup Language is used for building
Web pages.
CSS
Cascading Style Sheets associate look or formatting to a
particular piece of content in a document.
Web Development
Describes the overall process of planning and putting
together a web site.
 54

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Definition Lists</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H3>Definition Lists Demonstration</H3>
<DL>
<DT>HTML
<DD>Hypertext Markup Language is used for building Web pages.
<DT>CSS
<DD>Cascading Style Sheets associate look or formatting to a
particular piece of content in a document.
<DT>Web Development
<DD>Describes the overall process of planning and putting
together a web site.
</DL>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: list6.htm.

3. To run the script, double-click the listt6.htm file with the big E icon.

Sample Output:
 55

Explanation:

You will notice here in our output above that the definition lists are a formatting option that is
useful when presenting dictionary-like information. We simply write <DL> tag to start the
definition list. Then we add the <DT> tag to identify definition terms. Lastly, we add the <DD>
tag to identify individual definitions. This is very simple and straightforward.
 56

LAB ACTIVITY
TEST 2

1.Design and develop an HTML script that will show the advantage of the list tags over the
paragraph tags. Follow the design specification below:

How Do I Love Thee

How do I love thee, let me count the way. I love you because
you love me…you love my dog, and most of all – you love me
even if I forgot our anniversary this year!
Kailan nga ba yun?

How Do I Love Thee

How do I love thee, let me count the way. I love you because

• you love me
• you love my dog
• and most of all – you love me even if I forgot our
anniversary this year!

Kailan nga ba yun?

2.Design and develop an HTML script that will show the UnOrdered List and Ordered List.
Follow the design specification below:

My Ideal Girl
• sweet
• funny
• thoughtful
• smart

My Priority List in Life

1. Study
2. Work
3. Marry

How about your ideal girl?

 57

3.Design and develop an HTML script that will set the list appearance differently using different
list attributes. Follow the design specification below:

Use square bullets for non-sequential items

sometimes?
Use numbers for sequential items often.

Use circle bullets for non-sequential items?

• Use disc bullets for visual interest, always.

A. Outlines apply sequential lists with letters.

B. As well as unpopular number schemes for
documentation.
C. This is how we can format different appearance of a
list.

4.Design and develop an HTML script that will show the nested ordered lists. Follow the design
specification below:

Ordered Lists Formatting

I. Top Level Item
II. Another Top Level Item
D. A 2nd Level Item
E. Another 2nd Level Item
3. A 3rd Level Item
4. Another 3rd Level Item
F. Another 2nd Level Item again?
III. A Top Level Item again!
IV. This is the fourth Top Level Item.

5.Design and develop an HTML script that will show the application of definition lists. Follow
the design specification below:

Computer Jargon
Bug
An error in a computer program.
Boot
To start a computer.
Web
The Internet.
 58

Chapter 4
Designing HTML Tables
The HTML Tables are simply grids made up of rows and columns. These rows and columns
create individual cells that can contain either text or images. We have to remember that HTML
tables serve two functions. First, they help present complex data in a readable format. Second,
we can use tables to incorporate more sophisticated design elements into Web pages.
Let us have our example about this HTML table.

Common Table Tag & Its Use

<TABLE> Marks a table within an HTML document.

<TR> Marks a row within a table.
<TD> Marks a cell (table data) within a row.
<TH> Marks a heading cell within a row.

Example 1:

Design and develop an HTML script that will demonstrate the application of HTML Table.
Follow the design specification below:

Sample Table

Local Term Description

Petso Chicken Breast

Paa Chicken Thigh
Pakpak Chicken Wings

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 1</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
 59

<H3>Sample Table</H3>
<TABLE>
<TR>
<TH>Local Term</TH>
<TH>Description</TH>
</TR>
<TR>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table1.htm.

3. To run the script, double-click the table1.htm file with the big E icon.

Sample Output:

Explanation:

First, we mark the heading cell within a row using the <TH> tag, as you could observe in our script
below:
.
.
<TR>
<TH>Local Term</TH>
 60

<TH>Description</TH>
</TR>
.
.
Then, we mark a cell (table data) within each row using the <TD> tag, as you can observe again in our
script below:
.
.
<TR>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
</TR>
.
.
Think and analyze the effect of our <TR> tag. You will realize that this is simply marking a row within
our table.

Example 2:

Design and develop an HTML script that will demonstrate the application of HTML Table. This
time, with one row data added. Follow the design specification below:

Sample Table

Local Term Description

Petso Chicken Breast

Paa Chicken Thigh
Pakpak Chicken Wings
Leche Flan Egg with Milk

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
 61

<HTML>
<HEAD>
<TITLE>HTML Table Example 2</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE>
<TR>
<TH>Local Term</TH>
<TH>Description</TH>
</TR>
<TR>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
</TR>
<TR>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table2.htm.

3. To run the script, double-click the table2.htm file with the big E icon.

Sample Output:
 62

Explanation:

To add a row in our table is “chicken” (very simple). We will simply insert an additional <TR>
and <TD> tags where we want the row to appear. Since we add a row at the bottom part of our
table, thus we have the following script:
.
.
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
</TR>
<TR>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
</TR>
.
.

Example 3:

Design and develop an HTML script that will demonstrate the application of HTML Table. This
time, add a column into it. Follow the design specification below:

Sample Table

Local Term Description Classification

Petso Chicken Breast Main Dish

Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Leche Flan Egg with Milk Dessert

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
 63

<HTML>
<HEAD>
<TITLE>HTML Table Example 3</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE>
<TR>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table3.htm.

3. To run the script, double-click the table3.htm file with the big E icon.

Sample Output:
 64

Explanation:

Adding a column into our table is somewhat harder compared to adding rows because we have to
add a cell to each row. The general process, however, is the same – we insert the tags where we
want the new column to appear, either to the right or the left of existing columns or even
somewhere in between. In our example above, we added a new column at the right end of the
sample table by adding <TH> tags to the top row and by adding <TD> tags to each of the other
rows. We can highlight the new added scripts in boldface (with an arrow pointed to it), as you
could observe them below:
.
.
<TR>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Leche Flan</TD>
 65

<TD>Egg with Milk</TD>

<TD>Dessert</TD>
</TR>
.
.
With this presentation of our script, we can easily visualize, analyze, and understand how we can
add a column into our table with their corresponding data. Got it? I believe so, buddy…with all
my heart.

How to Delete the Rows and Columns

To delete rows and columns is easier than adding them. We have to be careful, though, to delete
all the tags associated with a row or a column.

Warning!
When deleting a row, be sure to delete the <TD> tags and the <TR> tags that enclose it. While, in deleting a column,
be sure to delete the <TH> tags as well as the <TD> tags from each row.

Let us have our example. To delete the bottom row in the sample table, we delete the tags in
strikethrough in the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 3</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE>
<TR>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
 66

<TD>Main Dish</TD>
</TR>
<TR>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

Now, how about deleting the last column in our sample table? To accomplish this task, we will
simply delete the last tag from each table row, like the following:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 3</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE>
<TR>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
 67

</BODY>
</HTML>

Warning!
The HTML editor and the Web browser such as Internet Explorer or Mozilla Firefox have no idea of columns within
a table. If we erase the last cell from each row, our revised table will look just fine. If we erase a random cell from
each row, our table will still look just fine, but the data will be corrupted. Let us just be careful in deleting the tags
and content from each row.

How to Span Rows and Columns

Spanning means to stretch a cell over multiple rows or columns. Below are the row and column
span attributes:

Attribute & Its Use

ROWSPAN=n Used in <TH> or <TD> tags, ROWSPAN= indicates how many rows the cell
should span. Like for example, ROWSPAN=4 spans four rows.

COLSPAN= n Used in either <TH> or <TD> tags, COLSPAN= indicates how many columns
the cell should cover. Like for example, COLSPAN=2 spans two columns.

Let us now have our spanning rows and columns examples.

Example 4:

Design and develop an HTML script that will show how to span one cell over three rows, as in
Meat cell. Follow the design specification below:

Sample Table

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

Solution:

1. At the Microsoft Notepad, write the following script:

 68

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 4</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table4.htm.

3. To run the script, double-click the table4.htm file with the big E icon.

Sample Output:
 69

Tip:
We have to use spanned rows to design more interesting table layouts.

Explanation:

We can span rows using either the <TH> or <TD> tag, depending on whether we are spanning a
table heading or table data. Here in our script below, we simply place the Type in the top left cell
with a <TH> tag. Then, we place the Meat in the second cell with a <TD> tag which span three
rows (ROWSPAN=3). Finally, we place Extras in the third cell but in the fifth row with a <TD>
tag:
.
.
<TABLE>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
 70

</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
.
.
This is how we span a row in our table. Got it?

Example 5:

Design and develop an HTML script that will show how to add two cells that each span two
columns. These columns that we will span are Food and Additional Information. Follow the
design specification below:

Sample Table
Food Additional Information
Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 4</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
 71

<H3>Sample Table</H3>
<TABLE>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table5.htm.

3. To run the script, double-click the table5.htm file with the big E icon.

Sample Output:
 72

Explanation:

We can span columns using either the <TH> or <TD> tag, depending on whether we are
spanning a table cell or table heading. Here in our example, to accomplish the given task, we just
simply add a <TR> tag for the new row. Then we add the <TH> tag for the cells that we want to
span, since we span a table heading. In our sample table, we add two <TH> cells - one with the
word Food and one with the phrase Additional Information as you could notice in our script
below:
.
.
<TABLE>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
 73

<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
.
.
Finally, since we will span two columns, therefore, we add COLSPAN=2 for each new <TH>
tag. It seems easy, isn’t it?

How to Add a Caption

A caption is a descriptive text that usually appears above the table. We use caption to summarize
table contents or to provide at-a-glance information about table of contents.

Caption Attribute & Its Use

<CAPTION> Used within a table to identify the text of the table caption.
ALIGN=”…” Places the caption at the TOP, BOTTOM, left or right of the table.

Example 6:

Design and develop an HTML script that will demonstrate how to add caption into our table. The
caption is Cebu Chicken Inasal Information. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information
Food Additional Information
Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert
 74

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 6</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table6.htm.

 75

3. To run the script, double-click the table6.htm file with the big E icon.

Sample Output:

Explanation:

We simply place our caption script below the opening <TABLE> tag, as you could observe it
below:
.
.
<TABLE>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
.
.
We add the boldface (<B>) tag so that our caption Cebu Chicken Inasal Information will be
displayed as highlighted. We have to remember also that the ALIGN= attribute controls where
the caption appears.
 76

How to Format Tables

Once we set up a table, we can add a number of formatting options that improve its overall
appearance. Like for example, we can do the following formatting with our table:

• Add borders
• Include background colors or images
• Adjust cell alignment
• Specify cell size
• Adjust cell alignment
• Specify table alignment

Borders are the lines that enclose tables and that clearly separate rows, columns, and cells. As
you could notice, tables that have borders are much easier to read and more attractive. Agree?
You have to, buddy. As we had experienced already in our previous examples, that without
borders, the cells visually run together, and the columns and rows are somewhat obscured.
In creating table borders, we have to specify an attribute and a number (measured in pixels) that
tell the web browsers the width of the border.

Border Attribute & Its Use

BORDER=n Specifies a table border width, which is measured in pixels. The larger the
number, the wider the border. BORDER=0 removes borders.

BORDERCOLOR=”color” Specifies a color for the table border as #rrggbb number or name.

Example 7:

Design and develop an HTML script that will demonstrate how to add a border in our table.
Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert
 77

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 7</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=2>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table7.htm.

3. To run the script, double-click the table7.htm file with the big E icon.
 78

Sample Output:

Explanation:

Here, we just add the BORDER=n attribute to the opening table tag, as you could observe it in
our script below:
.
.
<TABLE BORDER=2>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>

.
.
With this simple border attribute, we were able to present our table attractively. Nothing less!
Isn’t it, amigo?

Example 8:

Design and develop an HTML script that will demonstrate how to add a border in our table with
a Red border color. Follow the design specification below:
 79

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 8</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=2 BORDERCOLOR="Red">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
 80

<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table8.htm.

3. To run the script, double-click the table8.htm file with the big E icon.

Sample Output:

Explanation:

To put a Red border color in our table, we just add the BORDER=n and
BORDERCOLOR=”Red” attributes to the opening table tag, as you could observe it in our script
below:
.
.
<TABLE BORDER=2 BORDERCOLOR="Red">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
.
.
 81

That is how simple it is!

Example 9:

Design and develop an HTML script that will demonstrate how to add a border in our table with
a Yellow background color. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 9</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=2 BGCOLOR="Yellow">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
 82

<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table9.htm.

3. To run the script, double-click the table9.htm file with the big E icon.

Sample Output:

Explanation:

To put a Yellow background color in our table, we just add the BORDER=n and
BGCOLOR=”Yellow” attributes to the opening table tag, as you could observe it in our script
below:
 83

.
.
<TABLE BORDER=2 BGCOLOR="Yellow">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
.
.
Again, this is another “chicken” solution to the given task, amigo. No wonder, we have an
“about-chicken” example! Agree?

Example 10:

Design and develop an HTML script that will demonstrate how to add a border in our table with
an image background. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

Note:
Get the background image from Microsoft Office 2007 (or probably other version), in ClipArt
folder, and in PUB60COR sub-folder. The filename is: WB01304G.GIF. The Microsoft Office
2007 is under the Program Files folder.

Tip:
Just press the Ctrl-F keys in the keyboard to search the needed filename in an instant!

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
 84

<TITLE>HTML Table Example 10</TITLE>

</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=2 BACKGROUND="WB01304G.GIF">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table10.htm.

3. To run the script, double-click the table10.htm file with the big E icon.

Sample Output:
 85

Explanation:

To put an image background in our table, we just add the BORDER=n and
BACKGROUND=”WB01304G.GIF” attributes to the opening table tag, as you could observe it
in our script below:
.
.
<TABLE BORDER=2 BACKGROUND="WB01304G.GIF">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
.
.
As you could notice, we haven’t run out of “chicken” example with a “chicken” solution up to
this time. Well, that’s the way it is (in HTML), amigo!

Example 11:

Design and develop an HTML script that will demonstrate how we can specify that a header cell
occupy 40 percent of the table width. Follow the design specification below:
 86

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

40% wider

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 11</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=3>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH WIDTH="40%">Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
 87

<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table11.htm.

3. To run the script, double-click the table11.htm file with the big E icon.

Sample Output:

Explanation:

Here, we just add the cell WIDTH=n attribute to the Classification table header (TH) tag, as you
could observe it in our script below:
.
.
<TABLE BORDER=3>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
 88

<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH WIDTH="40%">Classification</TH>
</TR>
.
.
You could notice in our sample output that the Classification header cell is now occupying 40
percent of the entire table width.

Example 12:

Design and develop an HTML script that will demonstrate how we can specify that a header cell
occupy 50 percent of the table width. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

0ccupy 50 %

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 12</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=3>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
 89

<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2 WIDTH="50%">Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table12.htm.

3. To run the script, double-click the table12.htm file with the big E icon.

Sample Output:
 90

Explanation:

Again, we just add the cell WIDTH=n attribute to the Additional Information table header (TH)
tag, as you could observe it in our script below:
.
.
<TABLE BORDER=3>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2 WIDTH="50%">Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
.
.
You could notice in our sample output that the Additional Information header cell is now
occupying 50 percent of the entire table width. This will also result to the 50 percent remaining
width which the Food header cell has occupied, which further means that the Food and
Additional Information header cells occupy 50 percent both for the entire table. Can you see it –
the 50-50 width?

Example 13:

Design and develop an HTML script that will demonstrate how cell spacing and padding works.
Specify 4 pixels for both cell spacing and cell padding. Follow the design specification below:
 91

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish

Pakpak Chicken Wings Main Dish

Extras Leche Flan Egg with Milk Dessert

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 13</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE CELLSPACING=4 CELLPADDING=4 BORDER=3>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
 92

<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table13.htm.

3. To run the script, double-click the table13.htm file with the big E icon.

Sample Output:

Explanation:

We just simply add both CELLSPACING=n and CELLPADDING=n attributes within our
TABLE tag, as you could observe them in our script below:
.
.
<TABLE CELLSPACING=4 CELLPADDING=4 BORDER=3>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
 93

<TH COLSPAN=2>Additional Information</TH>

</TR>
.
.
By the way, cell spacing and padding refer to how much white space appears in a table. In
particular, cell spacing is the spacing between cells, while cell padding is the spacing between
cell contents and cell borders.
As you could notice in our sample output, open space around cell contents makes the table much
easier to read and more pleasing aesthetically.

Example 14:

Design and develop an HTML script that will demonstrate how table WIDTH attribute affects
the table presentation. Specify 20 percent width for our table in relation to the Internet browser
window. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

can produce
milk?
Meat Paa Chicken Thigh Main Dish
is my favorite
part.
Pakpak Chicken Wings Main Dish
can fly in the
sky?
Extras Leche Flan Egg with Milk Dessert
is sweet and
yummy!

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 14</TITLE>
</HEAD>
<BODY>
 94

<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=3 WIDTH="20%">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR ALIGN=RIGHT>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast can produce milk?</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh is my favorite part.</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings can fly in the sky?</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk is sweet and yummy!</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table14.htm.

3. To run the script, double-click the table14.htm file with the big E icon.

Sample Output:
 95

Explanation:

Again, we just add the WIDTH=n attribute to the TABLE tag, as you could observe it in our
script below:
.
.
<TABLE BORDER=3 WIDTH="20%">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
.
.
We intentionally revised the contents of our Description column (by making them longer
sentences) so that we can see the effect of the wrapping of text inside the cell. Now you know
why, buddy.
We can actually, align our table with respect to the browser window. For example, we can put it
in the center of the browser window with the following ALIGN attribute:
.
.
<TABLE BORDER=3 WIDTH="20%" ALIGN=CENTER>
.
.
Or, putting our table at the rightmost part of the browser window with the following ALIGN
attribute:
 96

.
.
<TABLE BORDER=3 WIDTH="20%" ALIGN=RIGHT>
.
.
You can try it! Dare?

How to Use Advanced Table Tags

We can actually format portions of the table separately – as sections, rather than as individual
cells. Like for example, we can do the following:

• Group similar areas of tables and add borders around the areas.
• Include table footer, which is handy if a table has totals at the bottom of the columns.
• Add lines or text formatting to table headings.
• Use those additional tags as hooks for Cascading Style Sheets to get into more
sophisticated formatting. All style tags can be used with these tags.

In order to use the advanced table tags and formatting, we need to identify the table section, then
apply frames and rules to table sections. To identify table sections, we have to group similar
table parts and identify each part as being part of the table heading, body, footer, or column.
Below are the table advanced tags:

Tags & Its Use

<THEAD> Labels the header area of a table.

<TBODY> Labels the body area of table.
<TFOOT> Labels the footer area of table.
<COLGROUP> Identifies column groups within a table.

Example 15:

Design and develop an HTML script that will demonstrate how to group similar table parts and
to identify each part of the table whether it is a heading, body, or footer. Follow the design
specification below:
 97

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

Meat All All chicken Not Applicable

Combo parts

The table above provides the basic information only.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 15</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=3>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
 98

<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>Meat Combo</TD>
<TD>Lahat</TD>
<TD>All chicken parts</TD>
<TD>Not Applicable</TD>
</TFOOT>
</TABLE>
The table above provides the basic information only.
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table15.htm.

3. To run the script, double-click the table15.htm file with the big E icon.

Sample Output:
 99

Explanation:

In order for us to learn easily how we accomplish the task of grouping similar parts of the table,
here is the script below where we highlight (boldface font) the identification of each table parts
including the heading, body, and footer:
.
.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML Table Example 15</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=3>
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
 100

<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>Meat Combo</TD>
<TD>Lahat</TD>
<TD>All chicken parts</TD>
<TD>Not Applicable</TD>
</TFOOT>
</TABLE>
The table above provides the basic information only.
</ARTICLE>
</SECTION>
</BODY>
</HTML>
.
.
With the help of an “arrow” presentation above, we can easily understand how to group each part
of the table, accurately. Am I right, amigo? I hope so.

How to Use Table Borders

We can use the advanced table formatting attributes to create custom table borders – called rules
– which apply to specified sections of the table. For example, we can apply borders just to the
table heading, columns, or rows only. You can see below the advanced table formatting
attributes.

Attribute & Its Use

FRAME= Specifies the outside edges of the table that will have a border. Possible choices
include BORDER (the default), VOID (no borders), BELOW, ABOVE, HSIDES
(top and bottom), LHS (left hand side), RHS (right hand side), VSIDES (left and
right) and BOX(all sides).

RULES= Specifies which internal borders of the table are displayed, NONE, GROUPS
(rules between table groups), THEAD, TBODY, TFOOT, COLGROUP, ROWS
(rules between table rows), COLS (rules between table columns), ALL.
 101

COLS= Specifies the number of columns in the table.

Let us now have our examples about this advanced table formatting.

Example 16:

Design and develop an HTML script that will demonstrate the effect of the FRAME=HSIDES
and RULES=NONE advanced table formatting. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification
Petso Chicken Breast Main Dish
Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert
Meat Combo Lahat All chicken parts Not Applicable

The table above provides the basic information only.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>RULES=NONE Output</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE FRAME=HSIDES RULES=NONE BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
<TR>
<TH COLGROUP COLSPAN=2>Food</TH>
<TH COLGROUP COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
 102

</THEAD>
<TBODY>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>Meat Combo</TD>
<TD>Lahat</TD>
<TD>All chicken parts</TD>
<TD>Not Applicable</TD>
</TFOOT>
</TABLE>
The table above provides the basic information only.
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table16.htm.

3. To run the script, double-click the table16.htm file with the big E icon.

Sample Output:
 103

Explanation:

In the script below, we can observe how we specify the advanced table attributes at the TABLE
tag:
.
.
<TABLE FRAME=HSIDES RULES=NONE BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
.
.
The HSIDES frame means we have to put the border (in 3 pixels wide) at the top and bottom part
of our table. This is what the HSIDES is all about – putting the border at the top and bottom part
of the table. Very simple isn’t it? Now, what if we want to put the border at the left and right part
of our table? Well it’s also easy, just do the following syntax:
.
.
<TABLE FRAME=VSIDES RULES=NONE BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
.
.
See? We just simply replaced the HSIDES with VSIDES. Very simple, isn’t it?
Now, if we want to put a border right in every corner of our table to “boxed” it, we simply do
the following syntax:
.
.
<TABLE FRAME=BOX RULES=NONE BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
.
 104

.
Can you see now the effect right at your web browser? That’s how easy it is!

Example 17:

Design and develop an HTML script that will demonstrate the effect of the FRAME=HSIDES
and RULES=GROUPS advanced table formatting. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information THEAD

Type Local Term Description Classification
Petso Chicken Breast Main Dish
Meat Paa Chicken Thigh Main Dish TBODY
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert
Meat Combo Lahat All chicken parts Not Applicable
TFOOT
The table above provides the basic information only.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>RULES=GROUPS Output</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE FRAME=HSIDES RULES=GROUPS BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
<TR>
<TH COLGROUP COLSPAN=2>Food</TH>
<TH COLGROUP COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
 105

</THEAD>
<TBODY>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>Meat Combo</TD>
<TD>Lahat</TD>
<TD>All chicken parts</TD>
<TD>Not Applicable</TD>
</TFOOT>
</TABLE>
The table above provides the basic information only.
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table17.htm.

3. To run the script, double-click the table17.htm file with the big E icon.

Sample Output:
 106

Explanation:

We can simply change the RULES= attribute to GROUPS with the following script:
.
.
<TABLE FRAME=HSIDES RULES=GROUPS BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
.
.
With group formatting, we were now able to separate the THEAD, TBODY, and TFOOT parts
of our table graphically. Remember that we cannot accomplish this task without first applying
the advanced table tags in our HTML script.

Example 18:

Design and develop an HTML script that will demonstrate the effect of the FRAME=HSIDES
and RULES=ROWS advanced table formatting. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification
Petso Chicken Breast Main Dish
Meat Paa Chicken Thigh Main Dish Added Rows
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert
Meat Combo Lahat All chicken parts Not Applicable

The table above provides the basic information only.

 107

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>RULES=ROWS Output</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE FRAME=HSIDES RULES=ROWS BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
<TR>
<TH COLGROUP COLSPAN=2>Food</TH>
<TH COLGROUP COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TBODY>
 108

<TFOOT>
<TR>
<TD>Meat Combo</TD>
<TD>Lahat</TD>
<TD>All chicken parts</TD>
<TD>Not Applicable</TD>
</TFOOT>
</TABLE>
The table above provides the basic information only.
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table18.htm.

3. To run the script, double-click the table18.htm file with the big E icon.

Sample Output:

Explanation:

You will notice that by changing the RULES= attribute to ROWS:

.
.
<TABLE FRAME=HSIDES RULES=ROWS BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
.
.
we were able to put rows in our table, as you could see in our output above. This is one of the
many ways that we can format our table.
 109

Example 19:

Design and develop an HTML script that will demonstrate the effect of the FRAME=HSIDES
and RULES=COLS advanced table formatting. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification
Petso Chicken Breast Main Dish
Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert
Meat Lahat All chicken parts Not Applicable
Combo

The table above provides the basic information only.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>RULES=COLS Output</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE FRAME=HSIDES RULES=COLS BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
<TR>
<TH COLGROUP COLSPAN=2>Food</TH>
<TH COLGROUP COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
 110

<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>Meat Combo</TD>
<TD>Lahat</TD>
<TD>All chicken parts</TD>
<TD>Not Applicable</TD>
</TFOOT>
</TABLE>
The table above provides the basic information only.
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table19.htm.

3. To run the script, double-click the table19.htm file with the big E icon.

Sample Output:
 111

Explanation:

By changing the RULES= attribute to COLS:

.
.
<TABLE FRAME=HSIDES RULES=COLS BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
.
.
we were able to put column lines into our table.

Example 20:

Design and develop an HTML script that will demonstrate the effect of the FRAME=HSIDES
and RULES=ALL advanced table formatting. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification
Petso Chicken Breast Main Dish
Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert
Meat Lahat All chicken parts Not Applicable
Combo

The table above provides the basic information only.

 112

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>RULES=ALL Output</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE FRAME=HSIDES RULES=ALL BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
<TR>
<TH COLGROUP COLSPAN=2>Food</TH>
<TH COLGROUP COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TBODY>
<TFOOT>
 113

<TR>
<TD>Meat Combo</TD>
<TD>Lahat</TD>
<TD>All chicken parts</TD>
<TD>Not Applicable</TD>
</TFOOT>
</TABLE>
The table above provides the basic information only.
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table20.htm.

3. To run the script, double-click the table20.htm file with the big E icon.

Sample Output:

Explanation:

With the RULES=ALL attribute,

.
.
<TABLE FRAME=HSIDES RULES=ALL BORDER=3 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD
.
.
we were able to put both columns and rows into our table. Very easy to accomplish, also.
 114

Example 21:

Design and develop an HTML script that will demonstrate the effect of the FRAME=HSIDES
and RULES=COLGROUP advanced table formatting. Follow the design specification below:

Sample Table
Cebu Chicken Inasal Information
Top border
Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

Meat All All chicken Not Applicable

Bottom border
Combo parts

The table above provides the basic information only.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>RULES=COLGROUP Output</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE FRAME=HSIDES RULES=COLGROUP BORDER=4 BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
<TR>
<TH COLGROUP COLSPAN=2>Food</TH>
<TH COLGROUP COLSPAN=2>Additional Information</TH>
</TR>
<TR>
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
</THEAD>
 115

<TBODY>
<TR>
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR>
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR>
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>Meat Combo</TD>
<TD>Lahat</TD>
<TD>All chicken parts</TD>
<TD>Not Applicable</TD>
</TFOOT>
</TABLE>
The table above provides the basic information only.
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: table21.htm.

3. To run the script, double-click the table21.htm file with the big E icon.

Sample Output:
 116

Explanation:

The RULES=COLGROUP attribute:

.
.
<TABLE FRAME=HSIDES RULES=COLGROUP BORDER=4
BORDERCOLOR="LightGreen">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<THEAD>
.
.
completes the whole table. However, if we try to look at our table deeply, we will be surprised
that the left and right part of it have no borders compared to an ordinary formatted table. Only
the top and bottom part of it have borders. This is also the main reason why we increase the
BORDER attribute value to 4 pixels wide to emphasize this difference. Did you get the essence
of our example? I wish you do.
 117

LAB ACTIVITY
TEST 3

1.Design and develop an HTML script that will demonstrate how to add a border in our table.
Follow the design specification below:

Tropical Hot Pizza Information

Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

2.Design and develop an HTML script that will demonstrate how to add a border in our table
with a Pink border color. Follow the design specification below:

Tropical Hot Pizza Information

Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

 118

3. Design and develop an HTML script that will demonstrate how to add a border in our table
with an Orange background color. Follow the design specification below:

Tropical Hot Pizza Information

Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

4.Design and develop an HTML script that will demonstrate how to add a border in our table
with an image background. Follow the design specification below:

Tropical Hot Pizza Information

Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

Note:
Get the background image from Microsoft Office 2007 (or probably other version), in ClipArt
folder, and in PUB60COR sub-folder. The filename is: J0099202.GIF. The Microsoft Office
2007 is under the Program Files folder.

Tip:
Just press the Ctrl-F keys in the keyboard to search the needed filename in an instant!
 119

5.Design and develop an HTML script that will demonstrate how we can specify that a header
cell occupy 30 percent of the table width. Follow the design specification below:

Tropical Hot Pizza Information

Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

30% wider

6.Design and develop an HTML script that will demonstrate how we can specify that a header
cell occupy 60 percent of the table width. Follow the design specification below:

Tropical Hot Pizza Information

Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

Occupy 60 %
 120

7.Design and develop an HTML script that will demonstrate how cell spacing and padding
works. Specify 4 pixels for both cell spacing and cell padding. Follow the design specification
below:

Tropical Hot Pizza Information

Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

8.Design and develop an HTML script that will demonstrate how table WIDTH attribute affects
the table presentation. Specify 20 percent width for our table in relation to the Internet browser
window. Follow the design specification below:

Tropical Hot Pizza Information

Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

 121

9. Design and develop an HTML script that will demonstrate how to group similar table parts
and to identify each part of the table whether it is a heading, body, or footer. Follow the design
specification below:

Tropical Hot Pizza Information

Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

All offerings have free 1 Liter Pepsi Cola!

10. Design and develop an HTML script that will demonstrate the effect of the
FRAME=HSIDES and RULES=NONE advanced table formatting. Follow the design
specification below:
Tropical Hot Pizza Information

Product More Information

Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

All offerings have free 1 Liter Pepsi Cola!

 122

12. Design and develop an HTML script that will demonstrate the effect of the
FRAME=HSIDES and RULES=GROUPS advanced table formatting. Follow the design
specification below:

Tropical Hot Pizza Information

Product More Information THEAD

Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special TBODY
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A TFOOT

13. Design and develop an HTML script that will demonstrate the effect of the
FRAME=HSIDES and RULES=ROWS advanced table formatting. Follow the design
specification below:

Tropical Hot Pizza Information

Product More Information

Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special Added Rows
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

 123

14. Design and develop an HTML script that will demonstrate the effect of the
FRAME=HSIDES and RULES=COLS advanced table formatting. Follow the design
specification below:

Tropical Hot Pizza Information

Product More Information

Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

All offerings have free 1 Liter Pepsi Cola!

15. Design and develop an HTML script that will demonstrate the effect of the
FRAME=HSIDES and RULES=ALL advanced table formatting. Follow the design specification
below:

Tropical Hot Pizza Information

Product More Information

Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

 124

16. Design and develop an HTML script that will demonstrate the effect of the
FRAME=HSIDES and RULES=COLGROUP advanced table formatting. Follow the design
specification below:

Tropical Hot Pizza Information

Product More Information

Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

 125

Chapter 5
Designing HTML Forms

The Form is at the heart of Web design and development. It is used to pass information from the
Internet browser to the web server. Without noticing it, we are working with a Form control any
time we go online and order a book from Amazon.com, trade an auction at e-Bay, or send an e-
mail at Hotmail using an Internet browser.
An HTML Form control (object) can offer us a number of ways to accept input data, coming
from other controls such as text boxes (text field), text areas, check boxes, option buttons (radio
buttons), or selection list.

The <FORM> Element

The <FORM> element designates a form within a Web page and contains all the text and
elements that make a form. We can include as many forms as we like on a Web page, although
we cannot nest one form inside another form.
Here below are the common attributes, events and methods that we can use with <FORM>
element:

Attribute and its Description

action – Required attribute that specifies a URL to which form data is submitted.

method –Determines how form data is submitted. The two options for this attribute are “get” and
“post”.

name – Name of the form.

Event and its Description

reset –Executes when a form’s reset button is clicked

submit –Executes when a form’s submit button is clicked

Method and its Description

reset( ) - Resets a form without the use of a reset button

submit( ) - Submits a form without the use of a submit button

The Form Controls

 126

There are four primary elements used within the <FORM> element to create form controls:
<input>, <button>, <select>, and <text area>. The <input> and <button> elements are used to
create input fields with which users interact. The <input> element is the most commonly used
form element and allows you to create the following types of Form controls: text boxes, check
boxes, option buttons, push buttons, files boxes, password boxes, and hidden form fields.

The <select> element displays choices in a drop-down menu or scrolling list known as a
selection list. The <text area> element is used to create a text field in which users can enter
multiple lines of information. Any Form element into which a user can enter data such as a text
box or can select an option like in the case of option buttons is called a field.
The <input>, <text area>, and <select> elements can include name and value attributes.
The name attribute defines a name for an element, and the value attribute defines a default value.

Common Input Property and its Description

form –Returns a reference to the form that contains the control

type - Returns the type of form element: button, text box, check box, and more
name –Returns the value assigned to the element’s name attribute
value – Specifies the value of the input
size – Refers to the number of characters permitted in the element
maxlength – Specifies the maximum number of characters that can be entered
src – Specifies th source of an image
checked -Sets and returns the checked status of a check box or option button (radio button)
multiple – Specifies a Boolean value that allows multiple selections from the list
selectedIndex -Returns an integer that represents the element displayed in a selection
list,according to its position
selected – Specifies a Boolean value indicating that the option is selected
label – Specifies the label for the option
rows – Specifies the number of lines that are visible in text area
cols – Specifies the number of characters that can be visible on the line in text area
disabled – Specifies the Boolean value that enables or disables the element for input
readonly – Specifies a Boolean value that enables or prohibits changes to an element.

Common Input Events and its Description

focus -An element, such as a button or text box, becomes active

blur -An element, such as option button, becomes inactive
change – The value of an element, such as a text box, changes
click – The user clicks an element once

Common Input Methods and its Description

focus( ) –Changes focus to a form control

blur( ) –Removes focus from a Form control
select( ) –Selects the text in a Form control
 127

click( ) –Activates a Form control’s click event

We will use several properties, events, and methods of the Form and Input objects in this
chapter.

The <INPUT> Element

The empty <INPUT> element is used to create input fields that create different types of interface
elements, such as text boxes, option buttons, and so on. The input fields are used to gather
information from the user.
Below are the common attributes of the <INPUT> element:

Attribute and its Description

type -Specifies the type of element to be rendered

name –Designates a name for the element
value –Sets an initial value in a field or a label for buttons,
size –Accepts an integer value that determines the width of a text box
src -Specifies the URL of an image
alt –Provides alternate text for an image submit button
checked –Determines whether or not a check box or option button is selected
disabled -Disables a control
readonly -Prevents users from changing values in a control

The Text Boxes

An <INPUT> element with a type of “text” (<INPUT TYPE=”text” />) creates a simple text
box that accepts a single line of text. When used with a text box, the VALUE attribute specifies
text to be used as the default value at the moment a Form first loads.

The Text Area

The <TEXTAREA> tag creates a multiline text-entry area. The surfer may type nearly unlimited
number of lines of text. We can control its dimensions, however, by defining the COLS
(columns), and ROWS attributes for the visible rectangular area set aside by the web browser for
multiline input. The WRAP attribute can be set as virtual, physical, or off. The virtual setting
will wrap the text message within the text area for presentation to the user and will be send to the
server as one line only, while the physical setting will wrap the text message within the text area
and will send the text to the server the way it was wrapped up at the presentation. If the text
message was wrapped 3 lines, then there are 3 lines will be sent to the server.
 128

The Password Boxes

An <INPUT> element with a type of “password” (<INPUT TYPE=”password” />) creates a

password box that is used for entering passwords or other types of sensitive data. Each character
that a user types in a password box appears as an asterisk or bullet, depending on the Operating
System (OS) and Web browser, in order to hide the password from anyone who may be looking
over the user’s shoulder.

The Button
An <INPUT> element with a type of “button” (<INPUT TYPE=”button” />) creates a button that
is similar to the OK and Cancel buttons we see usually in a dialog boxes such as the alert box.
We can use the name and value attributes with a button <input> element. The text we assign to a
button’s value attribute is the text that appears on the button face.

The Option Button

An <INPUT> element with a type of “radio” (<INPUT TYPE=”radio” />) is used to create a
group of option buttons (radio buttons), from which the user can select only one value. To create
a group of option buttons, all option buttons in the group must have the same name attribute.
Each option button requires a value attribute that identifies the unique value associated with that
button.

The Check Boxes

An <INPUT> element with a type of “checkbox” (<INPUT TYPE=”checkbox” />) creates a box
that can be set to Yes (checked) or No (unchecked). We use check boxes when we want users to
select whether or not to include a certain item or allow users to select multiple values from a list
of items.

The Selection Lists

The <SELECT> element creates a selection list that presents users with fixed lists of options
from which to choose. The option displayed in a selection list are created with <OPTION>
elements. The selection list can appear as an actual list of choices or as a drop-down menu.

The Menu Options

We use <OPTION> elements to specify the options that appear in a selection list. The content of
an <option> element appears as a menu option in a selection list.
 129

We specify a selection list’s menu options using <option> elements placed within a <select>
element.

The FieldSet and Legend Tags

The <FIELDSET> tag encapsulates a section of form contents, creating a group of related form
fields. We use the <LEGEND> tag to create a label for a <FIELDSET> tag in a Form control.

How to Determine the Form Content

The first thing we do in designing the Form control is to determine which information to include
and how to present it. We then need to ensure that the visitors of our website can easily provide
the information we want from them. This further means, that our Form design needs to be both
functional and visually attractive.
When deciding which information to include, we have to consider the purposes why we create
the Form. The following questions could help us to design our form effectively:

• What information do we want? Visitor’s e-mail address only? Or do we need to have

their other contact information such as cellular phone number and home address?
• In your own estimate, how much time will visitors be willing to spend filling out the
form? Would they be willing to write a short sentence or an entire paragraph, or would
they just want to select from a given options or check-list?
• What particular reason why the visitor access the form? To request information or to
order something online?

Example 1:

Design and develop an HTML script that will demonstrate how to use the text-field (text box)
and button controls. Follow the design specification below:

Type here: Dafdaf Text box

Click Me! Button

Solution:

1. At the Microsoft Notepad, write the following script:

 130

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<FORM NAME="Form1">
Type here: <INPUT TYPE="text" NAME="TextField"><p>
<INPUT TYPE = "button" VALUE="Click Me!">
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: form1.htm.

3. To run the script, double-click the form1.htm file with the big E icon.

Sample Output:

Explanation:

The <FORM NAME=”Form1”> is the overriding form command that starts the entire form
process. The NAME= attribute gives the entire form a name. We must do this even if there is
only one form on the web page. We have to remember that every form must have an overriding
name.
The <INPUT TYPE=”text” NAME=”TextField” is the name of the form element we are most
concerned with. This is the element where I typed my name. The NAME= attribute in this case
gives a name to the form element. Now the Form itself has a name and the form element has a
name. It is important that we make that separation in our mind. The Form is now named Form1
and the specific form element is named TextField.
The <INPUT TYPE=”button” VALUE=”Click Me!” > is the button that we have to click. We
usually put the JavaScript’s event-handler function within this button control.
 131

Example 2:

Design and develop an HTML script that will show two text boxes and two buttons controls.
Follow the design specification below:

Two Text Boxes & Two Buttons

Type here. Type also here! Text boxes

Button1 Button2 Buttons

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H4>Two Text Boxes & Two Buttons</H4>
<FORM>
<INPUT TYPE="text" NAME="TextField1" VALUE="Type here." SIZE="10">
<INPUT TYPE="text" NAME="TextField2" VALUE="Type also here!" SIZE="15">
<P>
<INPUT TYPE="button" VALUE="Button1">
<INPUT TYPE="button" VALUE="Button2">
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: form2.htm.

3. To run the script, double-click the form2.htm file with the big E icon.

Sample Output:
 132

Explanation:

We simply display here two text boxes and two buttons. To design two text boxes in our
webpage, we have the following HTML script:
.
.
<INPUT TYPE="text" NAME="TextField1" VALUE="Type here." SIZE="10">
<INPUT TYPE="text" NAME="TextField2" VALUE="Type also here!" SIZE="15">
.
.
where we shortened the display of the text box using the SIZE attribute.
Now, to design the two buttons, we have the following HTML script:
.
.
<INPUT TYPE="button" VALUE="Button1">
<INPUT TYPE="button" VALUE="Button2">
.
.
We just used the paragraph tag: <P> to separate the two controls. We also used the header tag:
<H4> for our heading on this example.

Example 3:

Design and develop an HTML script that will show how to apply the password box control.
Follow the design specification below:

Enter login name:

coper7

Enter password:
Text boxes

******** Button

Clear All
 133

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<FORM NAME="Form1">
<P>Enter login name: <BR />
<INPUT TYPE="text" NAME="TextField1">
<P>Enter password: <BR />
<INPUT TYPE="password" NAME="MyPassword" /> </P>
<INPUT TYPE="reset" VALUE="Clear All"><P>
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: form3.htm.

3. To run the script, double-click the form3.htm file with the big E icon.

Sample Output:
 134

Explanation:

To apply the password box control, we will simply have the following HTML script:
.
.
<INPUT TYPE="password" NAME="MyPassword" /> </P>
.
.
In order to easily clear all the data that we have just entered in our text box and password box,
we simply apply the RESET control with the following HTML script:
.
.
<INPUT TYPE="reset" VALUE="Clear All"><P>
.
.
So, password is so easy to implement in HTML scripting. Isn’t it?
We used also the line-break tag <BR /> to control the layout of our two text boxes.
If for example, we will omit the line-break tag <BR /> in our HTML script such as the following:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<FORM NAME="Form1">
<P>Enter login name: No Line-Break Tag here
<INPUT TYPE="text" NAME="TextField1">
<P>Enter password: No Line-Break Tag here
<INPUT TYPE="password" NAME="MyPassword" /> </P>
<INPUT TYPE="reset" VALUE="Clear All"><P>
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

Then, our output is the following figure:

 135

You can try it in your own. Try it now!

Example 4:

Design and develop an HTML script that will show how to apply the check boxes. Follow the
design specification below:

What pets do you have at home, Kuya Kim?

Cat

Dog

Fish

Bird

Snake

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<FORM>
What pets do you have at home, Kuya Kim?
<P>
<INPUT TYPE="checkbox" NAME="CheckBox1" VALUE="Cat" /> Cat
 136

<BR />
<INPUT TYPE="checkbox" NAME="CheckBox1"
VALUE="Dog" Checked="Checked"/> Dog
<BR />
<INPUT TYPE="checkbox" NAME="CheckBox1" VALUE="Fish" /> Fish
<BR />
<INPUT TYPE="checkbox" NAME="CheckBox1" VALUE="Bird" /> Bird
<BR />
<INPUT TYPE="checkbox" NAME="CheckBox1"
VALUE="Snake" Checked="Checked"/> Snake
</P>
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: form4.htm.

3. To run the script, double-click the form4.htm file with the big E icon.

Sample Output:

Explanation:

Although, check boxes are separate visually, they are actually belong to a group. In check boxes
control, we can choose as many selections as we want. We also assumed here that Kuya Kim, at
least owned two pets at home, namely: Dog and Snake. This is the very reason why we have a
Checked value to the Checked attribute in our Dog and Snake check boxes settings, as you could
observe it in our script below:
.
.
<FORM>
What pets do you have at home, Kuya Kim?
<P>
<INPUT TYPE="checkbox" NAME="CheckBox1" VALUE="Cat" /> Cat
<BR />
 137

<INPUT TYPE="checkbox" NAME="CheckBox1"

VALUE="Dog" Checked="Checked"/> Dog
<BR />
<INPUT TYPE="checkbox" NAME="CheckBox1" VALUE="Fish" /> Fish
<BR />
<INPUT TYPE="checkbox" NAME="CheckBox1" VALUE="Bird" /> Bird
<BR />
<INPUT TYPE="checkbox" NAME="CheckBox1"
VALUE="Snake" Checked="Checked"/> Snake
</P>
</FORM>
.
.
You will also observed that we heavily used the line-break tag <BR /> in our script. This is
because we want to format the layout of our check boxes in a per line basis (not in one line only).
Without the use of the line-break tag <BR />, all our check boxes will be displayed in one line
only, as you can see here in our script below (and with its corresponding output that follows):

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<FORM>
What pets do you have at home, Kuya Kim?
<P>
<INPUT TYPE="checkbox" NAME="CheckBox1" VALUE="Cat" /> Cat
<INPUT TYPE="checkbox" NAME="CheckBox1"
VALUE="Dog" Checked="Checked"/> Dog
<INPUT TYPE="checkbox" NAME="CheckBox1" VALUE="Fish" /> Fish
<INPUT TYPE="checkbox" NAME="CheckBox1" VALUE="Bird" /> Bird
<INPUT TYPE="checkbox" NAME="CheckBox1"
VALUE="Snake" Checked="Checked"/> Snake
</P>
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

That results to the following output:

 138

Now, I’m sure you got it right!

Example 5:

Design and develop an HTML script that will show how to apply the option buttons (radio
buttons). Follow the design specification below:

Which type of animal is Kuya Kim’s favorite?

Cat Dog Fish Bird Snake

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<FORM>
Which type of animal is Kuya Kim's favorite pet?
<P>
<INPUT TYPE="radio" NAME="OptionButton1" VALUE="Cat"> Cat
<INPUT TYPE="radio" NAME="OptionButton1" VALUE="Dog"> Dog
<INPUT TYPE="radio" NAME="OptionButton1" VALUE="Fish"> Fish
<INPUT TYPE="radio" NAME="OptionButton1" VALUE="Bird"> Bird
<INPUT TYPE="radio" NAME="OptionButton1"
VALUE="Snake" Checked="Checked"> Snake
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: form5.htm.

3. To run the script, double-click the form5.htm file with the big E icon.
 139

Sample Output:

Explanation:

You will observe here in our output above that we preselected the Snake option, since we
assumed that Kuya Kim’s favorite pet is this one. This can be achieved with the following script:
.
.
<FORM>
Which type of animal is Kuya Kim's favorite pet?
<P>
<INPUT TYPE="radio" NAME="OptionButton1" VALUE="Cat"> Cat
<INPUT TYPE="radio" NAME="OptionButton1" VALUE="Dog"> Dog
<INPUT TYPE="radio" NAME="OptionButton1" VALUE="Fish"> Fish
<INPUT TYPE="radio" NAME="OptionButton1" VALUE="Bird"> Bird
<INPUT TYPE="radio" NAME="OptionButton1"
VALUE="Snake" Checked="Checked"> Snake
</FORM>
.
.
So again, we just simply put a Checked value into the Checked attribute, to be able to preselect
the Snake option.

By the way, in our option button (radio button), the user can only select one (and only one at a
time) of the given choices. This is in contrast to the check boxes where we can select as many
selections as we want.
You will notice also that all option buttons were displayed in one line only. This is the effect of
the absence of the line-break tag <BR /> in our script. Got it?

Example 6:

Design and develop an HTML script that will show how to apply the text area control. Follow
the design specification below:
 140

A Simple Interview

Tell me about yourself, Kuya Kim?:

I’m a type of person who loves animals.
My favorite pet is a snake.
TextArea

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H4>A Simple Interview </H4
<P>Tell me about yourself, Kuya Kim?: <BR />
<FORM NAME="Form1">
<TEXTAREA NAME="Interview1" COLS="40" ROWS="4" WRAP="virtual">
I'm a type of person who loves animals. My favorite pet is a snake.
</TEXTAREA>
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: form6.htm.

3. To run the script, double-click the form6.htm file with the big E icon.

Sample Output:
 141

Explanation:

Since we declare the COLS attribute to 40 only, that is why the text area was wrapping the text
into two lines. If you count the characters, the period (.) after the word “animals” is the 40th
character. Now, you can also estimate that our text area can display 4 rows (lines) of text
messages at once. This is because we set the ROWS attribute to 4.
Although, we have two lines of text here in our text area, the entire text will be sent to the server
as one line only because we declare “virtual” as the value of the WRAP attribute.

Example 7:

Design and develop an HTML script that will show how to apply the selection list control.
Follow the design specification below:

Kuya Kim have the following pets at home(?):

Cat
Dog
Fish

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
 142

<SECTION>
<ARTICLE>
<FORM NAME="Form1">
<P> Kuya Kim have the following pets at home (?): <BR />
<SELECT NAME="Option1" SIZE="3" MULTIPLE="multiple">
<OPTION>Cat</OPTION>
<OPTION>Dog</OPTION>
<OPTION>Fish</OPTION>
<OPTIOIN>Bird</OPTION>
<OPTION>Snake</OPTION>
</SELECT>
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: form7.htm.

3. To run the script, double-click the form7.htm file with the big E icon.

Sample Output:

Explanation:

Since the SIZE attribute determines how many options are visible to the user at a time, that is
why there are only 3 animals were displayed at once. We need to scroll the selection list to view
the other remaining animals.
The multiple attribute allows more than one selection of items at a time. This is very useful when
the user wants to select more than one item in our selection list.

Example 8:

Design and develop an HTML script that will show how to apply the OPTGROUP tag. Follow
the design specification below:
 143

Philippine Islands
Bulacan

Luzon
Bulacan
Laguna
Ilocos
Batangas
Bataan
Isabela
Pampanga
Visayas
Iloilo
Aklan
Leyte
Zamar
Negros
Cebu
Bohol
Mindanao
Davao
Cotabato
Maguindanao
Bukidnon
Lanao
Agusan
Misamis

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H4>Philippine Islands</H4
<FORM NAME="Form1">
<SELECT NAME="Philippines">
<OPTGROUP LABEL="Luzon">
<OPTION>Bulacan</OPTION>
<OPTION>Laguna</OPTION>
<OPTION>Ilocos</OPTION>
<OPTION>Batangas</OPTION>
<OPTION>Bataan</OPTION>
<OPTION>Isabela</OPTION>
<OPTION>Pampanga</OPTION>
 144

</OPTGROUP>
<OPTGROUP LABEL="Visayas">
<OPTION>Iloilo</OPTION>
<OPTION>Aklan</OPTION>
<OPTION>Leyte</OPTION>
<OPTION>Zamar</OPTION>
<OPTION>Negros</OPTION>
<OPTION>Cebu</OPTION>
<OPTION>Bohol</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Mindanao">
<OPTION>Davao</OPTION>
<OPTION>Cotabato</OPTION>
<OPTION>Maguindanao</OPTION>
<OPTION>Bukidnon</OPTION>
<OPTION>Lanao</OPTION>
<OPTION>Agusan</OPTION>
<OPTION>Misamis</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: form8.htm.

3. To run the script, double-click the form8.htm file with the big E icon.

Sample Output:
 145

Explanation:

There are cases where menus of choices can be quite long, making them difficult to display. So,
what we have to do is to apply the OPTGROUP tag to group related choices, which can be
presented as a set of nested, cascading menus to the user. As you could observe in our example
above, the web browser creates submenus for each <OPTGROUP> tag within the main
<SELECT> menu. That’s the reason why all provinces that belong to Luzon area were grouped
together. This is also the same with Visayas and Mindanao area, respectively.
 146

Example 9:

Design and develop an HTML script that will show how to apply the FIELDSET and LEGEND
tags. Apply also the READONLY attribute to the My Name text box, so that the user cannot
input data into it (or cannot change anything to it). Then apply the DISABLED attribute to the
radio button for the Female option so that the user cannot click it. Follow the design specification
below:

My Personal Information

My Name: Coper Pepito

My Province: Tuburan, Cebu

My Favorite Color: Pink

My Sex Status: Male Female

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<FORM NAME="Form1">
<FIELDSET>
<LEGEND>My Personal Information</LEGEND>
<LABEL>My Name:<INPUT TYPE="text" VALUE="Coper Pepito" READONLY/></LABEL>
<BR/>
<LABEL>My Province:<INPUT TYPE="text" VALUE="Tuburan, Cebu"/></LABEL> <BR />
<LABEL>My Favorite Color:<INPUT TYPE="text" VALUE="Pink" SIZE="7"/></LABEL>
<BR />
<LABEL>My Sex Status:<INPUT TYPE="radio" NAME="OptionButton1" VALUE="M"
CHECKED="checked">Male
<INPUT TYPE="radio" NAME="OptionButton1" VALUE="F" DISABLED>Female
</FIELDSET>
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>
 147

2. Now save the script with the filename: form9.htm.

3. To run the script, double-click the form9.htm file with the big E icon.

Sample Output:

Explanation:

See? The FIELDSET and LEGEND tags can make our presentation more appealing and
attractive. Now, to test if indeed we have applied successfully the READONLY attribute at the
My Name text box, let us try to change my name (Coper Pepito) into your own name. Believe
me, you cannot change or modify it. How about my favorite color? Since we have not applied
the READONLY attribute into the text box of My Favorite Color, then you can change the value
“Pink” into “Blue”. Try it! How about clicking the Female option for the My Sex Status? Believe
me, again. You cannot change my sex status from Male into Female. Am I right? Well, because
we applied the DISABLED attribute to the Female radio button.

Example 10:

Design and develop an HTML script that will show how to apply the Submit Query and Reset
buttons. Follow the design specification below:

Credit Card Application Pre-Qualifying Survery

Enter Name:

Select Sex: Male Female

Select your yearly salary: Under P200,000

Submit Query Reset

 148

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H4>Credit Card Application Pre-Qualifying Survey </H4>
<FORM NAME="Form1">
Enter Name: <INPUT TYPE="text" NAME="TextField1" SIZE="32" MAXLENGTH="80">
<P>
Select Sex: <INPUT TYPE="radio" NAME="RadioButton1" VALUE="M"> Male
<INPUT TYPE="radio" NAME="RadioButton2" VALUE="F"> Female <P>
Select your yearly salary:
<SELECT NAME="Salary1" SIZE="1">
<OPTION> Under P200,000
<OPTION> P200,001 to P400,000
<OPTION> P400,001 and higher
</SELECT>
<P>
<INPUT TYPE="Submit">
<INPUT TYPE="Reset">
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: form10.htm.

3. To run the script, double-click the form10.htm file with the big E icon.

Sample Output:
 149

Explanation:

You can observe in our script above that it is so easy to apply the Submit Query and Reset
buttons. We usually apply these two buttons when creating a survey form or anything that
requires a data-gathering through our website. Now, to make our HTML script truly workable
and functional in real-world application, we really have to apply the POST attribute for our Form
Method such as the following script below:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H4>Credit Card Application Pre-Qualifying Survey </H4>
<FORM NAME="Form1" FORM METHOD=”post”
ACTION=”http://www.mycompany.com/collectinfo”>
Enter Name: <INPUT TYPE="text" NAME="TextField1" SIZE="32" MAXLENGTH="80">
<P>
Select Sex: <INPUT TYPE="radio" NAME="RadioButton1" VALUE="M"> Male
<INPUT TYPE="radio" NAME="RadioButton2" VALUE="F"> Female <P>
Select your yearly salary:
<SELECT NAME="Salary1" SIZE="1">
<OPTION> Under P200,000
<OPTION> P200,001 to P400,000
<OPTION> P400,001 and higher
</SELECT>
<P>
<INPUT TYPE="Submit">
<INPUT TYPE="Reset">
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

We highlighted the Form Method attribute and its corresponding Action attribute by making the
script in bold-face. There is also another way of collecting data from our website. This is by
using the E-mail such as the following script below:

<!DOCTYPE html>
 150

<HTML>
<HEAD>
<TITLE>HTML5 Form Example</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H4>Credit Card Application Pre-Qualifying Survey </H4>
<FORM NAME="Form1" FORM METHOD=”post”
ACTION=”mailto:coperpepito@hotmail.com”>
Enter Name: <INPUT TYPE="text" NAME="TextField1" SIZE="32" MAXLENGTH="80">
<P>
Select Sex: <INPUT TYPE="radio" NAME="RadioButton1" VALUE="M"> Male
<INPUT TYPE="radio" NAME="RadioButton2" VALUE="F"> Female <P>
Select your yearly salary:
<SELECT NAME="Salary1" SIZE="1">
<OPTION> Under P200,000
<OPTION> P200,001 to P400,000
<OPTION> P400,001 and higher
</SELECT>
<P>
<INPUT TYPE="Submit">
<INPUT TYPE="Reset">
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

Again, we highlighted the Form Method attribute and its corresponding Action attribute by
making the script in bold-face.
 151

LAB ACTIVITY
TEST 4

1.Design and develop an HTML script that will show how to apply the OPTGROUP tag. Follow
the design specification below:

Sagoo Foods
Café Latte

Coffee
Café Latte
Café Mocha
Café Java
Hazelnut Cappuccino
Café Barako
Chocolate
Hot Cocoa
Choco Crumble
Choc Nut
Choco-Caramel
Cookies & Cream
Desserts
Black Forest
Buko Pandan
Crème Brulee
Fruit Salad
Macaroni Salad
Banana Split
Leche Flan
 152

2.Design and develop an HTML script that will show how to apply all the given Form controls.
Follow the design specification below:

Kuya Kim’s Animal Clinic Survey

Name:
Text boxes
Cell-phone no. :

E-mail address:

Your pets at home:

Dog Cat Bird Fish

Your favorite pet? :

Dog Cat Bird Fish

Your cell-phone network: Smart

Globe Selection List
Sun
Red Mobile

Comments:
Type here your comments… Text Area

Submit Query Reset Buttons

 153

Chapter 6
Learning Cascading Style Sheets

To put it simply: HTML provides our Web pages their basic structures, while Cascading Style
Sheets (CSS) defines their appearance. Furthermore, CSS is simply a text file that contains one
or more rules that determine through properties and values how certain elements in our Web
page should be displayed. In other words, CSS is nothing more than a rule the Web browser
follows to render a particular HTML tag’s contents.
There are CSS properties for controlling such basic formatting as font color or size, layout
properties such as floating letters or the positioning of them, and print controls.

The CSS Syntax

A CSS rule is made up of at least two basic parts: a selector, which is the name of the HTML
tag name (markup element) that the style rule affects, followed by a pair of curly braces ({ }) –
enclosed, semi-colon separated list of one or more style property:value pairs. Here is the basic
syntax:

SELECTOR {PROPERTY1: value; PROPERTY2: value; PROPERTYn: valueN;}

For example, we might define the COLOR property for the contents of all the level-1 header
elements of our document to be the value red, such as the following:

H1 {COLOR: red}

In the above example, H1 is the selector, which at the same time the name of the level-1 header
element, COLOR is the CSS property and red is its corresponding value.

Sample 1:

This HTML script will demonstrate how the CSS works on formatting the color of different
levels of the heading <H> tags.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Headings Sample 1</TITLE>
<STYLE TYPE="text/css">
H1 {COLOR: red}
 154

H2 {COLOR: green}
H3 {COLOR: blue}
H4 {TEXT-ALIGN:center; FONT-STYLE: italic}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
Reccommended levels of headings:
<BR>
<H1>1st Level Heading </H1>
<H2>2nd Level Heading </H2>
<H3>3rd Level Heading </H3>
<H2>2nd Level Heading Again!</H2>
<H4>4th Level Heading? May ganun???</H4>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: css1a.htm.

3. To run the script, double-click the css1a.htm file with the big E icon.

Sample Output:

Explanation:

In our example above, H1, H2, H3, and H4 are the selectors, while the COLOR is the CSS
property with their corresponding value: red, green, and blue. We declared our CSS within the
pair of <HEAD> and </HEAD> tags, as you could observed it in our script below:
.
.
<HEAD>
<TITLE>Headings Sample 1</TITLE>
<STYLE TYPE="text/css">
 155

H1 {COLOR: red}
H2 {COLOR: green}
H3 {COLOR: blue}
H4 {TEXT-ALIGN:center; FONT-STYLE: italic}
</STYLE>
</HEAD>
.
.

Sample 2:

This HTML script will demonstrate how the CSS works on formatting the first line of each
paragraph in the Web page by making it in italic and at the same time making its font-size bigger
than the succeeding lines.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>SECTION Element Example</TITLE>
<STYLE TYPE="text/css">
P:first-line {FONT-SIZE: 110%; FONT-STYLE: italic}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<P>Oracle is the world’s largest business software company, with
more than 320,000 customers – including 100 of the Fortune 100 –
representing a variety f sizes and industries in more than 145
countries around the globe. </P>
</ARTICLE>
<ARTICLE>
<P>Thousands of large and midsize organizations from every industry
around the world use Oracle products to transform their businesses
and achieve greater success.</P>
</ARTICLE>
<UL>
<LI>World’s number 1 database </LI>
<LI>World’s number 1 application platform suites </LI>
</UL>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: css1b.htm.

3. To run the script, double-click the css1b.htm file with the big E icon.
 156

Sample Output:

Explanation:

As you could see it in our sample output above, the first line of the paragraph was displayed in
bigger font-size and was written in italic. The following script accomplishes the task:
.
.
<HEAD>
<TITLE>SECTION Element Example</TITLE>
<STYLE TYPE="text/css">
P: first-line {FONT-SIZE: 110%; FONT-STYLE: italic}
</STYLE>
</HEAD>
.
.

Sample 3:

This HTML script will demonstrate how the CSS works on formatting the first letter of each
paragraph in the Web page by making its font-size bigger (200 percent) than the other letters,
and at the same time to float the first bigger letter to the left side.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
 157

<HTML>
<HEAD>
<TITLE>SECTION Element Example</TITLE>
<STYLE TYPE="text/css">
P:first-letter {FONT-SIZE: 200%; FLOAT: left}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<P>Oracle is the world’s largest business software company, with
more than 320,000 customers – including 100 of the Fortune 100 –
representing a variety f sizes and industries in more than 145
countries around the globe. </P>
</ARTICLE>
<ARTICLE>
<P>Thousands of large and midsize organizations from every industry
around the world use Oracle products to transform their businesses
and achieve greater success.</P>
</ARTICLE>
<UL>
<LI>World’s number 1 database </LI>
<LI>World’s number 1 application platform suites </LI>
</UL>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: css1c.htm.

3. To run the script, double-click the css1c.htm file with the big E icon.

Sample Output:
 158

Explanation:

Obviously, you can see it that the first letter of each paragraph in our Web page was 200 percent
bigger than the rest, and it seems that the letter floats at the left side. The following script
accomplishes the task:
.
.
<STYLE TYPE="text/css">
P:first-letter { FONT-SIZE: 200%; FLOAT: left }
</STYLE>
.
.

Sample 4:

This HTML script will demonstrate how the CSS works on formatting how to float the header
text.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSS Float Property Example</TITLE>
<STYLE TYPE="text/css">
H2 {float: left;text-align: center; margin-right: 12px }
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H2>Beautiful Flowers</H2>
We are continually amazed at the beautiful and
lovely flowers that can be found in the CLIPART folder of
Microsoft Office 2007. They are so very attractive that we
cannot resist putting them right here in our web page.
They are what the girl's want to receive.
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: cssfloat1a.htm.

3. To run the script, double-click the cssfloat1a.htm file with the big E icon.
 159

Sample Output:

Explanation:

We were able to create a “run-in” header using the float CSS rule, with the text flowing around
the header text. In our example, the header text is “Beautiful Flowers”. To accomplish this task,
we need the following script snippet:
.
.
<STYLE TYPE="text/css">
H2 {float: left;text-align: center; margin-right: 12px }
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H2>Beautiful Flowers</H2>
We are continually amazed at the beautiful and
lovely flowers that can be found in the CLIPART folder of
Microsoft Office 2007. They are so very attractive that we
cannot resist putting them right here in our web page.
They are what the girl's want to receive.
</ARTICLE>
.
.

Example 1:

This HTML script will demonstrate how the CSS works on letting us identify where in our
document we can insert generated content such as list numbers. Use the BEFORE tag.
 160

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 CSS Example</TITLE>
<STYLE TYPE="text/css">
ul {counter-reset: item; list-style: none}
ul li:before {content: "Item #" counters(item,".") ". ";
counter-increment: item}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<UL>
<LI> Item number 1.
<UL>
<LI> Sub-item number 1.1.</LI>
</UL>
<LI> Item number 2.
<UL>
<LI> Sub-item number 2.1.</LI>
<LI> Sub-item number 2.2.</LI>
</UL>
<LI> Item number 3.</LI>
<UL>
<LI> Sub-item number 3.1.</LI>
<LI> Sub-item number 3.2.</LI>
<LI> Sub-item number 3.3.</LI>
</UL>
</UL>

</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: css1d.htm.

3. To run the script, double-click the css1d.htm file with the big E icon.

Sample Output:
 161

Explanation:

To produce the generated list-numbers (Item #), we just apply the content and counter pseudo-
elements of CSS, such as the following script:
.
.
<HEAD>
<TITLE>HTML5 CSS Example</TITLE>
<STYLE TYPE="text/css">
ul {counter-reset: item; list-style: none}
ul li:before {content: "Item #" counters(item,".") ". ";
counter-increment: item}
</STYLE>
</HEAD>
.
.
The <LI> tags for the items must not be terminated with the closing </LI> tag so that the
increment-counter for these items must continue to increase by 1 (increment by 1). But, we have
to terminate each <LI> tag with the closing </LI> for each sub-item so that the “incrementation”
will stop to the specific sub-item group. Otherwise, it will include to increment the succeeding
items that follows. Try to analyze the following snippet of our script below:
.
.
<LI> Item number 1. No termination of the <LI> tag
<UL>
<LI> Sub-item number 1.1.</LI> With termination
</UL>
.
.
 162

Example 2:

This HTML script will demonstrate how the CSS works on letting us identify where in our
document we can insert generated content such as list numbers. This time, we will add color-
formatting to visually separate the generated list numbers from other text. The generated list
numbers should be colored with Red color, while the rest of the text should be colored with Blue
color. Use the BEFORE tag.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>HTML5 CSS Example</TITLE>
<STYLE TYPE="text/css">
ul { counter-reset: item; list-style: none; color: blue}
ul li:before {content: "Item #" counters(item,".") ". "; counter-increment:
item; color: red}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<UL>
<LI> Item number 1.
<UL>
<LI> Sub-item number 1.1.</LI>
</UL>
<LI> Item number 2.
<UL>
<LI> Sub-item number 2.1.</LI>
<LI> Sub-item number 2.2.</LI>
</UL>
<LI> Item number 3.</LI>
<UL>
<LI> Sub-item number 3.1.</LI>
<LI> Sub-item number 3.2.</LI>
<LI> Sub-item number 3.3.</LI>
</UL>
</UL>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: css1z.htm.

3. To run the script, double-click the css1z.htm file with the big E icon.
 163

Sample Output:

Explanation:

By adding the COLOR tag in our CSS, we were able to color all the generated list numbers with
Red color, while the remaining text were colored as Blue. To accomplish this given task, we
should have the following HTML script snippets:
.
.
<STYLE TYPE="text/css">
ul { counter-reset: item; list-style: none; color: blue}
ul li:before {content: "Item #" counters(item,".") ". ";
counter-increment: item; color: red}
</STYLE>
.
.
As you could observed, the script is so very simple and easy to implement.

Example 3:

Design and develop an HTML script that will show the nested ordered lists without using the
CSS first, then using the CSS the next time around. Follow the design specification below:
 164

Ordered Lists Demonstration with CSS

I. Top Level Item
II. Another Top Level Item
A. A 2nd Level Item
B. Another 2nd Level Item
1. A 3rd Level Item
2. Another 3rd Level Item
a. A 4th Level Item
b. Another 4th Level Item
C. Another 2nd Level Item again?
III. A Top Level Item again!

This is a Sample Outline

Solution: Without the CSS

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Nested Ordered Lists</TITLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H3><FONT COLOR="green"> Ordered Lists Demonstration </FONT></H3>
<OL TYPE="I">
<LI>Top Level Item
<LI>Another Top Level Item
<OL TYPE="A">
<LI>A 2nd Level Item
<LI>Another 2nd Level Item
<OL TYPE="1">
<LI>A 3rd Level Item
<LI>Another 3rd Level Item
<OL TYPE="a">
<LI>A 4rth Level Item
<LI>Another 4rth Level Item
</OL>
</OL>
<LI>Another 2nd Level Item again?
</OL>
<LI>A Top Level Item again!
</OL>
This is a <B>Sample Outline</B>
</ARTICLE>
 165

</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: css1e.htm.

3. To run the script, double-click the css1e.htm file with the big E icon.

Sample Output:

Explanation:

Without the application of Cascading Style Sheet (CSS), we need to format our ordered lists with
the OL TYPE tags. You will notice that the top level item is in roman numerals, therefore, we
need to format them with <OL TYPE=”I”> tag. Now, in our second level, we used the
alphabetical letters, therefore, we need to format them using <OL TYPE=”A”> tag. In our third
level item, we need to format them with <OL TYPE=”1”> tag to display the numbered list in
decimal number representation. Lastly, we need to format the fourth level item with lowercase
alphabet using the <OL TYPE=”a”> tag. This is how to generate roman numerals, alphabetical
orders (both uppercase and lowercase), and decimal number representation of our ordered lists.
Observed how we format them respectively in our script below:
.
.
<OL TYPE="I"> Roman numeral tag formatting
<LI>Top Level Item
<LI>Another Top Level Item
<OL TYPE="A"> Upper-Alphabetical tag formatting
<LI>A 2nd Level Item
<LI>Another 2nd Level Item
<OL TYPE="1"> Decimal number tag formatting
<LI>A 3rd Level Item
 166

<LI>Another 3rd Level Item

<OL TYPE="a"> Lower-Alphabetical formatting
<LI>A 4rth Level Item
<LI>Another 4rth Level Item
</OL>
</OL>
<LI>Another 2nd Level Item again?
</OL>
<LI>A Top Level Item again!
</OL>
.
.
Now this time, compare our second solution below using the Cascading Style Sheet (CSS):

Solution: Using CSS

1.At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Nested Ordered Lists with CSS</TITLE>
<STYLE TYPE="text/css">
H3 {COLOR: green}
OL LI {LIST-STYLE: upper-roman}
OL OL LI {LIST-STYLE: upper-alpha}
OL OL OL LI {LIST-STYLE: decimal}
OL OL OL OL LI {LIST-STYLE: lower-alpha}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H3>Ordered Lists Demonstration with CSS</H3>
<OL>
<LI>Top Level Item
<LI>Another Top Level Item
<OL>
<LI>A 2nd Level Item
<LI>Another 2nd Level Item
<OL>
<LI>A 3rd Level Item
<LI>Another 3rd Level Item
<OL>
<LI>A 4rth Level Item
<LI>Another 4rth Level Item
</OL>
</OL>
<LI>Another 2nd Level Item again?
</OL>
<LI>A Top Level Item again!
</OL>
This is a <B>Sample Outline</B>
 167

</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: css1f.htm.

3. To run the script, double-click the css1f.htm file with the big E icon.

Sample Output:

Explanation:

The most noticeable in our solution with Cascading Style Sheet is that we declare all our style-
sheet formatting at the heading tags (<HEAD>) of our HTML script as you could observe below:
.
.
<HEAD>
<TITLE>Nested Ordered Lists with CSS</TITLE>
<STYLE TYPE="text/css">
H3 {COLOR: green}
OL LI {LIST-STYLE: upper-roman}
OL OL LI {LIST-STYLE: upper-alpha}
OL OL OL LI {LIST-STYLE: decimal}
OL OL OL OL LI {LIST-STYLE: lower-alpha}
</STYLE>
</HEAD>
.
.
We specify here that the first level (OL LI) of our ordered lists should be formatted with upper-
roman numerals (LIST-STYLE: upper-roman), then the second level (OL, OL, LI) should be
 168

formatted with upper-alphabetical letters (LIST-STYLE: upper-alpha). Now, the third level (OL,
OL, OL, LI) should be formatted with decimal numbers (LIST-STYLE: decimal), and lastly, the
fifth level (OL, OL, OL, OL, LI) should be formatted with lower-alphabetical letters (LIST-
STYLE: lower-alpha). That’s how we apply the CSS here in our ordered lists.
Now, let us visit the remaining script below on what happen with them after the CSS was
applied:
.
.
<OL>
<LI>Top Level Item
<LI>Another Top Level Item
<OL>
<LI>A 2nd Level Item
<LI>Another 2nd Level Item
<OL>
<LI>A 3rd Level Item
<LI>Another 3rd Level Item
<OL>
<LI>A 4rth Level Item
<LI>Another 4rth Level Item
</OL>
</OL>
<LI>Another 2nd Level Item again?
</OL>
<LI>A Top Level Item again!
</OL>
.
.
See? The OL TYPE tags formatting were all gone. No need to specify the OL TYPE = “?” tags
again!

Example 4:

Design and develop an HTML script that will show the nested ordered lists using the CSS, then
add color-formatting to visually identify each separate list. Follow the design specification
below:
 169

Ordered Lists Demonstration with CSS

I. Top Level Item
II. Another Top Level Item
A. A 2nd Level Item
B. Another 2nd Level Item
1. A 3rd Level Item
2. Another 3rd Level Item
a. A 4th Level Item
b. Another 4th Level Item
C. Another 2nd Level Item again?
III. A Top Level Item again!

This is a Sample Outline

Solution: Without the CSS

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Nested Ordered Lists with CSS</TITLE>
<STYLE TYPE="text/css">
H3 {COLOR: green}
OL LI {LIST-STYLE: upper-roman}
OL OL LI {LIST-STYLE: upper-alpha}
OL OL OL LI {LIST-STYLE: decimal}
OL OL OL OL LI {list-style: lower-alpha}

OL LI {COLOR:blue}
OL OL LI {COLOR:red}
OL OL OL LI {COLOR: orange}
OL OL OL OL LI {COLOR: pink}

</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H3>Ordered Lists Demonstration with CSS</H3>
<OL>
<LI>Top Level Item
<LI>Another Top Level Item
<OL>
<LI>A 2nd Level Item
<LI>Another 2nd Level Item
 170

<OL>
<LI>A 3rd Level Item
<LI>Another 3rd Level Item
<OL>
<LI>A 4rth Level Item
<LI>Another 4rth Level Item
</OL>
</OL>
<LI>Another 2nd Level Item again?
</OL>
<LI>A Top Level Item again!
</OL>
This is a <B>Sample Outline</B>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: css1g.htm.

3. To run the script, double-click the css1g.htm file with the big E icon.

Sample Output:
 171

Explanation:

We specify here that the first level (OL LI) of our ordered lists should be formatted with upper-
roman numerals (LIST-STYLE: upper-roman), then the second level (OL, OL, LI) should be
formatted with upper-alphabetical letters (LIST-STYLE: upper-alpha). Now, the third level (OL,
OL, OL, LI) should be formatted with decimal numbers (LIST-STYLE: decimal), and lastly, the
fifth level (OL, OL, OL, OL, LI) should be formatted with lower-alphabetical letters (LIST-
STYLE: lower-alpha). That’s how we apply the CSS here in our ordered lists as you can observe
the code below:
.
.
OL LI {LIST-STYLE: upper-roman}
OL OL LI {LIST-STYLE: upper-alpha}
OL OL OL LI {LIST-STYLE: decimal}
OL OL OL OL LI {list-style: lower-alpha}
.
.
Now, since we need to format each list with color, we have the following added CSS script:
.
.
OL LI {COLOR:blue}
OL OL LI {COLOR:red}
OL OL OL LI {COLOR: orange}
OL OL OL OL LI {COLOR: pink}
.
.
Can you see it? It’s very simple, isn’t it? Actually, we can even put the color-formatting right at
the first CSS script above. In other words, combining them (CSS list-style and color) in one
declaration only such as the script below:
.
.
OL LI {LIST-STYLE: upper-roman; COLOR: blue}
OL OL LI {LIST-STYLE: upper-alpha; COLOR: red}
OL OL OL LI {LIST-STYLE: decimal; COLOR: orange}
OL OL OL OL LI {list-style: lower-alpha; COLOR: pink}
.
.
So, if you want to run the foregoing solution, write the following HTML script at the Notepad:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Nested Ordered Lists with CSS</TITLE>
<STYLE TYPE="text/css">
H3 {COLOR: green}
OL LI {LIST-STYLE: upper-roman; COLOR: blue}
 172

OL OL LI {LIST-STYLE: upper-alpha; COLOR: red}

OL OL OL LI {LIST-STYLE: decimal; COLOR: orange}
OL OL OL OL LI {list-style: lower-alpha; COLOR: pink}

</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H3>Ordered Lists Demonstration with CSS</H3>
<OL>
<LI>Top Level Item
<LI>Another Top Level Item
<OL>
<LI>A 2nd Level Item
<LI>Another 2nd Level Item
<OL>
<LI>A 3rd Level Item
<LI>Another 3rd Level Item
<OL>
<LI>A 4rth Level Item
<LI>Another 4rth Level Item
</OL>
</OL>
<LI>Another 2nd Level Item again?
</OL>
<LI>A Top Level Item again!
</OL>
This is a <B>Sample Outline</B>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

Then, finally, save it - for your heart’s content.

Example 5:

This HTML script will demonstrate how the CSS Regular Classes works. Supposing, in a
technical paper that we would like to present (web-based presentation), we want to define one
paragraph style for the abstract, another for mathematical equations, and a third for centered
quotations.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSS for Technical Paper</TITLE>
 173

<STYLE TYPE="text/css">
P.abstract {font-style: italic;
margin-left: 0.7cm;
margin-right: 0.7cm}
P.equation {font-family: Symbol;
text-align: center}
H4, P.centered {text-align: center;
margin-left: 0.7 cm;
margin-right: 0.7 cm}
</STYLE>

</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<P CLASS = abstract>

Usually, the technical paper has an Abstract part wherein we
format it with "italic" font. And usually, the margins are
indented. Let's pretend that this is it!
</P>

<H4>The equation formatting in HTML is somewhat unpredictable!</H4>

<P CLASS=equation>

b = c + 1

</P>

<P CLASS=centered>

Bill Gates said, "Power comes not from knowledge kept, but from
knowledge shared."

</P>

</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: cssclass1a.htm.

3. To run the script, double-click the cssclass1a.htm file with the big E icon.

Sample Output:
 174

Explanation:

We could observed that in our example above, to define a CSS class is simply a matter of
appending a period-separated class name as suffix to the tag name, and at the same time as the
selector in the style rule.
The first rule in our example creates a class of paragraph styles named abstract whose text is
italic and indented from left and right margins by 0.7 centimeters, as you could notice here in our
script snippet below:
.
.
<STYLE TYPE="text/css">
P.abstract {font-style: italic;
margin-left: 0.7cm;
margin-right: 0.7cm}
.
.

The second rule creates a class of paragraph styles named equation which also instructs the
Internet browser to center the text and to use the Symbol typeface to display the text:
.
.
P.equation {font-family: Symbol;
text-align: center}
.
.
 175

And our last style rule creates a style with centered text and 0.7-centimeter margins (both left
and right), applying this style to all level-4 headers as well as creating a class of the <P> tag
named centered with that style:
.
.
H4, P.centered {text-align: center;
margin-left: 0.7 cm;
margin-right: 0.7 cm}
</STYLE>
.
.

Example 6:

This HTML script will demonstrate how the CSS Background-image formatting class works. We
will simply put a background-image to the first list, and to leave the second list as normally
presented.

Note:
Get the image of the cloud from Microsoft Office 2007 (or probably other version), in ClipArt
folder, and in PUB60COR sub-folder. The filename is: WB01304G.GIF. The Microsoft Office
2007 is under the Program Files folder. Then, place (copy and paste) the image to the folder (or
directory) where you put (saved) all your HTML script files.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSS Background Image</TITLE>
<STYLE TYPE="text/css">
LI.cloud {background-image: url(WB01304G.gif)}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H4>Here's our lunch today:</H4>

<UL>
<LI CLASS="cloud">Inasal na Manok</LI>
<LI CLASS="cloud">Lechong Baboy</LI>
<LI CLASS="cloud">Tinolang Itik</LI>
<LI CLASS="cloud">Choice of Pineapple or Mangoe Shake</LI>
</UL>
<H4>And our dessert:</H4>
 176

<UL>
<LI>Leche Flan (Yummy!)</LI>
<LI>Cassava Cake (Salap!!!) </LI>
</UL>

</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: cssbackground1a.htm.

3. To run the script, double-click the cssbackground1a.htm file with the big E icon.

Sample Output:

Explanation:

Our CSS rule here defines a list-item class that places a cloud background behind the first list-
item <LI> tags that use the CLASS=”cloud” attribute, as shown here in our script snippet:
.
.
<UL>
<LI CLASS="cloud">Inasal na Manok</LI>
<LI CLASS="cloud">Lechong Baboy</LI>
<LI CLASS="cloud">Tinolang Itik</LI>
<LI CLASS="cloud">Choice of Pineapple or Mangoe Shake</LI>
 177

</UL>
.
.
Now, we declare our CSS background image formatting class with the following script snippet:
.
.
<STYLE TYPE="text/css">
LI.cloud {background-image: url(WB01304G.gif)}
</STYLE>
.
.
Very simple, isn’t it?

Example 7:

This HTML script will demonstrate how the CSS Background-image formatting class works. We
will simply put a background-image to the first list and to format the second list-item with square
bullet.

Note:
Get the image of the cloud from Microsoft Office 2007 (or probably other version), in ClipArt
folder, and in PUB60COR sub-folder. The filename is: WB01304G.GIF. The Microsoft Office
2007 is under the Program Files folder. Then, place (copy and paste) the image to the folder (or
directory) where you put (saved) all your HTML script files.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSS Background Image 2</TITLE>
<STYLE TYPE="text/css">
UL.cloud {background-image: url(WB01304G.gif)}
OL.square {list-style-type: square}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H4>Here's our lunch today:</H4>

<UL CLASS="cloud">
<LI>Inasal na Manok</LI>
<LI>Lechong Baboy</LI>
<LI>Tinolang Itik</LI>
 178

<LI>Choice of Pineapple or Mangoe Shake</LI>

</UL>
<H4>And our dessert:</H4>

<OL CLASS="square">
<LI>Leche Flan (Yummy!)</LI>
<LI>Cassava Cake (Salap!!!) </LI>
</OL>

</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: cssbackground1b.htm.

3. To run the script, double-click the cssbackground1b.htm file with the big E icon.

Sample Output:

Explanation:

Eventhough we can apply list properties to any element, they affect only the appearance of
elements whose display property is set to list-item. Normally, the only tag with this property is
the <LI> tag. However, this should not limit us from using these properties elsewhere,
particularly with the <UL> and <OL> tags. Since these properties are inherited by elements
whose parents have them set, modifying a list property for the <UL> and <OL> tags
 179

subsequently modifies it for all the <LI> tags contained within that list, as you could observed
them in our script snippet below:
.
.
<H4>Here's our lunch today:</H4>
<UL CLASS="cloud">
<LI>Inasal na Manok</LI>
<LI>Lechong Baboy</LI>
<LI>Tinolang Itik</LI>
<LI>Choice of Pineapple or Mangoe Shake</LI>
</UL>
<H4>And our dessert:</H4>

<OL CLASS="square">
<LI>Leche Flan (Yummy!)</LI>
<LI>Cassava Cake (Salap!!!) </LI>
</OL>
.
.

This makes it much easier to define lists with a particular appearance, isn’t it? Well, in
comparison to our previous example. I bet, you will agree!
Here is now our CSS rule:
.
.
<STYLE TYPE="text/css">
UL.cloud {background-image: url(WB01304G.gif)}
OL.square {list-style-type: square}
</STYLE>
.
.
You will notice that we were able to modify the CSS rule declaration easily. Without any sweat
in our part.
This is more useful when we apply this one to the FORM control of HTML which involves a lot
of option groupings or selection list groupings. For instance, we can apply a CSS rule that colors
all provinces in Luzon with Red, then Green for Visayas provinces, and Blue color for Mindanao
provinces. Applying the power of CSS, we can simply accomplish this task with lesser script and
easier to maintain or enhance.
Want to see it in action? That will be our next example. Nothing less.

Example 8:

Design and develop an HTML script that will show how to apply the OPTGROUP tag. This
time, apply the power of CSS to color the Luzon provinces with Red color, then Green color for
 180

Visayas provinces, and lastly color the Mindanao provinces with Blue color. Follow the design
specification below:

Philippine Islands
Bulacan

Luzon
Bulacan
Laguna
Ilocos
Batangas
Bataan
Isabela
Pampanga
Visayas
Iloilo
Aklan
Leyte
Zamar
Negros
Cebu
Bohol
Mindanao
Davao
Cotabato
Maguindanao
Bukidnon
Lanao
Agusan
Misamis

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Form with CSS Example</TITLE>
<STYLE TYPE="text/css">
OPTGROUP.color1 {COLOR: red}
OPTGROUP.color2 {COLOR: green}
OPTGROUP.color3 {COLOR: blue}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>
<H4>Philippine Islands</H4
<FORM NAME="Form1">
<SELECT NAME="Philippines">
<OPTGROUP LABEL="Luzon" CLASS="color1">
 181

<OPTION>Bulacan</OPTION>
<OPTION>Laguna</OPTION>
<OPTION>Ilocos</OPTION>
<OPTION>Batangas</OPTION>
<OPTION>Bataan</OPTION>
<OPTION>Isabela</OPTION>
<OPTION>Pampanga</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Visayas" CLASS="color2">
<OPTION>Iloilo</OPTION>
<OPTION>Aklan</OPTION>
<OPTION>Leyte</OPTION>
<OPTION>Zamar</OPTION>
<OPTION>Negros</OPTION>
<OPTION>Cebu</OPTION>
<OPTION>Bohol</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Mindanao" CLASS="color3">
<OPTION>Davao</OPTION>
<OPTION>Cotabato</OPTION>
<OPTION>Maguindanao</OPTION>
<OPTION>Bukidnon</OPTION>
<OPTION>Lanao</OPTION>
<OPTION>Agusan</OPTION>
<OPTION>Misamis</OPTION>
</OPTGROUP>
</SELECT>
</FORM>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: cssform8a.htm.

3. To run the script, double-click the cssform8a.htm file with the big E icon.

Sample Output:
 182

Explanation:

With the use of CSS, we can easily modify or enhance our HTML script since the CSS rule
declaration is at the top part of our script (or saved from other files or folders or imported from a
particular website). What we have to do is simply go to the top of our script or to external file
(that contains our script) then modify the CSS rules to suit the need or requirements of our client.
Here is now our CSS rule:
.
.
<STYLE TYPE="text/css">
OPTGROUP.color1 {COLOR: red}
OPTGROUP.color2 {COLOR: green}
OPTGROUP.color3 {COLOR: blue}
</STYLE>
 183

.
.
Now to put the CSS in effect for the Luzon provinces, we have the following snippet of our
script:
.
<OPTGROUP LABEL="Luzon" CLASS="color1">
.
Then for the Visayas provinces:
.
<OPTGROUP LABEL="Visayas" CLASS="color2">
.
Lastly, for the Mindanao provinces:
.
<OPTGROUP LABEL="Mindanao" CLASS="color3">
.
See? This is how we can apply the power of CSS to our script!
How about applying this power of the CSS to our Table control? Can we do it? Definitely yes!
And it is easy too. As usual, we have to see it in action. So, let’s do it now!

Example 9:

Design and develop an HTML script that will demonstrate how to add a border in our table with
a Red border color. This time, we have to apply the power of the CSS by adding two colors for
the text inside our table. Now, first we have to color the table header (<TH>) tags with Blue
color, while the remaining table data (<TD>) tags should be colored with Green color. Follow
the design specification below:

Sample Table
Cebu Chicken Inasal Information

Food Additional Information

Type Local Term Description Classification

Petso Chicken Breast Main Dish

Meat Paa Chicken Thigh Main Dish
Pakpak Chicken Wings Main Dish
Extras Leche Flan Egg with Milk Dessert

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
 184

<HEAD>
<TITLE>Table with CSS Example</TITLE>
<STYLE TYPE="text/css">
TR.color1 {COLOR: blue}
TR.color2 {COLOR: green}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H3>Sample Table</H3>
<TABLE BORDER=2 BORDERCOLOR="Red">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>
<TR CLASS="color1">
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
<TR CLASS="color2">
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR CLASS="color2">
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR CLASS="color2">
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR CLASS="color2">
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
</TABLE>
</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: csstable8a.htm.

3. To run the script, double-click the csstable8a.htm file with the big E icon.
 185

Sample Output:

Explanation:

Imagine, with the use of CSS we can have more scripting control in our table formatting. Making
it easier to put more fancier color to the text inside our table. And we can accomplish that task
with the following CSS rule:
.
.
<STYLE TYPE="text/css">
TR.color1 {COLOR: blue}
TR.color2 {COLOR: green}
</STYLE>
.
.
Then, to put it into use for the table header (<TH>) tags, we have the following script snippet for
implementation:
.
.
<TR CLASS="color1">
<TH>Type</TH>
<TH>Local Term</TH>
<TH>Description</TH>
<TH>Classification</TH>
</TR>
.
.
 186

And for the remaining table data (<TD>) tags, we have the following script snippet for
implementation:
.
.
<TR CLASS="color2">
<TD ROWSPAN=3>Meat</TD>
<TD>Petso</TD>
<TD>Chicken Breast</TD>
<TD>Main Dish</TD>
</TR>
<TR CLASS="color2">
<TD>Paa</TD>
<TD>Chicken Thigh</TD>
<TD>Main Dish </TD>
</TR>
<TR CLASS="color2">
<TD>Pakpak</TD>
<TD>Chicken Wings</TD>
<TD>Main Dish</TD>
</TR>
<TR CLASS="color2">
<TD>Extras</TD>
<TD>Leche Flan</TD>
<TD>Egg with Milk</TD>
<TD>Dessert</TD>
</TR>
.
.
That’s it! Very easy.
By the way, before I forget, this is the explanation on how to put a Red border into our table:

to put a Red border color in our table, we just add the BORDER=n and
BORDERCOLOR=”Red” attributes to the opening table tag, as you could observe it in our script
below:
.
.
<TABLE BORDER=2 BORDERCOLOR="Red">
<CAPTION ALIGN=TOP><B>Cebu Chicken Inasal Information</B><CAPTION>
<TR>
<TH COLSPAN=2>Food</TH>
<TH COLSPAN=2>Additional Information</TH>
</TR>

.
.
 187

Well, this is just simply a repetition to our Table discussion from the previous chapter.
Nonetheless, we have to put that one here for easy reference and comprehension.

Example 10:

This HTML script will demonstrate how the CSS List-style image formatting class works. We
will simply put an image as a replacement for the usual bulleted list-item.

Note:
Get the image of the cloud from Microsoft Office 2007 (or probably other version), in ClipArt
folder, and in PUB60COR sub-folder. The filename is: WB01300_.GIF. The Microsoft Office
2007 is under the Program Files folder. Then, place (copy and paste) the image to the folder (or
directory) where you put (saved) all your HTML script files.

Solution:

1. At the Microsoft Notepad, write the following script:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSS List-style Image</TITLE>
<STYLE TYPE="text/css">
li {list-style-image: url(WB01300_.gif); list-style-type: square}
</STYLE>
</HEAD>
<BODY>
<SECTION>
<ARTICLE>

<H4>Here's our lunch today:</H4>

<UL>
<LI>Inasal na Manok</LI>
<LI>Lechong Baboy</LI>
<LI>Tinolang Itik</LI>
<LI>Choice of Pineapple or Mangoe Shake</LI>
</UL>
<H4>And our dessert:</H4>
<UL>
<LI>Leche Flan (Yummy!)</LI>
<LI>Cassava Cake (Salap!!!) </LI>
</UL>

</ARTICLE>
</SECTION>
</BODY>
</HTML>

2. Now save the script with the filename: cssliststyle1a.htm.

3. To run the script, double-click the cssliststyle1a.htm file with the big E icon.
 188

Sample Output:

Explanation:

The list-style-image property defines the image that the Internet browser uses to mark a list-
item. The value of this property is the URL of an image file. The image is the preferred list
marker. If it is available, then the Internet browser will display it in place of any other defined
marker, otherwise, the browser will use the conventional square bullet, as we had defined it here
in our CSS rule:
.
.
<STYLE TYPE="text/css">
li {list-style-image: url(WB01300_.gif); list-style-type: square}
</STYLE>
.
.
We really need to give a safe option for the browser, so that if the image failed to load, then the
square bullet will be displayed instead, as the marker of the list-item. This is the very reason why
we put the list-style-type declaration here in our CSS rule. Got it?
 189

LAB ACTIVITY
TEST 5

1.Design and develop an HTML script that will show how to apply the OPTGROUP tag. This
time, apply the power of CSS to color the Coffee group of items with Orange color, then Yellow
color for Chocolate group of items, and lastly color the Desserts group of items with Pink color.
Follow the design specification below:
Sagoo Foods
Café Latte

Coffee
Café Latte
Café Mocha
Café Java
Hazelnut Cappuccino
Café Barako
Chocolate
Hot Cocoa
Choco Crumble
Choc Nut
Choco-Caramel
Cookies & Cream
Desserts
Black Forest
Buko Pandan
Crème Brulee
Fruit Salad
Macaroni Salad
Banana Split
Leche Flan

2.Design and develop an HTML script that will demonstrate how to add a border in our table
with a Pink border color. This time, we have to apply the power of the CSS by adding two
colors for the text inside our table. Now, first we have to color the table header (<TH>) tags with
Orange color, while the remaining table data (<TD>) tags should be colored with Yellow color.
Follow the design specification below:
Tropical Hot Pizza Information
Product More Information
Type Name Description Offering
White Pizza 3 cheese pizza Regular
Margherita pesto, cheese, tomatoes Special
Laing Pizza our local spinach Regular
Pizza Meatzarella just meat, all meat Special
Very Veggie all vegetables / healthy Special
Hawaiian pineapple, tomatoes, meat Special
Buko pandan pandan-flavored coconut Regular
Desserts Sago Gulaman special black sago Regular

Combo All all pizzas and desserts N/A

 190

3.Design and develop an HTML script that will show the nested ordered lists using the CSS, then
add color-formatting to visually identify each separate list. Follow the design specification
below:

Ordered Lists Demonstration with CSS

I. Top Level Item
II. Another Top Level Item
A. A 2nd Level Item
B. Another 2nd Level Item
1. A 3rd Level Item
2. Another 3rd Level Item
a. A 4th Level Item
b. Another 4th Level Item
c. 4th Level Item Again!
C. Another 2nd Level Item again?
III. A Top Level Item again!
IV. The Last Top Level Item, promise.

This is a Sample Outline

 191

Chapter 7
Printing Text on a Web Page Using JavaScript

JavaScript Overview
JavaScript was originally developed by Brendan Eich at Netscape Communications in
1995, the company that releases the first world-renowned web browser called: Netscape
Navigator (now reincarnated as Mozilla Firefox). The JavaScript scripts are included in HTML
(Hypertext Markup Language) document via the HTML <SCRIPT> tag. When a JavaScript–
capable browser such as Internet Explorer or Mozilla Firefox loads an HTML document
containing scripts, it evaluates the scripts as they are encountered. The JavaScript may be used to
define functions called event handlers, to control Java applets, plug-ins, and ActiveX
components or to create HTML elements that are added to the displayed document (page). The
script may define functions for handling events that are generated by user actions such as
handling an event for “clicking a link” or “submitting a form”. The performed actions can be
something like validating the data in a form once it is submitted or loading a new web page or
generating a custom URL (Universal Resource Locator) once the link is clicked.
The JavaScript is a scripting language that supports the development of both server-side
and client-side components of the web-applications. On the server-side, it can be used to develop
web server programs that can process the data submitted by a web browser and then update the
browser’s displayed information. On the client-side, it can be used to develop programs that are
executed by the web browser within the context of a web page.
JavaScript enables us to develop interactive web pages and integrates HTML, XML, Java
applets, ActiveX Controls, server-side scripts and browser plug-ins applications. This will permit
us, as a web developer to design and develop web-based distributed applications for use over the
Internet and the company’s intranet.

In this chapter, we will learn how to print messages on a web page using the
document.write statement. In Object-Oriented Programming (OOP) jargon, this statement using
the dot (.) operator specifies first the object which is the word document while the word write is
the method of the object. The method is the action to be performed on the object.

What JavaScript Can Really Do?

The JavaScript is used by aspiring web developers like us to build dynamic webpages,
create interactive Forms, validate information that the surfer inputs into a form, respond to events
such as a mouse cursor rollover, developing some animation effects, and control the web
browser.
 192

How to Embed JavaScript in HTML

The JavaScript statements are embedded in HTML document by enclosing the statements
between an opening <SCRIPT> tag and a closing </SCRIPT> tag. Within the opening tag, the
LANGUAGE is set to “JavaScript” to identify the script from other scripting language such as
VBScript. Here is the syntax of the script tag below:
.
.
.
<SCRIPT LANGUAGE=”JavaScript”>
JavaScript statements
</SCRIPT>
.
.
.

Now let us have our first example, to learn JavaScript right away.

Example 1:

Design and develop a JavaScript program that will display the text Hello Jenjen! on a web page.
Follow the design specification below:

Hello Jenjen!

Figure 2.1 Displaying text on a web page

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>hello.htm</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello Jenjen!")
</SCRIPT>
</BODY>
</HTML>
 193

2. Now save the script with the filename: hello.htm.

3. To run the script, double-click the hello.htm file with the big E icon.
Note:
The big E icon signifies that the file is an HTML file and runable in Internet Explorer (IE).

Sample Output:

Figure 2.1a Displaying text on a web page Output

Explanation:

Let us now dissect the source code:

<HTML>
<HEAD>
<TITLE>hello.htm</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
.
.
.
The opening script tag <SCRIPT LANGUAGE="JavaScript"> will alert the web browser that
what immediately follows is going to be a JavaScript statement.

.
.
.
document.write("Hello Jenjen!")
</SCRIPT>
 194

</BODY>
</HTML>

Our code has a single statement: document.write("Hello Jenjen!") which writes the text Hello
Jenjen! to the body of the current document object.

Example 2:

Design and develop a JavaScript program that will display the text Goodbye Bianca? on a web
page. Use the head <HEAD> tag to include JavaScript declaration (definition) of variable.
Follow the design specification below:

Goodbye Bianca?

Figure 2.2 Using variable declaration

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>hello1.htm</TITLE>
<SCRIPT LANGUAGE="JavaScript">
vOldlove="Goodbye Bianca?"
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write(vOldlove)
</SCRIPT>
</BODY>
</HTML>

2. Now save the script with the filename: hello1.htm.

3. To run the script, double-click the hello1.htm file with the big E icon.
 195

Sample Output:

Figure 2.2a Using variable declaration Output

Explanation:

Let us now dissect the source code:

<HTML>
<HEAD>
<TITLE>hello1.htm</TITLE>
<SCRIPT LANGUAGE="JavaScript">
vOldlove="Goodbye Bianca?"
.
.
.

The script contained in the document head defines a variable named vOldlove and sets its value
to the string Goodbye Bianca?..
.
.
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write(vOldlove)
</SCRIPT>
</BODY>
</HTML>

Then it writes the value of the vOldlove variable to the current document.

Warning:
Remember that all variables must be declared at the top of the program before they are used,
otherwise an error will occur when our HTML document is loaded by the web browser.
 196

Example 3:

Design and develop a JavaScript program that will display the text Hello Jenjen! and Goodbye
Bianca? on a web page. Use the HTML tag as well as the JavaScript variable declaration within
the JavaScript statement. Follow the design specification below:

Hello Jenjen!

Goodbye Bianca?

Figure 2.3 Using JavaScript to create HTML tags

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>hello2.htm</TITLE>
<SCRIPT LANGUAGE="JavaSCript">
vNewlove="<H1>Hello Jenjen!</H1>"
vOldlove="<P>Goodbye Bianca?</P>"
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write(vNewlove)
document.write(vOldlove)
</SCRIPT>
</BODY>
</HTML>

2. Now save the script with the filename: hello2.htm.

3. To run the script, double-click the hello2.htm file with the big E icon.
 197

Sample Output:

Figure 2.3a Using JavaScript to create HTML tags Output

Explanation:

Let us now dissect the source code:

<HTML>
<HEAD>
<TITLE>hello2.htm</TITLE>
<SCRIPT LANGUAGE="JavaSCript">
vNewlove="<H1>Hello Jenjen!</H1>"
vOldlove="<P>Goodbye Bianca?</P>"
.
.
.
The vNewLove variable contains the heading Hello Jenjen!, which is surrounded by the HTML
heading tag <H1> and </H1>.
The vOldlove variable contains the string value Goodbye Bianca?, which is surrounded by the
HTML paragraph tag <P> and </P>. The paragraph tag marks as a separate paragraph when
displayed on the web.
.
.
.
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write(vNewlove)
 198

document.write(vOldlove)
</SCRIPT>
</BODY>
</HTML>

Then it writes the values of the vNewlove and vOldlove variables to the current document.

Example 4:

Design and develop a JavaScript program that will display the text This is Blue Text! on a web
page. Use the HTML’s Font Color attribute within the JavaScript statement . Follow the design
specification below:

This is Blue Text!

Figure 2.4 Using JavaScript to create HTML’s Font Color attribute

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>bluetxt.htm</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<FONT COLOR='BLUE'>This is Blue text!</FONT>")
</SCRIPT>
</BODY>
</HTML>

2. Now save the script with the filename: bluetxt.htm.

3. To run the script, double-click the bluetxt.htm file with the big E icon.

Sample Output:
 199

Figure 2.4a Creating HTML’s Font Color attribute output

Explanation:

Let us now dissect the source code:

.
.
.
<SCRIPT LANGUAGE="JavaScript">
document.write("<FONT COLOR='BLUE'>This is Blue text!</FONT>")
</SCRIPT>
</BODY>
</HTML>

The <FONT COLOR='BLUE'> is an HTML attribute that specifies what color should the text
be displayed at the web page.

How to Use String Values

A string is simply a series of characters that are enclosed by double (“) or single quotes
(‘). If a string starts with double quote, then it must end with a double quote. And if a string starts
with a single quote, then it must end in a single quote.
When we want to insert a double quote or single quote character in a string, we must
precede it by the backslash symbol (\) escape character. Here are the examples of the use of
backslash symbol to insert quotes into strings:

“People asked Coper, \”Who owns your heart?\””

“It\’s Jenjen\’s property.”

In the first sentence, we want the double quote before the word Who to be displayed at the web
page, as well as the double quote after the question mark (?), so we preceded them with
backslash symbol (\). You will notice also that in the sentence that follows, we want to display
the letter s of the word It’s and the letter s after the name Jenjen’s, so again we preceded them
with backslash (\) symbol.
 200

I think we are ready now to have a running example for this string values. So what are you
waiting for?

Example 5:

Design and develop a JavaScript program that will display the following message:

I asked, "Jenjen, will you marry me?"

She replied, "Yes! I do. "
I hope, she isn’t kidding.

on a web page. Use the correct syntax in using the quotes within strings. Follow the design
specification below:

I asked, "Jenjen, will you marry me?"

She replied, "Yes! I do. "
I hope, she isn’t kidding.

Figure 2.5 Using Quotes within Strings

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>quote.htm</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("I asked, \"Jenjen, will you marry me?\"<BR>")
document.write('She replied, "Yes! I do."<BR>')
document.write('I hope, she isn\’t kidding.')
</SCRIPT>
</BODY>
</HTML>

2. Now save the script with the filename: qoute.htm.

3. To run the script, double-click the qoute.htm file with the big E icon.

Sample Output:
 201

Figure 2.5a Using Quotes within Strings Output

Explanation:

Let us now dissect the source code:

.
.
.
document.write("I asked, \"Jenjen, will you marry me?\"<BR>")
document.write( 'She replied, "Yes! I do. "<BR>' )
document.write( 'I hope, she isn\'t kidding.' )
</SCRIPT>
</BODY>
</HTML>

To insert a single or double quote character in a string, we must precede it by the backslash
symbol(\). This is one of the escape characters used in JavaScript, C/C++, or Java programming
languages.
Note that single quotes do not need to be coded with backslash symbol(\) escape character when
they are used within double quoted strings such as the following implementation:

document.write(“Coper said,\”That’s mine, baby!\”<BR>”)

document.write(“Jenjen snapped back,\”That’s mine too, Lolo!!!\”<BR>”)
document.write(“She added,\”That’s conjugal property!(sob)\””)

Let us run this one in the actual JavaScript program.

 202

Example 6:

Design and develop a JavaScript program that will display the following messages:

Coper said,"That's mine, baby!"

Jenjen snapped back,"That's mine too, Lolo!!!"
She added,"That's conjugal property!(sobs)"

on a web page. Use the correct syntax in using single quote within double quotes strings. Follow
the design specification below:

Coper said,"That's mine, baby!"

Jenjen snapped back,"That's mine too, Lolo!!!"
She added,"That's conjugal property!(sobs)"

Figure 2.6a Using single quote within double quotes

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>quote2.htm</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Coper said,\"That's mine, baby!\"<BR>")
document.write("Jenjen snapped back,\"That's mine too, Lolo!!!\"<BR>")
document.write("She added,\"That's conjugal property!(sobs)\"")
</SCRIPT>
</BODY>
</HTML>

2. Now save the script with the filename: qoute2.htm.

3. To run the script, double-click the qoute2.htm file with the big E icon.

Sample Output:
 203

Figure 2.6a Using single quote within double quotes Output

Explanation:

Let us now dissect the source code:

.
.
.
document.write("Coper said,\"That's mine, baby!\"<BR>")
document.write("Jenjen snapped back,\"That's mine too, Lolo!!!\"<BR>")
document.write("She added,\"That's conjugal property!(sobs)\"")
</SCRIPT>
</BODY>
</HTML>

As I have mentioned in the explanation from the previous example, single quotes do not need to
be coded with backslash symbol (\) (an escape character) when they are used within double
quoted strings.

Coding Convenience By Using The with Statement

The with statement is used to eliminate retyping the name of an object that is to be
referenced in a series of property references and method invocations. The general syntax of the
with statement is as follows:

with (variable_name) {
statements
 204

The variable name identifies the default object to be used with the statements enclosed in braces.
Here is an example of its use:

with (document) {
write(“<H1> With Jenjen, I’m so excited! </H1>”)
write(“<P>”)
write(“With Bianca, I am as silent as a WALL. “)
write(“</P>”)
write(“See? There’s no need to write the word document”)
write(“after the word write”)
}

You will notice that in our code above, there is no need to prefix each write( ) method
invocation with the document object because document is identified in the with statement.
Below is the complete running script for this with statement. Watch it, live!

<HTML>
<HEAD>
<TITLE>with.htm</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
with (document) {
write("<H1>With Jenjen, I'm so excited!</H1>")
write("<P>")
write("With Bianca, I am as silent as a WALL. ")
write("</P>")
write("See? There's no need to write the word 'document'")
write(" after the word 'write'.")
}
</SCRIPT>
</BODY>
</HTML>

Now save the above script with the filename: with.htm.

And then, run it! See? I told you so...it runs. Now what! Joke.

Sample Output:
 205

How to Use Date Object

The Date Object provides a common set of methods such as getMonth( ), getDate( ), and
getFullYear( ), getYear( ), getHours( ) and getMinutes( ) for working with dates and time.

Example 7:

Design and develop a JavaScript program that will display the complete date and time
on a web page. Follow the design specification below:

The complete date now: Tue Apr 05 12:38:58 2020

Figure 2.7 Using the Complete Date Object

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>date1.htm</TITLE>
</HEAD>
<BODY>
 206

<SCRIPT LANGUAGE="JavaScript">
document.write("The complete date now: "+Date())
</SCRIPT>
</BODY>
</HTML>

2. Now save the script with the filename: date1.htm.

3. To run the script, double-click the date1.htm file with the big E icon.

Sample Output:

Figure 2.7a Using the Complete Date Object Output

Explanation:

Let us now dissect the source code:

.
.
.

<SCRIPT LANGUAGE="JavaScript">
document.write("The complete date now: "+Date( ))

.
.
.

We are invoking here the Date object which provides a common set of methods for working with
dates and time. You will see in our web page that the time is printed in the middle of the
complete date. This is how the Date object works.
In our next example, we will tinker the Date object and produce a neat date display, as well as
the time too.
 207

Example 8:

Design and develop a JavaScript program that will display the date on a web page. Follow the
design specification below:

Date today: 4-5-2020

Figure 2.8 Using the Date Methods

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>date5.htm</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
vDatenow=new Date()
with (vDatenow) {
document.write("Date today: ")
document.write((vDatenow.getMonth()+1)+"-"+getDate()+"-"+getFullYear())
}
</SCRIPT>
</BODY>
</HTML>

2. Now save the script with the filename: date5.htm.

3. To run the script, double-click the date5.htm file with the big E icon.

Sample Output:
 208

Figure 2.8a Using the Date Method’s Output

Explanation:

Let us now dissect the source code:

.
.
.
vDatenow=new Date( )
with (vDatenow) {
document.write("Date today: ")
document.write((vDatenow.getMonth( )+1)+"-"+getDate( )+"-"+getFullYear( ))
}
.
.
.
The vDatenow variable is assigned a new Date object that is created using the new operator and
the Date( ) constructor. We used the with statement to make the object stored with vDatenow the
default object for object references. Then we invoke the getMonth( ), getDate( ), and
getFullYear( ) methods to access various components of a Date object.
The with statement is used to eliminate retyping the name of an object that is to be referenced in
a series of property references and method invocations.

Example 9:

Design and develop a JavaScript program that will display the time on a web page. Follow the
design specification below:
 209

The Time now is: 16:14:14

Figure 2.9 Using the Time Method

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>time2.htm</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
vDatenow=new Date()
with (vDatenow) {
document.write("The Time now is: ")
document.write(getHours()+":"+getMinutes()+":"+getSeconds())
}
</SCRIPT>
</BODY>
</HTML>

2. Now save the script with the filename: time2.htm.

3. To run the script, double-click the time2.htm file with the big E icon.

Sample Output:
 210

Figure 2.9a Using the Time Method Output

Note:
The 16 of the time 16:14:14 means it is 4:14 p.m., because it is in the 24-hour format (military
time), wherein we have to subtract the given time by 12.

Explanation:

Let us now dissect the source code:

.
.
.
vDatenow=new Date( )
with (vDatenow) {
document.write("The Time now is: ")
document.write(getHours( )+":"+getMinutes( )+":"+getSeconds( ))
}
.
.
.
The vDatenow variable is assigned a new Date object that is created using the new operator and
the Date( ) constructor. We used the with statement to make the object stored with vDatenow the
default object for object references. Then we invoke the getHours( ), getMinutes( ), and
getSeconds( ) methods to access various components of a Date object.

Our next example will deal with how to apply the document.referrer statement.

Example 10:

Design and develop a JavaScript program that will take us back one page at a time on a web
page. Follow the design specification below:

Back Previous page

Figure 2.10 Using the document.referrer statement

Solution:
 211

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD>
<TITLE>backpage.htm </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<A HREF="+document.referrer+">Back </A>
Previous page")
</SCRIPT>
</BODY>
</HTML>

2. Now save the script with the filename: backpage.htm.

3. To run the script, double-click the backpage.htm file with the big E icon.

Sample Output:

Figure 2.10a Using the document.referrer statement Output

Explanation:

Let us now dissect the source code:

.
.
.
document.write("<A HREF="+document.referrer+">Back </A>
Previous page")
.
.
.
The document.referrer statement will create a link to the previous web page.
 212

The document.write statement and its parameters should be in one line only, so that it will work
fine.

Example 11:

Design and develop a JavaScript program that will display a picture on a web page. The picture
should be in .GIF format. Follow the design specification below:

Hey, I’m Smiling!

Boy’s picture
should be
displayed
here.

Figure 2.11 Using the IMG SRC tag for .GIF format

Note:
Get the boy’s picture from Microsoft Office 2007 (or probably other version), in ClipArt folder,
and in PUB60COR sub-folder. The filename is: BD19563_.GIF. The Microsoft Office 2007 is
under the Program Files folder.

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD><TITLE>Boy's Picture </TITLE></HEAD>
<BODY>
<DIV ALIGN=CENTER>

<SCRIPT LANGUAGE="JavaScript">
document.write("<H2>Hey! I'm Smiling!</H2>");
</SCRIPT>
<IMG SRC="BD19563_.GIF" WIDTH=220 HEIGHT=150 BORDER=1>
</BODY>
</HTML>

2. Now save the script with the filename: picture1.htm.

3. To run the script, double-click the picture1.htm file with the big E icon.
 213

Sample Output:

Figure 2.11 Using the IMG SRC tag for .GIF format output

Explanation:

We use the HTML command IMG SRC to display our picture. We specify how big the picture
should be displayed on the web by specifying the WIDTH and HEIGHT. We can also specify a
special border for the picture by using the BORDER attribute.
We are able to center the picture by applying the DIV ALIGN=CENTER command of HTML.
Finally, we are able to display a bigger message, “Hey! I’m Smiling!” through the use of
HTML’s <H2> tag.

Example 12:

Design and develop a JavaScript program that will display a picture on a web page. The picture
should be in .JPG format. Follow the design specification below:

I am the Wonder Cat

Cat’s image
should be
displayed
here.

Figure 2.12 Using the IMG SRC tag for .JPG format
 214

Note:
Get the cat’s image from Microsoft Office 2007 (or probably other version), in ClipArt folder,
and in PUB60COR sub-folder. The filename is: J0099165.JPG. The Microsoft Office 2007 is
under the Program Files folder.

Solution:

1. At the Microsoft Notepad, write the following code:

<HTML>
<HEAD><TITLE>Cat's Drawing! </TITLE></HEAD>
<BODY>
<DIV ALIGN=CENTER>

<SCRIPT LANGUAGE="JavaScript">
document.write("<H2>I am the Wonder Cat</H2>");
</SCRIPT>
<IMG SRC="J0099165.JPG" wIDTH=220 HEIGHT=150 BORDER=1>
</BODY>
</HTML>

2. Now save the script with the filename: picture2.htm.

3. To run the script, double-click the picture2.htm file with the big E icon.

Sample Output:

Figure 2.12 Using the IMG SRC tag for .JPG format output
 215

Explanation:

We use the HTML command IMG SRC to display our picture. We specify how big the picture
should be displayed on the web by specifying the WIDTH and HEIGHT. We can also specify a
special border for the picture by using the BORDER attribute.
We are able to center the picture by applying the DIV ALIGN=CENTER command of HTML.
Finally, we are able to display a bigger message, “I am the Wonder Cat” through the use of
HTML’s <H2> tag. Familiar explanation, isn’t it? Yes, this is the same explanation with the
previous example. Afterall, if you could noticed the whole script, nothing changed except the
picture file (JOO99165.JPG) and the message, “I am the Wonder Cat”. So, this is it! Very
simple.

Do You Have Some Comments?

After all that have been said and done, do you have some comments? I mean, would you like to
comment about our previous examples? Comment such as, “Wow it’s so simple and easy
and…whatever!”. (Joke). Like, how can I put a comment to my JavaScript code so that I can
understand it later, say after one month, when I would like to read and revise it. (I think this is
not a comment but a question…well anyway, let us have some discussion about this. If you have
a C++ or Java programming background, there is good news for you. Why? Because JavaScript
comments use the same syntax of C++ and Java comments. Exactly! No more, no less. So what
are those comments we are talking about? Here they are! The double slash (//) symbol is used to
comment a single line comment. Below is an example of a single line comment:

// This is a JavaScript comment that continues up to the end of the line.

And here is an example of a multiple line comment:

/* This comment
is a multiple line
comment. Understood??? */

The slash-asterisk (/*) and asterisk-slash (*/) symbols are used to comment a multiple line
comments. So /* and */ symbols are used to identify comments that may span multiple lines. The
comment starts with this symbol: /* and continues up to this symbol: */.
 216

LAB ACTIVITY
TEST 6

1. Design and develop a JavaScript program that will display the text Hello World! on a web
page. Follow the design specification below:

Hello World!

2. Design and develop a JavaScript program that will display the text Goodbye Patrea Adorada?
on a web page. Use the head <HEAD> tag and include JavaScript declaration (definition) of
variable. Follow the design specification below:

Goodbye Patrea Adorada?

3.Design and develop a JavaScript program that will display the text Hello World! and Goodbye
Patrea Adorada? on a web page. Use the HTML tag as well as the JavaScript variable
declaration within the JavaScript statement. Follow the design specification below:

Hello World!

Goodbye Patrea Adorada?

 217

4.Design and develop a JavaScript program that will display the text This is Red Text! on a web
page. Use the HTML’s Font Color attribute within the JavaScript statement . Follow the design
specification below:

This is Red Text!

5. Design and develop a JavaScript program that will display the following message:

You asked, "Mirror, mirror on the wall. Am I pretty?"

The mirror replied, "I don’t know!"
See? The mirror isn’t lying…just playing-safe.

on a web page. Use the correct syntax in using the quotes within strings. Follow the design
specification below:

You asked, "Mirror, mirror on the wall. Am I pretty?"

The mirror replied, "I don’t know!"
See? The mirror isn’t lying…just playing-safe.

6. Design and develop a JavaScript program that will display the date and time on a web page.
Follow the design specification below:

The date today is: 4-5-2019

And the time is: 13:14:15
 218

Note:
The date and time are not necessarily the same with what are specified above. They should be the
current system date and time in your PC during the time you design and develop this script.

7.Design and develop a JavaScript program that will display a picture on a web page. The picture
should be in .GIF format. Follow the design specification below:

See? I know computer!

Boy’s picture
should be
displayed
here.

Note:
Get the boy’s picture from Microsoft Office 2007 (or probably other version), in ClipArt folder,
and in PUB60COR sub-folder. The filename is: BD19582_.GIF.

8.Design and develop a JavaScript program that will display a red flower on a web page. The
picture should be in .JPG format. Follow the design specification below:

A Beautiful Red Flower!

A Red Flower
should be
displayed
here.

Note:
Get the cat’s image from Microsoft Office 2007 (or probably other version), in ClipArt folder,
and in PUB60COR sub-folder. The filename is: J0175428.JPG.
219