1

Chapter I: Introduction to HTML and World Wide Web

Learning Outcome:
The student will:
▪ Define Internet and World Wide Web;
▪ Identify and explain the difference between Internet and W3;
▪ Identify and differentiate the types of Web site
▪ Relates how the internet and W3 change communication and
information sharing.

Web Development
It seems like everyone's talking about the Internet these days. But what is it
really? How does it work? How do you access it? And most important, what can it do
for you at work or at home?
With the introduction of the Internet and the World Wide Web, students are able to
access information faster and more efficiently using modern Computer Systems. In
the past, one had to visit national and school libraries and spend large amounts of time
accessing information. Presently any individual can quickly access, save and print
information from any location. One can access the internet from Cyber Cafes, schools,
mobile phones, at home and even at modern libraries through internet service
providers and telecommunication links. Apart from the internet, information e.g.
encyclopaedias, tutorials and documentaries can be accessed from Compact Discs
which are read from computer systems.
What is the Difference between the Internet and World Wide Web?

Many people use the terms Internet and World Wide Web (aka. the Web)
interchangeably, but in fact the two terms are not synonymous. The Internet and the
Web are two separate but related things.

What is The Internet?

The Internet is a massive network of networks, a networking infrastructure. It connects

millions of computers together globally, forming a network in which any computer can
communicate with any other computer as long as they are both connected to the
Internet. Information that travels over the Internet does so via a variety of languages
known as protocols.

What is The Web (World Wide Web)?

The World Wide Web, or simply Web, is a way of accessing information over the
medium of the Internet. It is an information-sharing model that is built on top of the
Internet. The Web uses the HTTP protocol, only one of the languages spoken over
 3

the Internet, to transmit data. Web services, which use HTTP to allow applications to
communicate in order to exchange business logic, use the Web to share information.
The Web also utilizes browsers, such as Internet Explorer or Firefox, to access Web
documents called Web pages that are linked to each other via hyperlinks. Web
documents also contain graphics, sounds, text and video.

The Web is just one of the ways that information can be disseminated over the Internet.
The Internet, not the Web, is also used for e-mail, which relies on SMTP, Usenet news
groups, instant messaging and FTP. So the Web is just a portion of the Internet, albeit
a large portion, but the two terms are not synonymous and should not be confused.

The Internet and the World Wide Web have a whole-to-part relationship. The
Internet is the large container, and the Web is a part within the container. It is
common in daily conversation to abbreviate them as the "Net" and the "Web", and
then swap the words interchangeably.

Here is the detailed explanation:

1: The Internet is a Big Collection of Computers and Cables.

The Internet is named for "interconnection of computer networks". It is a massive

hardware combination of millions of personal, business, and governmental
computers, all connected like roads and highways. The Internet started in the 1960's
under the original name "ARPAnet". ARPAnet was originally an experiment in how
the US military could maintain communications in case of a possible nuclear strike.
With time, ARPAnet became a civilian experiment, connecting university mainframe
computers for academic purposes. As personal computers became more
mainstream in the 1980's and 1990's, the Internet grew exponentially as more users
plugged their computers into the massive network. Today, the Internet has grown
into a public spiderweb of millions of personal, government, and commercial
computers, all connected by cables and by wireless signals.

No single person owns the Internet. No single government has authority over its
operations. Some technical rules and hardware/software standards enforce how
people plug into the Internet, but for the most part, the Internet is a free and open
broadcast medium of hardware networking.

2: The Web Is a Big Collection of HTML Pages on the Internet.

The World Wide Web, or "Web" for short, is a massive collection of digital pages: that
large software subset of the Internet dedicated to broadcasting content in the form of
HTML pages. The Web is viewed by using free software called web browsers. Born in
1989, the Web is based on hypertext transfer protocol, the language which allows you
and me to "jump" (hyperlink) to any other public web page. There are over 65 billion
public web pages on the Web today.
What Kinds of Information are Available?
 4

• Text documents
• Graphics files (digitized photographs and artwork),
• Files that contain digitized sound and video
• Software
• Interactive forums
• "Chats," - in which you and other users type (and, in some cases, speak)
messages that are received by the chat participants instantly.
How Do People Use the Internet?
Obviously, the Internet can bring you a whole host of capabilities. But how can
they be put to practical use?
Among the ways that users like you are taking advantage of the Internet are:
• Sharing research and business data among colleagues and like-minded
individuals.
• Communicating with others and transmitting files via E-mail.
• Requesting and providing assistance with problems and questions.
• Marketing and publicizing products and services.
• Gathering valuable feedback and suggestions from customers and business
partners.

The Internet's potential is limited only by users' vision and creativity. And as the
Internet grows, new and innovative uses will surely follow.

What is the World Wide Web and what makes it work?

The WWW incorporates all of the Internet services above and much more. You
can retrieve documents, view images, animation, and video, listen to sound files,
speak and hear voice, and view programs that run on practically any software in the
world, providing your computer has the hardware and software to do these things.
When you log onto the Internet using Netscape or Microsoft’s Internet Explorer or
some other browser, you are viewing documents on the World Wide Web. The current
foundation on which the WWW functions is the programming language called HTML.

HTML and other programming embedded within HTML that makes possible Hypertext.
Hypertext is the ability to have web pages containing links, which are areas in a page
or buttons or graphics on which you can click your mouse button to retrieve another
document into your computer.

What is a Browser? What is Netscape and Internet Explorer?

Browser- is a computer program that resides on your computer enabling you to use
the computer to view WWW documents and access the Internet taking advantage of
text formatting, hypertext links, images, sounds, motion, and other features.
 5

Example of web browsers:

• Netscape and Internet Explorer are currently the leading “graphical
browsers” in the world (meaning they facilitate the viewing of graphics
such as images and video and more).
• Mozilla Firefox
• Opera
• Google Chrome
Search Engines
Software programs that uses the browsers and enable the user to locate
specific information on the internet. Most operate by searching for specific key
words among the millions of sites on the web.

Ex. Google and Yahoo

Different Types of Websites

Defining websites is more complicated now than ever thanks to the diversification and
development of resources and technology. Below is a breakdown of different types of
websites you can encounter on the World Wide Web.
• E-Commerce Websites
E-Commerce websites are online stores making it convenient to shop from the
comfort of your own home. E-commerce websites enable business owners to
run and maintain their store from a home or office environment without the need
of an expensive shop front. This type of website also incorporates a checkout
cart in order to allow you to purchase directly from the site.

• Blogs
Blogs (shortened from web log) came to the mainstream forefront in the early
to mid-2000s. This kind of website operates in reverse-chronological order and
can either support a second website or stand alone in its own right. Blogging is
very popular as it allows a direct and personal interaction with your readers who
can provide comments directly on the website.

• Personal Websites
Personal websites are generated by individuals for friends and family to share
information and pictures with each other. Tehis kind of site has limited use for
businesses (even micro businesses) as they are generally not search engine
friendly in their setup.
• Photo Sharing Websites
These websites have one sole purpose - which is to allow for the uploading and
sharing of photographs online. Generally free to use, they have many practical
uses particularly for those in the artistic and photographic industry.
 6

• Mobile Device Websites

Trying to view full size websites on a mobile can be difficult however there are
now websites being created specifically for this purpose. As more and more
people are using their phones to surf the internet and view web pages, then the
number of these sites will only increase in the future.

• Informational Websites
These are identified as sites which strive to provide information on a particular
subject or subjects to the reader. Online dictionaries, local councils and real
estate companies are examples of informational websites. They provide you
with information that you may be seeking as well as further details on how you
can contact the company in question if applicable.

• Brochure/Catalogue Style Websites

An online brochure based website is more than just for informational purposes
as it goes further in depth to provide information about products which are
available to purchase. This differs from the traditional e-commerce website as
it doesn't have the checkout facility available online to purchase immediately. A
website such as IKEA offers a perfect example as you are able to browse stock
online and check availability, however to purchase you must visit your nearest
outlet.

• Social Media and Networking Websites

These websites are a combination of networking sites such as Facebook and
MySpace, although they can also integrate online forums (whether for business
or personal use). They are created purely for socialising and discussing topics.
Social websites enable one to one connections between individuals.
Therefore before you launch into a redesign of your current business or a new
business venture entirely, think about which website may suit your purposes so
you can clearly identify your website requirements.
Bauhinia Solutions has evolved from conducting computer related training
courses to offering a wide range of business solutions, virtually. We provide a
stopgap solution to your business issues with no hidden charges or costs
 7

CHAPTER II: The World Wide Web and its Structure

Learning Outcomes:
The student will:
▪ Define and describe HTML;
▪ Identify and explain the world wide web terminologies and components;
▪ Differentiate mark-up language and scripts;
▪ Relates how World Wide Web works by browsing on the internet.

HTML (Hypertext Markup Language)

