MARUDHAR KESARI JAIN COLLEGE FOR WOMEN (AUTONOMOUS)

VANIYAMBADI
PG and Department of Computer Applications
III BCA – Semester – VI
E-Notes (Study Material)

Core Course -1: Open Source Software Code:FCA61

UNIT I: INTRODUCTION TO HTML, CSS

Need of Open Source –Advantages of Open source –Application of Open Source – HTML – HTML
tags –Dynamic Web content– HTTP Request and Response Procedure–Introduction to HTML5–
HTML5 Canvas – HTML5 Audio and Video–Introduction to CSS – CSS Rules –Style Types – CSS
Selectors– CSS Colors.

Learning Objectives:
1.To understand the concept of HTML, HTML5 and CSS.
2.To understand the concept of scripting code for a website.
3.To understand the concept of scripting code for a website.
4.To understand the fundamentals of PHP language combined with HTML.
5.To understand the fundamentals of PERL languages.

Course Outcome:
1.The student will be able to understand the concept of HTML, HTML5 and CSS.
2.The student will be able to learn to inspect and detect errors by going through each and every code
segment.
3.The student will be able to understand basic concept of Java script and MYSQL.
4.The student will be able to understand basic concept of PHP.
5.The student will be able to understand basic concept of PERL.

1.Introduction to Opensource software:

The term Open-source is closely related to Open-source software (OSS). Open-source software is a type of
computer software that is released under a license, but the source code is made available to all the users.
The copyright holders of such software allow the users to use it and do some valuable modifications in its
source code to add some new features, to improve the existing features, and to fix bugs if there are any.
Because of this reason only Open-source software is mostly developed collaboratively.
Some famous examples of Open-source products are :
Operating systems –
Android, Ubuntu, Linux
Internet browsers –
Mozilla Firefox, Chromium
Integrated Development Environment (IDEs) –
Vs code (Visual Studio Code), Android Studio, PyCharm, Xcode

1
Today’s open-source technologies produce cutting-edge software for free, lowering IT costs for businesses.
Here’s a list of some of the most innovative and top open source technologies to master for software
development, cloud computing, devops, machine learning, and many more applications.
Here are some of the top open source technologies that you can master:
 Mozilla Firefox
 LibreOffice
 GIMP
 VLC Media Player
 Shotcut
 Brave
 Linux
 Python
 PHP
 GNU Compiler Collection
Let's now discuss these top open source software examples in detail:
1. Mozilla Firefox
Mozilla Firefox is a free and open-source internet browser that offers numerous plugins which can be
accessed with a single mouse click. Available for Android, iOS, Linux, and Windows, Mozilla is free to
use, modify and redistribute. Mozilla was born about 20 years ago out of the open-source software
movement, and over the years, it reshaped the technology industry and the way social networks and
operating systems operate. Today, open-source is mainstream, and it powers tech giants like Google,
Facebook, and even Microsoft.
2. LibreOffice
LibreOffice is a free and open-source alternative to Microsoft Office. It is a complete office suite like MS
Office, with which you can offer presentations, documents, spreadsheets, and databases. LibreOffice is used
by millions of people all over the world. The clean interface and feature-rich tools of this open-source
software allow users to use their creativity and enhance productivity. Unlike Microsoft Office, which is
available at a price, LibreOffice is accessible totally free. This makes it the most versatile open-source
office suite available in the market. The software is available in Mac, Linux, and Windows and is compatible
with all kinds of document formats, including Microsoft Word, Excel, PowerPoint, and Publisher.
3. GIMP
The photo editing tool GIMP is one of the most popular and best maintained open-source software available.
It offers image editing, filters, effects, and flexibility features like some of the expensive image editing
tools, yet it is completely free. With GIMP, you can use layers, filters, automatic photo enhancement
features, and create new graphic design elements easily. Available across different operating systems,
including Windows, Mac, and Linux, GIMP has a fully customizable interface and allows users to download
plug-ins created by the GIMP community. It is a favored photo editor of photographers, graphic designers,
and illustrators.

2
4. VLC Media Player
The VLC multimedia player is a free open source software used for video, audio, and media files. Most
users use VLC to play discs, webcams, streams, and devices. VLC media player allows optimizing
multimedia files for specific hardware configuration and offers numerous extensions for users to create
customized designs. On top of it, the software runs on different platforms like Android, Mac OS X, Linux,
Windows, iOS.
5. Shotcut
This free, open-source video editing software offers advanced editing features like premium editors.
Preferred for its ability to edit every format of audio, video, or photo media, Shotcut also offers HDMI
preview and capture, a plethora of codecs, and non-destructive audio and video editing. This allows users
to compile effects without any loss in video quality.
6. Brave
The open-source Brave web browser is designed to keep browsing activity private by automatically
disabling website trackers and blocking ads. Brave offers a faster and more secure browsing experience
than with Google Chrome, plus users can access most Google Chrome extensions.
7. Linux
Linux is the most in-demand open-source operating system available in the market. Most commonly used
on desktops and Android devices, Linux comes absolutely free and is extremely customizable. The reasons
for the immense popularity of Linux are its user-friendliness, strong security features, and excellent
community support.
8. Python
One of the most popular programming and scripting languages used by software developers, Python, is an
open-source software that is free to use and distribute. It is powerful and fast, easy to learn and use, and
runs everywhere, which is why developers choose Python as one of the top open-source technologies
available.
9. PHP
PHP is an open-source scripting language used for creating dynamic and interactive web pages and various
digital platforms. PHP can be embedded into HTML. What sets PHP from other languages is that it is
extremely simple for a beginner to learn but offers many advanced features for professional developers.
Some of the most powerful websites like Slack and Spotify have been powered by PHP.
10. GNU Compiler Collection
The GNU Compiler Collection is a set of compilation and development tools used for software development
in C, C++, Ada, Fortran, and other programming languages. This free software provides regular, high-
quality releases which work well with native and cross targets. The sources of the GNU Compiler collection
are available for free via Git and weekly snapshots. The collection is available on Linux, Windows, and
other operating systems.

History of opensource software:

The history of open-source software began in the early days of computing when software was shared freely
among researchers and academics. In the 1980s, Richard Stallman launched the Free Software Movement
with the GNU Project and the creation of the GNU General Public License (GPL), emphasizing user

3
freedoms to use, modify, and share software. The term "open source" emerged in 1998, with the Open
Source Initiative (OSI) promoting it to businesses. Key milestones include the release of the Linux kernel
in 1991, the rise of projects like Apache and Mozilla, and the mainstream adoption of open-source software
in the 2000s by companies such as IBM and Google. Platforms like GitHub further revolutionized
collaboration, and open-source technologies now underpin critical innovations in cloud computing, AI, and
software development. Open source fosters global collaboration, drives technological progress, and powers
much of today’s digital infrastructure.
four important factors for the development of open-source software are:
1. Community Collaboration: A global community of developers and users contributes to coding,
debugging, and improving the software, ensuring rapid innovation and problem-solving.
2. Free and Open Licensing: Open-source licenses, such as GPL and Apache, provide the freedom to
use, modify, and share software, encouraging participation and widespread adoption.
3. Transparency and Flexibility: Access to source code allows developers to study, customize, and
adapt software to specific needs, fostering learning and innovation.
4. Corporate and Academic Support: Organizations and universities often back open-source
projects by providing resources, funding, and expertise, helping them grow and achieve wider
adoption.

2.Need For Open Source:

The following reasons make open source software important:
• Since the initial cost is zero or negligible, developers can utilize the codebase and build their own
applications. This can save them a lot of money and time.
• As open source projects are accessible to everyone, they benefit from continuous improvement by
developers around the world.
• Developers build open source based on the principle of flexibility. The license for the project
allows developers to modify the source code conveniently. Software that is proprietary has
limitations and may not allow for any modifications.
• Finding and patching vulnerabilities are much quicker and more efficient in OSS.
• Opensource projects emphasize community, collaboration and transparency for the mutual benefit
of the users and the platform.

