01

i|P age
 Table Contents
UNIT I. GETTING STARTED WITH HTML 1
What is the Internet? 1
What is the World Wide Web? 2
Web Site Types and Purposes 3
Understanding the Need for a Web Server 3
Web-Development Languages You Can Use to Build a Web Page 4
Tools Needed for Creating Web Pages 5
Web Development Life Cycle 5
UNIT II. LET’S TRY TO BUILD YOUR FIRST WEB PAGE 7
Writing and Saving an HTML File 7
Web Page Structure 8
UNIT III. IMPROVING THE APPEARANCE OF THE WEBPAGE 11
WHAT IS CASCADING STYLE SHEET? 11
CSS Syntax 12
How Can We Apply CSS in a Webpage? 13
UNIT IV. INSERTING LISTS IN A WEB PAGE 15
Creating an Ordered List 15
Formatting List Item Content 16
Changing an Ordered List's Numbering Scheme 16
Creating Unordered List 17
Controlling the Appearance of the Unordered List Bullet 18
Positioning List Content 19
Creating a Definition List 19
UNIT V. INTEGRATING IMAGES 23
PLACING AN IMAGE WITHIN A WEBPAGE 23
Types of Image File 24
Understanding Absolute and Relative Image URLs 24
Specifying Alternative Text for an Image 24
The CSS Width and Height Property 25
Controlling an Image Border 25
Centering an Image 27

ii | P a g e
UNIT VI. INSERTING HYPERLINKS 31
Using Links on a Web Page 31
Creating a Text-Based Hyperlink 31
Opening a Hyperlink Within a New Window 32
Using an Image as a Hyperlink 32
Using Absolute, Relative and Page-Based Hyperlink References 33
Creating an In-Page Hyperlink 34
UNIT VI. USING INLINE CSS, INTERNAL CSS AND EXTERNAL CSS 37
Inline CSS 37
CSS Property 37
UNIT VII. ADVANCED CASCADING STYLE SHEETS 46
What is CSS Framework? 46
How do CSS frameworks work? 46
Why do front-end developers need a CSS framework? 47
HTML div Tag 48
Default CSS Settings 48
UNIT VIII. GETTING USER INPUT WITH FORMS 49
HTML Forms 49
Text and Password Fields 50
Radio Buttons 51
The Submit Button 52
The Target Attribute 52
The Name Attribute 53
Presenting the Checkbox within a Form 53
Creating a Pull-Down List 54

iii | P a g e
UNIT I. GETTING STARTED WITH HTML
OVERVIEW

Every day, users around the world browse the internet and visit websites
that present a wide variety of content using text, images, videos and other types of
multimedia. To access Web-based content, users are running a Web browser that is
used by program users to view World Wide Web content.

Developers use a programming language called the Hypertext Markup

Language (HTML) to build webpages. You can discover that HTML uses special
markup tags to describe content formatting. This unit focuses on how to use
different HTML tags to execute various activities. This unit will start with a number
of basic HTML tags that will help you to create simple webpages.

LEARNING OBJECTIVES
This chapter examines how to build several simple webpages. By the time I
finish this unit; I will be able to:
• describe the internet and the World Wide Web;
• know the difference between a web page and a website;
• identify different categories and purposes of website;
• demonstrate understanding of the need for a web server;
• discuss web browsers and identify their purpose; and
• identify which web-development software programs you can use to create
web pages more easily.

LESSON PROPER

What is the Internet?

Many people nowadays have been introduced to the Internet at school, at

home, at work, or in a local library. The Internet is a vast array of machines and data
networks connecting billions of computers used by enterprises, states, educational
institutions, organizations and individuals using modems, telephone lines, network
cables, satellite links, fibre optic connectivity, and other communications devices
and media.
The Department of Defense Advanced Research Projects Agency (ARPA)
developed a brief history of the Internet in the 1960s. ARPANET was the first name
of the Internet, which began with four nodes on it, and sent its first message in 1969.

1|P age
The Internet today has millions of nodes on thousands of networks that connect
people worldwide to share resources and information.
The Internet Service Provider (ISP) is a company with a permanent
connection to the Internet backbone. ISPs use high-or medium-speed data lines to
allow individuals and businesses to link to the backbone for connectivity to the
Internet. There are a number of providers in the country that you can choose from,
but we will focus on the major players aimed at providing home broadband Internet
services to consumers. These are the leading providers in the Philippines:
PLDT. As the biggest telecom company in the country, PLDT provides both
service reliability and the largest area coverage for their fiber, DSL, or LTE
broadband home or business packages.
Globe. As one of the largest mobile telecom providers in the country, Globe
offers home or business internet solutions in a variety of plans suitable for
work or leisure.
Sky Broadband. It is the leading cable TV provider that also offers
broadband cable internet connection, conveniently bundled with their HD
cable TV subscription.
Eastern Telecom. It offers dedicated Internet direct service running on
leased line technology and also offers DSL Internet suitable for smaller
offices or for work from home employees.
Converge ICT. It provides home, SME, or enterprise broadband Internet
based purely on fiber optic connectivity.

What is the World Wide Web?

Most people use the terms Internet and World Wide Web interchangeably, but
the two terms are not synonymous. The Internet and the Web are two different but
related things. The Internet is a physical infrastructure, whereas the World Wide
Web (WWW) is sometimes called the Web, is a component of the Internet that
supports multimedia and consisting of a series of connected documents. To support
multimedia, the web relies on the Hypertext Transfer Protocol (HTTP), which is a set
of rules for exchanging text, images, sounds, video, and other multimedia files. The
link documents or pages of information, on the web are known as web pages. A Web
Page is a document commonly written in HTML that is accessible through the
internet or other network using a web browser.
A website is a series of linked web pages, including multimedia content,
normally labelled with a common domain name and hosted on at least one web
server. Each website includes a home page, which is the first document people can

2|P age
see when they can visit the website. The home page is also used as an index or table
of contents for other documents and files viewed on the web.

Web Site Types and Purposes

Three general categories of websites and its characteristics.

TYPE USERS ACCESS APPLICATIONS
Internet Anyone Public Used to share information such as
personal information, product catalogs,
course information with the public
Intranet Employees or Private Used to share information such as
Members forms, manuals, organization schedules
with employees or members
Extranet Selected Private Used to share information such as
business inventory updates, product
partners specifications, financial information
with business partners and customers

Understanding the Need for a Web Server