• Is the backbone of almost any web page
• Is basically just a text file containing series and combination of text(Markup
language) which the browser interprets to display as stated in the text content
of the HTML file.
• Can be integrated with a variety of markup languages and scripts making the
web page function as if they are programs running on a browser.

Basic elements of HTML in a Google’s Webpage

Hypert Image
ext

Textfiel
d

Radio
Buttons

Center
Alignm
ent
 8

▪ Hyperlink
- is a graphical or a piece of text in an Internet document that can connect
readers to another webpage, or another portion of a document

▪ Image
- is a visual representation (of an object or scene or person or abstraction)
produced on a surface;

▪ Textfield
- is a form element that is used to display a single line text. This object is
used to display the results of a scripts calculation, string manipulation,
etc.

▪ Radio button or option button

- is a type of graphical user interface element that allows the user to
choose only one of a predefined set of options.

Markup Languages and Script used in the web pages today:

▪ Java Scripts and Ajax
▪ PHP
▪ XML
▪ ASP
▪ JSP
▪ .Net

Important Terms.
• Client
- it is a software program of computer that request information from
another software program on another computer

• Server
- it is a software program that interacts with client software in a
client/server environment
- it is also referred to as a computer running the server software and
responds to request for information from client computer.

• Web Browser
- it is an application that allows client to view documents on the Web with
a hypertext content.
- it is also used to view the web pages, text, graphics and videos and hear
sounds on the web.
 9

• Download
- It is a process of getting the information from the host computer down to
the local computer

• Upload
- It is the opposite of the download process; it is sending of information
from the local computer to the host computer.

• Hypertext
- it is a clickable underlined text that will automatically bring the user to the
desired Web pages once click.

• Search Engine
- is the toll use when you want to visit a website without knowing its URL.

Three key components of WWW

1. the spider a.k.a robot, bot, or crawler
- it is a program that continuously “crawls” the internet in search for new
webpages.
2. Index a.k.a catalogue
- It is the database that contains the copy of every webpage that the
spider comes across.
3. search Engine Utility
- a program installed in a search engine’s website that sifts through the
index to return web pages that matches the criteria of the searcher/user.

Questions:

What do you think is the reason behind the development of www?

As a student what are the benefits of having www and internet?
What do you think will happen if there will be no governing bodies that
governs the www and internet?

Assignment:

Who is Tim Burners Lee and what are his contribution in the development
of the Web?
 10

CHAPTER III: Introduction to HTML

Learning Outcomes:

The student will:

▪ Identify and describe HTML document structure

▪ Execute the basic tags elements and attributes of HTML.
▪ identify and label the parts of a Tag;
▪ Interpret how HTML document is used in Web pages.
▪ Create a simple webpage using HTML document structure elements
and attribute.

Creating an HTML document is easy. To begin coding HTML you need only two things:
First is a simple text editor. Notepad is the most basic of simple-text editors and you
will probably code a fair amount of HTML with it. Second is a web browser, program
that allows you to view web pages such as Internet Explorer, Mozilla Firefox, Google
Chrome etc.

CREATING HTML DOCUMENTS

Before discussing further on the structure and components of a HTML documents,
let’s try first to create a basic HTML document:
1. Open a text editor
2. Type the following text on your text editor.

<html>
<head>
<title>This is document title</title>
</head>
<body>
<p>Document description goes here</p>
</body>

</html>

3. In the File menu, choose Save.

4. In the Save as Type option box, choose All Files.
5. Set the Filename as “My First” followed by the extension name .htm or .html.
 11

Now you have created one HTML page and you can use a Web Browser to open this
HTML file to see the result. Web Pages are nothing but they are simple HTML files
with some content which can be rendered using Web Browsers.

HTML DOCUMENT STRUCTURE

An HTML document starts and ends with <html> and </html> tags. These tags tell the
browser that the entire document is composed in HTML. Inside these two tags, the
document is split into two sections:
• The <head>...</head> elements, which contain information about the
document such as title of the document, author of the document etc. Information
inside this tag does not display outside.
• The <body>...</body> elements, which contain the real content of the
document that you see on your screen.

HTML TAGS AND ELEMENTS

HTML documents are defined by HTML elements and tags.
• Tags are the indicators of how a certain object or property will appear on output
page.
• HTML Element – everything between the start and the end tag. The start tag
is often called the opening tag. The end tag is often called the closing tag
OPENING TAG ELEMENT CONTENT CLOSING TAG
<title> My First Document </title>
<font face=”arial”> This is Arial </font>

Every tag consists of a tag name, sometimes followed by an optional list of tag’s
attributes, all placed between opening and closing brackets (< and >).
• Empty Tags – are tags that do not require closing tags. Ex: <Br> tags
• Container Tags – require an opening tag to designate the start of the tag and
a closing tag to denote the end of that tag. </Body >

HTML BASIC TAGS

The basic structure for all HTML documents is simple and should include the following
minimum elements or tags:
• <html> - The main container for HTML pages

• <head> - The container for page header information

• <title> - The title of the page

 12

• <body> - The main body of the page

Now we will explain each of these tags one by one.

The <html>Tag
The <html> tag is the containing tag for the whole HTML document. Each
HTML document should have one <html> and each document should end with
a closing </html> tag.
As such, start and end HTML tags enclose all the other HTML tags you use to
web page describe the

Following two tags appear as direct children of an <html> tag:

• <head>
• <body>

The <head> Tag

The <head> tag is just a container for all other header elements. It should be the
first thing to appear after the opening <html> tag.

Example:
Following is the example of head tag.
<head>
<title>HTML Basic tags</title>
</head>

The <title> Tag

You should specify a title for every page that you write inside the <title> tag. This
tag is a child of the <head> element). It is used in several ways:
• It displays at the very top of a browser window.
• It is used as the default name for a bookmark in browsers such as IE and
Netscape.
• It is used by search engines that use its content to help index pages.

Therefore it is important to use a title that really describes the content of your
site. The <title> element should contain only the text for the title and it may not
contain any other elements.
 13

Example:
Here is the example of using title tag.
<head>
<title>HTML Basic tags</title>
</head>

The <body> Tag

The <body> tag appears after the <head> tag and contains the part of the Web
page that you actually see in the main browser window, which is sometimes
referred to as body content.
A <body> tag may contain anything from a couple of paragraphs under a heading
to more complicated layouts containing forms and tables.
Most of what you will be learning in this and the following five chapters will be
written between the opening <body> tag and closing </body> tag.

Example:
Here is the example of using body tag.

<body>
<p>This is a paragraph tag.</p>
</body>

The <body> tag

Now that you have the list of using attributes in tags, this should make perfect sense.
Remember the <body> tag from the first page, which everything visible on your page
goes into? That is the tag we'll be adding to in this, as it's been left untouched up until
now. There are 7 attributes to be added here, and they all change how your page
looks.
• bgcolor
This is the colour of the BG, or BackGround, of your page. You need to put the
colour in as aHEX code, like the rest of these colours.
bgcolor="#FFFFFF"
 14

Note that, even though the default BG is white, you should still code in #FFFFFF,
because older browser's default BG is a nasty grey.
• Text
This will change the colour of all the text on your whole page, unless you have
changed the colour manually (find out how in the text section). Your best bet here
is to leave it black, because that's the easiest to read. Code!
text="#000000"
• background
If you want to put an image as your background, use this attribute, and set the value
to the same as you would for an image src (don't know how? Read the
preceding lesson on images). You can also link to an image from another site, by
giving the entire URL.
background="http://www.yoursite.com/media/BACKGROUND.gif"
Whatever image you choose to use, it will be tiled across your page, filling it up.
That means it will repeat itself across your page, so choose one that doesn't
look too obvious.
If you want your background to be set in place and not scroll, add the
attributebgproperties="fixed" into the body. This will leave the image as
a watermark.
• margins
There are two sets of margins on a page, the ones at the sides and the ones at the
top and bottom. The two main browsers use different attributes to put in these
margins, so when you change one, change the other as well.
For Internet Explorer: topmargin="0" and leftmargin="0"
For Netscape: marginheight="0" and marginwidth="0"

Despite this, the units of measurement are the same — pixels, so to make your
margins the same in both browsers just set them both to the same value.

Putting all together

 15

Now if we will put all these tags together, it will constitute a complete HTML document
as follows

<html>
<head>
<title>HTML Basic tags</title>
</head>
<body bgcolor =”blue” text=”white”>
<p>This is a paragraph tag.</p>
</body>
</html>

HTML ATTRIBUTES

Attributes are another important part of HTML mark-up. An attribute is used to

define the characteristics of an element and is placed inside the element's opening
tag. All attributes are made up of two parts: a name and a value:
• The name is the property you want to set. For example, the <font> element in
the example carries an attribute whose name is face, which you can use to
indicate which typeface you want the text to appear in.