2.ADVANTAGES OF OSS:
• Opensource software is free.
• Open source is flexible; developers can examine how the code works and freely make changes to
dysfunctional or problematic aspects of the application to better fit their unique needs.
• Open source is stable; the source code is publicly distributed, so users can depend on it for their long-term
projects since they know that the code’s creators cannot simply discontinue the project or let it fall into
disrepair.
• Open source fosters ingenuity; programmers can use pre-existing code to improve the software and even
come up with their own innovations.
• Open source comes with a built-in community that continuously modifies and improves the source code.
• Open source provides great learning opportunities for new programmers.
4
Disadvantage:
• Open source can be harder to use and adopt due to difficulty setting it up and the lack of friendly user
interfaces.
• Open source can pose compatibility issues. When attempting to program proprietary
hardware with OSS, there is often a need for specialized drivers that are typically only available from the
hardware manufacturer.
• Open source software can pose liability issues. Unlike commercial software, which is fully controlled by
the vendor, open source rarely contains any warranty, liability, or infringement indemnity protection. This
leaves the consumer of the OSS responsible for maintaining compliance with legal obligations.
• Open source can incur unexpected costs in training users, importing data, and setting up required
hardware.vi

Difference between Open Source Software and Closed Source Software

Open Source Software Closed Source Software

The source code is not available to the

Source code is available to the users
users.

Short-form is OSS. Short-form is CSS.

The access specifier for OSS is ‘public’. The access specifier for CSS is ‘private’.

Only the owner of the software can modify

Users can view and modify the source code.
or view the source code.

It is less costly. It is more costly.

Only the owner or the organization of

All types of developers can provide
software can hire developers to improve the
improvement for the software.
code.

A license is not required. It is compulsory to have a license.

5
 The owner of the software is responsible if
No one is responsible for any failure.
anything happens to the software.

Examples are Android, Linux, Apache Examples are Skype, Java, Adobe flash,
Server, Ionic, MySQL, etc. WinRAR, macOS, etc.

Additional Resources:
https://www.studocu.com/in/document/thiruvalluvar-university/bsccomputer-science/open-source-
software/60492330
Practice Questions:
1.What is open-source software?
2.What is the need for open-source software?
3. Discuss in detail the need for open-source software, highlighting its importance in modern technology
and providing examples of its impact in various fields.

2.Advantages Of Oss:
• Opensource software is free.
• Open source is flexible; developers can examine how the code works and freely make changes to
dysfunctional or problematic aspects of the application to better fit their unique needs.
• Open source is stable; the source code is publicly distributed, so users can depend on it for their long-term
projects since they know that the code’s creators cannot simply discontinue the project or let it fall into
disrepair.
• Open source fosters ingenuity; programmers can use pre-existing code to improve the software and even
come up with their own innovations.
• Open source comes with a built-in community that continuously modifies and improves the source code.
• Open source provides great learning opportunities for new programmers.
Disadvantage:
• Open source can be harder to use and adopt due to difficulty setting it up and the lack of friendly user
interfaces.
• Open source can pose compatibility issues. When attempting to program proprietary
hardware with OSS, there is often a need for specialized drivers that are typically only available from the
hardware manufacturer.
• Open source software can pose liability issues. Unlike commercial software, which is fully controlled by
the vendor, open source rarely contains any warranty, liability, or infringement indemnity protection. This
leaves the consumer of the OSS responsible for maintaining compliance with legal obligations.

6
• Open source can incur unexpected costs in training users, importing data, and setting up required
hardware.vi
Additional Resources:
https://www.studocu.com/in/document/thiruvalluvar-university/bsccomputer-science/open-source-
software/60492330
Practice Questions:
1.Name any two advantages of open-source software.
2.Explain any five advantages of open-source software with examples.
3.Discuss in detail about advantages, and disadvantage.

3.Applications of Open source software:

Education
Open source software can be used to teach students about software by studying the source code, learning
from it, and creating their own code.
Software development
Open source software can help software developers gain hands-on experience by contributing to real-world
applications. They can learn from experts, receive feedback on their work, and study well-established
codebases.
Productivity
Open source software can be used for productivity, such as with LibreOffice, an office productivity suite
that's similar to Microsoft Office.
Image manipulation
Open source software can be used for image manipulation, such as with GIMP (GNU Image Manipulation
Program), which is similar to Adobe Photoshop.
Media playback
Open source software can be used for media playback, such as with VLC Media Player, which is a cross-
platform app for viewing videos.
Web browsing
Open source software can be used for web browsing, such as with Mozilla Firefox, a web browser that
focuses on user privacy and has a friendly user interface.
Web servers
Open source software can be used for web servers, such as with Apache web server, which is a free and
open-source web server that delivers web content through the internet.
Additional Resources:
https://www.studocu.com/in/document/thiruvalluvar-university/bsccomputer-science/open-source-
software/60492330
Practice Questions:
7
1.Explain any five applications of open-source software with examples.

4.An Introduction to HTML:

HTML stands for HyperText Markup Language. It is used to structure the content on the web by using
various elements (commonly known as tags). These HTML elements define the different sections of a web
page, such as headings, paragraphs, links to other webpages, listings, images, tables, etc. These elements
tell the browser about the content and formatting to display.
HTML is HyperText + Markup Language. Where,
 HyperText refers to the way in which Web pages (HTML documents) are linked together. Thus, the
link available on a webpage is called "HyperText".
 Markup Language, which means you use HTML to simply "mark up" a text document with tags
that tell a Web browser how to structure it to display.
What is an HTML Element?
An HTML element is a basic building block to create a webpage, and It is created by a start tag, content,
and end tag. In an HTML element, the content is placed between a start and end tag.
The basic syntax of an HTML element is −
<tag_name>content</tag_name>
Consider the following example demonstrates an HTML element −
<h1>It is top-level heading</h1>
Here,
 <h1> is the start tag.
 "It is top-level heading" is the content, which is placed inside the start and end tags.
 </h1> is the closing tag.
HTML Page Structure
HTML page structure (or, HTML basic structure) consists of the essential elements that are required to
create an HTML document that can be displayed on the browser.
The following image shows the page structure of an HTML document −

8
HTML page structure contains <!DOCTYPE html>, <html>, <head>, <title>, <body>, and other tags that
will be shown on the homepage.
Where,
 <!DOCTYPE html> − It defines the document type as HTML.
 <html> − It is a root element for an HTML document. All elements are placed inside this element.
 <head> − The head tag may contain scripts and styles that are useful page functionalities. Meta tags
are also placed inside this tag.
 <title> − It defines the webpage's title.
 <body> − It defines the body of the webpage, all elements that are used to display content on the
browser placed inside the body tag.
 <h1> and <p> − The h1 tag defines page heading, and p tag defines paragraph.
Basic HTML Tags
The following are the HTML Basic Tags −
 <h1> to <h6> − These are heading tags and used to write headings for the webpage. Where, <h1>
is the top-level heading and <h6> is the bottom-level (lowest) heading.
 <p> − The <p> tag displays text as a paragraph on the webpage.
 <br> or <br /> − The <br> tag stands for "break", and it inserts a line break on the webpage.
 <div> − The <div> tag stands for "division", it defines a division or section on the webpage. You
can place any number of elements to group them in a section.
 <ul> and <ol> − The <ul> and <ol> tags insert list items on the webpage, <ol> tag defines ordered
listing, whereas <ul> tag defines unordered listing.
 <img> − The <img> tag is used to insert an image in the webpage.
 <a> − The <a> tag stands for "anchor", and it is used to place a link in the webpage.

9
  <pre> − The <pre> tag is used to preserve formatting.
You can find more tags here. Visit: HTML Tag References.
HTML First Example
HTML first example shows the HTML page structure along with the essential tags. In the following
example, we are creating an HTML document. This example contains all necessary tags and other basic
tags. Click on "Edit and Run" to display the result how this example looks like on the webpage.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML First Example</title>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<p>A learning portal for students and professionals.</p>
<h2>About TutorialsPoint</h2>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to
online content and prefer to learn new skills at their own pace from the comforts of their drawing
rooms.</p>
<h2>Our Web Tutorials</h2>
<ul>
<li><a href="https://www.tutorialspoint.com/html/index.htm">HTML</a></li>
<li><a href="https://www.tutorialspoint.com/css/index.htm">CSS</a>
</li> <li><a href="https://www.tutorialspoint.com/javascript/index.htm">JavaScript</a></li> </ul>
</body> </html>
Output:
Welcome to TutorialsPoint
A learning portal for students and professionals.
About TutorialsPoint
Tutorials Point originated from the idea that there exists a class of readers who respond better to online
content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
Our Web Tutorials
 HTML
 CSS
10
  JavaScript