To build a webpage, you create an HTML file that specifies the text, images,
and formatting of the page. You create an HTML file on your own system. You must
place HTML files and related files on a web server before other users can view your
web pages. In other words, you can create HTML files using your own computer. You
can view the contents of the files in a browser. A Web Browser or simply Browser is
a software application used to locate, retrieve and display content on the World
Wide Web, including web pages, images, videos and other files.
Example of Web Browser
1. Mozilla Firefox
2. Google Chrome
3. Microsoft Edge
4. Safari
5. Internet Explorer
As a client/server model, the browser is the client that runs on a computer
and contacts the web server to request for information. The web server sends the
information back to the browser which displays the results on the computer or
other internet enabled device that supports a browser as shown in the figure below.

3|P age
 If you are building a website that you want others to view, you need a Web
server. Web Servers are computers that deliver (serves up) web pages. Every web
server has an IP address and possibly a domain name. Each site on the web has a
unique name, called a domain name, such as Google.com, Yahoo.com, and
Microsoft.com. If you plan to get your own web server space, you can purchase you
own domain name specific to your site. Any computer can be turned into a web
server by installing server software and connecting the machine to the internet.
Across the web, many sites offer web server space free of charge. You can use such
sites to host your webpages, which other users can view. Unfortunately, the free
sites will integrate advertisements into your Web content, such as banners across
the top of the page that you don’t want.

Web-Development Languages You Can Use to Build a Web Page

Developers use a computer language called the Hypertext Markup Language

to build webpages. HTML is the basic markup language used to build web sites and
web application that uses special markup tags to describe the formatting of text. One
HTML tag may define the text for a paragraph; another may specify the particulars
of an image to appear on the website, and other tags may regulate the formatting,
such as the use of bold or italic fonts.
This unit followed a different turn by eliminating deprecated tags and
attributes. Deprecated tags and attributes are tags and attributes that are being
phased out and are thus no longer recommended in the current W3C standard.
However, deprecated tags are still found on many web sites, so it is useful to know
their meaning from a maintenance point of view. In an attempt to remove
deprecated tags, projects use the Cascading Style Sheet (CSS) to change the style of
the web page. CSS helps you to define styles for different web page elements. A style
is a rule that determines an element’s aesthetics. You will define CSS in 3 different
ways: inline style, embedded style and external style.

4|P age
 Using JavaScript, developers can change the content of the HTML element,
modify CSS styles, change attributes, and more. JavaScript is a programming
language in which developers specify the instructions that the browser must
perform in order to perform specific tasks.

Tools Needed for Creating Web Pages

You can create web pages using HTML with a simple text editor, such as
Microsoft Notepad which is readily available in all devices running Windows
Operating Systems. A Text Editor is a type of computer program that edits plain text.
You can also create a web page using a Source Code Editor, which is a
program designed specifically for editing source code of computer programs by
programmers. Sublime Text and Notepad++ are some of the top source code editors
available for web development.
You can create web pages using WYSIWYG editor such as Adobe
Dreamweaver, Amaya, or CoffeeCup HTML Editor. A WYSIWYG editor is a program
that provides a graphical user interface that allows a developer to preview the web
page during its development.

Web Development Life Cycle

The Web development life cycle is a process that can be used for developing
web pages at any level of complexity. The web development life cycle includes the
following phases: planning, analysis, design and development, testing, and
implementation and maintenance.
Phase 1: Website planning, which is the first phase of the web development life
cycle , involves identifying the goals or purpose of the web site. The first step in the
website planning phase is to answer the question “What is the purpose of this
website?”
Phase 2: During the analysis phase, you make decisions about the website content
and functionality. To help define the appropriate website content and functionality,
you should first identify the tasks that users need to perform.
Phase 3: After determining the purpose of the website and defining the content and
functionality, you need to consider the website’s design. Some key considerations in
designing a website are defining how to organize web page content, selecting
appropriate web structure, determining how to use multimedia, addressing
accessibility issues, and designing pages for an international audience.
Phase 4: Web site should be tested at a various stage of the wed design and
development process. Testing should be comprehensive and include a review of
web page content, functionality, and usability.

5|P age
Phase 5: Once website testing is complete and any required changes have been
made, the website can be implemented. Implementation of a website involves the
actual publishing of the web pages to a web server.

UNIT SUMMARY
In this unit, you have learned about the Internet, the World Wide Web, and
associated technologies, including web servers and web browsers. You learned the
essential role of HTML in creating web pages and reviewed tools used to create
HTML documents. You also learned that most development projects follow a five-
phase life cycle.

6|P age
UNIT II. LET’S TRY TO BUILD YOUR FIRST WEB PAGE
OVERVIEW

Developers use a programming language called the Hypertext Markup

Language (HTML) to build webpages. You can discover that HTML uses special
markup tags to describe content formatting. This unit focuses on how to use
different HTML tags to execute various activities. This unit will start with a number
of basic HTML tags that will help you to create simple webpages.

LEARNING OBJECTIVES
This chapter examines how to build several simple webpages. By the time I
finish this unit; I will be able to:
• determine how to write and save an HTML documents using a text editor;
• demonstrate understanding of the web page structure;
• identify different HTML tags; and
• use a browser to view a web page.

LESSON PROPER

Writing and Saving an HTML File

Today, many people – individuals, students, teachers, business executives,

web developers, and others – are developing web pages for personal or professional
reasons. Each person has his or her own style and resulting web pages are as
diverse as the people who create them.
To get started, use a text editor to create an HTML file that resides on your
computer. To launch, open a Text Editor (Notepad) or Source Code Editor (Sublime
Text or Notepad++) software. Some web developers would first save the file before
writing a sequence of HTML codes. You should save the file as a.html file. (Save as
file – choose HTML). After saving your file, it's time for you to write the contents of
your html file. Write your HTML codes
To view you file’s contents, "double click" on the saved file, and you browser
in turn, should display your file’s contents. Remember, because the file resides on
your computer’s disk, and not on a web server, other users cannot view your file.

7|P age
Web Page Structure

Now that you have successfully created, saved, and displayed and HTML file,
it’s time to understand the file’s contents. Before you begin entering the content, you
must start by inserting tags that define the overall structure of the web page. HTML
tags are keywords (tag names) surrounded by angle brackets like <html>, it is
normally come in pairs like <body> and </body>. The first tag in a pair is the start
tag; the second tag is the end tag. The end tag is written like the start tag, with a
slash (/) before the tag name. Start and end tags are also called opening and closing
tags. The element content is everything inserted between the start and end tags.
Some HTML tags have empty content (ex. <br /> or <hr />), empty tags are closed in
the start tag (ex. <br />)
To start, the <!DOCTYPE html> tag tells the browser the type of content that
the file contains – its document type or DOCTYPE for short. In the past, HTML files
have used a variety of more complex <!DOCTYPE> tags. With HTML version 5, the
tag has been simplified to use just the word html. You should start each html file
that you create with the following doctype tag:
<!DOCTYPE html>
The <html> and </html> elements are the root elements of an HTML page.
They indicate the start and the end of the HTML document. These tags are written
after the <!DOCTYPE> declaration. An HTML file consists of two parts: an optional
header section define as <head> and </head> tags – within which you will define
JavaScript program statements and cascading style sheet definitions and a body
section define as <body> and </body> tags – within you will place the contents of
your page.

