Scribd
Upload
4 views186 pages

HTML CSS JS

This document provides an overview of Full Stack Web Development, focusing on HTML5 and its features compared to HTML4. It covers essential elements such as the DOCTYPE declaration, the <html> and <head> sections, and various HTML tags, including meta tags and their significance for search engine optimization. Additionally, it discusses the structure of web pages, form attributes, and the importance of crawlability and indexability for web pages.

Uploaded by

chaudharyaman0520
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views186 pages

HTML CSS JS

This document provides an overview of Full Stack Web Development, focusing on HTML5 and its features compared to HTML4. It covers essential elements such as the DOCTYPE declaration, the <html> and <head> sections, and various HTML tags, including meta tags and their significance for search engine optimization. Additionally, it discusses the structure of web pages, form attributes, and the importance of crawlability and indexability for web pages.

Uploaded by

chaudharyaman0520
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Full Stack

Web
Development
Unit-1

By
Dr. Parul Madan
5/11/2026 2
5/11/2026 3
Sample Footer Text 5/11/2026 4
Sample Footer Text 5/11/2026 5
Sample Footer Text 5/11/2026 6
FSWD

Sample Footer Text 5/11/2026 7


Sample Footer Text 5/11/2026 8
MEAN Stack vs MERN Stack

Sample Footer Text 5/11/2026 9


FIRST LOOK AT HTML5

Remember the DOCTYPE declaration from XHTML?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"[Link]

In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

<!DOCTYPE html>

Just 15 characters!

The DOCTYPE tells the browser which type and version of document to
expect. This should be the last time the DOCTYPE is ever changed. From
now on, all future versions of HTML will use this same simplified declaration.
THE <HTML> ELEMENT

This is what the <html> element looked like in XHTML:

<html xmlns="[Link] xml:lang="en" lang="en">

Again, HTML5 simplifies this line:

<html lang="en">

The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it
can assist search engines and screen readers.

Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
THE <HEAD> SECTION

Here is a typical XHTML <head> section:


<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>

And the HTML5 version:

<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="[Link]">
</head>

Notice the simplified character set declaration, the shorter CSS stylesheet link
text, and the removal of the trailing slashes for these two lines.
BASIC HTML5 WEB PAGE

Putting the prior sections together, and now adding the <body> section and
closing tags, we have our first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="[Link]">
</head>

<body>
<p>HTML5 is fun!</p>
</body>

</html>

Let's open this page in a web browser to see how it looks…


Tags used in <head>
1. The <title> element is required and it defines the title of the document
2. The <style> element is used to define style information for a single
document
3. The <link> tag is most often used to link to external style sheets
4. The <meta> element is typically used to specify the character set, page
description, keywords, author of the document, and viewport settings
5. The <script> element is used to define client-side JavaScripts
6. The <base> element specifies the base URL and/or target for all relative
URLs in a page
<meta>
• The HTML <meta> tag provides metadata or information about the HTML
document. It includes information like character set, description, keywords, and
other important details. <meta> tags always go inside the <head> element

• It helps in defining the page’s title, encoding, author, and viewport settings, etc.
These tags are not visible on the web page but play a vital role in structuring and
categorizing content for browsers and search engines.
What Is Crawlability?
• The crawlability of a webpage refers to how easily search engines (like Google) can
discover the page.
• Google discovers webpages through a process called crawling. It uses computer
programs called web crawlers (also called bots or spiders). These programs follow
links between pages to discover new or updated pages.
• Indexing usually follows crawling.
What Is Indexability?
• The indexability of a webpage means search engines (like Google) are able to add
the page to their index.
• The process of adding a webpage to an index is called indexing. It means Google
analyzes the page and its content and adds it to a database of billions of pages
(called the Google index).
<meta>
Syntax:
<meta attribute-name="value">
Attributes:

Attribute Value Description


charset character_set Specifies the character encoding for the HTML document
content text Specifies the value associated with the http-equiv or name attribute
http-equiv content-security-policy Provides an HTTP header for the information/value of the content attribute
content-type
default-style
refresh
cookie
name application-name Specifies a name for the metadata
author
description
generator
keywords
viewport
revised
Meta Tags Google Supports
Meta tag name Description Example
description Provides a short description of the [Link] description is often used in the snippet shown in <meta name="description" content="Make your business
search results. visible online with 55+ tools for SEO, PPC, content, social
media, competitive research, and more.">
robots Controls how search engines crawl and index your pages. You can use “index” and “follow” to <meta name="robots" content="index,follow">
allow both actions. Or “noindex” and “nofollow” to prevent them. If you don’t specify anything,
“index” and “follow” are the default values.

googlebot Similar to robots, but specific to Google. <meta name="googlebot" content="index,follow">

google Disables some optional Google features for your site, such as the sitelinks search box that <metaname="google" content="nositelinkssearchbox">
allows users to search within your site from Google, and the Google text-to-speech
services that enable users to hear your webpages. The supported values are
“nositelinkssearchbox” and “nopagereadaloud.”

google-site-verification Verifies the ownership of the website for Google Search Console. <meta name="google-site-verification"
content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908v
VuFHs34=">
Content-Type and charset Specifies the content type and character set for the webpage. This is important for rendering <meta http-equiv="Content-Type" content="text/html;
non-ASCII characters correctly. charset=UTF-8">
refresh Tells the browser to automatically reload the page after a specified number of seconds. It can <meta http-equiv="refresh" content="5;
also be used to redirect the user to another URL after a certain time. url=[Link]

rating Indicates that a webpage contains explicit content. <meta name="rating" content="adult">
viewport Controls how the webpage is displayed on mobile devices <meta name="viewport" content="width=device-width, initial-
scale=1.0">
Examples
Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript">

Define a description of your web page:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Define the author of a page:

<meta name="author" content="John Doe">

Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

<meta http-equiv = "refresh" content = "5; url = [Link] />

<meta name = "revised" content = ”index, 3/7/2023" />

Setting the viewport to make your website look good on all devices:

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

Setting Cookies

<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08 -Aug-15 23:59:59 GMT;" />

Content-Type

<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />


Favicon
• A favicon is a small file containing the one or more icons which are used to
represent the website or a blog. It is also known as a tab icon, website icon, URL
icon, or a bookmark icon.

• This icon is actually displayed on the address bar, browser's tab, browser history,
bookmark bar, etc. The image of a favicon is in .ico file format. There are various
file formats, but .ico format is supported by all the browsers.
How to Create and insert a Favicon
Following are the steps for creating the favicon:
1. Click on the following URL, to create the favicon: [Link]
2. Once the favicon is successfully created, we can download the favicon by clicking on
the download favicon option.
3. After the downloading, a favicon with the name [Link] is available in the file system
drive.
4. Next, add a <link> element to your "[Link]" file, after the <title> element, like this:
<link rel="shortcut icon" href="[Link]" type="image/x-icon">
<link rel="shortcut icon" type="image/jpg" href="Favicon_Image_Location"/>
HTML Tag classification
Tags can be differentiated based on the purpose of usage. There are four types

1. Formatting Tags

• These are HTML tags of words or letters to control font size

• <font>, underline a part of a text <u>, making a text bold <b>…[Link] such as tables, div, span tags are used for layout and formatting of
content.

2. Page Structure tags

• Description, title, head, body etc are part of the page structure tags.

• They are part of the basic HTML page and does not directly affect the formatting of text or image.