Web Browser Role
The role of a web browser is to read HTML documents from the given path (either from the server or from
a local device) and display it on the webpages. All web browsers, such as Google Chrome, Safari, Firefox,
etc., are compatible with reading HTML documents. You can use any of the web browsers to display your
HTML document in web format.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used
in the document. The current version of HTML is 5 and it makes use of the following declaration −
<!DOCTYPE html>
There are many other declaration types that can be used in HTML documents, depending on what version
of HTML is being used. We will see more details on this while discussing the <!DOCTYPE...> tag along
with other HTML tags.
HTML History and Evolution
HTML was initially developed by Tim Berners-Lee in late 1991. It was designed as a standard language
for creating and formatting documents on the World Wide Web. All the web pages on the internet are created
with HTML.
The following image shows the evolution of HTML over the period of years −

HTML Tags Vs. Elements Vs. Attributes

HTML tags are the keywords that can be used for a specific purpose to display and format the content on
the webpage.
HTML elements are the basic building blocks that are made with the help of tags and content. An HTML
element is created with a start tag, a content, and an end tag.
And, HTML attributes provide additional information about HTML elements; in order to define or change
their behavior. Attributes are used with an opening tag.
HTML Tags Case Sensitivity
HTML tags are not case-sensitive. They can be written in uppercase or in lowercase. But the World Wide
Web Consortium (W3C) recommends using lowercase tags starting from HTML 4.
Importance of HTML

11
HTML is the fundamental building blocks of the World Wide Web. Any page that you visit on the web
contains HTML tags. HTML is important for the various reasons −
 HTML defines webpage structure and helps to design websites.
 With the help of CSS and JavaScript, HTML helps to create beautiful and interactive websites.
 HTML helps in search engine optimization by optimizing the tags based on the targeted keywords.
 HTML helps to navigate (or browse) different pages and websites from anywhere on the internet.
 HTML supports user input and forms; you can easily get information from anywhere in the world
(you may need background database support for it).
 HTML follows an open standard by W3C. Thus, HTML supports all browsers on any type of device.
You do not need to change the HTML for the different browsers or devices.
 HTML tags are the fundamental elements of HTML used for defining the structure of the
document. These are letters or words enclosed by angle brackets (< and >).
 Usually, most of the HTML tags contain an opening and a closing tag. Each tag has a different
meaning, and the browser reads the tags and displays the contents enclosed by them accordingly.
 For example, if we wrap any text in the paragraph (<p></p>) tag, the browser displays it as a
separate paragraph. In this tutorial, we will discuss all the basic tags in HTML.

Additional Resources:
https://www.studocu.com/in/document/thiruvalluvar-university/bsccomputer-science/open-
source-software/60492330
Practice Questions:
1. What are HTML tags? Give examples.
12
 2. Explain about HTML basic tags with example.
3. Explain Importance of html.
4. Write a structure of HTML tag.

5.Dynamic web content

Dynamic Website is a website containing data that can be mutable or changeable. It uses client-side or
server scripting to generate mutable content. Like a static website, it also contains HTML data.
Dynamic websites are those websites that changes the content or layout with every request to the webserver.
These websites have the capability of producing different content for different visitors from the same source
code file. There are two kinds of dynamic web pages i.e. client side scripting and server side scripting. The
client-side web pages changes according to your activity on the web page. On the server-side, web pages
are changed whenever a web page is loaded.
Example: login & signup pages, application & submission forms, inquiry and shopping cart pages.
A Typical Architecture of dynamic website

There are different languages used to create dynamic web pages like PHP, ASP, .NET and JSP. Whenever
a dynamic page loads in browser, it requests the database to give information depending upon user’s input.
On receiving information from the database, the resulting web page is applied to the user after applying the
styling codes.
Features of dynamic webpage:
These websites are very flexible.
In these websites the content can be quickly changed on the user’s computer without new page request to
the web browser.
In these websites the owner have the ability to simply update and add new content to the site.
These websites are featured with content management system, e-commerce system and intranet or extranet
facilities.
Most of the dynamic web content, is assembled on the web using server-scripting languages.

13
Advantages of dynamic webpage:
It provides more functional websites.
It is very easy to update.
It helps in the search engines because new content brings people back to the site.
These are interactive websites because these can be customized.
These websites can work as a system to allow staff or users to collaborate.
It’s easy to modify or update data.
It provides a user-friendly interactive interface for users.
proves smooth navigation.
provide interactive user interface
It provides a better user experience.
It provides real-time data.
Difference Between Static and Dynamic Web Pages
There are two basic methods of web design: static and dynamic web pages. Users access static web pages,
which present the same content every time they are viewed. On the other hand, dynamic webpages create
content instantly in response to user input and present customized or updated information. Let’s learn about
this in detail in this article.
What are Static Web Pages?
Static Web pages are very simple. It is written in languages such as HTML, JavaScript, CSS, etc. For static
web pages when a server receives a request for a web page, then the server sends the response to the client
without doing any additional process. These web pages are seen through a web browser. In static web pages,
Pages will remain the same until someone changes it manually.

What are Dynamic Web Pages?

Dynamic Web Pages are written in languages such as CGI, AJAX, ASP, ASP.NET, etc. In dynamic web
pages, the Content of pages is different for different visitors. It takes more time to load than the static web
page. Dynamic web pages are used where the information is changed frequently, for example, stock prices,
weather information, etc.

14
Static Web Page Dynamic Web Page

In static web pages, Pages will remain same In dynamic web pages, Content of pages are different
until someone changes it manually. for different visitors.

Static Web Pages are simple in terms of

Dynamic web pages are complicated.
complexity.

In static web pages, Information are change In dynamic web page, Information are change
rarely. frequently.

Static Web Page takes less time for loading than

Dynamic web page takes more time for loading.
dynamic web page.

In Static Web Pages, database is not used. In dynamic web pages, database is used.

Static web pages are written in languages such Dynamic web pages are written in languages such as:
as: HTML, JavaScript, CSS, etc. CGI, AJAX, ASP, ASP.NET, etc.

Static web pages does not contain any Dynamic web pages contains application program
application program . for different services.

Static web pages require less work and cost in Dynamic web pages require comparatively more
designing them. work and cost in designing them.

15
Additional Resources:
https://www.geeksforgeeks.org/dynamic-websites/
Practice Questions:
1. Differentiate between static and dynamic web content.
2. Explain advantage of dynamic web page content.
3. Explain Dynamic web content with example.

6.HTTP Request and Response Procedure:

HTML stands for HyperText Markup Language and is one of the basic tools any webmaster or web designer
uses while HTTP stands for HyperText Transfer Protocol and is a tool used in browsing the web. It would
be helpful for anyone designing web sources to clearly understand the relation between HTML and HTTP
to comprehend what each of them does in the process of contributing to the web page. This article explains
these two technologies to show how they differ and the various ways they assist in the functioning of the
Internet.

What is HTML?
HTML stands for HyperText Markup Language and this is the standard language used to develop the
contents of the page. This includes the layout of the different components of web pages, including headings,
paragraphs, images, links and other media type.
Advantages of HTML
 Universal Language: HTML is fully supported by all known browsers and that makes it a standard
for authoring any web contents.
 Easy to Learn: HTML is not complicated to learn and implemented and it is more suitable for usage
by novices and low-level programmers to the experts.
 Flexibility: HTML when integrated with CSS and JavaScript, one can easily design a web page,
which appears more dynamic and interesting in its look and feel.
Disadvantages of HTML
 Static Nature: As it stands, HTML is passive so it lacks capability to perform a function or interact
with users except with the support of other technologies such as JavaScript.
 Limited Functionality: HTML alone can’t build complicated Web applications, nor it can deal with
user interactions besides hypertext links and forms.
What is HTTP?
16
HTTP stands for Hypertext Transfer Protocol that is used for the transmission of Hypertext over the internet.
It specifies how messages look and are sent and received and how web servers and browsers should behave
in relation to specific commands.
Advantages of HTTP
 Efficient Data Transfer: HTTP has been developed for the purpose of transmitting data fast across
the World Wide Web, in support of the delivery of the contents of Web, images, videos and other
media.
 Statelessness: HTTP is stateless, this implies that each command that the client sends via the URL is
not affiliated with another previous command. This makes the design of the server to be easier and
the provision of more scalable web services.
 Widespread Adoption: HTTP is core in data communication in the web, due to it’s ubiquity, the