8|P age
Note: Use lowercase letters for your tags, <html>. Most browsers support lowercase,
uppercase, and even mixed case tags. However, standard documents that provide
the HTML specifications lean toward the use of lowercase.
Displaying a Page Title
When you view a webpage, browser will often display a title for the page at
the top of the window or at the top of the tab. To specify your page title, use the
<title> and </title> tag pair. Within your HTML file, place the <title> tag pair within
the <head> and </head> tags, which precede the <body> tag.
Creating Paragraphs within HTML Content
It is normal to have one or more paragraphs of text in many of the HTML
documents you make. As you've already heard, use the <br /> line-break tag, you
can direct the browser to put the text that follows at the start of a new line. When
you use the <br /> tag, we can divide the text in a way that provides the impression
of a paragraph. Sometimes, we choose to use precise text formatting inside
paragraphs, likely by choosing a font or color, or by specifying line spacing. In such
cases, you should use the <p> and </p> tag pair to mark the start and end of each
paragraph.
Displaying Bold and Italic Text
The <b> and </b> or bold tags are used to display specific text using a bold
font. When the browser encounters a <b> tag, the browser will start its use of a bold
font to display the page text. When the browser later encounters the </b> tag, it will
turn off bolding. The <i> and </i> or italic tags are used to display specific text using
an italic font.
Most of the HTML tags use start and end tag pairs. As the size and complexity
of your HTML documents increase, sometimes you will make formatting errors,
perhaps forgetting an ending tag or using the wrong tag. In case that you forgot to
end a tag, you will experience an unexpected output.
Displaying Document Headings
Within a webpage, depending on your design, there may be times when you
want to place headings within your text. HTML defines six tag pairs that let you
create different size headings. The <h1> and </h1> tag pair creates the largest
heading and the <h6> and </h6> tag pair, the smallest.
Displaying a Horizontal Rule
A horizontal rule is a line the browser displays across the page, normally to
divide page content. To create a horizontal rule, you use the <hr /> tag.

9|P age
 UNIT SUMMARY
The pages that the users view on the web are created in HTML. HTML uses
special markup tags to format content. One set of HTML tags may specify the title
that appears in the browser window for the page, another set may specify the text
for a paragraph, and another may provide specifics about a photo that is to appear
on the page. This unit introduces the process of creating simple HTML files and
running them in a web browser.

UNIT REVIEW
1. Using a Source Code Editor, create an HTML file that will produce the same
output as shown below.

2. The title should be “Laboratory 1”

3. Save the file as Laboratory1.html

10 | P a g e
UNIT III. IMPROVING THE APPEARANCE OF THE WEBPAGE
OVERVIEW

Using HTML, developers layout content within a webpage, specifying

headers, paragraphs, tables, images, and more. For years, developers would say that
HTML “formats a webpage”. It’s preferable to say that HTML specifies the wbpage
elements and layout, and cascading style sheet sttributes specify the actual
formatting.

LEARNING OBJECTIVES

This chapter examines how to use Cascading Style Sheets (CSS) to format
webpages. By the time I finish this unit; I will be able to:
• identify the use of Cascading Style Sheet (CSS);
• use the CSS syntax; and
• define the term “cascading style sheets”.

LESSON PROPER

WHAT IS CASCADING STYLE SHEET?

Cascading Style Sheets or CSS is one of the scripting languages used to

characterize the layout of an HTML document. CSS lets web developers determine
how HTML components are to be viewed on various platforms and screen sizes. It's
doing a lot of time. You can transform the style of several web pages into more
enticing and user-friendly at the same time.
CSS Example:

CSS can be a big help to Web developers to solve a problem when it comes in
designing a webpage especially for the developers with less time to design or have a

11 | P a g e
limited designing skill because HTML was never intended to contain tags for
formatting a webpage. It was created to describe the content of a web page, like:

Once tags like < font > and color attributes were introduced to the HTML 5.0
specification, a nightmare for web developers began. The creation of large websites,
where fonts and color details have been applied to each page, has become a lengthy
and expensive operation. CSS was developed by the World Wide Web Consortium
(W3C) to address this problem.
The CSS also avoids the shape or layout of the HTML template which lets the
developer minimize the time taken to construct their website. Style definitions are
usually contained in external files with a.css file extension. Using an external CSS file,
the developer can change the look of the entire website by simply changing only one
file and not the entire document.

CSS Syntax

Throughout the discussion, you have made use of attributes to control an

element, in HTML5 attribute provides additional information about the specific
element, and always specified in the opening tag. The style attribute can be used to
set the style of a specific HTML element.
CSS syntax is consisting of a selector and a declaration block:

The selector points to the HTML attribute you want to format, such as title,
post, body, etc. The declaration block consists of one or more declarations, and each
declaration includes a name for the CSS property and a value separated by a colon.
Multiple CSS declarations are divided by semicolons, and the declaration blocks are
enclosed by curly braces.
Example:
In this example all <p></p> elements will be center-aligned.
p {text-align:ceter}

12 | P a g e
Example explained that p is a selector in CSS (it points to the HTML element you
want to style: <p>) text-align is a property, and center is the property value.

How Can We Apply CSS in a Webpage?

There are four ways on how to apply CSS in a webpage. These are the
following:
1. Inline CSS
Inline CSS is used for applying style to a particular HTML tag. This style is
easy to apply in an HTML element, but the least recommended styling method
because of the difficulty it brings in managing larger websites. The use of this style
often leads to redundancy of effort. This style is useful for testing and previewing
changes.
Add the type attribute to the specific tag to use the inline types. The style
attribute can include all of the CSS properties. The example illustrates how to
change the color and the left side of the paragraph:
<p style="color:red ;margin-left:20px;">This is a paragraph.</p>
2. Internal or Embedded CSS
Internal CSS code is put in the <head> section of a particular web page.
Classes and IDs can be used to refer to the CSS code. This style will be effective for
the whole web page. If you want to set an element with the same appearance like
<p></p> the embedded style is good to use. To incorporate the internal CSS in your
HTML documents, you need to put the declaration block between <style> </style>
tags.
When a particular page has a specific theme, an internal style sheet will be
used. You describe internal styles in the head portion of the HTML file, inside the
<style> attribute, like this:
<head>
<style>
hr {color: pink;}
p {margin-left: 20px;}
body {background-image: url("background2.jpg");}
</style>
</head>

