WEB DEVELOPMENT

WEB DEVELOPMENT 1
 Centre for Distance and Online Education

Online BCA Program

Web Development
Semester: 1

Author

Ms. Urvashi Rakholiya, Assistant Professor, Online

Degree-CDOE, Parul University

Credits
Centre for Distance and Online Education, Parul University,

Post Limda, Waghodia,

Vadodara, Gujarat, India

391760.

Website: https://paruluniversity.ac.in/

Disclaimer

This content is protected by CDOE, Parul University. It is sold under the stipulation that it cannot be
lent, resold, hired out, or otherwise circulated without obtaining prior written consent from the
publisher. The content should remain in the same binding or cover as it was initially published, and this
requirement should also extend to any subsequent purchaser. Furthermore, it is important to note that,

WEB DEVELOPMENT 2
in compliance with the copyright protections outlined above, no part of this publication may be
reproduced, stored in a retrieval system, or transmitted through any means (including electronic,
Mechanical, photocopying, recording, or otherwise) without obtaining the prior written permission
from both the copyright owner and the publisher of this content.

Note to Students

These course notes are intended for the exclusive use of students enrolled in Online BCA. They are not
to be shared or distributed without explicit permission from the University. Any unauthorized sharing or
distribution of these materials may result in academic and legal consequences.

WEB DEVELOPMENT 3
 TABLE OF CONTENT

Sub-topic 1.1 Concepts of Internet, Working how internet work ......................................................7

SUB-TOPIC 1.2 Evolution, Specification and establishment details ................................................. 11

SUB-TOPIC 1.3 Intranets, Extranets, and Internet Applications ........................................................15

Sub-topic 1.4 Internet Applications: Email, Telnet, FTP .................................................................... 18

Sub-topic 2.1 Concept of www, Web page: static and Dynamic .......................................................22

SUB-TOPIC 2.2 ....................................................................................................................................25

Active Scripting Languages: Server Side and Client Side ................................................................... 25

Sub-topic 2.3 ......................................................................................................................................32

Web: Designing, Development and Publishing ................................................................................. 32

Sub-topic 2.4 HTTP, URL registration, browsers, Web server .......................................................... 37

sub-topic 3.1 Introduction to HTML5 and Basic block of HTML5 .....................................................52

Sub-topic 3.2 Setting up the Document Structure ........................................................................... 62

sub-topic 4.1 Designing page using HTML and learning of HTML5 TAGS part 1 ..............................74

Sub-topic 4.2 learning of HTML5 TAGS part 2 .................................................................................. 96

SUB-TOPIC 4.3 learning of HTML5 TAGS part 3 ..............................................................................108

Sub-topic 5.1 ....................................................................................................................................120

Creating and Formatting Tables ...................................................................................................... 120

sub-topic 5.2 Creating User Forms ................................................................................................. 130

sub-topic 6.1 .................................................................................................................................... 149

Introduction to Style Sheets, Importance of CSS3, Syntax for css3 ................................................ 149

Sub-topic 6.2 Different types of css3 and Selectors in css3 ............................................................ 157

Sub-topic 6.3 Colors in css3, Colors and text Properties .................................................................180

WEB DEVELOPMENT 4
Sub-topic 6.4 Background and Border in css3, button style in css3. ..............................................198

sub-topic 6.5 .................................................................................................................................... 219

Box-Model in CSS, Transform in CSS, Animations in CSS ................................................................ 219

SUB-TOPIC 7.1 Introduction of Bootstrap ...................................................................................... 234

Sub-topic 7.2 Syntax of Bootstrap .................................................................................................. 238

sub-topic 7.3 Container .................................................................................................................. 243

sub-topic 7.4 Connectivity of Bootstrap in Page ............................................................................ 248

sub-topic 7.5 Bootstrap Example ....................................................................................................253

Sub-topic 8.1 ....................................................................................................................................259

Jumbotron, Button, Grid , Table ...................................................................................................... 259

sub-topic 8.2 Form, Alert, Wells, Badge and label ......................................................................... 265

Sub-topic 8.3 Panels, Pager, Image, Glyphicon, Carousel .............................................................. 271

Sub-topic 8.4 Progress Bar, List Group ........................................................................................... 276

Sub-topic 8.5 Dropdown, Collapse ................................................................................................. 279

WEB DEVELOPMENT 5
 Internet Basics

WEB DEVELOPMENT 6
 SUB-TOPIC 1.1
CONCEPTS OF INTERNET, WORKING HOW INTERNET WORK

INTRODUCTION

The Internet, a global network of networks, has revolutionized the way we communicate, work,
learn, and play. It has transformed our society and economy, paving the way for an
unprecedented exchange of ideas and information.

WHAT IS THE INTERNET?

The Internet is a vast network that connects computers all over the world. Through the Internet,
people can share information and communicate from anywhere with an Internet connection. It
consists of millions of private, public, academic, business, and government networks of local to
global scope that are linked by a broad array of electronic, wireless, and optical networking
technologies.

HISTORY OF THE INTERNET

The Internet originated with the U.S. government in the 1960s as a way to share information
among scientists and researchers. The Advanced Research Projects Agency Network (ARPANET)
was the first network to implement the protocol suite TCP/IP, which became the technical
foundation of the modern Internet. The Internet was commercialized in the 1990s when Internet
service providers (ISPs) emerged, providing users with access to the Internet.

HOW DOES THE INTERNET WORK?

The Internet works through a packet routing network following the Internet Protocol (IP). When
you send or receive data (for example, an email or a webpage), it gets divided into small chunks
called packets. These packets are then sent across the Internet, where they are received and
reassembled by the destination device.

WEB DEVELOPMENT 7
INTERNET PROTOCOLS

The Internet functions using a set of protocols. The two most important are the Transmission
Control Protocol (TCP) and the Internet Protocol (IP). TCP is used for the actual transmission of
data, while IP is used for addressing and routing the data to its destination.

INTERNET SERVICES

The Internet provides a wide range of services, including:

1. World Wide Web (WWW): The WWW is a system of interlinked hypertext documents
accessed via the Internet. It uses HTTP to transmit data and allows users to interact with
media like text, images, videos, etc.

2. Email: Email is one of the most widely used services on the Internet, allowing users to send
electronic messages to one another.

3. File Transfer Protocol (FTP): FTP is used to transfer files from one host to another over the
Internet.

4. Internet Telephony: Services like Skype and Zoom allow users to make voice and video
calls over the Internet.

5. Social Media: Platforms like Facebook, Twitter, and Instagram allow users to connect,
communicate, and share content with others.

INTERNET GOVERNANCE

The Internet is a decentralized network, with no central governing body. However, several
organizations contribute to its smooth operation. These include the Internet Engineering Task
Force (IETF), which develops and promotes Internet standards, and the Internet Corporation for
Assigned Names and Numbers (ICANN), which oversees the Internet’s domain name system.

WEB DEVELOPMENT 8
INTERNET SECURITY

With the increasing use of the Internet, security has become a significant concern. Threats like
malware, phishing, and hacking can compromise users’ privacy and data. Therefore, it’s crucial to
follow best practices for Internet security, such as using strong passwords, keeping software
updated, and being cautious of suspicious emails and websites.

THE FUTURE OF THE INTERNET

The future of the Internet holds exciting possibilities, with emerging technologies like the Internet
of Things (IoT), 5G, and artificial intelligence set to further transform how we live and work.
However, challenges like digital divide and net neutrality need to be addressed to ensure that the
benefits of the Internet are accessible to all.

KEY TAKEAWAY

1. The Internet is a global network of networks that allows computers worldwide to connect
and communicate with each other.
2. It uses a packet routing network following the Internet Protocol (IP) and functions using a
set of protocols, the most important being the Transmission Control Protocol (TCP) and the
Internet Protocol (IP).
3. The Internet provides a wide range of services, including the World Wide Web (WWW),
email, File Transfer Protocol (FTP), Internet Telephony, and Social Media.
4. The Internet is governed by several organizations, including the Internet Engineering Task
Force (IETF) and the Internet Corporation for Assigned Names and Numbers (ICANN).
5. Internet security is a significant concern due to threats like malware, phishing, and hacking.
6. The future of the Internet holds exciting possibilities with emerging technologies like the
Internet of Things (IoT), 5G, and artificial intelligence.
7. Understanding the concept, history, and workings of the Internet is essential in today's
digital age.

WEB DEVELOPMENT 9
 INTERNET BASICS

WEB DEVELOPMENT 10
 SUB-TOPIC 1.2
EVOLUTION, SPECIFICATION AND ESTABLISHMENT DETAILS

INTRODUCTION

The Internet, as we know it today, is a result of years of technological evolution. It has

grown from a small network of academic institutions to a global network that has
fundamentally changed every aspect of our lives.

EVOLUTION OF THE INTERNET

The Internet’s roots can be traced back to the 1960s. The U.S. Department of Defense’s
Advanced Research Projects Agency Network (ARPANET) was the first network to use
packet switching and TCP/IP to send and receive data. This was the foundation of the
Internet.

In the 1970s and 1980s, the Internet was primarily used by academics, scientists, and
the government. However, the public started to use it more widely in the 1990s when
the World Wide Web (WWW) was developed at CERN by Tim Berners-Lee.

The Internet has evolved significantly since its inception. From dial-up connections to
broadband and now to high-speed wireless connections, the Internet has become
faster, more reliable, and more accessible.

WEB DEVELOPMENT 11
SPECIFICATION OF THE INTERNET

The Internet operates based on a suite of protocols known as the Internet Protocol
Suite, also known as TCP/IP. These protocols define the rules for communication over
the Internet.

TCP/IP consists of four layers: the Network Interface Layer, the Internet Layer, the
Transport Layer, and the Application Layer. Each layer has a specific function and
contains various protocols.

ESTABLISHMENT OF THE INTERNET

The establishment of the Internet involved many organizations and individuals. The U.S.
government played a significant role in funding and developing early networks like
ARPANET.

Various organizations have been established to oversee and standardize what happens
on the Internet and to expand its usability and accessibility. These include the Internet
Engineering Task Force (IETF), the Internet Corporation for Assigned Names and
Numbers (ICANN), and the World Wide Web Consortium (W3C).

KEY TAKEAWAYS

1. The Internet has evolved from a small network of academic and government
institutions to a global network that impacts all aspects of our lives.
2. The Internet operates based on the Internet Protocol Suite, also known as TCP/IP.

WEB DEVELOPMENT 12
 3. The establishment of the Internet was a collective effort involving many
organizations and individuals, with significant involvement from the U.S.
government.
4. Various organizations oversee the operation and standardization of the Internet,
including the IETF, ICANN, and W3C.

WEB DEVELOPMENT 13
 Internet Basics

WEB DEVELOPMENT 14
 SUB-TOPIC 1.3
INTRANETS, EXTRANETS, AND INTERNET APPLICATIONS

INTRODUCTION

In this lecture, we will explore the concepts of intranets and extranets, and delve into
some fundamental Internet applications such as Email, Telnet, and FTP.

INTRANETS

An intranet is a private network that is contained within an enterprise. It may consist of

many interlinked local area networks (LANs) and also use leased lines in the wide area
network (WAN). Typically, an intranet includes connections through one or more
gateway computers to the external Internet.

Intranets are used to share information within an organization. They are built from the
same concepts and technologies used for the Internet, such as client-server computing
and the Internet Protocol Suite (TCP/IP).

EXTRANETS

An extranet is a private network that uses Internet technology and the public
telecommunication system to securely share part of a business’s information or
operations with suppliers, vendors, partners, customers, or other businesses. An
extranet can be viewed as part of a company’s intranet that is extended to users
outside the company.

INTERNET APPLICATIONS

EMAIL

Email, or electronic mail, is one of the most widely used services on the Internet. It
allows users to send and receive electronic messages over the Internet. These
messages can contain not only text, but also images, attachments, and hyperlinks.

WEB DEVELOPMENT 15
Email operates across the Internet or other computer networks using protocols such as
the Simple Mail Transfer Protocol (SMTP) for sending mail, and the Internet Message
Access Protocol (IMAP) or the Post Office Protocol (POP) for receiving mail.

TELNET

Telnet is a user command and an underlying TCP/IP protocol for accessing remote
computers. Through Telnet, an administrator or another user can access someone
else’s computer remotely. On the Web, HTTP and FTP protocols allow you to request
specific files from remote computers, but not to actually be logged on as a user of that
computer.

FTP

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. FTP is built on a
client-server model architecture using separate control and data connections between
the client and the server.

FTP users may authenticate themselves with a clear-text sign-in protocol, normally in
the form of a username and password, but can connect anonymously if the server is
configured to allow it.

KEY TAKEAWAYS

1. Intranets and extranets use Internet technologies to share information within an

organization and with external entities, respectively.
2. Email is a fundamental Internet application that allows users to send and receive
electronic messages over the Internet.
3. Telnet is a protocol that allows a user to access another user’s computer
remotely.
4. FTP is a protocol used for transferring files between a client and a server on a
computer network.

WEB DEVELOPMENT 16
 INTERNET BASICS

WEB DEVELOPMENT 17
 SUB-TOPIC 1.4
INTERNET APPLICATIONS: EMAIL, TELNET, FTP
The Internet has revolutionized the way we communicate, access information, and do business.
Three of the most used Internet applications are email, telnet, and FTP

EMAIL:
Email (Electronic Mail) is one of the earliest and most widely used Internet applications. It allows
individuals and organizations to exchange messages, files, and other information electronically.
Emails can be sent and received instantly, making it a fast and convenient way to communicate.
Email has replaced traditional mail as the preferred method of communication in many
organizations and has become a critical tool for personal and business communication.

Convenient and fast communication: Email allows individuals and organizations to send and
receive messages, files, and other information instantly, making it a fast and convenient way to
communicate.

Increased efficiency: Email has replaced traditional mail as the preferred method of
communication in many organizations and has become a critical tool for personal and business
communication. It helps streamline communication and increase efficiency.

Cost-effective: Email is a low-cost way of communicating, as it eliminates the need for physical
mail, postage, and delivery fees.

TELNET:
Telnet is a protocol that allows users to connect to and use remote computers over the Internet. It
allows users to access a remote computer as if they were using it directly, giving them access to all
the resources and information stored on that computer. Telnet is commonly used by system
administrators and developers to access and manage remote servers, but it can also be used by
end-users to access remote computers for a variety of purposes.

Remote access to computers: Telnet allows users to connect to and use remote computers over
the Internet, giving them access to all the resources and information stored on that computer.

Increased efficiency: Telnet is commonly used by system administrators and developers to access
and manage remote servers, but it can also be used by end-users to access remote computers for
a variety of purposes. This allows users to work remotely and can increase efficiency.

Increased collaboration: Telnet enables remote collaboration between individuals and

organizations, as users can work on shared projects and access shared resources from remote
locations.

WEB DEVELOPMENT 18
FTP:
FTP (File Transfer Protocol) is a standard network protocol used to transfer files from one host to
another over a TCP-based network, such as the Internet. FTP is widely used by individuals and
organizations to transfer large files or groups of files, such as software updates, multimedia files,
or large documents. FTP is a convenient and efficient way to transfer large amounts of data, as it
allows users to upload or download multiple files simultaneously.

Transfer of large files: FTP is widely used by individuals and organizations to transfer large files or
groups of files, such as software updates, multimedia files, or large documents.

Increased efficiency: FTP is a convenient and efficient way to transfer large amounts of data, as it
allows users to upload or download multiple files simultaneously.

Secure file transfers: FTP uses secure connections and authentication methods to ensure the
confidentiality and security of transferred files.

In conclusion, email, Telnet, and FTP are three of the most used Internet applications. Email is
used for communication, Telnet is used for remote access to computers, and FTP is used for
transferring files over the Internet. Internet applications that offer numerous benefits, including
convenient and fast communication, increased efficiency, cost-effectiveness, remote access to
computers, increased collaboration, and secure file transfers. These applications have become
critical tools for individuals and organizations, providing fast, convenient, and efficient access to
information and resources.

KEY TAKEAWAY

1. Email: Email is one of the earliest and most widely used Internet applications. It allows for
instant communication, making it a fast and convenient way to exchange messages, files,
and other information electronically.

2. Telnet: Telnet is a protocol that allows users to connect to and use remote computers over
the Internet. It is commonly used by system administrators and developers to access and
manage remote servers, but it can also be used by end-users for a variety of purposes.

3. FTP: FTP (File Transfer Protocol) is a standard network protocol used to transfer files from
one host to another over a TCP-based network. It is widely used to transfer large files or
groups of files, such as software updates, multimedia files, or large documents.

4. Efficiency and Collaboration: These Internet applications increase efficiency by allowing

for remote access to computers, enabling users to work remotely, and facilitating the
transfer of large amounts of data. They also enable remote collaboration between
individuals and organizations.

WEB DEVELOPMENT 19
 5. Secure Transfers: FTP uses secure connections and authentication methods to ensure the
confidentiality and security of transferred files, making these Internet applications critical
tools for individuals and organizations.

WEB DEVELOPMENT 20
 World Wide Web

WEB DEVELOPMENT 21
 SUB-TOPIC 2.1
CONCEPT OF WWW, WEB PAGE: STATIC AND DYNAMIC

The World Wide Web (WWW), often referred to as the “web”, is an information system where
documents and other web resources are identified by Uniform Resource Locators (URLs),
interlinked by hypertext links, and can be accessed via the internet. English scientist Tim Berners-
Lee invented the World Wide Web in 1989. He wrote the first web browser in 1990 while
employed at CERN near Geneva, Switzerland.

The WWW is a space in which you can access information over the medium of the internet. It is an
information-sharing model that is built on top of the internet. The WWW uses the HTTP protocol,
only one of the languages spoken over the internet, to transmit data. Web information is accessed
via hypertext. Web pages are not stored in any central location; they are hosted by a web server at
the location the web designer chooses.

WEB PAGE: STATIC AND DYNAMIC

Web pages can be classified into two broad categories: static and dynamic web pages.

STATIC WEB PAGES

A static web page is a web page that is delivered to the user’s web browser exactly as stored. They
are created using HTML code and represent fixed content, displaying the same information to
every visitor. Static web pages are the most basic type of web page and are the easiest to create.
They do not require any web programming or database design. A static web page can be built by
simply creating a few HTML pages and publishing them to a web server.

DYNAMIC WEB PAGES

A dynamic web page is a web page whose construction is controlled by an application server
processing server-side scripts. The resulting HTML which is sent to the client’s web browser is
changed by the server-side script, so it’s not fixed, as in the case of a static web page. Dynamic

WEB DEVELOPMENT 22
web pages are capable of producing different content for different visitors from the same source
code file. The web page can be changed with the reader that opens the page, character of
consumer interaction, or day time.

KEY TAKEAWAYS:

1. The WWW is an information system where documents are identified by URLs.

2. It was invented in 1989 by Tim Berners-Lee.
3. The first web browser was written in 1990.
4. The WWW uses the HTTP protocol to transmit data.
5. Web information is accessed via hypertext.
6. Static web pages are delivered to the user’s browser as stored.
7. They are created using HTML code.
8. They represent fixed content.
9. They do not require any web programming or database design.
10. Dynamic web pages are controlled by an application server processing server-side scripts.
11. The HTML sent to the client’s browser can be changed by the server-side script.
12. Dynamic web pages are capable of producing different content for different visitors from
the same source code file.

WEB DEVELOPMENT 23
 World Wide Web

WEB DEVELOPMENT 24
 SUB-TOPIC 2.2

ACTIVE SCRIPTING LANGUAGES: SERVER SIDE AND CLIENT SIDE

A script is a set of instructions either to the web browser or to a server. Scripts provide changes to
the web page.

TWO TYPES OF SCRIPTING

 Server-side scripting
 Client-side scripting

The scripts may be created in two ways: on the client side or on the server side, where the server-
side scripts are processed on a server. In contrast, client-side scripting needs browsers to execute
scripts on the client system but doesn't connect with the server executing the client-side scripts.

