0% found this document useful (0 votes)

54 views

UI Module Complete Notes

Uploaded by

saikumar789324

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

54 views

UI Module Complete Notes

Uploaded by

saikumar789324

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 480

UI Module (Front End)

1. HTML
2. CSS
3. JavaScript
4. Bootstrap

Duration Course: 2Months

Class Timings : 9:15AM – 10:50AM (MON-SAT)
Telegram : codewithsatishgupta

2 Projects
--------------------------------------------------------------------------------------------
---

Types of Applications
1. Standalone Applications/Desktop applications
2. Web applications
3. Distributed applications
4. Mobile Applications
5. IOT Applications
6. AI Applications

Standalone or Desktop application

An application executed individually or independently is called
standalone or desktop application. These applications installed in
system and run from same system.
Example: Calculator, MsPaint, Ms-Word, Ms-Excel,…

Web Application
An application whose resources are accessed from browser are
called web applications.
Example: gmail.com, facebook.com,…

Distributed Applications
An application whose resources are access on other device using
other applications can be called distributed application.
Example: Amazon, flipcart…

Mobile Applications
An application which runs inside module and does not uses any
other resources is called mobile applications
Example: calculator, clock, contacts, games

IOT applications
IOT stands for Internet Of Things.
IOT Applications are controlling devices using internet

AI, applications
AI stands Artificial Intelligence.
Example: Driver less Car
--------------------------------------------------------------------------------------------
--
Networking

What is networking?
Networking is logical or physical connection between two or more
devices.

Advantage of networking
1. Sharing Data/information
2. Sharing resources

Types of networks
1. LAN  Local Area Network
2. MAN  Metropolitan Network
3. WAN  Wide Area Network

What is internet?
Internet is a wide area network (OR) networks of networks

1. Connection Oriented
2. Connection Less

In connection oriented two or more devices are connected using

cables.
In connectionless two or more devices are connected using radio
signals. It works with some devices installed inside computer or
mobile.
First network is introduced or created by US DO called ARPANET.
The Advanced Research Projects Agency Network (ARPANET) was
the first wide-area packet-switched network with distributed
control and one of the first computer networks to implement the
TCP/IP protocol suite.
----------------------------------------------------------------------------------------
What is Web?
Web is a part of internet or restricted access on internet is called
web.
Web also called WWW (World Wide Web) or W3 is a system of
interconnected public web pages accessible through the Internet

History of Web

codewithsatishgupta
What is Web?
Web is a part of internet or restricted access on internet is called
web.
Web also called WWW (World Wide Web) or W3 is a system of
interconnected public web pages accessible through the Internet
Web is invented by a person called Tim Berners Lee
Web standards are maintained by a non profitable organization
called W3C (World Wide Web Consortium). Standards defines set
of rules and regulations for developing web applications or web
sites.
Current version of web is Web3.

What is web site and web application?

What is web site?

Web site a collection of static resources
1. Web pages
2. Images
3. Videos
4. Audios
In website end user cannot interact.
A web site is read only.

What is web application?

Web application is collection of static resources and dynamic
resources.
In web application end user interact with application.
Example: Signin, Signup,…
Web applications required server side programming

Software required for developing web application or web site

1. VSCode is IDE (Visual Studio Code)
https://code.visualstudio.com/download
Extensions
1. VScode icons
2. Inteliescence CSS
3. LiveServer

Server
Server is a program/software which serves resources to one or
more than client. Server works based on two things
1. Request (input)
2. Response (Output)

Types of servers
1. Local Server
2. Cloud Server

Local Server
A server install in system is called local server
If application is installed in local server, it accessed by one
person.

Cloud Server
Installing web application/web site on cloud server, which allows
web application go live. It is accessed by the entire people
worldwide.

Directory structure of web application or website

Web application or web site is collection of programs/resources.
These resources are organized by following rules and regulations.

1. Create project folder

a. Public
b. Src

All public resources are stored in public folder.

1. Images
2. Videos
3. Audio
4. Doc
5. Html or htm
6. Css
All server side programs are stored in src folder

codewithsatishgupta
[email protected]
Q1: Explain directory structure of web application?
Web application/web site directory structured is divided into two
folder
1. Public
2. Src
Public folder contains static files or static resource (images, audio,
video, doc)
Src folder contains dynamic resources (css, javascript, java,…)

Q1: What is website?

Website/web application is virtual directory or path exists inside
web server.
1. Virtual path
2. Physical path

Physical path
A local directory or location where all application resources are
stored or saved.
Example: d:\flipcart

Virtual path
Always a website or web application is accessed using virtual
path.
This virtual path is called URL Uniform resource locator.

This virtual path is created when web application/website go into

live.

Note: Local server, virtual path is created by local server.

Q: What is ip-address?
Every computer or system in network is identified with unique
number called ip-address.

Q: What is portno?
Every project within server is identified with unique number called
portno.

What is webpage?
Web page is hyper text document which provides UI (User
Interface) for accessing resources.

Hyper means beyond

Types of web pages

1. Static page
2. Dynamic page

Static page respond same for every user.

A page whose content does not change from one user to another
user is called static page.
.html
.htm

Dynamic page respond different form users. These dynamic page

required server side technologies

.jsp
.php
.asp
.aspx

HTML

HTML stands for Hyper Text Markup Language.

Markup language defines structure or layout of webpage (OR)
markup language defines the presentation.

HTML  Creating Web Page

CSS  Cascading Style Sheet (styling web page)
JavaScript  developing interactive web page
Bootstrap  CSS library

What is browser?
Browser is a software used to communicate with web application.
Browser is thin-client software.
Brower is able to open any content (html, images, audio, video,..)

Example: Google Chrome, Edge, Mozilla Firefox

History of HTML

Telegram:
codewithsatishgupta
History of HTML

First marks language is introduced by CERN (European Council for

Nuclear Research) whose is GML (Generalized Markup Language)

Later this language is improved and developed a language called

SGML (Standardized Markup Language)

Tim Berners Lee introduced a language called HTML in early

1990’s
HTML is open source technology. HTML is superset of GML &
SGML

A community name IETF (Internet Engineering Task Force), who

maintained HTML upto HTML 3.0

Early 2004 a community name WHATWG is maintained HTML.

Previous version of HTML is 4.0 and current version of HTML 5
(2014)
WHATWG stands for Web Hypertext Application Technology
Working Group.

Browser Architecture
Browser is a program/software which provides end user to
communicate with website or web application or server

1. Browser UI
2. Persistence (Bookmarks, Cookies, …)
3. Networking
4. Browser Engine
5. Render Engine
6. Java script engine

Browser UI : Browser User Interface, provides facilities to

communicate with browser.
Example: address bar, refresh, back, forward

Data Persistence: browser is able to persist or store data

(cookies, Bookbamrks)
Networking : Browser establish communicate between client
and server. Browser work with request/response.

Browser Engine: Browser engine responsibility is translating

HTML and CSS understand by browser.

Render Engine: Render engine responsibility is displaying

content within browser

Java script Translator: java script interpreter which translate

and execute java script code.

HTML tags/elements

codewithsatishgupta
HTML is a markup language
HTML is used for presentation of data and providing UI for
client/end User. It provides the user interface for accessing web
resources.
HTML is used for creating web pages.
HTML provides tokens and these are called tags. Each tag
represents one element.

HTML elements are classified into 5 groups

1. Normal elements
2. Empty elements/void elements
3. RC Data Elements
4. Raw Text Elements
5. Foreign Elements

Normal elements
An element which presents data without using any attributes.
This element required begins token/tag/element and end
token/tag/element.
Normal elements return values

Example: <b>…</b>

Empty elements/void elements

Void elements required attributes to present data.
It does not return any value/data
Void elements do not have end tag/token

Example: <img>
RC Data elements
RC Data elements are called Rich Text Data elements.
These elements are used to represent plain text, numbers and
other content.
RC data elements/tag does not allow nested tags/elements.

Example: <textarea> … </textarea>

Raw text elements

Raw text elements are presented using raw text; it does not
required any tags.

Example:
©
Amount        is &#8377 45,000/-

Foreign Elements
These elements are not comes default with HTML.
These elements are available in library.
Library must be imported in order to use.

Example: Canvas

Web Page

Every page or html page is having extension .html or .htm

Note: tools can be used for creating web page

Example if web page is created using ms-word, this page is saved
with .htm

1. Define Document Definition/Declaration

Document definition tells the browser which language and version
is used to develop webpage
This document definition is given using <!DOCTYPE html>
If HTML page is written in HTML 5.0, doctype is must.
<!DOCTYPE html>
codewithsatishgupta
[email protected]
2. Defining “document scope”

Document scope is defined using <html>…</html>

Every web page or document must start with <html> and end
with </html>

Syntax:
<html>

</html>

If multiple documents defined inside html file/page, all these

documents merged inside one document/web page.

<html> element is having an attribute called “lang”, this attribute

defines language, date, time and currency format.

Syntax:
<html lang=”en-in”>
<html lang=”en-us”>
<html lang=”en-fr”>
<html lang=”en-uk”>

This document scope is divided into two parts

1. head
2. body

HTML document is divided into two parts 1. head 2.body

Syntax:
<html>
<head>
</head>

<body>
</body>
</html>
The content defined inside head is stored inside memory.
Whenever browser required it read from memory, without reading
from server. This avoids round trip.
This content defined inside body it does not store inside memory,
whenever browser required it read from server.

head

head tag is used to define,

1. page title
2. page is responsive
3. seo friendly or seo optimization
4. external resources
5. scripting

<title>…</title>
This tag is defined inside head.
This tag is used to define page title, which is displayed on title
bar.
This title also used in SEO Optimization.

Syntax: <title> … </title>

Example:
<!DOCTYPE html>
<html lang="en-in">
<head>
<title>Flipcart</title>
</head>
</html>

What is favicon?
Icon is a image, which is displayed before title on title bar.
This image must have extension “ico”
This size of this image must be small (15x15px)

Syntax:
<link rel=’relation-type’ href=”resource name/path”>

Name of this image must favicon.ico or any other name. this

image can be in png,ico formats.

codewithsatishgupta
The following tags are used inside <head> tag

1. <title>
2. <link>
3. <meta>
4. <script>
5. <style>

meta tag is used to define meta data.

Meta data is providing information data
meta tag defines information about web page
meta tag is used to make webpage responsive and SEO friendly

Responsive
Creating page responsive, the web page content fit according to
devices and screen.
For making page as responsive there are various approaches and
one of the approaches is using meta tag.

<meta name=”viewport” content=”width=device-width, initial-

scale=1”>

viewport : it is nothing but on which device web page viewed

desktop, mobile, tab, samrtwatch

content : define the content should adjusted according to width of

device.

Initial-scale : Zoom percentage 1  100% 1.5  150%

Note: this meta tag can be used more than one time

Testing webpage on simulator

Open Chrome
Search mobile simulator chrome extension and install
https://chromewebstore.google.com/detail/mobile-
simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk

open chrome browser and type following URL for open

project

http://127.0.0.1:5500/public/index.html

if you want test edge browser

click right mouse button on webpage and select inspect

This tag is used to refresh the web page every 2 seconds

<meta http-equiv=”refresh” content=”2”>

SEO friendly

The webpage developed by programmer/web developer must be

SEO friendly, it mean search engine must identify your web page.

UTF stands UNICODE transformation Format, which define set

characters used by web page

UTF-8  English (1byte – 8bits)

UTF -16,UTF-32,UTF-64 these are character set of other
languages.
<!DOCTYPE html>
<html lang="en-in">
<head>
<title>Flipcart</title>
<link rel="icon" href="images/favicon1.png">
<meta name="viewport" content="width=device-width, initial-scale=2">
<meta http-equiv=”refresh” content=”5”>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, omnis
eveniet fugiat veritatis nobis voluptates odio nihil beatae quam eos
aliquam, soluta deleniti officiis laboriosam natus! Exercitationem dicta
necessitatibus voluptas!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis fugit
consectetur optio atque unde, id nihil voluptate commodi excepturi
aspernatur et ipsa laboriosam inventore, quae quos vitae nesciunt? Eius,
inventore?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, rem.
Natus, hic animi. Repellendus totam, alias asperiores dolore vero cumque
optio fuga, libero dicta facilis consectetur ut voluptatem rerum qui!

</body>
</html>

codewithsatishgupta
[email protected]
<meta name=”keywords” content=”keywords”>

This tag is used to define keywords

Example:
<meta name=”keywords” content=”java,oracle,HTML”>

<meta name=”description” content=”description”>

This tag is used to provide information about web page or web
site.

Example:
<meta name=”description” content=”Best Training for HTML,
CSS, JS, JAVA, PYTHON in Hyderabad”>

<style>

</style>

</script>

body
The content of web page is defined inside body tag.
The content is displayed within browser as a part of web page.

Syntax:
<body>

</body>

In HTML4 version layout of the webpage or body is defined using

tables. The problem with tables is, the content is loaded
randomly.

In HTML 5 version they introduced semantic elements. The

elements which are used for specific purpose are called semantic
elements.
In HTML5 there are more than 100 semantic elements. These
semantic elements are introduced to make your web page SEO
friendly.

Example:
<header>
<footer>
<section>
<summary>
<nav>
<figure>
<time>
Etc…

Non semantic tags or elements

The elements which can be used for any purpose are called non
semantic tags or elements.

1. <div>
2. <span>
<div>

<div> is non semantic tag, it is used to organize related content

by dividing into divisions.

<span>
This tag is used or embedded within line of text or continues text
or elements.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Demo</title>
<style>
div{
border: 2px black solid;
margin: 10px;
padding: 5px;
}
span
{
color:blue;
}
</style>
</head>
<body>
<div>
Full Stack Python
<div>
Module-1 Python
<div>
Core Python
<div>
Python <span>Language</span> Fundamentals
</div>
</div>
<div>
Adv Python
<div>
OOP, Database, Exceptions<br>
Files, GUI, Date Time
</div>
</div>
</div>
<div>
Module-2 FrontEnd
<div>
HTML
<div>
Creating Web Pages
</div>
<div>
CSS
<div>
Styling Web Pages
</div>
</div>
</div>
</div>
</div>
</body>
</html>

bgcolor:
This attribute define the background color of body or webpage
These colors in HTML are represented in different formats
1. Color name
a. Solid color names
b. Shading color names
2. Color value

Solid color:
1. Red
2. Blue
3. Green
4. Pink
5. Yellow
6. Black
7. White
Shade colors:
1. Lightgreen
2. Lightblue

Color Value:
R  Red  0-255
G  Green  0-255
B  Blue  0-255
Color value is represented in two formats
1. Single digit format
2. Double digit format
This color value is prefix with #
This color value technically are called hexacode(hexadecimal
value format)

Example:
<body bgcolor=”red”>
<body bgcolor=”yellow”>
<body bgcolor=”lightblue”>
<body bgcolor=”#00f”>
<body bgcolor=”#a0b”>
<body bgcolor=”#a10000”>
<body bgcolor=”#aa00bb”>

text
This attribute is used to define font color or text color

Example:
<body text=”red”>
<body text=”#00ff00”>

background
This attribute is used to define background image

Syntax:
<body background=”images/imagename”>

Image can be style used css styles

1. Background-size
2. Background-repeat
3. Background-position
4. Background-attachment

Syntax:
<style>
body
{
Background-size: width,height,cover,contain
Background-position: top, bottom, left, right,center
Background-repeat: no-repeat,repeat,repeat-x,repeat-y
Background-attachment : scroll,fixed
}

align

This is used for alignment of text

The value of alignment is
1. Left
2. Right
3. Center
4. Justify

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Demo</title>
<style>
div{
border: 2px black solid;
margin: 10px;
padding: 5px;
}
body
{
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: 500px 500px;
background-attachment:fixed;
}

</style>
</head>
<body background="images/banner.avif" text="yellow">
<div>
Full Stack Python
<div>
Module-1 Python
<div>
Core Python
<div>
Python <span>Language</span> Fundamentals
</div>
</div>
<div>
Adv Python
<div>
OOP, Database, Exceptions<br>
Files, GUI, Date Time
</div>
</div>
</div>
<div>
Module-2 FrontEnd
<div>
HTML
<div>
Creating Web Pages
</div>
<div>
CSS
<div>
Styling Web Pages
</div>
</div>
</div>
</div>
</div>
<div>
Full Stack Python
<div>
Module-1 Python
<div>
Core Python
<div>
Python <span>Language</span> Fundamentals
</div>
</div>
<div>
Adv Python
<div>
OOP, Database, Exceptions<br>
Files, GUI, Date Time
</div>
</div>
</div>
<div>
Module-2 FrontEnd
<div>
HTML
<div>
Creating Web Pages
</div>
<div>
CSS
<div>
Styling Web Pages
</div>
</div>
</div>
</div>
</div>
</body>
</html>

[email protected]
codewithsatishgupta  telegram
align

This is used for alignment of text

The value of alignment is
1. Left
2. Right
3. Center
4. Justify

Alignment defines the flow of text within body.

Left  align text within body from left to right. In left alignment
flow of text is from left to right.
Right  align text within body from right to left. In right alignment
flow of text is from right to left
Center  align text within body in the middle or center. In center
alignment the flow of text is from center to left and right.
Justify  align text within body according to width.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body align="justify">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas
similique illum sunt sed praesentium a sint quidem non accusamus in
hic iste, necessitatibus voluptas qui voluptatem vitae expedita nam at.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam
molestiae harum animi nesciunt similique quisquam sapiente! Deleniti
vitae eligendi corporis ducimus earum ea praesentium eos officiis.
Laudantium laborum in adipisci.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis dolorum
iste iure neque cumque optio mollitia ab deserunt odit accusamus
quos, incidunt tempora eaque, labore itaque accusantium molestias,
blanditiis nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione ipsam
qui porro vero, ad possimus sunt. Magni itaque ab voluptate omnis
mollitia, veniam error fugit placeat odio aliquam nam <ipsa
class="lo"></ipsa>
</body>
</html>

Margins

The margin is nothing but space given from page border to

content.
This margin is set using 4 attributes
1. Leftmargin
2. Righmargin
3. Topmargin
4. Bottommargin

Syntax:
<body
leftmargin=<value>,rightmargin=<value>,topmargin=<value>,
bottommargin=<value> >

Content

</body>

This margins sets the space between page border and content.

Example:
<body leftmargin=”50” topmargin=”50”>
Content

</body>

alink  This attribute is used to set active link color

vlink  This attribute is used to set visited link color

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body vlink="green" alink="red">
<a href="https://www.nareshit.com">NareshIt</a><br>
<a href="http://www.google.com">Google</a>
<a href="http://www.facebook.com">Facebook</a>

</body>
</html>

1. Bgcolor
2. Text
3. Background
4. Align
5. Leftmargin
6. Rightmargin
7. Topmargin
8. Bottommargin
9. Alink
10. Vlink
https://themes.getbootstrap.com/
<header>..</header>

<header> is semantic element/tag used for defining headers.

This header contains navigation, logo/image, heading and
authentication, search bar, header tags.
Header element is SEO friendly.
In webpage, a developer can be define multiple header semantics

Syntax:
<header>
tags
</header>

CSS styles

CSS style attributes for text formatting/style

1. font-size : it sets size of the character

2. font-family : it set font name default is (Arial,Script)
3. color : it sets text color
4. font-weight : sets bold
5. font-style : sets italic

Syntax:
{
font-size: size;
font-family:font-name;
color:color;
font-weight:bold;
font-style:italic;
}

CSS styles for margins and padding

The following attributes are used for margins and padding

margin: sets left, right, top, bottom margin

margin-left : sets left margin
margin-right : sets right margin
margin-top : sets top margin
margin-bottom : sets bottom margin

padding : sets left,right,bottom,top padding

padding-left : sets left padding
padding-right: sets right padding
padding-top : sets top padding
padding-bottom : sets bottom padding

Margin is space from page border to border

Padding is space from border to content

CSS styles for borders

border: size style color

border-top : sets top border
border-left :sets left border
border-right: sets right border
border-bottom: sets bottom border

size is thickness of border

style how border should be (dotted, doubled, solid,..)
color define border color

border-radius

This attribute defines border radius

Syntax:
{
Border-radius: sets radius for all the borders (left-top, left-
bottom, right-top, right-bottom)
Border- top-left radius:
Border-top-right- radius:
Border-bottom-left-radius:
Border-bottom-right-radius:

}
CSS display styles
Bootstrap icons
Bootstrap is CSS library.
In order to work with bootstrap icons use the following steps
1. Install nodejs
a. To use package manger called npm (node package
manager), it is used for managing packages(libraries)
Note: npm stands for node package manger

How verify node is installed or not?

1. Open command prompt

Open vscode
Open terminal

CSS display styles

display:none : hide element
display:inline : it will display element side by side without
effects (size,format)
display:block : it will display element one after another
display:inline block : it will display elements side by side with
effects
(size and format)
Display:flex : it can display inline or block
Flex-direction : row
Flex-direction: column

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Demo</title>
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
<style>
header{
font-size: 30px;
margin: 20px;
padding-left:20px;
padding-top:20px;
padding-bottom: 20px;
display: flex;
flex-direction: row;
justify-content:space-evenly;
}
.banner{
font-size: 50px;
font-family:"arial";
font-weight: bold;
}
</style>
</head>
<body>
<header>
<div>
<span class="banner">Shopper.</span>
</div>
<div >
<nav>
<span>Home</span>
<span>Catalog</span>
<span>Shop</span>
<span>Page</span>
<span>Blog</span>
<span>Docs</span>
</nav>
</div>
<div>
<span class="bi bi-search"></span>
<span class="bi bi-person"></span>
<span class="bi bi-heart"></span>
<span class="bi bi-cart"></span>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Demo</title>
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
<style>
header{
font-size: 25px;
margin:10px;
padding-top:10px;
display: flex;
flex-direction: row;
justify-content:space-between;
}
.banner{
font-size: 35px;
font-family:"arial";
font-weight: bold;
}
.navbar span {
padding-right: 20px;
}
.icons span {
padding-right: 20px;
}
</style>
</head>
<body>
<header>
<div>
<span class="banner">Shopper.</span>
</div>
<div class="navbar" >

<span>Home</span>
<span>Catalog</span>
<span>Shop</span>
<span>Page</span>
<span>Blog</span>
<span>Docs</span>