13 | P a g e
 3. External CSS
An external style sheet is ideal if the style is applied to a number of pages.
With an external style sheet, you can alter the appearance of the whole website by
modifying just one page.
Each page must include a link to the < link > style sheet. The < link > tag is
within the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
4. CSS Framework
A CSS framework is a library allowing for easier, more standards-compliant
web design using the Cascading Style Sheets language. Most of these frameworks
provide at least a grid particularly for responsive web design. More functional
systems also come with more functionality and extra functions, but mainly design-
oriented and based on immersive user interface trends. Bootstrap and Framework
are two popular and commonly used examples of CSS frameworks.

UNIT SUMMARY
Across the web, developers make extensive use of cascading style sheets to
format elements with a webpage. By default, if a web developer does not specify CSS
attributes for an HTML element, a browser will use its own default, built-in
formatting. To specify formatting using CSS, developers can use inline, embedded,
and external styles.

14 | P a g e
UNIT IV. INSERTING LISTS IN A WEB PAGE
OVERVIEW

It is common to display lists of data in a web page – either numbered lists or

bulleted lists. HTML provides an ordered-list tag pair <ol> and </ol>, which you can
use to create a numbered list. It also provides an unordered-list tag pair <ul> and
</ul>, which you can use to create a bulleted list. In addition, HTML supports the
description list using <dl> and </dl> tag pair.

LEARNING OBJECTIVES

This unit examines HTML list processing in details. By the time I finish this
unit; I will be able to:
• create an ordered list, which is sometimes called a numbered list;
• create an unordered list, which is sometimes called a bulleted list;
• control the appearance of the unordered and ordered list; and
• create a definition list consisting of terms and their meanings.

LESSON PROPER

Creating an Ordered List

An ordered list, sometimes called a numbered list, is useful for presenting a

series of steps that the user should perform in order. To create an ordered list, you
use the <ol> and </ol> tag pair. The ordered list that you create will consist of two
or more items. To specify each list item, which is an entry within an ordered or
unordered list, you use the <li> and </li> tag pair.

15 | P a g e
Formatting List Item Content

When you create an ordered or unordered list within a webpage, you use the
<li> and </li> tag pair to specify each list item. When you specify a list item, you can
include other HTML tags between the <li> and </li> tags to format the content.

Changing an Ordered List's Numbering Scheme

By default, when you create an ordered list, your browser can use the
numbers 1 , 2, 3, and so on to precede each of the list items. Depending on the list
content, there can be instances when you have to use letters or even Roman
numerals for each list item. To control the type of numbering the browser uses
within an ordered list, you can use a CSS property list-style-type.

16 | P a g e
Creating Unordered List

An unordered list, often called "bulleted list", contains a list items in no

particular orders, such as a grocery list, features for a new product, or browsers that
support particular HTML tag or attribute. To create an unordered list within a
webpage, you use the <ul> and </ul> tag pair. Again, to identify the items within the
list, you can use the <li> and </li> list item tag pair.

17 | P a g e
Controlling the Appearance of the Unordered List Bullet

By default, when you create an unordered list, the browser will precede each
list item with a disc bullet. Like the <ol> tag you can also use list-style-type property
in <ul> tag, you can direct the browser to hide the bullet or use a circle, square, or
disc to precede list items.
In addition to using the <ul> tag list-style –type property, HTML lets you
specify a list-style-image property to allow the browser to use a graphic for each list
item.

18 | P a g e
Positioning List Content

By default, when you create an ordered or unordered list, the browser will
indent the bullets (or numbers) and the list items. When the text within a bulleted
list or numbered list wraps, you can use the list-style-position property to control
whether the bullet (or number) appears inside the text or outside the text. Within
one list, the bullets appear inside the text. In the second list, the bullet is outside the
text contents.

Creating a Definition List

A definition list contains one or more terms and meaning. Within a web page,
you might use a definition list to create a key term. To create a definition list, you

19 | P a g e
use the HTML <dl> and </dl> tag pair. Between the two tags, you use the <dt> and
</dt> tag pair to specify a term and the <dd> and </dd> tag pair to specify the
term’s meaning.

20 | P a g e
 As you might expect, within the <dd> and </dd> tags, you can embed other
HTM tags to format your definition list content. The following HTML file, use an
<img /> tag within the <dt> and </dt> tag pair to create a more visual list.

UNIT SUMMARY

Across the web, developers make extensive use of lists of data within the web
pages they create – normally numbered lists or bulleted lists. A numbered list
precedes the list items with a number, representing order. You might use a
numbered list to present the steps a user must perform to accomplish a task. In
contrast, an unordered list precedes the items with a bullet. Items in an unordered
list often appear in no particular order. HTML provide <ol> and </ol> tag pair,
which you can use to create a numbered list. It also provides an unordered list <ul>
and </ul>, and <dl> and </dl> tag pair, which lets you create a definition list that
consists of terms and their meanings.

UNIT REVIEW
1. Create a new HTML file and save it as Laboratory2.html
2. The title should be Laboratory 2
3. Create a <h1> heading that will display “Types of Websites”
4. Create another <h1> heading that will display “Research Chapters”
5. Both headings should be written using “Calibri”
6. Using unordered and ordered lists, create a web page that will display the
output given below.
7. All list items should be written using “Georgia”

21 | P a g e
22 | P a g e
UNIT V. INTEGRATING IMAGES
OVERVIEW

Web pages make extensive use of graphics images. To place an image within
an HTMl page, you use the <img /> tag. As you will learn, when usin various style
attributes, you have complete control over image sizing and placement.

LEARNING OBJECTIVES

This unit examines all aspects of webpage image used. By the time I finish
this unit; I will be able to:
• use the <img /> tag to place an image within a web page;
• identify the difference between absolute and relative image URLs;
• specify alternative text for an image;
• define the properties use to resize an image;
• use image as a page background using CSS property; and
• control the appearance of the image using different CSS properties.

LESSON PROPER

PLACING AN IMAGE WITHIN A WEBPAGE

To place an image within an HTML page, you use the <img /> tag. The <img />
tag is unique in that it is not a tag pair. Instead, you place an ending slash within the
tag immediately before the closing right bracket:

23 | P a g e
 When you place an <img /> tag within an HTML file, you use the src attribute
to specify the location of the corresponding image file. When the browser
downloads and examines your file’s HTML tags, the browser will then download the
image from the location specified.
<<<sample program>>>

Types of Image File