3. Control Tags

• Form tags, Script tags, Radio buttons etc are part of the control tags.

• These tags are used to manage content or mange external scripts or libraries ( JQuery, Bootstrap)

4. Interactive Tags

• All form tags like input text box, drop -down list, radio buttons etc are used for interaction with a user.

• These tags can be formatted by using style properties.


Formatting Tags
• Formatting elements were designed to display special types of text:

• <b> - Bold text

• <strong> - Important text

• <i> - Italic text

• <em> - Emphasized text

• <mark> - Marked text

• <small> - Smaller text

• <del> - Deleted text

• <ins> - Inserted text

• <sub> - Subscript text

• <sup> - Superscript text

Sample Footer Text 5/11/2026 26


Sample Footer Text 5/11/2026 27
Feature HTML 4 HTML 5
Release Date 1997 October 2014

Doctype Lengthy and complex Simplified: <!DOCTYPE html>


Declaration
Vector Graphics Requires plug-ins like Adobe Flash Native support with <svg>

Audio/Video Requires external plugins (like Flash) Native support with <audio> and <video>
Support
Semantics Limited semantic elements Rich semantic elements
like <article>, <nav>, <section>, <header>, <footer>
APIs and DOM Limited API support Extensive APIs (offline storage, drag-drop, etc.)
Graphics Limited; mainly through external plugins Canvas API for 2D/3D graphics
Storage Cookies for client-side storage Local storage, session storage
Accessibility Basic Improved with new semantic elements
Browser Consistent across modern browsers Varies; older browsers require polyfills
Compatibility
Mobile Support Limited Enhanced, with features for mobile optimization
Form Controls Basic controls New form controls like calendar, date, time, color picker
Scripting Heavily reliant on external scripts More integrated scripting capabilities
Structure Less emphasis on document structure Strong focus on document structure

Sample Footer Text 5/11/2026 28


HTML4 vs HTML5 Page Structure

Sample Footer Text 5/11/2026 29


HTML
• Hyperlink

• Image

• List

• Table

• Form

• Frame

• Audio

• Video

• Canvas

• Map

Sample Footer Text 5/11/2026 30


hyperlink
<a href=" url “ target=“” > link text </a>

• The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it was clicked

• _blank - Opens the document in a new window or tab

• _parent - Opens the document in the parent frame

• _top - Opens the document in the full body of the window

Image as h yperlink

• <a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px ;heigh t:42px;">
</a>

Link With in Page

<h1 id=“book">Link Bookmark</h1>

<a href="#intro“>Introduction</a>

<a href=“[Link]#intro ">Introduction</a>

Sample Footer Text 5/11/2026 31


List
• Ordered
• Unordered
• Description

Sample Footer Text 5/11/2026 32


Table
• <table>
• <tr>
• <td> / <td>
• <thead>
• <tbody>
• <tfoot>
• <td colspan=“” rowspan=“”>
• <colgroup>
• <col span=“2”>

Sample Footer Text 5/11/2026 33


Form (HTML4 and HTML5)
• <form>
HTML5 form attributes

• placeholder.

• autofocus.

• autocomplete.

• required.

• Disabled / Readonly , checked

• List , datalist <input list=“”><datalist id=“”></datalist>

• pattern. <input type="text" id="country_code" name="country_code"


pattern="[A-Za-z]{3}" title="Three letter country code">

Sample Footer Text 5/11/2026 34


Form Validation(Regular Expression)
• 1. Repeaters ( *, +, and {min,max } )

• 2. Wildcard ( . ) The Regular expression .* will tell the computer that any character can be used
any number of times.

• 3. Optional character ( ? )

• 4. The caret ( ^ ) symbol ( Setting position for the match )

• 5. The dollar ( $ ) symbol

• 6. Character Classes

• 7. [^set_of_characters] Negation: [^abc] will match any character except a,b,c .

• 8. [first-last] Character range:

• 9. Grouping Characters ( ) ([a-b] \b+)

• 10. Vertical Bar ( | ) th(e|is|at)

Sample Footer Text 5/11/2026 35