</div>
<div class="icons">
<span class="bi bi-search"></span>
<span class="bi bi-person"></span>
<span class="bi bi-heart"></span>
<span class="bi bi-cart"></span>
</div>
</header>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
<title>SELL</title>
<style>
header{
display:flex;
justify-content: space-between;
margin-top: 40px;
border: 2px solid black;
padding: 20px;
background-color: bisque;
}
span{
padding-right: 10px;
}
.logo
{
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
.nav_bar
{
font-size: 20px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<span>SELL.</span>
</div>
<div>
<nav class="nav_bar">
<span>HOME</span><span class="bi bi-chevron-down"></span>
<span>SHOP</span><span class="bi bi-chevron-down"></span>
<span>TEMPLATE</span><span class="bi bi-chevron-
down"></span>
<span>DROPDOWN</span><span class="bi bi-chevron-
down"></span>
<span>CONTACT</span>
<span>DOCS</span><span class="bi bi-chevron-down"></span>
</nav>
</div>
<div>
<span class="bi bi-search"></span>
<span class="bi bi-person-circle"></span>
<span class="bi bi-cart"></span>

</div>
</header>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LandKit</title>
<style>
header{
display:flex;
justify-content: space-evenly;
margin-top: 40px;
}
.logo
{
font-size: 30px;
font-weight: bold;
color:blue;
}
nav
{
font-size:25px;
}
.btn
{
font-size: 25px;
border:2px solid blue;
color:white;
background-color: blue;

}
span
{
padding-right: 20px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<span>LandKit.</span>
</div>
<div>
<nav>
<span>Landings</span>
<span>Pages</span>
<span>Account</span>
<span>Documentation</span>
</nav>

</div>
<div>
<span class="btn">Buy Now</span>
</div>

</header>
</body>
</html>
CSS Colors
CSS provides various approaches for representation of colors
1. Color name
2. Shade Name
3. Hexa Code/HexaDecimal Value
4. rgb() function
5. rgba() function
6. hsl() function
7. hsla() function
8. linear-gradient
9. radial-gradient

1. Color Name
Each color in css represented as keyword.
1. Red
2. Blue
3. Green
4. Yellow
5. Cyan
6. Pink

2. Shade Name
Shade name is represented as keyword

1. Darkgreen
2. Darkred
3. Lightgreen
4. Lightred

3. HexaCode

Color value is represented in hexacode

0 1 2 3 456789abcdef
Hexacode is represented in one digit or two digits

#000 #f00 #0f0 #00f #abc

Two digits format is used for representing colors ranges from 0-

255
#00ff00 #ab1245

4. rgb() function

CSS provides rgb function to represent color

Syntax: rgb(red,green,blue)

Example:
{
Backround_color:rgb(100,50,120);
}

5. rgba(red,green,blue,alpha)

alpha represent transparent.

This transparent value range from 0-1

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Demo</title>
<style>
body
{
background-size: cover;
background-repeat: no-repeat;
}
div
{
height: 100vh;
background-color: rgba(0,0,0,0.7);
font-size:30px;
color:white;
text-align: center;
}
</style>
</head>
<body background="images/banner.avif">
<div>
This Text is inside Division
</div>
</body>
</html>

6. hsl() function

This function returns color value using

H : Hue
S : saturation
L : lightness

Hue : It is a color angle from 0 to 360 deg

0-120  red
120-240  green
240-360  blue
Saturation: it control “gray” color from 1% to 100%
Lightness: it control brightness from 1% to 100%

Example:
{
Background-color:hsl(120deg,70%,50%);
}

7. hsla() function

This function returns color value using

H : Hue
S : saturation
L : lightness
a : alpha (0-1) transparent

Example:
Example:
{
Background-color:hsla(120deg,70%,50%,0.5);
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Demo</title>
<style>
body
{
background-size: cover;
background-repeat: no-repeat;
}
div
{
height: 100vh;
background-color: hsla(0,50%,30%,0.5);
}
</style>
</head>
<body background="images/banner.avif">
<div>

</div>
</body>
</html>
8. linear-gradient
9. radial-gradient

we can put gradient colors only using backround-image property

or attribute

Syntax
{
Background-image:linear_gradient() or radial_gradient()
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Demo</title>
<style>
body
{
background-image: radial-gradient(red,yellow,green)
}
</style>
</head>
<body>

</body>
</html>
section

section is semantic element in HTML.

section element is defined between header and footer.
section defines the content which is displayed between header
and footer.

Syntax:
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>

main

main is called semantic element in HTML5

main is consider as entry point of webpage/website
main defines the content which is used by end user/client to start
using website. (where user can start)
A page may contains multiple main semantic elements.
This element is defined inside section.

Syntax:
<body>
<header>
</header>
<section>
<main>
</main>
</section>
<footer>
</footer>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css"
<title>NetFlix</title>
<style>
body
{
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
.cover
{
background-color:rgba(0,0,0,0.7) ;
height: 100vh;
margin: -20px;

}
header
{
color:white;
font-family: Arial;
padding:60px;
display:flex;
justify-content:space-around;
}
.brand-name
{
color:red;
font-size: 40px;
font-weight: bold;
}
.language
{
border:1px solid white;
padding:5px;
}
.btn-signin
{
border:1px solid red;
font-size: 20px;
margin-left: 20px;
background-color: red;
border-radius: 5px;
width:100px;
height:30px ;
display:inline-block;
text-align: center;
padding-top: 5px;
}
section
{
color:white;
font-family: Arial;
text-align: center;
margin-top: 120px;
}
.text1
{
font-size: 45px;
font-weight: bold;
margin-bottom: 10px;
}
.text2
{
font-size: 20px;
}
.text3
{
font-size: 20px;
margin-bottom: 50px;
}
main {
margin-top: 25px;
font-family: Arial;
font-size:20px;
}
.email
{
border:1px solid gray;
background-color: rgba(0,0,0,0.7);
padding:10px;
width:350px;
display:inline-block;
color:gray;
}
.start-btn
{
border:1px solid red;
background-color: red;
color:white;
padding:10px;
width:200px;
border-radius: 5px;
}
</style>
</head>
<body background="images/netflix-banner.jpeg">
<div class="cover">
<header>
<div class="brand-name">
<span>NETFLIX</span>
</div>
<div>
<span class="language">
<span class="bi bi-translate"></span>
<span>English</span>
<span class="bi bi-chevron-down"></span>
</span>
<span class="btn-signin">
Signin
</span>
</div>
</header>
<section>
<div class="text1">Unlimited movies, TV shows and more</div>
<div class="text2">Watch anywhere. Cancel anytime.</div>
<main>
<div class="text3"> Ready to watch? Enter your email to create or
restart your membership.
</div>
<div>
<span class="email">Email Address</span>
<span class="start-btn">
<span>Get Started</span><span class="bi bi-chevron-
right"></span>
</span>
</div>
</main>
</section>
</div>
</body>
</html>
<article> element

<article> is a semantic element HTML5

The <article> HTML element represents a self-contained
composition in a document, page, application, or site, which is
intended to be independently distributable or reusable (e.g., in
syndication). Examples include: a forum post, a magazine or
newspaper article, or a blog entry, a product card, a user-
submitted comment, an interactive widget or gadget, or any other
independent item of content.

Syntax:
<article>
</article>

footer element

footer is semantic element HTML5

it is used to define footer information of web page
A <footer> typically contains information about the author of the
section, copyright data or links to related documents and contact.

Syntax:
<footer>
</footer>

}
.footer-email
{
border:1px solid black;
background-color: rgb(65, 64, 64);
width:350px;
display:inline-block;
padding:20px;
text-align: left;
font-size: 15px;
color:gray;
}
.footer-sub-btn
{
border:1px solid black;
background-color: rgb(65, 64, 64);
color:white;
width:100px;
display:inline-block;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.footer1
{
margin-top: 30px;
}
</style>
</head>
<body>
<header>
<div>
<span class="banner">Shopper.</span>
</div>
<div class="navbar" >

<span>Home</span>
<span>Catalog</span>
<span>Shop</span>
<span>Page</span>
<span>Blog</span>
<span>Docs</span>

<footer>
<div class="footer-want">Want style Ideas and Treats?</div>
<div class="footer1">
<span class="footer-email">Enter Email*</span>
<span class="footer-sub-btn">Subscribe</span>
</div>
<div>
<div>
<span>Shopper</span>
<span class="bi bi-facebook"></span>
<span class="bi bi-youtube"></span>
<span class="bi bi-twitter"></span>
<span class="bi bi-instagram"></span>
<span class="bi bi-medium"></span>
</div>
<div>

</div>
<div>

</div>
<div>
</div>
</div>

</footer>
</body>
</html>
CSS grid

CSS grid display organize items in rows and columns

This grid can be configured using css display properties
“display:grid”
Grid can arrange items or elements in rows or columns by using
grid template property

1. grid-template-rows
2. grid-template-columns

Syntax
{
Display:grid;
Grid-templates-rows:
grid-template-columns:
}

This rows and columns are divided in fixed size or responsive size.
Fixed size is represented in pixels
Responsive size is represented in fractional

The default screen width is 1200px or 12fr

Px  represents pixels
Fr  represents fractional
Example
{
display:grid;
grid-template-columns: 300px 300px 300px 300px
}

Example
{
display:grid:
grid-template-columns: 3fr 3fr 3fr 3fr
}

Example:
{
display:grid;
grid-template-columns:4fr 4fr 4fr;
}
Example:
{
Display:grid;
Grid-template-columns:2.5fr 2.5fr 2.5fr 2.5fr 2.5fr;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Demo</title>
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
<style>
header{
font-size: 25px;
margin:10px;
padding-top:10px;
display: flex;
flex-direction: row;
justify-content:space-between;
}
.banner{
font-size: 35px;
font-family:"arial";
font-weight: bold;
}
.navbar span {
padding-right: 20px;
}
.icons span {
padding-right: 20px;
}
article
{
background-color: black;
color:white;
font-size: 25px;
padding:15px;
text-align: center;
}
article span{
color:darkgoldenrod;
}
.deals
{
color:white;
}
footer
{
margin-top: 200px;
background-color: black;
color:white;
font-family: Arial;
padding-top:50px;
height: 300px;
}
.footer-want
{
font-size: 25px;
text-align: center;
}
.footer-email
{
border:1px solid black;
background-color: rgb(65, 64, 64);
width:350px;
display:inline-block;
padding:20px;
text-align: left;
font-size: 15px;
color:gray;
}
.footer-sub-btn
{
border:1px solid black;
background-color: rgb(65, 64, 64);
color:white;
width:100px;
display:inline-block;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.footer1
{
margin-top: 20px;
text-align: center;
}
.service-title
{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.services
{
display: grid;
grid-template-columns:2.5fr 2.5fr 2.5fr 2.5fr 2.5fr;
margin: 50px;

}
.services span {
display:block;
color:gray;
font-family: Arial;
}
.smedia {
display:flex;
justify-content:space-evenly;
}
</style>
</head>
<body>
<header>
<div>
<span class="banner">Shopper.</span>
</div>
<div class="navbar" >

<span>Home</span>
<span>Catalog</span>
<span>Shop</span>
<span>Page</span>
<span>Blog</span>
<span>Docs</span>

<footer>
<div class="footer-want">Want style Ideas and Treats?</div>
<div class="footer1">
<span class="footer-email">Enter Email*</span>
<span class="footer-sub-btn">Subscribe</span>
</div>
<div class="services">
<div>
<span class="service-title">Shopper</span>
<div class="smedia">
<span class="bi bi-facebook"></span>
<span class="bi bi-youtube"></span>
<span class="bi bi-twitter"></span>
<span class="bi bi-instagram"></span>
<span class="bi bi-medium"></span>
</div>
</div>
<div>
<span class="service-title">SUPPORT</span>
<span>Contact Us</span>
<span>FAQs</span>
<span>Size Guide</span>
<span>Shipping & Returns</span>
</div>
<div>
<span class="service-title">SHOP</span>
<span> Men's Shopping</span>
<span>Women's Shopping</span>
<span>Kids' Shopping</span>
<span>Discounts</span>
</div>
<div>
<span class="service-title">COMPANY</span>

<span> Our Story</span>

<span>Careers</span>
<span>Terms & Conditions</span>
<span>Privacy & Cookie Policy</span>

</div>
<div>
<span class="service-title">CONTACT</span>

<address>
<span> 1-202-555-0105 </span>
<span>1-202-555-0106</span>
<span>[email protected]</span>

</address>

</div>
</div>
</footer>
</body>
</html>

margin-top: 100px;
}
.back
{
background-color: gray;
text-align: center;

font-size: 20px;

}
.services
{
display:grid;
grid-template-columns: 3fr 3fr 3fr 3fr;
}
.title
{
font-size: 15px;
font-weight: bold;
}
.services span {
display:block;
padding-top:10px ;
}
</style>
</head>
<body>
<footer>
<div class="back">
<span >Back to Top</span>
</div>
<div class="services">
<div>
<span class="title">Get to Know Us</span>
<span>About Us</span>
<span>Careers</span>
<span>Press Releases</span>
<span>Amazon Science</span>
</div>
<div>
<span class="title">Connect with Us</span>
<span>Facebook</span>
<span>Twitter</span>
<span>Instagram</span>
</div>
<div>
<span class="title">Make Money with Us</span>
<span>Sell on Amazon</span>
<span>Sell under Amazon Accelerator</span>
<span>Protect and Build Your Brand</span>
<span>Amazon Global Selling</span>
<span>Become an Affiliate</span>

</div>
<div>

<span class="title"> Let Us Help You</span>

<span> COVID-19 and Amazon</span>
<span> Your Account</span>
<span> Returns Centre</span>
</div>

</div>
</footer>
</body>
</html>

1. header
2. footer
3. main
4. nav
5. address
6. article
7. section
css image properties

container
{
background-image: url(path);
background-size:cover,size;
background-repeat:repeat or no-repeat;
background-postion:center center;
background-attatchment: fixed;
}

}
.footer-email
{
border:1px solid black;
background-color: rgb(65, 64, 64);
width:350px;
display:inline-block;
padding:20px;
text-align: left;
font-size: 15px;
color:gray;
}
.footer-sub-btn
{
border:1px solid black;
background-color: rgb(65, 64, 64);
color:white;
width:100px;
display:inline-block;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.footer1
{
margin-top: 20px;
text-align: center;
}
.service-title
{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.services
{
display: grid;
grid-template-columns:2.5fr 2.5fr 2.5fr 2.5fr 2.5fr;
margin: 50px;

}
.services span {
display:block;
color:gray;
font-family: Arial;
}
.smedia {
display:flex;
justify-content:space-evenly;
}
.main
{
display:grid;
grid-template-columns: 4fr 4fr 4fr;
font-size: 30px;
color:white;

}
.women
{
background-image: url(images/women-banner.avif);
background-size: cover;
height: 500px;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.ban{
font-size: 50px;
font-family: Arial;
font-weight: bold;
}

.men
{
background-image: url(images/men-banner.avif);
background-size: cover;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;

}
.kids
{
background-image: url(images/kids-banner.avif);
background-size: cover;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.btn{
border: 1px solid white;
background-color: white;
color:black;
padding:15px;
font-size: 15px;
}
</style>
</head>
<body>
<header>
<div>
<span class="banner">Shopper.</span>
</div>
<div class="navbar" >

<span>Home</span>
<span>Catalog</span>
<span>Shop</span>
<span>Page</span>
<span>Blog</span>
<span>Docs</span>

</div>
<div class="icons">
<span class="bi bi-search"></span>
<span class="bi bi-person"></span>
<span class="bi bi-heart"></span>
<span class="bi bi-cart"></span>
</div>
</header>
<article>
<span class="bi bi-lightning-charge-fill" ></span>
<span class="deals">Happy Holiday Deals on Everything
</span>
<span class="bi bi-lightning-charge-fill"></span>
</article>
<section>
<div class="main">
<div class="women">
<span class="ban">Women</span>
<span class="btn">Shop Women</span>
</div>
<div class="men">
<span class="ban">Men</span>
<span class="btn">Mens Shoping</span>
</div>
<div class="kids">
<span class="ban"> Kids</span>
<span class="btn">Kids Shoping</span>
</div>
</div>

</section>
<footer>
<div class="footer-want">Want style Ideas and Treats?
</div>
<div class="footer1">
<span class="footer-email">Enter Email*</span>
<span class="footer-sub-btn">Subscribe</span>
</div>
<div class="services">
<div>
<span class="service-title">Shopper</span>
<div class="smedia">
<span class="bi bi-facebook"></span>
<span class="bi bi-youtube"></span>
<span class="bi bi-twitter"></span>
<span class="bi bi-instagram"></span>
<span class="bi bi-medium"></span>
</div>
</div>
<div>
<span class="service-title">SUPPORT</span>
<span>Contact Us</span>
<span>FAQs</span>
<span>Size Guide</span>
<span>Shipping & Returns</span>
</div>
<div>
<span class="service-title">SHOP</span>
<span> Men's Shopping</span>
<span>Women's Shopping</span>
<span>Kids' Shopping</span>
<span>Discounts</span>
</div>
<div>
<span class="service-title">COMPANY</span>

<span> Our Story</span>

<span>Careers</span>
<span>Terms & Conditions</span>
<span>Privacy & Cookie Policy</span>

</div>
<div>
<span class="service-title">CONTACT</span>

<address>
<span> 1-202-555-0105 </span>
<span>1-202-555-0106</span>
<span>[email protected]</span>

</address>

</div>
</div>
</footer>
</body>
</html>

=======================================
=========

.men
{
background-image: url(images/men-banner.avif);
background-size: cover;
display:flex;
flex-direction: column;
justify-content: space-around;
align-items: center;

</style>
</head>
<body>
<div class="main">
<div class="women">
<span class="ban">Women</span>
<span class="btn">Shop Women</span>
</div>
<div class="men">
<span class="ban">Men</span>
<span class="btn">Mens Shoping</span>
</div>
<div class="kids">
<span class="ban"> Kids</span>
<span class="btn">Kids Shoping</span>
</div>
</div>
</body>
</html>

Css style

Css styling is defined in different ways

1. Using tag name
2. Using class name

Parent child : it refers to all child elements of parent

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 span{
font-size: 40px;
color:red;
}
.div2 span{
font-size: 40px;
color:blue;
}
</style>
</head>
<body>
<div class="div1">
<span>Item1</span>
<span>item2</span>
</div>
<div class="div2">
<span>Item3</span>
<span>item4</span>
</div>
</body>
</html>

mainelement+adj-name : main element followed by immediate

adj element
<div></div>
<span></span>

div+span { styling }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
nav+span {
font-size: 30px;
}
</style>
</head>
<body>
<nav>
<span>Span1</span>
<span>Span2</span>
</nav>
<span>Span3</span>
</body>
</html>
CSS Center Screen for content

{
height: according to requirement;
display:flex;
justify-content:center;
align-items: center;
}

Note: you must keep all elements in one container

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-size: 50px;
}
body
{
height:100vh;
display:flex;
justify-content: center;
align-items: center;
}
.text1
{
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<div class="text1">New Collection</div>
<div>Best Picks 2019</div>
</div>
</body>
</html>

CSS text shadow

CSS property text-shadow is used to define shadow for text

Syntax:
{
text-shadow: horizontal vertical blur color;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
font-size: 50px;
font-weight: bold;
text-align: center;
text-shadow: 10px 0px 5px red;
}
</style>
</head>
<body>
<div>Women</div>
</body>
</html>

Details and Summary

details and summary are semantic elements.

Details is a container that allows to expand or collapse content
dynamically.
Inside details content is defined using summary element.

Syntax:
<details>
<summary>Title</summary>
content
<details>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
summary{
margin-bottom: 10px;
font-size: 30px;
font-weight: bold;
color:red;
}
div
{
font-size: 30px;
}
</style>
</head>
<body>
<details>
<summary> What is NetFlix?</summary>
<div>Netflix is a streaming service that offers a wide variety of award-
winning TV shows, movies, anime, documentaries and more – on
thousands of internet-connected devices.</div>

<div>You can watch as much as you want, whenever you want, without
a single ad – all for one low monthly price. There's always something new
to discover, and new TV shows and movies are added every week!</div>

</details>
<details open>
<summary> What is NetFlix?</summary>
<div>Netflix is a streaming service that offers a wide variety of award-
winning TV shows, movies, anime, documentaries and more – on
thousands of internet-connected devices.</div>

<div>You can watch as much as you want, whenever you want,

without a single ad – all for one low monthly price. There's always
something new to discover, and new TV shows and movies are added
every week!</div>

</details>

</body>
</html>

fieldset and legend

fieldset is used to group set of related content

legend is used to title fieldset
fieldset and legend are semantic elements.
Syntax:
<fieldset>
<legend> </legend>
</fieldset>

Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font-size: 25px;
font-weight: bold;
color:red;
}
fieldset
{
margin-bottom: 50px;
background-image: url(images/banner.avif);
background-repeat: no-repeat;
background-size: cover;
}
legend
{
font-size: 25px;
font-weight: bold;
color:blue;
text-align:center;
border: 2px solid black;
background-color: aqua;
border-radius: 5px;
}
</style>
</head>
<body>
<fieldset>
<legend>Personal Information</legend>
<div>FirstName</div>
<div>LastName</div>
<div>DateofBirth</div>
</fieldset>
<fieldset>
<legend>Education Qualification</legend>
<div>Education</div>
<div>University</div>
<div>Year</div>
</fieldset>
</body>
</html>

HTML heading and paragraphs

Headings

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Courses Offered</h1>
<h2>Full Stack Java</h2>
<h3>CoreJava</h3>
<h3>AdvJava</h3>
<h3>Database</h3>
<h3>UI</h3>
<h3>Tools</h3>
<h2>Full Stack .Net </h2>
C#.Net
ASP.Net
Database
Tools
<h2>Full Stack Python</h2>
Python
Python for Datascience
UI
Database
Tools
<h2>Full Stack DS & AI</h2>
DS
AI

</body>
</html>
The headings must be defined in sequential order.
It is not recommended to skip heading.
Inside the webpage or document <h1> element must be defined
one time.
Heading can be modified using css.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading Demo</title>
<style>
body
{
margin-left: 40px;
}
h1 {
color:red;
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
}
.python
{
color:blue;
}
h2
{
color:green;
}
.UI
{
color:brown;
}
</style>
</head>
<body>
<header>
<h1>Full Stack Python</h1>
</header>
<article></article>
<section>
<div class="python">
<h2>Python</h2>
<h3>Core Python</h3>
<h3>Adv.Python</h3>
</div>
<div class="UI">
<h2>UI</h2>
<h3>HTML</h3>
<h3>CSS</h3>
</div>
</div>
</section>
<footer>

</footer>
</body>
</html>

Paragraph
Paragraph represents more than one line content.
Example: Description, information about heading,...

Paragraph automatically inserts newline at the end.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Demo</title>
<style>
.p1{
font-size: 25px;
}
.p2 {
font-size: 20px;
}
span
{
color:blue;
}

</style>
</head>
<body>
<h2>Course Overview</h2>
<p class="p1">Naresh IT offers comprehensive <span><b>Python
Online training</b></span>, available both online and in the classroom.
Python is widely recognized for its simplicity and versatility, making it a
highly sought-after high-level programming language. Our course is
designed to equip participants with a thorough understanding of Python
programming concepts, syntax, and applications. From fundamental
principles to advanced topics, learners will gain the skills needed to
develop software solutions, automate tasks, analyze data, and much more.
Join Naresh IT's Python training today for a rewarding learning
experience.</p>
<p class="p2">Learn <span>Python</span> Online training skills with
real experts, either in live classes with videos or without videos, whichever
suits you best.</p>

</body>
</html>

Paragraph is having the followings attributes/properties for styling

Paragraph css styles

{
text-alignment:left/right/center/justify;
Color: text color
Background-color: background color;
Margin: all the margins;
Padding: space within border;
Border: paragraph border;
}

Paragraph is block level element.

Note: any element/tag which insert in newline is called block

level element

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Demo</title>
<style>
.p1{
font-size: 25px;
color:red;
text-align: justify;
border: 2px solid black;
padding: 20px;
margin: 10px;
background-color: aqua;
background-image: url(images/banner.avif);
background-repeat: no-repeat;
background-size: cover;
}
.p2 {
font-size: 20px;
text-align: justify;
width:150px;
}
span
{
color:blue;
}
div
{
display:grid;
grid-template-columns: 6fr 6fr;
}

</style>
</head>
<body>
<h2>Course Overview</h2>
<p class="p1">Naresh IT offers comprehensive <span><b>Python
Online training</b></span>, available both online and in the classroom.
Python is widely recognized for its simplicity and versatility, making it a
highly sought-after high-level programming language. Our course is
designed to equip participants with a thorough understanding of Python
programming concepts, syntax, and applications. From fundamental
principles to advanced topics, learners will gain the skills needed to
develop software solutions, automate tasks, analyze data, and much more.
Join Naresh IT's Python training today for a rewarding learning
experience.</p>
<div>
<p class="p2">Learn <span>Python</span> Online training skills with
real experts, either in live classes with videos or without videos, whichever
suits you best.</p>
<p class="p2">Learn <span>Python</span> Online training skills with
real experts, either in live classes with videos or without videos, whichever
suits you best.</p>
</div>
</body>
</html>

For defining space between line, css provides line-height value is

given in pixels

.p1{
font-size: 25px;
color:red;
text-align: justify;
border: 2px solid black;
padding: 20px;
margin: 10px;
line-height: 100px;

background-repeat: no-repeat;
background-size: cover;
}
How to define line spaces, character spacing and word spacing
within paragraph?

The above styles are defined using css properties or attributes

1. Line-height : This attribute define the space between lines
2. Word-spacing : This attribute define the space between
words
3. letter-spacing : This attribute define the space between
characters or letters

Syntax:
p{
line-height:40px;
word-spacing:20px;
letter-spacing:20px;
}

}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum adipisci
nulla impedit nemo totam doloribus tempore autem velit sapiente inventore
repudiandae saepe quibusdam soluta consectetur, explicabo placeat
cupiditate ipsam? Aut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil minima
voluptate obcaecati at porro quaerat architecto dolor! Perspiciatis,
aspernatur. Iure voluptatum tempora assumenda hic et officia vero
laboriosam ipsam beatae!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate
quisquam mollitia praesentium ex nostrum deserunt similique vel
reprehenderit alias dolore dolor voluptatem, at tenetur ipsa deleniti
accusantium dignissimos aut perferendis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum non
voluptatem consequatur ea. Quia rerum illo rem minima, et dolore
reiciendis facere, labore vel itaque ea neque hic? Quisquam, magni.
</p>
</body>
</html>

Blockquote : The Block Quotation element

The <blockquote> HTML element indicates that the enclosed

text is an extended quotation. Usually, this is rendered visually by
indentation.

The blockquote element represents a section that is quoted from

another source. Content inside a blockquote must be quoted from
another source, whose address, if it has one, may be cited in the
cite attribute. If the cite attribute is present, it must be a valid
URL potentially surrounded by spaces.

Syntax:
<blockquote>
text
</blockquote>
Q: What is difference between blockquote and paragraph?
If material quoted from texts or speeches is longer than 4 lines of
text, the material should be set off in a block, ie, in reduced type
and without the quotation marks. Paragraph indents are generally
not used unless the quoted material is known to begin a
paragraph.

</style>
</head>
<body>
<h2 align="center">Times of India</h2>

<blockquote cite="http://www.nareshit.com">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Exercitationem minima omnis dolor maiores, delectus nisi officia!
Voluptatibus expedita culpa maiores sequi fugit cupiditate perferendis!
Praesentium blanditiis corrupti qui quod fuga.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam
ex optio rem odio modi accusantium reprehenderit similique sint aliquid?
Magni veniam ex nam et soluta excepturi in, consectetur suscipit
recusandae.
</blockquote>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, reiciendis
eveniet accusamus alias architecto magnam quod iste voluptatum
aspernatur, libero voluptas? Dicta, qui impedit? Voluptatibus error alias
laudantium veritatis perspiciatis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe ipsum
dolorem cumque excepturi perspiciatis quos quaerat dignissimos eum
repellat quibusdam, rem reprehenderit id, nesciunt tenetur beatae, officia
harum repudiandae tempore.
</p>
</body>
</html>

How to define indentation at the first line of paragraph?

This can be done using css style

Syntax:
p::first-line{
margin-left
}

Syntax:
p{

text-indent: 100px;
}

</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, reiciendis
eveniet accusamus alias architecto magnam quod iste voluptatum
aspernatur, libero voluptas? Dicta, qui impedit? Voluptatibus error alias
laudantium veritatis perspiciatis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe ipsum
dolorem cumque excepturi perspiciatis quos quaerat dignissimos eum
repellat quibusdam, rem reprehenderit id, nesciunt tenetur beatae, officia
harum repudiandae tempore.
</p>
</body>
</html>

Q: How to define dropcap of the paragraph?

Dropcap indicates dropcapital letter, the number of lines are
dropped using first letter of paragraph.

Drop caps are defined as the first capital letter of a paragraph in a

much larger font size that has the depth of two or more lines of
normal text. The task can be done by using the CSS ::first-letter
pseudo-element to create a beautiful drop caps effect.

Syntax:
p::first-letter
{
Font-size
Font-weight

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph</title>
<style>
p{
font-size: 30px;
text-align: justify;
}
p::first-letter{
font-size: 70px;
font-weight: bold;
float:left;
padding-right: 20px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, reiciendis
eveniet accusamus alias architecto magnam quod iste voluptatum
aspernatur, libero voluptas? Dicta, qui impedit? Voluptatibus error alias
laudantium veritatis perspiciatis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe ipsum
dolorem cumque excepturi perspiciatis quos quaerat dignissimos eum
repellat quibusdam, rem reprehenderit id, nesciunt tenetur beatae, officia
harum repudiandae tempore.
</p>
</body>
</html>

Character entities

Character entities represent special characters in HTML. The

character cannot be inserted directly within HTML page are
represented using character entities

These character entities are prefix with &

Resul Description Name Number

t
non-breaking space    
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € &#8364
;
© copyright © ©
® trademark ® ®
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph</title>
<style>

#include <stdio.h> <br>

void   main() <br>
{ <br>
printf("Hello C");<br>
} <br>

NareshIT ©
C Langauge ®

</body>
</html>
Q: How to create scrollable paragraph (scroll up and scroll down)?
Q: How to create scrollable paragraph (scroll up and scroll
down)?
Scrollable paragraph or content is create using CSS style attribute
called “overflow”

Syntax:
p{
width:
height:
border:
overflow: auto/scroll/hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollable Test</title>
<style>
p{
width:250px;
height:200px;
border: 2px solid black;
overflow: auto;
}
</style>
</head>
<body>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et error
earum officia sapiente omnis, repellendus sequi doloribus perspiciatis
commodi repudiandae officiis impedit nihil dolorem facilis velit rerum
excepturi perferendis provident?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et error
earum officia sapiente omnis, repellendus sequi doloribus perspiciatis
commodi repudiandae officiis impedit nihil dolorem facilis velit rerum
excepturi perferendis provident?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et error
earum officia sapiente omnis, repellendus sequi doloribus perspiciatis
commodi repudiandae officiis impedit nihil dolorem facilis velit rerum
excepturi perferendis provident?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et error
earum officia sapiente omnis, repellendus sequi doloribus perspiciatis
commodi repudiandae officiis impedit nihil dolorem facilis velit rerum
excepturi perferendis provident?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et error
earum officia sapiente omnis, repellendus sequi doloribus perspiciatis
commodi repudiandae officiis impedit nihil dolorem facilis velit rerum
excepturi perferendis provident?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et error
earum officia sapiente omnis, repellendus sequi doloribus perspiciatis
commodi repudiandae officiis impedit nihil dolorem facilis velit rerum
excepturi perferendis provident?
</p>
</body>
</html>

Definition list, term and definitions

Definition list, term and definitions are created using 3 tags or

elements
1. dl : definition list
2. dt : definition term
3. dd : definition
Syntax:
<dl>
<dt> Term-1 </dt>
<dd> definition </dd>
<dd> definition </dd>
<dt> Term-2 </dt>
<dd> definition </dd>
<dd> definition </dd>

</dl>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Definition List</title>
<style>
dl{
width:50%;
}
dt{
background-color: black;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
margin-bottom: 10px;
}
dd {
font-size: 20px;
}
</style>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HTML is markup language used for developing pages</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets for styling web pages </dd>
<dt>Javascript</dt>
<dd>It is Scripting Language</dd>
</dl>
</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Definition List</title>
<style>
dl {
display:grid;
grid-template-columns: 6fr 6fr;
}
dt {
background-color: black;
color:white;
font-size: 20px;
margin-bottom: 10px;
}
dd
{
background-color: thistle;
color:black;
font-size: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<fieldset>
<legend>Personal Information</legend>
<dl>
<dt>FirstName</dt>
<dd>None</dd>
<dt>LastName</dt>
<dd>None</dd>
<dt>Address</dt>
<dd>None</dd>
</dl>
</fieldset>
<fieldset>
<legend>Education Qualification</legend>
<dl>
<dt>UName</dt>
<dd>None</dd>
<dt>UName</dt>
<dd>None</dd>
<dt>UName</dt>
<dd>None</dd>
</dl>

</fieldset>
</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Definition List</title>
<style>
dt
{
background-color: black;
color:white;
width:25%;
font-size: 25px;
font-weight: bold;
position: sticky;
top: 0px;
}
</style>
</head>
<body>
<header>
<h3>Shopper.</h3>
</header>
<section>
<nav>
<dl>
<dt>Electronics</dt>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dd>Mobiles</dd>
<dd>TV</dd>
<dd>Watches</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>
<dt>Mens</dt>
<dd>Cloths</dd>
<dd>Shoes</dd>

</dl>
</nav>
</section>
</body>
</html>

Ordered list and unordered list

Ordered list
Ordered list contains list of elements or items which automatically
ordered using numbers.
Ordered list definition is given using <ol> element/tag
Ordered list items are defined using <li> element/tag

Syntax:
<ol>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
</ol>

<ol> is having a property or attribute called “type”, which

defining order stype

Syntax:
<ol type=”1,I,i,a,A”>
….
</ol>

<ol> is having a property or attribute called “start”, which order

starting value

<ol type start=”num”>

</ol>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Definition List</title>
<style>

</style>
</head>
<body>
<h2>UI Modules</h2>
<ol type="A" start="3">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
</ol>
</body>
</html>

Nested ordered list

Defining ordered list within ordered list is called nested ordered
list.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
</style>
</head>
<body>
<h2>UI Modules</h2>
<ol>
<li>HTML</li>
<ol type="A">
<li>Introduction to HTML</li>
<ol type="i">
<li> type of softwares</li>
<li> types of web application</li>
</ol>
<li>History of HTML</li>

</ol>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>

</ol>
</body>
</html>
Q: How to remove numbering of ordered list?
In order remove numbering of order list, we use css style called
“liststyle”. The value of liststyle is None.

Q: What is need of creating list without numbers?

In web development ordered list is also used for creating
navigation or navbar.

Syntax:
Ol
{
list-style:None;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
ol
{
list-style: None;
}
li {
margin-bottom: 20px;
}
</style>
</head>
<body>
<nav>
<ol>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contacts</li>
</ol>
</nav>
</body>
</html>

Q: How to create multi column ordered list?

Multi column ordered list is create by defining display property of
order list as grid.

Syntax:
Ol
{
Display:grid;
Grid-template-columns : 6fr 6fr;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
ol {
display:grid;
grid-template-columns: 6fr 6fr;
}
</style>
</head>
<body>
<h3>What is HTML?</h3>
<ol type="A">
<li>HTML is a Language</li>
<li>HTML is a script</li>
<li>HTML is Database</li>
<li>HTML Markup Language</li>
</ol>
<h3>What is CSS</h3>
<ol type="A">
<li>CSS......</li>
<li>CSS ....</li>
<li>CSS ....</li>
<li>CSS ....</li>
</ol>
</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
ol {
display:grid;
grid-template-columns: 6fr 6fr;
}
</style>
</head>
<body>
<h3>What is HTML?</h3>
<ol type="A">
<div>
<li>HTML is a Language</li>
<li>HTML is a script</li>
</div>
<div>
<li>HTML is Database</li>
<li>HTML Markup Language</li>
</div>
</ol>
<h3>What is CSS</h3>
<ol type="A">
<li>CSS......</li>
<li>CSS ....</li>
<li>CSS ....</li>
<li>CSS ....</li>
</ol>
</body>
</html>
Unordered list

Unordered list items are display without numbering or order.

Q: What is difference between ordered list and unordered list?

An unordered list ( <ul> ) is used to create a list of items in no
particular order i.e. the order of items is not relevant. By default,
the items in this list will be marked with bullets. Whereas, an
ordered list ( <ol> ) is used to create a list of items in a specific
order.

Unordered list definition is given using <ul> tag.

Unordered list items are defined using <li> tag.

Syntax:
<ul>
<li>item-1</li>
<li>item-2 </li>
<li>item-3</li>
</ul>
Unordered list style can be changed using css or type attribute of
ul element.
Syntax-1 without using CSS:
<ul type=”circle/disc/square”>
<li></li>
<li></li>
</ul>

Syntax-2 with using CSS

Ul
{
List-style: circle/disc/square/none;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
li
{
font-size: 30px;
list-style: square;
}
</style>
</head>
<body>
<h3>Introduction to HTML</h3>
<ul >
<li>What is HTML?</li>
<li>History of HTML</li>
<li>HTML Applications</li>
</ul>
</body>
</html>

Nested unordered list

Defining unordered list inside unordered list is called nested
unordered list.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
li
{
font-size: 30px;
}
</style>
</head>
<body>
<h3>Introduction to HTML</h3>
<ul >
<li>What is HTML?</li>
<ul>
<li>HTML is markup language</li>
<ul>
<li> Used for webpage creation</li>
<ul>
<li> wepage is collection of tags</li>
</ul>
</ul>
</ul>
<li>History of HTML</li>
<li>HTML Applications</li>
</ul>
</body>
</html>

Nested list can be anything,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List</title>
<style>
li
{
font-size: 30px;
}
</style>
</head>
<body>
<h3>Introduction to HTML</h3>
<ol >
<li>What is HTML?</li>
<ul>
<li>HTML is markup language</li>
<ol>
<li> Used for webpage creation</li>
<ul>
<li> wepage is collection of tags</li>
</ul>
</ol>
</ul>
<li>History of HTML</li>
<li>HTML Applications</li>
</ul>
</body>
</html>

This element represent preformatted block of text. It is a block

level element

Syntax:
<pre>
content
</pre>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pre element test</title>

</head>
<body>
<pre>
Given an array of integers nums and an integer target, return indices
of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and
you may not use the same element twice.
You can return the answer in any order.

<b>Example 1:</b>

Input: nums = [2,7,11,15], target = 9

Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].
Example 2:

Input: nums = [3,2,4], target = 6

Output: [1,2]
Example 3:

Input: nums = [3,3], target = 6

Output: [0,1]
</pre>
</body>
</html>
How to customize unordered list style?

By default unordered list style can be,

1. Circle
2. Disc
3. Square
4. None
This can be changed using different ways
1. Bootstrap icons
2. CSS Properties

Bootstrap icons
We can assign bootstrap icons to each item of list

Syntax:
<ul>
<li class=”bi bi-icons”> item1 </li>
<li class=”bi bi-icons”>item2 </li>
…
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
<title>Custom Unordered List</title>
<style>
ul {
list-style: none;
}
li
{
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li class="bi bi-lightbulb">Bank OfferGet ₹50 Instant Discount on first
Flipkart UPI transaction on order of ₹200 and aboveT&C</li>
<li class="bi bi-lightbulb">Bank Offer5% Cashback on Flipkart Axis
Bank CardT&C</li>
<li class="bi bi-lightbulb">Bank OfferFlat ₹1000 off on HDFC Bank
Credit Card EMI Txns, Tenure: 6 and 9 months, Min Txn Value:
₹15,000T&C</li>
<li class="bi bi-lightbulb">Special PriceGet extra 29% off (price
inclusive of cashback/coupon)T&C</li>

</ul>
</body>
</html>

CSS style
Custom icon is assigned to list items using CSS.

Syntax:
ul
{
list-style:url(location of icon)
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
<title>Custom Unordered List</title>
<style>
ul {
list-style: url(images/bullet1.jpg)
}
li
{
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>Bank OfferGet ₹50 Instant Discount on first Flipkart UPI
transaction on order of ₹200 and aboveT&C</li>
<li>Bank Offer5% Cashback on Flipkart Axis Bank CardT&C</li>
<li>Bank OfferFlat ₹1000 off on HDFC Bank Credit Card EMI Txns,
Tenure: 6 and 9 months, Min Txn Value: ₹15,000T&C</li>
<li>Special PriceGet extra 29% off (price inclusive of
cashback/coupon)T&C</li>

</ul>
</body>
</html>

In web application development ul is also used for developing

navigation or navigation bar.

</ul>
</body>
</html>
Display:flex
Display:inline
Display:grid
Display:inline-block
Display:block

display:flex

display:flex property is assigned to containers

display:inline
display:inline property is assigned to individual items/elements.

Formatting text

<font> tag is available in HTML 4.0

This tag is used to apply style to text without using CSS
The <font> tag is having the following attributes
1. face : font family
2. size : HTML provided predefined size, which is given from 1-
7
default size is 3
3. color : assigning color

size is defined,
1  extra small
2  small
3  normal
4  medium
5  large
6 x-large
7  xx-large

The following tags are used formatting text

1. <b> ------- <strong>
2. <i> ----- <em>
3. <u> -----
4. <strike> ---- <del>
5. <sup>
6. <sub>

What is difference <b> and <strong>?

The main difference between <b> and <strong> is
<b> it is used at the time of designing page
<strong> it is used at the time reviewing the page
The following tags are used formatting text
1. <b> ------- <strong>
2. <i> ----- <em>
3. <u> ----- <ins>
4. <strike> ---- <del>
5. <sup>
6. <sub>

What is difference <b> and <strong>?

The main difference between <b> and <strong> is
<b> it is used at the time of designing page
<strong> it is used at the time reviewing the page

What is difference <i> and <em>?

<i> it is used at the time of designing page
<em> it is used at the time reviewing page

What is difference <strike> and <del>?

<strike> it is used at the time of designing page
<del> it is used at the time reviewing page

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
</style>
</head>
<body>
<b>Bold</b> is similer to <strong>Strong</strong><br>
<i>Italic</i> is similer to <em>Emphsis</em> <br>
<u>Underline</u> is similer to <ins>Insert</ins><br>
<strike>Strike</strike> is similer to <del>Delete</del><br>
Log<sub>(10)</sub><br>
(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab
</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<title></title>
<style>
main{
display: grid;
grid-template-columns: 3fr 9fr;
}
.rating
{
color:white;
background-color: green;
border: 1px solid green;
padding: 5px;
border-radius: 5px;
}
ul{
list-style: none;
color:green;
font-size: 20px;
}
li{
margin-bottom: 10px;
}
li span {
color:black;
margin-left: 15px;
}

</style>
</head>
<body>
<main>
<div>

</div>
<div>
<div>
<font face="Arial" size="5">Motorola G85 5G (Cobalt Blue, 256 GB)
(12 GB RAM)</font>
</div>
<br>
<div>
<span class="rating">4.0 <span class="bi bi-star-
fill"></span></span><font size="5"
color="gray">    6,688 Ratings & 355
Reviews</font>
</div>
<br>
<div>
<font size="4" color="green">Extra ₹ 3000 off</font>
</div>
<br>
<div>
<font size="6"><b>₹19,999</b></font>  <font
size="4" color="gray">₹<strike>22,999</strike></font> <font
size="5" color="green">13% off</font>  <span class="bi bi-
info-circle"></span>
</div>
<br>
<div>
<font size="4"><b>Available offers</b></font>
</div>
<div>
<ul>
<li class="bi bi-tag-fill"><span>Special PriceGet extra ₹3000 off
(price inclusive of cashback/coupon)</span></li>
<li class="bi bi-tag-fill"><span>FreebieFlat ₹1000 off on Cleartrip
hotels booking along with 300 supercoins on booking</span></li>
<li class="bi bi-tag-fill"><span>Partner OfferMake a purchase
and enjoy a surprise cashback/ coupon that you can redeem
later</span></li>
</ul>
</div>
</div>
</main>
</body>
</html>

Working with images

Browser cannot display all types of images.

The following types of images are displayed by browser

Image Type MIME Extension

PNG,APNG Image/apng .png .apng
Animated Portable
Network Graphics
Joint Photographic Image/jpeg .jpg,.jpeg,.jfif
JPEG
Expert Group image
Graphics Interchange Image/gif .gif
GIF
Format
BMP Bitmap file Image/bmp .bmp
ICO Microsoft Icon Image/x-icon .ico .cur
Tagged Image File Image/tiff .tif.fiff
TIFF
Format
SV Scalable Vector Image/svg+xml .svg
G Graphics

MIME  Stands for Multipurpose Internet Mail Extension (Content

Type), always browser renders content based on content type.

PNG & APNG

 High Definition Images
 These images occupy more space
 More pixel depth
 APNG can be animated
 PNG is not animated
 Downloadable images

JPEG
 High definition images
 Less pixel depth compared to PNG
 Compressed image
 Less Memory
 It can be used for displaying with webpage

GIF
 Support 256 colors
 Less pixel depth
 Less Memory
 It is good for displaying within webpage
 GIF can be animated

TIFF
TIFF is a raster graphics file format which was created to store
scanned photos, although it can be any kind of image.
Working with images

Browser cannot display all types of images.

The following types of images are displayed by browser

Image Type MIME Extension

PNG,APNG Image/apng .png .apng
Animated Portable Network
Graphics
Joint Photographic Image/jpeg .jpg,.jpeg,.jfif
JPEG
Expert Group image
Graphics Interchange Image/gif .gif
GIF
Format
BMP Bitmap file Image/bmp .bmp
ICO Microsoft Icon Image/x-icon .ico .cur
Tagged Image File Image/tiff .tif.fiff
TIFF
Format
SV Scalable Vector Image/svg+xml .svg
G Graphics

MIME  Stands for Multipurpose Internet Mail Extension (Content

Type), always browser renders content based on content type.

PNG & APNG

 High Definition Images
 These images occupy more space
 More pixel depth
 APNG can be animated
 PNG is not animated
 Downloadable images

JPEG
 High definition images
 Less pixel depth compared to PNG
 Compressed image
 Less Memory
 It can be used for displaying with webpage
GIF
 Support 256 colors
 Less pixel depth
 Less Memory
 It is good for displaying within webpage
 GIF can be animated

TIFF
TIFF is a raster graphics file format which was created to store
scanned photos, although it can be any kind of image.

BMP
 Bit map image
 This used for uploading images within database or image
data within database
ICO
 Icon images are represented with extension .ico
Example : Cursors, fevicon

SVG
 Scalable Vector Graphics
 Dynamic images, which created using programming
 SVG is created using XML (Extensible Markup Language)

<img> tag/element

This element is used to insert image within web page.

This element or tag having basic attributes to define the
properties of image.

Basic Attributes
1. src : it refer to source or image name or image file name,
always source is given using virtual path.
2. Alt : alternative. This attribute is used to display text if image
is not displayed.
a. Browser/Client disable images
b. Browser does not support image format
3. Width & Height : define width and height of the image
4. title : title of the image is nothing but tool tip. This is
displayed when cursor moved on the image
5. border : image border can be defined using this attribute
6. align : alignment of image (left/center/right)
7. vspace & hspace: Vertical spaces and Horizontal spaces

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Test</title>
</head>
<body>
<img src="images/kids-banner.avif" alt="Kids Banner" width="300"
height="300" align="left" title="Kids">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium
eaque hic aliquid dolore ipsam? Quisquam, eligendi iusto minus omnis
dolores dicta laborum est accusantium nostrum? Architecto sequi beatae
neque soluta.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
quibusdam, aliquid exercitationem vero voluptatum fuga vel neque placeat
commodi ex ipsam omnis blanditiis deleniti harum ipsum nobis cum,
delectus similique!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium,
reprehenderit. Odio molestias, magni delectus voluptatibus non nesciunt
vero qui dolorum adipisci illum, dolorem a consectetur, consequuntur
quisquam? Corporis, nobis eaque!

</p>
</body>
</html>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
<title></title>
<style>
main{
display: grid;
grid-template-columns: 3fr 9fr;
}
.rating
{
color:white;
background-color: green;
border: 1px solid green;
padding: 5px;
border-radius: 5px;
}
ul{
list-style: none;
color:green;
font-size: 20px;
}
li{
margin-bottom: 10px;
}
li span {
color:black;
margin-left: 15px;
}

</style>
</head>
<body>
<main>
<div>
<img src="images/moto.jpg" height="400" width="400px">

}
.card-header
{
height:300px;
}
.img-cls
{
height:100%;
}
.title-1
{
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin-top: 5px;
}
.title-2{
color:gray
}
.title-3{
color:gray;
}
.bi-square-fill
{
font-size: 5px;
}
.book-btn{
border: 1px solid blue;
background-color: blue;
color:white;
padding:10px;
border-radius: 5px;
text-align: center;
font-family: Arial;
width:100px;
display:inline-block;
margin-right: 20px;

}
.card-footer
{
margin-top: 5px;
}

</style>
</head>
<body>
<main>
<div class="card">
<div class="card-header">
<img src="images/a1.jpg" class="img-cls">
</div>
<div class="card-body">
<div class="title-1">STREE 2 SARKATE KA AATANK</div>
<div class="title-2">U/A <span class="bi-square-fill"></span>
Horror</div>
<div class="title-3">Hindi</div>
</div>
<div class="card-footer">
<div>
<span class="book-btn">BookTickets</span>
<span class="bi bi-info-circle"></span>
</div>

</div>

</div>
<div class="card">
<div class="card-header">
<img src="images/a2.webp" class="img-cls">
</div>
<div class="card-body">
<div class="title-1">STREE 2 SARKATE KA AATANK</div>
<div class="title-2">U/A <span class="bi-square-fill"></span>
Horror</div>
<div class="title-3">Hindi</div>
</div>
<div class="card-footer">
<div>
<span class="book-btn">BookTickets</span>
<span class="bi bi-info-circle"></span>
</div>

</div>

</div>
<div class="card">
<div class="card-header">
<img src="images/a3.jpg" class="img-cls">
</div>
<div class="card-body">
<div class="title-1">STREE 2 SARKATE KA AATANK</div>
<div class="title-2">U/A <span class="bi-square-fill"></span>
Horror</div>
<div class="title-3">Hindi</div>
</div>
<div class="card-footer">
<div>
<span class="book-btn">BookTickets</span>
<span class="bi bi-info-circle"></span>
</div>

</div>

</div>
<div class="card">
<div class="card-header">
<img src="images/a4.avif" class="img-cls">
</div>
<div class="card-body">
<div class="title-1">STREE 2 SARKATE KA AATANK</div>
<div class="title-2">U/A <span class="bi-square-fill"></span>
Horror</div>
<div class="title-3">Hindi</div>
</div>
<div class="card-footer">
<div>
<span class="book-btn">BookTickets</span>
<span class="bi bi-info-circle"></span>
</div>

</div>

</div>
<div class="card">
<div class="card-header">
<img src="images/a5.avif" class="img-cls">
</div>
<div class="card-body">
<div class="title-1">STREE 2 SARKATE KA AATANK</div>
<div class="title-2">U/A <span class="bi-square-fill"></span>
Horror</div>
<div class="title-3">Hindi</div>
</div>
<div class="card-footer">
<div>
<span class="book-btn">BookTickets</span>
<span class="bi bi-info-circle"></span>
</div>

</div>

</main>
</body>
</html>
Hyperlinks

Hyperlink is clickable text or graphics or picture used to navigate

from one location to another location.

These hyperlinks are 2 types

1. Intra document hyperlink

2. Inter document hyperlink

This hyper link is created using <a> tag or element “a” anchor
tag.

Intra document hyper link

Intra document hyper link is used to navigate within same page
from one location to another location.

Syntax:
<a href=”location/path”>text</a>

Q: What is difference between href and src attributes?

href is used as setter for request
src is used as getter for reading resource of given path

Basic steps for creating intra document hyper links

1. define id for a location
2. This id is used inside anchor using #id

Example:
<h2 id="amazon">Amazon</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur
soluta molestiae fuga dolorem asperiores accusamus esse, error minus
officia quam sequi non libero aliquam odio laborum porro. Quisquam, nam
repellat?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum
magnam molestiae, at dolorem voluptates nobis hic fugit dolor obcaecati
necessitatibus doloremque expedita sit voluptatem excepturi optio animi
quibusdam facilis modi!
</p>
<footer>
<a href="#amazon" >Back to Top</a>
</footer>

Q: How to remove underline of hyperlink?

The underline can be removed using CSS

Syntax
a{
text-decoration:none;
}

Q: How set active and visited link colors?

This can be done in two ways
1. Using HTML
2. Using CSS

Using HTML
<body alink=”color” vlink=”color”>

Using CSS
Syntax: a:visited  Color
Syntax: a:active  Color

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intra Document Link</title>
<style>
a{
text-decoration: none;
color:green;
}
a:visited {
color:aqua;
}
a:active {
color:yellow;
}
</style>
</head>
<body>
<h2 id="amazon">Amazon</h2>
<p id="p1">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consectetur
soluta molestiae fuga dolorem asperiores accusamus esse, error minus
officia quam sequi non libero aliquam odio laborum porro. Quisquam, nam
repellat?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum
magnam molestiae, at dolorem voluptates nobis hic fugit dolor obcaecati
necessitatibus doloremque expedita sit voluptatem excepturi optio animi
quibusdam facilis modi!
</p>
<footer>
<a href="#amazon" >Back to Top</a>
<a href="#p1" >Back to Top</a>
</footer>
</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intra Document Link</title>
<style>
ul {
list-style: none;

}
li {
margin-top: 50px;
border: 1px solid black;
font-size: 30px;
font-weight: bold;
background-color: black;
color: white;
padding:10px;
}
section
{
display: grid;
grid-template-columns: 2fr 8fr;
column-gap: 50px;
}
p
{
font-size: 24px;
}
img
{
width:300px;
height: 300px;
}
a{
text-decoration: none;
color:white;
}
a:active{
color: white;
}
a:visited{
color:white;
}
.brand-title
{
background-color: black;
color:white;
padding: 20px;
}
div p a{
color:blue;
}
div p a:active
{
color:brown;
}
div p a:visited {
color:aqua;
}
</style>
</head>
<body>
<header>
<div class="brand-title">
<h1>Shopper.</h1>
</div>
</header>
<section>
<nav>
<ul>
<li> <a href="#home">Home</a></li>
<li><a href="#mens">Mens</a></li>
<li><a href="#women">Women's</a></li>
<li><a href="#kids">Kid's</a></li>
</ul>
</nav>
<div>
<h2 id="home">Home</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
veniam mollitia velit vero libero amet corporis aut accusamus dicta
doloribus sapiente quos totam iste, dolorum eius placeat animi pariatur
accusantium!
Lorem ipsum dolor sit amet, consectetur <a href="#kids">Kids
Offer</a>adipisicing elit. Ipsam laboriosam modi architecto. Quidem iure
voluptates vero tempora maiores, aut consequuntur voluptatum rem sunt,
deleniti reiciendis esse ipsum corrupti expedita dolorum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla eos
quis nesciunt quibusdam, ratione, quam enim eveniet magnam maxime
unde laboriosam laudantium nobis tempora adipisci fugiat id exercitationem
commodi eum!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit fugiat
ex nemo totam quis vitae, molestiae autem incidunt eos nesciunt at repellat
quaerat voluptatum mollitia dicta tenetur iste laudantium illo.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique
fuga quibusdam cumque quos blanditiis itaque omnis dolor ea, perspiciatis
officiis neque, assumenda molestiae harum, quae distinctio eligendi
reprehenderit iure velit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
beatae facilis consequatur doloribus sint iste assumenda labore debitis
voluptas cupiditate accusamus illum enim, accusantium at sed aperiam
dolore officiis deserunt.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione
eius asperiores eaque expedita repellendus architecto neque voluptatem
praesentium animi et cumque cum recusandae, corporis dolorem in iste
omnis molestiae doloremque?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique
fuga quibusdam cumque quos blanditiis itaque omnis dolor ea, perspiciatis
officiis neque, assumenda molestiae harum, quae distinctio eligendi
reprehenderit iure velit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
beatae facilis consequatur doloribus sint iste assumenda labore debitis
voluptas cupiditate accusamus illum enim, accusantium at sed aperiam
dolore officiis deserunt.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione
eius asperiores eaque expedita repellendus architecto neque voluptatem
praesentium animi et cumque cum recusandae, corporis dolorem in iste
omnis molestiae doloremque?
</p>
<h2 id="mens">Mens</h2>
<img src="images/men-banner.avif">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere
iusto, unde nostrum minima dicta adipisci, facilis impedit, assumenda
exercitationem quas illo ullam voluptates delectus et quaerat veniam sequi
nihil deserunt.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero
dolorem eum ut obcaecati, id soluta quod dolorum voluptates aut deserunt,
ipsam, rem numquam sequi repudiandae quidem assumenda reiciendis
sunt nisi!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit alias
magnam ad eveniet. Reprehenderit tempora iusto similique quis. Deserunt
illum tempora nam reprehenderit quia fuga iste amet praesentium, quidem
aliquam.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum
temporibus dolorem natus dolore tempore, nesciunt fugiat illum
reprehenderit voluptates non? Quasi consequuntur voluptates doloribus ad
reiciendis omnis exercitationem quidem dicta.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex non
voluptatibus error iste voluptate enim similique fugiat quod sint reiciendis
assumenda eum, voluptatum nemo itaque, rerum, architecto quas. Fuga,
rem!
</p>
<h2 id="women">Women's</h2>
<img src="images/women-banner.avif">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa iste
enim repellat consequuntur, dolorum cupiditate natus minus itaque harum,
inventore officiis amet voluptate corrupti, a quia tempore? Corporis,
veritatis inventore.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti
molestiae quidem explicabo alias, dolore debitis omnis sunt iure? Inventore
labore earum ea repellat vitae ex consequuntur ab odit quisquam
repellendus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
dolorum est dolore sequi dicta quam eius odio. Ad, exercitationem. Quos
sed doloribus quidem qui perferendis necessitatibus natus neque, placeat
dolores!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam
accusamus, earum doloribus rem impedit, mollitia fugiat ipsam eligendi
repellat aliquam et velit corporis doloremque ut saepe aliquid distinctio est
quas!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi
consequuntur ut sint unde? Iure magnam eveniet error, culpa odit laborum
officiis perspiciatis, placeat doloribus doloremque tempora cupiditate
inventore accusamus fuga.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi
totam expedita adipisci ea rerum cum fuga corporis iure, consequuntur
voluptatem possimus, magnam quasi consectetur quo exercitationem
excepturi tempora provident ut?
</p>
<h2 id="kids">Kids</h2>
<img src="images/kids-banner.avif">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ipsa
eligendi nesciunt. Mollitia itaque nostrum atque, saepe sunt beatae
praesentium quibusdam sit magni aliquid explicabo quidem illum
voluptatibus laudantium recusandae?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur
recusandae sunt ad voluptatibus. Nihil, omnis. Fuga a illum odio, atque
odit, laboriosam cumque quas corporis quisquam molestias magnam
facere voluptas!Lore
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus
nam neque facere adipisci architecto voluptatibus omnis. Odio velit esse
qui nisi! Itaque quia fugit eaque vel minus sapiente error quae!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Repellendus quis vitae aperiam eos similique eligendi, ratione, officia non
dolorem omnis, repudiandae inventore. Reiciendis distinctio quidem rerum
placeat dolorem, provident explicabo.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident
neque iure odit. Tempore error necessitatibus, ipsum explicabo, enim, illo
dolor aspernatur nostrum repellat itaque eius nulla? Dolor sed deserunt
maxime?
</p>
</div>
</section>
</body>
</html>

}
a{
margin-right: 20px;
text-decoration: none;
}
div:target
{
border: 1px solid black;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
width:300px;
background-color: black;
color:white;
}
</style>
</head>
<body>
<nav>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScript</a>
</nav>
<main>
<div id="html" >
<h2>HTML</h2>
<ul>
<li>Lesson1</li>
<li>Lesson2</li>
<li>Lesson3</li>
<li>Lesson4</li>
<li>Lession5</li>
</ul>
</div>
<div id="css" >
<h2>CSS</h2>
<ul>
<li>Lesson1</li>
<li>Lesson2</li>
<li>Lesson3</li>
<li>Lesson4</li>
<li>Lession5</li>
</ul>
</div>
<div id="js" >
<h2>JavaScript</h2>
<ul>
<li>Lesson1</li>
<li>Lesson2</li>
<li>Lesson3</li>
<li>Lesson4</li>
<li>Lession5</li>
</ul>
</div>
</main>
</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
nav {
margin-bottom: 50px;
margin-top: 50px;
margin-left: 200px;
font-size: 25px;
}
a
{
margin-right: 50px;
}
img
{
width:300px;
height: 300px;

}
img:target {
border: 4px solid black;
border-radius: 5px;
width:200px ;
height:200px;
}
</style>
</head>
<body>
<nav>
<a href="#mens"> Mens</a>
<a href="#womens"> Womens</a>
<a href="#kids"> Kids</a>
</nav>
<main>
<img src="images/men-banner.avif" id="mens">
<img src="images/women-banner.avif" id="womens">
<img src="images/kids-banner.avif" id="kids">
</main>
</body>
</html>
Interlink Document
Interlink document allows to link a document or file exists outside
current document.

This link can be,

1. File
2. URL
3. Application
4. Javascript function

File
Interlink document allows to link to file. These files can images,
documents, pdf or any type of file supported by browser.
To open these files, browser required some plugins.

Syntax:
<a href=”file location”>

If plugin is not available or if browser is unable to open, it allows

download option.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="images/a1.jpg">Image</a> <br>
<a href="images/kids-banner.avif">kids</a><br>
<a href="docs/python.pdf">Python</a><br>
<a href="docs/26-8-2024.docx">WordDoc</a>
</body>
</html>
<a> is having an attribute called download, this allows every file
to download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="images/a1.jpg" download>Image</a> <br>
<a href="images/kids-banner.avif">kids</a><br>
<a href="docs/python.pdf" download>Python</a><br>
<a href="docs/26-8-2024.docx">WordDoc</a>
</body>
</html>
Inter document link allows to link one webpage with another
webpage.

Syntax:
<a href=”.html”>text</a>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
border: 1px solid black;
background-color: black;
color:white;
margin-right: 50px;
}
</style>
</head>
<body>
<header>
<a href="about.html">About</a>
<a href="courses.html">Courses</a>
<a href="contact.html">Contact</a>
</header>
<section>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
libero nisi ipsam enim vel explicabo, recusandae accusamus. Tempora
libero suscipit eaque blanditiis ut possimus neque, eius repellendus, sint
praesentium minus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
debitis nam in hic nesciunt laudantium laboriosam minus architecto
recusandae repellendus incidunt neque tempora error, aspernatur, facilis
sequi asperiores sunt libero.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Consequatur, recusandae ut iure sit, quam illo nam velit facere eaque,
iusto a natus! Ea sapiente illo enim corporis nemo ipsum neque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quasi
laboriosam officia hic quod, dolores eos quia dicta molestiae praesentium
autem libero consequatur animi excepturi obcaecati voluptatibus ex ipsam
debitis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis
dolor rem modi odit eveniet reprehenderit temporibus laudantium eum
fugiat dolorem quod deleniti quibusdam, vitae facilis delectus error. Quia,
corporis itaque.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum
dignissimos debitis, praesentium officiis corporis pariatur et delectus,
asperiores facilis aliquam suscipit quisquam dolorem ipsa quam
consectetur mollitia iure. Dolorum, iure?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum
facere, nemo modi animi ratione nihil, vel quasi perspiciatis id consectetur
nobis dolore iusto, dolores eaque. Vel at autem sequi reprehenderit.
</p>
</section>
</body>
</html>

Note: create 3 files  about.html,courses.html,contact.html

URL
Uniform resource location, it is path which refers to the resource.
This resource is not part of current project.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Demo</title>
</head>
<body>
<h2> Interview Preparation Sites</h2>
<main>
<a href="https://www.hackerrank.com/">HackerRank</a>
<a href="https://leetcode.com/">Leetcode</a>
<a href="https://www.hackerearth.com/">HackerEarth</a>
<a href="https://www.geeksforgeeks.org/">GeeksForGeeks</a>
</main>
</body>
</html>

Application
This hyperlink can be,
1. Email link
2. Telephone link
3. Skype Link

Email Link
Mail link required mailing application installed in your system.
Example: Microsoft Outlook

Syntax:
<a href=”mailto:email-address>text</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Demo</title>
</head>
<body>
Mail Us: <a
href="mailto:[email protected]">[email protected]</a>

</body>
</html>

Telephone link
This link required application where it can open telephone number
make call (Dial pad)

Syntax:
<a href=”tel:+number”>text</a>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Demo</title>
</head>
<body>
Contact <a href="tel:+915566799887">+915566799887</a>

</body>
</html>

Q: How to open link in new tab?

In order to open link in new tab, anchor provides an attribute
called target. The value of this attribute is set to _blank. This
opens link in new tab.

Syntax:
<a href=”path” target=”_blank”>text</a>

</body>
</html>

Q: How to open link in new window?

In order to open link in new window, java script provide a function
called open.
Open is a function/method of window.

Syntax:
<a href=”javascript:function”>Text</a>

Example:

</body>
</html>

Q: How open link within same page?

In order to open content/link within same page we use iframe.
Iframe is container where we can display source of anchor.

Syntax:
<iframe name=”name of frame”>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Demo</title>
<style>
a{
font-size: 20px;
font-family: Arial;
}
section
{
display:grid;
grid-template-columns: 2fr 10fr;
}
iframe
{
width:100%;
height: 100vh;
border: none;
}
</style>
</head>
<body>
<section>
<div>
<a href="images/moto.jpg" target="frame1">Moto</a><br>
<a href="docs/python.pdf" target="frame1">PDF</a><br>
<a href="about.html" target="frame1">About</a>
</div>
<div>
<iframe name="frame1"></iframe>
</div>
</section>
</body>
</html>
IN HTML 4.0 frameset

Frameset element represents frames

Syntax:
<frameset>
<frame src=”path”></frame>
<frame src=”path”></frame>
</frameset>

Note: frameset element is deprecated (not available) and it is not

supported all the browsers.

Attributes of frameset
Rows : defines number of rows
Cols : defines number of cols

Attributes of frame
src: path/context which has to be displayed within frame

Example:
<!DOCTYPE html>
<html>
<head>
<title>frameset</title>
</head>

</html>

HTML Tables
Tables represent data.
Table is grid, which consist of number of rows and columns.
This table is represented using <table> tag/element.

Table required some more child elements to represent rows and

columns.

1. <thead> : grouping hreader

2. <tbody> : content of table
3. <tfooter> : grouping footer
4. <caption> : caption for making table as SEO friendly
5. <tr> : table row
6. <td> : table data
7. <th> : table heading
8. <colgroup> : this is used for grouping columns

Attributes

1. frame,rules,groups

frame : the frame represents table border.

Syntax:
<table rules=”rows|cols|all |groups|none”>

groups : this allows to group cols. This grouping can be applied

by using span tag/element.

Note: to apply column group, the rules must be groups.

Syntax:
<table>
<colgroup span=”n columns”>
</table>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPL</title>
</head>
<body>
<table width="100%" frame="box" rules="groups">
<caption>Test Ranking</caption>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th>Pos</th>
<th>Team</th>
<th>Players</th>
<th>Rating</th>
<th>Career Best Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td><img src="images/ind.JPG" >IND</td>
<td>Rohit Sharma</td>
<td>1000</td>
<td>923 v India at Edgbaston 2022</td>
</tr>

<tr>
<td>02</td>
<td><img src="images/eng.JPG" >ENG</td>
<td>Joe Root</td>
<td>872</td>
<td>923 v India at Edgbaston 2022</td>
</tr>
<tr>
<td>03</td>
<td><img src="images/nz.JPG" >NZ</td>
<td> Kane Williamson</td>
<td>859</td>
<td>919 v Pakistan at Christchurch 2021</td>
</tr>
<tr>
<td>04</td>
<td><img src="images/pak.JPG" >PAK</td>
<td> Babar Azam</td>
<td>768</td>
<td>882 v New Zealand at Karachi 2022</td>
</tr>
</tbody>
<tfoot>
<tr><th>ICC Test Ranking</th></tr>
</tfoot>
</table>
</body>
</html>
Attributes of table

border : This attribute is used to give table and cell border

Cell spacing and cell padding

cellspacing : this attribute is used to define the space between

cells

cellpadding : Inside cell the space between content

These are table level attributes and used at table level.

Syntax:
<table width=”80%” border=”1” cellspacing=”20”
cellpadding=”20”>

align,valign,width,height

width : This attribute is given at column level (cell). If this

attribute is set one cell within column, automatically applied to all
the cells within column

height : This attribute given at row level (tr).

Syntax:

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

align : This attribute is used to align text horizontally. The value

These attributes can be applied at row level(tr) and column level

(td/th).
If it is applied at row level, this alignment is done for all the cells
within row

Syntax:
<table width="100%" border="1" >
<caption>Test Ranking</caption>
<thead>
<tr height="80">
<th width="100" align="left" valign="top">Pos</th>
<th width="300" align="right">Team</th>
<th width="100">Players</th>
<th width="80">Rating</th>
<th width="400">Career Best Rating</th>
</tr>
</thead>

background,bgcolor

bgcolor: This attribute is used to apply the background color of

table or row or cell
background: This attribute is used to apply the background
image

Syntax:
<table bgcolor=”color”>
<tr bgcolor=”color”>
<td bgcolor=”color”>text</td>
</tr>
</table>
Syntax:

<table background=”image path”>

</table>

rowspan,colspan

These attributes are used to merge rows or columns

rowspan : This attribute is for merging rows

colspan: This attribute if for merging columns

Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPL</title>
</head>
<body>
<table width="100%" border="1">
<caption>Test Ranking</caption>

<th width="100" >Pos</th>

<th width="300" >Team</th>
<th width="100">Players</th>
<th width="80">Rating</th>
<th width="400">Career Best Rating</th>

</tr>
</thead>
<tbody>
<tr height="100">
<td >01</td>
<td><img src="images/ind.JPG" >IND</td>
<td >Rohit Sharma</td>
<td>1000</td>
<td>923 v India at Edgbaston 2022</td>
</tr>

<tr >
<td>02</td>
<td><img src="images/eng.JPG" >ENG</td>
<td>Joe Root</td>
<td>872</td>
<td>923 v India at Edgbaston 2022</td>
</tr>
<tr >
<td>03</td>
<td><img src="images/nz.JPG" >NZ</td>
<td> Kane Williamson</td>
<td>859</td>
<td>919 v Pakistan at Christchurch 2021</td>
</tr>
<tr >
<td>04</td>
<td><img src="images/pak.JPG" >PAK</td>
<td> Babar Azam</td>
<td>768</td>
<td>882 v New Zealand at Karachi 2022</td>
</tr>
</tbody>
<tfoot>
<tr ><th colspan="5" align="right">ICC Test Ranking</th></tr>
</tfoot>
</table>
</body>
</html>

Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table
{
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<table border="1" width="100%">
<caption>Marks Sheet</caption>
<tr>
<td>Rollno</td>
<td colspan="3">101</td>
</tr>
<tr>
<td>Name</td>
<td colspan="3">Naresh</td>
</tr>
<tr>
<td>Subject1</td>
<td>Subject2</td>
<td colspan="2">Subject3</td>
</tr>
<tr>
<td>99</td>
<td>99</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>Total</td>
<td>297</td>
<td>Result</td>
<td>Pass</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses Details</title>
<style>
table
{
font-size: 30px;
font-family: Arial;
}
</style>
</head>
<body>
<table border="5" width="80%">
<tr>
<th colspan="2">Language and FrameWorks</th>
</tr>
<tr>
<td>Python</td>
<td>Django</td>
</tr>
<tr>
<td rowspan="2">JavaScript</td>
<td>React.Js</td>
</tr>
<tr>
<td>Vue.Js</td>
</tr>
<tr>
<td>Ruby</td>
<td>Ruby on Rails</td>
</tr>
</table>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses Details</title>
<style>
table
{
font-size: 30px;
font-family: Arial;
}
</style>
</head>
<body>
<table border="5" width="100%" cellpadding="10">
<tr>
<th rowspan="3">Day</th>
<th colspan="3">Seminar</th>
</tr>
<tr>
<th colspan="2">Schedule</th>
<th rowspan="2">Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 am</td>
<td rowspan="2">5:00 pm</td>
<td>Introduction to XML</td>
</tr>
<tr>
<td>Validity:DTD and RelaxNG</td>
</tr>
<tr>
<td rowspan="3">TuesDay</td>
<td>8:00am</td>
<td>11:00am</td>
<td rowspan="2">XPath</td>
</tr>
<tr>
<td>11:00am</td>
<td>2:00pm</td>
</tr>
<tr>
<td>2:00pm</td>
<td>5:00pm</td>
<td>XSL Tansformations</td>
</tr>
<tr>
<td>WednesDay</td>
<td>8:00am</td>
<td>12:00pm</td>
<td>XSL Formatting Objects</td>
</tr>
</table>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses Details</title>
<style>
table
{
font-size: 30px;
font-family: Arial;
}
</style>
</head>
<body>
<table border="2" width="80%">
<tr>
<th colspan="6">Time Table</th>
</tr>
<tr>
<th rowspan="6">Hours</th>
<th>Mon</th>
<th>Tue</th>
<th>Web</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<tr>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Arts</td>
</tr>
<tr>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Arts</td>
</tr>
<tr>
<td colspan="5" align="center">Lunch</td>
</tr>

<tr>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td rowspan="2" colspan="2">Project</td>
</tr>
<tr>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
</tr>
</table>

</body>
</html>

HTML form elements

HTML is used for creating UI (User Interface) for web application.

What is form?
A form is container, where end user or client input data and
submit this data to backend or another program.

This form is created using <form> element

Syntax:
<form action=”URL” method=”Request Method”>

</form>

What is URL, URI, URN?

URL stands for Uniform Resource Location
URI stands for Uniform resource Identification
URN stands for Uniform Resource Name

action
Action is event which is executed when end user click on submit
button.
When end user click on submit button form data is submitted to
resource given in action.

Method
action
Action is event which is executed when end user click on submit
button.
When end user click on submit button form data is submitted to
resource given in action.

method

Method defines HTTP request method.

What is request?
Input given by end user to the server is called request.

What is response?
The output given by server to the client is called response

In internet client/server communication is done using HTTP

protocol.
HTTP stands for Hyper Text Transfer Protocol.

HTTP provides various request methods

1. GET
2. POST
3. PUT
4. DELETE
5. PATCH

GET:
GET is request to read information from server but not writing
information to server.
Example:
1. Type URL in browser and press enter
2. Query data or information

In request method GET, the data is concatenated with URL

The data is visible on URL bar.
Secured data cannot send using GET method.
Always data send as text format.
Using GET we cannot send large amount of data because URL
length. This maximum length of URL is 2048 characters.
GET request is not secured,
1. Visible on URL
2. URL injection

POST
In request method POST, the data is send as part request body
(OR) send as stream. It is not visible on Address/URL bar.
POST is request writing information to server.
Example:
Inserting data/registration

In post request,
1. Any type of data can be send
2. There is no restriction on sending of data
3. There is no chance of URL injection

target

This attribute where display generated response.

The value of target can be,
_self
_blank

[email protected]
Form Elements or tags

Form is created or designed using form elements or tags

Form elements are used for creating UI (User interface).

Label
Label is used for creating caption for input element
Label is used to identify input element (OR) data.

Syntax:
<label for=”name”>text</label>

Name is used to identify the label.

This name is used as an id for input element.
By clicking on label, the input element can focused using linking
with id.

Input

HTML5 supports various types of input elements or types.

<input type=text name=”name” id=”id of label”>

It is used to input text.

Value inside input field is identified with name.

Submit, Reset, Button

HTML 5.0 provides 3 types of buttons

1. Submit button

This button is having predefined functionality. When end user

click on submit button the form data is submitted to given url.
(OR) when end user clicks on submit button action is performed.

Syntax:
<input type=”submit” value=”text”>

Value is used to change display text, the default display text form
input type submit is submit.

2. Reset button

This button is having predefined functionality. When end user

click on reset button the form data is cleared.

Syntax:
<input type=”reset” value=”text”>

3. Button

Input button does not have any predefined functionality. This

functionality must be defined by programmer using java script.

Syntax:
<input type=”button” value=”text” onclick=function>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
fieldset
{
font-size: 20px;
font-weight: bold;
padding:50px;
}
label {
border: 1px solid black;
color:blue;
}
.s {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
background-color: aqua;
color:red;
border-color: blueviolet;
border-radius: 15px;
width: 150px;

}
</style>
</head>
<body>
<form action="index.html">
<fieldset>
<legend>User Information</legend>
<label for="uname">UserName</label>
<input type="text" name="uname" id="uname"><br><br>
<label for="name">Name</label>
<input type="text" name="name" id="name"><br><br>
<input type="submit" value="Login" class="s">
<input type="reset" value="clear" class="s">
<input type="button" value="validate" class="s">
</fieldset>
</form>
</body>
</html>

This input type used to input password values. The content input
inside password field is not visible.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Login Form</title>
<style>
</style>
</head>
<body>
<form>
<table border="1" width="80%">
<caption>Login</caption>
<tr>
<td><label for="uname">UserName</label></td>
<td><input type="text" name="uname" id="uname"
required></td>
</tr>
<tr>
<td><label for="pwd">Password</label></td>
<td><input type="password" name="pwd" id="pwd"
required></td>
</tr>
<tr>
<td><input type="submit"></td>
<td><input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>

Attribute
required : if this attribute is assigned to any input field, input is
required before submitting form.
<input type=number>

This input field type allows to input only numbers

Syntax:
<input type=”number” name=”field-name”>

Attributes
1. Min : This define minimum value
2. Max : This define maximum value
3. Value: This define default value
4. Placeholder : text displayed within input field

<input type=hidden>
This is for creating hidden field, this field is not visible to end user.
End user cannot input value inside hidden field.

In web application development hidden fields are used for session

management or tracking.

1. Value : this define hidden field value

Inside hidden field value is given by server side program.

<input> elements of type email are used to let the user enter and
edit an email address

1. multiple : This attribute allows input multiple email

addresses by separating with , the value of this multiple can
be True/False

Syntax:
<input type=”email” [email protected] placeholder=”Mail
Address” multiple=”true/false”>

<input type=”tel”>
<input> elements of type tel are used to let the user enter and
edit a telephone number.

Syntax:
<input type=”tel”>

If telephone number pattern is not defined it allows any pattern.

This pattern is defined using regex (regular expression)

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<script>

</script>
<style>
</style>
</head>
<body>
<form>
<label for="age">Age</label>
<input type="number" name="personage" id="age" min="1"
max="200" value="10" ><br><br>
<label for="name">Name</label>
<input type="text" name="pname" id="name"
placeholder="Person Name"><br>
<input type="hidden" name="uname" value="nit"><br>
<label for="email">Email</label>
<input type="email" name="email" id="email" multiple="true"
placeholder="Email Address"><br>
<label for="phno">Telephone No</label>
<input type="tel" name="phno" id="phno" pattern="[0-9]{10}">

<input type="submit">
</form>
</body>
</html>
What is CSS?

CSS stands for Cascading Style Sheets, it is a simple design

language intended to simplify the process of making web pages
presentable using CSS properties. CSS specify how an HTML
element should be displayed on the web page

Why Use CSS?

CSS Saves Time: You can write CSS once and then reuse
same sheet in multiple HTML pages.
Pages Load Faster: If you are using CSS, you do not need to
write HTML tag or attributes every time. Just write one CSS rule
of a tag and apply it to all the occurrences of that tag.
Easy Maintenance: To make a global change, simply change
the style, and all elements in all the web pages will be updated
automatically.
Superior Styles to HTML: CSS has a much wider array of
attributes than HTML, so you can get a far better look to your
HTML page.
Multiple Device Compatibility: For the same HTML
document, different versions of a website can be presented for
different screen widths
Global Web Standards: Now most of the HTML attributes are
being deprecated and it is being recommended to use CSS.

CSS History and Versions

Current version of CSS3 and early versions were CSS1 and
CSS2.

Cascading Style Sheets level 1 (CSS1) came out of W3C as a

recommendation in December 1996. This version describes the
CSS language as well as a simple visual formatting model for all
the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds

on CSS1. This version adds support for media-specific style
sheets e.g. printers and aural devices, downloadable fonts,
element positioning and tables.

CSS3 was became a W3C recommendation in June 1999 and

builds on older versions CSS. It has divided into
documentations is called as Modules and here each module
having new extension features defined in CSS2.

Types of CSS
.
Inline CSS: Inline CSS are directly applied on the HTML
elements.
HTML element is having an attribute called style.

Syntax:
<p style="font-size: 60px; font-family: 'Times New Roman', Times,
serif;">Hello</p>

Problem with inline CSS is, it is not reusable. This style is

applied only to one element.

Internal CSS: Internal CSS are defined in the HTML head

section inside of <style> tag. Internal CSS is reusable, it allows
to define style once and applied to more than one tag within
same page.

Syntax:
<head>
<style>
selector
{
css-property:value;
css-property:value;
}
selector
{
Css-property:value;
Css-property:value;
}
</style>
</head>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Inline CSS</title>
<style>
p{
font-size: 40px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet
MS', sans-serif;
color: blue;
}

</style>
</head>
<body>
<p >Hello</p>
<p>Hyper Text Markup Language</p>
<p>Cacading Style Sheets</p>
<p>Bootstrap</p>
<p>JavaScript</p>
</body>
</html>

External CSS: External CSS are defined in a separate file that

contains only CSS properties, this is the recomended way to
use CSS when you are working on projects. It is easy to
maintain and multiple CSS files can be created and you can use
them by improting it into your HTML document using
HTML <link> tag.

Syntax:
<link rel=”stylesheet” href=”path”>

style1.css (css folder)

p{
font-size: 40px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
sans-serif;
color:blue;
}

Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Inline CSS</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<p >Hello</p>
<p>Hyper Text Markup Language</p>
<p>Cacading Style Sheets</p>
<p>Bootstrap</p>
<p>JavaScript</p>
</body>
</html>

CSS Syntax
Following is the syntax of styling using CSS.
selector {
property: value;
}

Selector: CSS selectors are used to select the HTML element

or groups of elements you want to style on a web page.
Property: A CSS property is an aspect or characteristic of an
HTML element that can be styled or modified using CSS, such
as color, font-size, or margin.
Value: Values are assigned to properties. For example, color
property can have value like red, green etc.

Multiple Style Rules

If you want to define multiple rules for a single selectors you
can specify those in single block separated by a semicolon (;).
Syntax
selector{
property1: value1;
property2: value2;
property3: value3;
}

CSS Selectors are used to select the HTML elements you want
to style on a web page. They allow you to target specific
elements or groups of elements to apply styles like colors,
fonts, margins, and more.

Types of Selectors
1. Universal Selectors
2. Element Selectors
3. Class Selectors
4. Id Selectors
5. Attribute Selectors
6. Group Selectors
7. Pseudo-element Selectors
8. Pseudo-class Selectors
9. Descendant Selectors
10. Child Selectors
11. Adjacent Sibling Selectors
12. General Sibling Selectors

CSS Universal Selector

Universal selector, denoted by an asterisk mark (*), is a special

selector that matches all elements in an HTML document.
These are generally used to add a same length margin and
padding to all the elements in document.

Syntax
*{
margin: 0;
padding: 0;
}

As per the above syntax, the universal selector is used to apply

a margin and padding of 0 to all HTML elements.

Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
*{
font-size: 40px;
color:blue;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>UI Technologies</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>
<h2>Bootstrap</h2>
<p>UI stands for User Interface</p>
<div>
<span>UI</span>
</div>
<table border="1">
<tr>
<th>Rollno</th>
<th>Name</th>
</tr>

</table>
</body>
</html>

CSS Element Selector

A element selector targets an HTML element, such
as <h1>, <p>, etc. This is used when we want to apply similar
style to all the <p> tags or <h1> tags in the document.

Syntax
/* Sets text color of all p tags to green */
p{
color: green;
}
/* Add underline to all h1 tags in document */
h1 {
text-decoration-line: underline;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
h1 {
color:blue;
}
h2 {
color:red;
}
p
{
color:blueviolet;
}
span {
font-weight: bold;
}
th {
font-size: 40px;
font-family: Arial, Helvetica, sans-serif;

}
</style>
</head>
<body>
<h1>UI Technologies</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>
<h2>Bootstrap</h2>
<p>UI stands for User Interface</p>
<div>
<span>UI</span>
</div>
<table border="1">
<tr>
<th>Rollno</th>
<th>Name</th>
</tr>

</table>
</body>
</html>

CSS Class Selector

A class selector targets an element with a specific value for
its class attribute to style it. A class in CSS is denoted
by "." (period) symbol.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.header1 {
font-size: 40px;
text-decoration-line: underline;
}
.header2 {
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1 class="header1">UI Technologies</h1>
<h2 class="header2">HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>
<h2 class="header2">Bootstrap</h2>
<p>UI stands for User Interface</p>
<div>
<span>UI</span>
</div>
<table border="1">
<tr>
<th>Rollno</th>
<th>Name</th>
</tr>

</table>
</body>
</html>

CSS ID Selector
An ID selector targets single element with a particular value
for id attribute to style it. An id in CSS is denoted by "#"
(hash) symbol. Same class can be applied to multiple elements,
but an id is unique for an element.

Syntax:

#style-p {
color: green;
font-size: 25px;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
#id1 {
font-size: 30px;
color:blue;
}
</style>
</head>
<body>
<h1 >UI Technologies</h1>
<h2 id="id1" >HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>
<h2 >Bootstrap</h2>
<p>UI stands for User Interface</p>
<div>
<span>UI</span>
</div>
<table border="1">
<tr>
<th>Rollno</th>
<th>Name</th>
</tr>

</table>
</body>
</html>
CSS Attribute Selector
An attribute selector targets an element based on a specific
attribute or attribute values on an element.

Basic Attribute Selector

/* Selects all <input> elements with a 'type' attribute */
input[type] {
border: 1px solid blue;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
label {
font-size: 30px;
margin-right: 50px;
}
input[type]{
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color:blue;
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<label for="name">Name</label>
<input type="text" id="name"><br>
<label for="uname" >UserName</label>
<input type="text" id="uname"><br>
<label for="pwd">Password</label>
<input type="password" id="pwd"><br>
</form>
</body>
</html>

Attribute Selector with a Specific Value

To select elements with an attribute that has a specific value:
/* Selects all <input> elements where the 'type' attribute is
'text' */
input[type="text"] {
background-color: yellow;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
label {
font-size: 30px;
margin-right: 50px;
}
input[type=text]{
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color:blue;
border: 2px solid red;
}
input[type=password]{
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color:red;
border: 2px solid black;
}
</style>
</head>
<body>
<form>
<label for="name">Name</label>
<input type="text" id="name"><br>
<label for="uname" >UserName</label>
<input type="text" id="uname"><br>
<label for="pwd">Password</label>
<input type="password" id="pwd"><br>
</form>
</body>
</html>

Attribute Selector with Prefix Match

To select elements where the attribute value starts with a
specific value:
/* Selects all <a> elements where the 'href' attribute starts
with 'https' */
a[href^="https"] {
font-weight: bold;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
a[href^=https]
{
text-decoration: none;
font-size: 40px;
color:black;
}
</style>
</head>
<body>
<a href="http://www.nareshit.com">Nareshit</a><br>
<a href="https://www.hdfc.com">HDFC</a><br>
</form>
</body>
</html>

Attribute Selector with Suffix Match

To select elements where the attribute value ends with a
specific value:
/* Selects all <a> elements where the 'href' attribute ends with
'.pdf' */
a[href$=".pdf"] {
color: green;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
img[src$=avif] {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="images/eng.JPG">
<img src="images/ind.JPG">
<img src="images/kids-banner.avif">
<img src="images/banner.avif">
</form>
</body>
</html>

Attribute Selector with Space-separated Value Match

To select elements where the attribute value contains a specific
word:
/* Selects all <div> elements with a 'class' attribute containing
'highlight' */
div[class~="highlight"] {
background-color: lightgrey;
}

}
</style>
</head>
<body>
<div class="class1">
<div class="head one">FrontEnd</div>
<div>HTML</div>
<div>CSS</div>
<div>JavaScript</div>
<div>Bootstrap</div>
<div>AngularJs</div>
</div>
<div class="class1">
<div class="head two">BackEnd</div>
<div>Django</div>
<div>Flask</div>
<div>RestAPI</div>

</div>
<div class="class1">
<div class="head three">Database</div>
<div>Oracle</div>
<div>MySQL</div>
<div>MongoDB</div>

</div>

</body>
</html>

Combining Attribute Selectors

You can combine attribute selectors to refine your selection:

/* Selects all <input> elements where the 'type' attribute is

either 'text' or 'password' */
input[type="text"],
input[type="password"] {
border: 2px solid orange;
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
input[type="text"],
input[type="password"]
{
border: 2px solid blue;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<form>
<input type="text"><br>
<input type="password"><br>
<input type="checkbox"><br>
<input type="radio"><br>
</form>
</body>
</html>

CSS Group Selector

CSS group selector allow us to apply same style to multiple
elements at a time. Name of elements can be separated by
commas. This method is recommended as it keep CSS concise
and avoid redundancy.

Basic Group Selector

/* Selects <h1>, <h2>, and <h3> elements and applies the
same styles to them */
h1, h2, h3 {
font-family: Arial, sans-serif;
color: darkblue;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
h1,h2,h3 {
color:blue;
}
</style>
</head>
<body>
<h1>FrontEnd</h1>
<h2>HTML</h2>
<h3>Hyper Text Markup Language</h3>
<h2>CSS</h2>
<h3>Cascading Style Sheets</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio iste
sint laudantium consequuntur esse, minima officia in quaerat, est
suscipit excepturi similique illo accusamus atque dolor sit earum veritatis
neque.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae
dicta, eaque, temporibus veritatis nesciunt voluptatem maxime dolor
delectus inventore facere sunt ipsam architecto necessitatibus
exercitationem esse repellendus laborum odit incidunt.
</p>
</body>
</html>

Group Selector with Different Elements

/* Selects <p>, <ul>, and <ol> elements and applies a
common margin */
p, ul, ol {
margin: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
h1,li,p {
margin-left: 100px;
}
</style>
</head>
<body>
<h1>FrontEnd</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio iste
sint laudantium consequuntur esse, minima officia in quaerat, est
suscipit excepturi similique illo accusamus atque dolor sit earum veritatis
neque.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae
dicta, eaque, temporibus veritatis nesciunt voluptatem maxime dolor
delectus inventore facere sunt ipsam architecto necessitatibus
exercitationem esse repellendus laborum odit incidunt.
</p>

</body>
</html>
CSS Pseudo Class Selector

A pseudo-class selector is used to style a specific state of an element, such as :hover is used to style an
element when hovered.

1. :hover

Applies styles when the user hovers over an element.

/* Changes the background color of a button when hovered over */

button:hover {

background-color: #4CAF50;

color: white;

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:hover
{
font-size: 30px;
}
img:hover {
width:200px;
height: 200px;
}
input[type=submit]:hover {
background-color: #4CAF50;
color: white;

}
</style>
</head>
<body>
<a href="http://www.nareshit.com">Nareshit</a><br>
<img src="images/ind.JPG"><br>
<input type="submit">
</body>
</html>

2. :focus

Applies styles when an element gains focus, such as when a user clicks on an input field.

/* Adds a border to input fields when they are focused */

input:focus {

border: 2px solid #00f;

outline: none;

</style>

</head>
<body>
<form>
<label for="uname">UserName</label>
<input type="text" id="uname"><br>
<label for="pwd">Password</label>
<input type="password" id="pwd"><br>
<input type="submit">
</form>
</body>
</html>

3. :active

Applies styles while an element is being activated (e.g., clicked).

/* Changes the color of a link when it is clicked */

a:active {

color: red;

Example:

</style>

</head>
<body>
<a href="http://www.nareshit.com">nareshit</a>
<form>
<input type="button" value="Login">
</form>
</body>
</html>

4. :first-child

Selects the first child element of a parent.

/* Adds a margin to the first <li> element within any <ul> */

ulli:first-child {

margin-top: 0;

5. :last-child

Selects the last child element of a parent.

/* Adds a margin to the last <p> element within a container */

.container p:last-child {

margin-bottom: 0;

}
Example:

</head>
<body>
<table border="2" width="100%">
<tr>
<th>Rollno</th>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>1</td>
<td>Naresh</td>
<td>Python</td>
</tr>
<tr>
<td>2</td>
<td>Suresh</td>
<td>Java</td>
</tr>
<tr>
<td>3</td>
<td>Kishore</td>
<td>Java</td>
</tr>
<tr></tr>
<td>4</td>
<td>Naresh</td>
<td>Python</td>
</tr>
<tr>
<td>5</td>
<td>Suresh</td>
<td>Java</td>
</tr>
<tr>
<td>6</td>
<td>Kishore</td>
<td>Java</td>
</tr>
</table>
</body>
</html>

6. :nth-child(n)

Selects elements based on their position in a parent, where n can be a number, keyword, or formula.

/* Applies a background color to every second <tr> element in a table */

table tr:nth-child(even) {
background-color: #f2f2f2;

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table tr:nth-child(even)
{
background-color: aqua;
}
table tr:nth-child(odd) {
background-color: yellow;
}
table tr:nth-child(1) {
background-color: yellowgreen;
}
table tr:nth-child(3) {
background-color: aquamarine;
}

</style>

</head>
<body>
<table border="2" width="100%">
<tr>
<th>Rollno</th>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>1</td>
<td>Naresh</td>
<td>Python</td>
</tr>
<tr>
<td>2</td>
<td>Suresh</td>
<td>Java</td>
</tr>
<tr>
<td>3</td>
<td>Kishore</td>
<td>Java</td>
</tr>
<tr>
<td>4</td>
<td>Naresh</td>
<td>Python</td>
</tr>
<tr>
<td>5</td>
<td>Suresh</td>
<td>Java</td>
</tr>
<tr>
<td>6</td>
<td>Kishore</td>
<td>Java</td>
</tr>
</table>
</body>
</html>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container span:nth-child(1) {
background-color: aqua;
color:red;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.container span:nth-child(3) {
background-color: yellowgreen;
color:blue;
font-size: 20px;
}

</style>

</head>
<body>
<div class="container">
<span>Home</span>
<span>Courses</span>
<span>Contact Us</span>
</div>
</body>
</html>

7. :nth-of-type(n)

Selects elements of a specific type based on their position.

/* Selects every third <p> element within a container */

.container p:nth-of-type(3n) {

color: blue;

Example:

</style>

</head>
<body>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla vero
praesentium in ut fuga provident blanditiis ipsa cumque. Error saepe qui
cumque, nam temporibus assumenda aut sapiente consequuntur porro
reprehenderit!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
voluptas modi eveniet? In eius distinctio voluptates, consequatur maxime
magni exercitationem molestias ad! Enim provident repudiandae, hic id ut
vel voluptas?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
saepe ex consequatur perspiciatis laboriosam nostrum, nihil impedit quam
delectus praesentium, quaerat voluptatibus inventore. Nostrum, nam
deleniti nisi libero pariatur deserunt?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
consectetur, in libero officiis aliquam accusantium facilis nisi quibusdam
quia adipisci omnis, voluptatum quae, repudiandae asperiores iure quidem.
Temporibus, minus doloremque.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum
dolorem, ab porro ratione fugiat amet! Mollitia ipsam dolore, itaque
obcaecati, repellendus eum eius dolorem, qui sunt dicta assumenda
placeat accusantium.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque id
tempore, voluptate, ratione eveniet quibusdam saepe maxime ex
dignissimos molestiae soluta voluptates ullam asperiores eligendi dolores
illum dolor sint enim.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex ipsum
eaque provident vel! In architecto, tempore tempora porro libero facere
aperiam quod eligendi voluptatum maiores assumenda. Incidunt veniam
nemo vero!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
nobis esse quo est accusamus aut id autem itaque eos placeat cumque
eligendi corporis tempora enim odio corrupti rerum, atque unde?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex ipsum
eaque provident vel! In architecto, tempore tempora porro libero facere
aperiam quod eligendi voluptatum maiores assumenda. Incidunt veniam
nemo vero!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
nobis esse quo est accusamus aut id autem itaque eos placeat cumque
eligendi corporis tempora enim odio corrupti rerum, atque unde?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex ipsum
eaque provident vel! In architecto, tempore tempora porro libero facere
aperiam quod eligendi voluptatum maiores assumenda. Incidunt veniam
nemo vero!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
nobis esse quo est accusamus aut id autem itaque eos placeat cumque
eligendi corporis tempora enim odio corrupti rerum, atque unde?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex ipsum
eaque provident vel! In architecto, tempore tempora porro libero facere
aperiam quod eligendi voluptatum maiores assumenda. Incidunt veniam
nemo vero!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
nobis esse quo est accusamus aut id autem itaque eos placeat cumque
eligendi corporis tempora enim odio corrupti rerum, atque unde?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex ipsum
eaque provident vel! In architecto, tempore tempora porro libero facere
aperiam quod eligendi voluptatum maiores assumenda. Incidunt veniam
nemo vero!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
nobis esse quo est accusamus aut id autem itaque eos placeat cumque
eligendi corporis tempora enim odio corrupti rerum, atque unde?
</p>
</div>
</body>
</html>

8. :not(selector)

Selects elements that do not match the given selector.

/* Selects all <input> elements that are not of type 'password' */

input:not([type="password"]) {

border: 1px solid #ccc;

</head>
<body>
<div class="container">
<h1>Heading</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla vero
praesentium in ut fuga provident blanditiis ipsa cumque. Error saepe qui
cumque, nam temporibus assumenda aut sapiente consequuntur porro
reprehenderit!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
voluptas modi eveniet? In eius distinctio voluptates, consequatur maxime
magni exercitationem molestias ad! Enim provident repudiandae, hic id ut
vel voluptas?
</p>
<img src="images/kids-banner.avif">

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

9. :checked

Selects input elements that are checked (like checkboxes or radio buttons).

/* Styles the label of a checked checkbox */

input[type="checkbox"]:checked + label {

font-weight: bold;

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type=checkbox]:checked+label {
font-weight: bold;
}
input[type=radio]:checked+label{
color:blue;
font-weight: bold;
}
</style>

</head>
<body>
<form>
<input type="checkbox">
<label for="java">Java</label><br>
<input type="radio" name="c">
<label for="python">Python</label>
<input type="radio" name="c">
<label for="oracle" >Oracle</label>
</form>
</body>
</html>

10. :disabled

Selects elements that are disabled.

/* Styles disabled form fields with a lighter background */

input:disabled {

background-color: #e0e0e0;
cursor: not-allowed;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:disabled {
color:red;
}
</style>

</head>
<body>
<form>
<input type="button" disabled="true" value="button">
<input type="button" value="button">
<input type="button" value="button">
</form>
</body>
</html>
11. :before and :after
Add content before or after an element’s content.

/* Adds a decorative icon before each list item */

Ul li::before {

content: "•";

color: red;

margin-right: 5px;

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
span {
color:blue;
font-size: 20px;
}
span:before {
content: "#";
color:red;
font-size:20px;
}
span:after {
content: "*";
font-size: 20px;
color:red;
}
</style>

</head>
<body>
<h2>Courses</h2>
<div>
<span>Java</span><br>
<span>Oracle</span><br>
<span>Python</span><br>
</div>
</body>
</html>
CSS Descendant Selector
Descendant selector is used in css to style all the tags which are
child of a particular specified tag. A single space between parent
element and child element is used to mention as descendant .

Syntax
parent-element child-element
{
css-property:value;
css-property:value;
}

Example:

</head>
<body>
<div>
<p>
Lorem ipsum, dolor sit amet
consectetur adipisicing elit. Eveniet
accusamus enim cupiditate error, quasi
assumenda ratione reiciendis odio. Autem,
voluptatibus praesentium nesciunt
repudiandae quia sunt temporibus facilis
laborum totam animi.
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ratione beatae
eius vitae dolore dicta omnis iusto rerum
eveniet, quod ex delectus autem? Laboriosam
aspernatur at consectetur, rerum dolor iste
sint!
</p>
<p>
Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Reprehenderit
animi ducimus nesciunt quam ex beatae
cumque harum, corporis iure impedit
consequuntur dignissimos aliquam ratione
saepe officia cum quo libero fugiat?
</p>
<span>HTML</span><br>
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Distinctio nostrum
exercitationem velit? Repellendus autem eum
facilis voluptas dolorem saepe! Voluptatum
quos ad debitis tenetur illo maiores facilis nisi
architecto accusamus!
</p>
</div>
<div>
<span>HTML</span><br>
<span>CSS</span>
</div>
<table border="2" width="100%">
<tr>
<th>Rollno</th>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>1</td>
<td>Naresh</td>
<td>Java</td>
</tr>
<tr>
<td>2</td>
<td>Suresh</td>
<td>Python</td>
</tr>
</table>
</body>
</html>
CSS Child Selector
The child selector in css is used to target all the direct child of a
particular element. This is denoted by '>' (Greater than) symbol.

Syntax
div > p {
color: blue;
}
The above code set text color of paragraph tags that are directly
inside div element to blue.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div>p {
color:red;
}
</style>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa
porro doloremque quaerat fugit omnis. Laborum officia deserunt ullam
amet, iste pariatur maiores totam excepturi eos nisi quam incidunt
minima voluptatum!</p>
<span>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Laborum eum ex alias corporis commodi accusantium non, illum
beatae ratione odio sit necessitatibus incidunt in debitis, architecto
nobis minus voluptas ipsa?</p>
</span>
</div>
</body>
</html>

CSS Adjacent Sibling Selectors

In CSS, adjacent sibling selector is used to target an element that
is immediately preceded by a specified element. A plus
symbol ( "+" ) is used to denote adjacent sibling.

Tr+th
Img+p
div+span

Syntax
h1 + p {
margin-top: 0;
}
The above code sets top margin of paragraph tag just after h1 tag
to 0.
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
h1+p {
border: 1px solid black;
}
h2+p {
color:blue;
}
div+span{
border: 1px solid black;
}
</style>
</head>
<body>
<h1>HTML</h1>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Exercitationem velit excepturi
corporis, est non accusamus eos nemo
commodi explicabo voluptatum consequatur
dolore unde, doloribus quae natus dignissimos
voluptatibus esse? Accusamus.</p>
<h2>What is HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. At blanditiis cupiditate dolores
laborum repellat ipsum odit provident
assumenda atque voluptas magnam maxime
culpa, iste possimus reiciendis ut repudiandae
molestiae quo.</p>
<h2>History of HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quas, voluptates laudantium id
quae dolore non, dolorum ratione et ipsam
incidunt quidem labore obcaecati suscipit
officiis, culpa cum enim explicabo sint?</p>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Unde quod, inventore, sunt
doloribus praesentium quidem recusandae
aperiam dignissimos quis deleniti
necessitatibus fugiat mollitia, architecto a
perferendis nemo. Excepturi, a neque.</p>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Pariatur earum doloribus
tempora reiciendis ullam possimus minima
delectus tenetur obcaecati id architecto, dolor
suscipit. In dolore sunt consequuntur ratione
possimus veritatis.</p>
<div>HTML</div>
<span>HTML</span>

</body>
</html>

Nested Selectors In CSS

CSS nesting allows to nest one style rule inside another rule, with
the selector of the child rule relative to the selector of the parent
rule.

Syntax
nav {
&ul {
list-style: none;
& li {
display: inline-block;
&a{
text-decoration: none;
color: blue;
&:hover {
color: red;
}
}
}
}
}

Example:

</head>
<body>
<div>
<p>
Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Laborum, fugit
totam praesentium suscipit tempora harum sit
cupiditate quibusdam? Voluptatem illo
doloribus dolore, corrupti perferendis dolor
expedita temporibus iusto saepe laudantium.
<img src="images/kids-banner.avif">
</p>
</div>

</body>
</html>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
nav {
& ul {
list-style: none;
& li {
display: inline-block;
&a{
text-decoration: none;
color: blue;
&:hover {
color: red;
}
}
}
}
}

</style>

</head>
<body>
<nav>
<ul>
<li><a>HOME</a></li>
<li><a>Courses</a></li>
<li><a>Contacts</a></li>
</ul>
</nav>

</body>
</html>

CSS Borders
Applying border to elements

Shorthand
border: width style color

CSS border properties

1. Border-bottom
2. Border-top
3. Border-left
4. Border-right
5. Border-radius
6. Border-width
7. Border-style
8. Border-left-color
9. Border-right-color
10. Border-top-color
11. Border-bottom-color
12. Border-top-left-radius
13. Border-top-right-radius
14. Border-bottom-left-radius
15. Border-bottom-right-radius
16. Border-left-style
17. Border-right-style
18. Border-top-style
19. Border-bottom-style
20. Border-collapse
21. Border-image

Example:
h1 {
border-top: 1px solid black;
border-bottom: 1px solid red;
border-left: 3px blue double;
border-right: 3px blue double;
}
</style>

</head>
<body>
<h1>Hyper Text Markup Language </h1>

</body>
</html>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
h1 {
border-left-style: dotted;
border-right-style: double;
border-top-style:solid;
border-bottom-style: dashed;
border-left-color: blue;
border-right-color: red;
border-top-color: green;
border-bottom-color: blueviolet;
border-top-width: 5px;
border-bottom-width: 10px;
}
</style>

</head>
<body>
<h1>Hyper Text Markup Language </h1>

</body>
</html>
CSS Borders
Applying border to elements

Shorthand
border: width style color

CSS border properties

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.container
{
width:400px;
height:200px;
border:2px solid black;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
</style>

</head>
<body>
<div class="container">

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

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="3px" width="80%">
<tr>
<th>Rollno</th>
<th>Name</th>
</tr>
<tr>
<td>1</td>
<td>Naresh</td>
</tr>
<tr>
<td>2</td>
<td>Suresh</td>
</tr>
<tr>
<td>3</td>
<td>Kishore</td>
</tr>
</table>
</body>
</html>

Border-block (shorthand)
Border-block-start-width
Border-block-start-style
Border-block-start-color
Border-block-end-width
Border-block-end-style
Border-block-end-color

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div {
border-block-start-width: 5px;
border-block-start-color: black;
border-block-start-style: dotted;
border-block-end-style: solid;
border-block-end-width: 5px;
border-block-end-color: red;

}
</style>

</head>
<body>
<div>
<span>HTML</span>
</div>
</body>
</html>

Box-shadow
Syntax:
container
{
Box-shadow:x-pos y-pos color

</head>
<body>
<div>
<span>HTML</span>
</div>
</body>
</html>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
img {
border: 2px solid black;
width:300px;
height: 300px;
box-shadow: 10px 10px blue;
}
p{
border: 2px solid black;
box-shadow:10px 5px blue ;
}
</style>

</head>
<body>

<img src="images/kids-banner.avif"><br>
<p>
Hyper Text Markup Language
</p>
</body>
</html>

CSS Layouts

What is layout?
Layout is organizing of elements or content within web page is
called layout.

Grid
Flex
Block
Inline
Inline block

Default behaviour of elements two types

1. Inline
2. Block
Inline elements are organized in row with multiple columns
Block elements are organized in rows and column
Example of inline elements : span,a,img,...
Example of block elements : div,headers, p,...

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
a{
display:block;
border:2px solid black;
width:fit-content;
}
div {
display:inline;
}
</style>
</head>
<body>
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<div> <span>Division1</span></div>
<div> <span>Division2</span> </div>
<div> <span>Division3</span> </div>
</body>
</html>

Inline-block
Inline-block display property is used with inline elements
If inline element display property not inline-block the size cannot
modified.

Syntax:
a{
width:100px;
height:150px;
display:inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div {
width:100%;
border:2px solid black;
}
span {
width:300px;
height: 100px;
display:inline-block;
color:blue;
}
</style>
</head>
<body>
<div class="container">
<span>Span-1</span>
<span>Span-2</span>
<span>Span-3</span>
</div>
</body>
</html>
display:none

if display property value is none, this element is not visible on

page.
This property values is used to a make element visible and
invisible

Syntax:
selector {
display:none;
}

</style>
</head>
<body>
<a href="#">Home</a>
<div class="container">
<span>Span-1</span>
<span>Span-2</span>
<span>Span-3</span>
</div>
</body>
</html>

display: flex

display:flex organize the content of container using given flex

properties. (left-right, right –left, top-bottom, bottom-top,…)

display:block  element  inline

display:inline  element  block
display:inlineblock  element  width,height
display:none  element

flex-direction
the value of flex-direction can be,
1. column
2. row
3. column-reverse
4. row-reverse

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.container
{
border:2px solid black;
display:flex;
flex-direction: column;
}
.container>div {
border: 2px solid red;
font-size: 20px;

</style>
</head>
<body>
<div class="container">
<div style="order:2;">
Div1
</div>
<div style="order:1">
Div2
</div>
<div style="order:3">
Div3
</div>
</div>
</body>
</html>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.container
{
border:2px solid black;
display:flex;
flex-direction: row-reverse;
}

</style>
</head>
<body>
<div class="container">
<img style="order:2" src="images/kids-banner.avif">
<img style="order:3" src="images/men-banner.avif">
<img style="order:1" src="images/women-banner.avif">
</div>
</body>
</html>

flex-flow

flex-flow define the flow of elements exists with container

The value of flex-flow can be,
1. row
2. column
3. row-reverse
4. column-reverse
5. wrap
6. no-wrap

flex-flow shorthand property

This property can be used to define two values
1. flex-direction
2. flex-wrap

Syntax:
Flex-flow: flex-direction flex-wrap

Example:
Flex-flow: row nowrap
Flex-flow: column nowrap
Flex-flow: row wrap
Flex-flow: column column-wrap/wrap

Display:flex
Flex-direction: row/column
Flex-wrap:wrap/nowrap

}
.container>div {
padding: 20px;
border: 1px solid black;
background-color: yellowgreen;
font-size: 40px;
font-weight: bold;
margin: 20px;
}

</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>
</body>
</html>
The justify-content property in CSS is used to align and
distribute space between flex items along the main axis of a
flex container. This property is part of the Flexbox layout model,
which helps create flexible and responsive layouts.

Values of justify-content
1. flex-start
o Description: Aligns flex items at the start of the
container.
o Example: Items are aligned to the left (or top,
depending on the flex direction).
2. flex-end
o Description: Aligns flex items at the end of the
container.
o Example: Items are aligned to the right (or bottom,
depending on the flex direction).
3. center
o Description: Centers flex items within the container.
o Example: Items are centered horizontally (or
vertically, depending on the flex direction).
4. space-between
o Description: Distributes flex items with equal space
between them, with no space at the start or end.
o Example: Items are spread out with equal spacing
between them.
5. space-around
o Description: Distributes flex items with equal space
around them, including space before the first item
and after the last item.
o Example: Items have equal space around them, with
half of the space at the start and end of the
container.
6. space-evenly
o Description: Distributes flex items with equal space
between and around them.
o Example: Items have equal spacing between them
and also at the start and end of the container.
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.container {
display:flex;
border: 1px solid black;
justify-content: space-between;
flex-direction: row;
height: 500px;
}
.container>div {
margin: 10px;
padding: 10px;
border:1px solid blue;
font-size: 30px;
width:50px;
height: 50px;
background-color: yellowgreen;
}

</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.container
{
display:flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid black;
padding:20px;
background-color: bisque;
}
.container>div {
width:400px;
background-color:azure;
}
.img {
display: flex;
flex-direction: column;
}
.container1 {
display:flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div>
<h2>Gaming accessories</h2>
<div class="container1">
<div class="img">
<img src="images/i1.jpg">
<span>Headsets</span>
</div>
<div class="img">
<img src="images/i2.jpg">
<span>Headsets</span>
</div>
<div class="img">
<img src="images/i3.jpg">
<span>Headsets</span>
</div>
<div class="img">
<img src="images/i4.jpg">
<span>Headsets</span>
</div>
</div>
</div>
<div>
<h2>New home arrivals under $50</h2>
<div>
<img src="images/k1.jpg">
<img src="images/k2.jpg">
<img src="images/k3.jpg">
<img src="images/k4.jpg">
</div>
</div>
<div>
<h2>Shop deals in Fashion</h2>
<div>
<img src="images/f1.jpg">
<img src="images/f2.jpg">
<img src="images/f3.jpg">
<img src="images/f4.jpg">
</div>
</div>
<div>
<h2>Refresh your space</h2>
<div>
<img src="images/d1.jpg">
<img src="images/d2.jpg">
<img src="images/d3.jpg">
<img src="images/d4.jpg">
</div>
</div>
</div>

</body>
</html>
Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Justify Content Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container flex-start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

<div class="container flex-end">

<div class="container center">

<div class="container space-between">

<div class="container space-around">

<div class="container space-evenly">

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Style.css
body {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #f0f0f0;
}

.container {
display: flex;
width: 80%;
margin-bottom: 20px;
border: 1px solid #ccc;
background-color: #fff;
padding: 10px;
}

.item {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
margin: 5px;
border-radius: 4px;
}

.flex-start {
justify-content: flex-start;
}

.flex-end {
justify-content: flex-end;
}

.center {
justify-content: center;
}

.space-between {
justify-content: space-between;
}

.space-around {
justify-content: space-around;
}

.space-evenly {
justify-content: space-evenly;
}
The position property in CSS is used to control the positioning of
an element on a webpage. It determines how an element is
placed within its containing element and how it interacts with
other elements. The position property can take several values:
static, relative, absolute, fixed, and sticky.
Here's a brief overview of each value with examples:
1. static
Definition: This is the default positioning for all elements.
Elements with position: static are positioned according to the
normal flow of the document. They are not affected by the top,
right, bottom, or left properties.
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Static Position Example</title>
<style>
.static-box {
background-color: lightblue;
width: 200px;
height: 100px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="static-box">Static Position</div>
</body>
</html>
Explanation:The .static-box element is positioned in the normal
document flow. It will appear where it would naturally fall in the
layout.
2. relative
Definition: An element with position: relative is positioned
relative to its normal position. It can be moved using the top,
right, bottom, and left properties, but the space originally
occupied by the element is still preserved.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Relative Position Example</title>
<style>
.relative-box {
position: relative;
background-color: lightcoral;
width: 200px;
height: 100px;
border: 2px solid red;
top: 20px; /* Move down by 20px */
left: 30px; /* Move right by 30px */
}
</style>
</head>
<body>
<div class="relative-box">Relative Position</div>
</body>
</html>
Explanation:The .relative-box is moved 20px down and 30px
right from its normal position, but it still takes up the same
amount of space in the layout.
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Relative Position Example</title>
<style>
.container
{
width: 300px;
height:300px;
border: 1px solid black;
background-color: aquamarine;
}
.div1 {
position: relative;
left:100px;
}
.div2 {
position: relative;
right: 50px;
top:50px;

}
</style>
</head>
<body>
<div class="container div1">Division1</div>
<div class="container div2">Division2</div>

</body>
</html>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Relative Position Example</title>
<style>
.s2 {
position: relative;
top:-5px;
left:-10px;
}
</style>
</head>
<body>
<div class="container">
<span class="s1">A</span>
<span class="s2">2</span>
</div>
</body>
</html>

Example:

}
.cart {
font-size: 20px;
font-weight: bold;
left:-20px;
top:10px;
position: relative;
}
</style>
</head>
<body>
<div>
<span class="bi bi-cart"></span>
<span class="value">0</span>
<span class="cart">Cart</span>
</div>
</body>
</html>

3. absolute
Definition: An element with position: absolute is positioned
relative to its nearest positioned ancestor (i.e., an ancestor with
position other than static). If no such ancestor exists, it is
positioned relative to the initial containing block (usually the
<html> element).
Example:

.absolute-box {
position: absolute;
background-color: lightgreen;
width: 150px;
height: 75px;
border: 2px solid green;
top: 20px; /* 20px from the top of the .relative-container */
right: 20px; /* 20px from the right of the .relative-
container */
}
</style>
</head>
<body>
<div class="relative-container">
<div class="absolute-box">Absolute Position</div>
</div>
</body>
</html>

Example:

Explanation:The .absolute-box is positioned 20px from the top

and right of its nearest positioned ancestor (.relative-container).
The .relative-container itself has position: relative, which makes it
the reference point for the absolute positioning.
The justify-content property in CSS is used to align and
distribute space between flex items along the main axis of a
flex container. This property is part of the Flexbox layout model,
which helps create flexible and responsive layouts.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.container {
display:flex;
border: 1px solid black;
justify-content: space-between;
flex-direction: row;
height: 500px;
}
.container>div {
margin: 10px;
padding: 10px;
border:1px solid blue;
font-size: 30px;
width:50px;
height: 50px;
background-color: yellowgreen;
}

</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.container
{
display:flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid black;
padding:20px;
background-color: bisque;
}
.container>div {
width:400px;
background-color:azure;
}
.img {
display: flex;
flex-direction: column;
}
.container1 {
display:flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div>
<h2>Gaming accessories</h2>
<div class="container1">
<div class="img">
<img src="images/i1.jpg">
<span>Headsets</span>
</div>
<div class="img">
<img src="images/i2.jpg">
<span>Headsets</span>
</div>
<div class="img">
<img src="images/i3.jpg">
<span>Headsets</span>
</div>
<div class="img">
<img src="images/i4.jpg">
<span>Headsets</span>
</div>
</div>
</div>
<div>
<h2>New home arrivals under $50</h2>
<div>
<img src="images/k1.jpg">
<img src="images/k2.jpg">
<img src="images/k3.jpg">
<img src="images/k4.jpg">
</div>
</div>
<div>
<h2>Shop deals in Fashion</h2>
<div>
<img src="images/f1.jpg">
<img src="images/f2.jpg">
<img src="images/f3.jpg">
<img src="images/f4.jpg">
</div>
</div>
<div>
<h2>Refresh your space</h2>
<div>
<img src="images/d1.jpg">
<img src="images/d2.jpg">
<img src="images/d3.jpg">
<img src="images/d4.jpg">
</div>
</div>
</div>

</body>
</html>
Example

<div class="container flex-end">

<div class="container center">

<div class="container space-between">

<div class="container space-around">

<div class="container space-evenly">

Style.css
body {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #f0f0f0;
}

.container {
display: flex;
width: 80%;
margin-bottom: 20px;
border: 1px solid #ccc;
background-color: #fff;
padding: 10px;
}

.item {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
margin: 5px;
border-radius: 4px;
}

.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}

.center {
justify-content: center;
}

.space-between {
justify-content: space-between;
}

.space-around {
justify-content: space-around;
}

.space-evenly {
justify-content: space-evenly;
}

The position property in CSS is used to control the positioning

of an element on a webpage. It determines how an element is
placed within its containing element and how it interacts with
other elements. The position property can take several values:
static, relative, absolute, fixed, and sticky.
Here's a brief overview of each value with examples:
1. static
Definition: This is the default positioning for all elements.
Elements with position: static are positioned according to the
normal flow of the document. They are not affected by the top,
right, bottom, or left properties.
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Static Position Example</title>
<style>
.static-box {
background-color: lightblue;
width: 200px;
height: 100px;
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="static-box">Static Position</div>
</body>
</html>
Explanation:The .static-box element is positioned in the
normal document flow. It will appear where it would naturally
fall in the layout.
2. relative
Definition: An element with position: relative is positioned
relative to its normal position. It can be moved using the top,
right, bottom, and left properties, but the space originally
occupied by the element is still preserved.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Relative Position Example</title>
<style>
.relative-box {
position: relative;
background-color: lightcoral;
width: 200px;
height: 100px;
border: 2px solid red;
top: 20px; /* Move down by 20px */
left: 30px; /* Move right by 30px */
}
</style>
</head>
<body>
<div class="relative-box">Relative Position</div>
</body>
</html>
Explanation:The .relative-box is moved 20px down and 30px
right from its normal position, but it still takes up the same
amount of space in the layout.
Example:

}
</style>
</head>
<body>
<div class="container div1">Division1</div>
<div class="container div2">Division2</div>

</body>
</html>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Relative Position Example</title>
<style>
.s2 {
position: relative;
top:-5px;
left:-10px;
}
</style>
</head>
<body>
<div class="container">
<span class="s1">A</span>
<span class="s2">2</span>
</div>
</body>
</html>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Absolute Position Example</title>
<style>
.relative-container {
position: relative;
background-color: lightgrey;
width: 300px;
height: 200px;
border: 2px solid grey;
padding: 20px;
}
.absolute-box {
position: absolute;
background-color: lightgreen;
width: 150px;
height: 75px;
border: 2px solid green;
top: 20px; /* 20px from the top of the .relative-container
*/
right: 20px; /* 20px from the right of the .relative-
container */
}
</style>
</head>
<body>
<div class="relative-container">
<div class="absolute-box">Absolute Position</div>
</div>
</body>
</html>

Example:

Explanation:The .absolute-box is positioned 20px from the top

and right of its nearest positioned ancestor (.relative-
container). The .relative-container itself has position: relative,
which makes it the reference point for the absolute positioning.
4. fixed
Definition: An element with position: fixed is positioned
relative to the viewport. It remains in the same position even
when the page is scrolled.
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Fixed Position Example</title>
<style>
.fixed-box {
position: fixed;
background-color: lightpink;
width: 150px;
height: 75px;
border: 2px solid pink;
bottom: 20px; /* 20px from the bottom of the viewport
*/
right: 20px; /* 20px from the right of the viewport */
}
</style>
</head>
<body>
<div class="fixed-box">Fixed Position</div>
<div style="height: 1500px;">Scroll down to see the fixed
box</div>
</body>
</html>
Explanation:The .fixed-box remains 20px from the bottom and
right of the viewport, regardless of scrolling.
5. sticky
Definition: An element with position: sticky toggles between
relative and fixed, depending on the user's scroll position. It
acts like relative until it crosses a defined threshold, at which
point it behaves like fixed.
Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sticky Position Example</title>
<style>
header {
background-color: lightblue;
padding: 10px;
text-align: center;
position: sticky;
top: 0; /* Stick to the top of the viewport */
z-index: 1000; /* Ensure it is on top of other content */
}
.content {
height: 1500px; /* To make the page scrollable */
padding: 20px;
}
</style>
</head>
<body>
<header>
Sticky Header
</header>
<div class="content">
Scroll down to see the sticky header in action.
</div>
</body>
</html>
Explanation: The header element with position: sticky sticks
to the top of the viewport as you scroll down the page.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sticky Position Example</title>
<style>
.container {
border: 1px solid red;

}
.child{
border: inherit;
}
</style>
</head>
<body>
<div class="container">
<div class="child">Div1</div>
<div class="child">Div2</div>
<div class="child">Div3</div>
</div>
</body>
</html

CSS float

CSS float property is used to how element is floated within page

(OR) how element is displayed.

The value of float is,

1. Left
2. Right
3. Inline-start
4. Inline-end
5. Inherit
6. None

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Sticky Position Example</title>
<style>
.container1{
float:right;
width:200px;
height:200px;
background-color: aquamarine;
}
.container2{
float:left;
width:200px;
height:200px;
background-color: aquamarine;
}
.container3{
float:left;
width:700px;
height:200px;
background-color: aquamarine;
margin-left: 150px;

}
.container4{
float:none;
width:200px;
height:200px;
background-color: aquamarine;
}

</style>
</head>
<body>
<div class="container1">
Container1
</div>
<div class="container2">
Container2
</div>
<div class="container3">
Container3
</div>
<div class="container4">
Container4
</div>
</body>
</html>
The z-index property in CSS controls the stacking order of positioned elements. It determines which
elements appear on top of others when they overlap. This property only works on elements that have a
position value other than static (i.e., relative, absolute, fixed, or sticky).

Key Points About z-index

1. Stacking Context:

o Stacking Context: An element with a z-index value creates a new stacking context. This
means it will be stacked relative to other elements within the same stacking context, not
necessarily to the entire document.

Positive and Negative Values:

 Positive Values: Elements with a higher z-index value will be stacked above those with lower
values.

 Negative Values: Elements with negative z-index values will be stacked below those with positive
values or the default stacking order.

Example

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Z-Index Example</title>

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

</head>

<body>

<div class="box box1">Box 1</div>

<div class="box box2">Box 2</div>

<div class="box box3">Box 3</div>

</div>

</body>
</html>

Styles.css

.container {

position: relative;

width: 200px;

height: 200px;

.box {

position: absolute;

width: 100px;

height: 100px;

color: white;

text-align: center;

line-height: 100px; /* Center text vertically */

.box1 {

background-color: red;

top: 10px;

left: 10px;

z-index: 1; /* Stacks above elements with lower z-index */

.box2 {

background-color: green;

top: 30px;

left: 30px;
z-index: 3; /* Stacks above box1 */

.box3 {

background-color: blue;

top: 50px;

left: 50px;

z-index: 2; /* Stacks above box1 but below box2 */

How to Create Overlay Effect?

To create an overlay using CSS, follow these steps:

 Create the Container: Use a container element to hold the content you want to overlay. A
container can be div element, span element or even an image.

 Set Up the Positioning: Make the container position: relative so that any absolutely positioned
elements inside it will be positioned relative to this container.

 Add the Overlay Element: Inside the container, add another element (the overlay) and
set position: absolute to ensure it covers the entire container. Also make sure the overlay's top,
left properties are set to 0 and width, height properties are set to 100%, so it fully covers the
container.

 Style the Overlay: Set the background color of the overlay using rgba() function to give a semi-
transparent effect. And initially, set the opacity of the overlay to 0 to make it invisible by default.

 Add Hover Effect: Use hover pseudo-class to the overlay container to change the overlay's
opacity from 0 to 1 when user moves mouse over container.

Example

<!DOCTYPE html>
<html lang="en">

<head>
<style>
.container {

position: relative;

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(7, 250, 7, 0.5);
opacity: 0;
transition: opacity 1s ease;

.overlay-container:hover .overlay {
opacity: 1;
}

</style>
</head>

<body>
<div class="container">
<div class="overlay-container">
<img src="images/moto.jpg" alt="Image">
<div class="overlay">
Learn CSS
</div>
</div>
</div>

</body>
</html>
The CSS transition property is used to create smooth,
animated changes between different states of an element.
It allows you to specify which CSS properties should
animate, how long the transition should last, the timing
function that controls the speed of the transition, and any
delay before the transition starts.
Key Concepts
1. Properties to Animate: You can specify specific CSS
properties (like background-color, width, etc.) that you
want to transition. Alternatively, you can use all to
apply transitions to every animatable property.
2. Duration: This defines how long the transition takes
to complete. It can be specified in seconds (s) or
milliseconds (ms).
3. Timing Function: This defines the acceleration curve
of the transition. Common options include:
o ease: Starts slow, speeds up, then slows down.
o linear: Constant speed throughout.
o ease-in: Starts slow and speeds up.
o ease-out: Starts fast and slows down.
o ease-in-out: Starts and ends slow, with a faster
middle.
4. Delay: This specifies a delay before the transition
starts, allowing for timing adjustments.

1. Background Color Transition

<div class="color-box"></div>
.color-box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s ease;
}

.color-box:hover {
background-color: green;
}

2. Width and Height Transition

.size-box {
width: 100px;
height: 100px;
background-color: orange;
transition: width 0.4s ease, height 0.4s ease;
}

.size-box:hover {
width: 150px;
height: 150px;
}
3. Opacity Transition

.fade-box {
width: 100px;
height: 100px;
background-color: purple;
opacity: 1;
transition: opacity 0.6s ease;
}

.fade-box:hover {
opacity: 0.5;
}
4. Transform Transition

.transform-box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.3s ease-in-out;
}
.transform-box:hover {
transform: rotate(45deg) scale(1.1);
}
5. Multiple Properties Transition

.multi-box {
width: 100px;
height: 100px;
background-color: teal;
transition: background-color 0.5s ease, transform 0.3s
ease;
}

.multi-box:hover {
background-color: yellow;
transform: translateY(20px);
}
6. Delay Transition

.delay-box {
width: 100px;
height: 100px;
background-color: pink;
transition: background-color 0.5s ease 0.2s; /* 0.2s delay
*/
}

.delay-box:hover {
background-color: lightblue;
}
7. Using all for Simplicity

.all-box {
width: 100px;
height: 100px;
background-color: lightgreen;
transition: all 0.5s ease;
}

.all-box:hover {
background-color: lime;
width: 120px;
height: 120px;
}
The CSS transform property is used to apply various
transformations to an element, allowing you to change its
size, shape, position, and orientation. This property can be
used for effects like rotation, scaling, translation, and
skewing, enhancing the visual dynamics of web pages.

Syntax

transform: transform-function(value);
Common Transform Functions
1. Translate: Moves an element from its current
position.
o Syntax: translate(x, y)
o Example:

transform: translate(50px, 100px);

2. Scale: Changes the size of an element.
o Syntax: scale(sx, sy)
o Example:

transform: scale(1.5, 2); /* 1.5 times width, 2 times height

*/
3. Rotate: Rotates an element around a specified point.
o Syntax: rotate(angle)
o Example:

transform: rotate(45deg);
4. Skew: Distorts the shape of an element along the X
and Y axes.
o Syntax: skew(x-angle, y-angle)
o Example:

transform: skew(30deg, 20deg);

5. Perspective: Applies a perspective view to the
transformed element.
o Syntax: perspective(value)
o Example:

transform: perspective(500px) rotateY(30deg);

Combining Transform Functions
You can combine multiple transform functions in one
transform property by separating them with spaces:

transform: translate(50px, 100px) scale(1.5) rotate(30deg);

Example Usage
example that uses the transform property along with a
transition:

.transform-box {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 0.3s ease;
}

.transform-box:hover {
transform: translate(20px, 20px) rotate(45deg) scale(1.2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.color-box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 2.5s ease;
}
.color-box:hover {
background-color: green;
}
.size-box {
width: 100px;
height: 100px;
background-color: orange;
transition: width 0.4s ease, height 0.4s ease;
}
.size-box:hover {
width: 150px;
height: 150px;
}
.fade-box {
width: 100px;
height: 100px;
background-color: purple;
opacity: 1;
transition: opacity 0.6s ease;
}
.fade-box:hover {
opacity: 0.5;
}
.transform-box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s ease-in-out;
}

.transform-box:hover {
transform: rotate(180deg) scale(2.0,2.0);
}
.multi-box {
width: 100px;
height: 100px;
background-color: teal;
transition: background-color 0.5s ease, transform 0.3s ease;
}
.multi-box:hover {
background-color: yellow;
transform: translateX(20px);
}
.delay-box {
width: 100px;
height: 100px;
background-color: pink;
transition: background-color 0.5s ease 1s; /* 0.2s delay */
}
.delay-box:hover {
background-color: lightblue;
}
.all-box {
width: 100px;
height: 100px;
background-color: lightgreen;
transition: all 0.5s ease;
}

.all-box:hover {
background-color: lime;
width: 120px;
height: 120px;
}
.transform-box {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 0.3s ease;
}
.transform-box:hover {
transform: translate(50px, 20px) rotate(45deg) scale(1.2);
}

</style>
</head>
<body>
<div class="color-box"></div>
<div class="size-box"></div>
<div class="fade-box"></div>
<div class="transform-box">Text</div>
<div class="multi-box"></div>
<div class="delay-box"></div>
<div class="all-box"></div>
<div class="transform-box"></div>

</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
width:100px;
height: 100px;
background-color: blue;
color:white;
font-size: 20px;
transition: color 1s ease, font-size 1s ease;
}
.btn:hover
{
color:red;
font-size: 10px;
}

</style>
</head>
<body>
<form>
<input type="button" value="Login" class="btn">
</form>
</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img
{
opacity: 0.5;
transition: opacity 0.5s ease, transform 0.5s ease;
}
img:hover
{
opacity: 1;
transform: translateX(100px);
}

</style>
</head>
<body>
<img src="images/kids-banner.avif">

</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img
{
opacity: 0.5;
transition: opacity 0.5s ease, transform 0.5s ease;
}
img:hover
{
opacity: 1;
transform: skewY(20deg);
}
</style>
</head>
<body>
<img src="images/kids-banner.avif">

</body>
</html>
The z-index property in CSS controls the stacking order of positioned elements.
It determines which elements appear on top of others when they overlap. This
property only works on elements that have a position value other than static
(i.e., relative, absolute, fixed, or sticky).

Key Points About z-index

1. Stacking Context:
o Stacking Context: An element with a z-index value creates a new
stacking context. This means it will be stacked relative to other
elements within the same stacking context, not necessarily to the
entire document.
Positive and Negative Values:
 Positive Values: Elements with a higher z-index value will be stacked
above those with lower values.
 Negative Values: Elements with negative z-index values will be stacked
below those with positive values or the default stacking order.

Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z-Index Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>
</body>
</html>

Styles.css
.container {
position: relative;
width: 200px;
height: 200px;
}

.box {
position: absolute;
width: 100px;
height: 100px;
color: white;
text-align: center;
line-height: 100px; /* Center text vertically */
}

.box1 {
background-color: red;
top: 10px;
left: 10px;
z-index: 1; /* Stacks above elements with lower z-index */
}

.box2 {
background-color: green;
top: 30px;
left: 30px;
z-index: 3; /* Stacks above box1 */
}

.box3 {
background-color: blue;
top: 50px;
left: 50px;
z-index: 2; /* Stacks above box1 but below box2 */
}

How to Create Overlay Effect?

To create an overlay using CSS, follow these steps:
 Create the Container: Use a container element to hold the content you
want to overlay. A container can be div element, span element or even
an image.
 Set Up the Positioning: Make the container position: relative so that any
absolutely positioned elements inside it will be positioned relative to this
container.
 Add the Overlay Element: Inside the container, add another element
(the overlay) and set position: absolute to ensure it covers the entire
container. Also make sure the overlay's top, left properties are set to 0
and width, height properties are set to 100%, so it fully covers the
container.
 Style the Overlay: Set the background color of the overlay
using rgba() function to give a semi-transparent effect. And initially, set
the opacity of the overlay to 0 to make it invisible by default.
 Add Hover Effect: Use hover pseudo-class to the overlay container to
change the overlay's opacity from 0 to 1 when user moves mouse over
container.

Example
<!DOCTYPE html>
<html lang="en">

<head>
<style>
.container {

position: relative;

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(7, 250, 7, 0.5);
opacity: 0;
transition: opacity 1s ease;

.overlay-container:hover .overlay {
opacity: 1;
}
</style>
</head>

<body>
<div class="container">
<div class="overlay-container">
<img src="images/moto.jpg" alt="Image">
<div class="overlay">
Learn CSS
</div>
</div>
</div>

</body>
</html>

CSS Overlay Top to Bottom Sliding

<!DOCTYPE html>
<html lang="en">

<head>
<style>
img {
width: 200px;
height: 200px;
margin-left: 40%;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .top-bottom {
opacity: 1;
height: 200px;
}
.top-bottom{
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 200px;
border-radius: 5px;
height: 0;
top: 0;
left: 40%;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2> Hover your cursor over the image.</h2>

<div class="overlay-container">
<imgsrc= "/css/images/tutimg.png">
<div class="top-bottom">
<h2> Top to Bottom Image Overlay </h2>
</div>
</div>
</body>

</html>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
img {
width:200px;
height:200px;
position:absolute;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}

.overlay-container:hover .top-bottom {
opacity: 1;
height: 200px;
}
.top-bottom{
position: absolute;
transition: 0.9s ease;
opacity: 0;
width: 200px;
height: 0;
background-color: #d346e6;
text-align: center;
color:black;
}
h2 {
text-align: center;
}
</style>
</head>

<body>
<div class="overlay-container">
<img src="images/kids-banner.avif">
<div class="top-bottom">
<h2> Top to Bottom Overlay </h2>
</div>
</div>
</body>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.overlay-container
{
width: 300px;
height:300px;
background-color: blue;
position: relative;
}
.overlay-container:hover .overlay{
opacity: 1;
height: 300px;
}
.overlay {
transition: 1s ease;
width:300px;
height:0px;
position: absolute;
background-color: brown;
opacity: 0;
}
</style>
</head>
<body>
<div class="overlay-container">
<div class="overlay">
<h2>Overlay</h2>
</div>
</div>

</body>

CSS Overlay Bottom to Top Sliding

<!DOCTYPE html>
<html lang="en">

<head>
<style>
img {
width: 200px;
height: 200px;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .bottom-top {
opacity: 1;
height: 200px;
}
.bottom-top {
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 200px;
border-radius: 5px;
height: 0;
bottom: 0;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>Hover your cursor over the image.</h2>
<div class="overlay-container">
<imgsrc= "/css/images/tutimg.png">
<div class="bottom-top">
<h2>Bottom to Top Image Overlay</h2>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.overlay-container
{
width: 300px;
height:300px;
background-color: blue;
position: relative;
}
.overlay-container:hover img{
opacity: 1;
height: 300px;
}

img {
width:300px;
height:0px;
position: absolute;
opacity: 0;
bottom:0px;
transition: 1s ease;
}
</style>
</head>
<body>
<div class="overlay-container">
<img src="images/kids-banner.avif">

</div>

</body>

CSS Overlay Left to Right Sliding

<!DOCTYPE html>
<html lang="en">

<head>
<style>
img {
width: 200px;
height: 200px;
}
.overlay-container {
position: relative;
width: 25%;
height: auto;
}
.overlay-container:hover .left-right {
opacity: 1;
width: 200px;
}
.left-right {
position: absolute;
transition: 0.9s ease;
opacity: 0.3;
width: 0;
border-radius: 5px;
height: 200px;
top: 0;
left: 0;
background-color: #d346e6;
text-align: center;
color: #ffffff;
}
h2 {
text-align: center;
}
</style>
</head>

<body>
<h2>Hover your cursor over the image.</h2>
<div class="overlay-container">
<imgsrc="/css/images/tutimg.png">
<div class="left-right">
<h2>Left to Right Image Overlay</h2>
</div>
</div>
</body>

</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.overlay-container
{
width:300px;
height:300px;
position: relative;
background-color: blueviolet;
}
.overlay-container:hover .overlay {
width:300px;
opacity: 1;
}
.overlay
{
height:300px;
position: absolute;
left:0px;
width:0px;
background-color:brown;
transition: 1s ease;
opacity: 0;

}
</style>
</head>
<body>
<div class="overlay-container">
<div class="overlay">
<h2>Left to Right</h2>
</div>
</div>
</body>

Example of right to left

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.overlay-container
{
width:300px;
height:300px;
position: relative;
background-color: blueviolet;
}
.overlay-container:hover .overlay {
width:300px;
opacity: 1;
}
.overlay
{
height:300px;
position: absolute;
right:0px;
width:0px;
background-color:brown;
transition: 1s ease;
opacity: 0;
}
</style>
</head>
<body>
<div class="overlay-container">
<div class="overlay">
<h2>Left to Right</h2>
</div>
</div>
</body>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.overlay-container
{
width:300px;
height:300px;
position: relative;
background-color: blueviolet;
}
.overlay-container:hover .overlay{
transition:2s ease;
transform: rotate(360deg);
opacity: 1;
}
.overlay
{
width:300px;
height:300px;
position: absolute;

background-color: brown;

opacity: 0;
}
</style>
</head>
<body>
<div class="overlay-container">
<div class="overlay">
<h2>Left to Right</h2>
</div>
</div>
</body>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.overlay-container
{
width:300px;
height:300px;
position:relative;
background-color: rgb(251, 255, 0);
}
img {
position: absolute;
top:50px;
left:100px;
width:100px;
height:100px;

}
h2
{
position: absolute;
bottom: 50px;
left: 30px;
}
.overlay
{
opacity: 0;
background-color: bisque;
width:300px;
height:300px;
}
.overlay-container:hover .overlay {
opacity: 1;
transition: 0.1s ease;
}
</style>
</head>
<body>
<div class="overlay-container">
<img src="images/chennai.png">
<h2> Chennai Super Kings</h2>
<div class="overlay">
<img src="images/iplcup.jpg">
</div>

</div>
</body>
CSS Slide Show

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}

/* Slideshow container */
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}

/* Slides */
.mySlides {
display: none;
padding: 80px;
text-align: center;
}

/* Next & previous buttons */

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */

.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-

through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
color: white;
}

/* The dot/bullet/indicator container */

.dot-container {
text-align: center;
padding: 20px;
background: #ddd;
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */

.active, .dot:hover {
background-color: #717171;
}

/* Add an italic font style to all quotes */

q {font-style: italic;}

/* Add a blue color to the author */

.author {color: cornflowerblue;}
</style>
</head>
<body>

<div class="mySlides">
<q>I love you the more in that I believe you had liked me for
my own sake and for nothing else</q>
<p class="author">- John Keats</p>
</div>

<div class="mySlides">
<q>But man is not made for defeat. A man can be destroyed
but not defeated.</q>
<p class="author">- Ernest Hemingway</p>
</div>

<div class="mySlides">
<q>I have not failed. I've just found 10,000 ways that won't
work.</q>
<p class="author">- Thomas A. Edison</p>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>

</div>

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<style>

.slideshow-container
{
position: relative;

}
.mySlides
{
display:none;
}
img {
width:100%;
height: 500px;
}
.prev, .next {

position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color:black;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}

</style>
</head>
<body>

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

}
</script>
</body>
</html>
JavaScript History, Versions

What is JavaScript?

JavaScript, a high-level, dynamic, and interpreted programming language,

enabling interactive and dynamic web pages.

JavaScript is a high level programming language, all high level languages

are in simple english and portable.

JavaScript is interpreted programming language, javascript code is

translated every time before execution. It is used interpreter as
translator. This interpreter is called javascript engine.

Javascript is dynamically typed programming language.

Developer and Initial Development

Developer: JavaScript was created by Brendan Eich in 1995 while he was

working for Netscape Communications Corporation.
Purpose: The initial purpose was to develop a language that could build
dynamic web pages that could react to user input without needing to
reload. This was part of the broader initiative to enhance web
capabilities for the Netscape Navigator browser, making it more
competitive against Internet Explorer by Microsoft.

Early Versions and History

Mocha: The project’s original name was Mocha, later renamed to LiveScript
during its development in September 1995.
JavaScript: In December 1995, Netscape Navigator 2.0 Beta 3 introduced the
language under the name JavaScript, capitalizing on the popularity of
Java, although the two languages are distinct and were developed
independently.

Standardization and Evolution

ECMAScript: To standardize JavaScript, Netscape handed it over to ECMA
International, leading to the creation of the ECMAScript (ES) standard in
1997. The first edition of ECMAScript laid the groundwork for future
versions.

The standard of scripting languages like JavaScript is ECMAScript.

ECMAScript. The full form of ECMA is European Computer Manufacturer's
Association. ECMAScript is a Standard for scripting languages such as
JavaScript, JScript, etc. It is a trademark scripting language
specification.

ES2 and ES3: Released in 1998 and 1999, respectively, these versions
introduced minor improvements and new features, with ES3 being
particularly notable for its regular expressions, try/catch exception
handling, and more.
Current Version of ECAMScript is ECMAScript2023
ES14 ECMAScript 2023

Why JavaScript?

==> JavaScript is used for developing dynamic web pages

==> JavaScript is used for making changes during runtime time
Adding elements
Removing elements
Styling elements
==> JavaScript is used for input validations
Reading input data and performing operations
==> JavaScript is used for interacting with browser(browser functionality)
==> JavaScript is used for interactiing with
1. Web Page
2. Browser
==> Creating interactive webpages

Javascript is an embeded language.

Javascript is inserted within HTML and executed browser.
To execute javascript, the browser required Javascript engine.

List of Javascript engines

1. Chakra (Micrsoft Edge)

2. V8 (Google Chrome)
3. SpiderMonkey (Mozilla)
4. Javascriptcode (safari)

How to include javascript within HTML?

Javascript can be included within HTML using <script> tag.

This tag can be used within,

1. head
2. body

Syntax:
<script>
javascript
</script>

Note: every statement in javascript is endwith ;

How to include javascript within HTML?
Javascript can be included within HTML using <script> tag.

This tag can be used within,

1. head
2. body

Syntax:
<script>
javascript
</script>

Note: every statement in javascript is endwith ;

Javascript code within <head>

The web page is divided into two parts

1. Head
2. Body
When webpage is loaded, browser executes head and after
execution of head, it executes body.
Head is executed browser only once.
Real time applications include java script within head.

Syntax:
<head>
<script language=”javascript”>
Statement-1;
Statement-2;
</script>
</head>

Language is an attribute of script tag.

This attribute define which scripting language used for writing
script.

Javascript code within body

The content of body is loaded more than one time
<body>
<script>
Statement-1;
Statement-2;
<script>
<body>

External java script code (.js)

External java script file, provides reusability between web pages.

Syntax:
<script src=”path”>

</body>
</html>

Java script Language Fundamentals

1. Keywords
2. Identifiers
3. Datatypes
4. Literals
5. Operators

Keywords
Keywords are reserved words, the meaning of these words are
reserved by java script translator. These are predefined words or
language related words

List of Keywords

while,case,class,void,function,instanceof
throw,export,delete,catch,private,package
true,debugger,extends,default,interface,super
with,enum,if,return,switch,try
let,yield,typeof,public,for,static
new,else,finally,false,import,var
do,protected,null,in,implements,this
await,const,continue,break

Identifier
Identifiers are user defined words, which are used for identifying
programming elements.

1. Variable name
2. Constant name
3. Function name
4. Class name

Identifier is a user defined word, which is created using alphabets

(a-z,A-Z),digits(0-9) and special character _,$

Rules for defining identifiers

1. Keywords cannot used as identifiers
if=10
Uncaught SyntaxError: Unexpected token '='
while=1
Uncaught SyntaxError: Unexpected token
2. There should not be any space within identifier

student rollno=1
VM131:1 Uncaught SyntaxError: Unexpected identifier 'rollno'

Javascript is a case-sensitive language and it finds the difference

between uppercase and lowercase

Example:
a=10
10
A=20
20
a
10
A
20

3. Identifier should not start with digit

1a=10
VM417:1 Uncaught SyntaxError: Invalid or unexpected token
a1=10
10
a2=30
30
4. Identifier allows only two special characters _,$

_=100
100
console.log(_)
VM570:1 100
undefined
$=200
200
console.log($)
VM647:1 200
undefined
amt$=100
100
console.log(amt$)
VM730:1 100

Literals and Data types

Any programming language, data is represented using data types.
Data is represented in memory using data type.
Java script is a dynamically typed programming language.
The type of variable is not known at compile time, it is known
runtime.

Java Script data types

1. number

This data type is used for representing numeric value in java

script.
1. Int
2. Float
Example:
a=10
10
typeof a
'number'
c=1.5
1.5
typeof c
'number'

x=9999999999999999999999999999999999999999999999
1e+46
y=99999999999999999999999999999999999999999999999999
9999999999999999999999999
1e+75
Java Script data types
1. number

This data type is used for representing numeric value in java

script.
1. Int
2. Float
Example:
a=10
10
typeof a
'number'
c=1.5
1.5
typeof c
'number'

x=9999999999999999999999999999999999999999999999
1e+46
y=99999999999999999999999999999999999999999999999999
9999999999999999999999999
1e+75

An integer is a numeric value without decimal places or fractional

part.
Example: whole numbers, even numbers, odd numbers,…
A float value is numeric value with decimal places or factional
part.
Example: 1.5,2.5,56.67

In java script integer and float values are represented using

“number” data type.

In java script variables are created using two keywords

1. let
2. var
What is a variable?
Variable is an identifier which is used for identifying value.
Variable is a named memory location.
Variable hold data or value.
Variable value can be changed.

let keyword

This keyword is used for creating or declaring variables.

This keyword is used for creating block level variables.
This scope of this variable within blocks but cannot accessible
outside block.

Syntax: let <variable-name>;  Declaration

Syntax: let <variable-name>=<value>  Initialization
Syntax: let <variable-name>,<variable-name>,<variable-
name>
Syntax: let <variable-name>=value,<variable-
name>=value

Example:
let x,y;

The values of x and y is undefined.

“undefined” is a keyword, which represent variable does not hold
any value.

Example:
let a; // Declaration
a=10 // Assignment
a=20 // Assignment

Example:
let x=100,y=200;
let p,q;

var
This keyword is used for creating variables.
This is used for creating global variables. These variables can be
accessible within block and outside the block.

Syntax:
var <variable-name>;

</body>
</html>

What is difference between let and var keyword?

Scope:
var: Declared variables have function scope, meaning they're
accessible within the entire function.
let: Declared variables have block scope, meaning they're only
accessible within the block where they're declared.

Hoisting:
var: Variables declared with var are hoisted to the top of their
scope, meaning they can be used before they're declared. This
can sometimes lead to unexpected behavior.
let: Variables declared with let are not hoisted. Using them before
they're declared will result in a ReferenceError.

Redeclaration:

var: You can redeclare variables using var within the same scope.
let: You cannot redeclare variables using let within the same
scope. This will result in a SyntaxError.

const keyword

“const” keyword is used for creating constants.

The value of constant is never changed.

Syntax: const <contant-name>=<value>;

Constant names are given in uppercase.

Example:
const PI=3.14;
console.log(PI);
PI=3.147; Syntax Error

What is difference between variable and constant?

The value of variable can be changed.
The value of constant is never changed.

String data type

In java script string is represented in three ways,
1. within double quotes “ “
2. within single quotes ‘ ‘
3. within backticks quotes ` `

Java script does not support single character data type (there is
no char data type).

There is no difference between representing string in single and

double quotes.

This string with backticks can embed expression or value.

Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let a=100;
let b=200;
let c=a+b;
let s1=`sum of ${a} and ${b} is ${c}`;
alert(s1);
let s2='sum of ${a} and ${b} is ${c}';
alert(s2);
</script>
</head>
<body>

</body>
</html>

boolean data type

This data type is used for representing Boolean values.
In java script Boolean values are represented using two keywords.
1. true
2. false
Example:
let rollno=1;
let name=”naresh”;
let fee=5000.0;
let fee_paid=true;
typeof rollno  number
typeof name  string
typeof fee  number
typeof fee_paid  Boolean

null value

In java script null value is represented using object type.

“null” is keyword, which represent no value.

let name=null;
typeof name  object

Interaction with alert(),prompt() and confirm()

These functions are used for displaying message box and input
box.
Interaction with alert(),prompt() and confirm()
These functions are used for displaying message box and input
box.

alert()
This function display message window and waits until end user
press ok. Until this window is not closed end user cannot
communicate with web page.

Syntax: alert(message)

Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
alert("Alert Window")
</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>

prompt()

This function display input window, where end user input value.

Syntax: <variable-name>=prompt(”prompt message”, ”default”)

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let name=prompt("Name","Name");
alert(name)

</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>

Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let num1=prompt("Number1 ");
let num2=prompt("Number2 ");
let num3=num1+num2
alert(num3);
alert(typeof num1)

</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>

confirm()
This function display confirm window
The function confirm shows a modal window with a question and
two buttons: OK and Cancel.
This function returns Boolean value(True/False)
If end user click on Ok, it returns True
If end user click on Cancel, it returns False

Syntax: confirm(message)

Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let num1=prompt("Number1 ");
let num2=prompt("Number2 ");
let b=confirm("Add Numbers?");
if(b)
{
alert(num1+num2);
}
else
{
alert(num1+","+num2);
}

</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>
Type conversions or type casting

Type conversion or typecasting it is process converting one type

of value to another type.
This type conversion is done using type conversion functions.

1. Number()
2. Boolean()
3. String()

Number()
It is predefined function provided by java script.
This function is used to perform the following conversions
1. Integer to integer (number to number)
2. Float to float (number to number)
3. String to number
4. Boolean to number

Syntax: Number(value)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let a=Number(34);
let b=Number(1.5);
let c=Number("45");
let d=Number("1.5");
let e=Number(true);
let f=Number(false);
alert(a);
alert(b);
alert(c);
alert(d);
alert(e);
alert(f);
let g=Number("a");
alert(g);
</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>

</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>

String()
String is a predefined function in java script.
This function is used to convert others types into string type.

Syntax: String(value)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let a=String(45);
let b=String(1.5);
let c=String("JS");
let d=String(true);
let f=String(false);
alert(a+b+c+d+f);

</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>

Boolean()
This function is used to convert other types into Boolean type
(true/false).

Syntax: Boolean(value)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let a=Boolean(1);
let b=Boolean(0);
alert(a);
alert(b);
let c=Boolean(100);
alert(c);
let d=Boolean(1.5);
alert(d);
let e=Boolean("true");
alert(e);
let f=Boolean("false");
alert(f);
let g=Boolean("A");
alert(g);

</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>
Operators

An operator is special symbol used for performing operations.

Java script operators are classified into different categories.

1. Arithmetic Operators
2. Assignment Operators
3. Comparison Operators
4. String Operators
5. Logical Operators
6. Bitwise Operators
7. Ternary Operators
8. Type Operators

Arithmetic Operators
These operators are used for perform arithmetic operations.

Operators Description
+ Adding and concatenation
- Subtraction
* Multiplication
/ Division
% Modular
** Power of

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let a=10;
let b=20;
let c=a+b;
alert(c);
let f1=1.5;
let f2=1.3;
let f3=f1+f2;
alert(f3);
let f4=a+f1;
alert(f4);
let x=15;
let y="20";
let z=x+y;
alert(z);
let p=f1+"1.2";
alert(p);
</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
alert(10+20);
alert(10-5);
alert(5*3);
alert(5/2);
alert(5%2);
alert(5**2);
</script>
</head>
<body>
<h1>JavaScript</h1>

</body>
</html>

Assignment Operators (OR) Update Operators

A single operator perform two operations

1. Binary Operation
2. Assignment

Operato Description
r
=
+=
-=
*=
/=
%=
**=
Assignment Operators (OR) Update Operators

A single operator perform two operations

1. Binary Operation
2. Assignment

Operato
r
=
+=
-=
*=
/=
%=
**=

Example
Js1.js Jstest3.html
let x=10; <!DOCTYPE html>
console.log(x); <html lang="en">
x+=5; <head>
console.log(x); <meta charset="UTF-8">
let y=5 <meta name="viewport"
console.log(y); content="width=device-width,
y-=2; initial-scale=1.0">
console.log(y); <title>Document</title>
let z=9; <script
console.log(z); src="/src/js1.js"></script>
z*=3 </head>
console.log(z); <body>
let a=6;
console.log(a); </body>
a/=3; </html>
console.log('a='+a);
let b=5;
b**=2;
console.log('b='+b);
Unary ++,-- operator

++ operator is used for incrementing value by 1

--operator is sued for decrementing value by 1

++opr  pre-increment
opr++  post-increment
opr--  post decrement
--opr  pre decrement

Js1.js Jstest4.html
let x=5; <!DOCTYPE html>
let y=x++; <html lang="en">
console.log(y); <head>
console.log(x); <meta charset="UTF-8">
<meta name="viewport"
let a=10; content="width=device-width,
let b=++a; initial-scale=1.0">
console.log(b); <title>Document</title>
console.log(a); <script
src="/src/js1.js"></script>
let c=8; </head>
console.log(c++); <body>
console.log(c);
</body>
let d=9; </html>
console.log(++d);

let p=5;
let q=--p;
console.log(q);

let e=9;
let f=e--;
console.log(e);
console.log(f);

let num=5;
num++;
console.log(num);

Logical Operators
These operators are used for combining two or more logical
expressions or boolean expressions.

Operator Description
&& Logical and operator
|| Logical or operator
! Logical NOT operator

Comparison Operators or Relational Operators

These operators are used for comparing values. These relational
operators return Boolean value (true/false).

Operat Description
or
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to

let a=10; <!DOCTYPE html>

let b=10; <html lang="en">
console.log(a==b); <head>
let c=10.0; <meta charset="UTF-8">
console.log(a==c); <meta name="viewport"
console.log(a===b); content="width=device-width,
console.log(a===c); initial-scale=1.0">
console.log(typeof a); <title>Document</title>
console.log(typeof b); <script
console.log(typeof c); src="/src/js1.js"></script>
</head>
let s1="A"; <body>
let x=65;
console.log(s1==x); </body>
console.log(s1===x); </html>

console.log(1==true);
console.log(0==false);
console.log(1===true);
console.log(0===false);

console.log(10>2);
let p=5;
console.log(++p>5);
console.log(10<2);
console.log(10<=10);
console.log(5>=4);

console.log(10>5 && 6>2); <!DOCTYPE html>

console.log(10>5 && 10>20); <html lang="en">
console.log(2>5 && 5>2); <head>
console.log(2>5 && 2>10); <meta charset="UTF-8">
<meta name="viewport"
console.log(10>5 || 6>2); content="width=device-width,
console.log(2>5 || 5>2); initial-scale=1.0">
<title>Document</title>
console.log(10!=20); <script
console.log(!(10>20)); src="/src/js1.js"></script>
console.log(!10); </head>
console.log(!0) <body>

</body>
</html>
Conditional operator
Conditional operator is ternary operator and required 3 operands.
Conditional operator is used for creating conditional expression.

Syntax: opr1?opr2:opr3

Opr1,Opr3 are executed based on the result of opr2

Opr2 is a Boolean expression or condition.
Switch statement

“switch” is keyword which represents selection statement.

This statement is used to execute block of statements based
selection of values or equality of values.

Syntax:
switch(variable/expression)
{
case <value>:
statement-1;
statement-2;
break;
case <value>:
statement-3
statement-4
break;
case <value>:
statement-5
statement-6:
break;
….
default:
statement-7
statement-8;
}

Switch statement read the value of variable or expression

compare with all the cases, if the value equal to any given case, it
execute that block and terminates.
If the value not equal to any case, it executes default case.

a=1 <!DOCTYPE html>

switch(a) <html lang="en">
{ <head>
case 1: <meta charset="UTF-8">
console.log("ONE"); <meta name="viewport"
break; content="width=device-width,
case 2: initial-scale=1.0">
console.log("TWO"); <title>Document</title>
break; <script
case 5: src="/src/js1.js"></script>
console.log("FIVE"); </head>
break; <body>
default:
console.log("Invalid no") </body>
</html>
}

Example:
let course=prompt("Enter Course");
switch(course)
{
case "java":
console.log("Java Fee 2000");
break;
case "python":
console.log("Python Fee 6000");
break;
case "oracle":
console.log("Oracle Fee 1000");
break;
default:
console.log("Invalid Course Name");
}

Looping Control Statements

Looping control statements are used to repeat one or more than

one statement number of times or until given condition.

Java script support two types of looping control statements

1. Entry controlled looping control statements
2. Exit controlled looping control statements

Entry control looping statements

1. while
2. for

In entry controlled, statements are executed after verifying

condition.

Exit control looping statements

1. do..while

In exit control loop, first executes statements and verify

condition.
In exit control loop, statements are executed at least once.

while loop
“while” is keyword, which represents looping statement.
While loop required 3 statements
1. initialization statement
2. condition
3. update statement

Syntax:

while(<condition>)
{
Statement-1;
Statement-2;
}

Statement-1,statement-2 are repeated until given condition is

True, when condition is False, stop executing statements.

Example:
let x=1; // initialization statement
while(x<=5) //condition
{
console.log("JAVASCRIPT");
++x;

Example:
// Script to count digits

let num=Number(prompt("Enter any number"));

let c=0;
while(num>0)
{
num=num/10;
num=Math.trunc(num);
c++;
}
console.log("Count of Digits "+c);
// Write script to find sum of digits
let num=Number(prompt("Enter any number "));
let s=0;
while(num>0)
{
let r=num%10;
s+=r;
num=Math.trunc(num/10);
}
console.log("Sum of digits "+s);

for loop
for loop is used to execute block of statements number of times.

Syntax:
for([initialization];[condition];[update])
{
Statement-1;
Statement-2;
}

Statement-1,statement-2 are repeated until given condition is

True.
for loop
for loop is used to execute block of statements number of times.

Syntax:
for([initialization];[condition];[update])
{
Statement-1;
Statement-2;
}

Statement-1,statement-2 are repeated until given condition is

True

Initialization is nothing but start value or initial value of condition

Condition is Boolean expression, represents how many time loop
has to be repeated
Update statement, which update condition. This statement
represents increment or decrement value.

If condition is not defined, default condition is True

for(let i=1;i<=10;i++)
{
console.log(i);
}
for(;;)
{
console.log("JAVASCRIPT");
}

// Write Script to find factorial of number

let num=Number(prompt("Enter any number"));
let fact=1;
for(let i=1;i<=num;i++)
{
fact*=i;
}
console.log("Factorial is "+fact);
// Write Script to find input number is prime not
let num=Number(prompt("Enter any number"));
let c=0;
for(let i=1;i<=num;i++)
{
if(num%i==0)
c+=1;
}
if(c==2)
console.log("Prime");
else
console.log("Not Prime");

do..while
do..while is exit control loop.
In exit control loop, the condition is verified after executing
statements.

Syntax:
do
{
Statement-1;
Statement-2;
}while(condition);

Java script repeat statement-1,statement-2 until given condition

is false.
Statement-1, statement-2 are executed at least one time.

// Write Script to find input number is factorial or not

let num=Number(prompt("Enter any number"));
let fact=1,i=1;
do
{
fact=fact*i;
i++;
}while(i<=num);
console.log(fact);
Nested Looping Statements

Nested means within, A looping statement within looping

statement is nested looping statements
1. Nested while
2. Nested for
3. Nested do..while

for(let j=1;j<=5;j++) // Outer loop

for(let i=1;i<=5;i++) // Inner loop
console.log(i);

// Write a script to generate prime numbers from 2 to 20

for(let num=2;num<=20;num++)
{
let c=0;
for(let i=1;i<=num;i++)
{
if(num%i==0)
c+=1;
}
if(c==2)
console.log(num);

}
// Write script to generate factorial of numbers from 1 to 5

for(let num=1;num<=5;num++)
{
let i=1;
let fact=1;
do
{
fact=fact*i;
i++;
}while(i<=num);
console.log(fact);
}

break, continue

break, continue are keywords, which represents branching

statements. These statements are used to control the execution
of looping statements.

Syntax-1: break;
Syntax-2: break <label>;
Syntax-1: continue;
Syntax-2: continue <label>;

break statement is used for terminating execution of current

loop(while, for, do..while)
continue statement is used for continue the execution of loop.

Example:
for(let i=1;i<=100;i++)
{
console.log("JAVASCRIPT");
if(i==5)
break;

Example:
for(let i=1;i<=50;i++)
{
if(i%2==0)
continue;

console.log(i);
}

Example:
// Prime Number
let num=Number(prompt("Enter any number "));
let c=0;
for(let i=1;i<=num;i++)
{
if(num%i==0)
c+=1;
if(c>2)
break;

}
if(c==2)
console.log("Prime");
else
console.log("Not Prime");

Label loop

A looping statement is given label.

This label is to identify looping statement.
This label is used by inner loop to control the execution of outer
loop.

Syntax:

<label-name>: looping statement

Example:
outer:for(let i=1;i<=5;i++)
{
for(let j=1;j<=5;j++)
{
console.log(j);
if(j==3)
continue outer;
}
}

Example:
outer:for(let i=1;i<=5;i++)
{
for(let j=1;j<=5;j++)
{
console.log(j);
if(j==3)
break outer;
}
}
Arrays in JavaScript

Array is a collection data type.

A single variable can hold multiple values using array data type.
In java script array can hold similar type values or different types
of values.
In java script array is dynamic in size (the size of array can be
incremented or decremented after creation).

How to create array?

Array object can be created in different ways
1. Using []
2. Using Array data type

Example
let a=[];
console.log(a);
console.log(typeof a);
let b=new Array();
console.log(b);
console.log(typeof b);
let c=new Array(5);
console.log(c);
console.log(typeof c);
console.log(c.length);
let d=Array();
console.log(d);

Example:
let a=[10,20,30,40];
console.log(a);
console.log(a.length);
a.length=10;
a.length=2;
let b=["HTML","JS","CSS"];
console.log(b);
let c=["HTML",5.1];
console.log(c);
How to read content of array?
1. Index
2. forEach() method of array

Reading using index

Index is an integer value, used to read and write elements of
array.
Each element in array is identified with unique number called
index.

Example:
let a=[10,20,30,40,50];
console.log(a[0]);
console.log(a[1]);
console.log(a[2]);
console.log(a[3]);
console.log(a[4]);

for(let i=0;i<a.length;i++)
console.log(a[i]);

for(let i=a.length-1;i>=0;i--)
console.log(a[i]);

forEach()
forEach method of array read each element from array perform
action or operation.

Syntax: array-object.forEach(callback-function)

Adding element within array

push(element) : This method is used to add or append element

within array.

Syntax: array-name.push(element)

Example:
let a=[];
console.log(a.length);
a.push(10);
a.push(20);
a.push(30);
console.log(a.length);
for(let i=0;i<a.length;i++)
console.log(a[i]);

Example:
let a=Array();
for(let i=0;i<5;i++)
{
ele=Number(prompt("Enter any number "));
a.push(ele);
}
console.log(a);

Replacing or updating elements

Replacing elements or values are done by using index.

Syntax: array-name[index]=value

Example
let a=[10,20,30,40,50];
console.log(a);
a[0]=100;
a[4]=500;
console.log(a);
a[5]=90;
console.log(a);
let b=[]
console.log(b);
b[0]=100;
console.log(b);
b[0]=200;
console.log(b);
b[1]=300;
console.log(b);

Removing elements from array

Removing elements from array is done using various methods

1. pop()

This method returns last element from array.

This method before removing, it returns value.

Example:
let a=[10,20,30,40,50];
console.log(a.length);
ele1=a.pop();
console.log(ele1);
console.log(a);
ele2=a.pop();
console.log(ele2);
console.log(a);

2. shift()
This method remove first element from array.
Example:
let a=[10,20,30,40,50];
console.log(a);
e1=a.shift();
console.log(e1);
console.log(a);

3. splice()
This method is used for deleting or removing more than one
element.
Syntax: splice(start,count)

Example:
let a=[10,20,30,40,50];
console.log(a);
e1=a.splice(2,3);
console.log(e1);
console.log(a);

Converting array to string

toString() method returns string representation of object.

Example:
let a=[10,20,30,40,50];
console.log(typeof a);
let b=a.toString()
console.log(typeof b);
console.log(typeof b[0]);
console.log(typeof a[0]);

Sorting elements of array

Array object provides a method called sort(), which sort the

elements of array in ascending or descending order.

Example:
let a=[5,2,8,4,7,1];
console.log(a);
a.sort()
console.log(a);
let b=["java","python","django"]
console.log(b);
b.sort()
console.log(b);
let c=[10,20,"20","30",30,"1"]
console.log(c);
c.sort()
console.log(c);

Example of slice() and reverse() method

let a=[5,2,8,4,7,1];
console.log(a);
a.reverse()
console.log(a);
b=a.slice(0,3);
console.log(b);

Functions in JavaScript

What is a function?
A function is self contained block, which contain set of instructions
to perform some operation.
A function is named block

Advantage of functions
1. Reusability : Functions allows to write code once and use
many times
2. Modularity : Dividing instructions according their
operations into small pieces
3. Readability : Easy to understand
4. Efficiency: It allows writing code once and using many time,
this avoid code redundancy.

Basic steps to work with functions

1. Writing function or Developing function
2. Calling function or invoking function

Writing function
In java script a function is defined or written using “function”
keyword.

Syntax:
function <function-name>([parameters])
{
Statement-1;
Statement2;
}

A function is defined,
1. Without parameters
2. With parameters
3. With return values
4. Without return values

If function required input to perform operation, it is defined with

parameters.
If function does not required input to perform operation, it is
defined without parameters.

A function is not executed automatically, if has to be called as an

executable statement.

</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
function add()
{
console.log("ADD Function");
}
function sub()
{
console.log("SUB Function");
}
function multiply()
{
console.log("MULTIPLY function")
}
add();
sub();
multiply()
</script>
</head>
<body>

</body>
</html>

Function with parameters receives values.

Parameters are local variables; these variables are used within
function but cannot accessible outside the function.
Function with parameters, receives any type of objects or values.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
function add(a,b)
{
let c=a+b;
console.log(c);
}
add(10,20);
add(1.5,1.6);
add("JS","CSS");
add(10,"JS");
add("JS",16.0);

</script>
</head>
<body>

</body>
</html>

</script>
</head>
<body>

</body>
</html>

Global Variables
Variables declared outside the function are called global
variables.
These variables can be accessible within one or more than one
function.

</script>
</head>
<body>

</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let a=100; // Global Variable
function fun1()
{
let a=200; // Local Variable
console.log(a);
}
fun1();
console.log(a);
</script>
</head>
<body>

</body>
</html>

If values for parameters are not given at the time of invoking or

calling function, java script assigns default values (undefined)

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>

function fun1(a,b,c)
{
console.log(a);
console.log(b);
console.log(c);
}
fun1();
fun1(10,20,30);
fun1(10,20);
fun1(10);
fun1(10,20,30,40,50);

</script>
</head>
<body>

</body>
</html>
Function with default parameters or parameters with
value

Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>

function fun1(a=null,b=null,c=null)
{
console.log(a);
console.log(b);
console.log(c);
}
fun1();
fun1(10);
fun1(10,20);
fun1(10,20,30);
function fun2(a=0,b=0)
{
console.log(a);
console.log(b);
}
fun2();
fun2(100);
fun2(100,200);

function fun3(a,b=10)
{
console.log(a);
console.log(b);
}
fun3(100);
fun3(100,200);
function fun4(b=10,a)
{
console.log(a);
console.log(b);
}
fun4(100);
fun4(100,200);

</script>
</head>
<body>

</body>
</html>

return keyword
A function receives values, if it is defined with parameters.
A receives values and perform operation and return value to
caller using return keyword.
return keyword
A function receives values, if it is defined with parameters.
A receives values and perform operation and return value to
caller using return keyword.

}
fun1()

</script>
</head>
<body>

</body>
</html>

Return keyword after returning value it terminates execution of

function.

</script>
</head>
<body>

</body>
</html>

</script>
</head>
<body>

</body>
</html>

arguments object or variable

arguments is a predefined variable in java script.

It is a local variable, this variable is used within function but
cannot used outside the function.
The values send to function are stored inside a predefined array
called arguments.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
function add()
{
let s=0;
for(let i=0;i<arguments.length;i++)
s+=arguments[i];
return s;
}
let res=add(10,20,30,40);
document.write(res);
let res1=add(10,20);
document.write(res1);
</script>
</head>
<body>

</body>
</html>
Callback functions

A JavaScript callback is a function which is to be executed after

another function has finished execution. A more formal definition
would be - Any function that is passed as an argument to another
function so that it can be executed in that other function is called
as a callback function.

Syntax:
function function-name(received-function)
{
received-function();

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
function calculator(a,b,calc)
{
let c=calc(a,b);
return c;
}
function add(a,b)
{
return a+b;
}
function sub(a,b)
{
return a-b;
}
let res1=calculator(10,20,add);
document.write(res1);
let res2=calculator(10,5,sub)
document.write(res2);

</script>
</head>
<body>

</body>
</html>

Arrow Function or Anonymous function

Arrow functions are anonymous functions means these functions

does not have any name.
In application development arrow functions are used as callback
functions (OR) function argument.
Arrow functions are also called function expressions.
This function is defined with parameters or without parameters.

Syntax: ([parameters])=> statement-1;

Syntax: ([parameters])=>{
Statement-1;
Statement-2;
Statement-3;
};

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let a=()=>document.write("Arrow Function<br>");
a();
a()
let b=(a,b)=>a+b;
let res=b(100,200);
document.write(res);
let c=()=>{
document.write("Statement-1<br>");
document.write("Statement-2<br>");
document.write("Statement-3<br>");

};
c();
let d=()=>{
let x=Number(prompt("First Number"));
let y=Number(prompt("Second Number"));
let z=x+y;
return z;

};
let res2=d();
document.write(res2);

</script>
</head>
<body>

</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let a=[10,20,30,40,50];
a.forEach((element)=>{
document.write(element+"<br>");
});
let s=0;
a.forEach((element)=>s=s+element);
document.write(s);

</script>
</head>
<body>

</body>
</html>
DOM (Document Object Model)

Java script is used for generating dynamic content or used add,

update or delete content of web page during runtime.
Java script is used input validations or read input data and
performing some operations.

How javascript communicate with webpage?

DOM stands Document Object Model, it is an API

(Application Programming Interface), used by java script to
communicate with web page.
DOM is hierarchy of HTML elements
DOM is created by browser (HTML parser, JavaScript Engine).
When webpage is loaded within browser, browser create DOM
For every page browser create DOM (It represents elements of
current page).

How javascript communicate with browser?

BOM (Browser Object Model), It is an API, used by java script to
communicate with Browser.

</script>
</head>
<body>
<input type="button" value="display" onclick="display()">
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>

<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>
<input type="button" value="Change" onclick="change()">
<script>
function change()
{
const element=document.getElementById("intro");
element.innerHTML="This is modified content";
const ele1=document.getElementById("demo");
ele1.innerHTML="<h1>This is DEMO </h1>";
}
</script>

</body>
</html>
manipulate HTML elements.

1. Finding HTML elements by id

2. Finding HTML elements by tag name
3. Finding HTML elements by class name
4. Finding HTML elements by CSS selectors
5. Finding HTML elements by HTML object collections
6. Finding HTML elements by Name

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using

the element id.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>

<p>This example demonstrates the <b>getElementsById</b>
method.</p>

document.getElementById("demo").innerHTML =
"The text from the intro paragraph is: " + element.innerHTML;

</script>

</body>
</html>

Finding HTML Elements by Tag Name

Syntax: document.getElementsByTagName(“tagname”)
This return array of tags/nodes/elements

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Tag Name.</p>

<p>This example demonstrates the
<b>getElementsByTagName</b> method.</p>

document.getElementById("demo").innerHTML = 'The text in first

paragraph (index 0) is: ' + element[0].innerHTML;

</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the
<b>getElementsByTagName</b> method.</p>
</div>

document.getElementById("demo").innerHTML =
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

</script>

</body>
</html>
manipulate HTML elements.

1. Finding HTML elements by id

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using

the element id.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>

<p>This example demonstrates the <b>getElementsById</b>
method.</p>

document.getElementById("demo").innerHTML =
"The text from the intro paragraph is: " + element.innerHTML;

</script>

</body>
</html>

Finding HTML Elements by Tag Name

Syntax: document.getElementsByTagName(“tagname”)
This return array of tags/nodes/elements

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Tag Name.</p>

<p>This example demonstrates the
<b>getElementsByTagName</b> method.</p>

document.getElementById("demo").innerHTML = 'The text in first

paragraph (index 0) is: ' + element[0].innerHTML;

</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the
<b>getElementsByTagName</b> method.</p>
</div>

document.getElementById("demo").innerHTML =
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

</script>

</body>
</html>

Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name,
use getElementsByClassName().

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Class Name.</p>

<p class="intro">Hello World!</p>
<p class="intro">This example demonstrates the
<b>getElementsByClassName</b> method.</p>

Finding HTML Elements by CSS Selectors

If you want to find all HTML elements that match a specified CSS
selector (id, class names, types, attributes, values of attributes,
etc), use the querySelectorAll() method.
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p class=”heading”>Finding HTML Elements by Query

Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the
<b>querySelectorAll</b> method.</p>

</body>
</html>

Finding HTML Elements by HTML Object Collections

finds the form element with id="frm1", in the forms collection,
and displays all element values:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements Using
<b>document.forms</b>.</p>

<form id="frm1" >

First name: <input type="text" name="fname"
value="Donald"><br>
Last name: <input type="text" name="lname"
value="Duck"><br><br>
<input type="submit" value="Submit">
</form>

<p>These are the values of each element in the form:</p>

</body>
</html>

The HTML DOM allows JavaScript to change the content of

HTML elements.

Changing HTML Content

The easiest way to modify the content of an HTML element is by
using the innerHTML property/attribute.
To change the content of an HTML element, use this syntax:
document.getElementById(id).innerHTML = new HTML
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript can Change HTML</h2>

<p id="p1">Hello World!</p>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Example:
<!DOCTYPE html>
<html>
<body>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<div id="d1"></div>
<script>
document.getElementById("p1").innerHTML="Paragraph1";
document.getElementById("p2").innerHTML="<h1>Topic1</h1>";
const s1=document.getElementById("p1").innerHTML;
const s2=document.getElementById("p2").innerHTML;
document.getElementById("p3").innerHTML=s1+s2;
document.getElementById("p3").innerHTML="<a
href=http://www.nareshit.com>NareshIt</a>";
document.getElementById("d1").innerHTML="<img
src=images/d.jpg>";
</script>
</body>
</html>
Changing the Value of an Attribute

To change the value of an HTML attribute, use this syntax:

document.getElementById(id).attribute = new value

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>The original image was smiley.gif, but the script changed it to

landscape.jpg</p>

</body>
</html>

Example:
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<img id="image" src="images/dhoni.png" width="160"
height="120">
<p id="p1" style="color:blue;">This is paragraph</p>
<script>
document.getElementById("image").src = "images/rraj.png";
document.getElementById("image").width="300";
document.getElementById("image").height="300";
document.getElementById("p1").style="color:green";
</script>
</body>
</html>
To add a new element to a webpage using JavaScript, you can follow these steps:

1. Create the new element.

2. Set any attributes or content for the element.

3. Append the new element to an existing element in the DOM.

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Add Element Example</title>

</head>

<body>

<h1>My Webpage</h1>

<button id="addElement">Add Element</button>

</div>

document.getElementById('addElement').addEventListener('click', function() {

// Step 1: Create a new div element

Const newDiv = document.createElement('div');

// Step 2: Set content or attributes for the new element

newDiv.textContent = 'This is a new div element!';

newDiv.style.border = '1px solid black';

newDiv.style.padding = '10px';

newDiv.style.marginTop = '10px';

// Step 3: Append the new element to the container

const container = document.getElementById('container');

container.appendChild(newDiv);

});

</script>

</body>

</html>

Example: Applying CSS Styles Using JavaScript

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Dynamic CSS with JavaScript</title>

<style>

#container {

margin-top: 20px;

padding: 10px;

border: 1px solid #ccc;

max-width: 400px;

</style>

</head>

<body>

<h1>Add a Styled Box</h1>

<button id="addBox">Add Styled Box</button>

document.getElementById('addBox').addEventListener('click', function() {

// Step 1: Create a new <div> element

constnewBox = document.createElement('div');
// Step 2: Set some styles directly using JavaScript

newBox.style.width = '100%';

newBox.style.height = '100px';

newBox.style.backgroundColor = 'lightblue';

newBox.style.border = '2px solid #007BFF';

newBox.style.borderRadius = '5px';

newBox.style.marginTop = '10px';

newBox.style.display = 'flex';

newBox.style.alignItems = 'center';

newBox.style.justifyContent = 'center';

newBox.style.fontSize = '20px';

newBox.style.color = '#333';

// Step 3: Set text content for the new element

newBox.textContent = 'This is a styled box!';

// Step 4: Append the new element to the container

const container = document.getElementById('container');

container.appendChild(newBox);

});

</script>

</body>

</html>

Example: Simple Task List Application

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

#taskList {

margin-top: 20px;

list-style-type: none;

padding: 0;

li {

background: #f0f0f0;

margin: 5px 0;

padding: 10px;

border-radius: 5px;

</style>

</head>

<body>

<h1>My Task List</h1>

<input type="text" id="taskInput" placeholder="Enter a new task" />

<button id="addTaskButton">Add Task</button>

document.getElementById('addTaskButton').addEventListener('click', function() {

// Get the task input value

consttaskInput = document.getElementById('taskInput');

consttaskValue = taskInput.value.trim();
// Check if the input is not empty

if (taskValue) {

// Step 1: Create a new <li> element

constnewTask = document.createElement('li');

// Step 2: Set the text content of the new <li>

newTask.textContent = taskValue;

// Step 3: Append the new <li> to the <ul> task list

consttaskList = document.getElementById('taskList');

taskList.appendChild(newTask);

// Step 4: Clear the input field

taskInput.value = '';

} else {

alert('Please enter a task!');

});

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#taskList {
margin-top: 20px;
list-style-type: none;
padding: 0;
}
li {
background: #f0f0f0;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>My Task List</h1>
<input type="text" id="taskInput" placeholder="Enter a new task" />
<button id="addTaskButton">Add Task</button>
<ul id="taskList"></ul>

b.addEventListener("click",function(){
const intext=document.getElementById("taskInput");
const value=intext.value.trim();
if(value)
{
const listitem=document.createElement("li");
listitem.textContent=value;
const p=document.getElementById("taskList");
p.appendChild(listitem);
}
else
{
alert("Task is empty");
}
});
</script>
</body>
</html>

Example: Task List with Add and Remove Functionality

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

#taskList {
margin-top: 20px;

list-style-type: none;

padding: 0;

li {

background: #f0f0f0;

margin: 5px 0;

padding: 10px;

border-radius: 5px;

display: flex;

justify-content: space-between;

align-items: center;

button.remove {

background-color: red;

color: white;

border: none;

border-radius: 5px;

padding: 5px 10px;

cursor: pointer;

button.remove:hover {

background-color: darkred;

</style>

</head>

<body>

<h1>My Task List</h1>

<input type="text" id="taskInput" placeholder="Enter a new task" />

<button id="addTaskButton">Add Task</button>

document.getElementById('addTaskButton').addEventListener('click', function() {

// Get the task input value

consttaskInput = document.getElementById('taskInput');

consttaskValue = taskInput.value.trim();

// Check if the input is not empty

if (taskValue) {

// Step 1: Create a new <li> element

constnewTask = document.createElement('li');

// Step 2: Set the text content of the new <li>

newTask.textContent = taskValue;

// Step 3: Create a remove button

constremoveButton = document.createElement('button');

removeButton.textContent = 'Remove';

removeButton.className = 'remove';

// Step 4: Add an event listener to the remove button

removeButton.addEventListener('click', function() {

newTask.remove();

});

// Step 5: Append the remove button to the <li>

newTask.appendChild(removeButton);

// Step 6: Append the new <li> to the <ul> task list

consttaskList = document.getElementById('taskList');

taskList.appendChild(newTask);
// Step 7: Clear the input field

taskInput.value = '';

} else {

alert('Please enter a task!');

});

</script>

</body>

</html>

Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#taskList {
margin-top: 20px;
list-style-type: none;
padding: 0;
}
li {
background: #f0f0f0;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
button.remove {
background-color: red;
color: white;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}
button.remove:hover {
background-color: darkred;
}
button.update {
background-color:blue;
color: white;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
}

</style>
</head>
<body>
<h1>My Task List</h1>
<input type="text" id="taskInput" placeholder="Enter a new task" />
<button id="addTaskButton">Add Task</button>
<ul id="taskList"></ul>

// Check if the input is not empty

if (taskValue) {
// Step 1: Create a new <li> element
const newTask = document.createElement('li');

// Step 2: Set the text content of the new <li>

newTask.textContent = taskValue;

// Step 3: Create a remove button

const removeButton = document.createElement('button');
removeButton.textContent = 'Remove';
removeButton.className = 'remove';
const updateButton=document.createElement('button');
updateButton.textContent='Update';
updateButton.className='update';

// Step 4: Add an event listener to the remove button

removeButton.addEventListener('click', function() {
newTask.remove();
});
updateButton.addEventListener('click',function()
{
const taskInput1 = document.getElementById('taskInput');
const taskValue1 = taskInput1.value.trim();
newTask.textContent=taskValue1;
newTask.appendChild(removeButton);
newTask.appendChild(updateButton);
taskInput1.value='';

});

// Step 5: Append the remove button to the <li>

newTask.appendChild(removeButton);
newTask.appendChild(updateButton);

// Step 6: Append the new <li> to the <ul> task list

const taskList = document.getElementById('taskList');
taskList.appendChild(newTask);

// Step 7: Clear the input field

taskInput.value = '';
} else {
alert('Please enter a task!');
}
});
</script>
</body>
</html>

Form Validations

Java script can be used for performing form validations

Form validation is process of reading input data and performing
validations.

codewithsatishgupta
Form Validations

Java script can be used for performing form validations

Form validation is process of reading input data and performing
validations.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function login()
{
var uname=document.frm1.uname.value;
var pwd=document.frm1.pwd.value;
if(uname=='' || pwd=='')
alert("username or password should not be empty");
else
alert("valid input");

}
</script>
</head>
<body>
<form name="frm1">
UserName <input type="text" name="uname"><br>
Password <input type="password" name="pwd"><br>
<input type="button" value="Login" onclick="login()">
</form>
</body>
</html>

switch(course)
{
case "python":
document.write("Python Fee 3000 ");
break;
case "java":
document.write("Java Fee 2000");
break;
case "oracle":
document.write("Oracle Fee 1000");
break;
default:
alert("Invalid Course or Course is not selected");
}
}
</script>
</head>
<body>
<form name="frm1">
<h2>Courses</h2>
<input type="radio" name="course" value="java">Java<br>
<input type="radio" name="course" value="python">Python<br>
<input type="radio" name="course" value="oracle">Oracle<br>
<input type="button" value="find fee" onclick="findfee()">
<h2 name="fee"></h2>
</form>
</body>
</html>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function findfee()
{
var course=document.getElementsByName("course");
for(let i=0;i<course.length;i++)
alert(course[i].value);

}
</script>
</head>
<body>
<form name="frm1">
<h2>Courses</h2>
<input type="checkbox" name="course" value="java">Java<br>
<input type="checkbox" name="course" value="python">Python<br>
<input type="checkbox" name="course" value="oracle">Oracle<br>
<input type="button" value="find fee" onclick="findfee()">
<h2 name="fee"></h2>
</form>
</body>
</html>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Calculator</title>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button class="btn" value="7">7</button>
<button class="btn" value="8">8</button>
<button class="btn" value="9">9</button>
<button class="btn operator" value="/">÷</button>
<button class="btn" value="4">4</button>
<button class="btn" value="5">5</button>
<button class="btn" value="6">6</button>
<button class="btn operator" value="*">×</button>
<button class="btn" value="1">1</button>
<button class="btn" value="2">2</button>
<button class="btn" value="3">3</button>
<button class="btn operator" data-value="-">−</button>
<button class="btn" value="0">0</button>
<button class="btn operator" value="+">+</button>
<button class="btn operator" value="C">C</button>
<button class="btn operator" value="=">=</button>
</div>
</div>
<script src="/src/script.js"></script>
</body>
</html>

Styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}

.calculator {
max-width: 300px;
margin: auto;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}

#display {
width: 100%;
height: 40px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.btn {
padding: 20px;
font-size: 18px;
background-color: #00796b;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.btn:hover {
background-color: #004d40;
}

.operator {
background-color: #ff9800;
}

.operator:hover {
background-color: #e68a00;
}

Scripts.js
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.btn');

let currentInput = '';

let operator = '';
let firstOperand = null;

buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.value;

if (value === 'C') {

clear();
} else if (value === '=') {
calculate();
} else if (['+', '-', '*', '/'].includes(value)) {
setOperator(value);
} else {
appendToDisplay(value);
}
});
});

function appendToDisplay(value) {
currentInput += value;
display.value = currentInput;
}

function setOperator(value) {
if (currentInput === '') return;
if (firstOperand === null) {
firstOperand = parseFloat(currentInput);
} else {
calculate();
}
operator = value;
currentInput = '';
}

function calculate() {
if (firstOperand === null || currentInput === '' || operator === '') return;
const secondOperand = parseFloat(currentInput);
let result;

switch (operator) {
case '+':
result = firstOperand + secondOperand;
break;
case '-':
result = firstOperand - secondOperand;
break;
case '*':
result = firstOperand * secondOperand;
break;
case '/':
result = firstOperand / secondOperand;
break;
}

display.value = result;
firstOperand = result; // Allow chaining
currentInput = '';
operator = '';
}

function clear() {
currentInput = '';
operator = '';
firstOperand = null;
display.value = '';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Quiz App</title>
</head>
<body>
<div class="container">
<h1>Quiz App</h1>
<div id="quiz-container">
<div id="question"></div>
<div id="options"></div>
<button id="next-btn">Next</button>
</div>
<div id="result-container" class="hidden">
<h2>Your Score: <span id="score"></span></h2>
<button id="restart-btn">Restart Quiz</button>
</div>
</div>
<script src="/src/script.js"></script>
</body>
</html>

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}

.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

h1 {
margin-bottom: 20px;
}

#options {
margin: 20px 0;
}

button {
padding: 10px 15px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}

button:hover {
background-color: #0056b3;
}

.hidden {
display: none;
}

const questions = [
{
question: "What is the capital of France?",
options: ["Berlin", "Madrid", "Paris", "Lisbon"],
answer: "Paris"
},
{
question: "Which planet is known as the Red Planet?",
options: ["Earth", "Mars", "Jupiter", "Saturn"],
answer: "Mars"
},
{
question: "What is the largest ocean on Earth?",
options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
answer: "Pacific Ocean"
}
];

let currentQuestionIndex = 0;
let score = 0;

const questionElement = document.getElementById('question');

const optionsElement = document.getElementById('options');
const nextButton = document.getElementById('next-btn');
const resultContainer = document.getElementById('result-container');
const scoreElement = document.getElementById('score');
const restartButton = document.getElementById('restart-btn');

nextButton.addEventListener('click', () => {
const selectedOption = document.querySelector('input[name="option"]:checked');
if (selectedOption) {
const answer = selectedOption.nextElementSibling.textContent;
if (answer === questions[currentQuestionIndex].answer) {
score++;
}
currentQuestionIndex++;
loadQuestion();
}
});

restartButton.addEventListener('click', () => {
currentQuestionIndex = 0;
score = 0;
resultContainer.classList.add('hidden');
document.getElementById('quiz-container').classList.remove('hidden');
loadQuestion();
});

function loadQuestion() {
if (currentQuestionIndex<questions.length) {
const currentQuestion = questions[currentQuestionIndex];
questionElement.textContent = currentQuestion.question;
optionsElement.innerHTML = '';

currentQuestion.options.forEach(option => {
optionsElement.innerHTML += `
<div>
<input type="radio" name="option" id="${option}" />
<label for="${option}">${option}</label>
</div>
`;
});

} else {
showResult();
}
}

loadQuestion();
Project-1

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>E-Commerce App</title>

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

</head>

<body>

<h1>E-Commerce Store</h1>

Cart: <span id="cartCount">0</span> items

</div>

</header>

<main>

<section id="cartSection" style="display: none;">

<button id="checkoutButton">Checkout</button>

</section>

</main>

</body>

</html>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 20px;

background-color: #f8f9fa;

header {

display: flex;

justify-content: space-between;

align-items: center;

background: #343a40;

color: white;

padding: 10px 20px;

h1 {

margin: 0;

#cart {

font-size: 18px;

main {

margin-top: 20px;

#productList {

display: flex;

flex-wrap: wrap;

gap: 20px;

}
.product {

background: white;

border: 1px solid #ccc;

border-radius: 5px;

padding: 10px;

width: 200px;

.productimg {

width: 100%;

button {

background: #007bff;

color: white;

border: none;

padding: 10px;

border-radius: 5px;

cursor: pointer;

button:hover {

background: #0056b3;

#cartSection {

margin-top: 20px;

#cartItems {
list-style-type: none;

padding: 0;

const products = [

{ id: 1, name: 'Product 1', price: 29.99, img: 'https://via.placeholder.com/200' },

{ id: 2, name: 'Product 2', price: 19.99, img: 'https://via.placeholder.com/200' },

{ id: 3, name: 'Product 3', price: 39.99, img: 'https://via.placeholder.com/200' },

];

let cart = [];

function renderProducts() {

constproductList = document.getElementById('productList');

products.forEach(product => {

constproductDiv = document.createElement('div');

productDiv.className = 'product';

productDiv.innerHTML = `

<imgsrc="${product.img}" alt="${product.name}">

<h3>${product.name}</h3>

<p>Price: $${product.price.toFixed(2)}</p>

<button onclick="addToCart(${product.id})">Add to Cart</button>

productList.appendChild(productDiv);

});

function addToCart(productId) {

const product = products.find(p => p.id === productId);

cart.push(product);

document.getElementById('cartCount').textContent = cart.length;

renderCart();

function renderCart() {

constcartSection = document.getElementById('cartSection');

constcartItems = document.getElementById('cartItems');

cartItems.innerHTML = '';

cart.forEach((item, index) => {

const li = document.createElement('li');

li.textContent = `${item.name} - $${item.price.toFixed(2)}`;

cartItems.appendChild(li);

});

if (cart.length> 0) {

cartSection.style.display = 'block';

} else {

cartSection.style.display = 'none';

document.getElementById('checkoutButton').addEventListener('click', function() {

alert('Thank you for your purchase!');

cart = [];

document.getElementById('cartCount').textContent = '0';

renderCart();

});

renderProducts();
Project-2

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Banking App</title>

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

</head>

<body>

<h1>Simple Banking App</h1>

<h2>Your Balance: $<span id="balance">0.00</span></h2>

</div>

<input type="number" id="amountInput" placeholder="Enter amount" min="0">

<button id="depositButton">Deposit</button>

<button id="withdrawButton">Withdraw</button>

</div>

<div id="message" class="message"></div>

</div>

</body>

</html>
body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

.container {

background: white;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

width: 300px;

h1 {

text-align: center;

.balance-section {

text-align: center;

margin-bottom: 20px;

.form-section {

display: flex;

justify-content: space-between;

margin-bottom: 10px;
}

input {

padding: 10px;

width: 60%;

border: 1px solid #ccc;

border-radius: 5px;

button {

padding: 10px;

border: none;

background: #007bff;

color: white;

border-radius: 5px;

cursor: pointer;

button:hover {

background: #0056b3;

.message {

text-align: center;

margin-top: 10px;

color: red;

let balance = 0;

// Update the displayed balance

function updateBalance() {

document.getElementById('balance').textContent = balance.toFixed(2);

// Deposit function

function deposit() {

constamountInput = document.getElementById('amountInput');

const amount = parseFloat(amountInput.value);

if (amount > 0) {

balance += amount;

updateBalance();

displayMessage(`Successfully deposited $${amount.toFixed(2)}!`, 'success');

} else {

displayMessage('Please enter a valid amount to deposit.', 'error');

amountInput.value = '';

// Withdraw function

function withdraw() {

constamountInput = document.getElementById('amountInput');

const amount = parseFloat(amountInput.value);

if (amount > 0 && amount <= balance) {

balance -= amount;

updateBalance();

displayMessage(`Successfully withdrew $${amount.toFixed(2)}!`, 'success');

} else if (amount > balance) {

displayMessage('Insufficient funds!', 'error');

} else {

displayMessage('Please enter a valid amount to withdraw.', 'error');

amountInput.value = '';

// Display message

function displayMessage(message, type) {

constmessageDiv = document.getElementById('message');

messageDiv.textContent = message;

messageDiv.className = type === 'success' ? 'message success' : 'message error';

// Event listeners

document.getElementById('depositButton').addEventListener('click', deposit);

document.getElementById('withdrawButton').addEventListener('click', withdraw);

// Initial balance update

updateBalance();

Project-3

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

</head>
<body>

</div>

<div id="result-container" class="hidden">

<h2>Your Score: <span id="score"></span></h2>

<button id="restart-btn">Restart Quiz</button>

</div>

</body>

</html>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

.container {

max-width: 600px;

margin: auto;

background: white;

padding: 20px;

border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

text-align: center;

h1 {

margin-bottom: 20px;

#options {

margin: 20px 0;

button {

padding: 10px 15px;

border: none;

background-color: #007bff;

color: white;

border-radius: 4px;

cursor: pointer;

margin-top: 10px;

button:hover {

background-color: #0056b3;

.hidden {

display: none;

}
const questions = [

question: "What is the capital of France?",

options: ["Berlin", "Madrid", "Paris", "Lisbon"],

answer: "Paris"

question: "Which planet is known as the Red Planet?",

options: ["Earth", "Mars", "Jupiter", "Saturn"],

answer: "Mars"

question: "What is the largest ocean on Earth?",

options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],

answer: "Pacific Ocean"

];

let currentQuestionIndex = 0;

let score = 0;

constquestionElement = document.getElementById('question');

constoptionsElement = document.getElementById('options');

constnextButton = document.getElementById('next-btn');

constresultContainer = document.getElementById('result-container');

constscoreElement = document.getElementById('score');

constrestartButton = document.getElementById('restart-btn');

nextButton.addEventListener('click', () => {

constselectedOption = document.querySelector('input[name="option"]:checked');

if (selectedOption) {
const answer = selectedOption.nextElementSibling.textContent;

if (answer === questions[currentQuestionIndex].answer) {

score++;

currentQuestionIndex++;

loadQuestion();

});

restartButton.addEventListener('click', () => {

currentQuestionIndex = 0;

score = 0;

resultContainer.classList.add('hidden');

document.getElementById('quiz-container').classList.remove('hidden');

loadQuestion();

});

function loadQuestion() {

if (currentQuestionIndex<questions.length) {

constcurrentQuestion = questions[currentQuestionIndex];

questionElement.textContent = currentQuestion.question;

optionsElement.innerHTML = '';

currentQuestion.options.forEach(option => {

optionsElement.innerHTML += `

<div>

<input type="radio" name="option" id="${option}" />

<label for="${option}">${option}</label>

</div>

});
} else {

showResult();

function showResult() {

questionElement.textContent = '';

optionsElement.innerHTML = '';

resultContainer.classList.remove('hidden');

scoreElement.textContent = `${score} out of ${questions.length}`;

loadQuestion();

Project-4

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<title>Your Name | Portfolio</title>

</head>

<body>

<nav>

<ul>

<li><a href="#about">About</a></li>

<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<h2>About Me</h2>

<p>Write a brief introduction about yourself.</p>

</section>

<h2>Projects</h2>

<h3>Project Title</h3>

<p>Description of the project goes here.</p>

<a href="#">View Project</a>

</div>

</section>

<h2>Contact Me</h2>

<input type="text" id="name" placeholder="Your Name" required>

<input type="email" id="email" placeholder="Your Email" required>

<textarea id="message" placeholder="Your Message" required></textarea>

</form>

</section>

</footer>

</body>

</html>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

header {

background: #333;

color: white;

padding: 10px 0;

text-align: center;

header h1 {

margin: 0;

nav ul {

list-style: none;

padding: 0;

}
nav ul li {

display: inline;

margin: 0 15px;

nav ul li a {

color: white;

text-decoration: none;

section {

padding: 20px;

margin: 10px 0;

background: white;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

margin-top: 0;

.project {

margin: 20px 0;

footer {

text-align: center;

padding: 10px 0;

background: #333;
color: white;

position: relative;

bottom: 0;

width: 100%;

form {

display: flex;

flex-direction: column;

input, textarea {

margin: 10px 0;

padding: 10px;

border: 1px solid #ccc;

border-radius: 4px;

button {

padding: 10px;

background-color: #28a745;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

button:hover {

background-color: #218838;

}
document.getElementById('contact-form').addEventListener('submit', function(e) {

e.preventDefault(); // Prevent form submission

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const message = document.getElementById('message').value;

// Here you can add functionality to send this data to your server or an email API

alert(`Thank you, ${name}! Your message has been sent.`);

// Clear the form

this.reset();

});

Project-5

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<title>Calculator</title>

</head>

<body>

<input type="text" id="display" disabled>

<button class="btn" data-value="7">7</button>

<button class="btn" data-value="8">8</button>

<button class="btn" data-value="9">9</button>

<button class="btn" data-value="4">4</button>

<button class="btn" data-value="5">5</button>

<button class="btn" data-value="6">6</button>

<button class="btn operator" data-value="*">×</button>

<button class="btn" data-value="1">1</button>

<button class="btn" data-value="2">2</button>

<button class="btn" data-value="3">3</button>

<button class="btn operator" data-value="-">−</button>

<button class="btn" data-value="0">0</button>

<button class="btn operator" data-value="+">+</button>

<button class="btn operator" data-value="C">C</button>

<button class="btn operator" data-value="=">=</button>

</div>

</body>

</html>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

.calculator {

max-width: 300px;

margin: auto;

background: white;
border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

padding: 20px;

#display {

width: 100%;

height: 40px;

font-size: 24px;

text-align: right;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 4px;

padding: 5px;

.buttons {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 10px;

.btn {

padding: 20px;

font-size: 18px;

background-color: #00796b;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

}
.btn:hover {

background-color: #004d40;

.operator {

background-color: #ff9800;

.operator:hover {

background-color: #e68a00;

const display = document.getElementById('display');

const buttons = document.querySelectorAll('.btn');

let currentInput = '';

let operator = '';

let firstOperand = null;

buttons.forEach(button => {

button.addEventListener('click', () => {

const value = button.dataset.value;

if (value === 'C') {

clear();

} else if (value === '=') {

calculate();

} else if (['+', '-', '*', '/'].includes(value)) {

setOperator(value);

} else {

appendToDisplay(value);

});

function appendToDisplay(value) {

currentInput += value;

display.value = currentInput;

function setOperator(value) {

if (currentInput === '') return;

if (firstOperand === null) {

firstOperand = parseFloat(currentInput);

} else {

calculate();

operator = value;

currentInput = '';

function calculate() {

if (firstOperand === null || currentInput === '' || operator === '') return;

constsecondOperand = parseFloat(currentInput);

let result;

switch (operator) {

case '+':

result = firstOperand + secondOperand;

break;

case '-':

result = firstOperand - secondOperand;

break;

case '*':

result = firstOperand * secondOperand;

break;

case '/':

result = firstOperand / secondOperand;

break;

display.value = result;

firstOperand = result; // Allow chaining

currentInput = '';

operator = '';

function clear() {

currentInput = '';

operator = '';

firstOperand = null;

display.value = '';

Service Manual Honda Beat Fi
26% (23)
Service Manual Honda Beat Fi
2 pages
C# for Beginners: Learn in 24 Hours
From Everand
C# for Beginners: Learn in 24 Hours
Alex Nordeen
No ratings yet
Web Application Development
No ratings yet
Web Application Development
17 pages
SRS - How to build a Pen Test and Hacking Platform
From Everand
SRS - How to build a Pen Test and Hacking Platform
alasdair gilchrist
2/5 (1)
Ata 100 Code
100% (2)
Ata 100 Code
11 pages
HTML Notes
No ratings yet
HTML Notes
44 pages
Quick Quiz
No ratings yet
Quick Quiz
33 pages
HTMLpart 1
No ratings yet
HTMLpart 1
30 pages
Ui Complete Notes
No ratings yet
Ui Complete Notes
320 pages
HTML 1
No ratings yet
HTML 1
22 pages
IFT 203
No ratings yet
IFT 203
10 pages
WD Lab file Sample copy
No ratings yet
WD Lab file Sample copy
11 pages
full document
No ratings yet
full document
65 pages
HTML Notes Part - 1
No ratings yet
HTML Notes Part - 1
28 pages
HTML Notes Part-1
No ratings yet
HTML Notes Part-1
32 pages
C# and .NET TECHNOLOGIES notes
No ratings yet
C# and .NET TECHNOLOGIES notes
113 pages
WEB php_PROGRAMMIN2 SWE2
No ratings yet
WEB php_PROGRAMMIN2 SWE2
42 pages
CoreJava iNetSolv
67% (9)
CoreJava iNetSolv
191 pages
Core Java PDF
No ratings yet
Core Java PDF
191 pages
Chapter One Full
No ratings yet
Chapter One Full
44 pages
Unit 1
No ratings yet
Unit 1
35 pages
Lab Introduce Web
No ratings yet
Lab Introduce Web
23 pages
"Amity Aaroh Techfest Application" Is An Android Based Application Which Facilitates The User
No ratings yet
"Amity Aaroh Techfest Application" Is An Android Based Application Which Facilitates The User
19 pages
C# Jscript J#
No ratings yet
C# Jscript J#
27 pages
Give History of Web Development and Emphasis On Growth Rate of Web and Web Servers?
No ratings yet
Give History of Web Development and Emphasis On Growth Rate of Web and Web Servers?
7 pages
Unit-01 Introduction to Web Technologies (2)
No ratings yet
Unit-01 Introduction to Web Technologies (2)
6 pages
Army Report 1
No ratings yet
Army Report 1
14 pages
Lab Manual
No ratings yet
Lab Manual
10 pages
PHP Notes Free
No ratings yet
PHP Notes Free
10 pages
Hotel Managementfinal Report (Print)
No ratings yet
Hotel Managementfinal Report (Print)
59 pages
Internet:: Most Common Web Servers
No ratings yet
Internet:: Most Common Web Servers
4 pages
Chapter 5
No ratings yet
Chapter 5
12 pages
How Do Web Browsers Work
No ratings yet
How Do Web Browsers Work
5 pages
Unit 1 M
No ratings yet
Unit 1 M
63 pages
html ebook guide MERN
No ratings yet
html ebook guide MERN
55 pages
PPT-1 HTML
No ratings yet
PPT-1 HTML
113 pages
web designing 2024
No ratings yet
web designing 2024
19 pages
Unit-1
No ratings yet
Unit-1
27 pages
Tehnologii Web
No ratings yet
Tehnologii Web
215 pages
Network Application
No ratings yet
Network Application
65 pages
Computer Networks Lecture Notes: Course Code - Course Name
No ratings yet
Computer Networks Lecture Notes: Course Code - Course Name
57 pages
Maseno University Department of Information Technology CDIT 406: Web Authoring
No ratings yet
Maseno University Department of Information Technology CDIT 406: Web Authoring
7 pages
1-3 Web Application
No ratings yet
1-3 Web Application
40 pages
HTML Css Course
No ratings yet
HTML Css Course
90 pages
Unit-1 FSD
No ratings yet
Unit-1 FSD
50 pages
Abdulrahman Bajusair
No ratings yet
Abdulrahman Bajusair
7 pages
System Requirment Specification
No ratings yet
System Requirment Specification
9 pages
WP unit 1
No ratings yet
WP unit 1
10 pages
Interns Hal A
No ratings yet
Interns Hal A
19 pages
Web Programming Chapter 4
No ratings yet
Web Programming Chapter 4
20 pages
Training Report
No ratings yet
Training Report
28 pages
263 Exp-5 CNS
No ratings yet
263 Exp-5 CNS
7 pages
Module1 - Web Programming Fundamentals
No ratings yet
Module1 - Web Programming Fundamentals
33 pages
Unit 1-Intoduction To WWW & HTML Final
No ratings yet
Unit 1-Intoduction To WWW & HTML Final
67 pages
Csc132 (First Lecture Slide)
No ratings yet
Csc132 (First Lecture Slide)
13 pages
ajol-file-journals_493_articles_105727_submission_proof_105727-5821-286734-1-10-20140724-1
No ratings yet
ajol-file-journals_493_articles_105727_submission_proof_105727-5821-286734-1-10-20140724-1
12 pages
Full Stack Development Unit 1
No ratings yet
Full Stack Development Unit 1
22 pages
Chapter 10 Web Application
No ratings yet
Chapter 10 Web Application
11 pages
Unit1-WP
No ratings yet
Unit1-WP
93 pages
Professional Heroku Programming
From Everand
Professional Heroku Programming
Chris Kemp
4/5 (2)
Web Devlopment
From Everand
Web Devlopment
Netra
No ratings yet
ASP.NET For Beginners: The Simple Guide to Learning ASP.NET Web Programming Fast!
From Everand
ASP.NET For Beginners: The Simple Guide to Learning ASP.NET Web Programming Fast!
Tim Warren
No ratings yet
ATR Final Proposal PDF
No ratings yet
ATR Final Proposal PDF
2 pages
Full download Multiagent Systems second edition Gerhard Weiss pdf docx
100% (7)
Full download Multiagent Systems second edition Gerhard Weiss pdf docx
85 pages
Study of Mandibular Canine Index As A Sex Predictor in A Punjabi Population
No ratings yet
Study of Mandibular Canine Index As A Sex Predictor in A Punjabi Population
4 pages
Lesson-3 CVP
No ratings yet
Lesson-3 CVP
8 pages
AMO 2022 - Grade 8 (Russian + English)
100% (2)
AMO 2022 - Grade 8 (Russian + English)
24 pages
Flight Ticket
No ratings yet
Flight Ticket
2 pages
Kraft_pulp_mill_dregs_and_grits_as_permeable_react
No ratings yet
Kraft_pulp_mill_dregs_and_grits_as_permeable_react
11 pages
Poverty: The Double Burden of Malnutrition in Mothers and The Intergenerational Impact
No ratings yet
Poverty: The Double Burden of Malnutrition in Mothers and The Intergenerational Impact
13 pages
Botany First Year Ipe Vsaqs
No ratings yet
Botany First Year Ipe Vsaqs
4 pages
CH - 10 Training & Doping in Sports Class XI
No ratings yet
CH - 10 Training & Doping in Sports Class XI
16 pages
Consulting Analyst: About Company: Mckinsey & Company
No ratings yet
Consulting Analyst: About Company: Mckinsey & Company
2 pages
Sir Padampat Singhania Education Centre: Kamla Nagar, Kanpur
No ratings yet
Sir Padampat Singhania Education Centre: Kamla Nagar, Kanpur
4 pages
Iasimp qs035 - en P
No ratings yet
Iasimp qs035 - en P
50 pages
MCQ Cloud
No ratings yet
MCQ Cloud
9 pages
Monthly Test Form 4 Physics 20142
No ratings yet
Monthly Test Form 4 Physics 20142
8 pages
S1 Is YE Term Exam 2022 - Final Version
No ratings yet
S1 Is YE Term Exam 2022 - Final Version
19 pages
My Beloved OP
No ratings yet
My Beloved OP
1,042 pages
Marine Loading Arms - Kanon Loading Equipment
No ratings yet
Marine Loading Arms - Kanon Loading Equipment
5 pages
WORKSHOP DECEMBER 04 & 05-2024 -FINAL (1)
No ratings yet
WORKSHOP DECEMBER 04 & 05-2024 -FINAL (1)
9 pages
Buy ebook 3rd International Conference on the Application of Superabsorbent Polymers SAP and Other New Admixtures Towards Smart Concrete William P. Boshoff cheap price
100% (3)
Buy ebook 3rd International Conference on the Application of Superabsorbent Polymers SAP and Other New Admixtures Towards Smart Concrete William P. Boshoff cheap price
55 pages
Price and Specification Guide: The New Arteon and New Arteon Shooting Brake
No ratings yet
Price and Specification Guide: The New Arteon and New Arteon Shooting Brake
44 pages
Be - Tutorial 5 - Stu 2
No ratings yet
Be - Tutorial 5 - Stu 2
16 pages
Embedded Systems Firmware Demystified
67% (3)
Embedded Systems Firmware Demystified
69 pages
CBR Eng. Culture
100% (1)
CBR Eng. Culture
15 pages
SCF Deck PWC
No ratings yet
SCF Deck PWC
7 pages
BALTTRIB 2019 Programme FINAL
No ratings yet
BALTTRIB 2019 Programme FINAL
17 pages
Career Management-Career Cycles
0% (1)
Career Management-Career Cycles
8 pages
Ds LIFEBOOK U7312 APAC
No ratings yet
Ds LIFEBOOK U7312 APAC
4 pages