WEB 301

Web Design and Programming

Web Design and Programming

Learning Module on [Course Code]

 LEARNING MODULE INFORMATION
I. Course Code WEB 301
II. Course Title Web Design and Programming
III. Module Number 1
IV. Module Title Basics of HTML
V. Overview of the Module This module consists of 7 lessons, namely:
Lesson 1: Internet Essentials
Lesson 2: Basic HTML Tags
Lesson 3. Working with Lists and Tables
Lesson 4. Working with Links
Lesson 5: Form Controls
Lesson 6: Cascading Style Sheets
Lesson 7: Bootstrap

This module identifies the terminologies and important concepts of

HTML, CSS and Bootstrap. Using HTML, CSS and Bootstrap, the
students will be guided to the basics of web designing. Towards the end
of this module, the use of HTML, CSS and Bootstrap in web designing is
clearly explained.

VI. Module Outcomes After studying this module on the basics of HTML, the students shall be
able to:
1) Determine the basic terminologies used in web designing.
2) Narrate the important key points in the history of Internet
3) Narrate how server-client architecture works
4) Identify the important elements of HTML, CSS and Bootstrap
5) Create a web pages to solve a particular business requirement.

Learning Module on [Course Code]

 1

Lesson1. Internet Essentials

Lesson Objectives:
At the end of this lesson, you will be able to:
 Explain and understand how web works
 Understand major components of internet
 Understand major software components of internet
 Understand types of Internet Programming Languages
 Explain the process of requesting Information via URLs

Discussions

What is the Internet ?

 The Internet is a global information network that connects millions of computers It is growing
exponentially and provides a unique information resource that is global, diverse and current.
 The Internet is a worldwide system of interconnected computer networks that use the TCP/IP set of
network protocols to reach billions of users. The Internet began as a U.S Department of Defense
network to link scientists and university professors around the world.
 A network of networks, today, the Internet serves as a global data communications system that links
millions of private, public, academic and business networks via an international telecommunications
backbone that consists of various electronic and optical networking technologies.
 Decentralized by design, no one owns the Internet and it has no central governing authority. As a
creation of the Defense Department for sharing research data, this lack of centralization was
intentional to make it less vulnerable to wartime or terrorist attacks.
History of Internet

ARPA
February 7, 1958 was the day Secretary of Defense Neil McElroy signed Department of Defense
Directive 5105.15. His signature launched the Advanced Research Projects Agency (ARPA), now known
as the Defense Advanced Research Projects Agency (DARPA). The creation of the agency is an
important moment in science history because it led to the creation of the internet we recognize today.

Learning Module on [Course Code]

 2

The existing national defense network relied on telephone lines and wires that were
susceptible to damage. In 1962, J.C.R. Licklider, a scientist from ARPA and MIT, suggested connecting
computers to keep a communications network active in the US in the event of a nuclear attack.
This network came to be known as the ARPA Network, or ARPAnet. Packet switching made data
transmission possible in 1965, and by 1969, military contractor Bolt, Beranek, and Newman
(BBN) developed an early form of routing devices known as interface message processors (IMPs), which
revolutionized data transmission.

The Stanford University Network was the first local area network connecting distant
workstations. In 1981, the NSF expanded ARPAnet to national computer science researchers when it
funded the Computer Science Network (CSNET). BBN assumed CSNET operation management in 1984.
ARPAnet adopted the transmission control protocol (TCP) in1983 and separated out the military network
(MILnet), assigning a subset for public research. Launched formally as the National Science Foundation
Network (NSFNET) in 1985, engineers designed it to connect university computer science departments
across the US.

"ARPAnet's transition to the open networking protocols TCP and IP in 1983 accelerated
the already burgeoning spread of internetworking technology," says Stephen Wolff, principal
scientist with Internet2. "When NSF's fledgling NSFNET adopted the same protocols, ARPAnet
technology spread rapidly not only to university campuses across the USA to support the higher education
community, but also to emergent Internet Service Providers to support commerce and industry." 
The NSFNET eventually became a linked resource for the five supercomputing centers across the US,
connecting researchers to regional networks, and then on to nearly 200 subsidiary networks. NSFNET
took on the role of internet backbone across the US, with ARPAnet gradually phased out in 1990.

1989 saw a major step forward in internet communications. Tim Berners-

Lee of the European Organization for Nuclear Research (CERN) created the hypertext transfer protocol
(http), a standardization that gave diverse computer platforms the ability to access the same internet sites.
For this reason, Berners-Lee is widely regarded as the father of the world wide web (www).
The Mosaic web browser, created in 1993 at the National Center for Supercomputing Applications
(NCSA) at the University of Illinois Urbana-Champaign, was a key development that emerged from the
NSFNET. Mosaic was the first to show images in line with text, and it offered many other graphical user

Learning Module on [Course Code]

 3

interface norms we’ve come to expect today (like the browser’s URL address bar and
back/forward/reload options for viewing webpages.)

Eventually the NSFNET modified its acceptable use policy for commercial use, and by 1995,
it was decommissioned. Soon, the internet provider model created network access points that allowed the
for-profit, commercial side of the internet to be developed.
The internet went from being an obscure research idea to a technology that is used by over  3.2 billion
people in less than sixty years.
What do we use the internet for?
 Browsing information
 Social media and creating awareness
 For entertainment (music, videos, movies)
 Communicating with people all over the world.
 Sharing information
 E-commerce and banking
Major Software Components of Internet
 Web server -A Web server is software or hardware that uses HTTP (Hypertext Transfer Protocol)
and other protocols to respond to client requests made over the World Wide Web (WWW). Web
server software controls how a user accesses hosted files. It is accessed through the domain names of
websites and ensures the delivery of the site's content to the

requesting user. As hardware, a Web server is a computer that holds web server software and other
files related to a website, such as HTML documents, images and JavaScript files. Web server
hardware is connected to the internet and allows data to be exchanged with other connected devices.
 Web Browser - (commonly referred to as a browser) is a software application for accessing
information on the World Wide Web. When a user requests a web page from a particular website, the
web browser retrieves the necessary content from a web server and then displays the page on the
screen.

Below are the types of browser you can use to preview your output in html. Note that you can use
other web browsers available like Konqueror, Lynx among other things.

Learning Module on [Course Code]

 4

Note. Internet Explorer (IE) will be replaced by Microsoft Edge in the future. So it means that you should
test your future web application to Microsoft Edge instead of IE
How the Web Works
 The World Wide Web has a client/server architecture. This means that a client program running on
your computer (your Web browser) requests information from a server program running on another
computer somewhere on the Internet. That server then sends the requested data back over the Net to
your browser program, which interprets and displays the data on your screen.
Figure below shows the whole process graphically.

The following steps explain the process:

1. You run a Web browser client program on your computer.
2. You connect to the Internet-at work or school via a direct T1 or T3 line; at home via a modem
dial-up connection to an Internet service provider (ISP).
3. You request a page from a site on the Web. Your browser sends a message over the Internet that
includes the following:
 The transfer protocol (http://)
 The address, or Uniform Resource Locator (URL), e.g., www.somesite.net
4. The server receives your request and retrieves the requested Web page, which is composed in
HTML (HyperText Markup Language).
5. The server then transmits the requested page back across the Internet to your computer.
6. Your browser program receives the HTML text and displays its interpretation of the page you
requested.
The Client Computer
 To browse the Web, you need a client computer. There are two basic requirements for this machine: it
must have a connection to the Internet and must be capable of running a Web browser program.
 The Internet connection can be hard-wired, or it can be a dial-up phone connection via modem to an
Internet service provider (ISP). You're most likely to have the former at work or school and the latter

Learning Module on [Course Code]

 5

at home. The only difference you will notice between the two is speed; otherwise, they work
identically.
 There are Web browser programs for just about any computer you can name, from dumb text-only
terminals running on mainframes to off-brand personal computers, such as the Amiga. (I'll list and
discuss the most popular browser programs later in this chapter.)
The Server Computer
 On the content-provider side of things, you need a server computer. This machine has requirements
similar to those of the client computer: it must be connected to the Internet and must be able to run a
Web server program.

Tip. A Web server program is often called an HTTPD, for HyperText Transfer Protocol
Daemon. Daemon is computerese for a program that runs unseen in the background.

 However, a Web server needs a more robust Internet connection than a Web client does. A server
should ideally be hooked up to the Internet via a fast dedicated T1 or T3 line that remains connected
all the time. Otherwise, people trying to access your Web site will often find that it just isn't there.
 It is possible (though excruciatingly slow) to run a Web site on a dial-up line, especially if you can
find an Internet service provider who will let you stay dialed in 24 hours a day without disconnecting
you. However, you must make sure that your ISP can assign a

permanent IP address to your machine-not a new IP address each time you connect. Otherwise,
people won't even be able to find your site.

Note

A good intermediate solution to the direct vs. dial-up problem is an ISDN line. A
sort of super fast digital phone line, an ISDN line costs more than a regular phone
line but much, much less than a dedicated T1 or T3 line. It also requires a special
interface card for your computer. ISDN lines are offered by most phone companies
in urban areas and university towns, but you'll need to find an ISP that can provide
an ISDN connection too. Contact the business office of your local phone company
for details.

HTTPD server software is available for a wide variety of computers (see fig. 2.2). Surprisingly, server
computers don't have to be very powerful; serving up Web content is simply not that demanding. More of
a concern is having a multithreaded, multitasking operating system so that the server can handle several
tasks at once without bogging down. Storage is a concern, however, because Web sites are notorious for
growing without limit.
What is URL
 Also known as a web address, a URL (Uniform Resource Locator) is a form of URI and a
standardized naming convention for addressing documents accessible over the Internet and Intranet.
An example of a URL is https://www.computerhope.com, which is the URL for the Computer Hope
website.

Learning Module on [Course Code]

 6

A Uniform Resource Identifier (URI)

 is a string of characters that unambiguously identifies a particular resource. To guarantee uniformity,
all URIs follow a predefined set of syntax rules,[1] but also maintain extensibility through a
separately defined hierarchical naming scheme (e.g. http://).
Difference between URL and URI
 A URI is an identifier of a specific resource. Like a page, or book, or a document.
 A URL is special type of identifier that also tells you how to access it, such as HTTPs, FTP, etc.
—like https://www.google.com.
Communication: Requesting Information via URLs
 An HTTP connection is said to be stateless. That is, no permanent connection is maintained between
the server and the client. A request is made, and the connection is broken. Then a response is sent
back, and the connection is broken again. This process is repeated for every request and often even
for parts of a request. Programmers refer to this as a query-response

model of interaction. It's the reason your browser program always seems to be saying "Waiting for
reply…" in its status display line
 A browser's request for information takes the form of a URL (Uniform Resource Locator), which is
also referred to as a page's address or location. 
Web browsers generally display the URL of the Web page currently being viewed near the top of the
window as shown in red box below. Eample is https://yahoo.com

URL example
http://www.microsoft.com/msoffice/freestuf/msword/download/ia/default.htm
The "http://" portion of the URL indicates that the browser has requested a transfer via HTTP protocol;
that is, it wants a Web page. "www.microsoft.com" is the domain name of the server being queried; in
this case, it's the Web server at Microsoft. The "msoffice/freestuf/msword/download/ia/" portion of the
path name.
URL is the path name on the server's hard drive for the file you want. (Fortunately, this example is of one
of the longer path names you're likely to run into on the Web.) "default.htm" is the name of the actual
HTML file on the server

Learning Module on [Course Code]

 7

Tip

If the protocol portion of a URL is https:// or snews://, it means that the connection
is secure.

URLs can reference not only Web pages, but also just about any service on the Internet, including FTP,
Gopher, WAIS, Usenet, and Telnet. You can even load in a file from your own computer! Table 1 below
shows the syntax for the various types of sites that can be accessed via a Web browser.
Table 1. URL Syntax for Addressing Various Types of Internet Sites
URL Syntax Type of Access

file:// a file on your local computer

ftp:// an FTP server

gopher:// a Gopher server

http:// a Web page

news:// a Usenet newsgroup

telnet:// a connection to a Telnet site

WAIS:// a WAIS server

The domain name portion of a URL may include a colon followed by a port number, like this:
http://www.somesite.net:80/path/webpage.htm
This tells the server to access the site via a specific assigned port.

Tip

Port 80 is the default port defined in the HTTP specification. If not given, it is
assumed.

Web page file names usually end in .htm or .html to indicate that they are HTML content files. Many
home pages don't have path names or file names at all. Their URLs are in a very abbreviated format:
What Servers Do
 When you analyze what a server does, you begin to fully realize just how much of the look and feel
of the World Wide Web is in the browser program.
 The browser client strips an URL down to its component parts: protocol, address, path name, and file
name. From the protocol portion, it determines how it is going to interact with the server that it's

Learning Module on [Course Code]

 8

addressing and how to display the data it will receive. It then calls the address contained in the URL
and waits for a response from the server.
 Once the server realizes that a request is coming through, it likewise checks the URL for the
connection protocol (e.g., http:// for a Web page). It takes the path name and file name that it has been
given, finds them on its hard drive, and sends the data off to the browser using the correct protocol.
 Then it's the browser's turn again. This time it gathers in, interprets, and properly displays the data it
has received.

HTTP
 The HyperText Transfer Protocol (HTTP) was designed to be quick, simple, and nonintrusive. The
connection between a server and a client program (or agent) is temporary and must be reestablished
for every data transfer.
 The HTTP specification incorporates a whole set of methods that are used to perform the tasks
associated with servicing a Web site, including information retrieval, searching, front-end updating,
and annotation. The specification is open-ended, so additional functionality can be added without
making the whole Web obsolete.
 As discussed previously, messages are passed in a format that is similar to Internet Mail and the
Multipurpose Internet Mail Extensions (MIME); gateways enable browsers to request the execution
of CGI applications on the server hardware; and communication is possible with other Internet
protocols, such as SMTP, NNTP, FTP, Gopher, and WAIS.
 HTTP is, like these earlier protocols, a TCP/IP protocol. However, it can be implemented on top of
any other protocol implementation that can communicate over the Internet or on other networks,
including LANs.

Tip

The current version of the HTTP protocol specification can be found at the site
maintained by the HTTP Working Group at http://www.ics.uci.edu/pub/ietf/http/.

The Internet Tools

 Electronic Email - messages distributed by electronic means from one computer user to one or more
recipients via a network.
 Chat - refers to the process of communicating, interacting and/or exchanging messages over the
Internet
 File Transfer Protocol (FTP) - is a standard network protocol used for the transfer of computer files
between a client and server on a computer network
 Internet Archived Listing (ARCHIE) – a system that allows you to rapidly locate various public
domain programs stored on hundreds of sites across the net
 Internet Gopher – provides a distributed delivery system around which campus-wide information
system can readily be constructed. It facilitates access to other gopher and information server
throughout the world
 Wide Area Network Services (WAIS) - is a client–server text searching system that uses the ANSI
Standard Z39. 50 Information Retrieval Service Definition and Protocol

Learning Module on [Course Code]

 9

Specifications for Library Applications" (Z39. 50:1988) to search index databases on remote
computers
 TELNET - a network protocol that allows a user on one computer to log into another computer that
is part of the same network
 Wireless Application Protocol - is a technical standard for accessing information over a mobile
wireless network. A WAP browser is a web browser for mobile devices such as mobile phones that
uses the protocol.
 Web programming
refers to the writing, markup and coding involved in Web development, which includes Web content,
Web client and server scripting and network security. The most common languages used for Web
programming are XML, HTML, JavaScript, Perl 5 and PHP
 Web design is the process of creating websites. It encompasses several different aspects, including
webpage layout, content production, and graphic design.
 Web Design vs. Web Development In A Nutshell
In essence, web design refers to both the aesthetic portion of the website and it’s usability. Web
designers use various design programs such as Adobe Photoshop to create the layout and other visual
elements of the website. Web Developers on the other hand, take a website design and actually make
a functioning website from it. Web developers use HTML, CSS, Javascript, PHP and other
programming languages to bring to life the design files.

Internet Programming
HyperText Markup Language (HTML) – a simple markup language used to create hypertext documents
that are portable from one platform to another.
Two General Types of Internet Programming Languages
1. Server-Side programming language - programming language where validation of user input
happens at the server itself acting on or creating a data stream as it is send out to the internet client.
Examples (XML, Java, PERL, ASP.Net, PHP…)
2. Client-Side programming language – the program that runs on the client side or end-user
workstation. Examples (JavaScript, VBScript,Angular….)
Other Important Terms
 Surfing – browsing or navigating the Web through pages of information
 Web Page – an electronic document written in an Internet language that depicts information
 Website – collection of related web pages usually controlled and maintained by single organization
 Hypertext or Hyperlinks – an underlined text or an image(indicating by a pointing hand cursor) that
lets you jump from one web page to another.
 Static Web Pages – existing HTML pages that are stored in server’s drive
 Dynamic Web Pages – HTML pages that are created, dynamically on the fly, as response to a
request by an application
 HyperText Transfter Protocol (HTTP) – the standard protocol used for transferring hypertext
pages. Browsers and servers use the HTTP to communicate
 Virtual Reality Modeling Language (VRML) – known as the Virtual Reality Markup Language) is
a standard file format for representing 3-dimensional (3D) interactive vector graphics, designed
particularly with the World Wide Web in mind

Learning Module on [Course Code]

 10

 Uniform Resource Locator (URL) - incorporates the domain name, along with other detailed
information, to create a complete address (or “web address”) to direct a browser to a specific page
online called a web page. In essence, it's a set of directions and every web page has a unique one

SUMMARY
In this lesson you learned the how web works, how client computer connects to server and how they send
and receive information.

And also, in this lesson you learned major software components of internet and how they work each
other.

One of the important things to know in internet programming is what types of internet programming
languages you are using, if it is client side or server-side programming. This is a key to understand how
development is being done in internet.

And lastly, you learned and understand the different ways of using URL and URI’s, the details on how
they used and how they are being implemented in internet.

Learning Module on [Course Code]

 11

Lesson 2. HTML Tags

Lesson Objectives:
At the end of this lesson, you will be able to:
 Understand and explain the fundamentals of HTML
 Understand and explain the basic structure of HTML including the elements and attributes and
formatting of text using HTML tags.

Discussions

What is HTML?
 HTML stands for Hyper Text Markup Language
 Hypertext Markup Language is the standard markup language for documents designed to be
displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and
scripting languages such as JavaScript
Note HTML is the standard markup language for creating Web pages.

History of HTML

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

Learning Module on [Course Code]

 12

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

Basic Structure of HTML

Note. if you want to define your document as HTML5 the you need to put <!DOCTYPE html> before
html tag. Since HTML5 is the latest version up to this writing, we will be using this tag going forward.

Notice three things:

1. Every HTML document MUST start with the tag <HTML>

o This is to tell your browser that this is, in fact, an HTML document, and not simply an
ordinary text file.
2. Every tag MUST be closed with its mirror-image tag (e.g.: </HTML>
o This is vitally important.  If you open a tag, close it.
o Every tag forms a PAIR - an open and a close `half´
o Closing a tag lets your browser know what is going on - where to stop making text bold,
where to end the underlining and so on

Learning Module on [Course Code]

 13

o To close a tag, simply write it again, but place a slash in front of it, as the example above
clearly illustrates.
3. There are distinct sections to an HTML document
o The opening and closing HTML tags are mandatory
o The <HEAD> and </HEAD> tags (and everything between them) are customary, but not
mandatory
o The <BODY> and </BODY> tags are also mandatory - since this is the bit that is
displayed on your screen.  Without a BODY, there is nothing to display.

HTML tags are the hidden keywords within a web page that define how your web browser must format
and display the content. Most tags must have two parts, an opening and a closing part. ... Note that the
closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character
HTML Editors
A simple text editor is all you need to learn HTML.
You can use
 Notepad
 Notepad++
 Context
 Visual Studio
 Visual Studio Code
Note. Since a simple editor is all you need, I recommend Notepad++ or Context as they support color
coding styles in web designing.
Your first HTML Program
Step 1. Type the code below in either Notepad, Notepad++ or Context.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

My First HTML Program

</body>
</html>

Code explanation

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document. It must

only appear once, at the top of the page (before any HTML tags).
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page

Learning Module on [Course Code]

 14

 The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Step 2. Create a directory in your desktop and name it html. In the html folder, save the program as
code.html. Make sure that you put .html as the file extension.

Note. you can save your html code in any path or directory in your computer. We will put all our codes to
this folder going forward.

Step 3. Verify that the code.html file icon is showing a web icon, depending on your default browser.
Here I am using chrome as my default browser that’s why the file icon is showing the chrome browser
icon.

Step 4. To see the output, double click the file. It will show the program in the browser as shown in the
screenshot below.

Explanation. As you can see in the screenshot below, data in the title tag shows in the title bar of your
browser. And data you put in your body tag is shown in the body of the browser.

Learning Module on [Course Code]

 15

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag as shown in the screenshot below

Start Tag Element Content End Tag

<h1> My First Heading </h1>
<p> My First Paragraph </p>
<br>

Note: Some HTML elements have no content (like the <br> element). These elements are called empty
elements. Empty elements do not have an end tag!

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Tag Description
<h?>….</h?> Heading (?= 1 for largest to 6 for smallest, example h1)
HTML headings are titles or subtitles that you want to display on a webpage.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading.
<b>…</b> Bold text
<i>…</i> Italic text
<u> ... </u> Underline Text
<strike> ... </strike> Strikeout
^... Superscript - Smaller text placed below normal text
_... Subscript - Smaller text placed below normal text

Learning Module on [Course Code]

 16

<small> ... </small> Small - Fineprint size text

<tt> ... </tt> Typewriter Text
Pre-formatted Text
<pre> ... </pre>

<blockquote> ...
Text Block Quote
</blockquote>
<strong> ... </strong> Strong - Shown as Bold in most browsers
<em> ... </em> Emphasis - Shown as Italics in most browsers
<font> ... </font> Font tag obsolete, use CSS instead
Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as test2.html
3.Preview your HTML work using your browser

<!DOCTYPE html>
<html>
<head>
<title>Text Heading and Formatting</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<b> this is in bold text </b>

<br><br> <i>this is italic</i>
<br><br> <u> this is underline</u>
<br><br> <strike>Stike Text</strike>
<p>
H₂0
</p>
X³
</body>
</html>

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Learning Module on [Course Code]

 17

Output

Note.
 <p> - to markup a section of text as a paragraph
 <br> - means line break. It will display the data in the new line without starting a new paragraph
 So if you want to display the data with 5 spaces in between, then you have to put
<br><br><br><br><br>
So what if you don’t want to use <br> or <p> tags? And you want to display the data based on how you
entered it. Then use <pre> tag
Example.
1.Create a document in your text editor.
2.Type the code as shown below and save it as test3.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html>

<head>
<title>Text formatting</title>
</head> <body>
<pre>
School : City College of Calamba
Subject: Web Develpment

Department: DCE
Schedule: every Tuesday at 1-5pm.
</pre>
</body> </html>

Output. You will notice that even if you did not put <p> or <br> tags, the data is displaying based on
how you type the code, as shown in the screenshot below.

Learning Module on [Course Code]

 18

Overlapping of Tags
 Overlapping of tags is not allowed in writing HTML document as shown below. Take note of the
<b> beginning and </b> end tag. Here all elements are in bold. (unless you want all elements to
be in bold). So it means that when you forget to close a tag, it will have an effect in all of your
elements below that tag.

Section Divisions Tags

<div> ... </div> Division or Section of Page Content
<span> ... </span> Section of text within other content
<p> ... </p> Paragraph of Text
<br> Line Break
<hr> Basic Horizontal Line
<hr> Tag Attributes:
size="?" Line Thickness in pixels
width="?" Line Width in pixels
width="??%" Line Width as a percentage
color="#??????" Line color
align="?" Horizontal Alignment: left, center, right (*)
Noshade No 3D cut-out
<nobr> ... </nobr> Line Break

Example.
1.Create a document in your text editor.
2.Type the code as shown below and save it as sections.html

Learning Module on [Course Code]

 19

3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Section Example</title>
</head> <body>
<h1> Welcome to ABC College </h1>
<hr size="5" noshade color="red" align="center">
<div> this is division tag </div>
<span>this is span tag</span>
<br>
<nobr>line break <nobr>
</body> </html>
Output

Explanation. As shown in the screenshot below, if you want to put a line in your web design, then you put
hr tag with attributes of red color, align in the center, and with the thickness of 5 (size = 5). Other tags,
please check section divisions table for details.

Body Background and Colors (body attribute)

background="url" Background Image
bgcolor="#??????" Background Color
text="#??????" Document Text Color
link="#??????" Link Color
Visited Link Color
vlink="#??????"
alink="#??????" Active Link Color

Learning Module on [Course Code]

 20

bgproperties="fixed" Background Properties - "Fixed" = non-scrolling watermark

leftmargin="?" Side Margin Size in Pixels (Internet Explorer)
topmargin="?" Top Margin Size in Pixels (Internet Explorer)

Modify the sections.html as shown in the red box color below

Preview your work again in the browser, and now you can see the background color as green.

Note.
 In the code, <body bgcolor="green"> , body is your tag, and bgcolor is called attributes which
value is green. It means that the background color of your html document is green. You can have
color value as RGB if you want to.
 Notice the attribute value is enclosed with double quotation. In html, you can also put the value
without the double quotation.
Background image
Step 1. In your html folder, put any png, jpg, gif file you want. If you don’t have one that just search it in
your browser.

Step 2. Type the code as shown below, and save it as background.html.

Learning Module on [Course Code]

 21

<!DOCTYPE html> <html> <head>

<title>Background Example </title>
</head> <body background='images/sea.jfif'>
<h1> Welcome to ABC College </h1>
<hr size="5" noshade color="red" align="center">
<div> this is division tag </div>
<span>this is span tag</span>
<br> <nobr>line break <nobr> </body> </html>
Step 3. Open the HTML document in the browser. You should see the background as shown below

Note. Welcome to ABC College text is not showing properly because of the background image. For it to
be visible, we need to change the color of the text. See CSS lesson, HTML COLORS for more details.
HTML Entities
 Reserved characters in HTML must be replaced with character entities.
 If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with
tags.
Some Other Useful HTML Character Entities

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

" double quotation mark &quot; &#34;

' single quotation mark (apostrophe) &apos; &#39;

Learning Module on [Course Code]

 22

¢ Cent &cent; &#162;

£ Pound &pound; &#163;

¥ Yen &yen; &#165;

€ Euro &euro; &#8364;

© Copyright &copy; &#169;

® registered trademark &reg; &#174;

Note: Entity names are case sensitive.

Example
1.Create a document in your text editor and type the code as shown below and save it as entity.html
2.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Entity Example</title>
</head> <body> Copyright&copy;2020 All Rights Reserved <br>
Copyright&#169;2020 All Rights Reserved <hr> 5 &gt; 4 </body>
</html>
Output

Summary
This lesson covers the fundamentals of HTML, including the idea of elements and attributes and ways of
formatting the text using HTML tag.
The examples help you better understand the topics discussed in this lesson, which guides you in web
designing using HTML.

Lesson 3. Working with Lists and Tables

Learning Module on [Course Code]

 23

Lesson Objectives:
At the end of this lesson, you will be able to:
 Understand the fundamentals of using tables and its corresponding attributes as well as the
process of creating lists in designing your web application.

Discussions

HTML offers three ways for specifying lists of information. All lists must contain one or more list
elements.

HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

 <ul> − An unordered list. This will list items using plain bullets.
 <ol> − An 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. This list is
created by using HTML <ul> tag. Each item in the list is marked with a bullet.

The type Attribute

Learning Module on [Course Code]

 24

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc.
Following are the possible options –

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example:
1.Create a document in your text editor.
2.Type the code as shown below and save it as list1.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>HTML Unordered List</title>
</head> <body> <ul type="square">
<li>Pants</li>
<li>Socks</li>
<li>Shorts</li>
<li>Shoes</li>
</ul> </body> </html>

Output

Example of Nested List

Learning Module on [Course Code]

 25

1.Create a document in your text editor.

2.Type the code as shown below and save it as list2.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>HTML Unordered List</title>
</head> <body>
<li>Pants</li>
<ul type="square">
<li> Large </li>
<li> Medium </li>
<li> Small </li>
</ul>
<li>Socks</li>
<li>Shorts</li>
<li>Shoes</li>
</body> </html>

Output:

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will
be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for
each successive ordered list element tagged with <li>.

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

Learning Module on [Course Code]

 26

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as list3.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>HTML Ordered List</title>
</head> <body>
<ol type="i">
<li>Pants</li>
<li>Socks</li>
</ol>
<ol type="A">
<li>Pants</li>
<li>Socks</li>
</ol>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>

<li>Milk</li>
</ol>

Learning Module on [Course Code]

 27

</body> </html>

Output:

HTML Description Lists

A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes
each term:
Example

Tables
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows
and columns of cells.

HTML Table Tags

Learning Module on [Course Code]

 28

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

<table> Tag Attributes:

border="?" Thickness of outside border
bordercolor="#??????" Border Color
cellspacing="?" Space between cells (pixels)
cellpadding="?" Space between cell wall and content
align="??" Horizontal Alignment: left, center, right
bgcolor="#??????" Background Colour
width="??" Table Width (pixels or %)
height="??" Table Height (pixels or %)
<td> Tag Attributes:
colspan="?" Number of columns the cell spans across (cell merge)

Learning Module on [Course Code]

 29

rowspan="?" Number of row a cell spans across (cell merge)

width="??" Cell Width (pixels or %)
height="??" Cell Height (pixels or %)
bgcolor="#??????" Background Color
align="??" Horizontal Alignment: left, center, right
valign="??" Vertical Alignment: top, middle, bottom
nowrap Force no line breaks in a particular cell

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default
Example
1.Create a document in your text editor and type the code as shown below and save it as table1.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>HTML Tables</title>
</head> <body>
<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> </body> </html>

Output

Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do
not need a border, then you can use border = "0".
Table Heading

Learning Module on [Course Code]

 30

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to
represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise
you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by
default.

Example.
1.Create a document in your text editor and type the code as shown below and save it as table2.html
2.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head> <title>Products TABLE</title>

</head> <body>
<table border="1" cellspacing="1" bordercolor="blue" bgcolor="yellow">
<tr> <th>Products</th>
<th>Brand</th>
<th>Price</th>
</tr> <tr> <td>Shoes</td>
<td>Nike</td>
<td>5,000</td>

</tr> <tr> <td>Pants</td>

<td>Levis</td>
<td>1,000</td>
</tr> </table>
</body> </html>

Output

Explanation

Learning Module on [Course Code]

 31

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust the white space
in your table cells. The cellspacing attribute defines space between table cells, while cellpadding
represents the distance between cell borders and the content within a cell.

Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as table3.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>HTML Table Cellpadding</title>
</head><body>
<table border="1" cellpadding="5" cellspacing="5">
<tr> <th>Name</th>
<th>Salary</th> </tr>
<tr> <td>Jose Rizal</td>
<td>5000</td> </tr>
<tr> <td>Apolinarion Mabini</td>
<td>7000</td> </tr>
</table> </body> </html>

Output

Learning Module on [Course Code]

 32

Here, the cellpadding = 5 and cellspacing=5 is the white space between the table cells. Try to put a bigger
number as well as smaller number to check the effect.

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.
Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as table4.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>HTML Table Colspan/Rowspan</title>
</head> <body>
<table border="1" cellpadding="10" and cellspacing="10">
<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> </body> </html>

Output

Learning Module on [Course Code]

 33

Tables Backgrounds
You can set table background using one of the following two ways −
 bgcolor attribute − You can set background color for whole table or just for one cell.
 background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these
attributes.
Example.
Modify table4.html by adding a bgcolor = “green” to the table attribute, as shown in the red underline
below

The table should be in green background color, as shown in the screenshot below.

Putting image as background in the table. Modify above program, delete the bgcolor attribute and replace
it with background attribute as shown in red box below.

Learning Module on [Course Code]

 34

The table should now have the logo.png as background as shown in the screenshot below. Note that that
logo.png should be inside the images folder.

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 pixels or in terms of percentage of available screen area.

Example. Modify the above web page by adding width and height on the table attributes as shown in red
box below

Learning Module on [Course Code]

 35

When you open the web page in the browser, you can now see that the changes in table width and height
as shown in the screenshot below

Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather
similar to headers and footers in a word-processed document that remain the same for every page, while
the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
1. <thead> − to create a separate table header.
2. <tbody> − to indicate the main body of the table.
3. <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>
Example. Type the code below.
1.Create a document in your text editor.
2.Type the code as shown below and save it as table5.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

Learning Module on [Course Code]

 36

<title>HTML Table</title>
</head> <body> <table border="1" width="100%">
<thead> <tr>
<td colspan="4"> <center>ABC College Portal</center></td>
</tr> </thead> <tfoot> <tr>
<td colspan="4"><center>Copyright 2020</center></td>
</tr> </tfoot> <tbody>
<tr> <td><center>Home<center></td>
<td><center>Course<center></td>
<td><center>About Us<center></td>
<td><center>Contact Us<center></td>
</tr> <tr height="200px">
<td colspan="4"> Welcome to ABC College </td>
</tr> </tbody> </table> </body> </html>

Output

SUMMARY
This lesson covers the fundamentals of web design using tables and list. Tables and list are very important
tags in HTML as they are giving you a way to arrange your data using tables and display items using lists.
The examples help you better understand the topics discussed in this lesson, which guides you on useful
tips and important notes in web designing using HTML tables and lists.

Learning Module on [Course Code]

 37

Lesson 4. Working with Links and Media

Lesson Objectives:
At the end of this lesson, you will be able to:
 Understand the fundamentals of using text link and image links in designing your web
application.
 Understand how to incorporate video and audio files in your web page.

Discussions

Working with Links

 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 a webpage.
 Links are found in nearly all web pages. Links allow users to click their way from page to page.
 HTML links are called hyperlinks.
Note: A link does not have to be text. It can be an image or any other HTML element!

Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and 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 <a> tag.

Learning Module on [Course Code]

 38

<a href = "Document URL" ... attributes-list>Link Text</a>

Example
Let's try following example which links https://www.google.com at your page –
1.Create a document in your text editor.
2.Type the code as shown below and save it as link1.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Hyperlink Example</title>
</head> <body>
<p>Click following link</p>
<a href="https://www.google.com">click to go to google web site </a>
</body> </html>

Output

Click the link. It will open the google web site as shown below.

Learning Module on [Course Code]

 39

Note. if you are not connected to the internet then you will see output as shown below

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

Link to Relative URLs

 The example above is using an absolute URL (a full web address).
 A local link (a link to a page within the same website) is specified with a relative URL (without
the "https://www" part):
Example. Lets try to create an html page that can link to our link1.html
1.Create a document in your text editor.
2.Type the code as shown below and save it as link2.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Hyperlink Example</title>
</head> <body>
<p>Click to go to the link1 html page</p>
<a href="link1.html">link 1</a>
</body> </html>

Output

Learning Module on [Course Code]

 40

When you click the link1, it will redirect your page to the link1.html

The target Attribute

We have used target attribute in our previous example. This attribute is used to specify the location where
linked document is opened. Following are the possible options −

Attribute Description

_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

targetframe Opens the linked document in a named targetframe.

Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as link3.html

Learning Module on [Course Code]

 41

3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Hyperlink Example</title>
</head> <body>
<p>My favorite websites</p>
<a href="link1.html" target="_blank">Opens in New</a> |
<a href="link2.html" target="_self">Opens in Self</a> |
<a href="test1.html" target="_parent">Opens in Parent</a> |
<a href="test2.html" target="_top">Opens in Body</a>
</body> </html>

Note. Click each link, and you will notice where the browser will open the links.

HTML Image Links

Here we will learn how to use images to create hyperlinks instead of texts.
Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as ImageLink.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="https://www.nasa.gov" target="_self" title='Click me to go to NASA website'>
<img src="images/logo.png" alt="link 1 logo" border="0" />
</a>
</body>
</html>

Output

Learning Module on [Course Code]

 42

When you mouseover the logo,you will seethe “Clickk me to g to NASA website”. When you click the
logo,it will open the NASA website as per specified in the<a href>.
HTML Email Links
It is not difficult to put an HTML email link on your webpage but it can cause unnecessary spamming
problem for your email account. There are people, who can run programs to harvest these types of emails
and later use them for spamming in various ways.

HTML Email Tag

HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag as
an email tag, you will use mailto: email address along with href attribute. Following is the syntax of
using mailto instead of using http.

<a href = "mailto: [email protected]">Send Email</a>

Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as mailexample.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Image Hyperlink Example</title>
</head> <body>
Email me <a href="mailto:[email protected]">Joe Young</a>.<br>
Visit us at:<br>
mycompany.com<br>
PO Box 100, Calamba<br>
Laguna
</body> </html>
Output

Learning Module on [Course Code]

 43

Click Joe Young and it will open your mail, depending on your email provider as shown below. Note,
here i am using Outlook.

HTML Media
 Multimedia comes in many different formats. It can be almost anything you can hear or see, like
images, music, sound, videos, records, films, animations, and more.
 Web pages often contain multimedia elements of different types and formats.

Multimedia Formats
 Multimedia elements (like audio or video) are stored in media files.
 The most common way to discover the type of a file, is to look at the file extension.
 Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats

There are many video formats out there.

The MP4, WebM, and Ogg formats are supported by HTML.

The MP4 format is recommended by YouTube.

HTML Video
The HTML <video> element is used to show a video on a web page.

Learning Module on [Course Code]

 44

Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as video1.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <body>

<video width="500" height="400" controls>
<source src="yourmovie.mp4" type="video/mp4">
<source src="youranothermovie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body> </html>

Explanation

 The controls attribute adds video controls, like play, pause, and volume.

 It is a good idea to always include width and height attributes. If height and width are not set, the
page might flicker while the video loads.
 The <source> element allows you to specify alternative video files which the browser may choose
from. The browser will use the first recognized format.
 The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.

HTML AUDIO
The HTML <audio> element is used to play an audio file on a web page.

Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as audio1.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <body>

<audio controls>
<source src="myAudio.ogg" type="audio/ogg">
<source src="myAnotherAudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body> </html>

Learning Module on [Course Code]

 45

Summary
This lesson covers the fundamentals of using links and media tags. Link is one of the keys of HTML
designing as it allows the user to navigate to different html pages. Without links, HTML will not be as
good as what you have today.

Also, in this lesson you learned how to incorporate HTML media in your web pages. HTML Media is
making the web more interesting in ways that you can insert video or audio in your web page.

Lesson 5. HTML Forms

Lesson Objectives:
At the end of this lesson, you will be able to:
 Understand the fundamentals of using form and its corresponding attributes in designing your
web application.

Discussions

HTML Forms
 HTML Forms are required, when you want to collect some data from the site visitor. For example,
during user registration you would like to collect information such as name, email address, contact
number, age, among other things. In short, an HTML form is used to collect user input.

Learning Module on [Course Code]

 46

 A form will take input from the site visitor and then will post it to a back-end application such as
ASP.Net, Java Servlet, CGI, ASP Script or PHP script etc. The back-end application will perform
required processing on the passed data based on defined business logic inside the application.
Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes –

Attribute Description

action Backend script ready to process your passed data.

method Method to be used to upload data. The most frequently used are GET and POST
methods.

target Specify the target window or frame where the result of the script will be displayed. It
takes values like _blank, _self, _parent etc.

encytype You can use the enctype attribute to specify how the browser encodes the data before it
sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms use in
simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of
files like image, word file etc.

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form −
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

HTML Form Elements

Tag Description

Learning Module on [Course Code]

 47

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<button> Defines a clickable button

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

Text Input Controls

There are three types of text input used on forms −
1. Single-line text input controls − This control is used for items that require only one line of user
input, such as search boxes or names. They are created using HTML <input> tag.
2. Password input controls − This is also a single-line text input but it masks the character as soon as a
user enters it. They are also created using HTMl <input> tag.
3. Multi-line text input controls − This is used when the user is required to give details that may be
longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Password input controls

Learning Module on [Course Code]

 48

This is also a single-line text input but it masks the character as soon as a user enters it. They are also
created using HTML <input>tag but type attribute is set to password.
Attributes
Following is the list of attributes for <input> tag and <password> tag

Attribute Description

type Indicates the type of input control and for password input control it will be set
to password. and for text input control it will be set to text

name Used to give a name to the control which is sent to the server to be recognized and get the
value.

value This can be used to provide an initial value inside the control.

size Allows to specify the width of the text-input control in terms of characters.

maxlengt Allows to specify the maximum number of characters a user can enter into the text box.
h

Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as form1.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Text Input Control</title>
</head>
<body>
<form>

Learning Module on [Course Code]

 49

<h2> Personal Information </h2>

First name: <input type="text" name="firstName" />
<br><br>
Last name: <input type="text" name="LastName" />
<br><br>
Address: <input type="text" name="LastName" />
<br><br><br>
<h2> User Login </h2>
Username: <input type="text" name="username" maxlength="15" size="50" />
<br><br>
Password: <input type="password" name="password" maxlength="10" size="10" />
</form> </body> </html>

Output

Here, you will notice the length of the username is longer than the other input box. This is because of the
size attribute. If you want to limit the number of characters that the user enters then you can use the
maxlength attribute. So here for username, you can only enter 15 characters, while you can only enter 10
characters for password.

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single sentence. Multi-line
input controls are created using HTML <textarea> tag.

Attributes

Learning Module on [Course Code]

 50

Following is the list of attributes for <textarea> tag.

Attribute Description
s

name Used to give a name to the control which is sent to the server to be recognized and
get the value.

rows Indicates the number of rows of text area box.

cols Indicates the number of columns of text area box

Example. Modify the form1.html by adding the code in red box below

Output:

Learning Module on [Course Code]

 51

So here, you can now see the comments box. This is prevalent in most web sites where user can enter
his/her comments or suggestions.

Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also created using
HTML <input> tag but type attribute is set to checkbox..

Attributes
Following is the list of attributes for <checkbox> tag.

Attribute Description
s

Type Indicates the type of input control and for checkbox input control it will be set
to checkbox..

name Used to give a name to the control which is sent to the server to be recognized
and get the value.

value The value that will be used if the checkbox is selected.

checked Set to checked if you want to select it by default.

Example. Modify form1.html by adding the code in red box below

Learning Module on [Course Code]

 52

Your output should be look like this

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to radio.

Learning Module on [Course Code]

 53

Attributes
Following is the list of attributes for radio button.

Attributes Description

type Indicates the type of input control and for checkbox input control it will be set to
radio.

name Used to give a name to the control which is sent to the server to be recognized and
get the value.

value The value that will be used if the radio box is selected.

checked Set to checked if you want to select it by default.

Example
1.Create a document in your text editor.
2.Type the code as shown below and save it as form2.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Form Controls</title>
</head> <body>
<form>
<h2> Select Movie </h2>
<input type="radio" name="movie1" value="J"> John Wick
<input type="radio" name="movie1" value="B"> Bourne
</form>
</body> </html>
Output

Learning Module on [Course Code]

 54

Here, you can only select one because you use the input type radio

Select Box Control

A select box, also called drop down box which provides option to list down various options in the form of
drop down list, from where a user can select one or more options.
Attributes

Attribute Attribute & Description

s

Name Used to give a name to the control which is sent to the server to be recognized and get the
value.

size This can be used to present a scrolling list box.

multiple If set to "multiple" then allows a user to select multiple items from the menu.

Following is the list of important attributes of <option> tag for Select Box Control

Attributes Attribute & Description

value The value that will be used if an option in the select box box is selected.

selected Specifies that this option should be the initially selected value when the page loads.

label An alternative way of labeling options

Example. Modify form2.html by adding the code in red box below

Learning Module on [Course Code]

 55

Output

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also
known as a file select box. This is also created using the <input> element but type attribute is set to file.
Attributes
Following is the list of important attributes of file upload box −

Attribute Attribute & Description

s

name Used to give a name to the control which is sent to the server to be recognized and get the
value.

accept Specifies the types of files that the server accepts.

Example. Modify form2.html by adding the code in red box below

Learning Module on [Course Code]

 56

Output

Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable button using
<input>tag by setting its type attribute to button. The type attribute can take the following values

Attributes Type & Description

submit This creates a button that automatically submits a form.

reset This creates a button that automatically resets form controls to their initial values.

button This creates a button that is used to trigger a client-side script when the user clicks that button.

image This creates a clickable button but we can use an image as background of the button.

Example. Modify form2.html by adding the code in red box below

Learning Module on [Course Code]

 57

Output:

Note. the submit button is not showing the image. The reason is that you have logo.png in your images
folder.
Hidden Form Controls
Hidden form controls are used to hide data inside the page which later on can be pushed to the server.
This control hides inside the code and does not appear on the actual page. For example, following hidden
form is being used to keep current page number. When a user will click next page then the value of
hidden control will be sent to the web server and there it will decide which page will be displayed next
based on the passed current page.
Example.
1.Create a document in your text editor.
2.Type the code as shown below and save it as form3.html
3.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Form Controls</title></head> <body>
<form>

Learning Module on [Course Code]

 58

<p>This is page 10</p>

<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form> </body> </html>

Output:

SUMMARY
This lesson covers all the fundamentals of HTML forms. The examples shown helps you better
understand the topics discussed in this lesson, which guides you on useful tips and important notes in web
designing using HTML forms.

Lesson 6. Cascading Style Sheets (CSS)

Lesson Objectives:
At the end of this lesson, you will be able to:
 Understand the fundamentals of CSS, including the idea of selectors, methods of setting colors
and backgrounds, way of formatting fonts and text, styling UI elements, etc…

 Understand the concept of internal and external CSS

Discussions

Cascading Style Sheets (CSS)

 Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify
the process of making web pages presentable.

Learning Module on [Course Code]

 59

 CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text,
the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, layout designs, variations in display for different devices and
screen sizes as well as a variety of other effects.

Advantages of CSS

 CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You
can define a style for each HTML element and apply it to as many Web pages as you want.
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means
faster download times.
 Easy maintenance − To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give
a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type
of device. By using the same HTML document, different versions of a website can be presented for
handheld devices such as PDAs and cell phones or for printing.
 Global web standards − Now HTML attributes are being deprecated and it is being recommended
to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to
future browsers.

Who Creates and Maintains CSS?

 CSS is created and maintained through a group of people within the W3C called the CSS Working
Group. The CSS Working Group creates documents called specifications. When a specification has
been discussed and officially ratified by the W3C members, it becomes a recommendation.
 These ratified specifications are called recommendations because the W3C has no control over the
actual implementation of the language. Independent companies and organizations create that
software.
Note. The World Wide Web Consortium, or W3C is a group that makes recommendations about how the
Internet works and how it should evolve.

CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding
elements in your document. A style rule is made of three parts −
 Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like
<h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are
converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

Learning Module on [Course Code]

 60

Example:

Here table is a selector and border is a property and given value 1px solid #C00 is the value of that
property.

Example

1. Create a document in your text editor and type the code as shown below and save it as css1.html.
2. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<style> p {
color: cyan;
text-align: center;
font-size: 50px;
}

</style> </head> <body>

<p>Calamba!</p>
<p>Laguna</p>
</body> </html>

Explanation: all <p> elements will be center-aligned, with a cyan text color and font size of 50px.

CSS Selectors
 CSS selectors are used to "find" (or select) the HTML elements you want to style.

CSS Selectors
1. Element or Type selectors
 The element selector selects HTML elements based on the element name. css1.html is an example
of element or type selectors
2. ID Selector
 The id selector uses the id attribute of an HTML element to select a specific element. The id of an
element is unique within a page, so the id selector is used to select one unique element! To select
an element with a specific id, write a hash (#) character, followed by the id of the element.

Learning Module on [Course Code]

 61

Example
1.Create a document in your text editor. Type the code as shown below and save it as css2.html
2.Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<style>
#red {
text-align: left;
color: red;
}
</style>
</head> <body>
<p id="red">Calamba</p>
<p>Laguna</p>
</body> </html>

Output in red box below. The CSS rule below will be applied to the HTML element with id="red". Since
you use the id red in p tag as shown in the below, the element Calamba font color is red.

3. The CSS class Selector

 The class selector selects HTML elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by the class name.
Example
1. Create a document in your text editor. Type the code as shown below and save it as css3.html
2. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<style>
.red {

Learning Module on [Course Code]

 62

text-align: left;
color: red;
}
.blue {
text-align: center;
color: blue;
}
p.center {
text-align: center;
color: red;
}
</style>
</head> <body>
<p class="red">Calamba</p>
<p class="blue">Laguna</p>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Output in green box below. The CSS rule below will be applied to the HTML element with class red and
blue.
You can also specify that only specific HTML elements should be affected by a class like what you have
below for p.center.

4. The Universal Selectors

 Rather than selecting elements of a specific type, the universal selector quite simply matches the
name of any element type −

*{ color: #000000;
}

This rule renders the content of every element in our document in black.

Learning Module on [Course Code]

 63

Example
1. Create a document in your text editor. Type the code as shown below and save it as css4.html
2. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<style>
*{
text-align: center;
color: #000000;
}
</style>
</head> <body>
<h1>Calamba</h1>
<p>Laguna</p>
</body> </html>

Output in green box below. The CSS rule below will affect every HTML element on the page

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a particular
element.
As given in the following example, style rule will apply to <em> element only when it lies inside <ul>
tag.

ul em {
color: #000000;
}

THREE WAYS TO INSERT CSS

Learning Module on [Course Code]

 64

1. Inline Styles – An inline CSS is used to apply a unique style to a single HTML element. An inline
CSS uses the style attribute of an HTML element.
2. Internal Style Sheet - Internal styles are defined within the <style> element, inside the <head>
section of an HTML page.
3. External Style Sheet - Each page must include a reference to the external style sheet file inside the
<link> element.

Example of Inline Styles

1. Create a document in your chosen editor.
2. Type the code below and save it as inlineCSS.html
3. Preview your work using your browser

<!DOCTYPE html> <html> <body>

<h1 style="color:red;font-size: 90px;">Calamba</h1>
<p style="color:black;">Laguna</p>
</body> </html>

Output in green box below. Also in the output below, you can see the h1 element with style attribute.
This denotes inline CSS. So the <h1> element will be set to red with font size to 90 and <p> element to
black.

Example of Internal Styles

1. Create a document in your chosen editor.
2. Type the code below and save it as internalCSS.html
3. Preview your work using your browser

<!DOCTYPE html> <html> <head>

<style> body {
background-color: cyan; }
h1 {
color: red; }
p{

Learning Module on [Course Code]

 65

color: black; }
</style> </head> <body>
<h1>Calamba</h1>
<p>Laguna</p>
</body> </html>

Output in green box below. You can see that the css is inline because it is is defined in the <head>
section of an HTML page, within a <style> element

Example of External Styles

1. Create a document in your chosen editor.
2. For external css, type the code as shown below and save it as mycss.css
3. For HTML, type the code as shown below and save it as myExternal.html

4. Preview your HTML work using your browser

mycss.css code

body {background-color: cyan;}

h1 {color: red;}
p {color: black;}

myExternal.html code

<!DOCTYPE html> <html> <head>

<link rel="stylesheet" href="mycss.css">
</head> <body>
<h1>Calamba</h1>
<p>Laguna</p>
</body> </html>
In this code, you can see in the <head> section that we add a link of stylesheet and the name is mycss.css.
so if you notice in your css file, it is the same as what you have in internal css example. So the output is
the same as shown below
Output:

Learning Module on [Course Code]

 66

Another example. You can use external css available in the internet.
1. Create a document in your chosen editor.
2. For HTML, type the code as shown below and save it as myExternal2.html
3. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head> <body>
<div class="jumbotron">
<h1>Welcome to ABC College</h1>
</div>
<div class="container">
<h2>Login</h2> <form>
<div class="form-group">
<label for="user">Username:</label>
<input type="text" class="form-control" id="usr" name="username">
</div>

<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="pwd" name="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form> </div>
</body> </html>

So here, the href link is in the internet. If you don’t have internet then you cannot see the output.
Output:

Learning Module on [Course Code]

 67

SUMMARY
This lesson covers the fundamentals of CSS, including the idea of selectors, methods of setting colors and
backgrounds, way of formatting fonts and text and styling UI elements. The examples given help you
better understand the topics discussed in this lesson, which guides you on the useful tips and important
notes in web designing using CSS.

Lesson 7. Bootstrap

Lesson Objectives:
At the end of this lesson, you will be able to:
 Understand the features of Bootstrap framework, starting with the basics, such as grid system,
typography styling mechanism, form styling methods, as well as, techniques of styling common
user interface elements like tables, lists as well as carousels, among other things.

Discussions

What is Bootstrap?
 Bootstrap is a powerful front-end framework for faster and easier web development. It includes
HTML and CSS based design templates for creating common user interface components like
forms, buttons, navigations, dropdowns, alerts, modals, tabs, accordions, carousels, tooltips, and
so on.
 Bootstrap gives you ability to create flexible and responsive web layouts with much less efforts.
 Bootstrap was originally created by a designer and a developer at Twitter in mid-2010. Before
being an open-sourced framework, Bootstrap was known as Twitter Blueprint.

Learning Module on [Course Code]

 68

History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released as an open source
product in August 2011 on GitHub.
What is Responsive Web Design?
 Responsive web design is about creating web sites which automatically adjust themselves to look
good on all devices, from small phones to large desktops.

Why to Learn Bootstrap?

 Mobile first approach − Bootstrap 3, framework consists of Mobile first styles throughout the
entire library instead them of in separate files.
 Browser Support − It is supported by all popular browsers.

 Easy to get started − With just the knowledge of HTML and CSS anyone can get started with
Bootstrap. Also the Bootstrap official site has a good documentation.
 Responsive design − Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
More about the responsive design is in the chapter Bootstrap Responsive Design.

 Provides a clean and uniform solution for building an interface for developers.
 It contains beautiful and functional built-in components which are easy to customize.
 It also provides web-based customization.
 And best of all it is an open source.

Applications of Bootstrap

 Scaffolding − Bootstrap provides a basic structure with Grid System, link styles, and
background.
 CSS − Bootstrap comes with the feature of global CSS settings, fundamental HTML elements
styled and enhanced with extensible classes, and an advanced grid system

Learning Module on [Course Code]

 69

 Components − Bootstrap contains over a dozen reusable components built to provide

iconography, dropdowns, navigation, alerts, pop-overs, and much more.
 JavaScript Plugins − Bootstrap contains over a dozen custom jQuery plugins. You can easily
include them all, or one by one. .
 Customize − You can customize Bootstrap's components, LESS variables, and jQuery plugins to
get your very own version.
What You Can Do with Bootstrap
There are lot more things you can do with Bootstrap.
 You can easily create responsive websites.
 You can quickly create multi-column layout with pre-defined classes.
 You can quickly create different types of form layouts.
 You can quickly create different variation of navigation bar.
 You can easily create components like accordions, modals, etc. without writing any JS code.
 You can easily create dynamic tabs to manage large amount of content.
 You can easily create tooltips and popovers to show hint text.
 You can easily create carousel or image slider to showcase your content.
 You can quickly create different types of alert boxes.

Advantages of Using Bootstrap

Save lots of time — You can save lots of time and efforts using the Bootstrap predefined design
templates and classes and concentrate on other development work.
 Responsive features — Using Bootstrap you can easily create responsive websites that appear more
appropriately on different devices and screen resolutions without any change in markup.
 Consistent design — All Bootstrap components share the same design templates and styles through a
central library, so the design and layout of your web pages will be consistent.
 Easy to use — Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML,
CSS and JavaScript can start development with Bootstrap.
 Compatible with browsers — Bootstrap is created with modern web browsers in mind and it is
compatible with all modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.
 Open Source — And the best part is, it is completely free to download and use.
Environmental Setup
It is very easy to setup and start using Bootstrap. This chapter will explain how to download and setup
Bootstrap. We will also discuss the Bootstrap file structure, and demonstrate its usage with an example.
 Include Bootstrap from a CDN
 Download Bootstrap 4 from getbootstrap.com
Download Bootstrap
Step 1. You can download the latest version of Bootstrap from https://getbootstrap.com/. When you click
on this link, you will get to see a screen as below.

Learning Module on [Course Code]

 70

Step 2. Click the Download button. You will see the screen below

Step 3. Click the download button. In your download folder, you can see a zip file as below

Step 4. Unzip the file. You should have files as below

Step 5. Copy the said folders in your web system directory.

Boostrap – First run
1. Create a document in your chosen editor. Type the code as shown below and save it as
bootstap1.html.
a. Note. save the file on the same folder where you copy your bootstrap download files.
2. Preview your HTML work using your browser
<!DOCTYPE html> <html> <head>
<title>Login</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head> <body>

Learning Module on [Course Code]

 71

<div class="jumbotron">
<h1>Welcome to ABC College</h1>
</div>
<div class="container">
<h2>Login</h2>
<form>
<div class="form-group">
<label for="user">Username:</label>
<input type="text" class="form-control" id="usr" name="username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="pwd" name="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div> </body> </html>
In this code, you will notice the href of the stylesheets, which is under folder css and the file is
bootstrap.min.css.
If you see the output below, then it means that you have set-up your bootstrap properly.

If you see the output below, then either you did not download the bootstrap properly or the directory is
not ok.

If this is the case, make sure you have the following files on the same directory.

Learning Module on [Course Code]

 72

Bootstrap CDN
 If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content
Delivery Network).
 MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:
You can do this by replacing

<link href="css/bootstrap.min.css" rel="stylesheet">

to
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

Bootstrap Grid System

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider
columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1

 span 4  span 4  span 4

span 4 span 8

span 6 span 6

span 12

 The grid system is responsive, and the columns will re-arrange automatically depending on the screen
size.
 Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available
columns).

What is Responsive Web Design

Learning Module on [Course Code]

 73

Responsive web design is a process of designing and building websites to provide better accessibility and
optimal viewing experience to the user by optimizing it for different devices.
With the growing trend of smart phones and tablets, it has become almost unavoidable to ignore the
optimization of sites for mobile devices. Responsive web design is a preferable alternative and an
efficient way to target a wide range of devices with much less efforts.
Responsive layouts automatically adjust and adapts to any device screen size, whether it is a desktop, a
laptop, a tablet, or a mobile phone. See the following Illustration.

Example.
1. Create a document in your text editor.
2. Type the code as shown below and save it as BootsrapResponsive.html
3. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<link href="css/bootstrap.min.css" rel="stylesheet">
</head> <body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
<div class="container-fluid">
<a href="#" class="navbar-brand mr-3">ABC College</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-
target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Course Offerings</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Register</a>
<a href="#" class="nav-item nav-link">Login</a>
</div> </div> </div>
</nav>

Learning Module on [Course Code]

 74

<div class="container">
<div class="jumbotron">
<h1>Welcome to ABC College</h1>
<p class="lead">
ABC College is blah blah blah blah blah . At <a href="http://abccollege.com"
target="_blank">ABC College</a>
you will learn the essential of programming.
</p>
<p><a href="https://www.abccollege.com" target="_blank" class="btn btn-success btn-
lg">Contact Us</a></p>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>HTML</h2>
<p>HTML is the standard markup language for describing the structure of the web pages. Our
HTML tutorials will help you to understand the basics of latest HTML5 language..</p>
<p><a href="https://www.abccollege.com/html-tutorial/" target="_blank" class="btn btn-
success">Learn More &raquo;</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and
effort. Our CSS tutorials will help you to learn the essentials of latest CSS3</p>
<p><a href="https://www.abccollege.com/css-tutorial/" target="_blank" class="btn btn-
success">Learn More &raquo;</a></p>
</div>

<div class="col-md-6 col-lg-4 col-xl-3">

<h2>JavaScript</h2>
<p>JavaScript is the most popular and widely used client-side scripting language. Our
JavaScript tutorials will provide in-depth knowledge of the JavaScript including ES6 features, </p>
<p><a href="https://www.abccollege.com/javascript-tutorial/" target="_blank" class="btn btn-
success">Learn More &raquo;</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. Our
Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework</p>
<p><a href="https://www.abccollege.com/twitter-bootstrap-tutorial/" target="_blank"
class="btn btn-success">Learn More &raquo;</a></p>
</div>
</div>
<hr size="10" noshade>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright &copy; 2019 ABC College</p>
</div>
<div class="col-md-6 text-md-right">

Learning Module on [Course Code]

 75

<a href="#" class="text-dark">Terms of Use</a>

<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div> </div> </footer> </div></body></html>

Output in max screen

Output in small screen

Bootstrap - Table
Bootstrap provides a clean layout for building tables. Some of the table elements supported by Bootstrap
are.

Learning Module on [Course Code]

 76

Tag Description

<table> Wrapping element for displaying data in a tabular format

<thead> Container element for table header rows (<tr>) to label table columns.

<tbody> Container element for table rows (<tr>) in the body of the table.

<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row.

<td> Default table cell.

<th> Special table cell for column (or row, depending on scope and placement) labels. Must be
used within a <thead>

<caption Description or summary of what the table holds.

>

Example
1. Create a document in your text editor.
2. Type the code as shown below and save it as BootstrapTable.html
3. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<link href="css/bootstrap.min.css" rel="stylesheet">
</head> <body> <div>
<table class="table table-striped">
<thead> <tr>
<th>Row Number</th>
<th>First Name</th>
<th>Last Name</th>

Learning Module on [Course Code]

 77

<th>Email</th>
</tr> </thead> <tbody>
<tr>
<td>1</td>
<td>Jose</td>
<td>Rizal</td>
<td>[email protected]</td>
</tr> <tr>
<td>2</td>
<td>John</td>
<td>Joe</td>
<td>[email protected]</td>
</tr> <tr>
<td>3</td>
<td>Kurt</td>
<td>Russ</td>
<td>[email protected]</td>
</tr> </tbody> </table> </div> </body> </html>

Output

Bootstrap Nav Components

Bootstrap provides an easy and quick way to create basic nav components like tabs and pills which are
very flexible and elegant. All the Bootstrap's nav components—tabs and pills—share the same base
markup and styles through the base .nav class.

Example
1. Create a document in your text editor.
2. Type the code as shown below and save it as BootstrapNav.html
3. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<link href="css/bootstrap.min.css" rel="stylesheet">
</head> <body>
<div class="bs-example">
<nav class="nav nav-pills">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>

Learning Module on [Course Code]

 78

<a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a>

</nav>
</div> </body> </html>

Output:

Creating Buttons with Bootstrap

Buttons are the integral part of a website and application. They are used for various purposes like, submit
or reset an HTML form, performing interactive actions such as showing or hiding something on a web
page on click of the button, redirecting user to another page, and so on. Bootstrap provides a quick and
easy way to create and customize the buttons.

Bootstrap Button Styles

Different classes are available in Bootstrap for styling the buttons as well as to indicate the different states
or semantic. Button styles can be applied to any element. However, it is applied normally to the <a>,
<input>, and <button> elements for the best rendering.

Example
1. Create a document in your text editor.
2. Type the code as shown below and save it as BootstrapButton.html
3. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<link href="css/bootstrap.min.css" rel="stylesheet">
</head> <body>
<br><br>
<div class="bs-example">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

Learning Module on [Course Code]

 79

</div>
</body> </html>
Output

Creating Accordion Widget with Bootstrap

Accordion menus and widgets are widely used on the websites to manage the large amount of content and
navigation lists. With Bootstrap collapse plugin you can either create accordion or a simple collapsible
panel without writing any JavaScript code.
Example
1. Create a document in your text editor.
2. Type the code as shown below and save it as BootstrapAccordion.html
3. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head> <body>
<div class="bs-example">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">1. What
is HTML?</button>
</h2> </div>

<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-

parent="#accordionExample">
<div class="card-body">
<p>HTML is the standard markup language for describing the structure of web pages.
<a href="https://www.abc.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div> </div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-
target="#collapseTwo">2. What is Bootstrap?</button>
</h2> </div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-
parent="#accordionExample">

Learning Module on [Course Code]

 80

<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier
web development.<a href="https://www.abc.com/twitter-bootstrap-tutorial/" target="_blank">Learn
more.</a></p>
</div> </div> </div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-
target="#collapseThree">3. What is CSS?</button>
</h2> </div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-
parent="#accordionExample">
<div class="card-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given
HTML. <a href="https://www.abc.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div> </div> </div> </div> </div> </body> </html>

Output

Creating Carousels with Bootstrap

 The carousel also known as slideshow or image slider is some of the best way of showcasing the huge
amount of contents within a small space on the web pages. It is a dynamic presentation of contents
where text and images are made visible or accessible to the user by cycling through several items.
 The following example will show you how to build a simple carousel like image rotator or slideshow
using the Bootstrap carousel plugin.
Example
1. Create a document in your text editor. Type the code as shown below and save it as
BootstrapCarousel.html
2. Preview your HTML work using your browser

<!DOCTYPE html> <html> <head>

<title>Example</title>

Learning Module on [Course Code]

 81

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.carousel {
background: #2f4357;
margin-top: 20px; }
.carousel-item {
text-align: center;
min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load
*/
}
</style> </head> <body>
<div class="container-lg my-3">
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/logo.png" width="100px" height="50px" alt="First Slide">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>this is first slide.</p>
</div> </div>
<div class="carousel-item">
<img src="images/logo.png" width="100px" height="50px" alt="Second Slide">

<div class="carousel-caption d-none d-md-block">

<h5>Second slide label</h5>
<p>This is second slide</p>
</div> </div>
<div class="carousel-item">
<img src="images/logo.png" width="100px" height="50px" alt="Third Slide">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>This is third slide</p>
</div> </div> </div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a> <a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>

Learning Module on [Course Code]

 82

</a> </div> </div> /body> </html>

Code explanation
The Bootstrap carousel has basically three components — carousel indicators (small circles), carousel
controls (previous and next arrows) and the carousel items or slides.
 The outermost container of every carousel requires a unique id (in our case id="myCarousel") so that it
can be targeted by the carousel and carousel controls to function properly.
 The data-ride="carousel" attribute of the .carousel element tells the Bootstrap to start animating the
carousel immediately when the page load. Whereas the data-interval attribute specifies the time delay
between two slides.
 The .data-slide-to attribute move the slide position to a particular item (index beginning with 0) when
clicking on the specific carousel indicator.
 The slides are specified within the .carousel-inner  and the content of each slide is defined within
the .carousel-item element that can be text and images.
 The data-slide attribute on carousel controls accepts the keywords prev or next, which alters the slide
position relative to its current position.

Rest of the thing is self explanatory, such as the .carousel element specifies the Bootstrap carousel,
the .carousel-indicators element indicates how many slides are there in the carousel and which slide is
currently active, the .carousel-caption element used within the .carousel-item element defines the caption
for that slide etc.
Tip: It is required to add the class .active to one of the slides (i.e. on the .carousel-item element).
Otherwise, the carousel will not be visible.
Note: The .slide class on the .carousel element adds CSS slide transition animation to the carousel that
makes the carousel items slide when showing the new item.

Output

Learning Module on [Course Code]

 83

Summary
This lesson covers the fundamentals of Bootstrap framework, starting with the basics, such as grid
system, typography styling mechanism, form styling methods, as well as, techniques of styling common
user interface elements like tables, lists as well as carousels, etc.. The examples help you better
understand the topics discussed in this lesson, which guides you on the useful tips and important notes in
web designing using Bootstrap.

Learning Module on [Course Code]