\s: matches any whitespace characters such as space and tab.
\S: matches any non-whitespace characters.
\d: matches any digit character.
\D: matches any non-digit characters.
\w : matches any word character (basically alpha-numeric)
\W: matches any non-word character.
\b: matches any word boundary (this would include spaces,
dashes, commas, semi-colons, etc.
[set_of_characters]: Matches any single character in
set_of_characters. By default, the match is case-sensitive.

Sample Footer Text 5/11/2026 36


Frame
• <frameset rows=“” cols=“” frameborder =“”>
• <frame src =“” name=“” />
• <frame frameborder="1|0">

• <iframe> Inline Frame


• <iframe frameborder="1|0“ src=" url " title=" description “
height="200" width="300"></iframe>
• <iframe align="left|right|middle|top|bottom">

Sample Footer Text 5/11/2026 37


Map
• <img src =“[Link]” usemap=“#m1” alt=“”/>
• <map name=“m1">
• <area shape="rect“ coords=“x1,y1,x2,y2“ alt=“rect“ href= “”/>
• <area shape=“circle“ coords=“x,y,r“ alt=“circle“ href= “”/>
• <area shape=“poly“ coords=" x1,y1,x2,y2,x3,y3“ alt=“poly“ href= “”/>
• <area shape=“default“ alt=“default“ href= “”/>

• </map>

Sample Footer Text 5/11/2026 38


Map Coordinates

Sample Footer Text 5/11/2026 39


Audio
• <audio Controls src="sample.mp3" type="audio/mpeg"> </audio>
• <audio Controls>
• <source src="sample.mp3" type="audio/mpeg">
Attributes Description
• </audio>
Designates what controls to display
• Controls with the audio player.

Designates that the audio file will play


Autoplay immediately after it loads controls.

Designates that the audio file should


Loop continuously repeat.

src Designates the URL of the audio file.

Designates that the audio file should


muted be muted.
Sample Footer Text 5/11/2026 40
video
Attribute Description

• <video controls> controls It defines the video controls


displayed with play/pause buttons.
which is

• <source src="movie.mp4" type="video/mp4"> height It is used to set the height of the video player.

width It is used to set the width of the video player.

• Your browser does not support the html video tag. poster It specifies the image which is displayed on
the screen when the video is not played.

• </video> autoplay It specifies that the video will start playing as


soon as it is ready.

loop It specifies that the video file will start over


again, every time when it is completed.

muted It is used to mute the video output.

preload It specifies the author view to upload video file


when the page loads.

src It specifies the source URL of the video file.

Sample Footer Text 5/11/2026 41


SVG (Scalable Vector Graphics)
• SVG has elements and attributes for rectangles, circles, ellipses, lines, polygons,
curves, and more.
• SVG also supports filter and blur effects, gradients, rotations, animations,
interactivity with JavaScript, and more.
• A simple SVG document consists of the <svg> root element and several basic shape
elements that will build a graphic together.
• <svg width="100" height="100" xmlns="[Link]
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<text x="75" y="60" font-size="30" text-anchor="middle" fill="red">SVG</text>
</svg>

Sample Footer Text 5/11/2026 42


SVG Shapes
• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>

Sample Footer Text 5/11/2026 43


SVG Shapes

• <rect width="200" height="100" x="100" y="50" rx="20" ry="20" fill="blue" />

• <circle r="45" cx="50" cy="50" stroke="green" stroke-width="3" fill="red" />

• <ellipse rx="100" ry="50" cx="200" cy="80“ />

• <line x1="0" y1="0" x2="200" y2="200" />

• <polygon points="200,10 250,190 150,190" />

• <polyline points="0,0 50,150 100,75 150,50 200,140 250,140“ />

• <text x="0" y="15" fill="red">I love SVG!</text>

Sample Footer Text 5/11/2026 44


CSS Cascading Style Sheets
• Separation of content from presentation - CSS provides a way to present the same content
in multiple presentation formats in mobile or desktop or laptop.
• Easy to maintain - CSS, built effectively can be used to change the look and feel complete by
making small changes. To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
• Bandwidth - Used effectively, the style sheets will be stored in the browser cache and they
can be used on multiple pages, without having to download again.

Sample Footer Text 5/11/2026 45


How to include CSS in the webpage?
• External Style Sheet: An external file linked to your HTML document: Using link tag, we can
link the style sheet to the HTML page.
• Embed CSS with a style tag: A set of CSS styles included within your HTML page.
• Add inline styles to HTML elements(CSS rules applied directly within an HTML tag.): Style
can be added direct
• Import a stylesheet file (An external file imported into another CSS file): Another way to
add CSS is by using the @import rule. This is to add a new CSS file within CSS itselfly to the
HTML element using a style tag.

Sample Footer Text 5/11/2026 46


Different types of Selectors in CSS
• Universal Selector:
• Element Type Selector
• ID Selector:
• Class Selector:
• Descendant Combinator:

Sample Footer Text 5/11/2026 47


@media
• @media screen and (min-width: 600px) {
• .element {
• /* Apply some styles */
• }
• }
• @media [media-type] ([media-feature]) {
• /* Styles! */
• }

Sample Footer Text 5/11/2026 48


@keyframes

Sample Footer Text 5/11/2026 49


CSS Pseudo-elements
• A CSS pseudo-element is used to style specified parts of an element.

• selector::pseudo-element {
property: value;
}

• p::first-line {
color: #ff0000;
font-variant: small-caps;
}

• p::first-letter {
color: #ff0000;
font-size: xx-large;
}

Sample Footer Text 5/11/2026 50


• h1::before {
content: url([Link]);
}
• h1::after {
content: url([Link]);
}
• ::marker {
color: red;
font-size: 23px;
}
Sample Footer Text 5/11/2026 51
Selector Example Example description
::after p::after Insert something after the content of each <p> element

::before p::before Insert something before the content of each <p> element

::first-letter p::first-letter Selects the first letter of each <p> element


::first-line p::first-line Selects the first line of each <p> element
::marker ::marker Selects the markers of list items
::selection p::selection Selects the portion of an element that is selected by a user

Sample Footer Text 5/11/2026 52


CSS Pseudo Classes
• A pseudo-class is used to define a special state of an element.
• :hover
• :link
• :visited
• :active

Sample Footer Text 5/11/2026 53


Selector Example Example description

:active a:active Selects the active link

:checked input:checked Selects every checked <input> element

:disabled input:disabled Selects every disabled <input> element

:empty p:empty Selects every <p> element that has no children

:enabled input:enabled Selects every enabled <input> element

:first-child p:first-child Selects every <p> elements that is the first child of its parent

:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent

:focus input:focus Selects the <input> element that has focus

:hover a:hover Selects links on mouse over

:in-range input:in-range Selects <input> elements with a value within a specified range

:invalid input:invalid Selects all <input> elements with an invalid value

:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"

:last-child p:last-child Selects every <p> elements that is the last child of its parent

:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent

:link a:link Selects all unvisited links

:not(selector) :not(p) Selects every element that is not a <p> element

:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent

:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child

:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child

:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent

:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent

:only-child p:only-child Selects every <p> element that is the only child of its parent

:optional input:optional Selects <input> elements with no "required" attribute

:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range

:read-only input:read-only Selects <input> elements with a "readonly" attribute specified

:read-write input:read-write Selects <input> elements with no "readonly" attribute

:required input:required Selects <input> elements with a "required" attribute specified

:root root Selects the document's root element

:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)

Sample Footer Text


:valid input:valid Selects all <input> elements with a valid value

5/11/2026 54
:visited a:visited Selects all visited links
BOX Model

Sample Footer Text 5/11/2026 55


Sample Footer Text 5/11/2026 56
XML Extensible Markup Language
• markup language that provides rules to define any data
• XML cannot perform computing operations by itself.
• storing,
• transmitting,
• reconstructing data

Sample Footer Text 5/11/2026 57


benefits of using XML?
• Support interbusiness transactions
• Maintain data integrity
• Improve search efficiency
• Design flexible applications

Sample Footer Text 5/11/2026 58


XML parser?
• An Extensible Markup Language (XML) parser is software that can process or read
XML documents to extract the data within them. XML parsers also check the syntax
or rules of the XML file and can validate it against a particular XML schema.

Sample Footer Text 5/11/2026 59


XML editing programs
• Oxygen XML Editor
• XML Notepad
• Adobe FrameMaker
• MadCap Flare
• Quark Author
• Liquid XML Studio

Sample Footer Text 5/11/2026 60


XSL EXtensible Stylesheet Language

• Following are the main parts of XSL −


• XSLT − used to transform XML document into various other types of
document.
• XPath − used to navigate XML document.
• XSL-FO − used to format XML document.

Sample Footer Text 5/11/2026 61


DTD Document Type Definition
A DTD can be declared inside an XML document as inline or as an external
recommendation. DTD determines how many times a node should appear, and how
their child nodes are ordered.
There are 2 data types, PCDATA and CDATA
• PCDATA is parsed character data.
• CDATA is character data, not usually parsed.

Sample Footer Text 5/11/2026 62


• <!DOCTYPE element DTD identifier
• [
• first declaration
• second declaration
• .
• .
• nth declaration
• ]>
Sample Footer Text 5/11/2026 63
• <?xml version="1.0"?>