Client-side scripting: Client-side scripting refers to the practice of using scripting languages to add
dynamic functionality to web pages directly in the user's web browser. Unlike server-side scripting,
which is executed on the server and generates HTML pages, client-side scripting executes directly
in the user's browser, allowing for real-time interaction and updates to web pages without having
to refresh the entire page.

SERVER-SIDE SCRIPTING LANGUAGES

Server-side scripting languages are used to create scripts that are executed on the server side.
These scripts generate dynamic content on the web server and send it to the client’s web browser.
Examples of server-side scripting languages include PHP, Python, Ruby, and Node.js.

PHP

PHP (Hypertext Preprocessor) is a popular server-side scripting language designed specifically for
web development. It can be embedded within HTML code, and it has strong support for a wide
range of databases.

PYTHON

WEB DEVELOPMENT 25
Python is a high-level, interpreted programming language that is widely used in web development.
With frameworks like Django and Flask, Python can be used to build robust and scalable web
applications.

RUBY

Ruby, with the Ruby on Rails framework, is another powerful server-side scripting language. It
follows the MVC (Model-View-Controller) architecture, making it easy to manage application
development.

NODE.JS

Node.js is not a language, but a runtime that allows JavaScript to be run on the server side. With
its non-blocking I/O model, Node.js is efficient and lightweight, perfect for data-intensive real-time
applications.

CLIENT-SIDE SCRIPTING LANGUAGES:

 JavaScript
 HTML5
 CSS3
 TypeScript
 Dart
 ActionScript

JAVASCRIPT

JavaScript is the backbone of client-side scripting. It allows for interactive elements on web pages,
such as form validation, animation, and AJAX calls. With the advent of libraries and frameworks
like jQuery, AngularJS, React, and Vue.js, JavaScript has become even more powerful and versatile.

There are several popular client-side scripting languages, but the most commonly used is
JavaScript. JavaScript allows developers to create interactive web pages by adding animations,
dynamic content, and other effects. For example, JavaScript can be used to create drop-down

WEB DEVELOPMENT 26
menus, pop-up windows, and sliders. It can also be used to validate form input, creating a better
user experience by catching errors before the user submits the form.

TYPESCRIPT

TypeScript is a statically typed superset of JavaScript that can be used to create large and complex
applications. TypeScript allows for better code organization and maintenance, making it a popular
choice for large projects. It also has better support for object-oriented programming, making it
easier to create reusable components.

DART

another client-side scripting language that is becoming more popular, especially in the mobile app
development community. Dart is designed to be easy to learn, read, and write, making it a great
choice for new developers. Dart is also capable of running on multiple platforms, including the
web, mobile, and desktop.

ACTIONSCRIPT

is a client-side scripting language that was developed by Adobe Systems. It is commonly used to
create animations and interactive content in Flash, but it is also used for creating desktop
applications, mobile games, and other interactive content.

DIFFERENCE BETWEEN CLIENT-SIDE AND SERVER-SIDE SCRIPTING

Execution Environment: Client-side scripting runs on the client's browser while server-side
scripting runs on the server.

Performance: Client-side scripting can be faster due to the client's resources and proximity to the
user, while server-side scripting can be slower due to the server's limited resources and the time
required for data transfer.

WEB DEVELOPMENT 27
Security: Client-side scripting is less secure as the code can be viewed and altered by the user,
while server-side scripting is more secure as the code is hidden from the user and runs on a secure
server.

Access to Data: client-side scripting has limited access to data as it cannot access the server
directly, while server-side scripting has full access to the server and can retrieve and manipulate
data from a database.

Complexity: Client-side scripting is often simpler and easier to write, while server-side scripting
can be more complex due to the need to handle data processing and storage.

Code Reusability: Client-side scripting is less reusable as it cannot be shared across multiple pages,
while server-side scripting is more reusable as it can be shared across multiple pages and
applications.

Debugging: Client-side scripting can be easier to debug as errors are visible in the browser, while
server-side scripting can be harder to debug as errors are not visible to the user and require access
to the server logs.

Compatibility: Client-side scripting may have compatibility issues with different browsers, while
server-side scripting is compatible with all browsers as it generates the same content for all users.

User Experience: Client-side scripting can improve the user experience by providing dynamic
effects and animations, while server-side scripting can impact the user experience by slowing
down page loading times.

Development Skills: Client-side scripting requires a different set of skills and knowledge than
server-side scripting, as they use different programming languages and technologies.

ADVANTAGES OF SERVER-SIDE SCRIPTING:

WEB DEVELOPMENT 28
Dynamic Content Generation: Server-side scripting enables the creation of dynamic content,
which can change based on user input or other factors, such as the time of day or the current
weather.

Improved Security: Server-side scripts run on the server and are not visible to the client, which
provides an additional layer of security. Sensitive information, such as passwords and credit card
numbers, can be stored on the server and protected from theft or misuse.

Scalability: Server-side scripting allows websites to handle a large amount of traffic, as the server
can process multiple requests at the same time. This makes server-side scripting well-suited for
high-traffic websites and web applications.

Database Integration: Server-side scripting makes it easy to integrate a website with a database,
allowing the website to store and retrieve data as needed.

Back-end Processing: Server-side scripting allows websites to perform complex calculations and
processing on the server, which can be more efficient than performing the same calculations on
the client.

ADVANTAGES OF CLIENT-SIDE SCRIPTING:

Faster Page Load Time: Client-side scripts run on the client's browser, which can make the website
faster as the client does not have to wait for the server to process the request.

Improved User Experience: Client-side scripting can make a website more interactive and
responsive, providing a better user experience. For example, client-side scripts can be used to
validate form inputs, update the page content, or create animations.

Cross-Platform Compatibility: Client-side scripts run on the client's browser, which means that
they are compatible with multiple platforms and devices, such as desktop computers, laptops,
tablets, and smartphones.

WEB DEVELOPMENT 29
Offline Support: Client-side scripts can run even when the user is offline, which can be useful for
web applications that need to work in areas with limited or no internet access.

Cost-effective: Client-side scripting can reduce the cost of creating and maintaining a website, as
the server resources required for processing are reduced. This can be especially beneficial for
small websites or applications with limited traffic.

KEY TAKEAWAY

Here are the key takeaways from the overview of Active Scripting Languages:

1. Active scripting languages are used to make web pages interactive and dynamic. They are
categorized into server-side and client-side scripting languages.

2. Server-side scripting languages like PHP, Python, Ruby, and Node.js are executed on the
web server. They generate dynamic content that is sent to the client’s web browser.

3. Client-side scripting languages are executed on the user’s web browser. JavaScript is the
most common client-side scripting language, making web pages more interactive and
responsive.

4. PHP is designed specifically for web development and can be embedded within HTML code.

5. Python is used in web development with frameworks like Django and Flask to build robust
and scalable web applications.

6. Ruby, with the Ruby on Rails framework, follows the MVC (Model-View-Controller)
architecture.

7. Node.js is a runtime that allows JavaScript to be run on the server side, perfect for data-
intensive real-time applications.

8. JavaScript allows for interactive elements on web pages, such as form validation,
animation, and AJAX calls. It has become even more powerful with libraries and
frameworks like jQuery, AngularJS, React, and Vue.js.

WEB DEVELOPMENT 30
WEB DEVELOPMENT 31
 World Wide Web

SUB-TOPIC 2.3

WEB: DESIGNING, DEVELOPMENT AND PUBLISHING

Web Designing involves creating the visual and graphical elements of a website, such as a layout,
colour scheme, typography, images, and icons. It also involves creating the overall structure and
organization of the website, including the navigation, header, and footer. Web designers use tools
such as Adobe Photoshop and Illustrator to create website mock-ups and prototypes. They also
consider factors such as user experience (UX), accessibility, and responsive design to ensure that
the website is usable and accessible on different devices and screen sizes.

Web development is the process of coding and building a website, turning the designs created
by web designers into functional websites. Web developers use programming languages such as
HTML, CSS, and JavaScript to create the website's front-end (the part of the website that the user
interacts with) and back-end (the part of the website that runs on the server and is not visible to
the user). Back-end technologies such as PHP, Ruby on Rails, and Node.js are used to connect the
website to a database, process form submissions, and handle server-side logic. Web developers
also use frameworks and libraries to streamline the development process and build websites
faster and more efficiently.

WEB DEVELOPMENT 32
Web publishing involves making the website available to the public on the internet. This involves
finding a hosting provider, setting up a domain name, and uploading the website's files to the
server. The website can then be accessed by anyone with an internet connection. Web publishers
also consider factors such as website performance, security, and SEO (Search Engine Optimization)
to ensure that the website is accessible, fast, and visible to search engines.

An example of a web development project could be a small business website. A web designer
might create a design for the website, including the layout, colour scheme, and typography. A web
developer would then take the design and build the website using HTML, CSS, and JavaScript for
the front end and PHP for the back end. The website would then be published on the internet
using a hosting provider and a domain name. The web publisher would ensure that the website is
fast, accessible, and secure, and would also optimize the website for search engines to improve its
visibility in search results.

Web designing, development, and publishing are the three essential steps involved in creating a
website.

Web Designing: Web designing refers to the process of creating the visual layout, appearance, and
overall look and feel of a website. The aim of web designing is to create a website that is both
aesthetically pleasing and easy to use.

Web designers use various tools and techniques, such as graphic design software, HTML, CSS, and
JavaScript is used to create the visual elements of a website. They also consider various design
principles, such as color theory, typography, and user experience (UX) design, to create a website
that is both functional and visually appealing.

EXAMPLES OF WEB DESIGNING TOOLS AND TECHNIQUES INCLUDE:

● Graphic design software, such as Adobe Photoshop, to create graphics and images for the
website.
● HTML, CSS, and JavaScript were used to create the structure, layout, and interactive
elements of the website.

WEB DEVELOPMENT 33
 ● Use colour theory to choose colours that are appropriate for the website's brand and
target audience.
● Typography is used to choose fonts that are legible and appropriate for the website's
content.
● UX design is used to create a website that is easy to use and navigate.

Web Development:

Web development refers to the process of creating the functional aspects of a website, such as
the content management system (CMS), database, and other back-end systems.

Web developers use various programming languages, such as PHP, Ruby on Rails, Python, and
JavaScript, to create the functional elements of a website. They also use frameworks, such as
Laravel, Ruby on Rails, and Django, to speed up the development process and ensure that the
website is scalable and secure.

EXAMPLES OF WEB DEVELOPMENT TOOLS AND TECHNIQUES INCLUDE:

● PHP, Ruby on Rails, Python, and JavaScript are used to create the back-end systems of the
website.
● Laravel, Ruby on Rails, and Django to create scalable and secure websites.
● Content management systems (CMS), such as WordPress, are used to manage the content
of the website.
● Databases, such as MySQL and PostgreSQL, to store and retrieve data for the website.
● Version control systems, such as Git, are used to manage the codebase and ensure that
changes are tracked and, if necessary, undone.

Web Publishing:

WEB DEVELOPMENT 34
Web publishing refers to the process of making a website live and accessible to the public. This
involves finding a hosting provider and uploading the website to the server.

Web publishers use various hosting providers, such as Bluehost, HostGator, and Site Ground, to
host their websites. They also use domain registrars, such as GoDaddy, Namecheap, and Network
Solutions, to register the domain name for the website.

EXAMPLES OF WEB PUBLISHING TOOLS AND TECHNIQUES INCLUDE:

● Hosting providers, such as Bluehost, HostGator, and Site Ground, to host the website.
● Domain registrars, such as GoDaddy, Namecheap, and Network Solutions, to register the
domain.
● Name of the website.
● FTP clients, such as FileZilla, to upload the website to the server.
● Control panels, such as cPanel and Plesk, to manage the website and server.
● SSL certificates ensure that the website is secure and that sensitive information, such as
passwords and credit card numbers, is protected.

KEY TAKEAWAY

1. Web Designing: This involves creating the visual layout, appearance, and overall look and
feel of a website. Tools like Adobe Photoshop and Illustrator are used, and factors such as
user experience (UX), accessibility, and responsive design are considered.
2. Web Development: This is the process of coding and building a website, turning the
designs created by web designers into functional websites. It involves using programming
languages such as HTML, CSS, JavaScript, and back-end technologies such as PHP, Ruby on
Rails, and Node.js.
3. Web Publishing: This involves making the website available to the public on the internet. It
includes finding a hosting provider, setting up a domain name, and uploading the website’s
files to the server. Factors such as website performance, security, and SEO (Search Engine
Optimization) are also considered.

WEB DEVELOPMENT 35
 4. Example of a Web Development Project: A small business website could be an example.
The process involves web designing, development, and publishing, ensuring that the
website is fast, accessible, secure, and optimized for search engines.
5. Tools and Techniques: Various tools and techniques are used in web designing and
development, including graphic design software, HTML, CSS, JavaScript, color theory,
typography, and UX design. These help in creating a website that is both functional and
visually appealing.

WEB DEVELOPMENT 36
 World Wide Web

SUB-TOPIC 2.4
HTTP, URL REGISTRATION, BROWSERS, WEB SERVER

HTTP

HTTP, URL, browsers, and web servers are essential concepts for the World Wide Web.

The Internet (or "The Web") is a massively distributed client-server information system, as
depicted in the following diagram.

Figure 1: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 37
Many applications are running concurrently over the Web, such as web browsing and surfing, e-
mail, file transfers, audio and video streaming, and so on. In order for proper communication to
take place between the client and the server, these applications must agree on a specific
application-level protocol such as HTTP, FTP, SMTP, POP, etc.

CLIENTS AND SERVERS

The Web is a client/server application: Web browsers are clients which send requests to Web

servers, which send responses back.

Figure 2: This image needs to be shown in the background of the video.

FETCHING PAGES OVER THE INTERNET: HTTP

WEB DEVELOPMENT 38
Architecturally, the Internet consists of a collection of layers, each one providing services for the
one above it: The Internet Layer gets packets to their destinations; The Transport Layer sends
streams of data; The Application Layer provides high-level services to applications such as Web
browsers.

Figure 3: This image needs to be shown in the background of the video.

HTTP (HYPERTEXT TRANSFER PROTOCOL):

HTTP (Hypertext Transfer Protocol) is perhaps the most popular application protocol used on the
Internet (or Web).

HTTP makes use of TCP to open connections between clients and servers and to pass requests and
responses between them.

WHEN A USER CLICKS A LINK OR TYPES A WEB ADDRESS:

1. A TCP connection is opened between the browser and the server.

2. Then requests and responses are sent back and forth using HTTP

HTTP is a stateless protocol, meaning each request for data is dealt with in isolation; once the
server sends the response, it forgets everything about the original request.

WEB DEVELOPMENT 39
HTTP is an asymmetric request-response client-server protocol, as illustrated. An HTTP client
sends a request message to an HTTP server. The server, in turn, returns a response message. In
other words, HTTP is a pull protocol, where the client pulls information from the server (instead of

the server pushing information down to the client).

Figure 4: This image needs to be shown in the background of the video.

HTTP is a protocol used for transferring data over the internet. It is the foundation of data
communication for the World Wide Web. HTTP is a request-response protocol, which means that
a client (e.g., a web browser) sends a request to a server, and the server returns a response.

The request and response are both in the form of a message, which includes a header and a body.
The header contains information about the request or response, such as the type of content being
requested or sent, the length of the content, and other metadata. The body contains the actual
content being requested or sent, such as an HTML file or an image.

WEB DEVELOPMENT 40
URL REGISTRATION

URL (UNIFORM RESOURCE LOCATOR):

A URL is a string of characters that identify a specific resource on the internet, such as a web page
or an image. A URL typically consists of the protocol (e.g. HTTP), the domain name (e.g.
www.example.com), the path (e.g. /about), and the query string (e.g.?page=1).

For example, the URL https://www.example.com/about?page=1 identifies the "about" page of

the "www.example.com" website, and the query string "page=1" indicates that the first page of
the "about" section should be displayed.

Figure 5: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 41
 Figure 6: This image needs to be shown in the background of the video.

Figure 7: This image needs to be shown in the background of the video.

A URL (Uniform Resource Locator) is used to uniquely identify a resource over the web. The URL
has the following syntax:

PROTOCOL://HOSTNAME:PORT/PATH-AND-FILE-NAME

There are 4 parts to a URL:

1. Protocol: The application-level protocol used by the client and server, e.g., HTTP, FTP, and
telnet.

2. Hostname: The DNS domain name (e.g., www.test101.com) or IP address (e.g., 192.128.1.2) of
the server.

WEB DEVELOPMENT 42
3. Port: The TCP port number that the server is listening for incoming requests from the clients.

4. Path-and-file-name: The name and location of the requested resource, under the server
document base directory.

For example, in the URL http://www.test101.com/docs/index.html, the communication protocol

is HTTP, and the hostname is www.test101.com. The port number was not specified in the URL
and takes on the default number, which is TCP port 80 for HTTP. The path and file name for the
resource to be located are "/docs/index.html".

Other examples of URLs are:

ftp://www.ftp.org/docs/test.txt

mailto:[email protected]

news:soc.culture.Singapore

telnet://www.test101.com/

THE PROCESS OF REGISTERING A URL, OR A UNIFORM RESOURCE LOCATOR,

TYPICALLY INVOLVES THE FOLLOWING STEPS:

Choose a domain name: The first step is to choose a domain name that represents your website
and is memorable and easy to spell.

Check availability: Use a domain name checker to see if the desired domain name is available. If it
is taken, you may have to consider alternative options.

Choose a domain registrar: A domain registrar is a company that manages the reservation of
Internet domain names. Some popular domain registrars include GoDaddy, Namecheap, and
HostGator.

Purchase the domain: Once you have chosen a domain registrar, you can purchase the domain
name for a specified period, usually one to ten years.

WEB DEVELOPMENT 43
Configure DNS: After purchasing the domain, you need to configure the domain name system
(DNS) to point to the IP address of your web server. This is typically done through the domain
registrar's control panel.

Set up a website: Finally, you need to set up a website using a web hosting service and upload
your website files to the server.

An example of a URL is "https://www.example.com". In this URL, "https" is the protocol used for
communication, "www" is the subdomain, "example" is the domain name, and ".com" is the top-
level domain (TLD).

HERE ARE SOME EXAMPLES OF URLS WITH THE DIFFERENT PARTS OF THE URL
EXPLAINED:

1. "https://www.google.com":
 Protocol: https (HyperText Transfer Protocol Secure)
 Subdomain: www (World Wide Web)
 Domain name: google
 Top-level domain: .com (Commercial)

2. "ftp://ftp.example.org":
 Protocol: ftp (File Transfer Protocol)
 Subdomain: ftp
 Domain name: example
 Top-level domain: .org (Organization)

3. "http://mail.example.co.uk":
 Protocol: http (HyperText Transfer Protocol)
 Subdomain: mail
 Domain name: example

WEB DEVELOPMENT 44
  Top-level domain: .co.uk (Commercial United Kingdom)

4. "https://maps.google.com":
 Protocol: https (HyperText Transfer Protocol Secure)
 Subdomain: maps
 Domain name: google
 Top-level domain: .com (Commercial)

BROWSERS:

Figure 8: This image needs to be shown in the background of the video.

A browser is a software application used for accessing and displaying websites on the internet.
Browsers interpret HTML, CSS, and JavaScript code and display the content on the screen. The
most commonly used browsers include Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple
Safari.

Browsers also have features such as bookmarks, tabs, and history, which make it easier to
navigate the web. They also have built-in security features, such as SSL encryption, that protect
the user's information and prevent malicious websites from accessing sensitive data.

Web browsers are used for accessing and viewing the Internet. They are the primary tool for
accessing websites, online services, and other resources available on the World Wide Web.

WEB DEVELOPMENT 45
SOME COMMON USES OF WEB BROWSERS INCLUDE:

 Browsing the web: This is the main purpose of a web browser, which allows users to access