• The value is what you want the value of the property to be. The first example
was supposed to use the Arial typeface, so the value of the face attribute is
Arial.
The value of the attribute should be put in double quotation marks, and is separated
from the name by the equals sign. You can see that a color for the text has been
specified as well as the typeface in this <font> element:

Value

<font face="arial" color="#CC0000">

Name

Core Attributes:
 16

The four core attributes that can be used on the majority of HTML elements (although
not all) are:

• id
• title
• class
• style

The id Attribute
The id attribute can be used to uniquely identify any element within a page (or
style sheet). There are two primary reasons that you might want to use an id
attribute on an element:
• If an element carries an id attribute as a unique identifier it is possible to
identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet),
you can use the id attribute to distinguish between elements that have the same
name.

<p id="html">This paragraph explains what is HTML</p>

<p id="css">This paragraph explains what is Cascading Style Sheet</p>

Note that there are some special rules for the value of the id attribute, it must:
• Begin with a letter (A.Z or a.z) and can then be followed by any number of
letters, digits (0.9), hyphens, underscores, colons, and periods.
• Remain unique within that document; no two attributes may have the same
value within that HTML document.

The title Attribute

The title attribute gives a suggested title for the element. The syntax for
the title attribute is similar as explained for id attribute:
The behaviour of this attribute will depend upon the element that carries it,
although it is often displayed as a tooltip or while the element is loading.

For example:
<h4 title="Hello HTML!">Titled Heading Tag Example</h4>

Above code will generate following result:

 17

Titled Heading Tag Example

Now try to bring your cursor over "Titled Heading Tag Example" and see the result.

The class Attribute

The class attribute is used to associate an element with a style sheet, and
specifies the class of element. You learn more about the use of the class attribute
when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.

The value of the attribute may also be a space-separated list of class names. For
example:

class="className1 className2 className3

The style Attribute

The style attribute allows you to specify rules within the element.

For example:
<face= “arial” color= “FF0000”>Some text...</font>

Generic Attributes:

Here's a table of some other attributes that are readily usable with many of HTML's
tags.

Attribute Options Function

Align right, left, center Horizontally aligns tags

Valign top, middle, bottom Vertically aligns tags within an HTML

element.

Bgcolor numeric, hexidecimal, Places a background color behind an

RGB values element
 18

background URL Places an background image behind an

element

Id User Defined Names an element for use with Cascading

Style Sheets.

Class User Defined Classifies an element for use with

Cascading Style Sheets.

Width Numeric Value Specifies the width of tables, images, or

table cells.

Height Numeric Value Specifies the height of tables, images, or

table cells.

Title User Defined "Pop-up" title for your elements.

 19

LABORATORY ACTIVITY 1: PRACTICE

Name: _______________________ Date:___________ Score:_____________

Instructions: Create a Web page that features the text below. Copy the whole text
and apply the specified format. Save your work as practice.html.

LABORATORY RULES AND REGULATIONS

___________________________________________________________________
1. Students are not allowed to enter the laboratory room without their instructors.
2. Foods and beverages are not allowed inside the Laboratory
3. Students should leave their bags at the baggage counter
4. Students are not allowed to attach/detach any peripheral devices.
5. Students should arrange the chairs properly before leaving the laboratory
room.
6. Students should maintain cleanliness of the laboratory rooms at all times
7. Computers should be properly shutdown and mouse should be placed at the
top of the system unit in an inverted position after use.
8. Students should inform the instructor in-charge of any concerns inside the
laboratory.
9. No vandalism
10. Any violation to the above mentioned guidelines is subject to disciplinary
actions.
___________________________________________________________________

FORMAT
1. Web page title “HTML Newbie”
2. Body background color is light green
3. LABORATORY RULES AND REGULATIONS: Font: Times New Roman, Size:
15, Color: blue, align center
• Pop-up title=”IFSU-CCS”
 20

You will be graded based on the following criteria

Criteria Percentage Score

Specification 15%
Tagging Structure 25%
Output Accuracy 50%
Total 100%
 21

Chapter IV: HTML Elements

Learning Outcome:

The student will:

• Define and illustrate html headings and paragraph element;
• Demonstrate and apply the use of comment, heading and paragraph
element by giving examples;
• Create and design a web page by using HTML comment, heading and
paragraph element.

Whitespace and Flow:

Before you start to mark up your text, it is best to understand what HTML does when
it comes across spaces and how browsers treat long sentences and paragraphs of
text.
You might think that if you put several consecutive spaces between two words, the
spaces would appear between those words onscreen, but this is not the case; by
default, only one space will be displayed. This is known as white space collapsing. So
you need to use special HTML tags to create multiple spaces.
Similarly, if you start a new line in your source document, or you have consecutive
empty lines, these will be ignored and simply treated as one space. So you need to
use special HTML tags to create more number of empty lines.
Create Headings - The <hn> Elements
Any documents start with a heading. You use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and
after that heading. Try the example below:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
 22

This will display following result:

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

Create Paragraph - The <p> Element

The <p> element offers a way to structure your text. Each paragraph of text should go
in between an opening <p> and closing </p> tag as shown below in the example:

<p>Here is a paragraph of text.</p>

<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>

This will produce following result:

Here is a paragraph of text.

Here is a second paragraph of text.
Here is a third paragraph of text.

You can use align attribute to align your paragraphs.

<p align="left">This is left aligned.</p>

<p align="center">This is center aligned.</p>
<p align="right">This is right aligned.</p>
<p align="justify">This is justified. This works when you have multiple lines in your
paragraph and you want to justify all the lines so that they can look more nice.</p>

This will produce following result:

 23

This is left aligned.

This is center aligned.
This is right aligned.
This is justified. This works when you have multiple lines in your paragraph and you
want to justify all the lines so that they can look nicer.

Create Line Breaks - The <br> Element

Whenever you use the <br> element, anything following it starts on the next line. This
tag is an example of an empty element, where you do not need opening and closing
tags, as there is nothing to go in between them.

Example:

Hello<br>
You come most carefully upon your hour.<br>
Thanks<br >
Mahnaz

This will produce following result:

Hello
You come most carefully upon your hour.
Thanks
Mahnaz

Centering Content - The <center> Element

You can use <center> tag to put any content in the center of the page or any table cell.

Example:

<p>This is not in the center.</p>

<center>
<p>This is in the center.</p>
</center>
 24

This will produce following result:

This is not in the center.

This is in the center.

HTML COMMENTS

Comments are piece of code which is ignored by any web browser. It is good
practice to comment your code, especially in complex documents, to indicate sections
of a document, and any other notes to anyone looking at the code. Comments help
you and others understand your code.
HTML Comment lines are indicated by the special beginning tag <!-- and ending
tag --> placed at the beginning and end of EVERY line to be treated as a comment.
Comments do not nest, and the double-dash sequence "--" may not appear
inside a comment except as part of the closing --> tag. You must also make sure that
there are no spaces in the start-of-comment string.

For example: Given line is a valid comment in HTML

<!-- This is commented out -->

But following line is not a valid comment and will be displayed by the browser. This is
because there is a space between the left angle bracket and the exclamation mark.
< !-- This is commented out -->

Multiline Comments

You have seen how to comment a single line in HTML. You can comment
multiple lines by the special beginning tag <!-- and ending tag --> placed before the
first line and end of the last line to be treated as a comment.

<!--
This is a multiline comment <br />
and can span through as many as lines you like.
-->
 25

CHAPTER V: Text Formatting

Learning Outcomes

The student will:

• apply and explain the use of different html formatting tags ;
• identify and discuss the tag and attributes under text formatting;
• demonstrate how tag and attributes works in text formatting by giving
examples; and
• apply the tag and attributes in text formatting in creating HTML
document.

FONT - format the text to an assigned font and color attributes:

The <font></font> Element

Attribute:
• Face – defines the font to be used
• Color – defines the color
• Size – defines the size (range: 1-7)

Example:
This contains <font face = “Times New Roman” color=“blue” >set font </font>

Horizontal Rules
The <hr > Element
Horizontal rules are used to visually break up sections of a document. The <hr>
tag creates a line from the current position in the document to the right margin
and breaks the line accordingly. Attributes, size and width are represented in
pixels, and noshade>

For example, you may want to give a line between two paragraphs as follows:

<p>This is paragraph one and should be on top</p>

<hr size=50% width=90% noshade>
<p>This is paragraph two and should be at bottom</p>

This will produce following result:

 26

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Bold Text - The <b> Element

Anything that appears in a <b>...</b> element is displayed in bold, like the word bold
here:

<p>The following word uses a <b>bold</b> typeface.</p>

This will produce following result:

The following word uses a bold typeface.

Italic Text - The <i> Element

Anything that appears in a <i>...</i> element is displayed in italicized, like the word
italicized here:

<p>The following word uses a <i>italicized</i> typeface.</p>