• <!DOCTYPE address [

• <!ELEMENT address (name, email, phone, birthday)>

• <!ELEMENT name (first, last)>

• <!ELEMENT first (#PCDATA)>

• <!ELEMENT last (#PCDATA)>

• <!ELEMENT email (#PCDATA)>

• <!ELEMENT phone (#PCDATA)>

• <!ELEMENT birthday (year, month, day)>

• <!ELEMENT year (#PCDATA)>

• <!ELEMENT month (#PCDATA)>

• <!ELEMENT day (#PCDATA)>

• ]>

Sample Footer Text 5/11/2026 64


• <?xml version="1.0"?>

• <!DOCTYPE address SYSTEM "[Link]">

• <address>

• <name>

• <first>Rohit</first>

• <last>Sharma</last>

• </name>

• <email>sharmarohit@[Link]</email>

• <phone>9876543210</phone>

• <birthday>

• <year>1987</year>

• <month>June</month>

• <day>23</day>

• </birthday>

• </address>

Sample Footer Text 5/11/2026 65


• <!ELEMENT address (name, email, phone, birthday)>
• <!ELEMENT name (first, last)>
• <!ELEMENT first (#PCDATA)>
• <!ELEMENT last (#PCDATA)>
• <!ELEMENT email (#PCDATA)>
• <!ELEMENT phone (#PCDATA)>
• <!ELEMENT birthday (year, month, day)>
• <!ELEMENT year (#PCDATA)>
• <!ELEMENT month (#PCDATA)>
• <!ELEMENT day (#PCDATA)>

Sample Footer Text 5/11/2026 66


References
• [Link] -to-hire-full-stack-developers/

• [Link] -vs-html4/

• [Link] -installation

• [Link] -create-react-app

• [Link] -regular-expressions/

• [Link]

• [Link] -keyframe-css-animation-examples-and-code/

• [Link] -keyframe-css-animation-examples-and-code/

• [Link]

• [Link] -tutorial/css-keyframes

• [Link]

Sample Footer Text 5/11/2026 67


By : Dr. Parul Madan(CSE)
CSS(CASCADING STYLE SHEET) GEU
WHAT IS CSS?

CSS stands for Cascading Style Sheets


CSS describes how HTML elements are to be displayed on screen, paper, or
in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at
once
External stylesheets are stored in CSS files
WHY TO LEARN CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
some of the key advantages of learning CSS:
Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS,
you can control the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used, layout
designs,variations in display for different devices and screen sizes as well as a variety of
other effects.
Become a web designer - If you want to start a carrer as a professional web designer, HTML
and CSS designing is a must skill.
Control web - CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the markup
languages HTML or XHTML.
APPLICATIONS OF CSS

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

Basic word processing using any text editor.


How to create directories and files.
How to navigate through different directories.
Internet browsing using popular browsers like Internet Explorer or Firefox.
Developing simple Web Pages using HTML or XHTML.
TYPES OF CSS (CASCADING STYLE
SHEET)

Cascading Style Sheet(CSS) is used to set the style in web pages that contain
HTML elements. It sets the background color, font-size, font-family, color
etc., property of elements on a web page.
There are three types of CSS which are given below:
Inline CSS
Internal or Embedded CSS
External CSS
INLINE CSS: INLINE CSS CONTAINS THE CSS PROPERTY IN THE BODY SECTION ATTACH ED WITH ELEMENT IS KNOWN AS
INLINE CSS. THIS KIND OF STYLE IS SPECIFIED WITHIN AN HTML TAG U SING THE STYLE ATTRIBUTE.

E.g., <!DOCTYPE html>


<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GRAPHIC ERA
</p>
</body>
</html>
INTERNAL OR EMBEDDED CSS: THIS CAN BE USED WHEN A SINGLE HTML DOCUMENT MUST BE STYLED UNIQUELY. THE CSS RULE
SET SHOULD BE WITHIN THE HTML FILE IN THE HEAD SECTION I.E. THE CSS IS EMBEDDED WITHIN THE HTML FILE.
.GEU {

font-style: bold;
E.g.
font-size:20px;
<!DOCTYPE html>
}
<html>
<head> </style>

<title>Internal CSS</title> </head>


<style> </head>
.main { <body>
text-align: center;
<div class = "main">
}
<div class ="GFG">GEU</div>
.GFG {
color:#009900;
font-size:50px; <div class =“GEU">

font-weight: bold; A computer science portal for geeks

} </div>

</div>

</body>
EXTERNAL CSS: EXTERNAL CSS CONTAINS SEPARATE CSS FILE WHICH CONTAINS ONLY ST YLE PROPERTY WITH
THE HELP OF TAG ATTRIBUTES (FOR EXAMPLE CLASS, ID, HEADING ETC.) . CSS PROPERTY WRITTEN IN A SEPARATE
FILE WITH .CSS EXTENSION AND SHOULD BE LINKED TO THE HTML DOCUME NT USING LINK TAG. THIS MEANS THAT
FOR EACH ELEMENT, STYLE CAN BE SET ONLY ONCE AND THAT WILL BE AP PLIED ACROSS WEB PAGES.
body { <!DOCTYPE html>

<html>
background-color:powderblue;
<head>
}
<link rel="stylesheet" href=“[Link]"/>
.main {
</head>
text-align:center;

} <body>

.GFG { <div class = "main">

<div class ="GFG">GeeksForGeeks</div>


color:#009900;
<div id ="geeks">
font-size:50px;
A computer science portal for geeks
font-weight:bold;
</div>
}
</div>
#geeks { </body>

font-style:bold; </html>

font-size:20px; link tag is used to link the external style sheet with the html webpage.

href attribute is used to specify the location of the external style sheet file.
}
PROPERTIES OF CSS

Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded
followed by External CSS which has the least priority. Multiple style sheets can be
defined on one page. If for an HTML tag, styles are defined in multiple style sheets
then the below order will be followed.
As Inline has the highest priority, any styles that are defined in the internal and
external style sheets are overridden by Inline styles.
Internal or Embedded stands second in the priority list and overrides the styles in the
external style sheet.
External style sheets have the least priority. If there are no styles defined either in
inline or internal style sheet then external style sheet rules are applied for the HTML
tags.
CSS SELECTORS

We can divide CSS selectors into five categories:


Simple selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship
between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)
SIMPLE SELECTORS
A CSS comprises of style rules that are interpreted by the browser and then applied
to the corresponding elements in your document. A style rule is made of three parts −
Selector − A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.
Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
Value − Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.
SYNTAX:
selector { property: value }

table{ border :1px solid #C00; }


TYPES OF SIMPLE SELECTORS
The ID Selectors
The Class Selectors
The Descendant Selectors
The Universal Selectors
The Child Selectors
The Attribute Selectors
Grouping Selectors
1. ID SELECTOR:YOU CAN DEFINE STYLE RULES BASED ON THE ID ATTRIBUTE OF THE ELE MENTS. ALL THE ELEMENTS
HAVING THAT ID WILL BE FORMATTED ACCORDING TO THE DEFINED RULE.
<html>
<head> All the elements having that id will be formatted according to the
defined rule.
<style>
#black {
#intro {
color: #000000;
color: blue;
}
}
</style>
This rule renders the content in black for only <h1> elements
</head> with id attribute set to black.

<body>
h1#black {

<h1 id="intro">Header 1</h1> color: #000000;


<p>A paragraph.</p> }

<p class="important">Note that this is an important paragraph. </p> all level 2 headings will be displayed in black color when those
headings will lie with in tags having id attribute set to black.
#black h2 {
</body>
color: #000000;
</html>
}
[Link] SELECTOR: YOU CAN DEFINE STYLE RULES BASED ON THE CLASS ATTRIBUTE OF THE ELEMENTS.
ALL THE ELEMENTS HAVING THAT CLASS WILL BE FORMATTED ACCORDING T O THE DEFINED RULE.

<html>
This rule renders the content in black for every
<head>
element with class attribute set to black in our
<style>
document. You can make it a bit more particular.
.intro { For example −
color: blue;

}
.black {
[Link] {
color: #000000;
font-style:bold;

} }
</style>

</head>

<body> This rule renders the content in black for only


<h1> elements with class attribute set to black.
<h1 class="intro">Header 1</h1>
[Link] {
<p>A paragraph.</p>

<p class="important">Note that this is an important paragraph.</p> color: #000000;


}
</body>

</html>
3. ELEMENT SELECTOR
<html>

<head>
<style>

p{
color: blue;

</style>

</head>

<body>

<h1 id="intro">Header 1</h1>

<p>A paragraph.</p>

<p class="important">Note that this is an important paragraph. </p>

</body>

</html>
4. UNIVERSAL SELECTORS
<html>

<head>

<style>

*{
color: blue;

</style>

</head>
<body>

<h1 id="intro">Header 1</h1>

<p>A paragraph.</p>

<p class="important">Note that this is an important paragraph. </p>

</body>

</html>
[Link] SELECTORS
<html>

<head> h1, h2, h3 {


<style>

h1, h2, h3 { color: #36C;


color: #36C;

font-weight: normal; font-weight: normal;


letter-spacing: .4em;

margin-bottom: 1em; letter-spacing:


}
text-transform: lowercase;
.4em;
</style>

</head>
margin-bottom:
<body> 1em;
<h1 id="intro">Header 1</h1>

<h2 id="intro">Header 1</h2>


text-transform:
lowercase;
<h3 id="intro">Header 1</h3>

<p>A paragraph.</p>
}
</body>
[Link] ATTRIBUTE SELECTORS
You can also apply styles to HTML elements with particular attributes. The style rule below will match all
the input elements having a type attribute with a value of text −
input[type = "text"] {
color: #000000;
}
The advantage to this method is that the <input type = "submit" /> element is unaffected, and the color
applied only to the desired text fields.
There are following rules applied to attribute selector.
p[lang] − Selects all paragraph elements with a lang attribute.
p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly "fr".
p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word "fr".
p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values that are exactly
"en", or begin with "en-".
7. DESCENDANT SELECTORS
Suppose you want to apply a style rule to a particular element only when it lies
inside a particular element. As given in the following example, style rule will
apply to <em> element only when it lies inside <ul> tag.
ul em {
color: #000000;
}
8. CHILD SELECTORS

You have seen the descendant selectors. There is one more type of selector,
which is very similar to descendants but have different functionality. Consider
the following example −
body > p {
color: #000000;
}
CSS TEXT COLOR
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
CSS Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
CSS Color Values
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
CSS BACKGROUNDS

The CSS background properties are used to define the background effects for
elements.
background-color
background-image
background-repeat
background-attachment
background-position
BACKGROUND COLOR
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
Opacity / Transparency: It can take a value from 0.0 - 1.0
div {
background-color: green;
opacity: 0.3;
}
BACKGROUND IMAGE
The background-image property specifies an image to use as the background of an element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("[Link]");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>
CSS BACKGROUND-REPEAT

By default, the background-image property repeats an image both horizontally and


vertically.
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
repeat-y;
repeat;
no-repeat;
CSS BACKGROUND-POSITION

The background-position property is used to specify the position of the background


image.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
CSS BACKGROUND-ATTACHMENT

The background-attachment property specifies whether the background image should


scroll or be fixed (will not scroll with the rest of the page):
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Or background-attachment: scroll;
CSS BACKGROUND - SHORTHAND PROPERTY
Use the shorthand property to set the background properties in one declaration:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position
CSS BORDER PROPERTIES
The CSS border properties allow you to specify the style, width, and color of an element's border.
CSS Border Style:

dotted - Defines a dotted border


dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border
EX.
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
CSS BORDER WIDTH
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
values: thin, medium, or thick : e.g.
[Link] {
border-style: solid;
border-width: 5px;
}
[Link] {
border-style: solid;
border-width: medium;
}
[Link] {
border-style: dotted;
border-width: 2px;
}
[Link] {
border-style: dotted;
border-width: thick;
}
CSS BORDER COLOR
The border-color property is used to set the color of the four borders.
The color can be set by:
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
Transparent
<style>
[Link]
{
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
CSS BORDER - SHORTHAND PROPERTY

The border property is a shorthand property for the following individual border
properties:
border-width
border-style (required)
border-color
e.g.
p{
border: 5px solid red;
}
CSS MARGINS

The CSS margin properties are used to create space around elements, outside of any
defined borders.
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
MARGIN - SHORTHAND PROPERTY
The margin property is a shorthand property for the following individual margin properties:
margin: 25px 50px 75px 100px;
Top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
margin: 25px 50px;top and bottom margins are 25px
right and left margins are 50px
margin: 25px;
all four margins are 25px
CSS MARGIN COLLAPSE

Top and bottom margins of elements are sometimes collapsed into a single margin that is
equal to the largest of the two margins.
This does not happen on left and right margins. Only top and bottom margins.
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
common sense would seem to suggest that the vertical margin between the <h1> and the <h2>
would be a total of 70px (50px + 20px). But due to margin collapse, the actual margin ends
up being 50px.
CSS PADDING

The CSS padding properties are used to generate space around an element's content, inside of any defined
borders.
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
e.g.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS HEIGHT AND WIDTH VALUES
The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.
The height and width properties may have the following values:
auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
THE CSS BOX MODEL
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about
design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists
of: margins, borders, padding, and the actual content. The image below illustrates the box model:
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
CSS OUTLINE
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element
"stand out".
CSS has the following outline properties:
outline-style
outline-color
outline-width
outline-offset
outline
CSS OUTLINE SHORTHAND
The outline property is a shorthand property for setting the following individual
outline properties:
outline-width
outline-style (required)
outline-color
CSS OUTLINE OFFSET

The outline-offset property adds space between an outline and the edge/border of
an element. The space between an element and its outline is transparent.
p{
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
CSS LAYOUT - FLOAT AND CLEAR

The CSS float property specifies how an element should float.


The CSS clear property specifies what elements can float beside the cleared element and on which
side.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is
default
inherit - The element inherits the float value of its parent
img {
float: right;
}
CSS LAYOUT - OVERFLOW
The overflow property specifies whether to clip the content or to add scrollbars when the content of an
element is too big to fit in the specified area.
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;//default is visible.
}
PSEUDO By: Dr. Parul Madan(AP)

CLASSES IN CSS CSE(GEU)


WHAT ARE PSEUDO-CLASSES?

A pseudo-class is used to define a special state of an element.


For example, it can be used to:
Style an element when a user mouse over it
Style visited and unvisited links differently
Style an element when it gets focus
Syntax:
selector: pseudo-class {
property: value;
}
EXAMPLES

<style type = "text/css">


a:link {color: blue;}
a:visited{color:red;}
a:hover{color:pink;}
a:focus{color:green;}
a:active{color: black;}
</style>
<a href = " [Link]">THIS WILL MOVE TO NEXRT PAGE</a>
:FIRST-CHILD
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>

<p>This is some text.</p>


<p>This is some text.</p>

</body>
</html>
:LANG
<html>
<head>
<style type = "text/css">

/* Two levels of quotes for two languages*/


:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>

<body>
<p>...<q lang = "en">A quote in a paragraph</q>...</p>
</body>
</html>
CSS PSEUDO ELEMENTS
::BEFORE (WILL PLACE SOME CONTENT BEFORE ELEMENT SELECTOR)
<!DOCTYPE html>
<html>
<head>
<style>
p::before {
content: "this is it";
background-color: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>

<p>My name is Donald</p>


<p>I live in Ducksburg</p>
::AFTER(WILL PLACE SOME CONTENT AFTER ELEMENT SELECTOR)
<!DOCTYPE html>
<html>
<head>
<style>
p::after {
content: "this is it";
background-color: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>

<p>My name is Donald</p>


<p>I live in Ducksburg</p>
::FIRST-LINE
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: yellow;
}
</style>
</head>
<body>

<h1>WWF's Mission Statement</h1>


<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony wi
th nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainab
le, and promoting the reduction of pollution and wasteful consumption.</p>

</body>
</html>
::SELECTION
<!DOCTYPE html>
<html>
<head>
<style>
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>

</body>
</html>
::FIRST-LETTER
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
Introduction to JSON
By:
Dr. PARUL MADAN
CSE GEU
Introduction to the JavaScript Object Notation
(JSON)

 JSON (JavaScript Object Notation) is a lightweight data-interchange


format.

 JSON is a syntax for storing and exchanging data.

 JSON is an easier-to-use alternative to XML.

 It is based on a subset of the JavaScript Programming


Language
Cont..

 JSON is a text format that is completely language independent but uses


conventions that are familiar to programmers of the C-family of languages,
including C, C++, C#, Java, JavaScript, Perl, Python, and many others.

 A JSON filetype is .json.

 The JSON format was originally specified by Douglas Crockford,


Uses of JSON

It is used while writing JavaScript based applications that includes


browser extensions and websites.
JSON format is used for serializing and transmitting structured
data over network connection.
It is primarily used to transmit data between a server and web
applications.
Web services and APIs use JSON format to provide public data.
It can be used with modern programming languages.
Need of JSON

 Standard Structure: As we have seen so far that JSON objects are having a
standard structure that makes developers job easy to read and write code,
because they know what to expect from JSON.
 Light weight: When working with AJAX, it is important to load the data
quickly and asynchronously without requesting the page re-load. Since JSON is
light weighted, it becomes easier to get and load the requested data quickly.
 Scalable: JSON is language independent, which means it can work well with
most of the modern programming language. Let’s say if we need to change the
server side language, in that case it would be easier for us to go ahead with that
change as JSON structure is same for all the languages.
JSON VS XML

JSON is lightweight thus simple to read and write. XML is less simple than JSON.

JSON supports array data structure. XML doesn't support array data structure.

JSON files are more human readable XML files are less human readable.

JSON has no display capabilities . XML provides the capability to display data because it is a
markup language

Provides scalar data types and the ability to express Does not provide any notion of data types. One must rely
structured data through arrays and objects. on XML Schema for adding type information.

Native object support. Objects have to be expressed by conventions, often


through a mixed use of attributes and elements.
JSON Style:
XML Style:
<employees>
{"employees":[ <employee>
{ "firstName":"John", "lastName":"Doe" }, <firstName>John</firstName> <lastName>Doe</la
{ "firstName":"Anna", "lastName":"Smith" }, stName>
{ "firstName":"Peter", "lastName":"Jones" } </employee>
]} <employee>
<firstName>Anna</firstName> <lastName>Smith<
/lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones<
/lastName>
</employee>
</employees>
Similarities between JSON and XML

 Both are simple and open.


 Both supports unicode. So internationalization is supported by
JSON and XML both. Both represents self describing data.
 Both are interoperable or language-independent.
Why JSON is Better Than XML

1. XML is much more difficult to parse than JSON.


Where as JSON is parsed into a ready-to-use JavaScript object.
2. For AJAX applications, JSON is faster and easier than XML:
Using XML
Fetch an XML document
Use the XML DOM to loop through the document
Extract values and store in variables
Using JSON
Fetch a JSON string
[Link] the JSON string
JSON Syntax Rules

Data is in name/value pairs


Data is separated by commas
Curly braces hold objects
Square brackets hold arrays
FOR EXAMPLE:
JSON :DATA JAVASCRIPT:DATA
{ "name":"John" } { name:"John" }
For ex:

• var person = { name: "John", age: 31, city: "New York" };


• You can access a JavaScript object like this: [Link]
or
person["name"];
Data can be modified like this: [Link] = ”PARUL”;
Data Types

Number It can be real number, integer or a floating number

String It can be any text or Unicode double-quoted with backslash escapement

Boolean The Boolean data type represents the true o


rfalse value

Null The Null value represents that the associatedvariable doesn't have any value

Object it is collection of key-value pairs separated by ycbommas and enclosed in curly brackets

Array it is an ordered sequence of values separated.


JSON Strings { "name":"John" }

JSON Numbers { "age":30 }

JSON Objects {
"employee":{ "name":"John", "age":30, "city":"New
York" }
}

JSON Arrays {
"employees":[ "John", "Anna", "Peter" ]
}

JSON null { "middlename":null }

JSON Booleans { "sale":true }


JSON Objects

Eg:
myObj = { "name":"John", "age":30, "car":null };
Accessing Object Values:
x = [Link]; or x = myObj["name"];
Looping an Object:
for (x in myObj) {
[Link]("demo").innerHTML += x;//or myObj[x];
}
Nested JSON Objects

Eg: Modify Values


myObj = {
"name":"John",
"age":30, [Link].car2 = "Merc
"cars": { edes";
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
} Delete Object Properties
Can be excessed by:
x = [Link].car2;
// or:
x = [Link]["car2"]; delete [Link].car2;
JSON Array
 JSON array represents ordered list of values.
 JSON array can store similar type of multiple values.
 It can store string, number, boolean or object in JSON array.
 The "[" (square bracket) represents the JSON array.
 In JSON array, values must be separated by comma (,).
 A JSON array can have values and objects.
Arrays in JSON Objects
[ "Ford", "BMW", "Fiat" ] Arrays in JSON Objects
myObj={
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}
Accessing Array Values Looping Through an Array
x = [Link][0]; for (i in [Link]) {
x += [Link][i];
}
for (i = 0; i < [Link]; i++) { Nested Arrays in JSON Objects
x += [Link][i]; myObj = {
} "name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}
<html>
<head>
<title>JSON example</title>
<script language = "javascript" >
var object1 = { "language" : "Java", "author" : "herbert schildt" };
[Link]("<h1>JSON with JavaScript example</h1>");
[Link]("<br>");
[Link]("<h3>Language = " + [Link]+"</h3>");
[Link]("<h3>Author = " + [Link]+"</h3>");

var object2 = { "language" : "C++", "author" : "E-Balagurusamy" };


[Link]("<br>");
[Link]("<h3>Language = " + [Link]+"</h3>");
[Link]("<h3>Author = " + [Link]+"</h3>");

[Link]("<hr />");
[Link]([Link] + " programming language can be
studied " + "from book written by " + [Link]);
[Link]("<hr />");
</script>
</head>

<body>
</body>
</html>
Live Demo
<html>
<head>
<title>Creation of array object in javascript using JSON</title>
<script language = "javascript" >
[Link]("<h2>JSON array object</h2>");
var books = { "Pascal" : [
{ "Name" : "Pascal Made Simple", "price" : 700 },
{ "Name" : "Guide to Pascal", "price" : 400 }],

"Scala" : [
{ "Name" : "Scala for the Impatient", "price" : 1000 },
{ "Name" : "Scala in Depth", "price" : 1300 }]
}
var i = 0
[Link]("<table border = '2'><tr>");

for(i = 0;i<[Link];i++) {
[Link]("<td>");
[Link]("<table border = '1' width = 100 >");
[Link]("<tr><td><b>Name</b></td><td width = 50>" + [Link][i].Name+"</td></tr>");
[Link]("<tr><td><b>Price</b></td><td width = 50>" + [Link][i].price +"</td></tr>");
[Link]("</table>");
[Link]("</td>");
}

for(i = 0;i<[Link];i++) {
[Link]("<td>");
[Link]("<table border = '1' width = 100 >");
[Link]("<tr><td><b>Name</b></td><td width = 50>" + [Link][i].Name+"</td></tr>");
[Link]("<tr><td><b>Price</b></td><td width = 50>" + [Link][i].price+"</td></tr>");
[Link]("</table>");
[Link]("</td>");
}

[Link]("</tr></table>");
</script>
</head>

<body>
Parsing JSON

'{ "name":"John", "age":30, "city":"New York"}’

Use the JavaScript function [Link]() to convert text into a JavaScript object:

var obj = [Link]('{ "name":"John", "age":30, "city":"New York"}’);


For eg:
<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
var txt = '{"name":"John", "age":30, "city":"New York"}'
var obj = [Link](txt);
[Link]("demo").innerHTML = [Link] + ", " + [Link];
</script>

</body>
</html>
JSON From the Server

<script> Json_demo.json
var xmlhttp = new XMLHttpRequest(); { "name":"John", "age":31,
[Link] = function() { "pets":[
if ([Link] == 4 && [Link] == 200) { { "animal":"dog", "name":"Fido" },
var myObj = [Link]([Link]); { "animal":"cat", "name":"Felix" },
[Link]("demo").innerHTML = {"animal":"hamster","name":"Lightning" } ]
[Link]; }
}
};
[Link]("GET", "json_demo.json", true);
[Link]();
</script>
The JSON returned from the server is an
array:
var xmlhttp = new XMLHttpRequest();
[Link] = function() { json_demo_array.json:
if ([Link] == 4 && [Link] == 200) {
var myArr = [Link]([Link]); [ "Ford", "BMW", "Audi", "Fiat" ]
[Link]("demo").innerHTML = myArr[0];
}
};
[Link]("GET", "json_demo_array.json", true);
[Link]();
Parsing Dates:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';


var obj = [Link](text);
[Link] = new Date([Link]);

[Link]("demo").innerHTML = [Link] + ", " +


[Link];
Parsing Functions

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New


York"}';
var obj = [Link](text);
[Link] = eval("(" + [Link] + ")");

[Link]("demo").innerHTML = [Link] + ", " + [Link]();


[Link]()

Use the JavaScript function [Link]() to convert it into a string.

var obj = { name: "John", age: 30, city: "New York" };

var myJSON = [Link](obj);

For eg:
<script>
var obj = { name: "John", age: 30, city: "New York" };
var myJSON = [Link](obj);
[Link]("demo").innerHTML = myJSON;
</script>
Stringify a JavaScript Array

var arr = [ "John", "Peter", "Sally", "Jane" ];

var myJSON = [Link](arr);

Eg:
var arr = [ "John", "Peter", "Sally", "Jane" ];
var myJSON = [Link](arr);
[Link]("demo").innerHTML = myJSON;
Stringify Dates

var obj = { name: "John", today: new Date(), city : "New York" };
var myJSON = [Link](obj);

[Link]("demo").innerHTML = myJSON;
Stringify Functions

var obj = { name: "John", age: function () {return 30;}, city: "New
York"};
var myJSON = [Link](obj);

[Link]("demo").innerHTML = myJSON;
JSON PHP

Objects in PHP can be converted into JSON by using the PHP function json_encode():
For eg: demo1_file.php
<?php
class Emp {
public $name = "";
public $age = "";
public $city = "";
}
$myObj=new Emp();

$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";
$myJSON = json_encode($myObj);
echo $myJSON;
?>
The Client JavaScript

var xmlhttp = new XMLHttpRequest();


[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
var myObj = [Link]([Link]);
[Link]("demo").innerHTML = [Link];
}
};
[Link]("GET", "demo1_file.php", true);
[Link]();
PHP Array

Demo2_file.php var xmlhttp = new XMLHttpRequest();


[Link] = function() {
<?php if ([Link] == 4 && [Link] == 200) {
$myArr var myObj = [Link]([Link]);
= array("John", "Mary", "Peter", "Sally"); [Link]("demo").innerHTML =
myObj[2];
$myJSON = json_encode($myArr); }
};
echo $myJSON; [Link]("GET", "demo2_file.php", true);
?> [Link]();
/*PHP json_encode() function is used for
encoding JSON in PHP. This function returns the
JSON representation of a value on success or
FALSE on failure.*/
PHP Database

obj = { table:"customers", limit:10 };


dbParam = [Link](obj);
xmlhttp = new XMLHttpRequest();
[Link] = function() {
if ([Link] == 4 && [Link] == 200) {
[Link]("demo").innerHTML = [Link];
}
};
[Link]("GET", "json_demo_db.php?x=" + dbParam, true);
[Link]();
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli(“localhost", “root", “", “geu");


$stmt = $conn->prepare("SELECT name FROM ? LIMIT ?");
$stmt->bind_param("ss", $obj->table, $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);
?>
The JavaScript XmlHttpRequest and Web APIs
• The JavaScript XMLHttpRequest is the client making the requests, and the web API is the server sending the
responses.

• XMLHttpRequest is anAPI that can be used by JavaScript, jQuery that provides client functionality for transferring
data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full
page refresh.

• JavaScript is an object-oriented language, so naturally the XMLHttpRequest is an object. Once it is created by


using the syntax “new XmlHttpRequest()” and assigned to a variable, it has functions that can be called to request
resources from a location.
var myXmlHttpRequest = new XMLHttpRequest();

It shows the creation of a new XMLHttpRequest object

Web API

A web API is a set of instructions and standards for interacting with a service over HTTP. That interaction can include
create, read, update, and delete (CRUD) operations and the web API will have a reference outlining these instructions
and standards.
JSON weather data:
{
"dt": 1433383200,
"temp": {"day": 293.5, "min": 293.5, "max": 293.5, "night": 293.5, "eve": 293.5, "morn":
293.5},
"pressure": 1015.06,
"humidity": 98,
"weather": [{"id": 802, "main": "Clouds", "description": "scattered clouds","icon": "03n"}],
"speed": 2.86,
"deg": 134,
"clouds": 44
}
The JSON weather data example can be “read” by any code capable of parsing JSON. This JSON
resource can be requested with a URL.
For example, a news web page might include a sidebar with real-time weather data. While you’re
reading your news article, code in the back‐ground could asynchronously update the weather display
every 60 seconds. This operation would not require the page to reload and interrupting any other
events
JavaScript Regular Expressions
A regular expression is a sequence of characters that forms a
search pattern.

The search pattern can be used for text search and text replace
operations.

What Is a Regular Expression?


A regular expression is a sequence of characters that forms
a search pattern.

When you search for data in a text, you can use this search
pattern to describe what you are searching for.

A regular expression can be a single character, or a more


complicated pattern.

Regular expressions can be used to perform all types of text


search and text replace operations.

Syntax
/pattern/modifiers;

Modifiers
Modifiers are used to perform case-insensitive and global searches:

Modifier Description
g Perform a global match (find all matches rather than stopping
after the first match)
i Perform case-insensitive matching
m Perform multiline matching

Using String Methods


In JavaScript, regular expressions are often used with
the two string methods: search() and replace().

The search() method uses an expression to search for a


match, and returns the position of the match.

The replace() method returns a modified string where the


pattern is replaced.
Using String search() With a Regular Expression
Use a regular expression to do a case-insensitive search for
"GRAPHIC" in a string:

var str = "Visit GRAPHIC Era University";


var n = [Link](/Graphic/i);

Replacing String Content


The replace() method replaces a specified value with another value in a
string:

var str="Please visit Java Programming!"


var n=[Link]("java", "WebDesign");
By default, the replace() method replaces only the first match:

To replace case insensitive, use a regular expression with


an /i flag (insensitive):

str = "Please visit Microsoft!";


var n = [Link](/MICROSOFT/i, "WIPRO");
To replace all matches, use a regular expression with
a /g flag (global match):

Example
str = "Please visit Microsoft and Microsoft!";
var n = [Link](/Microsoft/g, "WIPRO");
To replace all matches, with a /g flag (global
match)and an /i flag (insensitive):
var n = [Link](/Microsoft/gi, "WIPRO");
<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="web programming web developer web design"
var nstr = [Link](/web/gi);
[Link]("demo").innerHTML =
nstr;
</script>
</body>
</html>

OutPut

New String is
web,web,web
RegExp Object Methods
1 exec()
2 test()
3 toString()
JavaScript - RegExp exec() Method
Description
The exec() Method in JavaScript is used to test for
match in a string. If there is a match this method
returns the first match else it returns NULL.
<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="web programming web developer web design"
var nstr = /web/.exec(str);
[Link]("demo").innerHTML = nstr;
</script>
</body>
</html>
Output

New String is
web
<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="web programming web developer web design"
var reg = new RegExp("web");
var nstr = [Link](str);
[Link]("demo").innerHTML = nstr;
</script>
</body>
</html>

JavaScript RegExp test() method


Definition and Usage
The test() method tests for a match in a string.
If it finds a match, it returns true, otherwise it
returns false.
!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="web programming web developer web design"
var nstr = /web/.test(str);
[Link]("demo").innerHTML = nstr;
</script>
</body>
</html>
Output
New String is
true
Exmple2

<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
let str="web programming web developer web design"
let pattern=/web/
var nstr = [Link](str);
[Link]("demo").innerHTML = nstr;
</script>
</body>
</html>
JavaScript RegExp toString() method
Definition and Usage
The toString() method returns the string
value of the regular expression.
<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="web programming web developer web design"
var reg = new RegExp("web");
var nstr = [Link](str);
[Link]("demo").innerHTML =
nstr;
</script>
</body>
</html>
Output

New String is
/web/

var reg = new RegExp("web","gi");


var nstr = [Link](str);
Output
New String is
/web/gi

Brackets [ ]
Brackets are used to find a range of characters:

Expression Description
[abc] Find any character between the
brackets
[^abc] Find any character NOT between the
brackets
[0-9] Find any character between the
brackets (any digit)
[^0-9] Find any character NOT between the
brackets (any non-digit)
(x|y) Find any of the alternatives specified

[0-9] It matches any decimal digit from 0 through 9.


[a-z] It matches any character from lowercase a through lowercase z.
[A-Z] It matches any character from uppercase A through uppercase Z.
[a-Z] It matches any character from lowercase a through uppercase

<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="web programming web developer meb design jeb Design"

var nstr = [Link](/[wmj]eb/g);


[Link]("demo").innerHTML = nstr;
</script>
</body>
</html>
Output
New String is
web,web,meb,jeb
To ignore case
ar nstr = [Link](/[wmjWMJ]eb/g);
var nstr = [Link](/[wmJ]eb/gi);

Example

var nstr = [Link](/[a-z]eb/gi);


<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="sengupta dasgupta vimalgupta are web developers"
var nstr = [Link](/(sengupta|dasgupta)/g);
[Link]("demo").innerHTML = nstr;
</script>
</body>
</html>

output
New String is
sengupta,dasgupta

Quantifiers

Quantifier Description
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more
occurrences of n
n? Matches any string that contains zero or one
occurrences of n
n{X} Matches any string that contains a
sequence of X n's
n{X,Y} Matches any string that contains a
sequence of X to Y n's
n{X,} Matches any string that contains a
sequence of at least X n's
n$ Matches any string with n at the end of it
^n Matches any string with n at the beginning of it
?=n Matches any string that is followed by a
specific string n
?!n Matches any string that is not followed by a
specific string n

n+ Matches any string that contains at least one n

<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="aggarwal agarwal agggarwal aarwal are web
developer"
var nstr = [Link](/g+/g);
[Link]("demo").innerHTML = nstr;
</script>
</body>
</html>
Output

New String is
gg,g,ggg
<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="aggarwal agarwal Agggarwal aarwal are web
developer"
var nstr = [Link](/[aA]g+arwal/g);
[Link]("demo").innerHTML = nstr;
</script>
</body>
</html>

Output

New String is
aggarwal,agarwal,Agggarwal
n* Matches any string that contains zero or
more occurrences of n
<script>
str="aggarwal agarwal Agggarwal aarwal are web
developer"
var nstr = [Link](/[aA]g*arwal/g);
[Link]("demo").innerHTML =
nstr;
</script>
Output

New String is
aggarwal,agarwal,Agggarwal,aarwal

n? Matches any string that contains zero or


one occurrences of n
<script>
str="aggarwal agarwal Agggarwal aarwal are web
developer"
var nstr = [Link](/[aA]g?arwal/g);
[Link]("demo").innerHTML = nstr;
</script>
Output
New String is
agarwal,aarwal

n{X} Matches any string that contains a


sequence of X n's
<script>
str="5009 45009 234 56789 12"
var nstr = [Link](/\d{4}/g);
[Link]("demo").innerHTML = nstr;
</script>

Output
New String is
5009,4500,5678

n{X,Y} Matches any string that contains a


sequence of X to Y n's
Searching for digit 3 to 4 range
<script>
str="5009 45009 234 56789 12"
var nstr = [Link](/\d{3,4}/g);
[Link]("demo").innerHTML = nstr;
</script>

Output
New String is
5009,4500,234,5678

Searching for word 4 to 5 range


<script>
str="hello welcome to java script program"
var nstr = [Link](/\w{4,5}/g);
[Link]("demo").innerHTML = nstr;
</script>
Output

New String is
hello,welco,java,scrip,progr
n{X,} Matches any string that contains a
sequence of at least X n's
<script>

str="hello welcome to java script program"


var nstr = [Link](/\w{4,}/g);
[Link]("demo").innerHTML = nstr;
</script>
Output

New String is
hello,welcome,java,script,program

n$ Matches any string with n at the end of it


<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="sandeep mandeep varun vijay rahul amandeep
rajdeep"
let astr=[Link](" ")
result=""
for(i=0;i<[Link];i++)
{
nstr = astr[i].match(/[a-z]*deep$/);
if(nstr!=null)
result=result+nstr+" "
}
[Link]("demo").innerHTML =
result
</script>
</body>
</html>

Output
New String is
sandeep mandeep amandeep rajdeep
^n Matches any string with n at the beginning of it
<!DOCTYPE html>
<html>
<body>
<p> New String is</p>
<p id="demo"></p>
<script>
str="sandeep sanjay varun vijay amarsan saneev sanjiv"
let astr=[Link](" ")
result=""
for(i=0;i<[Link];i++)
{
nstr = astr[i].match(/^san[a-z]*/);
if(nstr!=null)
result=result+nstr+" "
}
[Link]("demo").innerHTML = result
</script>
</body>
</html>

Output
New String is
sandeep sanjay saneev sanjiv

You might also like