protocols will work well on any platform as well as mobile devices.
Disadvantages of HTTP
 Lack of Security: Unlike other protocols such as HTTPS, SSL, TLS or SFTP, HTTP is insecure as
it lacks the capability of encrypting data thus can easily be tapped by someone with bad intentions.
This is solved by HTTPS (HTTP Secure) which introduces a security layer into the protocol used.
 Stateless Protocol: Although statelessness has its benefits, there are drawbacks that include the
possibility of eradicating real connections for each request, or of the need to resend data.
Differences Between HTML and HTTP

HTML (HyperText Markup

Aspect Language) HTTP (HyperText Transfer Protocol)

A markup language used to create and A protocol used for transferring web
Definition
design web pages. pages over the internet.

Structuring and presenting content on Facilitating communication between a

Purpose
the web. web browser and a server.

Operates at the application layer for Operates at the application layer for data
Layer
content presentation. transmission.

Not a file type, but a communication

File Type .html or .htm file extensions.
protocol.

Data Does not involve data transmission; Manages the transmission of data
Transmission focuses on content structure. between client and server.

17
 HTML (HyperText Markup
Aspect Language) HTTP (HyperText Transfer Protocol)

Stateless protocol; each request is

Statelessness Not inherently stateless.
independent of the previous one.

Defines how content is displayed to Defines how content is requested,

Interaction
users. transmitted, and received.

Includes HTML 4.01, XHTML, Includes versions like HTTP/1.0,

Versioning
HTML5, etc. HTTP/1.1, HTTP/2, HTTP/3.

HTTP: The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients
and servers. HTTP works as a request-response protocol between a client and server. A web browser may
be the client, and an application on a computer that hosts a website may be the server. A client (browser)
submits an HTTP request to the server; then the server returns a response to the client. The response contains
status information about the request and may also contain the requested content.
There are 2 HTTP request methods:
 GET: Requests data from a specified resource.
 POST: Submits data to be processed to a specified resource.
Metaphor aside, let’s run through the protocol as executed by computers:
1. You open your browser, the Client, and type in a web address like http://turing.edu and hit enter.
2. The browser takes this address and builds an HTTP Request. It addresses it to the Server located
at http://turing.edu.
3. The Request is handed off to your Internet Service Provider (ISP) (like CenturyLink or Comcast)
and they send it through the Internet, mostly a series of wires and fiber optic cables, to the Server
4. The Server reads the Request. It knows how to read it because it is formatted as an HTTP Request.
5. The Server generates an HTTP Response to that Request.
6. The server hands the Response off to their ISP and it goes through the internet to arrive at your
computer.
7. Your browser reads the Response. It knows how to read it because it is formatted as an HTTP
Response.
8. Your browser displays the data on your machine.
Advantages of PHP :
1. The most important advantage of PHP is that it’s open-source and free from cost. It can be
downloaded anywhere and is readily available to use for events or web applications.
18
 2. It is platform-independent. PHP-based applications can run on any OS like UNIX, Linux, Windows,
etc.
3. Applications can easily be loaded which are based on PHP and connected to the database. It’s mainly
used due to its faster rate of loading over slow internet speed than other programming language.
4. It has less learning curve because it is simple and straightforward to use. Someone familiar with C
programming can easily work on PHP.
5. It is more stable for a few years with the assistance of providing continuous support to various
versions.
6. It helps in reusing an equivalent code and not got have to write lengthy code and sophisticated
structure for events of web applications.
7. It helps in managing code easily.
8. It has powerful library support to use various function modules for data representation.
9. PHP’s built-in database connection modules help in connecting databases easily reducing trouble
and time for the development of web applications and content-based sites.
10. The popularity of PHP gave rise to various communities of developers, a fraction of which may be
potential candidates for hire.
11. Flexibility makes PHP ready to effectively combine with many other programming languages in
order that the software package could use foremost effective technology for every particular feature.
JavaScript s an interpreted programming as well as a scripting language. Many of these are related to the
way, JavaScript is often executed directly in a client’s browser commonly utilized in web development.
Advantages of JavaScript
 Saves time and bandwidth: Regardless of where you host JavaScript, it always gets executed on
the client environment to save lots of bandwidth and make the execution process fast.
 Easily send HTTP requests: In JavaScript, XMLHttpRequest is an important object that was
designed by Microsoft. The object calls made by XMLHttpRequest as an asynchronous HTTP
request to the server to transfer the data to both sides without reloading the page
 Compatible for all browsers: The biggest advantage of JavaScript having the ability to support all
modern browsers and produce an equivalent result.
 Community Support: Global companies support community development by creating important
projects. An example is Google (created the Angular framework) or Facebook (created
the React.js framework).
 Vastly used: JavaScript is employed everywhere on the web.
 Environment Support: JavaScript plays nicely with other languages and may be utilized in an
enormous sort of application.
 Open source: Many open-source projects provide useful help for developers to add JavaScript.
 Programming language: There are many available courses within the field of JavaScript, because
of which you’ll quickly and simply expand your knowledge of this programming language.

19
  Easy to use: It is not difficult to start working in JavaScript. For this reason, many of us prefer to
start our adventure in the IT sector by learning this language. It gives the power to make rich
interfaces.
 Backend usage: There are some ways to use JavaScript through Node.js servers. It is possible to
develop a whole JavaScript app from front to back using only JavaScript.
Advantages of CSS
The abbreviated term CSS refers to Cascading Style Sheets. Managing the appearance and layout of HTML
(Hypertext Markup Language) documents is a key technique in web development. CSS enables web
designers to apply styles to HTML components, giving websites their visual look. Styles include colors,
fonts, spacing, and arrangement.
The ability to distinguish a web page's appearance from its content using CSS has the following advantages:
1. Consistency: One style code may apply across several pages, giving your website a unified look
and feel.
2. Flexibility: Without changing the underlying HTML structure, CSS enables you to quickly modify
your web page's look by changing styles in a single CSS file.
3. Efficiency: CSS helps to reduce repetitive code, resulting in smaller, quicker-loading web pages.
4. Accessibility: CSS provides better assistance for building web pages that are simpler to use and
understand for those who have disabilities.
5. Faster Page Speed: Slower page performance results from more code. And CSS makes it possible
to write less code. With CSS, you may apply a single CSS rule to each instance of a certain tag
throughout an HTML text.
6. Better User Experience: CSS facilitates a user-friendly layout and makes websites to be pleasant
to the eye. The user experience is enhanced whenever buttons and text are placed logically and are
well-organized.
7. quicker Development Time: With CSS, you may use a single code to apply precise formatting
guidelines and styles to several pages. Several internet pages can use the same cascading style sheet.
Creating CSS rules for one page will be sufficient for every page of the same kind, such as product
pages, which should all have the same layout, appearance, and feel.
8. Easy Formatting Changes: With CSS, it's simple to alter the format of a particular group of pages.
There's no need to correct each page separately. Make modifications to the correct CSS stylesheet,
and all the pages that are utilizing that stylesheet will be updated.
9. Compatibility Across Devices: Website responsiveness is important. Web pages must be
completely viewable and user-friendly on all devices in the modern world. CSS and HTML work
together to provide responsive design on all devices, including smartphones, tablets, desktops, and
even smart TVs.
Benefits of HTML5 :
1. Cleaner Code Structure
2. Cross-Browser Compatibility
3. Audio and Video Tags

20
 4. Offline Browsing
5. No More Cookies
6. Canvas for Animation and Game Development
Cleaner Code Structure
HTML5, with so many altered as well as new tags, has improved the code structure making it cleaner and
lucid for both programmers and non-programmers. Like, <div> tag, that is one of the most extensively used
HTML tag has been supplanted by various tags such as <article>, <section>, <figure>, <header>, <footer>,
and <nav>, preventing you from getting lost in code.
Additional Resources:
https://www.geeksforgeeks.org/dynamic-websites/
Practice Questions:
1. Describe the HTTP request and response procedure.
2. Explain the Benefits of CSS.
3. Explain the Benefits of PHP.
4. Give any two benefits of HTML5.

7.Introduction to HTML5:
HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language.
HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link between the web
pages. The markup language is used to define the text document within the tag which defines the structure
of web pages. HTML 5 is the fifth and current version of HTML. It has improved the markup available for
documents and has introduced application programming interfaces (API) and Document Object Model
(DOM).
Features:
 It has introduced new multimedia features which supports both audio and video controls by using
<audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and <figure> are
added.
 Drag and Drop- The user can grab an object and drag it further dropping it to a new location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on the web browser.
 Uses SQL database to store data offline.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 Easy character encoding i.e., <meta charset=”UTF-8″>
21
Removed elements from HTML 5: There are many elements which are depreciated from HTML 5 are listed
below:

Removed Elements Use Instead Elements

<acronym> <abbr>

<applet> <object>

<basefont> CSS

<big> CSS

<center> CSS

<dir> <ul>

<font> CSS

<frame>

<frameset>

<noframes>

<isindex>

<strike> CSS, <s> or <del>

<tt> CSS

New Added Elements in HTML 5:

 <article>: The <article> tag is used to represent an article. More specifically, the content within the
<article> tag is independent from the other content of the site (even though it can be related).

22
 <aside>: The <aside> tag is used to describe the main object of the web page in a shorter way like
a highlighter. It basically identifies the content that is related to the primary content of the web page
but does not constitute the main intent of the primary page. The <aside> tag contains mainly author
information, links, related content and so on.
 <figcaption>: The <figcaption> tag in HTML is used to set a caption to the figure element in a
document.
 <figure>: The <figure> tag in HTML is used to add self-contained content like illustrations,
diagrams, photos or codes listing in a document. It is related to main flow, but it can be used in any
position of a document and the figure goes with the flow of the document and if it is removed it
should not affect the flow of the document.
 <header>: It contains the section heading as well as other content, such as a navigation links, table
of contents, etc.
 <footer>: The <footer> tag in HTML is used to define a footer of HTML document. This section
contains the footer information (author information, copyright information, carriers etc.). The footer
tag is used within body tag. The <footer> tag is new in the HTML 5. The footer elements require a
start tag as well as an end tag.
 <main>: Delineates the main content of the body of a document or web app.
 <mark>: The <mark> tag in HTML is used to define the marked text. It is used to highlight the part
of the text in the paragraph.
 <nav>: The <nav> tag is used to declaring the navigational section in HTML documents. Websites
typically have sections dedicated to navigational links, which enables user to navigate the site. These
links can be placed inside a nav tag.
 <section>: It demarcates a thematic grouping of content.
 <details>: The <details> tag is used for the content/information which is initially hidden but could
be displayed if the user wishes to see it. This tag is used to create interactive widget which user can
open or close it. The content of details tag is visible when open the set attributes.
 <summary>: The <summary> tag in HTML is used to define a summary for the <details> element.
The <summary> element is used along with the <details> element and provides a summary visible
to the user. When the summary is clicked by the user, the content placed inside the <details> element
becomes visible which was previously hidden. The <summary> tag was added in HTML 5. The
<summary> tag requires both starting and ending tag.
 <time>: The <time> tag is used to display the human-readable data/time. It can also be used to
encode dates and times in a machine-readable form. The main advantage for users is that they can
offer to add birthday reminders or scheduled events in their calendars and search engines can
produce smarter search results.
 <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiates a text from other text
that may be formatted in different direction. This tag is used when a user generated text with an
unknown direction.
 <wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to define the position
within the text which is treated as a line break by the browser. It is mostly used when the used word
is too long and there are chances that the browser may break lines at the wrong place for fitting the
text.
23
  <datalist>: The <datalist> tag is used to provide autocomplete feature in the HTML files. It can be
used with input tag, so that users can easily fill the data in the forms using select the data.
 <keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field in a form. The
purpose of <keygen> element is to provide a secure way to authenticate users. When a form is
submitted then two keys are generated, private key and public key. The private key stored locally,
and the public key is sent to the server. The public key is used to generate client certificate to
authenticate user in future.
 <output>: The <output> tag in HTML is used to represent the result of a calculation performed by
the client-side script such as JavaScript.
 <progress>: It is used to represent the progress of a task. It also defines how much work is done and
how much is left to download a task. It is not used to represent the disk space or relevant query.
 <svg>: It is the Scalable Vector Graphics.
 <canvas>: The <canvas> tag in HTML is used to draw graphics on web page using JavaScript. It
can be used to draw paths, boxes, texts, gradient and adding images. By default, it does not contain
border and text.
 <audio>: It defines the music or audio content.
 <embed>: Defines containers for external applications (usually a video player).
 <source>: It defines the sources for <video> and <audio>.
 <track>: It defines the tracks for <video> and <audio>.
 <video>: It defines the video content.

Important Benefits of HTML5 to Choose for Your Project:

1. Cleaner Code Structure
2. Cross-Browser Compatibility
3. Audio and Video Tags
4. Offline Browsing
5. No More Cookies
6. Canvas for Animation and Game Development
1. Cleaner Code Structure
HTML5, with so many altered as well as new tags, has improved the code structure making it cleaner and
lucid for both programmers and non-programmers. Like, <div> tag, that is one of the most extensively used
HTML tag has been supplanted by various tags such as <article>, <section>, <figure>, <header>, <footer>,
and <nav>, preventing you from getting lost in code.
For Example:
“div#header,div#footer{…}“ is written as “header, footer{…}“
“div#content{…}” is written as “section{…}”

24
“div.article{…}” is written as “article{…}”
“div#menu ul{…}” is written as “nav ul{..}”
2. Cross-Browser Compatibility
Instead of restricting to a single platform/browser, HTML5 has introduced a new cross-browser
compatibility feature, being supported by popular versions of multiple web browsers. To include this feature
on your website, list down the elements of the target browsers and then address them individually through
fallback and graceful degradation. Let’s say if a feature of your website is not supported by a browser, better
to display a customer-friendly text to make the problem comprehensible, creating the fallback, thus
gracefully degrading the website as per the browser elements.
3. Audio and Video Tags
Playing media files on a browser was a bit complex task with the previous versions of HTML, requiring
you to install supporting multimedia software such as Flash and use some complex tags like <embed> and
<object>, to play it.
HTML5 liberates you from this with its <audio> and <video> tags, which is used just like the other HTML
tags. You can use these tags and modify their attributes such as controls, loop, autoplay, muted, src, height,
width, etc, accordingly.
For Example:
<audio controls>
<source src=” ” type=” “>
</audio>
4. Offline Browsing
The availability of the internet cannot be promised 24*7, which can sometimes hinder your work as well.
HTML5, with its manifest attribute included in the <html> tag, enables the users to continue browsing the
webpages and web applications even in the offline state.
The manifest attribute directs the Uniform Resource Identifier to a ‘manifest’ consisting of the files that
should and shouldn’t be cached, to avail them to the user when offline. The structure of the manifest consists
of 2 sections:
 CACHE MANIFEST: includes the files that have to be cached like index.html, CSS file, logo and
background images, etc.
 NETWORK: includes the files that shouldn’t be cached and misused such as server.cgi.

5. No More Cookies
Cookies, a secret weapon of the website to track its users and deliver personalized services to them, have
been an important thing for the websites throughout. But its setback cannot be denied, making your data
risk-prone and increasing the server load as well. HTML5 Web Storage, by replacing the cookies, has
addressed all these problems. It provides 5 MB storage space at the client-side to store the data, which is
not sent over the server making it more secure than the previous versions and hence, reducing the server
overhead.
6. Canvas for Animation and Game Development

25
Flash, a software used for dynamic websites and applications, has become deprecated due to its limited
functionalities and setbacks. Being an external software embedded in the HTML code, Flash cannot interact
directly with the HTML elements and requires the browser to install a dedicated plugin to function.
To reduce the hassle and bring the animation to another level, HTML5 came up with a new tag called
<canvas>. Canvas, a feature embedded in HTML5 and a part of Document Object Model(DOM), opens
multiple animation options, enabling you to draw graphs, add visual effects, develop games both online as
well as offline, etc. on the web page.
HTML History
Since the early days of the web, there have been many versions of HTML:

Version Year

Tim Berners-Lee invented www 1989

Tim Berners-Lee invented HTML 1991

Dave Raggett drafted HTML+ 1993

HTML Working Group defined HTML 2.0 1995

W3C Recommended HTML 3.2 1997

W3C Recommended HTML 4.01 1999

W3C Recommended XHTML 1.0 2000

HTML5 WHATWG First Public Draft 2008

