SlideShare a Scribd company logo
1 of 349
Full Web Stack
Development
Dr Sabitha Banu
Assistant Professor
PSGR Krishnammal College for Women
Dr Sabitha Banu PSGRKCW 1
Course Learning Outcomes
• Recall about the basics of HTML, XML, CSS, Scripting application
language.
• Understand the various designing concept for dynamic presentation
effect in HTML and XML documents.
• Apply the mark-up languages and Scripting languages for processing,
identifying and presenting information in web pages with JQuery.
• Analyze the web page design requirements and design web pages
using Jquery built in plug-ins.
Dr Sabitha Banu PSGRKCW 2
UNIT I
• Fundamentals of HTML
• Understanding Elements:
• Root Elements
• Metadata Elements
• Section Elements
• Heading Elements.
• Describing data types.
Dr Sabitha Banu PSGRKCW 3
Fundamentals of HTML
• HyperText Markup Language
• design the web pages
• create a complete website structure
• combination of Hypertext and Markup language
• structure of web pages and website
• Tags and Attributes
• link multiple pages using Hyperlinks.
Dr Sabitha Banu PSGRKCW 4
Dr Sabitha Banu PSGRKCW 5
Dr Sabitha Banu PSGRKCW 6
Dr Sabitha Banu PSGRKCW 7
Dr Sabitha Banu PSGRKCW 8
Features
Dr Sabitha Banu PSGRKCW 9
Dr Sabitha Banu PSGRKCW 10
Dr Sabitha Banu PSGRKCW 11
Elements
• Building blocks of an HTML document
• collection of start and end tags with the content inserted in between
them
• Not case sensitive
Dr Sabitha Banu PSGRKCW 12
•Pre-defined tags
•Categories of HTML elements
⮚Root Elements
⮚Metadata Elements
⮚Section Elements
⮚Heading Elements
⮚Flow
⮚Phrasing
⮚Embedded
⮚Interactive
Dr Sabitha Banu PSGRKCW 13
Root Elements
• Represents main/starting element present in all HTML document
• HTML element s the first element after <!doctype> element
• Other elements specified within other elements
• All HTML elements have attributes that will provide additional
information about that particular element.
• 2 parameters
• name & value which define the properties of the element and are placed
inside the element tag.
Dr Sabitha Banu PSGRKCW 14
•Attributes always come in name/value pairs like this:
attribute_name=”value”.
•Attributes are always added to the start tag of an HTML
element.
•Attribute values should always be enclosed in quotes.
Double style quotes (“ ”) are the most common, but
single style quotes (‘ ’) are also allowed.
•In some rare situations, like when the attribute value
itself contains quotes, it is necessary to use single
quotes: name=’John “ShotGun” Nelson’ and vice-versa.
Dr Sabitha Banu PSGRKCW 15
Dr Sabitha Banu PSGRKCW 16
Dr Sabitha Banu PSGRKCW 17
Dr Sabitha Banu PSGRKCW 18
Dr Sabitha Banu PSGRKCW 19
Dr Sabitha Banu PSGRKCW 20
Dr Sabitha Banu PSGRKCW 21
Dr Sabitha Banu PSGRKCW 22
Dr Sabitha Banu PSGRKCW 23
Metadata Elements
• Used to set the presentation/behaviour of the remaining content of a
document
• Set a relationship of a document with the other document
• Metadata elements are
⮚TITLE
⮚BASE
⮚LINK
⮚COMMAND
⮚META
⮚NOSCRIPT
⮚SCRIPT
⮚STYLE
Dr Sabitha Banu PSGRKCW 24
TITLE
✔Contains title of the document appears in the title bar of the web
browser
✔Used by search engines
✔Every <head> must contain <title> element
✔Title should not be more than 256 characters
Dr Sabitha Banu PSGRKCW 25
Dr Sabitha Banu PSGRKCW 26
Dr Sabitha Banu PSGRKCW 27
BASE
✔<base> tag
✔specifies the base URL and/or target for all relative URLs in a
document.
✔must have either an href or a target attribute present, or both.
✔can only be one single <base> element in a document
✔must be inside the <head> element.
Dr Sabitha Banu PSGRKCW 28
LINK
✔Link HTML documents with other HTML document
✔Gives relationship between two HTML documents
Dr Sabitha Banu PSGRKCW 29
Dr Sabitha Banu PSGRKCW 30
Dr Sabitha Banu PSGRKCW 31
META
✔Provides information about the data
✔Appears inside the <head>
✔typically used to specify character set, page description, keywords,
author of the document, and viewport settings.
✔Metadata will not be displayed on the page, but is machine parsable.
Dr Sabitha Banu PSGRKCW 32
Dr Sabitha Banu PSGRKCW 33
COMMAND
• introduced in HTML5, and with time it was removed too.
• used to define the command button, such as a radio button, check box, or
button.
• use the COMMAND tag in conjunction with the MENU tag.
• The value of the "type" attribute of the "COMMAND" tag can be any of the
following: command /checkbox /radio
Dr Sabitha Banu PSGRKCW 34
Dr Sabitha Banu PSGRKCW 35
NOSCRIPT
• defines an alternate content to be displayed to users that have
disabled scripts in their browser or have a browser that doesn't
support script.
• can be used wthin <body>
• Cannot apply nested elements
Dr Sabitha Banu PSGRKCW 36
SCRIPT
• is used to embed a client-side script (JavaScript).
• either contains scripting statements, or it points to an external
script file through the src attribute.
• Common uses for JavaScript are image manipulation, form
validation, and dynamic changes of content.
Dr Sabitha Banu PSGRKCW 37
Dr Sabitha Banu PSGRKCW 38
STYLE
• used to define style information (CSS) for a document
• specify how HTML elements should render in a browser.
• must be included inside the <head> section of the document.
Dr Sabitha Banu PSGRKCW 39
SECTION elements
❖ Used to define the headers,footers ,sections of an HTML document
❖ List of section elements
➢ BODY
➢ SECTION
➢ NAV
➢ ARTICLE
➢ ASIDE
➢ HEADER
➢ FOOTER
➢ ADDRESS
Dr Sabitha Banu PSGRKCW 40
BODY element
• Contains the main content of the document
• Is placed after closing the <head>
• contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
Dr Sabitha Banu PSGRKCW 41
SECTION element
• defines a section in a document
• Groups the related content of the HTMl document
• Contains other sections like headers,footer
Dr Sabitha Banu PSGRKCW 42
NAV element
• defines a set of navigation links
• Displays a group of links on the HTML document
Dr Sabitha Banu PSGRKCW 43
ARTICLE element
• specifies independent, self-contained content
• An article should make sense on its own and it should be
possible to distribute it independently from the rest of the site.
• Potential sources for the <article> element:
1. Forum post
2. Blog post
3. News story
Dr Sabitha Banu PSGRKCW 44
Dr Sabitha Banu PSGRKCW 45
ASIDE element
• defines some content aside from the content it is placed in
• The aside content should be indirectly related to the surrounding content.
Dr Sabitha Banu PSGRKCW 46
Dr Sabitha Banu PSGRKCW 47
HEADER element
• Provides introductory content on HTML page
• A <header> element typically contains:
1. one or more heading elements (<h1> - <h6>)
2. logo or icon
3. authorship information
• <header> cannot be placed within a <footer>, <address> or
another <header> element.
Dr Sabitha Banu PSGRKCW 48
Dr Sabitha Banu PSGRKCW 49
FOOTER element
• Used to represent footer which contains various types of
information
Dr Sabitha Banu PSGRKCW 50
ADDRESS element
• Can be defined in the header or footer of the HTML page
• defines the contact information for the author/owner of a
document or an article.
• The text in the <address> element usually renders in italic, and
browsers will always add a line break before and after the
<address> element.
Dr Sabitha Banu PSGRKCW 51
Dr Sabitha Banu PSGRKCW 52
HEADING elements
• Used to provide different heading levels in a HTML document
• Used to create headlines of a text
• <h1> defines the most important heading.
• <h6> defines the least important heading.
Dr Sabitha Banu PSGRKCW 53
Dr Sabitha Banu PSGRKCW 54
Describing Data types
❖ Set of data classified under a specific type
❖ Common datatypes are
➢ Character
➢ Integer
➢ Floating point
➢ Boolean
❖ Based on the content /value of an attribute
Dr Sabitha Banu PSGRKCW 55
❖ Different Datatypes
➢ Basic HTML data types
➢ Datatypes defined by RFC(Request for Comments)
and IANA (Internet Assigned number Authority)
Documentation
➢ Datatypes defined by W3C specifications
Dr Sabitha Banu PSGRKCW 56
Basic HTML datatypes
• Commonly used datatypes
• Character datatype- alphanumeric, letters,numbers, symbols,
space/punctuations
• Arithmetic operations cannot be performed on the numbers included in
character datatype
• Text data type-string
• Name datatype
• Number datatype
Dr Sabitha Banu PSGRKCW 57
Dr Sabitha Banu PSGRKCW 58
RFC & IANA
• URI (uniform Resource Identifier)
• Content type
• Language code
• Character set
Dr Sabitha Banu PSGRKCW 59
URI
• Refers to set of characters used to identify /name a resource on
the internet
• Defined as simple ,extensible method of identifying a resource on
the internet
Dr Sabitha Banu PSGRKCW 60
Dr Sabitha Banu PSGRKCW 61
Dr Sabitha Banu PSGRKCW 62
Content type
• Can also be MIME(Multipurpose Internet Mail Extensions)/Media
type used in linked or embedded resource
Dr Sabitha Banu PSGRKCW 63
Language Code
• Used to represent the code of various literal languages used for
scripting
• Not case sensitive
• Language used in the attribute
Dr Sabitha Banu PSGRKCW 64
Dr Sabitha Banu PSGRKCW 65
Character set
• Set of standard characters taken from several languages and
scripts
Dr Sabitha Banu PSGRKCW 66
Dr Sabitha Banu PSGRKCW 67
W3C data types
❖ International community that develops standards to
ensure long term growth of the web
➢ DateTIme
➢ RGB triplet
➢ Colornames
➢ Linktypes
➢ Media type
Dr Sabitha Banu PSGRKCW 68
DateTime format
• Uses ISO date format
Dr Sabitha Banu PSGRKCW 69
RGB triplet
• Represent 3 standard colors
• All the other colors can be formed combining these colors with
variou proportions and intensities
• All colors are represented by hexa decimal numbers
Dr Sabitha Banu PSGRKCW 70
Color names
• 16 colors can be directly
called without using
hexadecimal values
• Easy for the user
Dr Sabitha Banu PSGRKCW 71
Link types
• Used to provide a variety of information to search engines
• Not case sensitive
• Space,tab,linefeed,carriage return,formfeed,vertical-tab,newline
characters not permitted
Dr Sabitha Banu PSGRKCW 72
Dr Sabitha Banu PSGRKCW 73
Media types
➔ Enables how to present HTMl documents on different media
➔ Available media types are
◆ Screen
◆ Tty
◆ TV
◆ Projector
◆ Handheld
◆ Print
◆ Aural
Dr Sabitha Banu PSGRKCW 74
UNIT -2
HTML 5
• HTML5 and its essentials
• Exploring New Features of HTML5
• Next Generation of Web Development
• Structuring an HTML Document
• Exploring Editors and Browsers Supported by HTML5
• Creating and Saving an HTML Document
• Validating an HTML Document
• Viewing an HTML Document
• Hosting Web Pages
Dr Sabitha Banu PSGRKCW 75
HTML5 and its essentials
• Web applications
• New elements audio,video,canvas
• Javascript API -drawing graphics,storing data
offline,dragging and dropping content
• FONT,CENTER elements were deprecated
• CSS
Dr Sabitha Banu PSGRKCW 76
Exploring New Features of HTML5
• New elements
• New attributes
• Link relations
• Microdata
• ARIA accessibility
• Web forms 2.0
• Multimedia
• 2D & 3D drawing
support
• Offline web applications
• CSS enhancements
• New selectors
• Client side storage
• Web sockets
• Web workers
• Notifications
• Drag & drop API
• Geolocation
• Modernizer
Dr Sabitha Banu PSGRKCW 77
New elements
Dr Sabitha Banu PSGRKCW 78
Dr Sabitha Banu PSGRKCW 79
Dr Sabitha Banu PSGRKCW 80
New attributes
Dr Sabitha Banu PSGRKCW 81
Link relations
● Relation between two files
● HTML document is linked with another HTML document
● Two types
○ External resources-defines the relationship between the current
document and an external resource. <HTML > head element
○ Different HTML documents-hyperlinks created using <a > element
Dr Sabitha Banu PSGRKCW 82
Microdata
• Data of an HTML document read by the computer to process the
document on the basis of its essential details
• Name-value pairs called as items
•
Dr Sabitha Banu PSGRKCW 83
Dr Sabitha Banu PSGRKCW 84
ARIA accessibility
• Webpages can be be accessed by disabled peoples
• WAI-ARIA (Web Accessibility Initiative Accessible Rich Internet
Application ) by W3C
• WAI-ARIA is a suite which makes web pages and web contents
accessible for the disabled people
• Aria attributes interfaces with html elements
• Aria attributes instruct the screen readers to read the content of
video and web pages
Dr Sabitha Banu PSGRKCW 85
Web Forms 2.0
❖ Forms can be created using FORM element
❖ It starts with the <form> tag and ends with the </form> tag.
❖ In forms user can get input using <INPUT> element ,Using different
Type attributes, we can display an <input> element in various ways.
❖ Newly added features for HTML web forms
➢ Added attributes of the FORM element
➢ Added attributes of the INPUT element
➢ Added values for the type attribute
❖ https://wikimass.com/html
Dr Sabitha Banu PSGRKCW 86
Dr Sabitha Banu PSGRKCW 87
Dr Sabitha Banu PSGRKCW 88
Added attributes of the FORM element
➔ autocomplete
◆ Specifies form’s text field can provide a list of options to automatically fill the
field
➔ Novalidate
◆ Specifies that the form will not be validated when submitted.
Dr Sabitha Banu PSGRKCW 89
Dr Sabitha Banu PSGRKCW 90
Added attributes of the INPUT element
Dr Sabitha Banu PSGRKCW 91
Dr Sabitha Banu PSGRKCW 92
Autofocus
• Automatically the input field is focused when the browser is
loaded
Dr Sabitha Banu PSGRKCW 93
formacation
• used to specify where to send the data of the form.
• After submission of the form the formaction attribute called.
• The form data is to be sent to the server after submission of the
form
Dr Sabitha Banu PSGRKCW 94
Dr Sabitha Banu PSGRKCW 95
Dr Sabitha Banu PSGRKCW 96
formenctype
• specifies how form-data should be encoded before sending it to a
server. This attribute overrides the form's enctype attribute.
• The formenctype attribute is only used for buttons with
type="submit".
Dr Sabitha Banu PSGRKCW 97
Dr Sabitha Banu PSGRKCW 98
formmethod
• specifies the HTTP method that the browser uses to submit the form.
• There are two kinds of HTTP methods, which are GET and POST.
• GET: In the GET method, after the submission of the form, the
form values will be visible in the address bar of the new
browser tab.
• POST: In the post method, after the submission of the form, the
form values will not be visible in the address bar of the new
browser tab as it was visible in the GET method. It appends
form data inside the body of the HTTP request.
Dr Sabitha Banu PSGRKCW 99
formtarget
• used to specify the name or a keyword, that indicates where to
display a result after submitting the form.
• It specify that the submitted result will be open in current
window, a new tab or a new frame.
Dr Sabitha Banu PSGRKCW 100
Placeholder
• specifies a short hint that describes the expected
value of an input field (e.g. a sample value or a
short description of the expected format).
• The short hint is displayed in the input field before
the user enters a value.
Dr Sabitha Banu PSGRKCW 101
Dr Sabitha Banu PSGRKCW 102
Added values for the type attribute
Dr Sabitha Banu PSGRKCW 103
Multimedia
• HTML5 introduces new elements audio and video to support
multimedia files
• Oga ,ogv
Dr Sabitha Banu PSGRKCW 104
2D & 3D Drawings support
➔ CANVAS support drawing surface ,graphics using javascript
➔ Two attributes (dimensions)
◆ Height
◆ width
➔ Any text inside the <canvas> element will be displayed in
browsers with JavaScript disabled and in browsers that do
not support <canvas>.
➔ Can also use SVG (scalable Vector Graphics) to create 2D
drawings(shapes)
➔ HTML5 uses CANVAS +SVG
➔ Web based graphics language (WebGL) allows to
generate 3D graphics in the browser
Dr Sabitha Banu PSGRKCW 105
Dr Sabitha Banu PSGRKCW 106
Offline Web Applications and Caching
• Create web applications when its offline
• Caching feature -contains cache manifest file (list of files
required to work offline)
• URI must be specified
Dr Sabitha Banu PSGRKCW 107
CSS enhancements
• Provides style information for the web page
• Css is a text file with .css extension suggests how web page
is presented
• Helps to maintain the website
• Separates formatting information from the structure and
content of the website
• Set more backgrounds and content in multiple columns
Dr Sabitha Banu PSGRKCW 108
Dr Sabitha Banu PSGRKCW 109
• Color gradient
• Shadows
• Background enhancements
• Enhanced box model
• Transitions
• Transformations
• Animations
Dr Sabitha Banu PSGRKCW 110
New selectors
• Searching or selecting the HTMl elements to perform various
tasks
• Search HTML elements based on the class or css syntax
Dr Sabitha Banu PSGRKCW 111
Client side storage
❖ Refers to the memory area used to store the web content
locally on the system
❖ Cookies-used to store the data in the local web browser
❖ Different types of client side storage are
➢ Session storage
➢ Local storage
➢ Database storage
Dr Sabitha Banu PSGRKCW 112
Session storage
Data represents that is attached to the browser session and
gets deleted when session ends
Local storage
Represents a key value to store the data permanently in the
local system.
Database storage
Stores the data in the client system using a SQL
database,temporary dbase for a specific period of time
openDatabse(),transaction(),executeSql()
Dr Sabitha Banu PSGRKCW 113
Web sockets
• Protocol based communication between server and
client
• Bidirectional transmission with the help of TCP
connection
• AJAX(Asynchronous JavaScript and XML)
techniques
• Drawback of AJAX is overhead
• Create web socket connection to send and receive
data between browser and server
Dr Sabitha Banu PSGRKCW 114
Web workers
• a JavaScript running in the background,
without affecting the performance of the page
• JavaScript that runs in the background,
independently of other scripts, without affecting
the performance of the page.
• Execute one or more scripts concurrently
Dr Sabitha Banu PSGRKCW 115
Notifications
• Sending notifications directly to the desktop
• Are alerts raised by a website
• requestPermission(),createNotification(),showNotification()
methods
Dr Sabitha Banu PSGRKCW 116
Drag and drop API
• Drag and drop an element on a web page
Dr Sabitha Banu PSGRKCW 117
Geolocation
• To find geographical position in the world
• Using IP address ,GPS,wireless network
connection,cell tower
• Geolocation API to share the location with trusted
apps
• Longitude and latitude
• navigator.geolocation() property
,getCurrentposition(), watchPosition() methods
Dr Sabitha Banu PSGRKCW 118
Modernizr
• Jscript library API
• Detects Whether CSS,features of HTML5 are
supported by the browser
Dr Sabitha Banu PSGRKCW 119
Next Generation of Web Development
• Designers create websites and viewers interact with
them
• How websites look and work across various browsers
• Support 2D canvas
• Local storage ,web workers increases efficiency
• View any animation ,create interactive games without
plugin download
• 2D,3D drawing applications ,handling user inputs thru
forms
Dr Sabitha Banu PSGRKCW 120
Structuring an HTML Document
❖ Created using elements and attributes
❖ Has .html extension
❖ First element -DOCTYPE (DTD definition)
❖ DTD -separate file contains formal definition of
the grammar
➢Elements and attributes
➢Tags
➢The DOCTYPE element
Dr Sabitha Banu PSGRKCW 121
Dr Sabitha Banu PSGRKCW 122
Elements and Attributes
• Building blocks
• Provides instruction to the web browser specifying
the display
• Represented by tags
• <,/,> symbols
• Have an opening(starting) tag,closing(ending) tag
• <element name >,</element name>
• Attributes-gives additional information about
propoertie and behaviours
• Name-value pairs separated by = ,enclosed with in “ “
• HTML tags,elements,attributes collectively
Dr Sabitha Banu PSGRKCW 123
Tags
• Container tags -contains any elements
• Empty tags-Do not contain any content /
elements
Tags
Container tags Empty tags
Dr Sabitha Banu PSGRKCW 124
Container Elements
• Contains text or other tags
• Has both opening and closing tags
Dr Sabitha Banu PSGRKCW 125
Empty tags
• Elements that do not contain any content
• Eg. inserting line break or image
• Do not have opening or closing tags
• Eg
Dr Sabitha Banu PSGRKCW 126
The DOCTYPE element
• First element of the HTML document
• Provides DTD(Document Type Definition )
declaration/DOCTYPE Declaration
• Used before <html> and do not have closing tag
• ! indicates DOCTYPE element is an SGML(Standard
Generalized Markup Language) declaration
• Not an <html> tag
Dr Sabitha Banu PSGRKCW 127
Exploring Editors and Browsers Supported by
HTML5
• Text /code editor
• New blank document,writing html code ,saving it as .html
Editors :
• Notepad
• Blue fish
• Dreamweaver
• OpenBEXI
• CoffeeCup Editor
• Rendera
Browsers :
● Safari
● Opera
● Firefox
● Internet Explorer
● Google chrome
● Microsoft edge
Dr Sabitha Banu PSGRKCW 128
Creating and Saving an HTML Document
Dr Sabitha Banu PSGRKCW 129
Dr Sabitha Banu PSGRKCW 130
Validating an HTML Document
• Verifying /checking the code according to HTML5 specification
• HTML validators
• Online HTML validators are
Dr Sabitha Banu PSGRKCW 131
• Open a browser http://validator.w3.org/URL
Dr Sabitha Banu PSGRKCW 132
Dr Sabitha Banu PSGRKCW 133
Dr Sabitha Banu PSGRKCW 134
Dr Sabitha Banu PSGRKCW 135
Viewing an HTML Document
Dr Sabitha Banu PSGRKCW 136
Dr Sabitha Banu PSGRKCW 137
<!DOCTYPE html>
<html>
<head>
<title>
Title of the web page
</title>
</head>
<body>
Contents of the web page
</body>
</html>
Dr Sabitha Banu PSGRKCW 138
Hosting Web pages
• Organizations make their own websites accessible through www
• Share the data on web or the internet by storing it in the internet
• Web server provider makes space for hosting the websites
• Web servers
• Web servers provide space to store html files,css files,graphics or
java script files
Dr Sabitha Banu PSGRKCW 139
Dr Sabitha Banu PSGRKCW 140
UNIT III
Extensible markup language (xml)
• Introduction
• HTML vs. XML
• Syntax of the XML
Document
• XML Attributes
• XML Validation
• XML DTD
• The Building Blocks of
XML Documents
• DTD Elements
• DTD Attributes
• DTD Entities
• DTD Validation
• XSL - XSL
Transformation
• XML Namespaces
• XML Schema
Dr Sabitha Banu PSGRKCW 141
Introduction
• XML -Extensible Markup language
• Markup language like HTML
• HTML and XML based on SGML (standard generalized
markup language)
SGML
• Developed in 1970
• IRS,IBM,defence dept
• Content structure
• Creating catalogues,manuals
• Complex and not freely available
• Approved by web consortium in 1998
• Official language of www
Dr Sabitha Banu PSGRKCW 142
XML
❖ Called as meta language ‘coz it can create other markup
language
❖ Designed to describe data and its tags are not pre-defined
❖ Uses DTD(Document type definition) to describe data
❖ XML was designed to store and transport data
❖ XML is often used for distributing data over the Internet.
❖ XML is the basis for the family of standards
➢ XML namespaces
➢ XML schema
➢ Xlink,XPath
➢ XQuery
➢ Resource Description Framework (RDF)/Semantic Web
➢ RSS(Really Simple Syndication)
Dr Sabitha Banu PSGRKCW 143
HTML vs XML
• XML is not a replacement for HTML
• Used together
XML HTML
Designed to Describe data and focus Designed to display data and focus on how
it looks
Describing information Displaying information
Extensible and own tags can be created Set of predefined tags
Dr Sabitha Banu PSGRKCW 144
Dr Sabitha Banu PSGRKCW 145
HTML vs XML
Dr Sabitha Banu PSGRKCW 146
Dr Sabitha Banu PSGRKCW 147
Dr Sabitha Banu PSGRKCW 148
Dr Sabitha Banu PSGRKCW 149
Syntax of an XML document
• XML declaration must be
included
• Defines the XML version
• First element called the root
• Child elements of the root
• Last element defines end of the
root element
Dr Sabitha Banu PSGRKCW 150
Case sensitive
Dr Sabitha Banu PSGRKCW 151
XML elements must be properly nested
Dr Sabitha Banu PSGRKCW 152
XML attributes
• Used to describe or provide additional information of XML
elements
• Attribute for an element is placed after the tag name in the start
tag.
• can add more than one attribute for a single element with
different attribute names.
Dr Sabitha Banu PSGRKCW 153
XML Attribute Rules
● Attribute values must be within quotes.
● An element cannot contain several attributes with
the same name.
Dr Sabitha Banu PSGRKCW 154
Use of Elements vs Use of Attributes
Dr Sabitha Banu PSGRKCW 155
Dr Sabitha Banu PSGRKCW 156
Dr Sabitha Banu PSGRKCW 157
Disadvantages of using attributes
• Attributes cannot contain multiple values but elements
can
• Attributes are not expandable
• Attributes cannot describe structures
• Attributes are more difficult to manipulate by program
code
• Attributes are not easy to test against DTD
Dr Sabitha Banu PSGRKCW 158
XML validation
• “Well formed “ XML Documents
• “Valid “ XML Documents
Dr Sabitha Banu PSGRKCW 159
“Well formed “ XML Documents
• Is a document that conforms to the XML syntax rules/An
XML document with correct syntax is called "Well Formed".
Dr Sabitha Banu PSGRKCW 160
“Valid “ XML Documents
• Is a well formed XML document which conforms to the rules
of a DTD
• An XML document validated against a DTD is both "Well Formed"
and "Valid".
• The purpose of a DTD is to define the structure and the legal
elements and attributes of an XML document
Dr Sabitha Banu PSGRKCW 161
XML DTD
➔ To define legal building blocks of an XML document
➔ Define the legal structure with the list of legal elements
➔ Can be declared as inline/external reference
◆ Internal DTD
◆ External DTD
Dr Sabitha Banu PSGRKCW 162
Internal DTD declaration
• If the DTD is declared inside the XML file, it must be
wrapped inside the <!DOCTYPE> definition:
Dr Sabitha Banu PSGRKCW 163
• !DOCTYPE note defines that the root element of this document is note
• !ELEMENT note defines that the note element must contain four
elements: "to,from,heading,body"
• !ELEMENT to defines the to element to be of type "#PCDATA"
• !ELEMENT from defines the from element to be of type "#PCDATA"
• !ELEMENT heading defines the heading element to be of type
"#PCDATA"
• !ELEMENT body defines the body element to be of type "#PCDATA"
Dr Sabitha Banu PSGRKCW 164
External DTD Declaration
• If the DTD is declared in an external file, the
<!DOCTYPE> definition must contain a reference to the
DTD file:
file "note.dtd", which contains the DTD
Dr Sabitha Banu PSGRKCW 165
Why to use a DTD?
• Application independent way of sharing data
• With a DTD, independent groups of people can agree on
a standard DTD for interchanging data.
• An application can use a DTD to verify that XML data is
valid.
Dr Sabitha Banu PSGRKCW 166
Building Blocks of XML Documents
➔ The main building blocks of both XML and HTML documents are elements.
◆ Elements
◆ Tags
◆ Attributes
◆ Entities
◆ PCDATA
◆ CDATA
Dr Sabitha Banu PSGRKCW 167
Elements
• Elements are the main building blocks of both XML
and HTML documents.
• For eg HTML elements are body,table
• Example of XML elements are <note> <message>
• Elements can contain text, other elements, or be
empty.
• Examples of empty HTML elements are "hr", "br"
and "img".
Dr Sabitha Banu PSGRKCW 168
Dr Sabitha Banu PSGRKCW 169
Tags
• Used to mark up elements
Dr Sabitha Banu PSGRKCW 170
Attributes
• Attributes provide extra information about elements.
• Attributes are always placed inside the opening tag of an
element.
• Attributes always come in name/value pairs.
• The following "img" element has additional information
about a source file:
• The name of the element is "img". The name of the
attribute is "src".
• The value of the attribute is "computer.gif". Since the
element itself is empty it is closed by a " /".
Dr Sabitha Banu PSGRKCW 171
Entities
• As variables used to define some common text
• Referencing to entities are called entities references
• Entities are expanded when a document is parsed by an
XML parser.
Dr Sabitha Banu PSGRKCW 172
• Predefined entities can be added to XML document by
specifying the name followed by the semicolon
Dr Sabitha Banu PSGRKCW 173
DTD Elements
• Declaring an element
• Empty elements
• Elements with data
• Elements with children
• Wrapping
• Declaring only one occurrence of the same element
• Declaring minimum one occurrence of the same
element
• Declaring zero or one occurrence of the same element
• Declaring zero or one occurrence of the same element
• Declaring mixed content
Dr Sabitha Banu PSGRKCW 174
Declaring an element
• XML elements are declared with an element declaration
• Element declaration syntax
● ELEMENT declaration is to tell the parser that we are about to
declare an element.
● Element name: It shows the name of the root element, also called a
generic identifier
● Content: It describes the type of content it can hold which can be
specific rules, any data, or even another element.
Dr Sabitha Banu PSGRKCW 175
Empty elements
• Empty elements are declared with the category keyword EMPTY
• The empty element doesn’t have a closing tag and doesn’t have
any content.
For eg
Dr Sabitha Banu PSGRKCW 176
Elements with data
• Elements with data are declared with the datatype
Dr Sabitha Banu PSGRKCW 177
Elements with children(Sequences)
• Elements with one or more children are declared with
the name of the children elements inside parentheses
• Childrens are separated by commas,appear in the same
sequence
Dr Sabitha Banu PSGRKCW 178
Wrapping
• If the DTD is to be included in the XML file it should be
wrapped in a DOCTYPE definition
Dr Sabitha Banu PSGRKCW 179
Declaring Only One Occurrence of the Same
Element
• Declares the child element message can only occur once
inside the note element
Dr Sabitha Banu PSGRKCW 180
Declaring minimum one occurrence of the same
element
• The + sign declares that the child element message
must occur one or more times inside the note element
Dr Sabitha Banu PSGRKCW 181
Declaring Zero or One Occurrences of an Element
• The ? sign declares that the child element "message" can
occur zero or one time inside the "note" element.
Dr Sabitha Banu PSGRKCW 182
Declaring Zero or More Occurrences of an Element
• The * sign declares that the child element "message"
can occur zero or more times inside the "note" element.
Dr Sabitha Banu PSGRKCW 183
Declaring Mixed Content
• declares that the element note must contain at least
one to child element, exactly one from child element,
exactly one header, zero or more message, and some
other parsed character data as well
Dr Sabitha Banu PSGRKCW 184
DTD Attributes
• Declaring attributes
• Default attribute value
• Implied attribute
• Required attribute
• Fixed attribute value
• Enumerated attribute values
Dr Sabitha Banu PSGRKCW 185
Declaring attributes
• In a DTD, attributes are declared with an ATTLIST
declaration.
Dr Sabitha Banu PSGRKCW 186
Attribute type:
● specify how the processor should handle the data that
appears in the value.
● 3 categories
○ String type
○ Tokenized types
○ Enumerated types
Dr Sabitha Banu PSGRKCW 187
Dr Sabitha Banu PSGRKCW 188
Dr Sabitha Banu PSGRKCW 189
Attribute default values
Dr Sabitha Banu PSGRKCW 190
Default Values
• It contains the default
value.
• The values can be enclosed
in single quotes(') or double
quotes(")
• <!ATTLIST element-name
attribute-name attribute-
type "default-value">
• where default-value is the
attribute value defined.
Dr Sabitha Banu PSGRKCW 191
FIXED Values
• <!ATTLIST element-name
attribute-name
attribute-type #FIXED
"value" >
Dr Sabitha Banu PSGRKCW 192
Dr Sabitha Banu PSGRKCW 193
REQUIRED values
• Whenever you want
specify that an attribute
is required, use
#REQUIRED keyword.
• <!ATTLIST element-name
attribute-name attribute-
type #REQUIRED>
Dr Sabitha Banu PSGRKCW 194
IMPLIED Values
• When declaring attributes,
always specify a value
declaration.
• If the attribute declared has
no default value, has no fixed
value, and is not required,
then declare that the
attribute as implied.
• Keyword #IMPLIED is used to
specify an attribute as
implied.
• <!ATTLIST element-name
attribute-name attribute-
type #IMPLIED> Dr Sabitha Banu PSGRKCW 195
Enumerated Attribute Values
• the attribute value to be
one of a fixed set of legal
values, enumerated
attribute values must be
given.
Dr Sabitha Banu PSGRKCW 196
Dr Sabitha Banu PSGRKCW 197
DTD Entities
• Entities are used to define shortcuts to special
characters.
• Referencing to entities is called entities referencing
• Entities can be declared internal, external , and
parameter.
Dr Sabitha Banu PSGRKCW 198
Internal entities
• Assocaite a name with a string of literal text
• Allows us to define shortcuts for frequently typed
text/text that is expected to change
• Include references to other internal entities
• Might create an error coz of recursive
Dr Sabitha Banu PSGRKCW 199
This defines an Entity called "CompanyName", that when used will be replaced by the
value "Liquid Technologies Ltd".Entities can be referenced using the notation
&EntityName;
Dr Sabitha Banu PSGRKCW 200
External entities
book.xml
Dr Sabitha Banu PSGRKCW 201
Dr Sabitha Banu PSGRKCW 202
Parameter Entities
• Can occur only in DTD
• Is identified by placing %(percent-space) in front
of its name
• %-references to parameter entities
Dr Sabitha Banu PSGRKCW 203
DTD validation
➔Two categories of xml documents
◆Well formed
◆Valid
Dr Sabitha Banu PSGRKCW 204
Well formed documents
➔ Only if it obeys the syntax of xml document
➔ Includes sequences of mark up characters that cannot be
parsed or invalid cannot be well formed
➔ Must satisfy all the below conditions
◆ Must conform to the grammar of xml documents
◆ No attribute should appear more than once in the same
start tag
◆ String attribute values cannot contain references to
external entities
◆ Non empty tags must be properly nested
◆ Parameter entities must be declared before they are
used
◆ All entities except the following :amp,lt,gt,apos,quot
must be declared
◆ A binary entity cannot be referenced in the flow of
content ,declared only as ENTITY /ENTITIES
Dr Sabitha Banu PSGRKCW 205
• If a document is not well formed ,it is not xml
• No need of xml processors to do anything with
such documents
Dr Sabitha Banu PSGRKCW 206
Valid documents
• Document is considered as valid only if it contains
proper document type declaration and if the
document obeys the constraints of that declaration
Validating with a XML parser
• Opening an xml document,XML parser might generate
an error
• parseerror object gives exac error code,error text,line
of the error
Dr Sabitha Banu PSGRKCW 207
Dr Sabitha Banu PSGRKCW 208
XSL
• XML Stylesheets Language
• Does not use predefined tags,not well understood
• HTML tags are predefined and well understood
• In xml tags are created and not understood by the
browser
• Inorder to display a XML document it is necessary
to have a mechanism to describe how the
document should be displayed
• CSS(cascading style sheet) and XSL(extensible
stylesheet language)
Dr Sabitha Banu PSGRKCW 209
➔XSL is the preferred stylesheet language of
XML & HTML
➔Consist of 3 parts
◆ XSLT- a language for transforming XML
documents
◆ XPath- language for navigating in XML
documents
◆ XSL-FO- a language for formatting XML
documents
Dr Sabitha Banu PSGRKCW 210
• XSL can be defined how an XML file should be
displayed by transforming the XML file into format
recognizable by the browser
• XSL transforms each XML element into HTML
element
• XSL can add new elements,remove
elements,rearrange,sort,test,make decisions which
to display
Dr Sabitha Banu PSGRKCW 211
XSL Transformation (XSLT)
• Transforming XML to HTML
• The <xsl:template> element
• The <xsl:value-of> element
• The <xsl:for-each> element
• Filtering the output
• Sort operation
• XSLT elements
Dr Sabitha Banu PSGRKCW 212
Transforming XML to HTML
• transform XML into XHTML using XSLT
catalog.xml
Dr Sabitha Banu PSGRKCW 213
Dr Sabitha Banu PSGRKCW 214
Dr Sabitha Banu PSGRKCW 215
"cdcatalog.xsl"
• For-each element -locates each
element in the XML document
and repeated a template for each
one
• Select -element in the source
document
• /-sub directories
• Value-of :selects the child in the
order and inserts the content of
that child into the template
• Xsl:template math=”/”-indicates
that this template corresponds to
the root( /) of the xml document
Dr Sabitha Banu PSGRKCW 216
Link the XSL Style Sheet to the XML Document
• Add the XSL style sheet reference to your XML document
("cdcatalog.xml"):
Dr Sabitha Banu PSGRKCW 217
Correct Stylesheet Declaration
• The root element that declares the document to be an XSL style sheet is
<xsl:stylesheet> or <xsl:transform>.
• The correct way to declare an XSL style sheet according to the W3C XSLT
Recommendation is:
• To get access to the XSLT elements, attributes and features we must declare the
XSLT namespace at the top of the document.
• The xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C
XSLT namespace. If you use this namespace, you must also include the attribute
version="1.0".
Dr Sabitha Banu PSGRKCW 218
<xsl:template> element
• Xsl contains one or more set of rules called templates
• Each template contains rules to apply when a
specified node is matched
• <xsl:template> Is used to create templates
• match attribute used to associate a template with an
xml document
• Can also be used to define a template for the entire
xml document
• The value of the match attribute is an
XPath expression (i.e. match="/" defines
the root of the XML source document )
Dr Sabitha Banu PSGRKCW 219
Dr Sabitha Banu PSGRKCW 220
<xsl:value-of> Element
• can be used to extract the value of an XML element and
add it to the output stream of the transformation
• The select attribute contains an XPath expression. An
XPath expression works like navigating a file system; a
forward slash (/) selects subdirectories.
Dr Sabitha Banu PSGRKCW 221
Dr Sabitha Banu PSGRKCW 222
<xsl:for-each> Element
• allows you to do looping in XSLT
• can be used to select every XML element of a specified node-set
Dr Sabitha Banu PSGRKCW 223
Dr Sabitha Banu PSGRKCW 224
Filtering the output
• filter the output from the XML file by adding a criterion to the
select attribute in the <xsl:for-each> element.
Legal filter operators are:
● = (equal)
● != (not equal)
● &lt; less than Dr Sabitha Banu PSGRKCW 225
Dr Sabitha Banu PSGRKCW 226
<xsl:sort> Element
• is used to sort the output
• To sort the output, simply add an <xsl:sort> element
inside the <xsl:for-each> element in the XSL file
Dr Sabitha Banu PSGRKCW 227
Dr Sabitha Banu PSGRKCW 228
Dr Sabitha Banu PSGRKCW 229
XSLT elements
• XSLT elements from the W3C Recommendation (XSLT
Version 1.0)
Dr Sabitha Banu PSGRKCW 230
Dr Sabitha Banu PSGRKCW 231
Dr Sabitha Banu PSGRKCW 232
XML namespaces(xmlns)
• Collection of XML elements and attributes identified by
IRI (Internationalized Resource Identifier )
• a method to avoid element name conflicts
Dr Sabitha Banu PSGRKCW 233
Solving the Name Conflict Using a Prefix
• Name conflicts in XML can easily be avoided using a name prefix.
Dr Sabitha Banu PSGRKCW 234
Declaring namespaces
• The xmlns Attribute
• When using prefixes in XML, a namespace for the prefix must be
defined.
• The namespace can be defined by an xmlns attribute in the start tag
of an element.
• The namespace declaration has the following syntax.
xmlns:prefix="URI".
Dr Sabitha Banu PSGRKCW 235
• The xmlns attribute in the
first <table> element
gives the h: prefix a
qualified namespace.
• The xmlns attribute in the
second <table> element
gives the f: prefix a
qualified namespace.
• When a namespace is
defined for an element,
all child elements with
the same prefix are
associated with the same
namespace.
Dr Sabitha Banu PSGRKCW 236
• Namespaces can
also be declared in
the XML root
element
Dr Sabitha Banu PSGRKCW 237
Default Namespaces
• Defining a default namespace for an element saves us
from using prefixes in all the child elements.
Dr Sabitha Banu PSGRKCW 238
XML Schema
• describes the structure of an XML document
• Describes Valid format of an XML document data
• The XML Schema language is also referred to as XML
Schema Definition (XSD).
Need of Schema
● XML schema supports namespaces
● The purpose of an XML Schema is to define the legal building blocks of an XML
document:
i. the elements and attributes that can appear in a document
ii. the number of (and order of) child elements
iii. data types for elements and attributes
iv. default and fixed values for elements and attributes
Dr Sabitha Banu PSGRKCW 239
The <schema> element is the root element of every XML Schema:
The <schema> element may contain some attributes.
Dr Sabitha Banu PSGRKCW 240
indicates that the elements and data types used in the schema come
from the "http://www.w3.org/2001/XMLSchema" namespace. It also
specifies that the elements and data types that come from the
"http://www.w3.org/2001/XMLSchema" namespace should be
prefixed with xs:
indicates that the elements defined by this schema (note, to, from,
heading, body.) come from the "https://www.w3schools.com"
namespace.
Dr Sabitha Banu PSGRKCW 241
indicates that the default namespace is
"https://www.w3schools.com".
Dr Sabitha Banu PSGRKCW 242
indicates that any elements used by the XML instance document which were
declared in this schema must be namespace qualified.
Dr Sabitha Banu PSGRKCW 243
• XML Schema is an XML-based alternative to DTD:
Dr Sabitha Banu PSGRKCW 244
● <xs:element name="note"> defines the
element called "note"
● <xs:complexType> the "note" element is a
complex type
● <xs:sequence> the complex type is a
sequence of elements
● <xs:element name="to" type="xs:string">
the element "to" is of type string (text)
● <xs:element name="from"
type="xs:string"> the element "from" is of
type string
● <xs:element name="heading"
type="xs:string"> the element "heading" is
of type string
● <xs:element name="body"
type="xs:string"> the element "body" is of
type string
Dr Sabitha Banu PSGRKCW 245
note.xsd
XML document has a reference to
an XML Schema
Dr Sabitha Banu PSGRKCW 246
Building blocks
• Simple elements
• Complex elements
Dr Sabitha Banu PSGRKCW 247
Simple elements
Elements which dont have sub elements /attributes ,contains only text
Built-in data types
Dr Sabitha Banu PSGRKCW 248
Complex elements
● A complex element is an XML element that contains other elements and/or
attributes.
● There are four kinds of complex elements:
★ empty elements
★ elements that contain only other elements
★ elements that contain only text
★ elements that contain both other elements and text
Dr Sabitha Banu PSGRKCW 249
XSD Attributes
If an element has attributes, it is considered to be of a complex type.
XML element with an attribute
Dr Sabitha Banu PSGRKCW 250
Dr Sabitha Banu PSGRKCW 251
Unit -5
• CSS
• AJAX
• Making a Server Request
• Loading HTML Snippets from the Server
• PLUGINS
• Writing a Plugin
• Good Practice for jQuery Plugin Development
• HTML5 DRAG AND DROP
• Implementing Drag-and- Drop File Uploads.
Dr Sabitha Banu PSGRKCW 252
CSS
• Cascading Style Sheets (www.w3.org/Style/CSS/)
offers what Web designers have been clamoring for
over the years: more control over layout
• CSS properties one element at a time, you can set the
style on one or many elements at once.
Dr Sabitha Banu PSGRKCW 253
CSS Properties
➔The css() method in jQuery is used to change the style
property of the selected element. This method can be
used in different ways.
➔The css() method can be used to get/return the present
value of the property for the selected element.
➔ The css() method in three different ways:
◆ To return a property's value from the first element matched
in a selection
◆ To set a property's value on one or more elements
◆ To set multiple properties on one or more elements
Dr Sabitha Banu PSGRKCW 254
• to get a property's value for an element
• This uses jQuery to select all <p> elements on the
page.
Dr Sabitha Banu PSGRKCW 255
• to retrieve multiple properties, you specify an array of
properties to retrieve, and an object of property/value pairs
are retrieved from the element.
• console.log() method- to know what value a variable contains.
• var message = "Hello, World!";
• console.log(message); Dr Sabitha Banu PSGRKCW 256
• to set the value of a single property
• Setting multiple properties for multiple elements
use hyphenated property names like this as well, but you must
place quotes around any property names that contain hyphens.
Dr Sabitha Banu PSGRKCW 257
jQuery's Pseudo-Classes
• In CSS the pseudo-class marks a condition or state.
• For example, it can be used to:
● Style an element when a user mouses over it
● Style visited and unvisited links differently
● Style an element when it gets focus
● The :hover pseudo-class is for styling an element
when the mouse cursor comes over the element.
Dr Sabitha Banu PSGRKCW 258
Dr Sabitha Banu PSGRKCW 259
Obtaining Outer Dimensions
• to get the width of an element which includes the
CSS width, in addition to border width and padding
width, use the property offsetWidth.
• jQuery has several important methods for working with
dimensions:
❖ width()
❖ height()
❖ innerWidth()
❖ innerHeight()
❖ outerWidth()
❖ outerHeight() Dr Sabitha Banu PSGRKCW 260
• The width() method sets or returns the width
of an element (excludes padding, border and
margin).
• The height() method sets or returns the
height of an element (excludes padding,
border and margin).
• The innerWidth() method returns the width
of an element (includes padding).
• The innerHeight() method returns the height
of an element (includes padding).
• The outerWidth() method returns the width
of an element (includes padding and border).
• The outerHeight() method returns the height
of an element (includes padding and border).
Dr Sabitha Banu PSGRKCW 261
Dr Sabitha Banu PSGRKCW 262
Dr Sabitha Banu PSGRKCW 263
contextmenu
• The contextmenu attribute is used to define an element’s
context menu, which is generally the menu invoked upon a
mouse right-click.
• The attribute’s value should hold a string that references
the id value of a <menu> tag found in the DOM.
• If there is no element found or no value, then the element
has no special context menu and the user agent should
show its default menu.
• Internet Explorer and many other browsers support an
oncontextmenu attribute that could be used to implement
the idea of this emerging attribute
Dr Sabitha Banu PSGRKCW 264
Dr Sabitha Banu PSGRKCW 265
Dr Sabitha Banu PSGRKCW 266
Dr Sabitha Banu PSGRKCW 267
Dr Sabitha Banu PSGRKCW 268
Ajax
• AJAX stands for Asynchronous JavaScript and XML.
• AJAX is the technology that enables to make
arbitrary HTTP requests from JavaScript to obtain
new data without the need for reloading a
document.
• synchronous requests (a request that causes your
code to pause execution until the answer is received
from the server) that are in the JSON format.
• XML is just one of many possible formats that you
can use to transmit data from a server to client-side
JavaScript. Dr Sabitha Banu PSGRKCW 269
• It is a technology for developing better, faster and interactive
Web Applications using HTML, CSS, JavaScript and XML.
• Asynchronous means that the the Web Application could send
and receive data from the Web Server without refreshing the
page.
• This background process of sending and receiving data from the
server along with updating different sections of a web page
defines Asynchronous property/feature of AJAX.
• AJAX allows you to send only important information to the server
not the entire page. So only valuable data from the client side is
routed to the server side. It makes your application interactive
and faster.
• There are too many web applications running on the web that
are using ajax technology like gmail, facebook,twitter, google
Dr Sabitha Banu PSGRKCW 270
Dr Sabitha Banu PSGRKCW 271
• Ajax uses XHTML for content, CSS for presentation, along with Document
Object Model and JavaScript for dynamic content display.
• Conventional web applications transmit information to and from the
server using synchronous requests. It means you fill out a form, hit submit,
and get directed to a new page with new information from the server.
• With AJAX, when you hit submit, JavaScript will make a request to the
server, interpret the results, and update the current screen. In the purest
sense, the user would never know that anything was even transmitted to
the server.
• XML is commonly used as the format for receiving server data, although
any format, including plain text, can be used.
• AJAX is a web browser technology independent of web server software.
• A user can continue to use the application while the client program
Dr Sabitha Banu PSGRKCW 272
Making a Server Request
• What's the Difference Between GET and POST?
• RESTful Requests
• Formats Used to Transport Data with an AJAX
Request
• Making a GET Request with jQuery
• Requesting Data Formatted in XML
• Sending Data Along with a Request
• Requesting JSON Formatted Data
• Making a POST Request
Dr Sabitha Banu PSGRKCW 273
Making a Server Request
• the web works through a protocol called HTTP.
• navigate to a web page, your browser fires off a request to a remote HTTP
server that's running Apache, nginx, Microsoft IIS, or some other HTTP server
software, using the HTTP communication protocol.
• AJAX makes it so that you can fire off those HTTP requests programmatically
without having to reload the entire web page.
• After your JavaScript makes a request and receives a response, you can then
take that data and manipulate the content that's in front of the user based on
the response that you receive.
• Using the HTTP protocol, there are many ways that you can request data from
the server.
• The most common ways information is transmitted between an HTTP server
and client are the GET and POST methods, although there are many more
methods that can be implemented as part of a RESTful service.
• If your server or application is configured to support RESTful calls, you will
Dr Sabitha Banu PSGRKCW 274
Dr Sabitha Banu PSGRKCW 275
What's the Difference Between GET
and POST?
• GET and POST methods seem identical
• Both allow to request a web page and send data along
with that request.
• for AJAX requests, use the GET method because it is
slightly faster from a performance
Dr Sabitha Banu PSGRKCW 276
GET POST
intended for requests that have no tangible,
lasting effect on the state of anything.
Eg :when you make a request and you're simply
retrieving data from a database
If a request results in a change to the database via
an insertion, update, or deletion—for example,
when managing content or making an order or
uploading data
provides no automatic protection against
resubmission
Automatically prevent resubmitting a form if the
user navigates back to a submitted form
has a much lower limitation on request length,varies
among browsers,Internet Explorer can support a
URL up to 2,083 characters in length
theoretically has no limitation on length other
than what your server is configured to accept.
for example, PHP is configured to accept a POST
request that's 8 MB or less in size, by default
Dr Sabitha Banu PSGRKCW 277
RESTful Requests
• Representational State Transfer(REST)
• It is a set of rules that developers follow to create their API.
One of these rules states that you should be able to get a
piece of data (called a resource) when you link to a specific
URL.
• distinguish between differing actions based on the specified HTTP
transport method.
• REST is an architectural decision in how you choose to implement
your web services.
• for example, a server-side application that behaves and handles
data differently based on whether you use the GET or POST
method.
• a REST architecture can implement the PUT and DELETE methods.
Dr Sabitha Banu PSGRKCW 278
Formats Used to Transport Data with an AJAX Request
• XML to transport data with an AJAX request
• Additionally there are two other common ways that data is
transmitted from the server to a client-side JavaScript
application:
• JSON(javascript object notation)
• HTML
• Many developers use JSON to pass AJAX updates between the
client and the server.
• Eg Websites updating live sports scores can be considered as
an example of AJAX. If these scores have to be updated on
the website, then they must be stored on the server so that
the webpage can retrieve the score when it is required. This is
where we can make use of JSON formatted data.
Dr Sabitha Banu PSGRKCW 279
• Any data that is updated using AJAX can be stored using the
JSON format on the web server.
• The JSON format is a subset of the syntax allowed to create
JavaScript
• It is considered to be its own format for data transmission
• Many popular languages have the ability to both read and send
JSON-formatted data.
Dr Sabitha Banu PSGRKCW 280
JSON
• JavaScript Object Notation
• is a lightweight text-based open standard
designed for human-readable data interchange.
• Conventions used by JSON are known to
programmers, which include C, C++, Java, Python,
Perl, etc.
• extended from the JavaScript scripting language.
• The filename extension is .json.
• JSON Internet Media type is application/json.
Dr Sabitha Banu PSGRKCW 281
Dr Sabitha Banu PSGRKCW 282
• used for serializing and transmitting structured data over
network connection.
• used to transmit data between a server and web
applications.
• Web services and APIs use JSON format to provide public
data.
• used with modern programming languages.
• read and write,lightweight text-based interchange
format,language independent.
Dr Sabitha Banu PSGRKCW 283
Dr Sabitha Banu PSGRKCW 284
Dr Sabitha Banu PSGRKCW 285
Dr Sabitha Banu PSGRKCW 286
• potential security issues associated with JSON
• The eval() function evaluates JavaScript code represented
as a string and returns its completion value.
• The source is parsed as a script.
• eval() should be used only if you are certain that the data
being evaluated cannot be manipulated and cannot contain
malicious code.
• use JSON to transmit user-supplied data that originates from
your input forms, a user can maliciously craft the data
submitted in your forms to be executed alongside your
JSON-formatted code.
Dr Sabitha Banu PSGRKCW 287
• One exploit a malicious user can take advantage of in
this way would be to execute JavaScript that takes other
users' session data and transmits that data back to the
malicious user's server.
• This type of exploit is known as an XSS (Cross-Site
Scripting) vulnerability, alternatively known as Cross-
Site Scripting Forgery.
Dr Sabitha Banu PSGRKCW 288
Making a GET Request with jQuery
• The jQuery get() and post() methods are used to request data from the server
with an HTTP GET or POST request.
• GET is basically used for just getting (retrieving) some data from the server. Note:
The GET method may return cached data.
• POST can also be used to get some data from the server. However, the POST
method NEVER caches data, and is often used to send data along with the
request.
• The $.get() method requests data from the server with an HTTP GET request.
• Syntax
$.get(URL,callback);
➔ The required URL parameter specifies the URL you wish to request.
➔ The optional callback parameter is the name of a function to be
executed if the request succeeds.
Dr Sabitha Banu PSGRKCW 289
Dr Sabitha Banu PSGRKCW 290
Dr Sabitha Banu PSGRKCW 291
Requesting Data Formatted in XML
• how to send data to the server using XML and how data
is retrieved from the server in the XML format.
• supply data to a web form, that data is sent to the
server using XML format, data is stored creating an XML
file and then a response is received in XML format, to
render data on the browser.
• create a button on the client side. Once users click on
the button, the Ajax script associated will fetch data
from an XML file on the server and then it will be
rendered in the browser.
Dr Sabitha Banu PSGRKCW 292
Dr Sabitha Banu PSGRKCW 293
Dr Sabitha Banu PSGRKCW 294
Dr Sabitha Banu PSGRKCW 295
Dr Sabitha Banu PSGRKCW 296
Dr Sabitha Banu PSGRKCW 297
Dr Sabitha Banu PSGRKCW 298
Sending Data Along with a Request
• dynamically creating the filename of the XML
file need to pass that information separately.
• jQuery accommodates passing data in the
$.get() method.
Dr Sabitha Banu PSGRKCW 299
• the path of the file you're
requesting (any URL value)
• The second argument is the
callback function that the
server's response XML will be
passed to,
• the third argument is the
type of request being made,
which is one of the following
strings: 'xml', 'html', 'script',
'json', 'jsonp', or 'text'.
• This argument is set
depending on the type of
data that expect coming back
from the server.
Dr Sabitha Banu PSGRKCW 300
Dr Sabitha Banu PSGRKCW 301
Requesting JSON Formatted Data
• uses JSON as the format for data
transport instead of XML.
• jQuery method - $.get(),
• change the last argument from
'xml' to 'json'
• jQuery offers another method
called $.getJSON() for retrieving
JSON-formatted data.
• Using JSON as the data
transportation format makes the
code even leaner and easier to
work with than XML
• reducing the size of the response
from the server. Dr Sabitha Banu PSGRKCW 302
Dr Sabitha Banu PSGRKCW 303
Dr Sabitha Banu PSGRKCW 304
Dr Sabitha Banu PSGRKCW 305
Dr Sabitha Banu PSGRKCW 306
Dr Sabitha Banu PSGRKCW 307
Dr Sabitha Banu PSGRKCW 308
Dr Sabitha Banu PSGRKCW 309
Dr Sabitha Banu PSGRKCW 310
Dr Sabitha Banu PSGRKCW 311
Making a POST request
• POST requests are identical to GET requests in jQuery
• $.get(), use $.post().
• POST method request is reserved for modifying the state
of the data in some way
• jQuery makes it easy to grab form data and pass that
along to the server.
• serialize()- method takes data for the input elements (
<input> ,<textarea>, and <select> elements) and
processes the values in those fields into a query string.
Dr Sabitha Banu PSGRKCW 312
Dr Sabitha Banu PSGRKCW 313
Dr Sabitha Banu PSGRKCW 314
Loading HTML Snippets from the Server
• transporting data from the server to the client
asynchronously is via HTML snippets.
• load() Method
• The load() method loads data from a server and puts
the returned data into the selected element.
Dr Sabitha Banu PSGRKCW 315
• The required URL parameter specifies the URL you wish to load.
• The optional data parameter specifies a set of querystring
key/value pairs to send along with the request.
• The optional callback parameter is the name of a function to be
executed after the load() method is completed.
• callback function can have different parameters:
● responseTxt - contains the resulting content if the call
succeeds
● statusTxt - contains the status of the call
● xhr - contains the XMLHttpRequest object
Dr Sabitha Banu PSGRKCW 316
Dr Sabitha Banu PSGRKCW 317
Dr Sabitha Banu PSGRKCW 318
Dr Sabitha Banu PSGRKCW 319
Plugins
• jQuery also makes itself easy to extend with new
functionality , Plugin API.
• Can make own chainable jQuery methods and
even write entire complex client-side
applications completely as jQuery plugins.
• jQuery UI library
• Plugins in the jQuery UI library help you to
implement functionality like drag-and-drop or
selecting elements, and a variety of other
functionality. Dr Sabitha Banu PSGRKCW 320
• Writing a Plugin
• The Anatomy of a jQuery Plugin
• Inspecting the Document Object Model
• Writing a Context Menu jQuery Plugin
• Good Practice for jQuery Plugin
Development
Dr Sabitha Banu PSGRKCW 321
Writing a Plugin
• jQuery plugins are easy to implement
• is pass an object literal containing the methods want to extend
jQuery
• The idea of a plugin is to do something with a collection of
elements that comes with the jQuery core a plugin, like
.fadeOut() or .addClass().
Dr Sabitha Banu PSGRKCW 322
Dr Sabitha Banu PSGRKCW 323
• creating two jQuery plugins, one for selecting an
element and one for unselecting an element.
• If the <li> element is selected, it has the class name
movieSelected applied.
• If the <li> element is not selected, then the class
name movieSelected is withdrawn.
• the movieSelected class name applies a forestgreen
background and makes the text white.
Dr Sabitha Banu PSGRKCW 324
Dr Sabitha Banu PSGRKCW 325
Dr Sabitha Banu PSGRKCW 326
Dr Sabitha Banu PSGRKCW 327
Dr Sabitha Banu PSGRKCW 328
• can have a plugin that adds a calendar to an
input element;
• can have a plugin that makes an element a
drop zone for drag and drop actions.
• Some are plugins developed by the jQuery
Foundation, such as jQuery UI, and others are
great third-party plugins that add useful
functionality, such as the ability to sort a table.
Dr Sabitha Banu PSGRKCW 329
Dr Sabitha Banu PSGRKCW 330
The Anatomy of a jQuery Plugin
• A jQuery plugin's primary purpose is to do
something to an element in the DOM.
• ‘this’ represents the element or elements that
you are working with.
• two plugins, select() and unselect().
• These jQuery plugins can be called on any HTML
element in the DOM through jQuery.
• The plugin works on one element or many
elements. Dr Sabitha Banu PSGRKCW 331
Dr Sabitha Banu PSGRKCW 332
Inspecting DOM
• HTML element objects have always had some built-in
properties and methods.
• These properties and methods make it possible to
interact with and manipulate the DOM.
• jQuery simplifies the amount of code to write query
and manipulate the DOM.
Jquery
J scirpt DOM API
Dr Sabitha Banu PSGRKCW 333
• appendChild(),getAttribute() -Javascript methods
• after(), insertAfter(), before(), insertBefore()
• setAttribute(), or hasAttributes(),attr()
Dr Sabitha Banu PSGRKCW 334
Writing a Context Menu jQuery Plugin
Dr Sabitha Banu PSGRKCW 335
Dr Sabitha Banu PSGRKCW 336
• Initialization: The code initializes the context menu using the $.contextMenu
function provided by the jQuery contextMenu plugin.
• Selector: The context menu is applied to elements with the class 'context-
menu-one'. This means that the context menu will be triggered when you
interact with elements having this class.
• Callback Function: When an item in the context menu is clicked, the
specified callback function is executed. It logs the clicked item key to the
console and displays an alert.
• Items: The context menu items are defined in the 'items' object. Each item
has a name, and optionally, an icon. The items include "Edit," "Cut," "Copy,"
"Paste," "Delete," a separator ("sep1"), and "Quit" with a custom icon.
• Event Handling: The code adds a click event listener to elements with the
class 'context-menu-one'. When an element with this class is clicked, it logs
the element to the console. Dr Sabitha Banu PSGRKCW 337
Dr Sabitha Banu PSGRKCW 338
Good Practice for jQuery Plugin Development
• possible to chain multiple method calls together.
• Own plugins don't conflict with those of third-party
plugins
• Avoid polluting the global namespace.
Dr Sabitha Banu PSGRKCW 339
HTML5 Drag and Drop
• HTML5 drag-and-drop specification with jQuery
• HTML5 drag-and-drop specification enables to drag
and drop between multiple browser windows, and
even multiple browser windows between completely
different browsers.
Dr Sabitha Banu PSGRKCW 340
Implementing Drag and Drop
• dragstart—This event is fired when a drag begins, on the
element the drag was initiated on.
• dragend—This event is fired when a drag ends, on the
element that the drag was initiated on.
• dragenter—This event is fired when an element enters the
space over the element this event is attached to; it is used to
identify an appropriate drop zone for the drag element.
• dragleave—This event is fired when an element leaves the
space over the element this event is attached to; it is also
used to identify an appropriate drop zone for the drag
element.
Dr Sabitha Banu PSGRKCW 341
dragover—This event is fired continuously while a draggable
element is within the space over the element this event is
attached to; this event is also used on the drop side.
drag—This event is fired continuously while the element is
dragged, on the element being dragged.
drop—This event is fired when a draggable element is
dropped on the element this event is attached to.
Dr Sabitha Banu PSGRKCW 342
Dr Sabitha Banu PSGRKCW 343
Dr Sabitha Banu PSGRKCW 344
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and title -->
</head>
<body>
<!-- Content goes here -->
</body>
</html>
<style>
.draggable {
/* Styling for draggable
element */
}
.droppable {
/* Styling for droppable area
*/
}
</style>
Dr Sabitha Banu PSGRKCW 345
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable">Drag me</div>
<div class="droppable">Drop here</div>
Dr Sabitha Banu PSGRKCW 346
<script>
$(function() {
// Make the .draggable
element draggable
$(".draggable").draggable();
// Make the .droppable
element droppable
$(".droppable").droppable({
drop: function(event, ui) {
// When a draggable element
is dropped into the droppable
area
$(this) .addClass("ui-state-
highlight")
.find("p")
.html("Dropped!");
}
});
});
</script>
Dr Sabitha Banu PSGRKCW 347
Implementing Drag-and-Drop File Uploads
• File uploads by drag and drop have evolved during the
past few years
• beginning with only allowing one or more files to be
uploaded by drag and drop
• expanded to allowing drag-and-drop downloads.
• again to allow both files and folders to be uploaded by
drag and drop.
• all the major browsers support file upload by drag and
drop.
• Chrome supports upload of both files and folders, and
drag and drop downloads.
Dr Sabitha Banu PSGRKCW 348
Dr Sabitha Banu PSGRKCW 349

More Related Content

Similar to Full Stack Web Development Course for Beginners

Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2Sónia
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3Jeff Byrnes
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptxMattMarino13
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmleShikshak
 
Xhtml and html5 basics
Xhtml and html5 basicsXhtml and html5 basics
Xhtml and html5 basicsmessinam
 
XML for beginners
XML for beginnersXML for beginners
XML for beginnerssafysidhu
 
HTML_JavaScript_Malaysia_2008 (2).ppt
HTML_JavaScript_Malaysia_2008 (2).pptHTML_JavaScript_Malaysia_2008 (2).ppt
HTML_JavaScript_Malaysia_2008 (2).pptDianajeon3
 
Origins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTMLOrigins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTMLHowpk
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2mmvidanes29
 
Learn HTML at ASIT
Learn HTML at ASITLearn HTML at ASIT
Learn HTML at ASITASIT
 
Web Development.pptx
Web Development.pptxWeb Development.pptx
Web Development.pptxRaghav271104
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introductionclement swarnappa
 
Html goodies
Html goodiesHtml goodies
Html goodiesAli Hasan
 

Similar to Full Stack Web Development Course for Beginners (20)

Ifi7174 lesson2
Ifi7174 lesson2Ifi7174 lesson2
Ifi7174 lesson2
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Xhtml and html5 basics
Xhtml and html5 basicsXhtml and html5 basics
Xhtml and html5 basics
 
Presentation1.pdf
Presentation1.pdfPresentation1.pdf
Presentation1.pdf
 
XML for beginners
XML for beginnersXML for beginners
XML for beginners
 
Html Simple Tutorial
Html Simple TutorialHtml Simple Tutorial
Html Simple Tutorial
 
HTML - LinkedIn
HTML - LinkedInHTML - LinkedIn
HTML - LinkedIn
 
HTML_JavaScript_Malaysia_2008 (2).ppt
HTML_JavaScript_Malaysia_2008 (2).pptHTML_JavaScript_Malaysia_2008 (2).ppt
HTML_JavaScript_Malaysia_2008 (2).ppt
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
 
Html-meeting1-1.pptx
Html-meeting1-1.pptxHtml-meeting1-1.pptx
Html-meeting1-1.pptx
 
Origins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTMLOrigins and evolution of HTML and XHTML
Origins and evolution of HTML and XHTML
 
Intro to html revised2
Intro to html revised2Intro to html revised2
Intro to html revised2
 
Learn HTML at ASIT
Learn HTML at ASITLearn HTML at ASIT
Learn HTML at ASIT
 
Web Development.pptx
Web Development.pptxWeb Development.pptx
Web Development.pptx
 
Html
HtmlHtml
Html
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
 
Html goodies
Html goodiesHtml goodies
Html goodies
 

Recently uploaded

TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...Nguyen Thanh Tu Collection
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxannathomasp01
 
How to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptxHow to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptxCeline George
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaEADTU
 
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdfRich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdfJerry Chew
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnershipsexpandedwebsite
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...Nguyen Thanh Tu Collection
 
diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....Ritu480198
 
Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...EduSkills OECD
 
e-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopale-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi RajagopalEADTU
 
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...Nguyen Thanh Tu Collection
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxMarlene Maheu
 
Improved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio AppImproved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio AppCeline George
 
AIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptAIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptNishitharanjan Rout
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjMohammed Sikander
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽中 央社
 

Recently uploaded (20)

TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
Mattingly "AI & Prompt Design: Named Entity Recognition"
Mattingly "AI & Prompt Design: Named Entity Recognition"Mattingly "AI & Prompt Design: Named Entity Recognition"
Mattingly "AI & Prompt Design: Named Entity Recognition"
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
How to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptxHow to Manage Website in Odoo 17 Studio App.pptx
How to Manage Website in Odoo 17 Studio App.pptx
 
Supporting Newcomer Multilingual Learners
Supporting Newcomer  Multilingual LearnersSupporting Newcomer  Multilingual Learners
Supporting Newcomer Multilingual Learners
 
Mattingly "AI and Prompt Design: LLMs with NER"
Mattingly "AI and Prompt Design: LLMs with NER"Mattingly "AI and Prompt Design: LLMs with NER"
Mattingly "AI and Prompt Design: LLMs with NER"
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
 
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdfRich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....diagnosting testing bsc 2nd sem.pptx....
diagnosting testing bsc 2nd sem.pptx....
 
VAMOS CUIDAR DO NOSSO PLANETA! .
VAMOS CUIDAR DO NOSSO PLANETA!                    .VAMOS CUIDAR DO NOSSO PLANETA!                    .
VAMOS CUIDAR DO NOSSO PLANETA! .
 
Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...Andreas Schleicher presents at the launch of What does child empowerment mean...
Andreas Schleicher presents at the launch of What does child empowerment mean...
 
e-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopale-Sealing at EADTU by Kamakshi Rajagopal
e-Sealing at EADTU by Kamakshi Rajagopal
 
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
 
PSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptxPSYPACT- Practicing Over State Lines May 2024.pptx
PSYPACT- Practicing Over State Lines May 2024.pptx
 
Improved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio AppImproved Approval Flow in Odoo 17 Studio App
Improved Approval Flow in Odoo 17 Studio App
 
AIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.pptAIM of Education-Teachers Training-2024.ppt
AIM of Education-Teachers Training-2024.ppt
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
 

Full Stack Web Development Course for Beginners

  • 1. Full Web Stack Development Dr Sabitha Banu Assistant Professor PSGR Krishnammal College for Women Dr Sabitha Banu PSGRKCW 1
  • 2. Course Learning Outcomes • Recall about the basics of HTML, XML, CSS, Scripting application language. • Understand the various designing concept for dynamic presentation effect in HTML and XML documents. • Apply the mark-up languages and Scripting languages for processing, identifying and presenting information in web pages with JQuery. • Analyze the web page design requirements and design web pages using Jquery built in plug-ins. Dr Sabitha Banu PSGRKCW 2
  • 3. UNIT I • Fundamentals of HTML • Understanding Elements: • Root Elements • Metadata Elements • Section Elements • Heading Elements. • Describing data types. Dr Sabitha Banu PSGRKCW 3
  • 4. Fundamentals of HTML • HyperText Markup Language • design the web pages • create a complete website structure • combination of Hypertext and Markup language • structure of web pages and website • Tags and Attributes • link multiple pages using Hyperlinks. Dr Sabitha Banu PSGRKCW 4
  • 5. Dr Sabitha Banu PSGRKCW 5
  • 6. Dr Sabitha Banu PSGRKCW 6
  • 7. Dr Sabitha Banu PSGRKCW 7
  • 8. Dr Sabitha Banu PSGRKCW 8
  • 10. Dr Sabitha Banu PSGRKCW 10
  • 11. Dr Sabitha Banu PSGRKCW 11
  • 12. Elements • Building blocks of an HTML document • collection of start and end tags with the content inserted in between them • Not case sensitive Dr Sabitha Banu PSGRKCW 12
  • 13. •Pre-defined tags •Categories of HTML elements ⮚Root Elements ⮚Metadata Elements ⮚Section Elements ⮚Heading Elements ⮚Flow ⮚Phrasing ⮚Embedded ⮚Interactive Dr Sabitha Banu PSGRKCW 13
  • 14. Root Elements • Represents main/starting element present in all HTML document • HTML element s the first element after <!doctype> element • Other elements specified within other elements • All HTML elements have attributes that will provide additional information about that particular element. • 2 parameters • name & value which define the properties of the element and are placed inside the element tag. Dr Sabitha Banu PSGRKCW 14
  • 15. •Attributes always come in name/value pairs like this: attribute_name=”value”. •Attributes are always added to the start tag of an HTML element. •Attribute values should always be enclosed in quotes. Double style quotes (“ ”) are the most common, but single style quotes (‘ ’) are also allowed. •In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes: name=’John “ShotGun” Nelson’ and vice-versa. Dr Sabitha Banu PSGRKCW 15
  • 16. Dr Sabitha Banu PSGRKCW 16
  • 17. Dr Sabitha Banu PSGRKCW 17
  • 18. Dr Sabitha Banu PSGRKCW 18
  • 19. Dr Sabitha Banu PSGRKCW 19
  • 20. Dr Sabitha Banu PSGRKCW 20
  • 21. Dr Sabitha Banu PSGRKCW 21
  • 22. Dr Sabitha Banu PSGRKCW 22
  • 23. Dr Sabitha Banu PSGRKCW 23
  • 24. Metadata Elements • Used to set the presentation/behaviour of the remaining content of a document • Set a relationship of a document with the other document • Metadata elements are ⮚TITLE ⮚BASE ⮚LINK ⮚COMMAND ⮚META ⮚NOSCRIPT ⮚SCRIPT ⮚STYLE Dr Sabitha Banu PSGRKCW 24
  • 25. TITLE ✔Contains title of the document appears in the title bar of the web browser ✔Used by search engines ✔Every <head> must contain <title> element ✔Title should not be more than 256 characters Dr Sabitha Banu PSGRKCW 25
  • 26. Dr Sabitha Banu PSGRKCW 26
  • 27. Dr Sabitha Banu PSGRKCW 27
  • 28. BASE ✔<base> tag ✔specifies the base URL and/or target for all relative URLs in a document. ✔must have either an href or a target attribute present, or both. ✔can only be one single <base> element in a document ✔must be inside the <head> element. Dr Sabitha Banu PSGRKCW 28
  • 29. LINK ✔Link HTML documents with other HTML document ✔Gives relationship between two HTML documents Dr Sabitha Banu PSGRKCW 29
  • 30. Dr Sabitha Banu PSGRKCW 30
  • 31. Dr Sabitha Banu PSGRKCW 31
  • 32. META ✔Provides information about the data ✔Appears inside the <head> ✔typically used to specify character set, page description, keywords, author of the document, and viewport settings. ✔Metadata will not be displayed on the page, but is machine parsable. Dr Sabitha Banu PSGRKCW 32
  • 33. Dr Sabitha Banu PSGRKCW 33
  • 34. COMMAND • introduced in HTML5, and with time it was removed too. • used to define the command button, such as a radio button, check box, or button. • use the COMMAND tag in conjunction with the MENU tag. • The value of the "type" attribute of the "COMMAND" tag can be any of the following: command /checkbox /radio Dr Sabitha Banu PSGRKCW 34
  • 35. Dr Sabitha Banu PSGRKCW 35
  • 36. NOSCRIPT • defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script. • can be used wthin <body> • Cannot apply nested elements Dr Sabitha Banu PSGRKCW 36
  • 37. SCRIPT • is used to embed a client-side script (JavaScript). • either contains scripting statements, or it points to an external script file through the src attribute. • Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. Dr Sabitha Banu PSGRKCW 37
  • 38. Dr Sabitha Banu PSGRKCW 38
  • 39. STYLE • used to define style information (CSS) for a document • specify how HTML elements should render in a browser. • must be included inside the <head> section of the document. Dr Sabitha Banu PSGRKCW 39
  • 40. SECTION elements ❖ Used to define the headers,footers ,sections of an HTML document ❖ List of section elements ➢ BODY ➢ SECTION ➢ NAV ➢ ARTICLE ➢ ASIDE ➢ HEADER ➢ FOOTER ➢ ADDRESS Dr Sabitha Banu PSGRKCW 40
  • 41. BODY element • Contains the main content of the document • Is placed after closing the <head> • contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Dr Sabitha Banu PSGRKCW 41
  • 42. SECTION element • defines a section in a document • Groups the related content of the HTMl document • Contains other sections like headers,footer Dr Sabitha Banu PSGRKCW 42
  • 43. NAV element • defines a set of navigation links • Displays a group of links on the HTML document Dr Sabitha Banu PSGRKCW 43
  • 44. ARTICLE element • specifies independent, self-contained content • An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. • Potential sources for the <article> element: 1. Forum post 2. Blog post 3. News story Dr Sabitha Banu PSGRKCW 44
  • 45. Dr Sabitha Banu PSGRKCW 45
  • 46. ASIDE element • defines some content aside from the content it is placed in • The aside content should be indirectly related to the surrounding content. Dr Sabitha Banu PSGRKCW 46
  • 47. Dr Sabitha Banu PSGRKCW 47
  • 48. HEADER element • Provides introductory content on HTML page • A <header> element typically contains: 1. one or more heading elements (<h1> - <h6>) 2. logo or icon 3. authorship information • <header> cannot be placed within a <footer>, <address> or another <header> element. Dr Sabitha Banu PSGRKCW 48
  • 49. Dr Sabitha Banu PSGRKCW 49
  • 50. FOOTER element • Used to represent footer which contains various types of information Dr Sabitha Banu PSGRKCW 50
  • 51. ADDRESS element • Can be defined in the header or footer of the HTML page • defines the contact information for the author/owner of a document or an article. • The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element. Dr Sabitha Banu PSGRKCW 51
  • 52. Dr Sabitha Banu PSGRKCW 52
  • 53. HEADING elements • Used to provide different heading levels in a HTML document • Used to create headlines of a text • <h1> defines the most important heading. • <h6> defines the least important heading. Dr Sabitha Banu PSGRKCW 53
  • 54. Dr Sabitha Banu PSGRKCW 54
  • 55. Describing Data types ❖ Set of data classified under a specific type ❖ Common datatypes are ➢ Character ➢ Integer ➢ Floating point ➢ Boolean ❖ Based on the content /value of an attribute Dr Sabitha Banu PSGRKCW 55
  • 56. ❖ Different Datatypes ➢ Basic HTML data types ➢ Datatypes defined by RFC(Request for Comments) and IANA (Internet Assigned number Authority) Documentation ➢ Datatypes defined by W3C specifications Dr Sabitha Banu PSGRKCW 56
  • 57. Basic HTML datatypes • Commonly used datatypes • Character datatype- alphanumeric, letters,numbers, symbols, space/punctuations • Arithmetic operations cannot be performed on the numbers included in character datatype • Text data type-string • Name datatype • Number datatype Dr Sabitha Banu PSGRKCW 57
  • 58. Dr Sabitha Banu PSGRKCW 58
  • 59. RFC & IANA • URI (uniform Resource Identifier) • Content type • Language code • Character set Dr Sabitha Banu PSGRKCW 59
  • 60. URI • Refers to set of characters used to identify /name a resource on the internet • Defined as simple ,extensible method of identifying a resource on the internet Dr Sabitha Banu PSGRKCW 60
  • 61. Dr Sabitha Banu PSGRKCW 61
  • 62. Dr Sabitha Banu PSGRKCW 62
  • 63. Content type • Can also be MIME(Multipurpose Internet Mail Extensions)/Media type used in linked or embedded resource Dr Sabitha Banu PSGRKCW 63
  • 64. Language Code • Used to represent the code of various literal languages used for scripting • Not case sensitive • Language used in the attribute Dr Sabitha Banu PSGRKCW 64
  • 65. Dr Sabitha Banu PSGRKCW 65
  • 66. Character set • Set of standard characters taken from several languages and scripts Dr Sabitha Banu PSGRKCW 66
  • 67. Dr Sabitha Banu PSGRKCW 67
  • 68. W3C data types ❖ International community that develops standards to ensure long term growth of the web ➢ DateTIme ➢ RGB triplet ➢ Colornames ➢ Linktypes ➢ Media type Dr Sabitha Banu PSGRKCW 68
  • 69. DateTime format • Uses ISO date format Dr Sabitha Banu PSGRKCW 69
  • 70. RGB triplet • Represent 3 standard colors • All the other colors can be formed combining these colors with variou proportions and intensities • All colors are represented by hexa decimal numbers Dr Sabitha Banu PSGRKCW 70
  • 71. Color names • 16 colors can be directly called without using hexadecimal values • Easy for the user Dr Sabitha Banu PSGRKCW 71
  • 72. Link types • Used to provide a variety of information to search engines • Not case sensitive • Space,tab,linefeed,carriage return,formfeed,vertical-tab,newline characters not permitted Dr Sabitha Banu PSGRKCW 72
  • 73. Dr Sabitha Banu PSGRKCW 73
  • 74. Media types ➔ Enables how to present HTMl documents on different media ➔ Available media types are ◆ Screen ◆ Tty ◆ TV ◆ Projector ◆ Handheld ◆ Print ◆ Aural Dr Sabitha Banu PSGRKCW 74
  • 75. UNIT -2 HTML 5 • HTML5 and its essentials • Exploring New Features of HTML5 • Next Generation of Web Development • Structuring an HTML Document • Exploring Editors and Browsers Supported by HTML5 • Creating and Saving an HTML Document • Validating an HTML Document • Viewing an HTML Document • Hosting Web Pages Dr Sabitha Banu PSGRKCW 75
  • 76. HTML5 and its essentials • Web applications • New elements audio,video,canvas • Javascript API -drawing graphics,storing data offline,dragging and dropping content • FONT,CENTER elements were deprecated • CSS Dr Sabitha Banu PSGRKCW 76
  • 77. Exploring New Features of HTML5 • New elements • New attributes • Link relations • Microdata • ARIA accessibility • Web forms 2.0 • Multimedia • 2D & 3D drawing support • Offline web applications • CSS enhancements • New selectors • Client side storage • Web sockets • Web workers • Notifications • Drag & drop API • Geolocation • Modernizer Dr Sabitha Banu PSGRKCW 77
  • 78. New elements Dr Sabitha Banu PSGRKCW 78
  • 79. Dr Sabitha Banu PSGRKCW 79
  • 80. Dr Sabitha Banu PSGRKCW 80
  • 81. New attributes Dr Sabitha Banu PSGRKCW 81
  • 82. Link relations ● Relation between two files ● HTML document is linked with another HTML document ● Two types ○ External resources-defines the relationship between the current document and an external resource. <HTML > head element ○ Different HTML documents-hyperlinks created using <a > element Dr Sabitha Banu PSGRKCW 82
  • 83. Microdata • Data of an HTML document read by the computer to process the document on the basis of its essential details • Name-value pairs called as items • Dr Sabitha Banu PSGRKCW 83
  • 84. Dr Sabitha Banu PSGRKCW 84
  • 85. ARIA accessibility • Webpages can be be accessed by disabled peoples • WAI-ARIA (Web Accessibility Initiative Accessible Rich Internet Application ) by W3C • WAI-ARIA is a suite which makes web pages and web contents accessible for the disabled people • Aria attributes interfaces with html elements • Aria attributes instruct the screen readers to read the content of video and web pages Dr Sabitha Banu PSGRKCW 85
  • 86. Web Forms 2.0 ❖ Forms can be created using FORM element ❖ It starts with the <form> tag and ends with the </form> tag. ❖ In forms user can get input using <INPUT> element ,Using different Type attributes, we can display an <input> element in various ways. ❖ Newly added features for HTML web forms ➢ Added attributes of the FORM element ➢ Added attributes of the INPUT element ➢ Added values for the type attribute ❖ https://wikimass.com/html Dr Sabitha Banu PSGRKCW 86
  • 87. Dr Sabitha Banu PSGRKCW 87
  • 88. Dr Sabitha Banu PSGRKCW 88
  • 89. Added attributes of the FORM element ➔ autocomplete ◆ Specifies form’s text field can provide a list of options to automatically fill the field ➔ Novalidate ◆ Specifies that the form will not be validated when submitted. Dr Sabitha Banu PSGRKCW 89
  • 90. Dr Sabitha Banu PSGRKCW 90
  • 91. Added attributes of the INPUT element Dr Sabitha Banu PSGRKCW 91
  • 92. Dr Sabitha Banu PSGRKCW 92
  • 93. Autofocus • Automatically the input field is focused when the browser is loaded Dr Sabitha Banu PSGRKCW 93
  • 94. formacation • used to specify where to send the data of the form. • After submission of the form the formaction attribute called. • The form data is to be sent to the server after submission of the form Dr Sabitha Banu PSGRKCW 94
  • 95. Dr Sabitha Banu PSGRKCW 95
  • 96. Dr Sabitha Banu PSGRKCW 96
  • 97. formenctype • specifies how form-data should be encoded before sending it to a server. This attribute overrides the form's enctype attribute. • The formenctype attribute is only used for buttons with type="submit". Dr Sabitha Banu PSGRKCW 97
  • 98. Dr Sabitha Banu PSGRKCW 98
  • 99. formmethod • specifies the HTTP method that the browser uses to submit the form. • There are two kinds of HTTP methods, which are GET and POST. • GET: In the GET method, after the submission of the form, the form values will be visible in the address bar of the new browser tab. • POST: In the post method, after the submission of the form, the form values will not be visible in the address bar of the new browser tab as it was visible in the GET method. It appends form data inside the body of the HTTP request. Dr Sabitha Banu PSGRKCW 99
  • 100. formtarget • used to specify the name or a keyword, that indicates where to display a result after submitting the form. • It specify that the submitted result will be open in current window, a new tab or a new frame. Dr Sabitha Banu PSGRKCW 100
  • 101. Placeholder • specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). • The short hint is displayed in the input field before the user enters a value. Dr Sabitha Banu PSGRKCW 101
  • 102. Dr Sabitha Banu PSGRKCW 102
  • 103. Added values for the type attribute Dr Sabitha Banu PSGRKCW 103
  • 104. Multimedia • HTML5 introduces new elements audio and video to support multimedia files • Oga ,ogv Dr Sabitha Banu PSGRKCW 104
  • 105. 2D & 3D Drawings support ➔ CANVAS support drawing surface ,graphics using javascript ➔ Two attributes (dimensions) ◆ Height ◆ width ➔ Any text inside the <canvas> element will be displayed in browsers with JavaScript disabled and in browsers that do not support <canvas>. ➔ Can also use SVG (scalable Vector Graphics) to create 2D drawings(shapes) ➔ HTML5 uses CANVAS +SVG ➔ Web based graphics language (WebGL) allows to generate 3D graphics in the browser Dr Sabitha Banu PSGRKCW 105
  • 106. Dr Sabitha Banu PSGRKCW 106
  • 107. Offline Web Applications and Caching • Create web applications when its offline • Caching feature -contains cache manifest file (list of files required to work offline) • URI must be specified Dr Sabitha Banu PSGRKCW 107
  • 108. CSS enhancements • Provides style information for the web page • Css is a text file with .css extension suggests how web page is presented • Helps to maintain the website • Separates formatting information from the structure and content of the website • Set more backgrounds and content in multiple columns Dr Sabitha Banu PSGRKCW 108
  • 109. Dr Sabitha Banu PSGRKCW 109
  • 110. • Color gradient • Shadows • Background enhancements • Enhanced box model • Transitions • Transformations • Animations Dr Sabitha Banu PSGRKCW 110
  • 111. New selectors • Searching or selecting the HTMl elements to perform various tasks • Search HTML elements based on the class or css syntax Dr Sabitha Banu PSGRKCW 111
  • 112. Client side storage ❖ Refers to the memory area used to store the web content locally on the system ❖ Cookies-used to store the data in the local web browser ❖ Different types of client side storage are ➢ Session storage ➢ Local storage ➢ Database storage Dr Sabitha Banu PSGRKCW 112
  • 113. Session storage Data represents that is attached to the browser session and gets deleted when session ends Local storage Represents a key value to store the data permanently in the local system. Database storage Stores the data in the client system using a SQL database,temporary dbase for a specific period of time openDatabse(),transaction(),executeSql() Dr Sabitha Banu PSGRKCW 113
  • 114. Web sockets • Protocol based communication between server and client • Bidirectional transmission with the help of TCP connection • AJAX(Asynchronous JavaScript and XML) techniques • Drawback of AJAX is overhead • Create web socket connection to send and receive data between browser and server Dr Sabitha Banu PSGRKCW 114
  • 115. Web workers • a JavaScript running in the background, without affecting the performance of the page • JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. • Execute one or more scripts concurrently Dr Sabitha Banu PSGRKCW 115
  • 116. Notifications • Sending notifications directly to the desktop • Are alerts raised by a website • requestPermission(),createNotification(),showNotification() methods Dr Sabitha Banu PSGRKCW 116
  • 117. Drag and drop API • Drag and drop an element on a web page Dr Sabitha Banu PSGRKCW 117
  • 118. Geolocation • To find geographical position in the world • Using IP address ,GPS,wireless network connection,cell tower • Geolocation API to share the location with trusted apps • Longitude and latitude • navigator.geolocation() property ,getCurrentposition(), watchPosition() methods Dr Sabitha Banu PSGRKCW 118
  • 119. Modernizr • Jscript library API • Detects Whether CSS,features of HTML5 are supported by the browser Dr Sabitha Banu PSGRKCW 119
  • 120. Next Generation of Web Development • Designers create websites and viewers interact with them • How websites look and work across various browsers • Support 2D canvas • Local storage ,web workers increases efficiency • View any animation ,create interactive games without plugin download • 2D,3D drawing applications ,handling user inputs thru forms Dr Sabitha Banu PSGRKCW 120
  • 121. Structuring an HTML Document ❖ Created using elements and attributes ❖ Has .html extension ❖ First element -DOCTYPE (DTD definition) ❖ DTD -separate file contains formal definition of the grammar ➢Elements and attributes ➢Tags ➢The DOCTYPE element Dr Sabitha Banu PSGRKCW 121
  • 122. Dr Sabitha Banu PSGRKCW 122
  • 123. Elements and Attributes • Building blocks • Provides instruction to the web browser specifying the display • Represented by tags • <,/,> symbols • Have an opening(starting) tag,closing(ending) tag • <element name >,</element name> • Attributes-gives additional information about propoertie and behaviours • Name-value pairs separated by = ,enclosed with in “ “ • HTML tags,elements,attributes collectively Dr Sabitha Banu PSGRKCW 123
  • 124. Tags • Container tags -contains any elements • Empty tags-Do not contain any content / elements Tags Container tags Empty tags Dr Sabitha Banu PSGRKCW 124
  • 125. Container Elements • Contains text or other tags • Has both opening and closing tags Dr Sabitha Banu PSGRKCW 125
  • 126. Empty tags • Elements that do not contain any content • Eg. inserting line break or image • Do not have opening or closing tags • Eg Dr Sabitha Banu PSGRKCW 126
  • 127. The DOCTYPE element • First element of the HTML document • Provides DTD(Document Type Definition ) declaration/DOCTYPE Declaration • Used before <html> and do not have closing tag • ! indicates DOCTYPE element is an SGML(Standard Generalized Markup Language) declaration • Not an <html> tag Dr Sabitha Banu PSGRKCW 127
  • 128. Exploring Editors and Browsers Supported by HTML5 • Text /code editor • New blank document,writing html code ,saving it as .html Editors : • Notepad • Blue fish • Dreamweaver • OpenBEXI • CoffeeCup Editor • Rendera Browsers : ● Safari ● Opera ● Firefox ● Internet Explorer ● Google chrome ● Microsoft edge Dr Sabitha Banu PSGRKCW 128
  • 129. Creating and Saving an HTML Document Dr Sabitha Banu PSGRKCW 129
  • 130. Dr Sabitha Banu PSGRKCW 130
  • 131. Validating an HTML Document • Verifying /checking the code according to HTML5 specification • HTML validators • Online HTML validators are Dr Sabitha Banu PSGRKCW 131
  • 132. • Open a browser http://validator.w3.org/URL Dr Sabitha Banu PSGRKCW 132
  • 133. Dr Sabitha Banu PSGRKCW 133
  • 134. Dr Sabitha Banu PSGRKCW 134
  • 135. Dr Sabitha Banu PSGRKCW 135
  • 136. Viewing an HTML Document Dr Sabitha Banu PSGRKCW 136
  • 137. Dr Sabitha Banu PSGRKCW 137
  • 138. <!DOCTYPE html> <html> <head> <title> Title of the web page </title> </head> <body> Contents of the web page </body> </html> Dr Sabitha Banu PSGRKCW 138
  • 139. Hosting Web pages • Organizations make their own websites accessible through www • Share the data on web or the internet by storing it in the internet • Web server provider makes space for hosting the websites • Web servers • Web servers provide space to store html files,css files,graphics or java script files Dr Sabitha Banu PSGRKCW 139
  • 140. Dr Sabitha Banu PSGRKCW 140
  • 141. UNIT III Extensible markup language (xml) • Introduction • HTML vs. XML • Syntax of the XML Document • XML Attributes • XML Validation • XML DTD • The Building Blocks of XML Documents • DTD Elements • DTD Attributes • DTD Entities • DTD Validation • XSL - XSL Transformation • XML Namespaces • XML Schema Dr Sabitha Banu PSGRKCW 141
  • 142. Introduction • XML -Extensible Markup language • Markup language like HTML • HTML and XML based on SGML (standard generalized markup language) SGML • Developed in 1970 • IRS,IBM,defence dept • Content structure • Creating catalogues,manuals • Complex and not freely available • Approved by web consortium in 1998 • Official language of www Dr Sabitha Banu PSGRKCW 142
  • 143. XML ❖ Called as meta language ‘coz it can create other markup language ❖ Designed to describe data and its tags are not pre-defined ❖ Uses DTD(Document type definition) to describe data ❖ XML was designed to store and transport data ❖ XML is often used for distributing data over the Internet. ❖ XML is the basis for the family of standards ➢ XML namespaces ➢ XML schema ➢ Xlink,XPath ➢ XQuery ➢ Resource Description Framework (RDF)/Semantic Web ➢ RSS(Really Simple Syndication) Dr Sabitha Banu PSGRKCW 143
  • 144. HTML vs XML • XML is not a replacement for HTML • Used together XML HTML Designed to Describe data and focus Designed to display data and focus on how it looks Describing information Displaying information Extensible and own tags can be created Set of predefined tags Dr Sabitha Banu PSGRKCW 144
  • 145. Dr Sabitha Banu PSGRKCW 145
  • 146. HTML vs XML Dr Sabitha Banu PSGRKCW 146
  • 147. Dr Sabitha Banu PSGRKCW 147
  • 148. Dr Sabitha Banu PSGRKCW 148
  • 149. Dr Sabitha Banu PSGRKCW 149
  • 150. Syntax of an XML document • XML declaration must be included • Defines the XML version • First element called the root • Child elements of the root • Last element defines end of the root element Dr Sabitha Banu PSGRKCW 150
  • 151. Case sensitive Dr Sabitha Banu PSGRKCW 151
  • 152. XML elements must be properly nested Dr Sabitha Banu PSGRKCW 152
  • 153. XML attributes • Used to describe or provide additional information of XML elements • Attribute for an element is placed after the tag name in the start tag. • can add more than one attribute for a single element with different attribute names. Dr Sabitha Banu PSGRKCW 153
  • 154. XML Attribute Rules ● Attribute values must be within quotes. ● An element cannot contain several attributes with the same name. Dr Sabitha Banu PSGRKCW 154
  • 155. Use of Elements vs Use of Attributes Dr Sabitha Banu PSGRKCW 155
  • 156. Dr Sabitha Banu PSGRKCW 156
  • 157. Dr Sabitha Banu PSGRKCW 157
  • 158. Disadvantages of using attributes • Attributes cannot contain multiple values but elements can • Attributes are not expandable • Attributes cannot describe structures • Attributes are more difficult to manipulate by program code • Attributes are not easy to test against DTD Dr Sabitha Banu PSGRKCW 158
  • 159. XML validation • “Well formed “ XML Documents • “Valid “ XML Documents Dr Sabitha Banu PSGRKCW 159
  • 160. “Well formed “ XML Documents • Is a document that conforms to the XML syntax rules/An XML document with correct syntax is called "Well Formed". Dr Sabitha Banu PSGRKCW 160
  • 161. “Valid “ XML Documents • Is a well formed XML document which conforms to the rules of a DTD • An XML document validated against a DTD is both "Well Formed" and "Valid". • The purpose of a DTD is to define the structure and the legal elements and attributes of an XML document Dr Sabitha Banu PSGRKCW 161
  • 162. XML DTD ➔ To define legal building blocks of an XML document ➔ Define the legal structure with the list of legal elements ➔ Can be declared as inline/external reference ◆ Internal DTD ◆ External DTD Dr Sabitha Banu PSGRKCW 162
  • 163. Internal DTD declaration • If the DTD is declared inside the XML file, it must be wrapped inside the <!DOCTYPE> definition: Dr Sabitha Banu PSGRKCW 163
  • 164. • !DOCTYPE note defines that the root element of this document is note • !ELEMENT note defines that the note element must contain four elements: "to,from,heading,body" • !ELEMENT to defines the to element to be of type "#PCDATA" • !ELEMENT from defines the from element to be of type "#PCDATA" • !ELEMENT heading defines the heading element to be of type "#PCDATA" • !ELEMENT body defines the body element to be of type "#PCDATA" Dr Sabitha Banu PSGRKCW 164
  • 165. External DTD Declaration • If the DTD is declared in an external file, the <!DOCTYPE> definition must contain a reference to the DTD file: file "note.dtd", which contains the DTD Dr Sabitha Banu PSGRKCW 165
  • 166. Why to use a DTD? • Application independent way of sharing data • With a DTD, independent groups of people can agree on a standard DTD for interchanging data. • An application can use a DTD to verify that XML data is valid. Dr Sabitha Banu PSGRKCW 166
  • 167. Building Blocks of XML Documents ➔ The main building blocks of both XML and HTML documents are elements. ◆ Elements ◆ Tags ◆ Attributes ◆ Entities ◆ PCDATA ◆ CDATA Dr Sabitha Banu PSGRKCW 167
  • 168. Elements • Elements are the main building blocks of both XML and HTML documents. • For eg HTML elements are body,table • Example of XML elements are <note> <message> • Elements can contain text, other elements, or be empty. • Examples of empty HTML elements are "hr", "br" and "img". Dr Sabitha Banu PSGRKCW 168
  • 169. Dr Sabitha Banu PSGRKCW 169
  • 170. Tags • Used to mark up elements Dr Sabitha Banu PSGRKCW 170
  • 171. Attributes • Attributes provide extra information about elements. • Attributes are always placed inside the opening tag of an element. • Attributes always come in name/value pairs. • The following "img" element has additional information about a source file: • The name of the element is "img". The name of the attribute is "src". • The value of the attribute is "computer.gif". Since the element itself is empty it is closed by a " /". Dr Sabitha Banu PSGRKCW 171
  • 172. Entities • As variables used to define some common text • Referencing to entities are called entities references • Entities are expanded when a document is parsed by an XML parser. Dr Sabitha Banu PSGRKCW 172
  • 173. • Predefined entities can be added to XML document by specifying the name followed by the semicolon Dr Sabitha Banu PSGRKCW 173
  • 174. DTD Elements • Declaring an element • Empty elements • Elements with data • Elements with children • Wrapping • Declaring only one occurrence of the same element • Declaring minimum one occurrence of the same element • Declaring zero or one occurrence of the same element • Declaring zero or one occurrence of the same element • Declaring mixed content Dr Sabitha Banu PSGRKCW 174
  • 175. Declaring an element • XML elements are declared with an element declaration • Element declaration syntax ● ELEMENT declaration is to tell the parser that we are about to declare an element. ● Element name: It shows the name of the root element, also called a generic identifier ● Content: It describes the type of content it can hold which can be specific rules, any data, or even another element. Dr Sabitha Banu PSGRKCW 175
  • 176. Empty elements • Empty elements are declared with the category keyword EMPTY • The empty element doesn’t have a closing tag and doesn’t have any content. For eg Dr Sabitha Banu PSGRKCW 176
  • 177. Elements with data • Elements with data are declared with the datatype Dr Sabitha Banu PSGRKCW 177
  • 178. Elements with children(Sequences) • Elements with one or more children are declared with the name of the children elements inside parentheses • Childrens are separated by commas,appear in the same sequence Dr Sabitha Banu PSGRKCW 178
  • 179. Wrapping • If the DTD is to be included in the XML file it should be wrapped in a DOCTYPE definition Dr Sabitha Banu PSGRKCW 179
  • 180. Declaring Only One Occurrence of the Same Element • Declares the child element message can only occur once inside the note element Dr Sabitha Banu PSGRKCW 180
  • 181. Declaring minimum one occurrence of the same element • The + sign declares that the child element message must occur one or more times inside the note element Dr Sabitha Banu PSGRKCW 181
  • 182. Declaring Zero or One Occurrences of an Element • The ? sign declares that the child element "message" can occur zero or one time inside the "note" element. Dr Sabitha Banu PSGRKCW 182
  • 183. Declaring Zero or More Occurrences of an Element • The * sign declares that the child element "message" can occur zero or more times inside the "note" element. Dr Sabitha Banu PSGRKCW 183
  • 184. Declaring Mixed Content • declares that the element note must contain at least one to child element, exactly one from child element, exactly one header, zero or more message, and some other parsed character data as well Dr Sabitha Banu PSGRKCW 184
  • 185. DTD Attributes • Declaring attributes • Default attribute value • Implied attribute • Required attribute • Fixed attribute value • Enumerated attribute values Dr Sabitha Banu PSGRKCW 185
  • 186. Declaring attributes • In a DTD, attributes are declared with an ATTLIST declaration. Dr Sabitha Banu PSGRKCW 186
  • 187. Attribute type: ● specify how the processor should handle the data that appears in the value. ● 3 categories ○ String type ○ Tokenized types ○ Enumerated types Dr Sabitha Banu PSGRKCW 187
  • 188. Dr Sabitha Banu PSGRKCW 188
  • 189. Dr Sabitha Banu PSGRKCW 189
  • 190. Attribute default values Dr Sabitha Banu PSGRKCW 190
  • 191. Default Values • It contains the default value. • The values can be enclosed in single quotes(') or double quotes(") • <!ATTLIST element-name attribute-name attribute- type "default-value"> • where default-value is the attribute value defined. Dr Sabitha Banu PSGRKCW 191
  • 192. FIXED Values • <!ATTLIST element-name attribute-name attribute-type #FIXED "value" > Dr Sabitha Banu PSGRKCW 192
  • 193. Dr Sabitha Banu PSGRKCW 193
  • 194. REQUIRED values • Whenever you want specify that an attribute is required, use #REQUIRED keyword. • <!ATTLIST element-name attribute-name attribute- type #REQUIRED> Dr Sabitha Banu PSGRKCW 194
  • 195. IMPLIED Values • When declaring attributes, always specify a value declaration. • If the attribute declared has no default value, has no fixed value, and is not required, then declare that the attribute as implied. • Keyword #IMPLIED is used to specify an attribute as implied. • <!ATTLIST element-name attribute-name attribute- type #IMPLIED> Dr Sabitha Banu PSGRKCW 195
  • 196. Enumerated Attribute Values • the attribute value to be one of a fixed set of legal values, enumerated attribute values must be given. Dr Sabitha Banu PSGRKCW 196
  • 197. Dr Sabitha Banu PSGRKCW 197
  • 198. DTD Entities • Entities are used to define shortcuts to special characters. • Referencing to entities is called entities referencing • Entities can be declared internal, external , and parameter. Dr Sabitha Banu PSGRKCW 198
  • 199. Internal entities • Assocaite a name with a string of literal text • Allows us to define shortcuts for frequently typed text/text that is expected to change • Include references to other internal entities • Might create an error coz of recursive Dr Sabitha Banu PSGRKCW 199
  • 200. This defines an Entity called "CompanyName", that when used will be replaced by the value "Liquid Technologies Ltd".Entities can be referenced using the notation &EntityName; Dr Sabitha Banu PSGRKCW 200
  • 202. Dr Sabitha Banu PSGRKCW 202
  • 203. Parameter Entities • Can occur only in DTD • Is identified by placing %(percent-space) in front of its name • %-references to parameter entities Dr Sabitha Banu PSGRKCW 203
  • 204. DTD validation ➔Two categories of xml documents ◆Well formed ◆Valid Dr Sabitha Banu PSGRKCW 204
  • 205. Well formed documents ➔ Only if it obeys the syntax of xml document ➔ Includes sequences of mark up characters that cannot be parsed or invalid cannot be well formed ➔ Must satisfy all the below conditions ◆ Must conform to the grammar of xml documents ◆ No attribute should appear more than once in the same start tag ◆ String attribute values cannot contain references to external entities ◆ Non empty tags must be properly nested ◆ Parameter entities must be declared before they are used ◆ All entities except the following :amp,lt,gt,apos,quot must be declared ◆ A binary entity cannot be referenced in the flow of content ,declared only as ENTITY /ENTITIES Dr Sabitha Banu PSGRKCW 205
  • 206. • If a document is not well formed ,it is not xml • No need of xml processors to do anything with such documents Dr Sabitha Banu PSGRKCW 206
  • 207. Valid documents • Document is considered as valid only if it contains proper document type declaration and if the document obeys the constraints of that declaration Validating with a XML parser • Opening an xml document,XML parser might generate an error • parseerror object gives exac error code,error text,line of the error Dr Sabitha Banu PSGRKCW 207
  • 208. Dr Sabitha Banu PSGRKCW 208
  • 209. XSL • XML Stylesheets Language • Does not use predefined tags,not well understood • HTML tags are predefined and well understood • In xml tags are created and not understood by the browser • Inorder to display a XML document it is necessary to have a mechanism to describe how the document should be displayed • CSS(cascading style sheet) and XSL(extensible stylesheet language) Dr Sabitha Banu PSGRKCW 209
  • 210. ➔XSL is the preferred stylesheet language of XML & HTML ➔Consist of 3 parts ◆ XSLT- a language for transforming XML documents ◆ XPath- language for navigating in XML documents ◆ XSL-FO- a language for formatting XML documents Dr Sabitha Banu PSGRKCW 210
  • 211. • XSL can be defined how an XML file should be displayed by transforming the XML file into format recognizable by the browser • XSL transforms each XML element into HTML element • XSL can add new elements,remove elements,rearrange,sort,test,make decisions which to display Dr Sabitha Banu PSGRKCW 211
  • 212. XSL Transformation (XSLT) • Transforming XML to HTML • The <xsl:template> element • The <xsl:value-of> element • The <xsl:for-each> element • Filtering the output • Sort operation • XSLT elements Dr Sabitha Banu PSGRKCW 212
  • 213. Transforming XML to HTML • transform XML into XHTML using XSLT catalog.xml Dr Sabitha Banu PSGRKCW 213
  • 214. Dr Sabitha Banu PSGRKCW 214
  • 215. Dr Sabitha Banu PSGRKCW 215
  • 216. "cdcatalog.xsl" • For-each element -locates each element in the XML document and repeated a template for each one • Select -element in the source document • /-sub directories • Value-of :selects the child in the order and inserts the content of that child into the template • Xsl:template math=”/”-indicates that this template corresponds to the root( /) of the xml document Dr Sabitha Banu PSGRKCW 216
  • 217. Link the XSL Style Sheet to the XML Document • Add the XSL style sheet reference to your XML document ("cdcatalog.xml"): Dr Sabitha Banu PSGRKCW 217
  • 218. Correct Stylesheet Declaration • The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>. • The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is: • To get access to the XSLT elements, attributes and features we must declare the XSLT namespace at the top of the document. • The xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT namespace. If you use this namespace, you must also include the attribute version="1.0". Dr Sabitha Banu PSGRKCW 218
  • 219. <xsl:template> element • Xsl contains one or more set of rules called templates • Each template contains rules to apply when a specified node is matched • <xsl:template> Is used to create templates • match attribute used to associate a template with an xml document • Can also be used to define a template for the entire xml document • The value of the match attribute is an XPath expression (i.e. match="/" defines the root of the XML source document ) Dr Sabitha Banu PSGRKCW 219
  • 220. Dr Sabitha Banu PSGRKCW 220
  • 221. <xsl:value-of> Element • can be used to extract the value of an XML element and add it to the output stream of the transformation • The select attribute contains an XPath expression. An XPath expression works like navigating a file system; a forward slash (/) selects subdirectories. Dr Sabitha Banu PSGRKCW 221
  • 222. Dr Sabitha Banu PSGRKCW 222
  • 223. <xsl:for-each> Element • allows you to do looping in XSLT • can be used to select every XML element of a specified node-set Dr Sabitha Banu PSGRKCW 223
  • 224. Dr Sabitha Banu PSGRKCW 224
  • 225. Filtering the output • filter the output from the XML file by adding a criterion to the select attribute in the <xsl:for-each> element. Legal filter operators are: ● = (equal) ● != (not equal) ● &lt; less than Dr Sabitha Banu PSGRKCW 225
  • 226. Dr Sabitha Banu PSGRKCW 226
  • 227. <xsl:sort> Element • is used to sort the output • To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each> element in the XSL file Dr Sabitha Banu PSGRKCW 227
  • 228. Dr Sabitha Banu PSGRKCW 228
  • 229. Dr Sabitha Banu PSGRKCW 229
  • 230. XSLT elements • XSLT elements from the W3C Recommendation (XSLT Version 1.0) Dr Sabitha Banu PSGRKCW 230
  • 231. Dr Sabitha Banu PSGRKCW 231
  • 232. Dr Sabitha Banu PSGRKCW 232
  • 233. XML namespaces(xmlns) • Collection of XML elements and attributes identified by IRI (Internationalized Resource Identifier ) • a method to avoid element name conflicts Dr Sabitha Banu PSGRKCW 233
  • 234. Solving the Name Conflict Using a Prefix • Name conflicts in XML can easily be avoided using a name prefix. Dr Sabitha Banu PSGRKCW 234
  • 235. Declaring namespaces • The xmlns Attribute • When using prefixes in XML, a namespace for the prefix must be defined. • The namespace can be defined by an xmlns attribute in the start tag of an element. • The namespace declaration has the following syntax. xmlns:prefix="URI". Dr Sabitha Banu PSGRKCW 235
  • 236. • The xmlns attribute in the first <table> element gives the h: prefix a qualified namespace. • The xmlns attribute in the second <table> element gives the f: prefix a qualified namespace. • When a namespace is defined for an element, all child elements with the same prefix are associated with the same namespace. Dr Sabitha Banu PSGRKCW 236
  • 237. • Namespaces can also be declared in the XML root element Dr Sabitha Banu PSGRKCW 237
  • 238. Default Namespaces • Defining a default namespace for an element saves us from using prefixes in all the child elements. Dr Sabitha Banu PSGRKCW 238
  • 239. XML Schema • describes the structure of an XML document • Describes Valid format of an XML document data • The XML Schema language is also referred to as XML Schema Definition (XSD). Need of Schema ● XML schema supports namespaces ● The purpose of an XML Schema is to define the legal building blocks of an XML document: i. the elements and attributes that can appear in a document ii. the number of (and order of) child elements iii. data types for elements and attributes iv. default and fixed values for elements and attributes Dr Sabitha Banu PSGRKCW 239
  • 240. The <schema> element is the root element of every XML Schema: The <schema> element may contain some attributes. Dr Sabitha Banu PSGRKCW 240
  • 241. indicates that the elements and data types used in the schema come from the "http://www.w3.org/2001/XMLSchema" namespace. It also specifies that the elements and data types that come from the "http://www.w3.org/2001/XMLSchema" namespace should be prefixed with xs: indicates that the elements defined by this schema (note, to, from, heading, body.) come from the "https://www.w3schools.com" namespace. Dr Sabitha Banu PSGRKCW 241
  • 242. indicates that the default namespace is "https://www.w3schools.com". Dr Sabitha Banu PSGRKCW 242
  • 243. indicates that any elements used by the XML instance document which were declared in this schema must be namespace qualified. Dr Sabitha Banu PSGRKCW 243
  • 244. • XML Schema is an XML-based alternative to DTD: Dr Sabitha Banu PSGRKCW 244
  • 245. ● <xs:element name="note"> defines the element called "note" ● <xs:complexType> the "note" element is a complex type ● <xs:sequence> the complex type is a sequence of elements ● <xs:element name="to" type="xs:string"> the element "to" is of type string (text) ● <xs:element name="from" type="xs:string"> the element "from" is of type string ● <xs:element name="heading" type="xs:string"> the element "heading" is of type string ● <xs:element name="body" type="xs:string"> the element "body" is of type string Dr Sabitha Banu PSGRKCW 245
  • 246. note.xsd XML document has a reference to an XML Schema Dr Sabitha Banu PSGRKCW 246
  • 247. Building blocks • Simple elements • Complex elements Dr Sabitha Banu PSGRKCW 247
  • 248. Simple elements Elements which dont have sub elements /attributes ,contains only text Built-in data types Dr Sabitha Banu PSGRKCW 248
  • 249. Complex elements ● A complex element is an XML element that contains other elements and/or attributes. ● There are four kinds of complex elements: ★ empty elements ★ elements that contain only other elements ★ elements that contain only text ★ elements that contain both other elements and text Dr Sabitha Banu PSGRKCW 249
  • 250. XSD Attributes If an element has attributes, it is considered to be of a complex type. XML element with an attribute Dr Sabitha Banu PSGRKCW 250
  • 251. Dr Sabitha Banu PSGRKCW 251
  • 252. Unit -5 • CSS • AJAX • Making a Server Request • Loading HTML Snippets from the Server • PLUGINS • Writing a Plugin • Good Practice for jQuery Plugin Development • HTML5 DRAG AND DROP • Implementing Drag-and- Drop File Uploads. Dr Sabitha Banu PSGRKCW 252
  • 253. CSS • Cascading Style Sheets (www.w3.org/Style/CSS/) offers what Web designers have been clamoring for over the years: more control over layout • CSS properties one element at a time, you can set the style on one or many elements at once. Dr Sabitha Banu PSGRKCW 253
  • 254. CSS Properties ➔The css() method in jQuery is used to change the style property of the selected element. This method can be used in different ways. ➔The css() method can be used to get/return the present value of the property for the selected element. ➔ The css() method in three different ways: ◆ To return a property's value from the first element matched in a selection ◆ To set a property's value on one or more elements ◆ To set multiple properties on one or more elements Dr Sabitha Banu PSGRKCW 254
  • 255. • to get a property's value for an element • This uses jQuery to select all <p> elements on the page. Dr Sabitha Banu PSGRKCW 255
  • 256. • to retrieve multiple properties, you specify an array of properties to retrieve, and an object of property/value pairs are retrieved from the element. • console.log() method- to know what value a variable contains. • var message = "Hello, World!"; • console.log(message); Dr Sabitha Banu PSGRKCW 256
  • 257. • to set the value of a single property • Setting multiple properties for multiple elements use hyphenated property names like this as well, but you must place quotes around any property names that contain hyphens. Dr Sabitha Banu PSGRKCW 257
  • 258. jQuery's Pseudo-Classes • In CSS the pseudo-class marks a condition or state. • For example, it can be used to: ● Style an element when a user mouses over it ● Style visited and unvisited links differently ● Style an element when it gets focus ● The :hover pseudo-class is for styling an element when the mouse cursor comes over the element. Dr Sabitha Banu PSGRKCW 258
  • 259. Dr Sabitha Banu PSGRKCW 259
  • 260. Obtaining Outer Dimensions • to get the width of an element which includes the CSS width, in addition to border width and padding width, use the property offsetWidth. • jQuery has several important methods for working with dimensions: ❖ width() ❖ height() ❖ innerWidth() ❖ innerHeight() ❖ outerWidth() ❖ outerHeight() Dr Sabitha Banu PSGRKCW 260
  • 261. • The width() method sets or returns the width of an element (excludes padding, border and margin). • The height() method sets or returns the height of an element (excludes padding, border and margin). • The innerWidth() method returns the width of an element (includes padding). • The innerHeight() method returns the height of an element (includes padding). • The outerWidth() method returns the width of an element (includes padding and border). • The outerHeight() method returns the height of an element (includes padding and border). Dr Sabitha Banu PSGRKCW 261
  • 262. Dr Sabitha Banu PSGRKCW 262
  • 263. Dr Sabitha Banu PSGRKCW 263
  • 264. contextmenu • The contextmenu attribute is used to define an element’s context menu, which is generally the menu invoked upon a mouse right-click. • The attribute’s value should hold a string that references the id value of a <menu> tag found in the DOM. • If there is no element found or no value, then the element has no special context menu and the user agent should show its default menu. • Internet Explorer and many other browsers support an oncontextmenu attribute that could be used to implement the idea of this emerging attribute Dr Sabitha Banu PSGRKCW 264
  • 265. Dr Sabitha Banu PSGRKCW 265
  • 266. Dr Sabitha Banu PSGRKCW 266
  • 267. Dr Sabitha Banu PSGRKCW 267
  • 268. Dr Sabitha Banu PSGRKCW 268
  • 269. Ajax • AJAX stands for Asynchronous JavaScript and XML. • AJAX is the technology that enables to make arbitrary HTTP requests from JavaScript to obtain new data without the need for reloading a document. • synchronous requests (a request that causes your code to pause execution until the answer is received from the server) that are in the JSON format. • XML is just one of many possible formats that you can use to transmit data from a server to client-side JavaScript. Dr Sabitha Banu PSGRKCW 269
  • 270. • It is a technology for developing better, faster and interactive Web Applications using HTML, CSS, JavaScript and XML. • Asynchronous means that the the Web Application could send and receive data from the Web Server without refreshing the page. • This background process of sending and receiving data from the server along with updating different sections of a web page defines Asynchronous property/feature of AJAX. • AJAX allows you to send only important information to the server not the entire page. So only valuable data from the client side is routed to the server side. It makes your application interactive and faster. • There are too many web applications running on the web that are using ajax technology like gmail, facebook,twitter, google Dr Sabitha Banu PSGRKCW 270
  • 271. Dr Sabitha Banu PSGRKCW 271
  • 272. • Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display. • Conventional web applications transmit information to and from the server using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server. • With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server. • XML is commonly used as the format for receiving server data, although any format, including plain text, can be used. • AJAX is a web browser technology independent of web server software. • A user can continue to use the application while the client program Dr Sabitha Banu PSGRKCW 272
  • 273. Making a Server Request • What's the Difference Between GET and POST? • RESTful Requests • Formats Used to Transport Data with an AJAX Request • Making a GET Request with jQuery • Requesting Data Formatted in XML • Sending Data Along with a Request • Requesting JSON Formatted Data • Making a POST Request Dr Sabitha Banu PSGRKCW 273
  • 274. Making a Server Request • the web works through a protocol called HTTP. • navigate to a web page, your browser fires off a request to a remote HTTP server that's running Apache, nginx, Microsoft IIS, or some other HTTP server software, using the HTTP communication protocol. • AJAX makes it so that you can fire off those HTTP requests programmatically without having to reload the entire web page. • After your JavaScript makes a request and receives a response, you can then take that data and manipulate the content that's in front of the user based on the response that you receive. • Using the HTTP protocol, there are many ways that you can request data from the server. • The most common ways information is transmitted between an HTTP server and client are the GET and POST methods, although there are many more methods that can be implemented as part of a RESTful service. • If your server or application is configured to support RESTful calls, you will Dr Sabitha Banu PSGRKCW 274
  • 275. Dr Sabitha Banu PSGRKCW 275
  • 276. What's the Difference Between GET and POST? • GET and POST methods seem identical • Both allow to request a web page and send data along with that request. • for AJAX requests, use the GET method because it is slightly faster from a performance Dr Sabitha Banu PSGRKCW 276
  • 277. GET POST intended for requests that have no tangible, lasting effect on the state of anything. Eg :when you make a request and you're simply retrieving data from a database If a request results in a change to the database via an insertion, update, or deletion—for example, when managing content or making an order or uploading data provides no automatic protection against resubmission Automatically prevent resubmitting a form if the user navigates back to a submitted form has a much lower limitation on request length,varies among browsers,Internet Explorer can support a URL up to 2,083 characters in length theoretically has no limitation on length other than what your server is configured to accept. for example, PHP is configured to accept a POST request that's 8 MB or less in size, by default Dr Sabitha Banu PSGRKCW 277
  • 278. RESTful Requests • Representational State Transfer(REST) • It is a set of rules that developers follow to create their API. One of these rules states that you should be able to get a piece of data (called a resource) when you link to a specific URL. • distinguish between differing actions based on the specified HTTP transport method. • REST is an architectural decision in how you choose to implement your web services. • for example, a server-side application that behaves and handles data differently based on whether you use the GET or POST method. • a REST architecture can implement the PUT and DELETE methods. Dr Sabitha Banu PSGRKCW 278
  • 279. Formats Used to Transport Data with an AJAX Request • XML to transport data with an AJAX request • Additionally there are two other common ways that data is transmitted from the server to a client-side JavaScript application: • JSON(javascript object notation) • HTML • Many developers use JSON to pass AJAX updates between the client and the server. • Eg Websites updating live sports scores can be considered as an example of AJAX. If these scores have to be updated on the website, then they must be stored on the server so that the webpage can retrieve the score when it is required. This is where we can make use of JSON formatted data. Dr Sabitha Banu PSGRKCW 279
  • 280. • Any data that is updated using AJAX can be stored using the JSON format on the web server. • The JSON format is a subset of the syntax allowed to create JavaScript • It is considered to be its own format for data transmission • Many popular languages have the ability to both read and send JSON-formatted data. Dr Sabitha Banu PSGRKCW 280
  • 281. JSON • JavaScript Object Notation • is a lightweight text-based open standard designed for human-readable data interchange. • Conventions used by JSON are known to programmers, which include C, C++, Java, Python, Perl, etc. • extended from the JavaScript scripting language. • The filename extension is .json. • JSON Internet Media type is application/json. Dr Sabitha Banu PSGRKCW 281
  • 282. Dr Sabitha Banu PSGRKCW 282
  • 283. • used for serializing and transmitting structured data over network connection. • used to transmit data between a server and web applications. • Web services and APIs use JSON format to provide public data. • used with modern programming languages. • read and write,lightweight text-based interchange format,language independent. Dr Sabitha Banu PSGRKCW 283
  • 284. Dr Sabitha Banu PSGRKCW 284
  • 285. Dr Sabitha Banu PSGRKCW 285
  • 286. Dr Sabitha Banu PSGRKCW 286
  • 287. • potential security issues associated with JSON • The eval() function evaluates JavaScript code represented as a string and returns its completion value. • The source is parsed as a script. • eval() should be used only if you are certain that the data being evaluated cannot be manipulated and cannot contain malicious code. • use JSON to transmit user-supplied data that originates from your input forms, a user can maliciously craft the data submitted in your forms to be executed alongside your JSON-formatted code. Dr Sabitha Banu PSGRKCW 287
  • 288. • One exploit a malicious user can take advantage of in this way would be to execute JavaScript that takes other users' session data and transmits that data back to the malicious user's server. • This type of exploit is known as an XSS (Cross-Site Scripting) vulnerability, alternatively known as Cross- Site Scripting Forgery. Dr Sabitha Banu PSGRKCW 288
  • 289. Making a GET Request with jQuery • The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request. • GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data. • POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request. • The $.get() method requests data from the server with an HTTP GET request. • Syntax $.get(URL,callback); ➔ The required URL parameter specifies the URL you wish to request. ➔ The optional callback parameter is the name of a function to be executed if the request succeeds. Dr Sabitha Banu PSGRKCW 289
  • 290. Dr Sabitha Banu PSGRKCW 290
  • 291. Dr Sabitha Banu PSGRKCW 291
  • 292. Requesting Data Formatted in XML • how to send data to the server using XML and how data is retrieved from the server in the XML format. • supply data to a web form, that data is sent to the server using XML format, data is stored creating an XML file and then a response is received in XML format, to render data on the browser. • create a button on the client side. Once users click on the button, the Ajax script associated will fetch data from an XML file on the server and then it will be rendered in the browser. Dr Sabitha Banu PSGRKCW 292
  • 293. Dr Sabitha Banu PSGRKCW 293
  • 294. Dr Sabitha Banu PSGRKCW 294
  • 295. Dr Sabitha Banu PSGRKCW 295
  • 296. Dr Sabitha Banu PSGRKCW 296
  • 297. Dr Sabitha Banu PSGRKCW 297
  • 298. Dr Sabitha Banu PSGRKCW 298
  • 299. Sending Data Along with a Request • dynamically creating the filename of the XML file need to pass that information separately. • jQuery accommodates passing data in the $.get() method. Dr Sabitha Banu PSGRKCW 299
  • 300. • the path of the file you're requesting (any URL value) • The second argument is the callback function that the server's response XML will be passed to, • the third argument is the type of request being made, which is one of the following strings: 'xml', 'html', 'script', 'json', 'jsonp', or 'text'. • This argument is set depending on the type of data that expect coming back from the server. Dr Sabitha Banu PSGRKCW 300
  • 301. Dr Sabitha Banu PSGRKCW 301
  • 302. Requesting JSON Formatted Data • uses JSON as the format for data transport instead of XML. • jQuery method - $.get(), • change the last argument from 'xml' to 'json' • jQuery offers another method called $.getJSON() for retrieving JSON-formatted data. • Using JSON as the data transportation format makes the code even leaner and easier to work with than XML • reducing the size of the response from the server. Dr Sabitha Banu PSGRKCW 302
  • 303. Dr Sabitha Banu PSGRKCW 303
  • 304. Dr Sabitha Banu PSGRKCW 304
  • 305. Dr Sabitha Banu PSGRKCW 305
  • 306. Dr Sabitha Banu PSGRKCW 306
  • 307. Dr Sabitha Banu PSGRKCW 307
  • 308. Dr Sabitha Banu PSGRKCW 308
  • 309. Dr Sabitha Banu PSGRKCW 309
  • 310. Dr Sabitha Banu PSGRKCW 310
  • 311. Dr Sabitha Banu PSGRKCW 311
  • 312. Making a POST request • POST requests are identical to GET requests in jQuery • $.get(), use $.post(). • POST method request is reserved for modifying the state of the data in some way • jQuery makes it easy to grab form data and pass that along to the server. • serialize()- method takes data for the input elements ( <input> ,<textarea>, and <select> elements) and processes the values in those fields into a query string. Dr Sabitha Banu PSGRKCW 312
  • 313. Dr Sabitha Banu PSGRKCW 313
  • 314. Dr Sabitha Banu PSGRKCW 314
  • 315. Loading HTML Snippets from the Server • transporting data from the server to the client asynchronously is via HTML snippets. • load() Method • The load() method loads data from a server and puts the returned data into the selected element. Dr Sabitha Banu PSGRKCW 315
  • 316. • The required URL parameter specifies the URL you wish to load. • The optional data parameter specifies a set of querystring key/value pairs to send along with the request. • The optional callback parameter is the name of a function to be executed after the load() method is completed. • callback function can have different parameters: ● responseTxt - contains the resulting content if the call succeeds ● statusTxt - contains the status of the call ● xhr - contains the XMLHttpRequest object Dr Sabitha Banu PSGRKCW 316
  • 317. Dr Sabitha Banu PSGRKCW 317
  • 318. Dr Sabitha Banu PSGRKCW 318
  • 319. Dr Sabitha Banu PSGRKCW 319
  • 320. Plugins • jQuery also makes itself easy to extend with new functionality , Plugin API. • Can make own chainable jQuery methods and even write entire complex client-side applications completely as jQuery plugins. • jQuery UI library • Plugins in the jQuery UI library help you to implement functionality like drag-and-drop or selecting elements, and a variety of other functionality. Dr Sabitha Banu PSGRKCW 320
  • 321. • Writing a Plugin • The Anatomy of a jQuery Plugin • Inspecting the Document Object Model • Writing a Context Menu jQuery Plugin • Good Practice for jQuery Plugin Development Dr Sabitha Banu PSGRKCW 321
  • 322. Writing a Plugin • jQuery plugins are easy to implement • is pass an object literal containing the methods want to extend jQuery • The idea of a plugin is to do something with a collection of elements that comes with the jQuery core a plugin, like .fadeOut() or .addClass(). Dr Sabitha Banu PSGRKCW 322
  • 323. Dr Sabitha Banu PSGRKCW 323
  • 324. • creating two jQuery plugins, one for selecting an element and one for unselecting an element. • If the <li> element is selected, it has the class name movieSelected applied. • If the <li> element is not selected, then the class name movieSelected is withdrawn. • the movieSelected class name applies a forestgreen background and makes the text white. Dr Sabitha Banu PSGRKCW 324
  • 325. Dr Sabitha Banu PSGRKCW 325
  • 326. Dr Sabitha Banu PSGRKCW 326
  • 327. Dr Sabitha Banu PSGRKCW 327
  • 328. Dr Sabitha Banu PSGRKCW 328
  • 329. • can have a plugin that adds a calendar to an input element; • can have a plugin that makes an element a drop zone for drag and drop actions. • Some are plugins developed by the jQuery Foundation, such as jQuery UI, and others are great third-party plugins that add useful functionality, such as the ability to sort a table. Dr Sabitha Banu PSGRKCW 329
  • 330. Dr Sabitha Banu PSGRKCW 330
  • 331. The Anatomy of a jQuery Plugin • A jQuery plugin's primary purpose is to do something to an element in the DOM. • ‘this’ represents the element or elements that you are working with. • two plugins, select() and unselect(). • These jQuery plugins can be called on any HTML element in the DOM through jQuery. • The plugin works on one element or many elements. Dr Sabitha Banu PSGRKCW 331
  • 332. Dr Sabitha Banu PSGRKCW 332
  • 333. Inspecting DOM • HTML element objects have always had some built-in properties and methods. • These properties and methods make it possible to interact with and manipulate the DOM. • jQuery simplifies the amount of code to write query and manipulate the DOM. Jquery J scirpt DOM API Dr Sabitha Banu PSGRKCW 333
  • 334. • appendChild(),getAttribute() -Javascript methods • after(), insertAfter(), before(), insertBefore() • setAttribute(), or hasAttributes(),attr() Dr Sabitha Banu PSGRKCW 334
  • 335. Writing a Context Menu jQuery Plugin Dr Sabitha Banu PSGRKCW 335
  • 336. Dr Sabitha Banu PSGRKCW 336
  • 337. • Initialization: The code initializes the context menu using the $.contextMenu function provided by the jQuery contextMenu plugin. • Selector: The context menu is applied to elements with the class 'context- menu-one'. This means that the context menu will be triggered when you interact with elements having this class. • Callback Function: When an item in the context menu is clicked, the specified callback function is executed. It logs the clicked item key to the console and displays an alert. • Items: The context menu items are defined in the 'items' object. Each item has a name, and optionally, an icon. The items include "Edit," "Cut," "Copy," "Paste," "Delete," a separator ("sep1"), and "Quit" with a custom icon. • Event Handling: The code adds a click event listener to elements with the class 'context-menu-one'. When an element with this class is clicked, it logs the element to the console. Dr Sabitha Banu PSGRKCW 337
  • 338. Dr Sabitha Banu PSGRKCW 338
  • 339. Good Practice for jQuery Plugin Development • possible to chain multiple method calls together. • Own plugins don't conflict with those of third-party plugins • Avoid polluting the global namespace. Dr Sabitha Banu PSGRKCW 339
  • 340. HTML5 Drag and Drop • HTML5 drag-and-drop specification with jQuery • HTML5 drag-and-drop specification enables to drag and drop between multiple browser windows, and even multiple browser windows between completely different browsers. Dr Sabitha Banu PSGRKCW 340
  • 341. Implementing Drag and Drop • dragstart—This event is fired when a drag begins, on the element the drag was initiated on. • dragend—This event is fired when a drag ends, on the element that the drag was initiated on. • dragenter—This event is fired when an element enters the space over the element this event is attached to; it is used to identify an appropriate drop zone for the drag element. • dragleave—This event is fired when an element leaves the space over the element this event is attached to; it is also used to identify an appropriate drop zone for the drag element. Dr Sabitha Banu PSGRKCW 341
  • 342. dragover—This event is fired continuously while a draggable element is within the space over the element this event is attached to; this event is also used on the drop side. drag—This event is fired continuously while the element is dragged, on the element being dragged. drop—This event is fired when a draggable element is dropped on the element this event is attached to. Dr Sabitha Banu PSGRKCW 342
  • 343. Dr Sabitha Banu PSGRKCW 343
  • 344. Dr Sabitha Banu PSGRKCW 344
  • 345. <!DOCTYPE html> <html lang="en"> <head> <!-- Meta tags and title --> </head> <body> <!-- Content goes here --> </body> </html> <style> .draggable { /* Styling for draggable element */ } .droppable { /* Styling for droppable area */ } </style> Dr Sabitha Banu PSGRKCW 345
  • 346. <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="draggable">Drag me</div> <div class="droppable">Drop here</div> Dr Sabitha Banu PSGRKCW 346
  • 347. <script> $(function() { // Make the .draggable element draggable $(".draggable").draggable(); // Make the .droppable element droppable $(".droppable").droppable({ drop: function(event, ui) { // When a draggable element is dropped into the droppable area $(this) .addClass("ui-state- highlight") .find("p") .html("Dropped!"); } }); }); </script> Dr Sabitha Banu PSGRKCW 347
  • 348. Implementing Drag-and-Drop File Uploads • File uploads by drag and drop have evolved during the past few years • beginning with only allowing one or more files to be uploaded by drag and drop • expanded to allowing drag-and-drop downloads. • again to allow both files and folders to be uploaded by drag and drop. • all the major browsers support file upload by drag and drop. • Chrome supports upload of both files and folders, and drag and drop downloads. Dr Sabitha Banu PSGRKCW 348
  • 349. Dr Sabitha Banu PSGRKCW 349