This will produce following result:

The following word uses a italicized typeface.

Underlined Text - The <u> Element

Anything that appears in a <u>...</u> element is displayed with underline, like the word
underlined here:

<p>The following word uses a <u>underlined</u> typeface.</p>

This will produce following result:

The following word uses a underlined typeface.

Strike Text - The <strike> Element

Anything that appears in a <strike>...</strike> element is displayed with strikethrough,

which is a thin line through the text:
 27

<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

This will produce following result:

The following word uses a strikethrough typeface.

Superscript Text - The <sup> Element

The content of a <sup> element is written in superscript; the font size used is the same
size as the characters surrounding it but is displayed half a characters height above
the other characters.

<p>The following word uses a ^superscript typeface.</p>

This will produce following result:

The following word uses a superscript typeface.

Subscript Text - The <sub> Element

The content of a <sub> element is written in subscript; the font size used is the same
as the characters surrounding it, but is displayed half a characters height beneath the
other characters.

<p>The following word uses a _subscript typeface.</p>

This will produce following result:

The following word uses a subscript typeface.

Emphasize Text – The <em> Element emphasize text

My Name is <em>Desiray</em>

This will produce following result:

 28

My Name is Jerwin

Larger Text - The <big> Element

The content of the <big> element is displayed one font size larger than the rest of the
text surrounding it.

<p>The following word uses a <big>big</big> typeface.</p>

This will produce following result:

The following word uses a big typeface.

Smaller Text - The <small> Element

The content of the <small> element is displayed one font size smaller than the rest of
the text surrounding it.

<p>The following word uses a <small>small</small> typeface.</p>

This will produce following result:

The following word uses a small typeface.

Grouping - The <div> Elements

The <div> elements allow you to group together several elements to create sections
or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div>
element to indicate that all of the elements within that <div> element relate to the
footnotes. You might then attach a style to this <div> element so that they appear
using a special set of style rules.
 29

The <div> element is used to group block-level elements together:

<div id="menu" align="middle" >

<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">

<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>

This will produce following result:

HOME | CONTACT | ABOUT

Content Articles
Actual content goes here.....

Nesting Tags

- to combine the effect of one type of tag with another, simply enclose the container
tag in another container tag.
 30

LABORATORY ACTIVITY 2 : PRACTICE

Date:______________ Score:______________

Instructions: Create a Web page that features the article below. Copy the whole
article and apply the specified format. Save your work as practice.html.

Does Practice Makes Perfect?

Practice means to do something often. Perfect means the best you can be. “Practice
Makes Perfect” means to do something often to become the best you can be.
Everything/Anything practiced will attain your own sort of perfection. Your perfection is
not your neighbor or friend’s perfection, thus, you are not like your friend or neighbor.

With the thought of perfection, the word “practice” is probably the next thing to occupy
your thoughts. How long did a student have to practice to reach 25 words per minute
in his Typing Lesson using the Proper Home Keys? Perfection is hard to come by. It
takes practice, time and mental or physical devotion. Therefore, is the well-known term
“Practice Makes Perfect” correct? Is it true that lots of practice will make perfection?