HTML5 WHATWG Living Standard 2012

HTML5 W3C Final Recommendation 2014

Tim Berners-Lee invented the "World Wide Web" in 1989, and the Internet took off in the 1990s.
From 1991 to 1998, HTML developed from version 1 to version 4.
In 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0.
The XHTML syntax was strict, and the developers were forced to write valid and "well-formed" code.
In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed in response to
slow W3C development, and W3C's decision to close down the development of HTML, in favor of
XHTML.
WHATWG wanted to develop HTML, consistent with how the web was used, while being backward
compatible with older versions of HTML.
26
In the period 2004-2006, the WHATWG initiative gained support by the major browser vendors.
In 2006, W3C announced that they would support WHATWG.
In 2008, the first HTML5 public draft was released.
In 2012, WHATWG and W3C decided on a separation:
WHATWG will develop HTML as a "Living Standard".
A living standard is never fully complete, but always updated and improved. New features can be added,
but old functionality cannot be removed.
The WHATWG Living Standard was published in 2012, and is continuously updated.
Structure of an HTML Document
Let’s see each part of this structure to understand its function and importance.
1. <!DOCTYPE HTML>: The <!DOCTYPE html> declaration is placed at the beginning of the
document. It tells the browser that the document follows HTML5 standards, ensuring consistent
rendering across browsers.
2. <html> Tag: The <html> tag wraps the entire document, serving as the root element of an HTML
page. It typically includes the lang attribute to specify the language of the content.
3. <head> Section: The <head> section contains metadata, scripts, styles, and other information not
displayed directly on the page but essential for functionality and SEO.
4. <body> Section: The <body> section contains all the visible content of the web page, including
text, images, videos, links, and more. This is where you’ll add the main elements to display on the
page.
Tags and Elements for Structuring an HTML Document
HTML tags are structural components enclosed in angle brackets. They are typically opened and closed
with a forward slash (e.g., <h1></h1>). Some tags are self-closing, while others support attributes like
width, height, and controls for defining properties or storing metadata.
There are generally two types of tags in HTML
1. Paired Tags: These tags come in pairs i.e. they have both opening(< >) and closing(</ >) tags.
2. Empty Tags: These tags are self-closing and do not require a closing tag.”
Below is an example of a <b> tag in HTML, which tells the browser to bold the text inside it.

27
Structure of an HTML Document

Understanding these key tags will allow you to organize content effectively and create more readable and
accessible webpages.
 Headings (<h1> to <h6>): Headings are important for structuring the content within the <body>
section. They define the hierarchy of information, where <h1> is the highest-level heading.
 Paragraphs (<p>): The <p> tag is used for creating paragraphs, which help to group text into
readable sections. This tag automatically adds some spacing between paragraphs to improve
readability.
 Images (<img>): The <img> tag is used to add images to a webpage. It requires the src attribute to
specify the image path and the alt attribute for accessibility.
 Links (<a>):Links are created with the <a> tag. The href attribute defines the destination URL, and
the text within the <a> tag serves as the clickable link text.
 Lists (<ul>, <ol>, <li>): Lists allow you to organize items in bullet points (<ul>) or numbered order
(<ol>). Each item within a list is wrapped in <li> tags.
 Divisions (<div>): The <div> tag is a container used to group other elements together, often for
layout. It does not add any style or structure on its own but is useful for applying CSS styles to
sections of content.

Some new tags have been introduced with HTML5 for better structure of HTML documents:
Tag Description

nav The navigation tag denotes a document section in an HTML document designed to
contain navigation links.

header The header tag defines the header of the HTML document or section. It usually contains
a logo, navigation, search, etc.

28
 section The section tag defines a section in an HTML document.

article The <article> tag is one of the HTML5 element used to specifies independent, self-
contained content in an HTML document.

aside The aside tag is one of the HTML5 elements that define a section containing additional
information related to the content surrounding the "aside" element.

dialog The dialog tag is used to specify a conversation section such as popup dialogs and modals
in an HTML document.

figure The figure tag is used to display a caption of embedded images or videos.

footer The footer tag defines the footer of the HTML document or section. It usually contains
document copyright, navigation, search, etc.

Additional Resources:
https://www.w3schools.com/tags/ref_canvas.asp
Practice Questions:
1. Define HTML5
2. List out the features of HTML5
3. What are the advantage of HTML5?
4. Give any two benefits of HTML5.
5. Explain the structure of HTML5.
6. Explain the history of HTML5.

8.HTML5 Canvas:
The HTML canvas element provides HTML a bitmapped surface to work with. It is used to draw graphics
on the web page.
The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.
The <canvas> element is only a container for graphics, you must need a scripting language to draw the
graphics. The <canvas> element allows for dynamic and scriptable rendering of 2D shapes and bitmap
images.
It is a low level, procedural model that updates a bitmap and does not have a built-in scene. There are
several methods in canvas to draw paths, boxes, circles, text and add images.
In HTML, the <canvas> tag is used to dynamically draw shapes, pictures, and other visuals on a web page.
It gives you a drawing surface using JavaScript so you can work with and create graphics in real-time. The
<canvas> element is a container for visuals that you can create using JavaScript; it doesn't render anything
by itself.
An introductory example of using the <canvas> tag is as follows:
1. <!DOCTYPE html>
2. <html lang="en">
29
 3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>Canvas Example</title>
7. </head>
8. <body>
9. <canvas id="myCanvas" width="400" height="200"></canvas>
10. <script>
11. // JavaScript code to draw on the canvas
12. var canvas = document.getElementById("myCanvas");
13. var ctx = canvas.getContext("2d");
14. // Draw a red rectangle
15. ctx.fillStyle = "red";
16. ctx.fillRect(50, 50, 100, 50);
17. // Draw a blue circle
18. ctx.beginPath();
19. ctx.arc(300, 100, 30, 0, 2 * Math.PI);
20. ctx.fillStyle = "blue";
21. ctx.fill();
22. ctx.closePath();
23. </script>
24. </body>
25. </html>
The <canvas> element in this example has a width and height specified, along with the id property "my
Canvas". The JavaScript code contained in the <script> tags retrieves the canvas element using its ID,
acquires a 2D rendering context (ctx), and then draws a blue circle and a red rectangle on the canvas using
a variety of drawing techniques.
Because of its versatility, the <canvas> tag can be used on a web page for dynamic graphical content such
as games, animations, and data visualizations.
Output:

30
The <canvas> element defines a bitmapped area in an HTML page.
The Canvas API allows JavaScript to draw graphics on the canvas.
The Canvas API can draw shapes, lines, curves, boxes, text, and images, with colors, rotations,
transparencies, and other pixel manipulations.
Example
<canvas id="myCanvas" width="300" height="150"></canvas>
You can access a <canvas> element with the HTML DOM method getElementById().
Ex Program:
<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>

</body>
</html>
Output:

To draw in the canvas you need to create a 2D context object:

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
Note
The HTML <canvas> element itself has no drawing abilities.
31
You must use JavaScript to draw any graphics.
The getContext() method returns an object with tools (methods) for drawing.

Drawing on the Canvas

After you have created a 2D context, you can draw on the canvas.
The fillRect() method draws a black rectangle with a top-left corner at position 20,20. The rectangle is 150
pixel wide and 100 pixels high.
Syntax:
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Ex.Pro:
<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The fillRect() Method</h2>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>

<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>
Output:

32
Using Colors
The fillStyle property sets the fill color of the drawing object:
Example
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Ex:
<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
<script>
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>
Output:

33
You can also create a new <canvas> element with the document.createElement() method, and add
the element to an existing HTML page:
Syntax:
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Example
<!DOCTYPE html>
<html>
<style>
canvas {
border: 1px solid black;
}
</style>
<body>
<h1>HTML5 Canvas</h1>

<script>
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
</script>

34
 </body>
</html>
Output:

Paths:
The common way to draw on the canvas is to:
1. Begin a Path - beginPath()
2. Move to a Point - moveTo()
3. Draw in the Path - lineTo()
4. Draw the Path - stroke()
Syntax:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Example:
<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The stroke() Method</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
<script>

35
 const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.strokeStyle = "red";
ctx.stroke();
</script>
</body>
</html>
Output:

Add a JavaScript
After creating the rectangular canvas area, you must add a JavaScript to do the drawing.
Here are some examples:
Draw a Line
Example Program:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
36
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>