and view websites, as well as search for and navigate to specific pages.
 Email: Many web browsers have built-in email clients or can access web-based email
services like Gmail and Yahoo Mail.
 Online shopping: Many people use web browsers to shop online, search for products, and
make purchases.
 Social media: Browsers are used to access social media platforms such as Facebook,
Twitter, and Instagram.
 Online banking: Many banks have online portals that can be accessed through web
browsers for tasks like checking account balances, making payments, and managing
accounts.
 News and entertainment: Web browsers are also used to access online news sources,
streaming services for movies and TV shows, and other forms of online entertainment.
 Research and education: Students, researchers, and professionals use web browsers to
access academic journals, research databases, and educational resources.
 Cloud computing: Many web browsers are also used to access cloud-based services like
Google Drive, Dropbox, and Microsoft OneDrive.

HERE ARE SOME EXAMPLES OF WEB BROWSERS, ALONG WITH BRIEF EXPLANATIONS:

 Google Chrome: A fast, secure, and user-friendly browser developed by Google.

 Mozilla Firefox: An open-source browser that prioritizes privacy and security.
 Microsoft Edge: A browser developed by Microsoft, previously known as Internet Explorer.
 Apple Safari: A browser that comes pre-installed on Apple devices and is known for its
speed and simplicity.
 Opera: A browser that combines a sleek design with advanced features such as a built-in
VPN and battery saver.

WEB DEVELOPMENT 46
  Brave: A privacy-focused browser that blocks trackers and ads by default.
 UC Browser: A browser that is popular in India and other countries for its data
compression and fast browsing speeds.
 Vivaldi: A browser designed for power users, with features such as tab stacking and split-
screen browsing.
 Tor Browser: A browser that allows for anonymous browsing by routing traffic through a
network of servers.
 Waterfox: A browser based on Mozilla Firefox, designed for privacy and performance.
 Konqueror: A browser that is the default in some Linux distributions and is known for its
integration with the KDE desktop environment.
 Pale Moon: A browser that is based on Firefox and optimized for speed and efficiency.
 Maxthon: A browser that is popular in China and known for its cloud-based features and
customization options.
 Dragon: A browser that uses voice recognition to allow hands-free browsing.

WEB SERVERS:

A web server is a software application that serves web pages and other content to clients (e.g.,
web browsers) over the internet. When a client requests a web page, the web server retrieves the
requested content and sends it to the client in the form of a response.

There are several types of web servers, including Apache, Nginx, and IIS. Each type of web server
has its own strengths and weaknesses, and the choice of web server depends on the specific
needs of the website.

EXAMPLES OF WEB SERVER USAGE AND BENEFITS INCLUDE:

Apache: Apache is one of the most popular web servers and is widely used for its stability,
compatibility, and security. It can be used to host dynamic websites, such as blogs and e-

WEB DEVELOPMENT 47
commerce sites, and is compatible with a wide range of programming languages, including PHP,
Python, and Ruby.

Nginx: Nginx is a high-performance web server that is designed for handling high-traffic websites.
It is often used for its ability to handle a large number of connections, serve static files quickly, and
proxy requests to other servers.

IIS: IIS (Internet Information Services) is a web server developed by Microsoft and included with
the Windows operating system. It is often used for hosting ASP.NET websites and for integrating
with other Microsoft technologies, such as Active Directory and Exchange.

The main use of a web server is to provide web pages to clients when requested. When a client's
browser requests a web page, the web server retrieves the page and sends it back to the client's
browser, which then displays it. Web servers are also used to handle requests for dynamic content,
such as database queries, and to manage security and authentication for websites.

For example, when a user visits an e-commerce website, they are making a request to the web
server. The web server retrieves the necessary data from the database and generates the HTML,
CSS, and JavaScript needed to display the web page. The web server then sends this content back
to the user's browser, which then displays the web page to the user.

In addition to serving web pages, web servers can also be used for a variety of other tasks, such as
email hosting, file sharing, and online applications. They are a crucial component of the Internet
and are used to host billions of websites around the world.

For example, an email hosting service may use a web server to provide access to email accounts
through a web interface. The web server retrieves the necessary email data from the mail server
and generates the HTML needed to display the email to the user. The web server then sends this
content back to the user's browser, which displays the email to the user.

WEB DEVELOPMENT 48
In conclusion, web servers play a critical role in delivering web pages and other content to clients
over the Internet. They are versatile, flexible, and scalable, making them ideal for a wide range of
uses, from small personal blogs to large-scale websites and applications.

The main use of a web server is to provide web pages to clients when requested. When a client's
browser requests a web page, the web server retrieves the page and sends it back to the client's
browser, which then displays it. Web servers are also used to handle requests for dynamic content,
such as database queries, and to manage security and authentication for websites.

For example, when a user visits an e-commerce website, they are making a request to the web
server. The web server retrieves the necessary data from the database and generates the HTML,
CSS, and JavaScript needed to display the web page. The web server then sends this content back
to the user's browser, which then displays the web page to the user.

In addition to serving web pages, web servers can also be used for a variety of other tasks, such as
email hosting, file sharing, and online applications. They are a crucial component of the Internet
and are used to host billions of websites around the world.

For example, an email hosting service may use a web server to provide access to email accounts
through a web interface. The web server retrieves the necessary email data from the mail server
and generates the HTML needed to display the email to the user. The web server then sends this
content back to the user's browser, which displays the email to the user.

KEY TAKEAWAY

1. HTTP (Hypertext Transfer Protocol):

o HTTP is the foundation of data communication on the World Wide Web.

o It is a protocol used for transmitting hypertext requests and information between

servers and browsers.

WEB DEVELOPMENT 49
 o HTTP is stateless, meaning that each command is executed independently, without
any knowledge of the commands that came before it.

2. URL Registration:

o URL registration is the process of registering a domain name, which identifies one
or more IP addresses with a name that is easier to remember and use in URLs.

o It is an important step in setting up your online presence.

o The domain name needs to be unique and represent your business or brand.

3. Web Browsers:

o Web browsers are software applications used to access the internet.

o They interpret HTML, CSS, and JavaScript to render web pages for users.

o Popular web browsers include Google Chrome, Mozilla Firefox, Safari, and
Microsoft Edge.

o Browsers have various keyboard shortcuts that work across all platforms.

4. Web Servers:

o A web server is a system that delivers content or services to end users over the
internet.

o It includes a physical server, server operating system (OS), and software used to
facilitate HTTP communication.

o Understanding web server configuration and security is crucial for hosting a secure
and reliable web application.

WEB DEVELOPMENT 50
 INTRODUCTION TO HTML5

WEB DEVELOPMENT 51
 SUB-TOPIC 3.1
INTRODUCTION TO HTML5 AND BASIC BLOCK OF HTML5

HTML5

It is the latest version of Hypertext Markup Language, the code that describes web pages. It’s
actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS),
which take care of presentation; and JavaScript, which makes things happen.

For example, the new sectioning elements in HTML5, such as <header>, <nav>, <main>, <article>,
<aside>, and <footer>, make it easier to define different parts of a web page. This makes it easier
to apply styles to specific sections of a page and improves the overall organization of the content.

Another important feature of HTML5 is its improved multimedia support. HTML5 provides built-in
support for multimedia elements such as audio and video, which makes it easier to embed rich
media into web pages without the need for additional plugins. The new multimedia elements in
HTML5 include <audio> and <video>, which can be used to embed audio and video content
directly into a web page.

HOW TO WRITE AND EXECUTE CODE OF HTML

We can use any text editor of our choice. I'm using Microsoft's VS Code because it's lightweight
and open-source.

Go to Google and search for "VS Code," then install it. VS Code just makes these things easy.

HERE ARE THE PICTURES PROVIDED FOR DOWNLOADING VS CODE.

WEB DEVELOPMENT 52
Figure 2: This image needs to be shown in the background of the video.

Figure 3: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 53
Front page of VS Code Software.

Figure 4: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 54
 Figure 5: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 55
 Figure 6: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 56
 Figure 7: This image needs to be shown in the background of the video.

THIS IS THE MINIMAL CODE THAT AN HTML DOCUMENT SHOULD HAVE TO MAKE UP A
WEBSITE. AND HERE WE HAVE:

DOCTYPE: The first line of an HTML5 document specifies the type of document using a DOCTYPE
declaration. The DOCTYPE declaration for HTML5 is simple and straightforward.

HTML Element: The HTML element is the root element of an HTML document and contains all
other elements. The HTML element has an opening and closing tag, and all other elements are
nested within the HTML element.

WEB DEVELOPMENT 57
Head Element: The head element contains information about the document, such as the title,
meta information, and links to external resources such as CSS and JavaScript files. The head
element is placed within the HTML element and has an opening and closing tag.

Title Element: The title element is placed within the head element and specifies the title of the
document, which is displayed in the browser's title bar or tab.

Body Element: The body element contains the main content of the document and is placed within
the HTML element Body Element:, after the head element.

Headings: Headings are used to defining various levels of headings and subheadings in an HTML
document. There are six levels of headings in HTML, ranging from H1 (the largest) to H6 (the
smallest).

WHAT’S NEW IN HTML5?

HTML5 introduced a number of new elements and attributes that reflect typical usage on modern
websites. Some of them are:

1. Semantic Elements: These are elements with a meaning, like <article>, <footer>, <header>,
<nav>, and <section>.

2. Form Enhancements: HTML5 offers new form elements, like calendar, date, time, email, url,
search.

3. New Graphic Elements: <svg> and <canvas> for 2D drawing.

4. Multimedia Elements: <audio> and <video>.

BASIC BLOCK OF HTML5

An HTML5 document is composed of a series of blocks known as elements. Here’s a basic HTML5
block:

<!DOCTYPE html>

WEB DEVELOPMENT 58
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

1. <!DOCTYPE html>: This is the document type declaration and is used to tell the browser that
this is an HTML5 document.
2. <html>: This is the root element of an HTML page.
3. <head>: This contains meta-information about the HTML page, such as its title.
4. <title>: This specifies a title for the HTML page, which is shown in the browser’s title bar or
tab.
5. <body>: This contains the content of the HTML page, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
6. <h1>: This defines a large heading. HTML5 offers 6 levels of headings: <h1> to <h6>.
7. <p>: This defines a paragraph.

KEY TAKEAWAYS

1. HTML5 is the latest version of Hypertext Markup Language, the code that describes web
pages. It’s actually three kinds of code: HTML, which provides the structure; Cascading
Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things
happen.

2. New Features in HTML5: HTML5 introduced a number of new elements and attributes that
reflect typical usage on modern websites. Some of them are semantic elements like

WEB DEVELOPMENT 59
 <article>, <footer>, <header>, <nav>, and <section>, new form elements, new graphic
elements <svg> and <canvas> for 2D drawing, and multimedia elements <audio> and
<video>.

3. Basic Block of HTML5: An HTML5 document is composed of a series of blocks known as

elements. The basic HTML5 block includes elements like <!DOCTYPE html>, <html>, <head>,
<title>, <body>, <h1>, and <p>.

WEB DEVELOPMENT 60
 Introduction To HTML 5

WEB DEVELOPMENT 61
 SUB-TOPIC 3.2
SETTING UP THE DOCUMENT STRUCTURE

HTML LAYOUT ELEMENTS IN MORE DETAIL

Figure 1: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 62
 Figure 2: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 63
HTML5 has provided semantic elements that define the different parts of a web page. Structure
tags basically control the overall structure of a webpage, and for that purpose, we are using
several tags within <html> files. That allows us to control the page to define which components
basically host which element. For that, we have these semantic elements, as follows:
 header: defines a header for a document or a section.
 nav: defines a set of navigation links.
 section: defines a section in a document.
 article: defines independent, self-contained content.
 aside: defines content aside from the content (like a sidebar).
 footer: defines a footer for a document or a section.

EXAMPLE OF SEMANTIC ELEMENTS.

Figure 3: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 64
HTML provides various elements that can be used to define the layout and structure of a web
page.

HERE ARE SOME OF THE MOST USED HTML LAYOUT ELEMENTS:

 <div>: The <div> element is a generic container for flow content, which does not have any
semantic meaning by itself. It can be used to group elements together and apply styles to
them.

 <header>: The <header> element represents a container for introductory content or a set of
navigational links. It usually contains the site logo, site title, and main navigation.

 <nav>: The <nav> element represents a section of a page that contains navigation links.

 <main>: The <main> element represents the main content of a document, excluding content
that is repeated across a set of documents such as site headers and footers.

 <article>: The <article> element represents a self-contained composition in a document, such

as a blog post, a forum post, or a news story.

 <section>: The <section> element represents a standalone section of a document, such as a

chapter, a tabbed content area, or a set of related content grouped together.

 <aside>: The <aside> element represents a section of a page that contains content that is
tangentially related to the main content, such as pull quotes, definitions, or advertisements.

WEB DEVELOPMENT 65
 <footer>: The <footer> element represents a container for the footer of a document or a
section. It usually contains information about the author, copyright information, and links to
related documents.

These HTML layout elements can be used in combination to create well-structured, accessible, and
semantically rich web pages. It is important to use these elements correctly, so that search
engines, screen readers, and other assistive technologies can understand the content and
structure of a web page.

EXAMPLE OF A LAYOUT THAT WE CAN USE FOR PROVIDING THE STRUCTURE OF A

WEBPAGE.

Figure 4: This image needs to be shown in the background of the video.

EXAMPLE OF LAYOUT THAT WE CAN USE FOR PROVIDING THE STRUCTURE OF A

WEBPAGE.

WEB DEVELOPMENT 66
 Figure 5: This image needs to be shown in the background of the video.

In this example, the <header> element contains the website header, including the navigation
menu and the header text. The <main> element represents the main content of the page and
contains two <article> elements, each representing a self-contained composition. The <aside>
element contains related articles, and the <footer> element contains the page footer with the
copyright information.

This is just one example of how you can use HTML layout elements to structure and layout your
web pages. By using these elements correctly, you can create well-structured, accessible, and
semantically rich web pages that are easier to maintain and understand.

WEB DEVELOPMENT 67
EXAMPLE OF LAYOUT OF WIKIPEDIA WEBSITE.

This is the header area of the website.

This is the navigation area of the website.

Figure 6: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 68
This is Aside area of the website.

Figure 7: This image needs to be shown in the background of the video.

WEB DEVELOPMENT 69
This is the Section Area of the website.

Figure 8: This image needs to be shown in the background of the video.

This is the footer area of the website.

Figure 9: This image needs to be shown in the background of the video.

AN EXAMPLE OF THE LAYOUT OR STRUCTURE OF HTML USING A WEBSITE

WEB DEVELOPMENT 70
 Figure 10: This image needs to be shown in the background of the video.

Footer area of the website.

Figure 11: This image needs to be shown in the background of the video.

KEY TAKEAWAY

1. Document Structure: It refers to the organization of different sections of a web page. It’s
crucial for accessibility and SEO.

WEB DEVELOPMENT 71
 2. Basic Structure of an HTML5 Document: An HTML5 document is composed of a series of
elements like <!DOCTYPE html>, <html>, <head>, <title>, <body>, <header>, <nav>, <main>,
and <footer>.

3. Key Elements: Each element in an HTML5 document has its own purpose and contributes
to the overall structure of a webpage. For example, <header> represents a container for
introductory content or a set of navigational links, <nav> defines a set of navigation links,
<main> specifies the main content of a document, and <footer> defines a footer for a
document or section.

WEB DEVELOPMENT 72
 Designing page using HTML

WEB DEVELOPMENT 73
 SUB-TOPIC 4.1
DESIGNING PAGE USING HTML AND LEARNING OF HTML5 TAGS PART 1

INTRODUCTION OF HTML5 AND TAGS

HTML is the basic building block of your web development journey. Whatever you see in the
browser either on desktop, tablet or mobile all the contents are encapsulated in any HTML
element.

HTML, or HyperText Markup Language, was first released in 1993. The most current version is
HTML 5, which was released on February 4, 2014.

HTML5 is the latest version of HTML with the addition of some new tag and improvement to some
existing ones. HTML is the most basic language which is necessary if you want to learn web
development.

It is used to create core part of web pages like inserting text, images, videos, audios, etc.

HTML IS NOT CONSIDERED A PROGRAMMING LANGUAGE BECAUSE IN HTML:

● There is no way to store value

● There no logic creation
● There is no control system
● There are no ways to repeat a task

HTML is a Markup language is a type of language which is used for the presentation of different
elements like text, image, audio, video, etc on computer screens.

HTML tell web browsers how to structure the contents in a web page.

HTML tags are used by web browsers to interpret and compose text, images, audio, video and
other different material into visual or audible web pages.

HTML tag starts and close with angle brackets (<tag>) and the name of tag lies within the brackets.

WEB DEVELOPMENT 74
Example <p>, <h1>, <img>, etc.

Note: Remember HTML tags are always written in lowercase.

HTML PAGE STRUCTURE

<!DOCTYPE html> Tells the version of HTML.

<html lang="en"> Tells the language of HTML.

<head> Used to contain page html metadata (not visible to user only for browser)

<title>HTML Page Structure</title> Title of HTML page

</head> Ending tag

<body> Hold content of HTML (content visible to user)

</body> Ending tag

</html> Ending tag

NOTE: Every html page must save with .html extension.

WEB DEVELOPMENT 75
4.1 LEARNING OF HTML5 TAGS PART 1

Sr.
Categories of Tag Tag list
No.

Part 1

1 Document Outline <!DOCTYPE>, <html>, <head>, <body>

2 Comments <!------- Comment Text ------ >

3 Page Information <base />, <meta />, <title>, <link />, <style>, <script>

4 Documents Structure <h[1-6]>, <div>, <span>, <p>, <br />, <hr />

Part 2

5 Links <a href=””>, <a href=mailto:>, <a name=”name”>, <a

href=”#name”>

6 Text Markup <strong>, <em>, <blockquote>, <q>, <abbr>, <acronym>,

<address>, <pre>, <dfn>, <code>, <cite>, <del>, <ins>, <sub>,
<sup>, <bdo>

Part 3

7 List <ol>, <ul>, <li>, <dl>, <dt>, <dd>

8 Image and Image map <img />, <map>, <area />

9 Common Character Entities &#34; , &#38; , &#60; , &#62; , &#128; , &#149; , &#153; ,
&#163; , &#160; , &#169;

WEB DEVELOPMENT 76
10 Object <object> <param />

DOCUMENT OUTLINE

<!doctype html> tag: This is the document type tag, which is actually not a tag, but a declaration
of the version of HTML that is used. It is to help the browser understand the version and type of
web page, without which the browser would not be able to even recognize the webpage. The
document type tag does not have an end tag. is a declaration that appears at the beginning of an
HTML document, before the <html> tag, and it tells the web browser which version of HTML the
document is written in.

The <!doctype html> tag: declaration is used in HTML5 to indicate that the document is written in
the latest version of HTML, which is HTML5. This declaration is optional, but it's good practice to
include it at the beginning of your HTML document to ensure that the web browser renders the
page correctly.

<!doctype html> tag: declaration is the first line of the document and it indicates to the web
browser that this is an HTML5 document. This helps to ensure that the page is rendered correctly
and that any new features or elements of HTML5 are supported by the browser.

<html> tag: The <html> tag is the root element of an HTML document. It defines the beginning
and end of an HTML document and contains other nested elements such as the <head> and
<body> tags. Everything that is visible on a webpage is contained within the <html> tag.

<head> tag: As the name states, the head tag is mainly responsible for the functioning of the body.
The head tag includes all the script and style elements, and must include a title for the document

WEB DEVELOPMENT 77
The <head> tag is used to contain metadata about the document, such as the document title,
stylesheets, scripts, and other data that isn't displayed on the webpage. The metadata contained
within the <head> tag is important for search engines and for formatting the page.