Some may argue that perfection isn't possible because there is ALWAYS room for
improvement but still, PRACTICE really helps a lot to do some sense of “perfection”.
(http://www.oppapers.com/essays/Does-Practice-Make-Perfect)

FORMAT

Title: Font: Times New Roman, Size: 5, Color: Red, Alignment: Center
Body: Font: Tahoma, Size: 3, Alignment: Left
1st Paragraph: Font Color Black, 2nd Paragraph: Font Color Green, Underline the
2nd Sentence
3rd Paragraph: Font Color: Orange. Underline all the “Practice Makes Perfect” found
on the article. Apply Bold to ALWAYS and PRACTICE on the third paragraph. URL:
Size: 2, Font: Tahoma, Color: Blue, Alignment: Right, Italic

You will be graded based on the following criteria

Criteria Percentage Score
Specification 15%
Tagging Structure 25%
Output Accuracy 50%
Total 100%
 31

CHAPTER VI: LINKS

Learning Outcomes:

The Student will:

• Define hyperlink and anchor tag;

• Identify the tag use in HTML links;
• Explain how hyperlink inter-accessing to webpages;
• Demonstrate links by giving examples;
• Apply links in creating HTML document;
• Create HTML document using links.

HYPERLINK

Web pages can contain links that take you directly to other pages and even specific
parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases,
and images. Thus you can create hyperlinks using text or images available on your
any web page.
Linking Documents - The <a> Element
A link is specified using the <a> element. This element is called anchor tag as well.
Anything between the opening <a> tag and the closing </a> tag becomes part of the
link and a user can click that part to reach to the linked document.
Following is the simple syntax to use this tag.

<a href="Document URL" attr_name="attr_value"...more attributes />

Anchor Attributes:
Following are most frequently used attributes for <a> tag.
• href: specifies the URL of the target of a hyperlink. Its value is any valid
document URL, absolute or relative, including a fragment identifier or a
JavaScript code fragment.
• target: specify where to display the contents of a selected hyperlink. If set to
"_blank" then a new window will be opened to display the loaded page, if set to
"_top" or "_parent" then same window will be used to display the loaded
document, if set to "_self" then loads the new page in current window. By default
its "_self".
 32

• name & id: attributes places a label within a document. When that label is used
in a link to that document, it is the equivalent of telling the browser to goto that
label.
• title: attribute lets you specify a title for the document to which you are linking.
The value of the attribute is any string, enclosed in quotation marks. The
browser might use it when displaying the link, perhaps flashing the title when
the mouse passes over the link.

A Simple Example:

<a href="http://www.webtutorial.com/" target="_blank" >TP Home</a> |

<a href="http://www.web-images.com/" target="_top" >Change Images </a>

This will produce following result

Tutorials Point | Change Images

HTML Image Links

Now we will learn how to use images to create hyper links. See example below:

<a href="http://www.webtutorial.com/index.htm" target="_self" >

<img src="/images/home.gif" alt="Tutorials Point Home" border="0"/>
</a>

This will create following hyperlink at webtutorial.com home.

 33

LABORATORY ACTIVITY 3 : SHORT STORIES

Name: ___________________________ Date______ Score:__________

Instructions: Create a Web page which contains 4 short stories. Every story provides
link for user to access the whole story content. Save your project as story.html. Refer
on the sample and specification below.

You will be graded based on the following criteria

Criteria Percentage Score

Specification 15%
Tagging Structure 25%
Output Accuracy 50%
Total 100%

_______________________
 34

Instructor’s Signature

CHAPTER VII: HTML- LIST

Learning Outcomes

The student will:

• define list item, unordered list, ordered list and definition list;
• identify and explain the different tags and attributes of HTML list;
• differentiate ordered list and unordered list;
• demonstrate the use of list tag and attributes using ordered and
unordered list;
• create a simple webpage using HTML list.

HTML LIST
You can list out your items, subjects or menu in the form of a list. HTML gives you
three different types of lists.
• <ul> - An unordered list. This will list items using bullets
• <ol> - A ordered list. This will use different schemes of numbers to list your
items
• <dl> - A definition list. This arranges your items in the same way as they are
arranged in a dictionary.

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or
sequence. The most common unordered list you will find on the Web is a collection of
hyperlinks to other documents.
This list is created by using <ul> tag. Each item in the list is marked with a bullet. The
bullet itself comes in three flavors: squares, discs, and circles. The default bullet
displayed by most web browsers is the traditional full disc.
One Movie list is given below:

<center>
<h2>Movie List</h2>
</center>
<ul>
<li>Ram Teri Ganga Meli</li>
<li>Mera Naam Jocker</li>
<li>Titanic</li>
 35

<li>Ghost in the ship</li>

</ul>
This will produce following result:

Movie List

• Ram Teri Ganga Meli

• Mera Naam Jocker
• Titanic
• Ghost in
• the ship

You can use type attribute to specify the type of bullet you like. By default it is a disc.
Following are the possible way:

<ul type="square"> <ul type="disc"> <ul type="circle">

▪ Hindi • Hindi o Hindi

▪ English • English o English
▪ Maths • Maths o Maths
▪ Physics • Physics o Physics

HTML Ordered Lists

The typical browser formats the contents of an ordered list just like an unordered list,
except that the items are numbered instead of bulleted. The numbering starts at one
and is incremented by one for each successive ordered list element tagged with <li>
This list is created by using <ol> tag. Each item in the list is marked with a number.

One Movie list is given below:

<center>
<h2>Movie List</h2>
</center>
<ol>
<li>Ram Teri Ganga Meli</li>
<li>Mera Naam Jocker</li>
<li>Titanic</li>
<li>Ghost in the ship</li>
</ol>
 36

This will produce following result:

Movie List

1. Ram Teri Ganga Meli

2. Mera Naam Jocker
3. Titanic
4. Ghost in the ship

You can use type attribute to specify the type of numbers you like. By default it is a
generic numbers. Following are the other possible way:

<ol type="I"> - Upper-Case Numerals.

<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
<ol type="I"> <ol type="i"> <ol type="a"> <ol type="A">

I. Hindi i. Hindi a. Hindi A. Hindi

II. English ii. English b. English B. English
III. Maths iii. Maths c. Maths C. Maths
IV. Physics iv. Physics d. Physics D. Physics

You can use start attribute to specify the beginning of any index. By default it is a first
number or character. In the following example index starts from 5:

<center>
<h2>Movie List</h2>
</center>
<ol start="5">
Output
<li>Ram Teri Ganga Meli</li>
Movie ListNaam Jocker</li>
<li>Mera
<li>Titanic</li>
5. Ram
<li>Ghost in Teri Ganga Meli
the ship</li>
6. Mera Naam Jocker
</ol>
7. Titanic
8. Ghost in the ship
 37

LABORATORY ACTIVITY 4 : RECIPE

Name: _______________________ Date:______________Score:______________

Instructions: Create a Web page that displays the ingredients and instructions on
how to cook a featured recipe. Save your work as recipe.html. Refer on the sample
below.

Chicken-Pork Adobo

Estimated cooking time: 50 minutes.

I. Ingredients:

• 1/2 kilo pork cut in cubes + 1/2 kilo chicken, cut into pieces or
• choice of either 1 kilo of pork or 1 kilo of chicken
• 1 head garlic, minced
• 1/2 yellow onion, diced
• 1/2 cup soy sauce
• 1 cup vinegar
• 2 cups of water
• 1 teaspoon paprika
• 5 laurel leaves (bay leaves)
• 4 tablespoons of cooking oil or olive oil
• 2 tablespoons cornstarch
• Salt and pepper to taste
• 3 tablespoons water
WEB SYSTEMS AND TECHNOLOGIES

II. Cooking Instructions:

1. In a big sauce pan or wok, heat 2 tablespoons of oil then sauté the minced garlic
and onions.
2. Add the pork and chicken to the pan. Add 2 cups of water, 1/4 cup of soy sauce,
vinegar, paprika and the bay leaves. Bring to a boil. Cover and simmer for 30
minutes or when meat is tender.

3. Remove the pork and chicken from the sauce pan and on another pan, heat
cooking oil and brown the pork and chicken for a few minutes.
4. Mix the browned pork and chicken back to the sauce and add cornstarch
dissolved in water to thicken.
5. Add salt and/or pepper if desired
6. Bring to a boil then simmer for an additional 5 minutes.
7. Serve hot with the adobo gravy and rice.
_____________________________________________________________________

You will be graded based on the following criteria

Criteria Percentage Score

Specification 15%
Tagging Structure 25%
Output Accuracy 50%
Total 100%

________________________
Instructor’s Signature
WEB SYSTEMS AND TECHNOLOGIES

CHAPTER VIII: HTML- Tables

Learning Outcomes:

The student will:

• Define table;
• identify and explain tag and attributes of HTML tables;
• demonstrate tag and attributes of HTML tables by giving examples;
• apply the HTML tables tag and attributes in creating HTML document;
• create HTML document using HTML tables tag and attributes.

HTML TABLES

Tables are very useful to arrange in HTML and they are used very frequently by almost
all web developers. Tables are just like spreadsheets and they are made up of rows
and columns.
You will create a table in HTML by using <table> tag. Inside <table> element the table
is written out row by row. A row is contained inside a <tr> tag, which stands for table
row. And each cell is then written inside the row element using a <td> tag, which stands
for table data.
Example:

<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
This will produce following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Heading - The <th> Element

Table heading can be defined using <th> element. This tag will be put to replace <td>
tag which is used to represent actual data. Normally you will put your top row as table
heading as shown below, otherwise you can use <th> element at any place:
WEB SYSTEMS AND TECHNOLOGIES

<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>

This will produce following result. You can see its making heading as a bold one:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Table Cellpadding and Cellspacing

There are two attributes called cellpadding and cellspacing which you will use to
adjust the white space in your table cell. Cellspacing defines the width of the border,
while cellpadding represents the distance between cell borders and the content
within. Following is the example:

<table border="1" cellpadding="5" cellspacing="5">

<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
WEB SYSTEMS AND TECHNOLOGIES

This will produce following result:

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.
Following is the example:

<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell Row 1 Cell Row 1 Cell
1 2 3
Row 2 Cell Row 2 Cell
2 3
Row 3 Cell 1

Tables Backgrounds

You can set table background using of the following two ways:
• Using bgcolor attribute - You can set background color for whole table or just
for one cell.
• Using background attribute - You can set background image for whole table or
just for one cell.

NOTE: You can set border color also using bordercolor attribute.
Here is an example of using bgcolor attribute:
WEB SYSTEMS AND TECHNOLOGIES

<table border="5" bordercolor="green" bgcolor="gray">

<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td bgcolor="red">Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Table height and width

You can set a table width and height using width and height attributes. You can specify
table width or height in terms of integer value or in terms of percentage of available
screen area. Following is the example:

<table border="1" width="400" height="150">

<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

This will produce following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

WEB SYSTEMS AND TECHNOLOGIES

Using Table Caption

The caption tags will serve as a title or explanation and show up at the top of the table.
This tag is deprecated in newer version of HTML.

<table border="1">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
</table>

This will produce following result:

This is the caption

row 1, column 1 row 1, columnn 2

Using a Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and
foot are rather similar to headers and footers in a word-processed document that
remain the same for every page, while the body is the main content of the table.
The three elements for separating the head, body, and foot of a table are:
• <thead> - to create a separate table header.
• <tbody> - to indicate the main body of the table.
• <tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of
data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

<table border="1" width="100%">

<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
WEB SYSTEMS AND TECHNOLOGIES

<tr>
...more rows here containing four cells...
</tr>
</tbody>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
...more rows here containing four cells...
</tr>
</tbody>
</table>

This will produce following result:

This is the head of the table

This is the foot of the table

Cell 1 Cell 2 Cell 3 Cell 4

...more rows here containing four cells...

Cell 1 Cell 2 Cell 3 Cell 4

...more rows here containing four cells...

Nested Tables

You can use one table inside another table. Not only tables you can use almost all the
tags inside table data tag <td>.
Following is the example of using another table and other tags inside a table cell.

<table border="1">
<tr>
<td>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
WEB SYSTEMS AND TECHNOLOGIES

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
<td>
<ul>
<li>This is another cell</li>
<li>Using list inside this cell</li>
</ul>
</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

This will produce following result:

Name Salary • This is another cell

• Using list inside this cell
Ramesh Raman 5000

Shabbir Hussein 7000

Row 2, Column 1 Row 2, Column 2

WEB SYSTEMS AND TECHNOLOGIES

LABORATORY ACTIVITY 5: CALENDAR

Name: _______________________ Date:______________ Score:_____________

Instructions: Create a Web page of 12-month calendar. Use current month as your
reference. Save your work as monthly_calendar.html. Refer on the sample below.

2022 NOVEMBER 2022

SUN MON TUE WED THU FRI SAT

1 2

3 4 5 6 7 8 9

10 11 12 13 14 15 16

17 18 19 20 21 22 23

24 25 26 27 28 29 30

*Font and background Color for Sunday: Red

You will be graded based on the following criteria

Criteria Percentage Score

Specification 15%
Tagging Structure 25%
Output Accuracy 50%
Total 100%

________________________
Instructor’s Signature
WEB SYSTEMS AND TECHNOLOGIES

CHAPTER IX: Frames

Learning Outcomes

The student will:

. • define frameset, frame rows, cols and src;
• explain the use of rows, cols and src in creating multiple frames;
• demonstrate on how to create multiple frames in HTML document; and
• FRAMES
create a simple webpage using HTML frames.
HTML

Frames divide a browser window into several pieces or

panes, each pane containing a separate HTML document.
One of the key advantages that frames offer is that you
can then load and reload single panes without having to
reload the entire contents of the browser window. A
collection of frames in the browser window is known as a
frameset.
The window is divided up into frames in a similar pattern
to the way tables are organized: into rows and columns. The simplest of framesets
might just divide the screen into two rows, while a complex frameset could use several
rows and columns.
There are few drawbacks also you should be aware of with frames are as follows:
• Some browsers do not print well from framesets.
• Some smaller devices cannot cope with frames, often because their screen is
not big enough to be divided up.
• Sometime your page will be displayed differently on different computers due to
different screen resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers who do not support frame technology.
To create a frameset document, first you need the <frameset> element, which is used
instead of the <body> element. The frameset defines the rows and columns your page
is divided into, which in turn specify where each individual frame will go. Each frame
is then represented by a <frame> element.

Now we will discuss these tags in detail one by one.

Creating Frames - The <frameset> Element
• The <frameset> tag replaces the <body> element in frameset documents.
• The <frameset> tag defines how to divide the window into frames.
WEB SYSTEMS AND TECHNOLOGIES

• Each frameset defines a set of rows or columns. If you define frames by using
rows then horizontal frames are created. If you define frames by using columns
then vertical frames are created.
• The values of the rows/columns indicate the amount of screen area each
row/column will occupy.
• Each frame is indicated by <frame> tag and it defines what HTML document to
put into the frame.

Example:
Following is the example to create three horizontal frames:

<html>
<head>
<title>Frames example</title>
</head>
<frameset rows="10%,80%,10%">
<frame src="/html/top_frame.htm" />
<frame src="/html/main_frame.htm" />
<frame src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

Now create three HTML file called top_frame.htm, main_frame.htm and

bottom_frame.htm to be loaded into three frames with some content.

The <frameset> Element Attributes

Following are important attributes of <frameset> and should be known to you to use
frameset.
• cols: specifies how many columns are contained in the frameset and the size
of each column. You can specify the width of each column in one of four ways:
WEB SYSTEMS AND TECHNOLOGIES

o Absolute values in pixels. For example to create three vertical frames,

use cols="100, 500,100".
o A percentage of the browser window. For example to create three
vertical frames, use cols="10%, 80%,10%".
o Using a wildcard symbol. For example to create three vertical frames,
use cols="10%, *,10%". In this case wildcard takes remainder of the
window.
o As relative widths of the browser window. For example to create three
vertical frames, use cols="3*,2*,1*". This is an alternative to
percentages. You can use relative widths of the browser window. Here
the window is divided into sixths: the first column takes up half of the
window, the second takes one third, and the third takes one sixth.

• rows: attribute works just like the cols attribute and can take the same values,
but it is used to specify the rows in the frameset. For example to create two
horizontal frames, use rows="10%, 90%". You can specify the height of each
row in the same way as explained above for columns.

• border: attribute specifies the width of the border of each frame in pixels. For
example border="5". A value of zero specifies that no border should be there.

• frameborder: specifies whether a three-dimensional border should be

displayed between frames. This attribute takes value either 1 (yes) or 0 (no).
For example frameborder="0" specifies no border.

• framespacing: specifies the amount of space between frames in a frameset.

This can take any integer value. For example framespacing="10" means there
should be 10 pixels spacing between each frames.

Loading Content - The <frame> Element

The <frame> element indicates what goes in each frame of the frameset. The <frame>
element is always an empty element, and therefore should not have any content,
although each <frame> element should always carry one attribute src, to indicate the
page that should represent that frame.
From the above example, lets take small snippet:

<frame src="/html/top_frame.htm" />

<frame src="/html/main_frame.htm" />
<frame src="/html/bottom_frame.htm" />

The <frame> Element Attributes

Following are important attributes of and should be known to you to use frames.
WEB SYSTEMS AND TECHNOLOGIES

• src: indicates the file that should be used in the frame. Its value can be any
URL. For example, src="/html/top_frame.htm" will load an HTML file avaible in
html directory.

• name: attribute allows you to give a name to a frame. It is used to indicate

which frame a document should be loaded into. This is especially important
when you want to create links in one frame that load pages into a second frame,
in which case the second frame needs a name to identify itself as the target of
the link.

• frameborder: attribute specifies whether or not the borders of that frame are
shown; it overrides the value given in the frameborder attribute on the
<frameset> element if one is given, and the possible values are the same. This
can take values either 1 (yes) or 0 (no).

• marginwidth: allows you to specify the width of the space between the left and
right of the frame's borders and the frame's content. The value is given in pixels.
For example marginwidth="10".

• marginheight: allows you to specify the height of the space between the top
and bottom of the frame's borders and its contents. The value is given in pixels.
For example marginheight="10".

• noresize: By default you can resize any frame by clicking and dragging on the
borders of a frame. The noresize attribute prevents a user from being able to
resize the frame. For example noresize="noresize".

• scrolling: controls the appearance of the scrollbars that appear on the frame.
This takes values either "yes", "no" or "auto". For example scrolling="no" means
it should not have scroll bars.

• longdesc: allows you to provide a link to another page containing a long

description of the contents of the frame. For example
longdesc="framedescription.htm"

Frame's name and target attributes

One of the most popular uses of frames is to place navigation bars in one frame and
then load the pages with the content into a separate frame.
As you have already seen, each <frame> element can carry the name attribute to give
each frame a name. This name is used in the links to indicate which frame the new
page should load into. Consider this very simple example; create following content in
index.htm file:
WEB SYSTEMS AND TECHNOLOGIES

<frameset cols="200, *">

<frame src="/html/menu.htm" name="menu_page" />
<frame src="/html/main.htm" name="main_page" />
</frameset>

There are two columns in this example. The first is 200 pixels wide and will
contain the navigation bar. The second column or frame will contain the main part of
the page. The links on the left side navigation bar will load pages into the right side
main page.

<a href="http://www.google.com" target="main_page">Google</a>

<br /><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
<a href="http://news.bbc.co.uk/" target="main_page">BBC News</a>

The target attribute can also take the attribute values listed in the table that follows.
WEB SYSTEMS AND TECHNOLOGIES

LABORATORY ACTIVITY 6: FRAMES

Name:__________________________ Date: ________ Score:______________

Instructions: Create a Web page that has 3 frames. Link the Activities and Display in
the last Page. Save your work as frames.html.

Sample Output:

My Laboratory Activities

Activity 1
Activity 2
Activity 3
Activity 4
Activity 5

FORMAT:
• The row is 20% and 80%
• The column is 10% and 90%
• Put background color of your choice.
• The frameborder is 1
• In the first frame put “My Laboratory Activities” Font= Arial, size=34 name it
“First_page”
• In the second frame at the left side, link all your activities and name it
“Second_page”
• In the last frame name it “Main_page and Target to open all the activities
here.
You will be graded based on the following criteria

Criteria Percentage Score

Specification 25%
Tagging Structure 25%
Output Accuracy 50%
Total 100%

________________________
Instructor’s Signature
WEB SYSTEMS AND TECHNOLOGIES

CHAPTER X: HTML- Forms

Learning Outcomes:

The student will:

• Define Forms;
• identify and explain tag and attributes of HTML forms;
• demonstrate tag and attributes of HTML forms by giving and showing
examples;
• apply the HTML forms tag and attributes in creating HTML document.

HTML Forms

HTML forms are used to pass data to a server.

An HTML form can contain input elements like text fields, checkboxes, radio-buttons,
submit buttons and more. A form can also contain select lists, textarea, fieldset,
legend, and label elements.
The <form> tag is used to create an HTML form:

<form>

input elements

</form>

HTML Forms - The Input Element

The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An
<input> element can be of type text field, checkbox, password, radio button, submit
button, and more.

The most common input types are described below.

Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
WEB SYSTEMS AND TECHNOLOGIES

<form>
First name: <input type=”text” name=”firstname”><br>
Last name: <input type=”text” name=”lastname”>
</form>

How the HTML code above looks in a browser:

Top of Form
Firstname:
Last name:

Bottom of Form

Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.

Password Field

<input type="password"> defines a password field:

<form>
Password: <input type="password" name="pwd">
</form>

How the HTML code above looks in a browser:

Password:

Note: The characters in a password field are masked (shown as asterisks or circles).

Radio Buttons

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE
of a limited number of choices:

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

How the HTML code above looks in a browser:

Male
Female
WEB SYSTEMS AND TECHNOLOGIES

Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or

MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

How the HTML code above looks in a browser:

I have a bike
I have a car

Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page
specified in the form's action attribute. The file defined in the action attribute usually
does something with the received input:
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

How the HTML code above looks in a browser:

Submit
Username:
Bottom of Form
If you type some characters in the text field above, and click the "Submit" button, the
browser will send your input to a page called "demo_form_action.asp". The page will
show you the received input.
WEB SYSTEMS AND TECHNOLOGIES

LABORATORY ACTIVITY 7: FORMS

Name:__________________________ Date: _________ Score:______________

Instructions: Create a Web page of your information using FORMS. Save your work
as forms.html.

Sample Output

Family name: Given Name: Middle Name:

Address:
Age:
Bday:
Status: o Male o Female
Father’s Name: Mother’s Name:
Hobbies:

You will be graded based on the following criteria

Criteria Percentage Score

Specification 25%
Tagging Structure 25%
Output Accuracy 50%
Total 100%

___________________________
Instructor’s Signature
WEB SYSTEMS AND TECHNOLOGIES

CHAPTER XI: CSS (Cascading Style sheets) Part I

Learning Outcomes:

The student will:

• Define inline and external style sheet methods in CSS;
• Identify and explain the selectors and properties in CSS background;
• Demonstrate the use of css selectors in CSS properties by giving
examples;
• Apply the CSS methods and attributes in HTML document; and
• Create HTML document using CSS method, CSS background and CSS
font properties using internal external and inline css.

CSS Syntax

A CSS rule set consists of a selector and a declaration block:

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a property name and a value, separated by a colon.

CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are
surrounded by curly braces:
p {color:red;text-align:center;}

To make the CSS code more readable, you can put one declaration on each line,
like this:

Example
p{
color: red;
text-align: center;
}
WEB SYSTEMS AND TECHNOLOGIES

CSS Comments
Comments are used to explain your code, and may help you when you edit
the source code at a later date. Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span
multiple lines:
Example
p{
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

CSS Selectors

CSS selectors allow you to select and manipulate HTML element(s).

CSS selectors are used to "find" (or select) HTML elements based on their id,
classes, types, attributes, values of attributes and much more.

The element Selector

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this: (all <p> elements will be center-
aligned, with a red text color)

Example
p{
text-align: center;
color: red;
}
WEB SYSTEMS AND TECHNOLOGIES

The id Selector
The id selector uses the id attribute of an HTML tag to find the specific
element.
An id should be unique within a page, so you should use the id selector
when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by
the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example
#para1 {
text-align: center;
color: red;
}

Do NOT start an ID name with a number!

The class Selector

The class selector finds elements with the specific class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period character, followed
by the name of the class:

In the example below, all HTML elements with class="center" will be

center-aligned:

Example
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be
affected by a class.
In the example below, all p elements with class="center" will be center-
aligned:
Example
p.center {
text-align:center;
color:red;
}
}
WEB SYSTEMS AND TECHNOLOGIES