1. Graphics Interchange Format (.gif) is used for images with few colors (<256)
that allows transparent backgrounds. It uses compression techniques called
LZW compression to make it smaller to download on the Web.
2. Portable Network Graphics (.png) is the newest format for images that
supports multiple colors and resolutions. The PNG format is patent-free.
3. Joint Photographic Experts Group (.jpg) is a graphic image saved using a lossy
compression technique that discards some data during compression process.
JPEG file format supports images with many colors (>256), such as
photographs.

Understanding Absolute and Relative Image URLs

When you place an <img /> tag within an HTML file, you use the src attribute
to tell the browser where to locate the image file. In the previous examples, absolute
tell the browser where to locate the image file. In the previous examples, absolute
URLs were used to specify each image location; that is, each URL began with http://
and then specified the site holding the files as well as the path (folder location and
filename) to file. An absolute URL is a uniform resource locator (web address).
To better organize your files, often you will place images for your website
within a specific folder. In such cases you can use relative URL, which is a uniform
resource locator (web address) that is relative to the current HTML page location.
The relative URL will specify the image location (rather than the complete site).
Likewise, there may be times when you will simply place your image files in the
same folder as the HTML file.

Specifying Alternative Text for an Image

When you place an image within a webpage, you should use the <img /> tag
alt attribute to specify text that describes the image. If for some reason the browser
can’t display the image, it will display, instead, the alternative text.

24 | P a g e
The CSS Width and Height Property

By default, you place an image within a webpage, the browser displays the
image based upon its actual size. Often designers want to size and display an image
at a specific height and width. We can use the style attribute to specify the width and
height of an image. Resizing is ideal for large-sized images. Checking the actual size
of the images is important when resizing to determine the new image size ratio. The
height and width property let you specify the size you desire in pixels (px) or a
percentage (%) of the page size.

Controlling an Image Border

Using a border, you can place a frame around an image on a web page. By
default, images have no border. When you place images within a hyperlink as
discussed in other unit, some browsers may add border to the images.
The CSS border property allows users to specify the style, width and color of
an element’s border.

25 | P a g e
 When you specify a border around an image, you can use the border-radius
property to style a round border corners. Unfortunately, not all browsers support
the style.

26 | P a g e
Centering an Image

As you place images within a webpage, there will be many times when you
will want to center an image. For years, developers centered images by placing the
<img /> tag between the <center> and </center> tag pair. Although this technique
will still work with most browsers, the <center> tag has been deprecated, which
means browsers may not support it in the future. In replace to the <center> tag,
there are two (2) CSS properties will be used when centering images: display and
margin.
The display property specifies if/how an element is displayed. Giving a value
of block on the display property will let the element take the whole line on its own.
The margin property is used to create space around elements. Giving a value
of auto to the margin property gives the element equal amounts of spaces on the left
and right side making it appear in the center.

27 | P a g e
 UNIT SUMMARY

Across the web, sites make extensive use of graphics images. To place an
image within an HTML page, use the <img /> tag. This unit examined all aspects of
webpage image use. As learned, when you use various CSS properties, you have
complete control of the appearance of the image sizing, placement, and even the
border. Depending on where you place the images on the server, you might use
relative or absolute URLs within the <img /> tag src attribute.

28 | P a g e
UNIT REVIEW
1. Create a new HTML file and save it as Laboratory3.html

2. The title should be World Wide Web Consortium

3. Create a <h1> heading that will display “World Wide Web Consortium”

4. The heading should be centered and the font should be “century gothic”

5. Insert the image named logos-w3c, the size should be 250px x 170px. The
image should be centered.

6. The paragraphs should be justified with a 1.5em indentation, font should be

“Verdana” with a size of 1.5em.

7. Insert another image named pics-timbernerslee, the size should be 285px x

356px. The image should be centered and must have a border radius of
300px.

8. The image’s caption should be centered, font should be “Georgia” and the size
should be 14px.

29 | P a g e
30 | P a g e
UNIT VI. INSERTING HYPERLINKS
OVERVIEW

The World wide Web is often described as a network of billions of

interconnected pages of content. When viewing webpages within a browser, users
click on a hyperlink to move from one document to another or form one location on
a page to another. A hyperlink is text or an image within a webpage that a user clicks
on to jump to or display a specific page of content. To place a hyperlink within the
webpages you create, use the <a> and </a> achor tag pair.

LEARNING OBJECTIVES

This chapter examines hyperlinks in detail. By the time I finish this unit; I will
be able to:
• use the <a> and </a> anchor tag pair to create a text-based hyperlink;
• use the anchor tag target attribute to open a hypelink in a new window;
• use the anchor tag pair to create an image-based hyperlink;
• use absolute and relative URLs to create a hyperlink; and
• create an in-page hyperlink.

LESSON PROPER

Using Links on a Web Page

As you have learned, may different webpage elements, including text, images,
and animations, can serve as links. Text and images are the elements most widely
used as links. When using text links on a webpage, use descriptive text as the
clickable word or phrase. For example, the phrase “Click here” does not explain the
purpose of the link to the visitor.

When a link is identified with text, it often appears as underlined text in a

color different from the main webpage text. Generally, moving the mouse pointer
over a link causes the mouse pointer to change to a pointing hand. This change
notifies the user that a link is available from that text or image.

Creating a Text-Based Hyperlink

A hyperlink can be a photo or text, which normally appears within the

browser in blue or purple font and is underlined. To create a hyperlink within a

31 | P a g e
webpage, you place the anchor tag pair <a> and </a> within your HTML file, which
specifies the target content location and the text or photo that will appear on the
page as a link.

To specify target location for a hyperlink, which is the content the user views
next if he or she clicks the link, use the anchor tag href attribute. The text that you
place between the <a> and </a> tag pair will define the link.

When you view the file’s content, your browser will display the text “Go to
Google” as a hyperlink, and by default it will display the text underlined in purple.
When you click on the link, the browser will display the Google site’s contents.

Opening a Hyperlink Within a New Window

By default, when a user clicks on hyperlink, the browser will replace its
current contents with the contents provided by the target page. Depending on your
site design and the content you place within a page, there may be times when you
will want the browser to open the target site content within a new window. To do so,
you use the anchor tag target attribute to specify target = “new” as shown in the
example:

As shown in the example, as users click on the hyperlinks, the browser will
open a new window or tab based on the browser settings.

Using an Image as a Hyperlink

By placing text between the <a> and </a> anchor tag pair, you create a text-
based hyperlink. As it turns out, you can place any HTML tags between the anchor
tag pair to create a formatted hyperlink. The HTML file sample.html creates a
hyperlink from an <h1> and </h1> header tag pair:

32 | P a g e
 When you view the file’s contents, your browser will display the header as a
link. In a similar way, the HTML file can display image as a hyperlink.