Example Program:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>

37
Example Program:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>

Example Program:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");

38
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>

Draw Linear Gradient

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

39
Example Program:
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
Output:

40
Drawing Methods
There are only 3 methods to draw directly on the canvas:

Method Description

fillRect() Draws a "filled" rectangle

strokeRect() Draws a rectangle (with no fill)

clearRect() Clears specified pixels within a rectangle

Path Methods

Method Description

beginPath() Begins a new path or resets the current path

closePath() Adds a line to the path from the current point to the start

41
 isPointInPath() Returns true if the specified point is in the current path

moveTo() Moves the path to a point in the canvas (without drawing)

lineTo() Adds a line to the the path

fill() Fills the current path

rect() Adds a rectangle to the path

stroke() Draws the current path

Circles and Curves

bezierCurveTo() Adds a cubic Bézier curve to the path

arc() Adds an arc/curve (circle, or parts of a circle) to the path

arcTo() Adds an arc/curve between two tangents to the path

quadraticCurveTo() Adds a quadratic Bézier curve to the path

Text

Method/Prop Description

direction Sets or returns the direction used to draw text

fillText() Draws "filled" text on the canvas

font Sets or returns the font properties for text content

measureText() Returns an object that contains the width of the specified text

strokeText() Draws text on the canvas

textAlign Sets or returns the alignment for text content

42
 textBaseline Sets or returns the text baseline used when drawing text

Colors, Styles, and Shadows

Method/Property Description

addColorStop() Specifies the colors and stop positions in a gradient object

createLinearGradient() Creates a linear gradient (to use on canvas content)

createPattern() Repeats a specified element in the specified direction

createRadialGradient() Creates a radial/circular gradient (to use on canvas content)

fillStyle Sets or returns the color, gradient, or pattern used to fill the
drawing

lineCap Sets or returns the style of the end caps for a line

lineJoin Sets or returns the type of corner created, when two lines meet

lineWidth Sets or returns the current line width

miterLimit Sets or returns the maximum miter length

shadowBlur Sets or returns the blur level for shadows

shadowColor Sets or returns the color to use for shadows

shadowOffsetX Sets or returns the horizontal distance of the shadow from the
shape

shadowOffsetY Sets or returns the vertical distance of the shadow from the shape

strokeStyle Sets or returns the color, gradient, or pattern used for strokes

Transformations

Method Description

43
 scale() Scales the current drawing bigger or smaller

rotate() Rotates the current drawing

translate() Remaps the (0,0) position on the canvas

transform() Replaces the current transformation matrix for the drawing

setTransform() Resets the current transform to the identity matrix. Then runs transform()

Image Drawing

Method Description

drawImage() Draws an image, canvas, or video onto the canvas

The ImageData Object / Pixel Manipulation

Method/Property Description

createImageData() Creates a new, blank ImageData object

getImageData() Returns an ImageData object that copies the pixel data for the specified
rectangle on a canvas

ImageData.data Returns an object that contains image data of a specified ImageData

object

ImageData.height Returns the height of an ImageData object

ImageData.width Returns the width of an ImageData object

putImageData() Puts the image data (from a specified ImageData object) back onto the
canvas

44
Additional Resources:
https://www.w3schools.com/graphics/canvas_intro.asp
https://www.javatpoint.com/html-canvas
Practice Questions:
1. Define Canvas.
2. List out the properties of canvas drawing object.
3. Write a short note on HTML5 Canvas.
4. Describe the drawing image in canvas.
5. What are the methods used for drawing rectangle in canvas.

9. HTML Audio and Video:

The HTML <audio> element is used to play an audio file on a web page.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output:

HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from.
The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support
the <audio> element.

45
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output:

HTML Audio and Video DOM Reference

The HTML5 DOM has methods, properties, and events for the <audio> and <video> elemen

HTML Audio/Video Methods

Method Description

addTextTrack() Adds a new text track to the audio/video

canPlayType() Checks if the browser can play the specified audio/video type

load() Re-loads the audio/video element

play() Starts playing the audio/video

pause() Pauses the currently playing audio/video

HTML Audio/Video Properties

Property Description

46
audioTracks Returns an AudioTrackList object representing available audio
tracks

autoplay Sets or returns whether the audio/video should start playing as

soon as it is loaded

buffered Returns a TimeRanges object representing the buffered parts of

the audio/video

controller Returns the MediaController object representing the current

media controller of the audio/video

controls Sets or returns whether the audio/video should display controls

(like play/pause etc.)

crossOrigin Sets or returns the CORS settings of the audio/video

currentSrc Returns the URL of the current audio/video

currentTime Sets or returns the current playback position in the audio/video

(in seconds)

defaultMuted Sets or returns whether the audio/video should be muted by

default

defaultPlaybackRate Sets or returns the default speed of the audio/video playback

duration Returns the length of the current audio/video (in seconds)

ended Returns whether the playback of the audio/video has ended or

not

error Returns a MediaError object representing the error state of the

audio/video

loop Sets or returns whether the audio/video should start over again
when finished

mediaGroup Sets or returns the group the audio/video belongs to (used to link
multiple audio/video elements)

muted Sets or returns whether the audio/video is muted or not

47
 networkState Returns the current network state of the audio/video

paused Returns whether the audio/video is paused or not

playbackRate Sets or returns the speed of the audio/video playback

played Returns a TimeRanges object representing the played parts of

the audio/video

preload Sets or returns whether the audio/video should be loaded when

the page loads

readyState Returns the current ready state of the audio/video

seekable Returns a TimeRanges object representing the seekable parts of

the audio/video

seeking Returns whether the user is currently seeking in the audio/video

src Sets or returns the current source of the audio/video element

startDate Returns a Date object representing the current time offset

textTracks Returns a TextTrackList object representing the available text

tracks

videoTracks Deprecated. Do not use it.

volume Sets or returns the volume of the audio/video

HTML Audio/Video Events

Event Description

abort Fires when the loading of an audio/video is aborted

canplay Fires when the browser can start playing the audio/video

canplaythrough Fires when the browser can play through the audio/video
without stopping for buffering

48
durationchange Fires when the duration of the audio/video is changed

emptied Fires when the current playlist is empty

ended Fires when the current playlist is ended

error Fires when an error occurred during the loading of an

audio/video

loadeddata Fires when the browser has loaded the current frame of the
audio/video

loadedmetadata Fires when the browser has loaded meta data for the audio/video

loadstart Fires when the browser starts looking for the audio/video

pause Fires when the audio/video has been paused

play Fires when the audio/video has been started or is no longer

paused

playing Fires when the audio/video is playing after having been paused
or stopped for buffering

progress Fires when the browser is downloading the audio/video

ratechange Fires when the playing speed of the audio/video is changed

seeked Fires when the user is finished moving/skipping to a new

position in the audio/video

seeking Fires when the user starts moving/skipping to a new position in

the audio/video

stalled Fires when the browser is trying to get media data, but data is
not available

suspend Fires when the browser is intentionally not getting media data

timeupdate Fires when the current playback position has changed

49
 volumechange Fires when the volume has been changed

waiting Fires when the video stops because it needs to buffer the next
frame

Practice Questions:
1.Define HTML5 Video and Audio
2.Give syntax to embedding video and audio in HTML 5.
Additional Resources:
https://www.w3schools.com/html/html5_audio.asp
https://www.w3schools.com/graphics/canvas_intro.asp
https://www.javatpoint.com/html-canvas

10.Introduction to CSS:
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document
written in HTML or XML, including various XML languages like SVG and XHTML. CSS defines how
elements should be rendered on screens, paper, in speech, or on other media, playing a vital role in web
development and design.
History of CSS:
Origins and Development
1. Developer
CSS was developed by the World Wide Web Consortium (W3C), with significant contributions
from Håkon Wium Lie and Bert Bos. Håkon Wium Lie first proposed the concept of CSS in 1994 to
address the challenges of document presentation on the web, which was previously controlled solely by
HTML.
2. Purpose
The primary goal of CSS was to separate the content of a document (HTML) from its presentation aspects
(fonts, colors, layout). This separation made web development more accessible and allowed web pages to
adapt more easily to different devices.
Early Versions
1. CSS1
The first official specification for CSS, known as CSS1, was published in December 1996. It introduced
basic features for text styling, font properties, margins, padding, color and background styling, and the box
model.
2. CSS2