Do NOT start a class name with a number!

Grouping Selectors

In style sheets there are often elements with the same style:
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;

color: red;
}

p{
text-align: center;
color: red;
}

To minimize the code, you can group selectors.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:
Example

h1, h2, p {
text-align: center;
color: red;
}
When a browser reads a style sheet, it will format the document according to the
information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
WEB SYSTEMS AND TECHNOLOGIES

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing just
one file.
Each page must include a link to the style sheet with the <link> tag. The <link> tag
goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

An external style sheet can be written in any text editor. The file should not contain
any html tags. The style sheet file must be saved with a .css extension. An example
of a style sheet file is shown below:

"myStyle.css":

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/background.gif");}

Do not add a space between the property value and the unit (such as margin-left:
20 px;). The correct way is: margin-left: 20px;

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style.
You define internal styles in the head section of an HTML page, inside the <style>
tag, like this:

<head>
<style>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/background.gif");}
</style>
</head>
WEB SYSTEMS AND TECHNOLOGIES

Inline Styles

An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly!

To use inline styles, add the style attribute to the relevant tag. The style attribute can
contain any CSS property. The example shows how to change the color and the left
margin of a paragraph:
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the
values will be inherited from the more specific style sheet.

For example, assume that an external style sheet has the following properties for the
h3 selector:

h3 {
color: red;
text-align: left;
font-size: 8pt;
}

then, assume that an internal style sheet also has the following properties for the h3
selector:

h3 {
text-align: right;
font-size: 20pt;
}

If the page with the internal style sheet also links to the external style sheet the
properties for the h3 element will be:

color: red;
text-align: right;
font-size: 20pt;

The color is inherited from the external style sheet and the text-alignment and the
font-size is replaced by the internal style sheet.
WEB SYSTEMS AND TECHNOLOGIES

Multiple Styles Will Cascade into One

Styles can be specified:

1. inside an HTML element

2. inside the head section of an HTML page
3. in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML
document.
Cascading order

What style will be used when there is more than one style specified for an HTML
element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual"
style sheet by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means
that it will override a style defined inside the <head> tag, or in an external style
sheet, or in a browser (a default value).

Note: If the link to the external style sheet is placed after the internal style
sheet in HTML <head>, the external style sheet will override the internal
style sheet!

CSS Background Properties

CSS background properties are used to define the background

effects of an element.

CSS properties used for background effects:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color

The background-color property specifies the background color of an element.

The background color of a page is defined in the body selector:
WEB SYSTEMS AND TECHNOLOGIES

Example
body {
background-color: #b0c4de;
}

With CSS, a color is most often specified by:

• a HEX value - like "#ff0000"

• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"

In the example below, the h1, p, and div elements have different background colors:

Example:

h1 {
background-color: #6495ed;
}

p{
background-color: #e0ffff;
}

div {
background-color: #b0c4de;
}

Background Image

The background-image property specifies an image to use as the background of an

element.
By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example

body {
background-image: url("paper.gif");
}

Below is an example of a bad combination of text and background image. The text is
almost not readable:
WEB SYSTEMS AND TECHNOLOGIES

Example

body {
background-image: url("bgdesert.jpg");
}

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and

vertically.

Some images should be repeated only horizontally or vertically, or they will look
strange, like this:

Example

body {
background-image: url("gradient.png");
}

If the image is repeated only horizontally (repeat-x) and vertically (repeat-y), the
background will look better:

Example

body {
background-image: url("gradient.png");
background-repeat: repeat-x;
}

Note: When using a background image, use an image that does not disturb
the text.

Image - Set position and no-repeat

Showing the image only once is specified by the background-repeat property:

WEB SYSTEMS AND TECHNOLOGIES

Example

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

In the example above, the background image is shown in the same place as the text.
We want to change the position of the image, so that it does not disturb the text too
much.

The position of the image is specified by the background-position property:

Example

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Background - Shorthand property

As you can see from the examples above, there are many properties to consider
when dealing with backgrounds. To shorten the code, it is also possible to specify all
the properties in one single property. This is called a shorthand property.

The shorthand property for background is simply "background":

Example

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

It does not matter if one of the property values is missing, as long as the ones that
are present are in this order.
WEB SYSTEMS AND TECHNOLOGIES

All CSS Background Properties

Property Description
background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls with the

rest of the page

background-color Sets the background color of an element

background-image Sets the background image for an element

Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

TEXT FORMATTING

This text is styled with some of the text formatting properties. The heading uses the
text-align, text-transform, and color properties. The paragraph is indented, aligned,
and the space between characters is specified.
Text Color

The color property is used to set the color of the text.

With CSS, a color is most often specified by:

• a HEX value - like "#ff0000"

• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"

Look at CSS Color Values for a complete list of possible color values.

The default color for a page is defined in the body selector.

Example
body {
color: blue;
}

h1 {
color: #00ff00;
}

h2 {
color: rgb(255,0,0);
}
WEB SYSTEMS AND TECHNOLOGIES

Note: If you define the color property, you must also define the background-color
property.

Text Alignment
The text-align property is used to set the horizontal alignment of a text. Text can be
centered, or aligned to the left or right, or justified. When text-align is set to "justify",
each line is stretched so that every line has equal width, and the left and right
margins are straight (like in magazines and newspapers).

Example

h1 {
text-align: center;
}

p.date {
text-align: right;
}

p.main {
text-align: justify;
}

Text Decoration

The text-decoration property is used to set or remove decorations from text.

The text-decoration property is mostly used to remove underlines from links for
design purposes:

Example

a{
text-decoration: none;
}

It can also be used to decorate text:

Example
h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
WEB SYSTEMS AND TECHNOLOGIES

h3 {
text-decoration: underline;
}

Note: It is not recommended to underline text that is not a link, as this

often confuses users.

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a

text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize
the first letter of each word.

Example

p.uppercase {
text-transform: uppercase;
}
p
.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text.

Example
p{
text-indent: 50px;
}
WEB SYSTEMS AND TECHNOLOGIES

All CSS Text Properties

Property Description
color Sets the color of text

direction Specifies the text direction/writing direction

letter-spacing Increases or decreases the space between characters in a text

line-height Sets the line height

text-align Specifies the horizontal alignment of text

text-decoration Specifies the decoration added to text

text-indent Specifies the indentation of the first line in a text-block

text-shadow Specifies the shadow effect added to text

text-transform Controls the capitalization of text

unicode-bidi Used together with the direction property to set or return whether the
text should be overridden to support multiple languages in the same
document

vertical-align Sets the vertical alignment of an element

white-space Specifies how white-space inside an element is handled

word-spacing Increases or decreases the space between words in a text

CSS Font
CSS font properties define the font family, boldness, size, and the style of a text.

Difference Between Serif and Sans-serif Fonts

CSS Font Families

In CSS, there are two types of font family names:

• generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
 WEB SYSTEMS AND TECHNOLOGIES

• font family - a specific font family (like "Times New Roman" or "Arial")

Generic family Font family Description

Serif Times New Roman Serif fonts have small lines at the ends on
Georgia some characters

Sans-serif Arial "Sans" means without - these fonts do not

Verdana have the lines at the ends of characters

Monospace Courier New All monospace characters have the same