<body> tag: The <body> tag is used to contain the main content of the webpage, such as text,
images, videos, and other elements that are visible to the user. The body tag displays all the
content of an HTML document, such as text, hyperlinks, images, tables, lists, etc. This is where the
actual content of the webpage is located, and it's what the user sees when they view the page in a
web browser.

Here's an example of how these tags might be used in a basic HTML document:

COMMENTS

The comment tag <!-----comment text--- > is used to insert comments in the source code.
Comments are not displayed in the browsers. but they can be viewed in the HTML source code. In
this way, comments are a valuable tool for developers who want to document their code or make
notes for future reference.

WEB DEVELOPMENT 78
Here are some examples of how comments can be used:

● Documenting code
● Reminders:
● Testing
● Debugging

Comments can be used as reminders for developers working on a project. For example, a
comment might remind a developer to fix a bug or add a feature at a later date.

Comments can be used to temporarily disable code for testing purposes. For example, if a
developer wants to test the behavior of a specific section of code, they can comment out the rest
of the code to isolate the section they want to test.

Comments can be used to help debug code. For example, a developer might add comments to
track the values of variables or to identify where an error is occurring.

WEB DEVELOPMENT 79
PAGE INFORMATION

<base />, <meta />,<title>, <link />, <style>, <script>

<base />

<base> tag: The <base> tag is used to set the base URL for all relative URLs in a document. This tag
is typically placed in the <head> section of an HTML document.

The <base> tag specifies the base URL and/or target for all relative URLs in a document.

The <base> tag must have either an href or a target attribute present, or both.

Attribute Value Description

href URL Specifies the base URL for all relative URLs in the page

target _blank Specifies the default target for all hyperlinks and forms in the
page
_parent

_self

_top

There can only be one single <base> element in a document, and it must be inside the <head>
element.

The HTML base tag is used to specify a base URI, or URL, for relative links. This URL will be the base
URL for every link on the page and will be prefixed before each of them. For example, if the URL
specified by the base tag is “www.xyz.com” and then every other URL on the page will be prefixed
by, “www.xyz.com/”.

WEB DEVELOPMENT 80
Important Points:

● The base tag must be defined between the head tags.

● There can be a maximum of only 1 base tag in a page.

Here's an example of how to use the <base> tag

Notice that we have only specified a relative address for the image.

Since we have specified a base URL in the head section, the browser will look for the image at
“E:\PROJECT HTML\IMAGES”.

That is in the below program we have specified a base URL “E:\PROJECT HTML\IMAGES” for all the
links and when we are referring to the image at URL “OIP.jpg, OIP1.jpg” then the browser is
actually rendering the image from “E:\PROJECT HTML\IMAGES /OIP.jpg”.

Here you can see the images path and location.

WEB DEVELOPMENT 81
Here's an example of how to use the <base> tag

WEB DEVELOPMENT 82
<meta> tag

<meta> tag: The <meta> tag is used to provide metadata about an HTML document. This
metadata can include information such as the document's author, description, and keywords.

The <meta> tag is typically placed in the <head> section of an HTML document.

Here's an example of how to use the <meta> tag:

In this example, the <meta> tag is used to provide metadata about the document. The charset
attribute specifies the character encoding of the document, while the name and content
attributes are used to provide information about the author, description, and keywords of the
document.

WEB DEVELOPMENT 83
<title>

<title> tag: The <title> tag is used to specify the title of an HTML document.

The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The text within the <title> tag is typically displayed in the title bar of the web browser and in
search engine results.

The <title> tag is typically placed in the <head> section of an HTML document.

Here's an example of how to use the <title> tag:

In this example, the <title> tag is used to specify the title of the HTML document as "Welcome to
PARUL UNIVERSITY". This text will be displayed in the title bar of the web browser and in search
engine results.

WEB DEVELOPMENT 84
<link>

<link> tag: The <link> tag is used to link to external resources such as stylesheets, fonts, and icons.

The <link> tag defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets or to add a favicon to your
website.

The <link> tag is typically placed in the <head> section of an HTML document.

The <link> element is an empty element, it contains attributes only.

Here's an example of how to use the <link> tag:

In this example, the <link> tag is used to link to an external stylesheet. Rel is the attribute we can
use with link tag. It is used to specify the relationship between the current and the linked
document.

WEB DEVELOPMENT 85
<script>

<script> tag: The <script> tag is used to define JavaScript code within an HTML document.
The code defined within the <script> tag can be used to manipulate the HTML document or
interact with the user.

The <script> tag can be placed in the <head> or <body> section of an HTML document.
In this example, the <script> tag is used to define a function called display(). When the user clicks
the "Click me" button in the <body> section of the document, the display() function is called and
an alert box is displayed with the message " SCRIPT INCLUDED IN BODY TAG".

Here's an example of how to use the <script> tag

After clicking on button

WEB DEVELOPMENT 86
We can also write <script> tag in body tag

After clicking on button

WEB DEVELOPMENT 87
<style>

<style> tag: The <style> tag is used to define CSS styles within an HTML document.

The styles defined within the <style> tag can be applied to any HTML element on the page.

The <style> tag is typically placed in the <head> section of an HTML document.

Each HTML5 document can multiple <style> tags.

Here's an example of how to use the <style> tag:

WEB DEVELOPMENT 88
In this example, the <style> tag is used to define a style for the h1 and p element. The color
property is set to red and blue respectively. Which means that the text within the h1 and p
element will be displayed in red and blue respectively.

DOCUMENTS STRUCTURE

<p>

In HTML, the paragraph tag is represented by the <p> element and is used to define a paragraph
of text. The <p> element is one of the most commonly used HTML elements and is used to create
blocks of text on a web page.

The content of a paragraph can include text, images, links, and other HTML elements.

The paragraph tag is commonly used to separate content into distinct blocks of text, making it
easier to read and understand.

WEB DEVELOPMENT 89
Each paragraph is enclosed within its own set of <p> tags.

<h[1-6]>

In HTML, there are six levels of headings that can be used to define the hierarchy of content on a
web page. The headings are represented by the h1, h2, h3, h4, h5, and h6 elements.

Here's an overview of each heading level:

h1: The top-level heading, typically used for the title of the page or a major section of content.
There should only be one h1 element per page.

h2: The second-level heading, used for major sections of content within the page.

h3: The third-level heading, used for sub-sections within the major sections of the page.

h4: The fourth-level heading, used for sub-sections within h3 sections.

h5: The fifth-level heading, used for sub-sections within h4 sections.

h6: The sixth-level heading, used for sub-sections within h5 sections.

In this example, each heading level is used to create a hierarchy of content on the page, with h1
being the top-level heading and h6 being the lowest-level heading with Paragraph tag.

WEB DEVELOPMENT 90
<div>

<div> tag: The <div> element is a block-level container used to group and style other HTML
elements. It does not have any specific semantic meaning and can be used to group together any
content that needs to be styled together.

<span>

The <span> element is an inline container used to group and style other HTML elements. It is
similar to the <div> tag, but is used for smaller sections of content within a block of text.

Here's an example of div tag and span tag:

In this example, the <span> tag is used to group together a section of text within a larger
paragraph, which can then be styled with CSS.

<div> tag is used to group together a heading and a paragraph of text, which can then be styled
together using CSS.

WEB DEVELOPMENT 91
<br />

<br> tag: The <br> tag is used to insert a line break within a block of text. It is a self-closing tag, so
it doesn't require a closing tag.

<hr />

<hr> tag: The <hr> tag is used to create a horizontal line or divider between content on a web
page. It is a self-closing tag, so it doesn't require a closing tag.

Both <br> and <hr> tags are simple and widely used HTML tags, often used for formatting content
in a web page.

Here's an example of hr and br tag

WEB DEVELOPMENT 92
KEY TAKEAWAY

1. HTML5: HTML5 is the latest version of HTML and is the basic building block of web
development. It is used to create the core part of web pages like inserting text, images,
videos, audios, etc.

2. HTML Tags: HTML tags are used by web browsers to interpret and compose text, images,
audio, video and other different material into visual or audible web pages. HTML tags
always start and end with angle brackets.

3. HTML Page Structure: An HTML page structure typically includes <!DOCTYPE

html>, <html>, <head>, <body> tags. The <!DOCTYPE html> declaration is used to tell the
web browser that the document is written in HTML5.

4. HTML5 Tags: HTML5 introduces a number of new tags categorized under document outline,
comments, page information, document structure, links, text markup, list, image and
image map, common character entities, and object.

WEB DEVELOPMENT 93
 5. Document Outline: The document outline in HTML5 includes tags
like <!DOCTYPE>, <html>, <head>, <body>. These tags provide the basic structure of an
HTML document.

WEB DEVELOPMENT 94
 Designing page using HTML

WEB DEVELOPMENT 95
 SUB-TOPIC 4.2
LEARNING OF HTML5 TAGS PART 2

A price is a monetary amount that a customer must pay to purchase or possess a company's
product. It is the firm's most important source of revenue.

LINKS
● <a href=””>,

Anchor Tag (<a> </a>)

Anchor tag is used to link one HTML5 page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.

After clicking on highlighted text control goes to next page and the result is given below.

WEB DEVELOPMENT 96
HREF

The href attribute is specifies the URL or path of the web page we wish to link.

USES OF HREF
⮚ Linking our page to some other page.
⮚ Linking pages on the same site.
⮚ Linking to specific section on some other page

⮚ Linking to specific section on the same page:

WEB DEVELOPMENT 97
WEB DEVELOPMENT 98
ATTRIBUTES SUPPORTED TO ANCHOR TAG AS FOLLOWS:

Name

Id

Cords

Shape

Target

Download

Hreflang

Rel

Rev

Charset

HTML5 Image and Video tag

WEB DEVELOPMENT 99
TEXT MARKUP

Sr. No. Name of Tag Description

1 <b> Defines text as bold.

2 <strong> Defines text as important or strong emphasis, and should be

used instead of the <b> tag for semantic reasons.

3 <i> Defines text as italic. However, it is recommended to use the

<em> tag instead, as it carries more semantic meaning.

4 <em> Defines text as emphasized or important, and should be used

instead of the <i> tag for semantic reasons.

5 <mark> Defines text as highlighted or marked for emphasis.

6 <del> Defines text as deleted or removed.

7 <ins> Defines text as inserted or added.

8 <blockquote> Defines a block quotation, usually indented and italicized.

9 <pre> Defines preformatted text, which preserves whitespace and

line breaks.

10 <code> Defines inline code, usually displayed in a monospace font.

11 <var> Defines a variable or program argument.

12 <abbr> Defines an abbreviation, which can be expanded when

hovered over or clicked.

13 <acronym> Defines an acronym, which can be expanded when hovered

over or clicked.

WEB DEVELOPMENT 100

14 <address> Defines contact information for the author or owner of a
document.

15 <br> Defines a line break.

16 Attribute: align: Right, The align attribute can be used with several of these tags to
Left, Center specify the alignment of the content. For example, <img
align="right"> would align an image to the right side of the
page. However, this attribute is deprecated in HTML5, and it
is recommended to use CSS instead for alignment and layout
purposes.

WEB DEVELOPMENT 101

WEB DEVELOPMENT 102
WEB DEVELOPMENT 103
WEB DEVELOPMENT 104
KEY TAKEAWAYS

1. Anchor Tag: The <a> tag is used to link one HTML5 page to another. The href attribute is
the most important attribute of the <a> element as it indicates the link’s destination.

2. HTML5 Image and Video Tag: HTML5 provides specific tags for embedding images and
videos into a webpage. These multimedia elements enhance the user experience and make
the webpage more interactive and engaging.

WEB DEVELOPMENT 105

 3. Text Markup: HTML5 provides a variety of tags for text markup such
as <b>, <strong>, <i>, <em>, <mark>, <del>, <ins>, <blockquote>, <pre>, <code>, <var>, <ab
br>, <acronym>, <address>, and <br>. These tags help in emphasizing text, marking text,
inserting and deleting text, and more.

4. Align Attribute: The align attribute can be used with several tags to specify the alignment
of the content. However, this attribute is deprecated in HTML5, and it is recommended to
use CSS instead for alignment and layout purposes.

5. HTML5: HTML5 is the latest version of HTML and it introduces a number of new tags and
improves some existing ones. It is the most basic language necessary for web development.

WEB DEVELOPMENT 106

 Designing page using HTML

WEB DEVELOPMENT 107

 SUB-TOPIC 4.3
LEARNING OF HTML5 TAGS PART 3

List <ol>, <ul>, <li>, <dl>, <dt>, <dd>

Image and Image map <img />, <map>, <area />

LIST

A list is a record of short pieces of related information or used to display the data or any
information on web pages in the ordered or unordered form. For instance, to purchase the items,
we need to prepare a list that can either be ordered or unordered list which helps us to organize
the data & easy to find the item.

THE BELOW EXAMPLE ILLUSTRATES THE USE OF THE UNORDERED & ORDERED LIST IN HTML.

WEB DEVELOPMENT 108

UNORDERED LIST:

An unordered list starts with the “ul” tag. Each list item starts with the “li” tag. The list items are
marked with bullets i.e small black circles by default.

Syntax:

<ul> list of items </ul>

HTML unordered list has various list item markers

1. The Disc can be used to set the list item marker to a bullet i.e default.
2. The Circle can be used to set the list item marker to a circle.
3. The Square can be used to set the list item marker to a square.
4. It’s none that can be used to set the list item marker with no mark.

WEB DEVELOPMENT 109

NESTED UNORDERED LIST

It is used to nest the list items ie., a list inside another list.

HTML ORDERED LIST:

An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are
marked with numbers by default.

Syntax: <ol> list of items </ol>

ATTRIBUTES:
 reversed: It defines that the order will be descending.
 start: It defines from which number or alphabet the order will start.
 type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric,
alphabetic, or roman numbers.

WEB DEVELOPMENT 110

This example illustrates the use of the reverse attribute, control list counting & type attribute.

HTML ordered list has various list item markers: The type attribute of the <ol> tag defines the type
of the list item marker.

The list items will be numbered with numbers i.e default.

Type=”A”, this list of items will be numbered with uppercase letters.

Type=”a”, this list of items will be numbered with lowercase letters.

Type=”I”, this list of items will be numbered with uppercase roman numbers.

Type=”i”, this list of items will be numbered with lowercase roman numbers.

WEB DEVELOPMENT 111

WEB DEVELOPMENT 112
HTML DESCRIPTION LIST:

<dl>

<dt>

<dd>

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.

IMAGE AND IMAGE MAP TAG

Image tag in HTML

 Images can improve the design and the appearance of a web page.
 The HTML <map> tag is used to define image maps in HTML.
 The areas inside the image which are clickable are defined by using the <area> tag.
 The HTML <img> tag is used to embed an image in a web page.

WEB DEVELOPMENT 113

 Images are not technically inserted into a web page; images are linked to web pages. The <img>
tag creates a holding space for the referenced image.
 The <img> tag is empty, it contains attributes only, and does not have a closing tag.

THE <IMG> TAG HAS TWO REQUIRED ATTRIBUTES:

1. src - Specifies the path to the image
2. alt - Specifies an alternate text for the image

syntax: <img src="url" alt="ALTERNATETEXT">

The src Attribute

The required src attribute specifies the path (URL) to the image.

When a web page loads, it is the browser, at that moment, that gets the image from a web server
and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in
relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon
and the alt text are shown if the browser cannot find the image.

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).

The value of the alt attribute should describe the image. If a browser cannot find an image, it will
display the value of the alt attribute. Simply we can say that If a browser cannot find the image, it
will display the alternate text

WEB DEVELOPMENT 114

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Alternatively, you can use the width and height attributes:

The width and height attributes always define the width and height of the image in pixels.

Here this is the example contain image tag with its attribute such as src, alt, width and height.

After executing html code contain image tag and their attributes we get result in web page like
given below.

WEB DEVELOPMENT 115

AREA INSIDE AN IMAGE MAP

<map> tag:

The <map> tag is used to define an image map. An image map is an image with clickable areas.

The required name attribute of the <map> element is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable areas in the
image map.

<area> tag

WEB DEVELOPMENT 116

The <area> tag defines an area inside an image map (an image map is an image with clickable
areas).

<area> elements are always nested inside a <map> tag.

The usemap attribute in <img> is associated with the <map> element's name attribute, and
creates a relationship between the image and the map.

The area tag and map tag are used in conjunction with the img tag to define clickable image maps.

HERE'S A BRIEF EXPLANATION OF EACH:

<area>: Defines a clickable area on an image map. It is used in conjunction with the <map> tag to
specify the target URL or action associated with the area, as well as its shape and coordinates on
the image. In this example, the img tag displays an image, and the map tag specifies the name of
the image map. The area tag defines a rectangular clickable area with coordinates on the image,
and the href attribute specifies the target URL.

<map>: Defines an image map, which is a collection of clickable areas on an image. It is used in
conjunction with the <img> tag to specify the source image, as well as the areas and their targets
on the image.

Example usage of <area> tag and <map> tag::

WEB DEVELOPMENT 117

KEY TAKEAWAYS

1. HTML Lists: HTML provides several types of lists including unordered lists (<ul>), ordered
lists (<ol>), and description lists (<dl>). These lists help in organizing and presenting data in
a structured manner.

2. Unordered and Ordered Lists: Unordered lists are marked with bullets, while ordered lists
are marked with numbers or letters. The type of marker can be customized using
the type attribute in HTML5.

3. Nested Lists: HTML allows for nested lists, which means you can have a list inside another
list. This is useful for creating hierarchical structures.

4. Description Lists: Description lists consist of terms and their descriptions. They are useful
for displaying definitions, metadata, or other key-value pairs.

5. Image and Image Map Tag: The <img> tag is used to embed an image in a web page.
The src attribute specifies the path to the image, and the alt attribute provides alternate
text for the image. The <map> and <area> tags are used to define clickable areas within an
image, creating an image map.

WEB DEVELOPMENT 118

 HTML5 Table and Form

WEB DEVELOPMENT 119

 SUB-TOPIC 5.1

CREATING AND FORMATTING TABLES

Tables allow you to display data in an organized and easy-to-read format. In this article, we will
discuss how to create and format tables using HTML.

TABLE STRUCTURE:

WEB DEVELOPMENT 120

THE BASIC STRUCTURE OF AN HTML TABLE CONSISTS OF THE FOLLOWING TAGS:

<table>: Defines a table.

<thead>: Defines the header section of a table.

<tbody>: Defines the body section of a table.

<tfoot>: Defines the footer section of a table.

<tr>: Defines a table row.

<th>: Defines a table header cell.

<td>: Defines a table data cell.

The <table> tag is used to define the table, and it is always the parent tag of all other table tags.
The <thead>, <tbody>, and <tfoot> tags are used to group the content of the table into separate
sections: the header, body, and footer.

Each of these sections can contain one or more rows, defined with the <tr> tag.

The actual data of the table is defined within each row, using the <th> and <td> tags.

Example of a Basic Table Structure:

WEB DEVELOPMENT 121

 (Figure 1: This image needs to be shown on the back ground of video)

In this example, we have a simple table with a header, body, and footer section.

The <thead> section contains one row with three header cells (<th> tags).

The <tbody> section contains two rows with three data cells (<td> tags) each.

The <tfoot> section contains one row with three footer cells (<td> tags).

TABLE ATTRIBUTES:

Tables can also have attributes that affect their appearance or behavior. Here are some of the
most commonly used attributes:

border: Specifies the width of the border around the table. This attribute is usually set to 1 for a
visible border, or 0 for no border.

cellpadding: Specifies the padding within each cell of the table. This attribute is used to create
space between the content of the cell and its border.

WEB DEVELOPMENT 122

cellspacing: Specifies the space between each cell of the table. This attribute is used to create
space between adjacent cells.

width: Specifies the width of the table. This attribute can be set to a fixed pixel value or a
percentage of the available space.

height: Specifies the height of the table. This attribute can be set to a fixed pixel value or a
percentage of the available space.