50
Released in May 1998, CSS2 expanded upon CSS1 by adding more sophisticated selectors, positioning
capabilities, media types, and additional properties to enhance styling options.
Evolution and Modern CSS
1. CSS 2.1
An important revision known as CSS 2.1 addressed inconsistencies and errors found in CSS2. It became a
W3C Recommendation in June 2011 and is widely supported across all major browsers.
2.CSS3
Unlike previous versions, CSS3 was not released as a single, monolithic specification. Instead, it was
divided into several separate modules, each introducing new features and capabilities. Key modules
include:
 Selectors
 Box Model
 Backgrounds and Borders
 Text Effects
 2D/3D Transformations
 Animations
 Flexbox
 Grid Layout
This modular approach allowed for faster development and implementation in browsers.
Key Features and Innovations in CSS:
 Responsive Design: CSS3 introduced media queries, enabling the creation of responsive designs
that adapt to different screen sizes and resolutions.
 Advanced Layouts: Flexbox and Grid provide powerful layout mechanisms, simplifying the
creation of complex web layouts that are responsive and adaptable.
 Visual Enhancements: Transitions, animations, and transformations allow for the creation of
dynamic, interactive user interfaces without relying on JavaScript.
Continuous Development
 Living Standard: CSS is also considered a living standard, with new features, selectors, properties,
and modules being developed and added over time. The CSS Working Group, part of the W3C,
continuously works on drafting and refining CSS specifications.
 Current Focus: Recent developments in CSS focus on variables (custom properties), enhanced grid
and flexbox layouts, subgrid, aspect-ratio property, color manipulation functions, and more, aiming
to provide developers with more control and flexibility over web design.
Timeline and Versions up to 2024
 2000s-2010s: Introduction and gradual implementation of CSS3 modules across major web
browsers, significantly enhancing the capabilities of web design and development.

51
  2020s: Ongoing development of CSS4-related features, though the W3C no longer uses version
numbers for CSS. The focus is on incrementally adding new selectors, properties, and functions to
the existing CSS specifications. Innovations include container queries, which aim to further improve
responsive design capabilities, and new pseudo-classes and pseudo-elements.
CSS is the language we use to style a Web page.

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

Why Use CSS?

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

52
</body>
</html>
Output:

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare
for web developers. Development of large websites, where fonts and color information were added to every
single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by changing just one file!

Advantages of CSS
1. Separation of Content from Design
CSS allows you to separate your HTML content from styling, making your code cleaner and easier to
maintain and manage.
2. Greater Design Flexibility
CSS provides advanced styling options like animations, transitions, and grid systems, giving developers
more creative control over the look and behaviour of a website.
3. CSS style Consistency
CSS styles can be reused across multiple pages, saving time and effort.
4. Responsive Design
53
CSS enables responsive designs that adapt to different screen sizes using media queries. User can apply
various properties to an element for different screen sizes.
5. Customizable Styling
You can customize elements to enhance user experience with animations, transitions, and more.
6. Consistency Across Pages
Applying a single CSS file ensures a consistent look across all pages of your website.
7. Improves page Loading speed
External stylesheets can reduce the size of HTML files, leading to faster loading times.
Additional Resources:
https://www.w3schools.com/css/css_intro.asp
Practice Questions:
1.List out the advantage of CSS.
2.Define CSS.
3.Write about CSS comments.
4.Discuss on history of CSS.

11.CSS Rules:
A CSS rule consists of a selector and a declaration block

CSS Syntax

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

The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly
braces.
Example
In this example all <p> elements will be center-aligned, with a red text color:
<!DOCTYPE html>
<html>

54
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
Output:

Example Explained
 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

CSS Comments:
CSS comments are not displayed in the browser, but they can help document your source code

CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
Example
<!DOCTYPE html>
<html>
<head>
55
<style>
/* This is a single-line comment */
p{
color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
Output:

Additional Resources:
https://www.w3schools.com/css/css_intro.asp
Practice Questions:
1.Write a structure of CSS rules.
2.Write about CSS comments.

12.Style Types:
When a browser reads a style sheet, it will format the HTML document according to the information in
the style sheet
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
 External CSS
 Internal CSS
 Inline CSS

External CSS
56
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element,
inside the head section.
Example
External styles are defined within the <link> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:

An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Internal CSS

57
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:

Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS
property.
Example
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>

58
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Output:

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the value
from the last read style sheet will be used.
Assume that an external style sheet has the following style for the <h1> element:
h1 {
color: navy;
}
Then, assume that an internal style sheet also has the following style for the <h1> element:
h1 {
color: orange;
}
Example
If the internal style is defined after the link to the external style sheet, the <h1> elements will be
"orange":
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
59
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Output:

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Output:

60
Additional Resources:
https://www.w3schools.com/css/css_intro.asp
Practice Questions:
1.What are the three types of styles?
2.What are the CSS style properties?
3.Explain the different types of Style.
4.Explain multiple style sheet.

13.CSS Selectors:
A CSS selector selects the HTML element(s) you want to style

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)
 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
This page will explain the most basic CSS selectors.
The CSS element Selector
The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}

61
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Example
The CSS rule below will be applied to the HTML element with id="para1":

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>

62
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

Note: An id name cannot start with a number!

The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example
In this example all HTML elements with class="center" will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
63
Output:

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output:

64
Generic Font Families
In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and
elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic
look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}

.p2 {

65
 font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
Output:

Font
Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size
adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
 Absolute size is useful when the physical size of the output is known
66
Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Output:

67
The display property is the most important CSS property for controlling layou

The display Property

The display property is used to specify how an element is shown on a web page.
Every HTML element has a default display value, depending on what type of element it is. The default
display value for most elements is block or inline.
The display property is used to change the default display behavior of HTML elements.

Block-level Elements
A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to
the left and right as far as it can).
The <div> element is a block-level element.
Examples of block-level elements:
 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>

Inline Elements
An inline element DOES NOT start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
 <span>
 <a>
 <img>

The display Property Values

The display property has many values:

68
Value Description

inline Displays an element as an inline element

block Displays an element as a block element

contents Makes the container disappear, making the child elements children
of the element the next level up in the DOM

flex Displays an element as a block-level flex container

grid Displays an element as a block-level grid container

inline-block Displays an element as an inline-level block container. The element

itself is formatted as an inline element, but you can apply height
and width values

inline-flex Displays an element as an inline-level flex container

inline-grid Displays an element as an inline-level grid container

inline-table The element is displayed as an inline-level table

list-item Let the element behave like a <li> element

run-in Displays an element as either block or inline, depending on context

69
 table Let the element behave like a <table> element

table-caption Let the element behave like a <caption> element

CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through the background-
image property.
The different background images are separated by commas, and the images are stacked on top of each other,
where the first image is closest to the viewer.
The following example has two background images, the first image is a flower (aligned to the bottom and
right) and the second image is a paper background (aligned to the top-left corner):
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
70
</div>
</body>
</html>
Output:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid black;
background: url(img_flwr.gif);
background-size: 100px 80px;
background-repeat: no-repeat;
padding: 15px;
}
#example2 {
border: 1px solid black;
background: url(img_flwr.gif);
background-repeat: no-repeat;
padding: 15px;
}
</style>
</head>

71
<body>
<h1>The background-size Property</h1>
<p>Resized background-image:</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
</div>
<p>Original size of the background-image:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>
</div>
</body>
</html>

CSS Advanced Background Properties

72
 Property Description

background A shorthand property for setting all the background

properties in one declaration

background-clip Specifies the painting area of the background

background-image Specifies one or more background images for an

element

background-origin Specifies where the background image(s) is/are

positioned

background-size Specifies the size of the background image(s)

CSS has a lot of properties for formatting text.

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid gray;
padding: 8px;
}

h1 {
text-align: center;
text-transform: uppercase;
color: #4CAF50;
}
p{
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
73
a{
text-decoration: none;
color: #008CBA;
}
</style>
</head>
<body>
<div>
<h1>text formatting</h1>
<p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-
transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is
removed from this colored
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>
</body>
</html>

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

In CSS, a color can be specified by using a predefined color name:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
74
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Output:

Additional Resources:
https://www.w3schools.com/css/css_intro.asp
Practice Questions:
1.Define CSS selector and its types.
2.Define ID selector
3.Define Class selector
4.Define Element Selector
5.Define CSS background and its properties.

75