Lucida Console width

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Font Family
The font family of a text is set with the font-family property. The font-family property
should hold several font names as a "fallback" system. If the browser does not
support the first font, it tries the next font. Start with the font you want, and end with a
generic family, to let the browser pick a similar font in the generic family, if no other
fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation
marks, like: "Times New Roman".

More than one font family is specified in a comma-separated list:

Example
p{
font-family: "Times New Roman", Times, serif;
}

For more commonly used font combinations, look at our Web Safe Font
Combinations.

Font Style
The font-style property is mostly used to specify italic text.

This property has three values:

• normal - The text is shown normally

• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
WEB SYSTEMS AND TECHNOLOGIES

Example
p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

Font Size

The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you should
not use font size adjustments to make paragraphs look like headings, or headings
look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for
headings and <p> for paragraphs.The font-size value can be an absolute, or relative
size.

Absolute size:
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for
accessibility reasons)
• Absolute size is useful when the physical size of the output is known

Relative size:

1. Sets the size relative to surrounding elements

2. Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like
paragraphs, is 16px (16px=1em).

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

Example
h1 {
font-size: 40px;
}
WEB SYSTEMS AND TECHNOLOGIES

h2 {
font-size: 30px;
}

p{
font-size: 14px;
}

The example above allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari
to resize the text.

Note: The example above does not work in IE, prior version 9.

The text can be resized in all browsers using the zoom tool (however, this resizes
the entire page, not just the text).

Set Font Size With Em

To avoid the resizing problem with older versions of Internet Explorer, many
developers use em instead of pixels.

The em size unit is recommended by the W3C.

1em is equal to the current font size. The default text size in browsers is 16px. So,
the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p{
font-size: 0.875em; /* 14px/16=0.875em */
}

In the example above, the text size in em is the same as the previous example in
pixels. However, with the em size, it is possible to adjust the text size in all browsers.

Unfortunately, there is still a problem with older versions of IE. The text becomes
larger than it should when made larger, and smaller than it should when made
smaller.
WEB SYSTEMS AND TECHNOLOGIES

Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the
<body> element:

Example
body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p{
font-size: 0.875em;
}

All CSS Font Properties

Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

font-variant Specifies whether or not a text should be displayed in a

small-caps font

font-weight Specifies the weight of a font

Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link - a normal, unvisited link
WEB SYSTEMS AND TECHNOLOGIES

• a:visited - a link the user has visited

• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
Example
/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */

a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited

• a:active MUST come after a:hover

Common Link Styles

In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
WEB SYSTEMS AND TECHNOLOGIES

text-decoration: underline;
}

a:active {
text-decoration: underline;
}
Background Color

The background-color property specifies the background color for links:

Example
a:link {
background-color: #B2FF99;
}

a:visited {
background-color: #FFFF85;
}

a:hover {
background-color: #FF704D;
}

a:active {
background-color: #FF704D;
}

CSS Table Properties

The look of an HTML table can be greatly improved with CSS:

Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements
Example
table, th, td {
border: 1px solid black;
}

Notice that the table in the example above has double borders. This is because both
the table and the th/td elements have separate borders.

To display a single border for the table, use the border-collapse property.
WEB SYSTEMS AND TECHNOLOGIES

Collapse Borders

The border-collapse property sets whether the table borders are collapsed into a
single border or separated:

Example
table {
border-collapse: collapse;
}

table, th, td {
border: 1px solid black;
}

Table Width and Height

Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th
elements to 50px:

Example
table {
width: 100%;
}

th {
height: 50px;
}

Table Text Alignment

The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:

Example
td {
text-align: right;
}

The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Example
td {
height: 50px;
vertical-align: bottom;
}
WEB SYSTEMS AND TECHNOLOGIES

Table Padding

To control the space between the border and content in a table, use the padding
property on td and th elements:

Example
td {
padding: 15px;
}

Table Color

The example below specifies the color of the borders, and the text and background
color of th elements:

Example
table, td, th {
border: 1px solid green;
}

th {
background-color: green;
color: white;
}

Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base. In our examples we will build the
navigation bar from a standard HTML list. A navigation bar is basically a list of links,
so using the <ul> and <li> elements makes perfect sense:

Steps in creating a Vertical Navigation Bar:

1. Using HTML create an html document that will be used to contain your
navigation bar.
2. Using Unordered List create a list of your links in navigation bar
3. Apply class in the UL tag.
4. Create an external CSS document to format the contents of the Unordered
list that you have created.
5. Inside the CSS file type
WEB SYSTEMS AND TECHNOLOGIES

*{
Margin:0px;
Padding:0px;
}

This statement is a reset rule.

6. Customized the appearance of the background of your page by changing
the background color, font family and set padding into 50px.
7. Now you are going to type the rules for navigation menu.
8. Using the class of your UL tag and sub UL tags, set list style type into none:
Ex:
.navmenu, .sub1{
List-style-type:none;
}

This statement will eliminate the bullets of the list items.

9. Next step is to manipulate the list items.
Ex.
.navmenu li{
outline:1px solid red;
width:125px;
text-align:center;
position:relative;
float:left;
}

Position relative is going to allow us to position our sub menu absolutely

within the list items.
Float left this is to get the list items side by side.

10. Next is to manipulate the anchor tag.

Ex:
.navmenu a{
text-decoration:none;
display:block; ----→ this statement makes the entire box/button to be
click
width:125px;
height:25px;
line-height:25px;
background-color:white;
border:gray;
border-radius:5px;
}
11. Next Step is changing how anchor tags work
12. Assign top margin in sub menu
Ex:
.navmenu .sub1 a{
margin-top:3px;
}
13. Next we will change the color upon hovering while keeping in track with the
current menu bar. The greater than sign > trigger our anchor tag to change
color upon hovering.
WEB SYSTEMS AND TECHNOLOGIES

Ex:
.navmenu li:hover > a{
background-color:green;
}
14. Next step, we will going to change the color of the currernt hovering position
from its main bar.
Ex:
.navmenu li:hover a:hover{
background-color:yellow;
}
15. Next step is to hide the sub menu and arrange the position.
Ex:
.navmenu ul.sub1{
display:none;
position:absolute;
top:26px;
left:0px;
}
16. Last Step… After hiding the sub menu in step 15, we will going to display the
submenu upon the action of mouse hovering.
Ex:
.navmenu li:hover .sub1{
display:block;
}
WEB SYSTEMS AND TECHNOLOGIES

LABORATORY ACTIVITY # 8( Project): TURBO BLAZE WEBSITE

Name: ______________________ Date:______________Score:______________

Instructions: Build a commercial website for TURBO BLAZE Company. This

company would like to advertise its Cars, Motorcycles, Services, Parts and
Accessories, and other quality products online. Apply all the things you learned,
including the use of Cascading Style Sheet.
Featured Links:
HOME – Contains links for News, Announcements and New Products or Services
MISSION and VISION – Contains the Company’s Mission and Vision
PRODUCTS
• CARS – Contains Pictures, Names and Prices of Car Products*
• MOTORCYCLES – Contains Pictures, Names and Prices of Motorcycle
Products.*
• APPARELS and ACCESORIES - Contains Pictures, Names of apparels
and accessories.*
*Set your own Price
SERVICES – Contains information for other services such as Overhauling, Brake
Aligning, Body Repair, Wheel Aligning and many more
DEALERS and CONTACTS –Contains the directory and contact information’s of the
company’s Main Office and its Dealers
(All information needed which contains articles, news and videos are given)

You will be graded based on the following criteria

Criteria Percentage Score

Originality 15%
Lay-out and Design 50%
Output Accuracy 35%
Total 100%

________________________
Instructor’s Signature
WEB SYSTEMS AND TECHNOLOGIES

REFERENCES

Book/s:
Paul McFedies (2018) Web Coding & Development All-in-One for Dummies
David McMahon (N.D) HTML and CSS Crash Course – Learn HTML and CSS
with easy to follow - step-by-step tutorials
Jerwin S. Taguinod. Web Systems and Technologies. Unpublished.
Online Resources:

HTML Tutorials. Retrieved from https://www.w3schools.com/html/

HTML Styles – CSS. Retrieved from
https://www.w3schools.com/html/html_css.asp
HTML Forms. Retrieved from
https://www.w3schools.com/html/html_forms.asp
HTML Tables. Retrieved from
https://www.w3schools.com/html/html_tables.asp
HTML Lists. Retrieved from https://www.w3schools.com/html/html_lists.asp
HTML Links. Retrieved from https://www.w3schools.com/html/html_links.asp
HTML Elements. Retrieved from
https://www.w3schools.com/html/html_elements.asp
HTML Introduction. Retrieved from
https://www.w3schools.com/html/html_intro.asp
HTML Text Formatting. Retrieved from
https://www.w3schools.com/html/html_formatting.asp