align: Specifies the horizontal alignment of the table within its container. This attribute can be set
to "left", "center", or "right".

valign: Specifies the vertical alignment of the table within its container. This attribute can be set to
"top", "middle", or "bottom".

EXAMPLE USAGE OF ATTRIBUTES IN TABLE:

WEB DEVELOPMENT 123

WEB DEVELOPMENT 124
WEB DEVELOPMENT 125
HOW TO DEFINE TABLE CELLS THAT SPAN MORE THAN ONE ROW OR ONE COLUMN:

Table cells that span more than one row or one column are known as "spanning cells." They are
useful for organizing and presenting data in a way that is visually clear and easy to understand.

There are two common attributes used to define spanning cells in HTML tables: rowspan and
colspan.

rowspan is used to specify how many rows a cell should span. For example, if you have a table
with three rows and you want a cell to span two rows, you would use the following code:

colspan is used to specify how many columns a cell should span. For example, if you have a table
with three columns and you want a cell to span two columns, you would use the following code:

WEB DEVELOPMENT 126

using spanning cells in tables is a powerful way to organize and present data. By combining
rowspan and colspan, you can create complex layouts that are easy to read and visually appealing.

KEY TAKEAWAY

Sure, here are the five key takeaways from your text:

1. Table Structure: The basic structure of an HTML table consists of <table>, <thead>,
<tbody>, <tfoot>, <tr>, <th>, and <td> tags. The <table> tag defines the table, <thead>,
<tbody>, and <tfoot> tags group the content into separate sections, and <tr>, <th>, and
<td> tags define the rows and cells.

2. Table Sections: A table is divided into three sections: the header (<thead>), the body
(<tbody>), and the footer (<tfoot>). Each section can contain one or more rows (<tr>), and
each row can contain one or more cells (<th> for header cells and <td> for data cells).

3. Table Attributes: Tables can have attributes like border, cellpadding, cellspacing, width,
height, align, and valign that affect their appearance and behavior. These attributes control
aspects like the border width, cell padding and spacing, table dimensions, and table
alignment.

WEB DEVELOPMENT 127

 4. Spanning Cells: Table cells that span more than one row or column are known as “spanning
cells”. The rowspan and colspan attributes are used to specify how many rows or columns
a cell should span, allowing for complex table layouts.

5. Effective Data Presentation: Using HTML tables, especially with attributes and spanning
cells, is a powerful way to organize and present data in a visually clear and easy-to-
understand manner.

WEB DEVELOPMENT 128

 HTML Table and Form

WEB DEVELOPMENT 129

 SUB-TOPIC 5.2
CREATING USER FORMS

An HTML form is a way for users to input data that can be submitted to a server for processing.
Forms can be used for a variety of purposes, such as logging in to a website, filling out a survey, or
purchasing a product. In this answer, we will discuss the various tags that are used to create an
HTML form and provide examples of how to use them.

HTML FORMS

An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

These are the following HTML <form> elements:

Sr. Tag Description

No.

1 <form> The form tag is used to create an HTML form. This tag encloses
all of the form elements and sets the form's attributes. The
action attribute specifies the URL where the form data should
be submitted, and the method attribute specifies the HTTP
method that should be used to submit the form. The two most
commonly used HTTP methods for forms are GET and POST.

2 <input type=”text”> It is used to get input data from the form in various types such
as text, password, email, etc by changing its type.
<input type=”radio”>
An <input> element can be displayed in many ways,
<input type=”password”> depending on the type attribute.
<input type=”number”>

<input type=”checkbox”>

<input type=”submit”>

<input type=”button”>

<input type=”range”>

<input type=”search”>

WEB DEVELOPMENT 130

 <input type=”reset”>

<input type=”time”>

<input type=”url”>

<input type=”hidden”>

<input type=”month”>

<input type=”file”>

<input type=”color”>

<input type=”date”>

<input type=”week”>

3 <textarea> It is used to get input long text content.

4 <label> It defines label for <form> elements.

5 <option> It is used to define options in a drop-down list.

6 <fieldset> It is used to draw a box around other form elements and group
the related data.

7 <select> It is used to create a drop-down list.

8 <output> It displays the output of performed calculations.

9 <optgroup> It is used to define group-related options in a drop-down list.

10 <legend> It defines caption for fieldset elements

WEB DEVELOPMENT 131

11 <datalist> It is used to specify pre-defined list options for input controls.

SYNTAX:

<form>

<!--form elements-->

</form>