As you can see, within an anchor tag pair the file includes an <img /> tag
which directs the browser to use the photo as a hyperlink to the specified target
page. When you view the file’s content, the browser will display the photo hyperlink.

Using Absolute, Relative and Page-Based Hyperlink References

As you have learned, using the anchor tag href attribute, you specify a
hyperlink reference or target location. Each of the previous examples have used
absolute references for the target URL. They begin with http:// and specify a site
name and, optionally, a specific folder and file within the site.

Most websites consist of multiple pages, each of which resides within its own
HTML file. Typically, each of the pages will provide links or a menu of links that
allow the user to easily move between the pages. In such cases, you can place
absolute URL references for each page within each file’s anchor tag.

For simplicity and to make it easier to move the files to a different site later,
you don’t need to provide absolute URLs. Instead, you can place a relative URL
within each anchor tag href attributes.

33 | P a g e
 When the browser encounters a relative URL, it will look for the specified file
in a location “relative” to the current file. For the previous relative URLs, for
example, the browser would look for the files in the same folder on the same server
as the current HTML file.

Creating an In-Page Hyperlink

Depending on the amount of content you place within an HTML page, there
may be times when you will want to create hyperlinks that point to locations within
the current page. To do so, you must first identify the target locations to the browser
by placing an anchor tag pair <a> and </a>, which use the name attribute.

34 | P a g e
 As you can see, within each anchor tag the file uses name attributes to