WEB DEVELOPMENT 132

 (Figure SEQ Figure \* ARABIC 1: This image needs to be shown on the back ground of

WEB DEVELOPMENT 133

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

TEXT FIELD

A text field is an input field that allows the user to enter text. The type attribute of the input tag
should be set to text.

PASSWORD FIELD

A password field is an input field that allows the user to enter a password. The characters entered
in this field are usually masked for security purposes. The type attribute of the input tag should be
set to password.

CHECKBOX

A checkbox is a form element that allows the user to select one or more options from a list. The
type attribute of the input tag should be set to checkbox.

RADIO BUTTON

A radio button is a form element that allows the user to select one option from a list. The type
attribute of the input tag should be set to radio.

SUBMIT BUTTON

A submit button is a form element that, when clicked, submits the form to the server for
processing. The type attribute of the input tag should be set to submit.

THE LABEL TAG

WEB DEVELOPMENT 134

The label tag is used to associate a form element with its label. When a user clicks on a label, the
associated form element receives focus. This is useful for improving the accessibility of your forms.

THE SELECT TAG

The select tag is used to create a dropdown list. The option tag is used to specify the available
options.

WEB DEVELOPMENT 135

WEB DEVELOPMENT 136
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.

EXAMPLE

Here is example HTML code for a form with one file upload box and This will produce the following
result.

HTML forms are an excellent way to collect and manage user data and information quickly and
efficiently.

WEB DEVELOPMENT 137

HTML FORM INPUT TYPES

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input
element can be various types, which defines information field. Such as <input type="text"
name="name"> gives a text box.

Following is a list of all types of <input> element of HTML.

Sr. No. Type=”” Description

text Defines a one-line text input field

password Defines a one-line password input field

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options

form.

button Defines a simple push button, which can be programmed to

perform a task on an event.

file Defines to select the file from device storage.

image Defines a graphical submit button.

HTML5 added new types on <input> element. Following is the list of types of elements of HTML5

color Defines an input field with a specific color.

date Defines an input field for selection of date.

email Defines an input field for entering an email address.

month Defines a control with month and year, without time zone.

number Defines an input field to enter a number.

url Defines a field for entering URL

WEB DEVELOPMENT 138

 week Defines a field to enter the date with week-year, without
time zone.

search Defines a single line text field for entering a search string.

tel Defines an input field for entering the telephone number.

1. <INPUT TYPE="TEXT">:

<input> element of type "text" are used to define a single-line input text field.

1. <form>
2. <label>Enter first name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter last name</label><br>
5. <input type="text" name="lastname"><br>
6. <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>
7. </form>

After executing html code the result will be like this.

WEB DEVELOPMENT 139

2. <INPUT TYPE="PASSWORD">:

The <input> element of type "password" allow a user to enter the password securely in a webpage.
The entered text in password filed converted into "*" or ".", so that it cannot be read by another
user.

1. <form>
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>

3. <INPUT TYPE="SUBMIT">:

WEB DEVELOPMENT 140

The <input> element of type "submit" defines a submit button to submit the form to the server
when the "click" event occurs.
1. <form action="https://www.google.co.in/">
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>

After clicking on submit button, this will submit the form to server and will redirect the page to
action value.

4. <INPUT TYPE="RESET">:
1. <form>
2. <label>User id: </label>
3. <input type="text" name="user-id" value="user">
4. <label>Password: </label>
5. <input type="password" name="pass" value="pass"><br><br>
6. <input type="submit" value="login">
7. <input type="reset" value="Reset">
8. </form>

Try to change the input values of user id and password, then when you click on reset, it will
reset input fields with default values.

5. <INPUT TYPE="RADIO">:

The <input> type "radio" defines the radio buttons, which allow choosing an option between a set
of related options. At a time only one radio button option can be selected at a time.
1. <form>
2. <p>Kindly Select your favorite color</p>
3. <input type="radio" name="color" value="red"> Red <br>
4. <input type="radio" name="color" value="blue"> blue <br>
5. <input type="radio" name="color" value="green">green <br>
6. <input type="radio" name="color" value="pink">pink <br>
7. <input type="submit" value="submit">
8. </form>

WEB DEVELOPMENT 141

6. <INPUT TYPE="CHECKBOX">:

The <input> type "checkbox" are displayed as square boxes which can be checked or unchecked to
select the choices from the given options.

Note: The "radio" buttons are similar to checkboxes, but there is an important difference
between both types: radio buttons allow the user to select only one option at a time, whereas
checkbox allows a user to select zero to multiple options at a time.
1. <form>
2. <label>Enter your Name:</label>
3. <input type="text" name="name">
4. <p>Kindly Select your favourite sports</p>
5. <input type="checkbox" name="sport1" value="cricket">Cricket<br>
6. <input type="checkbox" name="sport2" value="tennis">Tennis<br>
7. <input type="checkbox" name="sport3" value="football">Football<br>
8. <input type="checkbox" name="sport4" value="baseball">Baseball<br>
9. <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>
10. <input type="submit" value="submit">
11. </form>

7. <INPUT TYPE="BUTTON">:

The <input> type "button" defines a simple push button, which can be programmed to control a
functionally on any event such as, click event.

1. <form>
2. <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
3. </form>

Click the button to see the result:

8. <INPUT TYPE="FILE">:

The <input> element with type "file" is used to select one or more files from user device storage.

1. <form>
2. <label>Select file to upload:</label>
3. <input type="file" name="newfile">
4. <input type="submit" value="submit">
5. </form

WEB DEVELOPMENT 142

9. <INPUT TYPE="IMAGE">:

The <input> type "image" is used to represent a submit button in the form of image.

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Input "image" type.</h2>
5. <p>We can create an image as submit button</p>
6. <form>
7. <label>User id:</label><br>
8. <input type="text" name="name"><br><br>
9. <input type="image" alt="Submit" src="login.png" width="100px">
10. </form>
11.
12. </body>
13. </html>

1. <INPUT TYPE="COLOR">:

The <input> type "color" is used to define an input field which contains a colour. It allows a user to
specify the colour by the visual colour interface on a browser.

1. <form>
2. Pick your Favorite color: <br><br>
3. <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>
4. <input type="color" name="downclick" value="#f5f5dc"> Downclick
5. </form>

2. <INPUT TYPE="DATE">:

The <input> element of type "date" generates an input field, which allows a user to input the date
in a given format. A user can enter the date by text field or by date picker interface.

1. <form>
2. Select Start and End Date: <br><br>
3. <input type="date" name="Startdate"> Start date:<br><br>
4. <input type="date" name="Enddate"> End date:<br><br>
5. <input type="submit">
6. </form>

WEB DEVELOPMENT 143

3. <INPUT TYPE="DATETIME-LOCAL">:

The <input> element of type "datetime-local" creates input filed which allow a user to select the
date as well as local time in the hour and minute without time zone information.

1. <form>
2. <label>
3. Select the meeting schedule: <br><br>
4. Select date & time: <input type="datetimelocal" name="meetingdate"> <br><br>
5. </label>
6. <input type="submit">
7. </form>

4. <INPUT TYPE="EMAIL">:

The <input> type "email" creates an input filed which allow a user to enter the e-mail address with
pattern validation. The multiple attributes allow a user to enter more than one email address.

1. form>
2. <label><b>Enter your Email-address</b></label>
3. <input type="email" name="email" required>
4. <input type="submit">
5. <p><strong>Note:</strong>User can also enter multiple email addresses separating b
y comma or whitespace as following: </p>
6. <label><b>Enter multiple Email-addresses</b></label>
7. <input type="email" name="email" multiple>
8. <input type="submit">
9. </form>

5. <INPUT TYPE="MONTH">:

The <input> type "month" creates an input field which allows a user to easily enter month and
year in the format of "MM, YYYY" where MM defines month value, and YYYY defines the year
value. New

1. <form>
2. <label>Enter your Birth Month-year: </label>
3. <input type="month" name="newMonth">
4. <input type="submit">
5. </form>

WEB DEVELOPMENT 144

6. <INPUT TYPE="NUMBER">:

The <input> element type number creates input filed which allows a user to enter the numeric
value. You can also restrict to enter a minimum and maximum value using min and max attribute.

1. <form>
2. <label>Enter your age: </label>
3. <input type="number" name="num" min="50" max="80">
4. <input type="submit">
5. </form>

7. <INPUT TYPE="URL">:

The <input> element of type "url" creates an input filed which enables user to enter the URL

1. <form>
2. <label>Enter your website URL: </label>
3. <input type="url" name="website" placeholder="http://example.com"><br>
4. <input type="submit" value="send data">
5. </form>

8. <INPUT TYPE="WEEK">:

The <input> type week creates an input field which allows a user to select a week and year form
the drop-down calendar without time zone.
1. <form>
2. <label><b>Select your best week of year:</b></label><br><br>
3. <input type="week" name="bestweek">
4. <input type="submit" value="Send data">
5. </form>

9. <INPUT TYPE="SEARCH">:

The <input> type "search" creates an input filed which allows a user to enter a search string. These
are functionally symmetrical to the text input type, but may be styled differently.

1. <form>
2. <label>Search here:</label>
3. <input type="search" name="q">
4. <input type="submit" value="search">
5. </form>

WEB DEVELOPMENT 145

HTML FORM ATTRIBUTE

HTML <form> element attributes

In HTML there are various attributes available for <form> element which are given below:

HTML ACTION ATTRIBUTE

The action attribute of <form> element defines the process to be performed on form when form is
submitted, or it is a URI to process the form information.

The action attribute value defines the web page where information proceed. It can
be .php, .jsp, .asp, etc. or any URL where you want to process your form.

Note: If action attribute value is blank then form will be processed to the same page.

1. <form action="first.html" method="post">

2. <label>User Name:</label><br>
3. <input type="text" name="name"><br><br>
4. <label>User Password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit">
7. </form>

It will redirect to a new page "first.html" when you click on submit button

HTML METHOD ATTRIBUTE

The method attribute defines the HTTP method which browser used to submit the form. The
possible values of method attribute can be:

o post: We can use the post value of method attribute when we want to process the
sensitive data as it does not display the submitted data in URL.

EXAMPLE:
1. <form action="action.html" method="post">
o get: The get value of method attribute is default value while submitting the form. But this
is not secure as it displays data in URL after submitting the form.

EXAMPLE:

<form action="action.html" method="get">

WEB DEVELOPMENT 146

KEY TAKEAWAY

1. HTML Form: An HTML form is used to collect user input, which is most often sent to a
server for processing. The <form> tag is used to create an HTML form and encloses all of
the form elements.

2. Input Types: The <input> tag is used to get input data from the form in various types such
as text, password, email, etc. The type of input is determined by the type attribute of the
<input> tag.

3. Form Elements: Other form elements include <textarea> for long text content, <label> for
defining labels, <option> for defining options in a drop-down list, <fieldset> for grouping
related data, <select> for creating a drop-down list, and <output> for displaying the output
of calculations.

4. Label Tag: The <label> tag is used to associate a form element with its label, improving the
accessibility of your forms.

5. File Upload Box: A file upload box, created using the <input> element with type attribute
set to file, allows a user to upload a file to your website.

WEB DEVELOPMENT 147

 Working with CSS3

WEB DEVELOPMENT 148

 SUB-TOPIC 6.1

INTRODUCTION TO STYLE SHEETS, IMPORTANCE OF CSS3, SYNTAX

FOR CSS3

WHAT IS CSS

CSS is a language that we use to style an HTML document.

It describes how elements will be displayed.

CSS stand for Cascading Style Sheets.

CSS files are stored with .css extension

CSS, or Cascading Style Sheets, is a styling language used in web development to add style and
visual design to HTML documents.

CSS allows developers to separate the content and structure of a webpage from its visual
presentation, making it easier to manage and update the design of a website over time.

CSS files can be used in three ways Inline CSS, Internal CSS and External CSS.

CSS3, the latest version of the CSS language, offers many benefits and is an essential tool in web
design.

CSS3 syntax is used to apply styles and formatting to HTML documents. The syntax includes CSS
properties, values, selectors, and rules, which work together to create a visually appealing design
for web pages.

CSS3 also includes many new features and capabilities, such as new layout models, custom fonts,
and advanced text effects.

CSS3 is an essential tool for web developers to create visually appealing and responsive designs for
websites. Understanding the syntax of CSS3 is important for creating effective styles and layouts
for web pages. By using CSS3 properties, values, selectors, and rules, developers can create
customized styles for specific HTML elements and make their designs stand out.

WHY CSS?

WEB DEVELOPMENT 149

CSS saves a lot of time and work.

Using CSS we can apply write once use many times approaches.

We can easily change the style of multiple elements by changing the style in the stylesheet.

We can create single style sheet and can use on multiple HTML documents.

It is used to design the layout of HTML document.

HOW TO ADD CSS IN HTML?

We can add CSS in three ways: INLINE CSS, INTERNAL CSS AND EXTERNAL CSS

Inline CSS written in the opening tag in HTML by using style attribute.

Internal CSS written in the head tag of HTML by using style tag

Example: using the <style> element in the <head> section

External CSS is written in the external file with .css extension.

It is used to display the data or content on the web browser

SOME OF THE KEY FEATURES OF CSS INCLUDE:

Selectors: CSS uses selectors to target specific HTML elements and apply styles to them. Selectors
can be based on the element's tag name, class, ID, attributes, and more.

Box model: The box model is a concept in CSS that defines how the content, padding, border, and
margin of an HTML element are arranged. Understanding the box model is important for creating
responsive and visually appealing designs.

Layout: CSS provides a number of layout techniques for positioning and arranging HTML elements
on a webpage. These include floats, positioning, and the newer flexbox and grid layout models.

Responsive design: CSS allows developers to create responsive designs that adapt to different
screen sizes and devices. This is achieved through techniques like media queries, which allow
styles to be applied based on the screen size and orientation of the device.

Overall, CSS is an important tool for web developers that allows them to create visually appealing
and responsive designs for websites. By separating the content and structure of a webpage from

WEB DEVELOPMENT 150

its visual presentation, CSS makes it easier to manage and update the design of a website over
time.

HERE ARE SOME OF THE KEY USES AND IMPORTANCE OF CSS3:

Improved layout options: CSS3 offers new layout options, such as the flexbox and grid layout
models, which allow developers to create more complex and responsive layouts with ease. This
makes it easier to design websites that look great on a wide range of devices and screen sizes.

Styling options: CSS3 provides a wide range of styling options, allowing developers to create
visually appealing designs for websites. These options include new color and gradient features,
custom fonts, and advanced text effects. Additionally, CSS3 introduces animations and transitions,
which enable developers to add more interactivity to websites.

Faster load times: CSS3 allows developers to create leaner and faster-loading websites. By
reducing the number of HTTP requests made by a page, using CSS sprites, and optimizing images,
developers can improve the loading time of a webpage. This results in a better user experience, as
visitors are less likely to abandon a slow-loading website.

Compatibility: CSS3 has improved compatibility with older browsers, making it easier to create
designs that work across a range of devices and browsers. Additionally, CSS3 allows developers to
add fallback options, which provide a graceful degradation in older browsers that do not support
CSS3 features.

Maintainability: CSS3 separates the design and presentation of a website from its content, making
it easier to maintain and update. By creating a separate CSS file, developers can quickly update the
styling of a website without having to edit each individual page. This reduces the risk of errors and
saves time.

Overall, CSS3 is an essential tool in web design that provides many benefits, including improved
layout options, styling options, faster load times, compatibility, and maintainability. Using CSS3
allows developers to create visually appealing and responsive websites that provide a better user
experience.

CSS3 INCLUDES SEVERAL NEW MODULES THAT EXTEND THE CAPABILITIES OF CSS,
SUCH AS:

Selectors: CSS3 introduces new selectors, such as attribute selectors, negation selectors, and
structural selectors. These new selectors allow developers to target specific elements on a page
with more precision and ease.

WEB DEVELOPMENT 151

Colors: CSS3 provides new color properties, including RGBa and HSLa, that allow developers to
specify colors with more precision and transparency. This makes it easier to create more visually
appealing designs.

Typography: CSS3 introduces new typography features, such as @font-face, which allows
developers to use custom fonts on web pages. This enhances the visual design of web pages and
provides more flexibility in creating typographic styles.

Layout: CSS3 includes new layout models, such as flexbox and grid, which allow developers to
create more complex and responsive layouts with ease. These layout models enable developers to
create designs that adapt to different screen sizes and devices.

Animations and Transitions: CSS3 provides new properties and features that allow developers to
create animations and transitions with ease. This enables developers to create dynamic and
interactive user experiences on their web pages.

Overall, CSS3 provides web developers with many new and improved features that enhance the
capabilities of the CSS language. It allows developers to create more visually appealing, responsive,
and dynamic web pages with less code and greater ease.

CSS3 syntax is used to apply styles and formatting to HTML documents.

The syntax includes CSS properties, values, selectors, and rules, which work together to create a
visually appealing design for web pages.

FOR EXAMPLE

The selector is an HTML element which you want to style. This could be any tag like <h1>, <p>, etc.
Each selector can have one and more properties.

The property is the style attribute of an HTML tag. All HTML attributes are converted into CSS
properties (color, border, etc.). Each property has its value.

The value is assigned to property. For example, the value of the color property can be either red
or #F1F1F1.

CSS3 PROPERTIES
● CSS3 properties are used to set specific styles for HTML elements.
● These properties are used with a colon to separate the property from the value, and they are
typically written in lowercase letters.
● Here are some examples of CSS3 properties:

WEB DEVELOPMENT 152

 font-size: 16px;

color: #333333;

background-color: #FFFFFF;

border: 1px solid #CCCCCC;

text-align: center;
● In the above examples, font-size sets the size of the text, color sets the color of the text,
background-color sets the background color of the element, border sets the border of the
element, and text-align sets the alignment of the text within the element.

CSS3 VALUES

CSS3 values are used to set specific values for CSS3 properties. These values can be numerical,
text-based, or color-based. Here are some examples of CSS3 values:

font-size: 16px;

color: #333333;

background-color: #FFFFFF;

border: 1px solid #CCCCCC;

text-align: center;
● In the above examples, 16px is a numerical value for the font-size property, #333333 and
#FFFFFF are color values for the color and background-color properties, 1px solid #CCCCCC
is a border value for the border property, and center is a text alignment value for the text-
align property.

Example of CSS Syntax

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

WEB DEVELOPMENT 153

 <style>

p{

color: #1c87c9;

</style>

</head>

<body>

<p>The color of this paragraph is #1c87c9.</p>

</body>

</html>

Output with source code:

Check different syntax of properties and check the different styles in html content.

font-size: 16px;

color: #333333;

background-color: #FFFFFF;

border: 1px solid #CCCCCC;

text-align: center;

WEB DEVELOPMENT 154

KEY TAKEAWAYS

1. What is CSS: CSS (Cascading Style Sheets) is a language used to style HTML documents. It
describes how elements will be displayed on the page. CSS3 is the latest version of the
language, offering new features and capabilities.

2. Why CSS: CSS saves a lot of time and work. It allows developers to apply styles across
multiple HTML documents and easily change the style of multiple elements by changing
the style in the stylesheet.

3. Adding CSS in HTML: CSS can be added in three ways - Inline CSS (using the style attribute
in the opening tag), Internal CSS (using the style tag in the head tag), and External CSS
(written in an external file with a .css extension).

4. Key Features of CSS: Some of the key features of CSS include selectors (to target specific
HTML elements), the box model (defining how content, padding, border, and margin are
arranged), layout techniques (like floats, positioning, flexbox, and grid layout models), and
responsive design (allowing styles to adapt to different screen sizes and devices).

5. Importance of CSS3: CSS3 offers improved layout options and a wide range of styling
options, allowing developers to create more complex, responsive, and visually appealing
designs for websites.

WEB DEVELOPMENT 155

 Working with CSS3

WEB DEVELOPMENT 156

 SUB-TOPIC 6.2
DIFFERENT TYPES OF CSS3 AND SELECTORS IN CSS3

TYPES OF CSS

There are mainly three types of CSS, Inline CSS, Internal CSS and External CSS.

Inline CSS written in the opening tag in HTML by using style attribute and we can write our CSS for
every element of HTML.

Internal CSS is written in the head tag of HTML by using style tag. This stylesheet is included in the
HTML file.

External CSS is written in the external file with .css extension. And this is almost the same as
Internal CSS but this is a different CSS file.

LET STARTS TO DISCUSS IN DETAILS ONE BY ONE

INLINE CSS:

As we learn about Inline CSS written in the opening tag in HTML by using style attribute. But it is
difficult to write CSS for every element individually. In Inline CSS the CSS style is written within
double quotes " " like this style=" ".

Inline CSS is a style sheet technique where the styles are applied directly to individual HTML
elements using the "style" attribute. The styles applied using inline CSS override any external or
internal CSS styles applied to the same element. Inline CSS is useful for applying styles to individual
elements, but it can be difficult to maintain and update if there are many styles or HTML elements
on the page.

HERE IS AN EXAMPLE OF HOW TO USE INLINE CSS:

<!DOCTYPE html>

<html>

<head>

<title> Inline CSS </title>

WEB DEVELOPMENT 157

</head>

<body>

<p style="color: red;"> Demo for INLINE CSS </p>

</body>

</html>

WEB DEVELOPMENT 158

EXTERNAL CSS:

External CSS is a style sheet technique where the styles are defined in a separate CSS file and then
linked to the HTML document using the "link" tag. This method allows you to apply the same
styles to multiple HTML pages, making it easy to maintain and update the styles. External CSS files
are cached by the browser, which can improve page load times for subsequent requests.

HERE IS AN EXAMPLE OF HOW TO USE EXTERNAL CSS:

external.html

<!DOCTYPE html>

<html lang="en">

<head>

<title> Exernal CSS </title>

<link rel="stylesheet" href="external.css">

</head>

<body>

<p> EXTERNAL CSS HTML DEMO PAGE </p>

<h1> THIS IS EXTERNAL CSS TYPE</h1>

</body>

</html>

external.css

p{

color: purple;

font-size: large;

WEB DEVELOPMENT 159

 text-align: center;

You can see the output of external css code with html elements.

INTERNAL CSS:

Internal CSS3 is a type of cascading style sheet that allows you to define styles within the HTML file
itself. This means that you do not need to create a separate CSS file to define styles for your HTML
elements. Internal CSS is a style sheet technique where the styles are defined in the "head"
section of an HTML document using the "style" tag. This method allows you to apply styles to
specific HTML pages without having to create a separate CSS file. Internal CSS styles are defined
within the HTML file itself, so they may be more difficult to maintain and update than external
styles.

Internal CSS3 is useful for small-scale projects and web pages, where the styles are not complex
and do not require a lot of customization.

We will discuss internal CSS3 in more detail, including its syntax and examples.

SYNTAX OF INTERNAL CSS3

WEB DEVELOPMENT 160

Internal CSS3 is placed within the head section of an HTML document, between the <style> tags.
Here is the basic syntax for internal CSS3:

Here is an example of how to use internal CSS:

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS3 Example</title>

<style>

/* CSS styles go here */

</style>

</head>

<body>

<!-- HTML content goes here -->

</body>

</html>

As you can see from the example, the <style> tags are used to define the CSS styles. The CSS styles
are written between the opening and closing <style> tags.

EXAMPLES OF INTERNAL CSS3

● Changing the Font Size

One of the most common uses of internal CSS3 is to change the font size of HTML elements. Here
is an example of how to change the font size of the entire document:

Internal CSS is written in the head tag of HTML by using style tag. This saves a lot of time because
in this we can target multiple elements and can apply the same style to them.

WEB DEVELOPMENT 161

In this example, we have defined the font size of the body element to be 19 pixels. This will change
the font size of all the text in the document.

EXAMPLE 2:

Changing the Background Color

You can also use internal CSS3 to change the background color and Changing the Text Color of
HTML elements. Here is an example:

WEB DEVELOPMENT 162

In this example, we have defined the background color of the body element to be a parrot color.
This will change the background color of the entire document. As well as In this example, we have
defined the color of the text in the body element to be a black color. This will change the color of
all the text in the document.

WEB DEVELOPMENT 163

Selectors in css

WHAT ARE CSS SELECTORS?

CSS selectors are used to select the HTML elements for styling.

selectors are a fundamental part of CSS and allow you to target specific HTML elements to apply
styles to. By using different types of selectors, you can create complex styles and layouts for your
web pages.

There are multiple types of selectors in CSS: element selector, group selector, id selector, class
selector, Type Selector, Attribute Selector, Child Selector, Descendant Selector and Pseudo-class
Selector etc.

Some basic selectors in CSS. i.e.

1. Element Selector:
2. Group Selectors
3. Id Selector
4. Class Selector

ELEMENT SELECTOR:

Element selectors are used to target the HTML element by tag name and style them
in our style sheet.

The Element Selector is used to select elements based on their tag names. This is
the simplest and most common selector used in CSS. You simply specify the name of
the element you want to style, and then apply the desired styles to it.

WEB DEVELOPMENT 164

elementselector.html

elementselector.css

WEB DEVELOPMENT 165

OUTPUT:

In this example, all p elements on the page will be styled with purple color and a
given background color.

WEB DEVELOPMENT 166

GROUP SELECTORS

The Group Selector is used to select multiple elements at once and apply the same
styles to all of them. This is useful when you want to apply the same styles to several
different elements.

group.html

WEB DEVELOPMENT 167

group.css

OUTPUT:

In this example, all h1, h2, h3 and p elements on the page will be styled with blue
color and a font size of 24px. As the name suggests group selectors are used to
select multiple elements and apply the same style to them.

WEB DEVELOPMENT 168

ID SELECTOR:

An ID selector in CSS is used to target a specific HTML element based on its unique
id attribute value. Here are some examples of how to use an ID selector in CSS:

Example 1:

You can target this element in CSS using the # symbol followed by the ID attribute
value.

Suppose you have an HTML element with an ID of myHeader, heading and myDiv
like this:

#heading
#myHeader
#myDiv

WEB DEVELOPMENT 169

Id.html

WEB DEVELOPMENT 170

Id.css

OUTPUT:

This CSS code will set

1. the text color of the h1 element with an ID of myHeader to red and increase
its font size to 24 pixels.
2. set the background color of the div element with an ID of myDiv to light blue
and add 20 pixels of padding around its content.
3. the text color of the h2 element with an ID of heading to blue.

WEB DEVELOPMENT 171

NOTE: Remember, it's important to use unique IDs for each HTML element on your
page. If you have multiple elements with the same ID, the CSS selector will
only apply to the first element with that ID.

CLASS SELECTOR

Class selectors are mainly used to target multiple HTML elements with their classes
and apply styles to them. An HTML element can contain multiple classes and
multiple elements can have the same class.

(.) is used to target the multiple elements with class from the HTML document.

A class selector in CSS is used to target HTML elements based on their class attribute
value. A class is a way to group multiple HTML elements and apply the same styling
to them. Here are some examples of how to use a class selector in CSS:

Here in this example we will consider more then one time paragraph, list under ul
tag and div tag in html file. like

WEB DEVELOPMENT 172

 1. Suppose you have two div elements with the same class name.

.myDiv class

<div class="myDiv">
<p>This is the first div tag.</p>
</div>

<div class="myDiv">
<p>This is the second div tag.</p>
</div>

2. Suppose you have two paragraph elements with the same class name.

.para class

<p class="para"> This is first paragraph </p>

<p class="para"> This is second paragraph </p>
<p class="para"> This is third paragraph </p>

3. Suppose you have two li elements (ul element with li child elements)with the
same class name.

.odd class

<ul>

WEB DEVELOPMENT 173

 <li class="odd">Item 1</li>
<li>Item 2</li>
<li class="odd">Item 3</li>
<li>Item 4</li>
<li class="odd">Item 5</li>
</ul>

Here this is the line of code to link html page with css using class selector with
output.

WEB DEVELOPMENT 174

class.html

WEB DEVELOPMENT 175

class.css

OUTPUT:

This CSS code will set the background color of both div elements with a class of
myDiv to light blue and add 20 pixels of padding around their content.

Similarly, This CSS code will set the background color of every li element with a class
of odd to light red.

As well as this CSS code will set the text color of paragraph elements with a class of
para. And the result is you can see like.

WEB DEVELOPMENT 176

KEY TAKEAWAY

1. Types of CSS: There are three types of CSS - Inline CSS, Internal CSS, and External CSS. Each
type is used in different scenarios based on the requirements of the webpage.

2. Inline CSS: Inline CSS is written in the opening tag of an HTML element using the style
attribute. It applies styles directly to individual HTML elements. However, it can be difficult
to maintain if there are many styles or HTML elements on the page.

3. External CSS: External CSS is defined in a separate CSS file and linked to the HTML
document using the “link” tag. This method allows the same styles to be applied to
multiple HTML pages, making it easy to maintain and update the styles.

4. Internal CSS: Internal CSS is written in the head tag of an HTML document using the style
tag. This method allows styles to be applied to specific HTML pages without having to

WEB DEVELOPMENT 177

 create a separate CSS file. However, these styles may be more difficult to maintain and
update than external styles.

5. Usage of CSS: The type of CSS used depends on the specific needs of the webpage. Inline
CSS is useful for styling individual elements, External CSS is beneficial for applying
consistent styling across multiple pages, and Internal CSS is helpful for applying styles to
specific pages.

WEB DEVELOPMENT 178

 Working With CSS3

WEB DEVELOPMENT 179

 SUB-TOPIC 6.3
COLORS IN CSS3, COLORS AND TEXT PROPERTIES

WHAT ARE COLORS IN CSS?

 As the name defines colors are used to set the colors on the text.
 In CSS basically, we can set colors in three types of value: color by name, color by RGB
value, and color by HEX value.
 In today's class, we will see how we can use these color values in details.

COLORS IN CSS CAN BE DEFINED USING DIFFERENT METHODS:

1. Named Colors: CSS has 147 predefined color names, such as "red", "green", "blue", "black",
"white", etc. You can use them by specifying the color name in your CSS code.

2. RGB Values: RGB stands for Red, Green, and Blue, which are the primary colors of light.
RGB color values are represented using the RGB color model, where each color is
represented by a number between 0 and 255. You can define an RGB color value using the
following syntax: rgb(red, green, blue), where red, green, and blue are integers between 0
and 255.

3. Hexadecimal Values: A hexadecimal color value is a six-digit code that represents the
intensity of red, green, and blue in a color. The first two digits represent the red value, the
second two digits represent the green value, and the last two digits represent the blue
value. You can define a hexadecimal color value using the following syntax: #RRGGBB,
where RR, GG, and BB are two-digit hexadecimal values.

Example of CSS code using different color methods:

WEB DEVELOPMENT 180

Here in this example we are going to use external css

So create one html and one css file to execute this task

COLOR BY NAME

 In this CSS color property, we will use the color name to set the color of the text.

 In this, we can use predefined color names like red, green, blue, purple, orange, etc.

COLOR BY NAME

 In this CSS color property, we will use the color name to set the color of the text.

 In this, we can use predefined color names like red, green, blue, purple, orange, etc.

COLOR BY HEX

 In this color property, we will use the HEX value to set the color.

WEB DEVELOPMENT 181

  HEX defines the hexadecimal value of the color and we can set using #rrggbb or #000000.

 In rrggbb, rr for Red, gg for green and bb for blue. OR we can also use these values from 0
to 255.

color.html

In this html file same element with different id selectors we are using to give beauty to web page
using css.

WEB DEVELOPMENT 182

color.css

OUTPUT:

CSS FONT AND TEXT PROPERTIES

 Font properties are used to add different styles to the fonts.

 Font properties are used to change the style, size, weight, etc. of the font.

WEB DEVELOPMENT 183

  Font styling adds a good impact on the readers, that's why we use different font styling
properties.

 Text properties are used to format text styles.

1. font-family: This property defines the font family to be used for an element. For example, if
you want to use the Arial font for your text, you would write:

p{

font-family: Arial, sans-serif;

This will apply the Arial font to all paragraphs on your page, and if Arial is not available, it will use a
sans-serif font instead.

FONT-SIZE:
This property defines the size of the text. For example, if you want to use a font size of 16
pixels for your text, you would write:

p{

font-size: 16px;

This will apply a font size of 16 pixels to all paragraphs on your page.

2. font-weight: This property defines the weight (or thickness) of the text. For example, if you
want to use bold text, you would write:

p{

font-weight: bold;

WEB DEVELOPMENT 184

}

This will apply bold text to all paragraphs on your page.

TEXT-ALIGN:
This property defines the horizontal alignment of text within an element. For example, if
you want to center-align all headings on your page, you would write:

h1, h2, h3 {

text-align: center;

This will center-align all headings (h1, h2, and h3) on your page.

TEXT-DECORATION:
This property defines the decoration of text. For example, if you want to underline all links
on your page, you would write:

a{

text-decoration: underline;

This will underline all links on your page.

LINE-HEIGHT

The line height property specifies the space between the fonts.

WEB DEVELOPMENT 185

p{

line-height: 1.8em;

fonttext.html

WEB DEVELOPMENT 186

fonttext.css

OUTPUT:

Here we have used external css and element selector to give beauty and style to webpage. The
result is like

WEB DEVELOPMENT 187

Using Class Selector we can develop webpage.

DIFFERENT TEXT-PROPERTIES

WEB DEVELOPMENT 188

color: red;

background-color: purple;

text-align: center;

text-transform: uppercase;

text-decoration: none;

word-spacing: 20px;

text-shadow: 1px 1px yellowgreen;

letter-spacing: 20px;

COLOR:

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

WEB DEVELOPMENT 189

BACKGROUND-COLOR

This property is used to set the background-color on the text.

WEB DEVELOPMENT 190

TEXT-ALIGN

The text-align property is used to set the alignment of a text. We can align a text in the left,
right, center, and justify.

TEXT-TRANSFORM

text-transform property is used to specify uppercase and lowercase, and capitalize letters in a text.

WEB DEVELOPMENT 191

TEXT-DECORATION

text-decoration properties are used to decorate text in one declaration.

WEB DEVELOPMENT 192

TEXT-SHADOW

The text-shadow property is used to add the shadow effect to the text.
word-spacing
word-spacing property is used to specify the space between the words in a text.

text-shadow
The text-shadow property is used to add the shadow effect to the text.

WEB DEVELOPMENT 193

LETTER-SPACING

letter-spacing property is used to specify the space between the characters in a text.

WEB DEVELOPMENT 194

KEY TAKEAWAY

1. Colors in CSS: Colors in CSS can be defined using named colors, RGB values, or hexadecimal
values. Each method offers a different way to specify colors, allowing for a wide range of
color options.

2. Named Colors: CSS has 147 predefined color names, such as “red”, “green”, “blue”, etc.
These can be used by specifying the color name in your CSS code.

3. RGB Values: RGB stands for Red, Green, and Blue. RGB color values are represented using
the RGB color model, where each color is represented by a number between 0 and 255.

4. Hexadecimal Values: A hexadecimal color value is a six-digit code that represents the
intensity of red, green, and blue in a color. The first two digits represent the red value, the
second two digits represent the green value, and the last two digits represent the blue
value.

WEB DEVELOPMENT 195

 5. CSS Font and Text Properties: CSS provides various properties to style fonts and text,
including font-family, font-size, font-weight, text-align, text-decoration, and line-height.
These properties allow developers to control the appearance and layout of text on a
webpage.

WEB DEVELOPMENT 196

 Working with CSS3

WEB DEVELOPMENT 197

 SUB-TOPIC 6.4
BACKGROUND AND BORDER IN CSS3, BUTTON STYLE IN CSS3.

BACKGROUND AND BORDER IN CSS3

BACKGROUND IN CSS3

CSS3 introduced several new properties for backgrounds:

1. background-size: Allows you to specify the size of the background images.

2. background-origin: Specifies the origin position of a background image.
3. background-clip: Defines how far a background image or color should extend
within an element.

EXAMPLE:
body {
background-image: url('image.jpg');
background-size: cover;
background-origin: content-box;
background-clip: content-box;
}

BORDER IN CSS3

CSS3 introduced new ways to define the borders of your boxes:

1. border-radius: Allows you to add rounded borders to an element.

2. box-shadow: Applies shadow effects to an element’s frame.
3. border-image: Allows you to set an image as the border of an element.

EXAMPLE:
div {
border: 2px solid;
border-radius: 25px;
box-shadow: 5px 10px #888888;
border-image: url('border.png') 30 round;
}

BUTTON STYLE IN CSS3

WEB DEVELOPMENT 198

Styling buttons in CSS3 can involve several properties, including background-color,
color, border, padding, text-align, text-decoration, and display.

EXAMPLE:
button {
background-color: #4CAF50; /* Green background */
color: white; /* White text */
border: none; /* No borders */
padding: 15px 32px; /* Some padding */
text-align: center; /* Centered text */
text-decoration: none; /* No underline */
display: inline-block; /* Make the links appear like buttons */
font-size: 16px; /* Increase font size */
margin: 4px 2px; /* Add some margins */
cursor: pointer; /* Change mouse cursor on hover */
}

SOME OF THE MOST COMMON BACKGROUND PROPERTIES IN CSS3 ARE:

● background-color: Sets the background color of an element.

● background-image: Sets an image as the background of an element.

● background-repeat: Determines how an image is repeated within an element, such as

repeating horizontally or vertically, or only once.

● background-position: Specifies where the background image should be positioned within

the element.

● background-size: Determines the size of the background image, such as covering the entire
element or showing it at its natural size.

● background-clip: Determines how the background should be clipped within an element's

border or padding area.

● background-origin: Specifies where the background should start within an element's

border or padding area.

● background-attachment: Determines whether the background should scroll with the

content or remain fixed.

background-blend-mode: Allows for blending of multiple background layers, allowing for more
complex and visually interesting effects.

WEB DEVELOPMENT 199

Background.html

<!DOCTYPE html>

<html>

<head>

<title> Backgrounds in CSS </title>

<link rel="stylesheet" href="background.css">

<style>

</style>

</head>

<body>

<p class="bg-para"> This is a paragraph with background image </p>

</body>

</html>

background.css

.bg-para{

background-color: red;

color: rgb(25, 3, 3);

WEB DEVELOPMENT 200

Output:

Background.html

<!DOCTYPE html>

<html>

<head>

<title> Backgrounds in CSS </title>

<link rel="stylesheet" href="background.css">

<style>

</style>

</head>

<body>

<p class="bg-para"> This is a paragraph with background image property please try to
find image behind paragraph.

Ancient manuscripts also divided sentences into paragraphs with line breaks (newline)
followed by an initial at the beginning of the next paragraph. An initial is an oversized
capital letter, sometimes outdented beyond the margin of the text. This style can be seen,
for example, in the original Old English manuscript of Beowulf. Outdenting is still used in
English typography, though not commonly.[2] Modern English typography usually indicates a
new paragraph by indenting the first line. This style can be seen in the (handwritten)

WEB DEVELOPMENT 201

United States Constitution from 1787. For additional ornamentation, a hedera leaf or other
symbol can be added to the inter-paragraph white space, or put in the indentation space.

A second common modern English style is to use no indenting, but add vertical white space to
create "block paragraphs." On a typewriter, a double carriage return produces a blank line
for this purpose; professional typesetters (or word processing software) may put in an
arbitrary vertical space by adjusting leading. This style is very common in electronic
formats, such as on the World Wide Web and email. Wikipedia itself employs this format.

Typographical considerations

Professionally printed material in English typically does not indent the first paragraph,
but indents those that follow. For example, Robert Bringhurst states that we should "Set
opening paragraphs flush left."[2] Bringhurst explains as follows:

The function of a paragraph is to mark a pause, setting the paragraph apart from what
precedes it. If a paragraph is preceded by a title or subhead, the indent is superfluous and
can therefore be omitted.[2]

The Elements of Typographic Style states that "at least one en [space]" should be used to
indent paragraphs after the first,[2] noting that that is the "practical minimum".[3] An em
space is the most commonly used paragraph indent.[3] Miles Tinker, in his book Legibility of
Print, concluded that indenting the first line of paragraphs increases readability by 7%, on
average.[4]

When referencing a paragraph, typographic symbol U+00A7 § SECTION SIGN (&sect;) may be used:
"See § Background".

In modern usage, paragraph initiation is typically indicated by one or more of a preceding

blank line, indentation, an "Initial" ("drop cap") or other indication. Historically, the
pilcrow symbol (¶) was used in Latin and western European languages. Other languages have
their own marks with similar function. </p>

</body>

</html>

WEB DEVELOPMENT 202

Background.css
.bg-para{

background-color: red;

color: rgb(25, 3, 3);

background-image: url('PARULUNIVERSITY.jpg') ;

Output:

Background.css

.bg-para{

background-color: red;

color: rgb(25, 3, 3);

background-image: url('PARULUNIVERSITY.jpg') ;

background-repeat: no-repeat;

WEB DEVELOPMENT 203

Output:

Background.css

.bg-para{

background-color: red;

color: rgb(25, 3, 3);

background-image: url('PARULUNIVERSITY.jpg') ;

background-repeat: no-repeat;

background-position: center;

WEB DEVELOPMENT 204

Output:

Background.css

.bg-para{

background-color: red;

color: rgb(25, 3, 3);

background-image: url('PARULUNIVERSITY.jpg') ;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

WEB DEVELOPMENT 205

Output:

WEB DEVELOPMENT 206

BORDER IN CSS3

CSS3 border property is used to create a border around an HTML element. It is an essential part of
the Box model. In CSS3, we can add multiple borders to an element with different styles, widths,
and colors.

The basic syntax of CSS3 border property is as follows:

Here,

1. border-width: It defines the width of the border.

2. border-style: It defines the style of the border.
3. border-color: It defines the border color.

For example, the following code adds a border of 2px solid black color around an HTML element:

Syntax: border: 2px solid black;

Description:

Here's a brief description of the different aspects of the border property in CSS3:

1. border-width: It defines the width of the border. It takes values in pixels, ems, rems, or
percentages. The default value is medium. You can set different widths for each side of the
border using the following properties:
● border-top-width: it sets the width of the top border.
● border-right-width: it sets the width of the right border.
● border-bottom-width: it sets the width of the bottom border.
● border-left-width: it sets the width of the left border.

Here we are using internal css so no need to create external css file.

Border.html

<!DOCTYPE html>

<html>

<head>

<title> Backgrounds in CSS </title>

WEB DEVELOPMENT 207

 <style>

.para {

border: 2px solid black;

</style>

</head>

<body>

<p class="para"> This is a paragraph </p>

</body>

</html>

Output:

WEB DEVELOPMENT 208

2. border-style: It defines the style of the border. It takes values such as solid, dashed, dotted,
double, groove, ridge, inset, outset, none, hidden, and groove. The default value is none. You
can set different styles for each side of the border using the following properties:
● border-top-style: it sets the style of the top border.
● border-right-style: it sets the style of the right border.
● border-bottom-style: it sets the style of the bottom border.
● border-left-style: it sets the style of the left border.

Using an external css method we are going to write code for different border style.

border.html

<!DOCTYPE html>

<html>

<head>

<title> BORDER in CSS </title>

<link rel="stylesheet" href="border.css">

<style>

WEB DEVELOPMENT 209

 </style>

</head>

<body>

<p class="para"> This is a paragraph </p>

</body>

</html>

border.css

.para {

border-style: solid;

Output:

dotted - Used to set a dotted border.

.para {

WEB DEVELOPMENT 210

 border-style: dotted;
}

Output:

double - Defines a double border.

.para {
border-style: double;
}

WEB DEVELOPMENT 211

Output:

Grove: Groove defines a 3D grooved border. The effect depends on the border-color value.

.para {
border-style: groove;
}

Output:

WEB DEVELOPMENT 212

ridge - It defines a 3D ridged border. The effect depends on the border-color value.

.para {
border-style: ridge;
}

Output:

Hidden: Defines a hidden border.

WEB DEVELOPMENT 213

 3. border-color: It defines the color of the border. It takes color values such as named colors,
hexadecimal, RGB, RGBA, or HSL. The default value is the current color of the element. You
can set different colors for each side of the border using the following properties:
● border-top-color: it sets the color of the top border.
● border-right-color: it sets the color of the right border.
● border-bottom-color: it sets the color of the bottom border.
● border-left-color: it sets the color of the left border.

WEB DEVELOPMENT 214

border.html

<!DOCTYPE html>
<html>
<head>
<title> BORDER in CSS </title>
<link rel="stylesheet" href="border.css">
<style>
</style>
</head>
<body>

WEB DEVELOPMENT 215

 <p class="para"> This is a paragraph </p>
</body>
</html>

border.css and output:

KEY TAKEAWAY

1. Background in CSS3: CSS3 introduced several new properties for backgrounds such as
background-size, background-origin, and background-clip that allow you to control the size,
origin position, and extent of a background image or color.

WEB DEVELOPMENT 216

 2. Border in CSS3: CSS3 introduced new ways to define the borders of your boxes with
properties like border-radius, box-shadow, and border-image. These allow you to add
rounded borders, apply shadow effects, and set an image as the border of an element.

3. Button Style in CSS3: Styling buttons in CSS3 can involve several properties, including
background-color, color, border, padding, text-align, text-decoration, and display. These
properties allow you to control the appearance of buttons on a webpage.

WEB DEVELOPMENT 217

 Working with CSS3

WEB DEVELOPMENT 218

 SUB-TOPIC 6.5

BOX-MODEL IN CSS, TRANSFORM IN CSS, ANIMATIONS IN CSS

BOX MODEL

The box model in CSS3 refers to the rectangular box that surrounds every HTML element. This box
consists of four main components: content, padding, border, and margin.

1. Content refers to the actual content of the element, such as text or images.
2. Padding is the space between the content and the border.
3. Border separates the content and padding from the margin.
4. Margin is the space outside the border and separates the element from the neighboring
elements.

These components can each be styled with CSS properties to control the spacing and layout of the
element. Understanding the box model is important for designing layouts in CSS.

WEB DEVELOPMENT 219

 (

WEB DEVELOPMENT 220

COMPONENTS OF BOX MODEL:

Box consists of four main components: content, padding, border, and margin.

The box model in CSS defines the space occupied by an HTML element. It consists of several
components, including content, padding, borders, and margin. Here is the syntax used to specify
each component:

1. Content: This is the innermost part of the box, where the actual content of the element is
displayed. To specify the content size, use the following property:
● width: value; - sets the width of the content area.
● height: value; - sets the height of the content area.

2. Padding: This is the space between the content and the border. To specify the padding size,
use the following property:
●padding: top right bottom left; - sets the padding size for all four sides.
●padding-top: value; - sets the padding size for the top side.
●padding-right: value; - sets the padding size for the right side.
●padding-bottom: value; - sets the padding size for the bottom side.
●padding-left: value; - sets the padding size for the left side.

3. Border: This is the line that surrounds the content and padding. To specify the border size
and style, use the following property:
●border: value style color; - sets the border size, style, and color for all four sides.
●border-top: value style color; - sets the border size, style, and color for the top side.
●border-right: value style color; - sets the border size, style, and color for the right side.
●border-bottom: value style color; - sets the border size, style, and color for the bottom
side.
●border-left: value style color; - sets the border size, style, and color for the left side.

4. Margin: This is the space outside the border. To specify the margin size, use the following
property:
● margin: top right bottom left; - sets the margin size for all four sides.
● margin-top: value; - sets the margin size for the top side.

WEB DEVELOPMENT 221

 ● margin-right: value; - sets the margin size for the right side.
● margin-bottom: value; - sets the margin size for the bottom side.
● margin-left: value; - sets the margin size for the left side.

Overall, understanding the box model is essential for creating responsive and visually appealing
web pages using CSS.

boxmodel.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

WEB DEVELOPMENT 222

 <title> Mox Model in CSS</title>

<style>

.myBox {

width: 200;

border: 6px solid rgb(14, 16, 150);

padding: 80px;

margin: 40px;

</style>

</head>

<body>

<div class="myBox"> This is a Box </div>

</body>

</html>

Output:

WEB DEVELOPMENT 223

TRANSFORM IN CSS3

CSS3 Transforms allow developers to manipulate elements in 2D and 3D space. They are used to
rotate, skew, scale, and translate elements. Using transforms, we can move elements around,
stretch or shrink them, and rotate them as well. The primary syntax for transformation is as
follows:

Syntax is like:

transform: property(value);
Breaking this code down, the ‘transform’ property is the CSS3 function that can take any number
of properties that modify an element's transformation. The ‘property’ part of the declaration
includes the type of transformation you want to apply to the HTML element, such as rotate, scale,
or translate. The ‘value’ component of the declaration is the amount by which you want to apply
the transformation.

There are several properties that are used for implementing CSS3 transforms. They include the
following:

1. translate
2. scale
3. rotate
4. skew
5. perspective

TRANSLATE:

The translate property is used to move an element around the x and y-axis. It is the same
as moving an element with the position property. The syntax is as follows:

transform: translate(x, y);

transform.css

WEB DEVELOPMENT 224

div:hover {
transform: translate(100px,
50px);
}
transform: translateX(34px);

transform: translateY(34px);

Defines a translation, using only the value for the X-axis.

Defines a translation, using only the value for the Y-axis.

Transform.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Transfor Property in CSS </title>
<link rel="stylesheet" href="transform.css">
<style>
</style>
</head>
<body>

WEB DEVELOPMENT 225

 <div class="div">

<h2>This is a heading in a div element</h2>

<p>This is some text in a div element.</p>
<h1>The heading tag 1in div element</h1>
<p>My paragraph of text</p>
</div>

</body>
</html>

Output:

SCALE

The scale property is used to change the size of an element. The syntax is as follows:

WEB DEVELOPMENT 226

transform: scale(x, y);

Example:

div:hover {
transform: scale(1.5, 1.5);
}
transform: scaleX(4);

transform: scaleY(4);

Defines a scale transformation by giving a value for the X-axis.

Defines a scale transformation by giving a value for the Y-axis.

ROTATE

The rotate property is used to rotate an element. The syntax is as follows:

transform: rotate(angle);

example.

div:hover {
transform: rotate(45deg);;
}
transform: rotateX(34deg);
transform: rotateY(34deg);

WEB DEVELOPMENT 227

Defines a 3D rotation along the X-axis.

Defines a 3D rotation along the Y-axis.

SKEW

The skew property is used to distort an element along the x or y axis. The syntax is as follows:

transform: skew(x-angle, y-angle);

Example:

div:hover {
transform: skew(40deg, 34deg);
}
transform: skewX(24deg);

transform: skewY(24deg);

skew(x-angle,y-angle): Defines a 2D skew transformation along the X-axis and the Y-axis.

CSS3 Transforms provide a means to create visually stunning web pages. The process of adding a
transformation effect is pretty simple to understand and execute. Using the transformation
properties, it is possible to quickly design complex visual effects that would have once required
extensive image manipulation. With CSS3 Transforms in hand, designers and developers can
continue to push the boundaries of the web, hoping to take websites to a new level of creativity
and imagination.

Example for transform in css3.

Transformexample.html

<!DOCTYPE html>

<html lang="en">

WEB DEVELOPMENT 228

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> Transform Example in CSS </title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

div {

height: 200px;

width: 100px;

border: 8px solid red;

transition: all 2s;

div:hover {

transform: scale(1.1);

</style>

</head>

<body>

<div>

WEB DEVELOPMENT 229

 <ol reversed>

<li>HTML</li>

<li>CSS</li>

<li>JS</li>

</ol>

<ol type="I">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</div>

</body>

</html>

Write this code in your Code Editor and See the output on the browser window.

ANIMATION IN CSS3

Animations in CSS3 allows you to create a sequence of changing styles to make an element
animate between different styles over a specified duration. Animations can be used to create
transitions between states or add visual interest to your interface without adding any extra
elements. Animations are created using keyframe blocks that specify the percentages of time
elapsed and the styles applied to an element at each of those times.

animation-name: name;

animation-duration: 2s; /* how long the animation lasts */

animation-timing-function: ease-in-out; /* how the animation behaves */

WEB DEVELOPMENT 230

 animation-delay: 0.5s; /* how long before the animation starts */

animation-iteration-count: 3; /* how many times the animation repeats */

animation-direction: alternate; /* how the animation direction changes */

animation-fill-mode: forwards; /* what happens after the animation ends */

Here's a specific example of a bouncing ball animation using CSS3:

@keyframes bounce {

0% { transform: translateY(0); }

50% { transform: translateY(-10px); }

100% { transform: translateY(0); }

.ball {

width: 50px;

height: 50px;

background-color: red;

animation-name: bounce;

animation-duration: 1s;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;

In this example, we define a keyframe called "bounce" that specifies how the ball's position should
change over time. We use transform: translateY() to move it up and down. We then apply that
keyframe to a .ball class, specifying that it should last for 1 second, use an ease-in-out timing
function, and repeat indefinitely. This produces a ball that bounces up and down in place.

WEB DEVELOPMENT 231

KEY TAKEAWAY

1. Box Model: The box model in CSS refers to the rectangular box that surrounds every HTML
element. It consists of four main components: content, padding, border, and margin. These
components can each be styled with CSS properties to control the spacing and layout of
the element.

2. Content: This is the innermost part of the box, where the actual content of the element is
displayed. The width and height properties are used to specify the size of the content area.

3. Padding and Border: Padding is the space between the content and the border, and the
border is the line that surrounds the content and padding. The padding and border
properties are used to specify their respective sizes.

4. Margin: This is the space outside the border, which separates the element from the
neighboring elements. The margin property is used to specify the size of the margin.

5. Transform in CSS3: CSS3 Transforms allow developers to manipulate elements in 2D and

3D space. They are used to rotate, skew, scale, and translate elements, providing more
flexibility in designing web pages.

WEB DEVELOPMENT 232

 Basics of Bootstrap

WEB DEVELOPMENT 233

 SUB-TOPIC 7.1
INTRODUCTION OF BOOTSTRAP

BOOTSTRAP

• Bootstrap is a popular open-source front-end framework for building responsive and

visually appealing web applications and websites.

• Developed by Twitter.

• It is a comprehensive toolkit that provides a wide range of pre-designed and pre-coded

elements, such as buttons, navigation bars, forms, and more.

• Bootstrap simplifies the web development process by offering a collection of CSS and
JavaScript components that can be easily incorporated into your projects.

KEY FEATURES AND COMPONENTS OF BOOTSTRAP INCLUDE:

Grid System:

• Bootstrap's responsive grid system is the foundation of its design.

• It allows developers to create flexible and responsive layouts, ensuring that web
applications and websites look and function well on various screen sizes and devices.

Pre-Styled Components:

• Bootstrap offers a rich library of pre-styled UI components, including buttons, forms, tables,
alerts, and more.

WEB DEVELOPMENT 234

 • These components can be easily customized to match your project's design.

CSS Classes:

• Bootstrap uses CSS classes to apply styling to elements, making it simple to implement its
features.

• For instance, you can add classes like btn for buttons or navbar for navigation bars to get
started quickly.

JavaScript Plugins:

• Bootstrap includes a set of JavaScript plugins for creating interactive features like
carousels, modals, tooltips, and popovers.

Responsive Design:

• Bootstrap is designed with mobile-first principles, ensuring that your web applications are
mobile-friendly and adapt to various devices and screen sizes.

KEY TAKEAWAYS

1. Bootstrap: Bootstrap is a popular open-source front-end framework developed by Twitter.

It provides a comprehensive toolkit of pre-designed and pre-coded elements, simplifying
the web development process.

2. Grid System: Bootstrap’s responsive grid system is the foundation of its design. It allows
developers to create flexible and responsive layouts that work well on various screen sizes
and devices.

3. Pre-Styled Components: Bootstrap offers a rich library of pre-styled UI components,

including buttons, forms, tables, alerts, and more. These components can be easily
customized to match your project’s design.

WEB DEVELOPMENT 235

 4. CSS Classes and JavaScript Plugins: Bootstrap uses CSS classes to apply styling to elements
and includes a set of JavaScript plugins for creating interactive features like carousels,
modals, tooltips, and popovers.

5. Responsive Design: Bootstrap is designed with mobile-first principles, ensuring that your
web applications are mobile-friendly and adapt to various devices and screen sizes.

WEB DEVELOPMENT 236

 Basics of Bootstrap

WEB DEVELOPMENT 237

 SUB-TOPIC 7.2
SYNTAX OF BOOTSTRAP

● Bootstrap is designed to be user-friendly and follows a specific syntax and structure.

• It uses HTML, CSS, and JavaScript components to build responsive web applications.

BASIC SYNTAX AND STRUCTURE FOR USING BOOTSTRAP:

1. HTML STRUCTURE:

<!DOCTYPE html>

<html>

<head>

<title>Your Page Title</title>

<!-- Add Bootstrap CSS and optionally your custom CSS here -->

</head>

<body>

<!-- Your content goes here -->

<!-- Add Bootstrap JavaScript and optionally your custom JavaScript here>

</body>

</html>

WEB DEVELOPMENT 238

 • Start with the standard HTML structure, including a document type declaration, <html>,
<head>, and <body> elements.

• Include the Bootstrap CSS file in the <head> section to apply Bootstrap styles. You can also
add your custom CSS files here.

• Your content goes in the <body> section.

• Include the Bootstrap JavaScript and optionally your custom JavaScript files before the
closing </body> tag.

2. BOOTSTRAP COMPONENTS:

• Bootstrap components are typically added within the HTML structure and use predefined
classes. For example:

Buttons:

<button class="btn btn-primary">Primary Button</button>

Navigation Bar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Your Brand</a>

<!-- Navigation links go here -->

</nav>

Grid System:

<div class="container">

WEB DEVELOPMENT 239

 <div class="row">

<div class="col-md-6">Column 1</div>

<div class="col-md-6">Column 2</div>

</div>

</div>

3. RESPONSIVE DESIGN:

• Bootstrap's grid system allows you to create responsive layouts easily.

• Use classes like col-sm-, col-md-, and col-lg- to specify the number of columns a container
should span on different screen sizes.

4. CUSTOMIZATION:

• You can customize Bootstrap's appearance by modifying variables in a custom CSS file.

• Override Bootstrap variables to match your project's design.

5. JAVASCRIPT COMPONENTS:

• Bootstrap offers JavaScript plugins for interactive elements.

• Use attributes like data-toggle to activate these plugins:

<button type="button" class="btn btn-primary" data-toggle="modal" data-

target="#myModal">Open Modal</button>

KEY TAKEAWAYS

1. Bootstrap is a widely-used open-source front-end framework for web development,

providing a collection of HTML, CSS, and JavaScript components and tools that enable
developers to build responsive, mobile-first websites.

WEB DEVELOPMENT 240

 2. Bootstrap uses a grid system for layout design. The grid system divides the screen into 12
equal columns, making it easy to create responsive layout.

3. Bootstrap provides pre-designed components and templates, facilitating rapid

prototyping and enabling developers to quickly create functional website layouts.

4. Bootstrap ensures consistent cross-browser compatibility. Its standardized CSS and

JavaScript codebase ensures consistent rendering and functionality across various web
browser

5. Bootstrap can be included in a website in two ways: either by downloading and hosting
the Bootstrap files locally, or by including Bootstrap through CDN links.

WEB DEVELOPMENT 241

 Basics of Bootstrap

WEB DEVELOPMENT 242

 SUB-TOPIC 7.3
CONTAINER

• In Bootstrap, a "container" is a fundamental building block for creating the layout of your
web page.

• It is a key component of the grid system and helps you organize and align content.

BOOTSTRAP OFFERS TWO MAIN TYPES OF CONTAINERS:

1. .container
2. .container-fluid.

.CONTAINER:

• The .container class creates a fixed-width container.

• The content inside this container is centered on the page.

• It's designed for responsive web design, meaning the container's width adjusts based on
the screen size, making it a good choice for most web layouts.

Usage:

<div class="container">
<!-- Your content goes here -->
</div>

WEB DEVELOPMENT 243

.CONTAINER-FLUID:

• The .container-fluid class creates a full-width container that spans the entire viewport
width.

• The content inside it stretches to fill the entire width.

• It's often used for full-width headers or backgrounds.

Usage:

<div class="container-fluid">
<!-- Your content goes here -->
</div>

HERE'S A BASIC EXAMPLE OF HOW TO USE A BOOTSTRAP CONTAINER:

<!DOCTYPE html>

<html>

<head>

WEB DEVELOPMENT 244

 <title>Bootstrap Container Example</title>

<!-- Include Bootstrap CSS and optionally your custom CSS here -->

</head>

<body>

<div class="container">

<h1>Fixed-Width Container</h1><div class="container-fluid">

<h1>Full-Width Container</h1>

<p>This content spans the entire width of the viewport.</p>

</div>

<!-- Include Bootstrap JavaScript and optionally your custom JavaScript here -->

</body>

</html>

KEY TAKEAWAYS

1. Bootstrap Containers: Bootstrap offers two main types of containers, .container

and .container-fluid, which are crucial for layout purposes in Bootstrap’s grid system.

2. .container: The .container class creates a fixed-width container that is centered on the
page. It’s designed for responsive web design, meaning the container’s width adjusts based
on the screen size.

3. .container-fluid: The .container-fluid class creates a full-width container that spans the
entire viewport width. The content inside it stretches to fill the entire width. It’s often used
for full-width headers or backgrounds.

WEB DEVELOPMENT 245

 4. Responsive Design: Both .container and .container-fluid are designed with responsiveness
in mind, making them adaptable to various screen sizes and devices.

5. Usage in HTML: These classes are used in the HTML structure of a webpage, typically as a
wrapper for other content, to provide a responsive layout.

WEB DEVELOPMENT 246

 Basics of Bootstrap

WEB DEVELOPMENT 247

 SUB-TOPIC 7.4
CONNECTIVITY OF BOOTSTRAP IN PAGE

• Bootstrap provides a framework for building responsive and visually consistent web pages.

• it doesn't handle dynamic connectivity or data interactions on its own.

• To achieve connectivity, you would typically use HTML, JavaScript, and possibly server-side
technologies.

Example: Building a Connected Web Page with Bootstrap

• Suppose you want to create a web page for a contact list.

• You want to display a list of contacts and allow users to click on a contact to view more
details.

• This involves connectivity between elements on the page.

HTML STRUCTURE:
• Start with the HTML structure using Bootstrap to create a responsive layout.

For example

<div class="container">
<h1>Contact List</h1>
<div class="row">
<div class="col-md-4">
<ul class="list-group" id="contact-list">
<!-- Contacts will be dynamically added here -->
</ul>
</div>
<div class="col-md-8" id="contact-details">
<!-- Contact details will be displayed here -->
</div>
</div>
</div>
WEB DEVELOPMENT 248
BOOTSTRAP COMPONENTS:
• Use Bootstrap components like cards and buttons to style your contact list.

• Each contact in the list can be a card, and you can use buttons for interactions.

<li class="list-group-item">
<div class="card">
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<p class="card-text">[email protected]</p>
<button class="btn btn-primary view-contact">View
Details</button>
</div>
</div>
</li>

JAVASCRIPT:
• To add connectivity, use JavaScript to handle user interactions.

• For example, when a "View Details" button is clicked, you can load and display the contact
details in the right-hand column.

$(document).ready(function () {
$(".view-contact").click(function () {
// Retrieve contact details and display them in the
contact-details column
var contactDetails = getContactDetails($(this).siblings(".card-
body"));
$("#contact-details").html(contactDetails);
});
});

WEB DEVELOPMENT 249

SERVER-SIDE CONNECTIVITY:
• If your contact list is dynamic and comes from a server, you would need server-side code
(e.g., PHP, Node.js) to fetch data and generate the HTML for the contacts dynamically.

function getContactDetails(contactCard) {
var name = $(contactCard).find(".card-title").text();
var email = $(contactCard).find(".card-text").text();
return `<h2>${name}</h2><p>${email}</p>`;
}

• Connectivity in web development often involves a combination of HTML, CSS, JavaScript,

and server-side technologies to create interactive and data-driven web pages.

• Bootstrap helps with the front-end presentation, making it responsive and visually
appealing.

KEY TAKEAWAY

1. Bootstrap Framework: Bootstrap provides a framework for building responsive and

visually consistent web pages but doesn’t handle dynamic connectivity or data interactions
on its own.
2. HTML Structure: The HTML structure using Bootstrap is the starting point to create a
responsive layout.
3. Bootstrap Components: Bootstrap components like cards and buttons are used to style
your content. They provide a consistent look and feel across the website.
4. JavaScript for Connectivity: JavaScript is used to handle user interactions and add
connectivity to the web page. For example, when a button is clicked, you can load and
display additional content.

WEB DEVELOPMENT 250

 5. Server-Side Connectivity: If your content is dynamic and comes from a server, you would
need server-side code (e.g., PHP, Node.js) to fetch data and generate the HTML
dynamically. This allows for interactive and data-driven web pages.

WEB DEVELOPMENT 251

 Basics of Bootstrap

WEB DEVELOPMENT 252

 SUB-TOPIC 7.5
BOOTSTRAP EXAMPLE

NAVBAR EXAMPLE:

Code:

Output:

WEB DEVELOPMENT 253

ALERTS EXAMPLE:

Code:

Output:

WEB DEVELOPMENT 254

CARD EXAMPLE:

Code

Output:

WEB DEVELOPMENT 255

MODAL EXAMPLE:

Code:

Output:

WEB DEVELOPMENT 256

CAROUSEL EXAMPLE:

Output:

WEB DEVELOPMENT 257

 Components of Bootstrap

WEB DEVELOPMENT 258

 SUB-TOPIC 8.1

JUMBOTRON, BUTTON, GRID , TABLE

1. Jumbotron

2. Button

3. Grid

4. Table

1. JUMBOTRON:

• A jumbotron is a large, attention-grabbing container that is often used at the top of a web
page to highlight key content.

• It typically includes a large title, a description, and a call-to-action button.

Example:

<div class="jumbotron">

<h1 class="display-4">Welcome to Our Website</h1>

<p class="lead">We are excited to share our content with you.</p>

<hr class="my-4">

<p>Explore our services and products below.</p>

<a class="btn btn-primary btn-lg" href="#" role="button">Explore</a>

WEB DEVELOPMENT 259

</div>

2. BUTTON:

• Bootstrap provides a variety of button styles and sizes that can be easily applied to HTML
elements.

• Buttons are used for interactive actions, such as navigation, form submission, or calls to
action.

Example:

<button class="btn btn-info">Learn More</button>

<button class="btn btn-warning">Get Started</button>

<button class="btn btn-danger">Contact Us</button>

3. GRID SYSTEM:

• Bootstrap's grid system is a powerful layout tool that divides content into rows and
columns, making it responsive and adaptable to different screen sizes.

• It's based on a 12-column layout system.

Example:

<div class="container">

<div class="row">

<div class="col-md-6">

<h2>Our Services</h2>

<!-- Content for services -->

WEB DEVELOPMENT 260

 </div>

<div class="col-md-6">

<h2>Our Products</h2>

<!-- Content for products -->

</div>

</div>

</div>

TABLE:

• Bootstrap provides CSS classes to style HTML tables, making them visually appealing.

• You can use Bootstrap classes to create well-structured and nicely formatted tables.

Example:

<table class="table">

<thead>

<tr>

<th scope="col">Name</th>

<th scope="col">Email</th>

<th scope="col">Phone</th>

</tr>

</thead>

WEB DEVELOPMENT 261

 <tbody>

<tr>

<td>John Doe</td>

<td>[email protected]</td>

<td>(123) 456-7890</td>

</tr>

<tr>

<td>Jane Smith</td>

<td>[email protected]</td>

<td>(987) 654-3210</td>

</tr>

</tbody>

</table>

KEY TAKEAWAY

1. Jumbotron: A jumbotron is a large, attention-grabbing container often used at the top of a

web page to highlight key content. It typically includes a large title, a description, and a
call-to-action button.

2. Button: Bootstrap provides a variety of button styles and sizes that can be easily applied to
HTML elements. Buttons are used for interactive actions, such as navigation, form
submission, or calls to action.

WEB DEVELOPMENT 262

 3. Grid System: Bootstrap’s grid system is a powerful layout tool that divides content into
rows and columns, making it responsive and adaptable to different screen sizes. It’s based
on a 12-column layout system.

4. Table: Bootstrap provides CSS classes to style HTML tables, making them visually appealing.
You can use Bootstrap classes to create well-structured and nicely formatted tables.

5. Responsive Design: All these components are designed with responsiveness in mind,
making them adaptable to various screen sizes and devices. This is a key feature of
Bootstrap that simplifies the process of making a website mobile-friendly. Use

WEB DEVELOPMENT 263

 Components of Bootstrap

WEB DEVELOPMENT 264

 SUB-TOPIC 8.2
FORM, ALERT, WELLS, BADGE AND LABEL

FORM
• Bootstrap provides a comprehensive set of styles and components for creating forms.

• These include input fields, checkboxes, radio buttons, dropdowns, and more.

Output with source code:

WEB DEVELOPMENT 265

ALERT:
• Alerts are used to provide feedback or messages to users. Bootstrap offers contextual alert
styles

WELLS:
• Wells are simple containers with rounded corners that can be used to highlight or draw
attention to content.

• However, they are deprecated in Bootstrap 4 in favor of more modern layout components.

Example:

WEB DEVELOPMENT 266

 BADGE:
• Badges are used to display numbers or labels, often in the form of a small circle with text.

• They can be used to show counts or notifications.

WEB DEVELOPMENT 267

LABEL:
• Labels are used to attach descriptive text to form elements.

• In Bootstrap, you can use the <label> element along with appropriate classes for styling.

Example:

KEY TAKEAWAYS

1. Form: Bootstrap provides a comprehensive set of styles and components for creating
forms, including input fields, checkboxes, radio buttons, dropdowns, and more.

WEB DEVELOPMENT 268

 2. Alert: Alerts are used to provide feedback or messages to users. Bootstrap offers
contextual alert styles for different types of messages.

3. Wells: Wells are simple containers with rounded corners that can be used to highlight or
draw attention to content. However, they are deprecated in Bootstrap 4 in favor of more
modern layout components.

4. Badge: Badges are used to display numbers or labels, often in the form of a small circle
with text. They can be used to show counts or notifications.

5. Label: Labels are used to attach descriptive text to form elements. In Bootstrap, you can
use the <label> element along with appropriate classes for styling.

WEB DEVELOPMENT 269

 Components of Bootstrap

WEB DEVELOPMENT 270

 SUB-TOPIC 8.3
PANELS, PAGER, IMAGE, GLYPHICON, CAROUSEL

PANELS:

• Panels are rectangular containers used to group and style related content.

• In Bootstrap 4, panels are replaced with Cards for better flexibility and design.

PAGER:

• pager is used to navigate between pages or sections of content.

• In Bootstrap 4, pagers are replaced with Pagination components for better styling.

IMAGE:

• Bootstrap allows you to style images using responsive image classes for various screen
sizes.

• You can also add rounded or circle styles.

GLYPHICON:

• Glyphicons are small, monochromatic icons that can be used in buttons or other elements.

• However, Glyphicons were removed from Bootstrap 4 and are not recommended.

• You can use other icon libraries like Font Awesome instead.

WEB DEVELOPMENT 271

EXAMPLE:

Output:

WEB DEVELOPMENT 272

CAROUSEL:

• A carousel is used to display a rotating set of images or content.

• It's perfect for creating image sliders or featured content displays.

EXAMPLE:

KEY TAKEAWAY

1. Panels: Panels are rectangular containers used to group and style related content. In
Bootstrap 4, panels are replaced with Cards for better flexibility and design.

WEB DEVELOPMENT 273

 2. Pager: Pager is used to navigate between pages or sections of content. In Bootstrap 4,
pagers are replaced with Pagination components for better styling.

3. Image: Bootstrap allows you to style images using responsive image classes for various
screen sizes. You can also add rounded or circle styles.

4. Glyphicon: Glyphicons are small, monochromatic icons that can be used in buttons or
other elements. However, Glyphicons were removed from Bootstrap 4 and are not
recommended. You can use other icon libraries like Font Awesome instead.

5. Carousel: A carousel is used to display a rotating set of images or content. It’s perfect for
creating image sliders or featured content displays.

WEB DEVELOPMENT 274

 Components of Bootstrap

WEB DEVELOPMENT 275

 SUB-TOPIC 8.4
PROGRESS BAR, LIST GROUP

PROGRESS BAR:

• Progress bars are used to visually represent the progress or completion of a task, such as
file uploads or loading processes.

LIST GROUP:

• List groups allow you to create a styled list of items. They are often used for displaying a list
of items, such as products, contacts, or notifications.

EXAMPLE:

WEB DEVELOPMENT 276

KEY TAKEAWAY

1. Progress Bar: Progress bars in Bootstrap are used to visually represent the progress or
completion of a task, such as file uploads or loading processes. They provide a visual cue to
users about the status of an ongoing process.

2. List Group: List groups in Bootstrap allow you to create a styled list of items. They are often
used for displaying a list of items, such as products, contacts, or notifications.

3. Styling and Customization: Both progress bars and list groups can be customized and
styled using Bootstrap’s CSS classes to fit the design needs of your website.

4. Interactivity: These components can be made interactive with the addition of JavaScript,
enhancing the user experience.

5. Responsive Design: Like all Bootstrap components, progress bars and list groups are
designed to be responsive, ensuring they look and function well on devices of all sizes.

WEB DEVELOPMENT 277

 Components of Bootstrap

WEB DEVELOPMENT 278

 SUB-TOPIC 8.5
DROPDOWN, COLLAPSE

DROPDOWN:

• Dropdowns are used to create interactive menus or lists that are hidden by default and
appear when the user triggers them.

COLLAPSE:

• Collapse allows you to create collapsible elements, such as panels or sections of content
that can be expanded or collapsed by the user.

EXAMPLE:

WEB DEVELOPMENT 279

EXAMPLE OUTPUT:

KEY TAKEAWAY

1. Dropdowns: Dropdowns in Bootstrap are used to create interactive menus or lists that are
hidden by default and appear when the user triggers them. They are useful for saving
space and keeping the interface clean.

2. Collapse: The Collapse component in Bootstrap allows you to create collapsible elements,
such as panels or sections of content that can be expanded or collapsed by the user. This is
useful for managing large amounts of content or for creating accordions.

3. Interactivity: Both Dropdowns and Collapse components enhance the interactivity of a

webpage, providing users with a dynamic browsing experience.

4. Space Management: These components are effective tools for managing space on a
webpage, allowing for a cleaner and more organized layout.

5. Responsive Design: Like all Bootstrap components, Dropdowns and Collapse are designed
to be responsive, ensuring they look and function well on devices of all sizes.

WEB DEVELOPMENT 280