identify specific locations within the file. At the top and bottom of the sections are
hyperlinks the user can select that correspond to each page location. To specify that
a hyperlink corresponds to a location within the current file, you include the pound
sign (#) before the link name. If you view the file’s contents, the browser will display
the page content along with the links. Make your browser window small enough to
only display one section at a time, so the window will scroll. Each time you click on a
link, the browser will bring the corresponding page contents into view.

UNIT SUMMARY

To make the World Wide Web, developers create HTML files that use
hyperlinks to connect documents. In general, the Web is a network of billions of
interconnected pages of content linked together by hyperlinks. When viewing
webpages within a browser, users click on a hyperlink to move from one document
to another or from one location to another. A hyperlink is text or an image within
that a user clicks on to jump to or display a specific page of content. To place a
hyperlink within the webpages you create, use the <a> and </a> anchor tag pair.

UNIT REVIEW

1. Create a new HTML file and save it as Laboratory11.html

2. The title should be “Laboratory 11”

3. Create a <h1> heading that will display “Most Popular Web Browsers”

4. The heading should be written in “Arial” font.

5. Insert the 6 browser logos as shown on the next slide.

6. All logos are sized 150px for height and width.

7. A new html will be shown once any of the logos were clicked. (ex.
Laboratory11-chrome.html will be shown once the logo of chrome is clicked).

35 | P a g e
8. A total of 6 additional html files shall be created, showing one browser per
html file.

9. All additional files will be named laboratory11-xx.html (xx is the browser it

describes ex. laboratory11-edge.html)

10. All titles should be the browser it describes

11. An <h1> heading shall be created showing the name of the browser.

12. The heading must be centered and written using the “century gothic” font.

13. All browsers’ logo are inserted after the header.

14. The logo should be centered and 300px in height and width.

15. A paragraph that describes the browser will come after the image.

16. All the browser’s names and developers should be written in bold font.

17. The paragraph is set in “fully justified” with a 50px indentation and written
in “verdana” font.

18. An <h4> header showing “Back to main page” shall be created.

19. The header should be centered and should redirect the user to the main page
(laboratory11.html) once clicked.

36 | P a g e
UNIT VI. USING INLINE CSS, INTERNAL CSS AND EXTERNAL CSS
OVERVIEW

This unit takes a detailed look at cascading style sheets, or CSS. You will
continue to drill down into additional formatting capabilities. That said, you have
actually been using CSS attributes throughout this unit. This unit also presents
different properties to specify the inline, embedded and external style sheets.

LEARNING OBJECTIVES

This chapter examines how to use Cascading Style Sheets (CSS) to format
webpages. By the time I finish this unit; I will be able to:
• apply inline style using the HTML style attribute;
• use the <style> and </style> tag pairs to define embedded style definitions;
and
• create an external style sheet file and use the <link> tag to include it within
an HTML file.
LESSON PROPER

Inline CSS

Inline CSS is used for applying style to a particular HTML Tag. Least
recommended styling method because of the difficulty it brings in managing larger
websites. This style is useful for testing and previewing page modifications. In
applying or setting a CSS in a particular HTML element, the style attribute can be
used.
To change the appearance of an HTML element, the syntax should be like this:
<tagname style=“property: value”>

CSS Property

HTML Background Property

The background is a part of a web page that makes a website more user-
friendly. Web developers also have used the CSS background properties to describe
the elements' background effects. In this unit, you'll learn the following CSS
background properties:

37 | P a g e
Color Names
HTML accepts 140 standard color names and can be used to enhance web
page appearance.

38 | P a g e
RGB Value
In HTML this formula can be used to designate a color as an RGB value:
rgb(red, green, blue). - parameter (red, green, blue) determines the color density of
0 to 255. All colors must be set to 0 to show the color black, like this rgb(0,0,0). All
colors must be set to 255 to display the color white, like this rgb(255,255,255).

Hex Value
In HTML, the hexadecimal value can be used to define a color: # rrggbb
where rr(red), gg(green), and bb(blue). The values are between 00 and ff (same as
decimal 0-255). For eg, # ff0000 is shown as red, because red is set to its highest (ff)
value, and the others are set to the lowest (00).

39 | P a g e
HSL Value
In HTML, hue, saturation, and lightness (HSL) can be used to designate a
color in the form: hsl(hue, saturation, lightness).
• Hue Effect
Hue is the degree of 0 to 360 on the color scale, 0 is red, 120 green and 240 blue.

• Saturation Effect
Saturation can be defined as color concentration.100 percent is pure color
(no gray shade); 50 percent is 50 percent gray (but you can still see the color); and 0
percent is fully gray (you can't see the color anymore).

• Lightness Effect
The effect of lightness is 0 percent is black; 50 percent is neither light nor
dark; and 100 percent is white.

40 | P a g e
CSS Text Property

41 | P a g e
CSS Font Property
In designing a webpage, the appearance of the font is very important. It is
one of the essential parts of the webpage. The CSS font properties define the font
family, boldness, size, and the style of a text. It is very significant for a web
developer to know the appropriate design of the font to be used in a web page. Once
the appearance of the font is not pleasing to the user, they will not devote their time
visiting the website.
Difference between Serif and Sans-serif Fonts

CSS Font Families

In CSS, there are two types of font family names: The generic family - a
group of font families with a similar look (like "Serif" or "Monospace") and the other
one is font family - a specific font family (like "Times New Roman" or "Arial"). On
computer screens, sans-serif fonts are considered easier to read than serif fonts.

42 | P a g e
Set Font Size with Pixels
The font size setting with pixels gives you complete control over the scale of
the text. When you are using pixels, you can also scale the whole screen using the
zoom function.
Set Font Size with Em
Most developers use em instead of pixels, to allow users to resize the text (in
the browser’s menu). The W3C suggest em size package. 1em is the same size as the
present font. For browsers the default text size is 16px. Therefore, the default 1em
display is 16px.

43 | P a g e
Responsive Font Size
The text size can be adjusted using the vw package, indicating the "viewport
width" This means the size of the text would match the browser window scale.
Viewport is the height of the browser window. 1vw = 1% display distance. When the
viewport is 50cm long, 0.5 cm is for 1vw.
CSS Border Property
The CSS border properties allow you to specify the style, width, and color of
an element's border.

CHAPTER REVIEW

Using Inline Style

1. Open Laboratory1.html
2. Save the contents to a new file named Laboratory4.html

44 | P a g e
3. Change the title to Laboratory 4
4. Change the background-color of the whole web page to “MediumSeaGreen”.
5. Change the text color of the heading to rgb(255,255,255)
6. Change the text color of all bold texts to “Tomato”
7. Change the text color of the heading to “RoyalBlue” and the font to “Century
Gothic”
8. Change the font of the paragraphs to “Verdana”
9. Change the font size of all paragraph to “1.5em”
10. Set the alignment of the header to “center”

Using Internal Style

1. Open Laboratory4.html
2. Save the file as Laboratory5.html
3. Change the title to Laboratory 5
4. Transfer all the inline style to internal CSS using element selectors.

Using External Style

1. Create a new CSS file named lab5.css
2. Open Laboratory4.html
3. Save it as Laboratory6.html
4. Change the title to Laboratory 6
5. Transfer all styles to the lab5.css file
6. Put the heading style in an ID named #mainheading
7. Put the image styles in a class name .logosmall
8. Create a link to connect to lab5.css

45 | P a g e
UNIT VII. ADVANCED CASCADING STYLE SHEETS
OVERVIEW

In the previous unit, you learned how to use cascading style sheets to format
content items on your page using inline, embedded, and external style sheets. You
easily format the appearance of items within your page. In this unit, you will drill
down into other CSS capabilities. To start, you will define CSS classes, which group a
set of style definitions that can later be applied to a variety of HTML tags. Then, you
will learn how to create an id-based style that applies only to an element on your
page that matches the identifier. You will also learn how to create a page division in
a webpage using <div> and </div> tags.

LEARNING OBJECTIVES
This chapter examines CSS in further detail, including CSS classes and id-
based styles. By the time I finish this unit, I will be able to:
• define the CSS frameworks;
• identify the different CSS frameworks;
• assign formatting styles to a CSS class definition; and
• create a page division using the <div> and <div> tag pair
LESSON PROPER

What is CSS Framework?

Web developers devote a lot of time developing an appealing web page

template. They’re trying to balance the content of the web more efficiently. But how
will that be achieved if the author has had a rough time setting up or simulating the
layout of their web page? Thanks to the CSS frameworks, we now have a better,
faster, and more efficient way to build responsive websites.
This CSS platform is a library that makes for faster, easier, more standard-
compliant web design using the Cascading Style Sheets format. Most of these
frameworks have at least a grid.

How do CSS frameworks work?

The CSS frameworks provide web developers a simple structure that includes
map, dynamic user interface patterns, web typography, tooltips, buttons, type
elements, icons. This framework allows web developers to get started easily and
effectively when creating websites or mobile apps.

46 | P a g e
 This means that developers are free from starting everything from scratch.
The CSS framework will provide them with a solid foundation. In fact, developers
will also reuse code for all projects they’re working on.

Why do front-end developers need a CSS framework?

The CSS frameworks implementations have a drawback. And you need to

know whether you like one or not. Every web developer can save time by providing
a concrete source or foundation on which they focus. Frameworks give them
something they can use and customize (if needed). And for those with inadequate
coding expertise, with the use of CSS framework they can create a solid product.
There are a lot of great frameworks that you can choose from. A lot of time
people give up using the CSS frameworks because they couldn't find the right
alternative that is suit for their needs.
The following are examples of CSS Frameworks available:
1. W3.CSS Frameworks

W3.CSS is a new, flexible CSS platform with support for laptop, tablet, and
web interface by default. It provides inclusion in all web browsers such as Chrome,
Firefox, Safari, Edge and more. W3.CSS is smaller and simpler than existing CSS
frameworks that make it easy to understand and use. These frameworks were
designed to be a high-quality alternative to Bootstrap. This has also been designed
to be independent of jQuery or some other JavaScript library.

2. Bootstrap

The most commonly used free and open-source CSS platform. Bootstrap is
one of the most popular frameworks for designing a web page. The latest version of
the system is Bootstrap 4, which was released in 2018. Many essential features have
been added in this version, such as new color schemes, new modifiers, new utility
classes, etc.
3. Foundation
It is the most innovative and responsive front-end framework used by the
web developers today because of its versatility of use and more easily customizable
framework. Foundation and Bootstrap are both the commonly used CSS frameworks.
But Foundation is a way more sophisticated framework.
It is a useful tool for developing a responsive websites and mobile apps,
particularly for the enterprise. Yahoo, eBay, Mozilla, Adobe, HP, Cisco, and Disney use
the Foundation for their products.

47 | P a g e
 4. Pure
This is lightweight and flexible CSS framework built by Yahoo in 2014. It is
designed using Normalize.css and lets you build intuitive templates using your Grids
and Menu. Pure is responsive by default, and unlike Bootstrap, it does not allow
fixed layouts to be created.
5. Bulma
Bulma is a free and open-source CSS framework built on the Flexbox interface
model. It is lightweight, more accessible, pure-CSS, and mobile-first. All of these
features have made Bulma one of the most popular CSS frameworks along with
Bootstrap and the Foundation. Bulma has more than 150 000 users, more than the
Foundation itself.

HTML div Tag

Since the first HTML pages began to create the Web, developers have used to
format content. Tables are helpful because Web browsers always seem to display
them correctly. Unfortunately, using a table for a complex page design often leads to
large and often difficult amounts of HTML. As an outcome, such pages turn out to be
a challenging part to modify.
A better approach to page layout is to use CSS and <div> and </div> tag pairs.
In the simplest sense, the <div> and </div> tag pair creates a container where you
can place related HTML tags for designing and positioning.
You will use the < div > and < /div > tag pairs to describe the container for
the style of relevant components in the HTML document. This element has no
required attributes, but this tag is easily styled by using the class and id attribute of
the CSS and simply manipulated with JavaScript. When used together with CSS, the
<div> element can be used to style blocks of contents. By default, browsers always
place a line break before and after the <div> element but then again, any sort of
content can be put inside the <div> tag!

Default CSS Settings

Most browsers will display the <div> element with the following default
values:
Example

CHAPTER REVIEW
48 | P a g e
UNIT VIII. GETTING USER INPUT WITH FORMS
OVERVIEW

Across the internet, the websites make intensive use of forms to prompt
users for information. One might ask for a login username and password. Another
form may prompt users to obtain registration details or a credit card. Some may
request search text.

LEARNING OBJECTIVES
This chapter examines the steps you must perform to create a form within an
HTM page. By the time I finish this unit, I will be able to:
• create a simple form using <form> and </form> tag pairs;
• direct a form to submit data;
• integrate content within an HTML form;
• prompt a user for a password;
• use the <input> tag to create radio buttons that simplify selection within a
form;
• Use the <input> tag to create checkboxes to allow for selecting multiple
options within a form; and
• create a pull-down list using <select> and </select>.

LESSON PROPER

HTML Forms

The feedback of the user is mostly submitted to a server for review. Form
processing is often called client/server processing because it requires both client (a
browser) and a remote server.

49 | P a g e
The <form> Element

To create a form within an HTML webpage, use the <form> and </form> tag
pair. The <form> element is a container for various types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element
Before a user can submit data to a remote server using an HTML form, the
form must contain a button that the user can click on. The HTML < input > element
is the most widely used template element to position a button in a page. Depending
on the type attribute, the < input > element can be presented in many ways.
Here is some of the input element commonly use in a web page:

Text and Password Fields

Sites will often use a form to prompt a user for a username and password.
The < input type="text "> defines a single-line text input field. Regarding protection
reasons, once the user enters his or her password, the text of the password does not
appear on the computer. Instead, most places display an asterisk (*) for each typed
character.

To prompt the user to enter a password, your form should use the <input>
tag with the type = “password” attribute.

50 | P a g e
 This is how the HTML code above will be displayed in a browser:

Take note that the form itself is not visible. When you use a form to prompt a
user for data, many times you will need to control the number of characters typed
for each field. For example, if a form prompts a user for a username, it’s probably
unlikely that the username, even if it’s a long e-mail address, needs more than 30
characters. To specify a field’s character length, use the maxlength attribute. Also
note that the default width of an input field is 20 characters.
Within a form, you will normally display a field name, which developers often
call “field labels”. To simplify the labelling process, use the <label> and </label> tag
pair to specify an input element’s label. The id attribute specifies its element’s
unique identifier (ID).
The < label > element is helpful for users of the screen-reader as they can
read the label clearly as they concentrate on the input element. The < label >
element often supports people who have difficulty pressing on very small areas of
the website (such as radio buttons or checkboxes)-because when the user reaches
the text in the < label > section, the radio button / checkbox is activated.

Radio Buttons

Sometimes you can be asked by a form for "yes" or "no" data or data that
refers to a few specific values. In these scenarios, use the radio buttons to get input
from the user. The radio buttons are named because, like the radio buttons on the
front of the radio, you can select only one option from a set of options at a time.

To create radio buttons within an HTML form, use the type = “radio”
attribute. Within the tag, use the name attribute to identify the name of a group of
buttons and the value attribute to determine the value of each particular button.

51 | P a g e
A form with radio buttons:

This is how the HTML code above will be displayed in a browser:

The Submit Button

Before a user can submit data to a remote server using an HTML form, the
form must contain a button the user can click. To place a button within a form, the
use of type = “submit” attribute tells the browser to display a button in a page. The
value attribute specifies the text that appears within the button.

A form with a submit button:

This is how the HTML code above will be displayed in a browser:

The Target Attribute

52 | P a g e
 The target attribute specifies where the response of the user be displayed
after the form has been sent.

The target attribute can have one of the following values:

The default value is _self which means that the response of the user will open
in the present window.

The Name Attribute

Each input field must have a name attribute to be submitted. If

the name attribute is omitted, the value of that input field will not be sent at all.

This example will not submit the value of the "First name" input field:

Presenting the Checkbox within a Form

Radio button exist to let a user select one value from a group of values. Often,
however, a form may need to prompt users for multiple values, such as the items
they want included on a pizza. For example, the customer wants to include toppings
like cheese, bacon, and olives in his pizza, he or she select multiple items within a
several of choices. In such cases, the form should use checkboxes.

53 | P a g e
This is how the HTML code above will be displayed in a browser:

Creating a Pull-Down List

Across the Web, forms make extensive use of pull-down list to allow users to
select data from a list of options, such as a state of residence. To create a pull-down
list within a form, use the <select> and </select> tag pair to define the list and the
<option> and </option> tag pair to define the entries within the list.

This is how the HTML code above will be displayed in a browser:

54 | P a g e
CHAPTER REVIEW
1. Create a new file named Laboratory7.html
2. The title should be “Laboratory 7”
3. Create a centered <h1> heading that will show “Signup Form”
4. Create the following input fields: (a) First name; (b) Middle name; (c) Last
name; (d) Username; (e) Password (should be masked); and (f) Email
(should accept valid emails only)
5. Create an option button for the sex: Male & Female
6. Create a date input field for the birthday
7. Create a drop-down list for the civil status: (a) Single; (b) Married; (c)
Separated; and (d) Widowed
8. Create a submit button with the value “Signup”
9. Create a reset button with the value “Clear”
10. Name fields, username, password and email field should have place holders.
11. First name, last name, username, password, birthday and sex should be
required.
12. Use Internal CSS for the styles
13. The form should have the ff. styles:
a. A 1px solid #cccccc border
b. A padding of 16px
c. Font size of 14px
d. Font should be “Calibri”
e. Font-weight should be bold
14. The heading should be centered and written in “Calibri”
15. Create a class named .inputformat for the input fields except radio.
a. Width should be 100%
b. Padding should be 20px
c. Display should be inline-block
d. Margin should be 8px 0px

55 | P a g e
 e. Should have a 1px solid #cccccc border
16. Create an ID named #signup for the submit button
a. Text color should be white
b. Padding should be 12px
c. Margin should be 8px 0px
d. Border should be none
e. Width should be set to 50%
f. Float should be left
g. Background color should be #4caf50
17. Create an ID named #clear for the reset button
a. Text color should be white
b. Padding should be 12px
c. Margin should be 8px 0px
d. Border should be none
e. Width should be set to 50%
f. Background color should be #f44336

56 | P a g e