Full Stack Web Development Course for Beginners

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.

UNIT I
• Fundamentals of HTML
• Understanding Elements:
• Root Elements
• Metadata Elements
• Section Elements
• Heading Elements.
• Describing data types.

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.

Features

Elements
• Building blocks of an HTML document
• collection of start and end tags with the content inserted in between
them
• Not case sensitive

•Pre-defined tags
•Categories of HTML elements
⮚Root Elements
⮚Metadata Elements
⮚Section Elements
⮚Heading Elements
⮚Flow
⮚Phrasing
⮚Embedded
⮚Interactive

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.

•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.

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

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

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.

LINK
✔Link HTML documents with other HTML document
✔Gives relationship between two HTML documents

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.

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

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

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.

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.

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

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.

SECTION element
• defines a section in a document
• Groups the related content of the HTMl document
• Contains other sections like headers,footer

NAV element
• defines a set of navigation links
• Displays a group of links on the HTML document

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

ASIDE element
• defines some content aside from the content it is placed in
• The aside content should be indirectly related to the surrounding content.

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.

FOOTER element
• Used to represent footer which contains various types of
information

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.

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.

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

❖ 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

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

RFC & IANA
• URI (uniform Resource Identifier)
• Content type
• Language code
• Character set

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

Content type
• Can also be MIME(Multipurpose Internet Mail Extensions)/Media
type used in linked or embedded resource

Language Code
• Used to represent the code of various literal languages used for
scripting
• Language used in the attribute

Character set
• Set of standard characters taken from several languages and
scripts

W3C data types
❖ International community that develops standards to
ensure long term growth of the web
➢ DateTIme
➢ RGB triplet
➢ Colornames
➢ Linktypes
➢ Media type

DateTime format
• Uses ISO date format

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

Color names
• 16 colors can be directly
called without using
hexadecimal values
• Easy for the user

Link types
• Used to provide a variety of information to search engines
• Space,tab,linefeed,carriage return,formfeed,vertical-tab,newline
characters not permitted

Media types
➔ Enables how to present HTMl documents on different media
➔ Available media types are
◆ Screen
◆ Tty
◆ TV
◆ Projector
◆ Handheld
◆ Print
◆ Aural

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

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

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

New elements

New attributes

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

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
•

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

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

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.

Added attributes of the INPUT element

Autofocus
• Automatically the input field is focused when the browser is
loaded

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

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".

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.

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.

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.

Added values for the type attribute

Multimedia
• HTML5 introduces new elements audio and video to support
multimedia files
• Oga ,ogv

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

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

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

• Color gradient
• Shadows
• Background enhancements
• Enhanced box model
• Transitions
• Transformations
• Animations

New selectors
• Searching or selecting the HTMl elements to perform various
tasks
• Search HTML elements based on the class or css syntax

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

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()

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

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

Notifications
• Sending notifications directly to the desktop
• Are alerts raised by a website
• requestPermission(),createNotification(),showNotification()
methods

Drag and drop API
• Drag and drop an element on a web page

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

Modernizr
• Jscript library API
• Detects Whether CSS,features of HTML5 are
supported by the browser

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

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

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

Tags
• Container tags -contains any elements
• Empty tags-Do not contain any content /
elements
Tags
Container tags Empty tags

Container Elements
• Contains text or other tags
• Has both opening and closing tags

Empty tags
• Elements that do not contain any content
• Eg. inserting line break or image
• Do not have opening or closing tags
• Eg

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

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

Creating and Saving an HTML Document

Validating an HTML Document
• Verifying /checking the code according to HTML5 specification
• HTML validators
• Online HTML validators are

• Open a browser http://validator.w3.org/URL

Viewing an HTML Document

<!DOCTYPE html>
<html>
<head>
<title>
Title of the web page
</title>
</head>
<body>
Contents of the web page
</body>
</html>

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

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

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

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)

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

HTML vs XML

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

Case sensitive

XML elements must be properly nested

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.

XML Attribute Rules
● Attribute values must be within quotes.
● An element cannot contain several attributes with
the same name.

Use of Elements vs Use of Attributes

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

XML validation
• “Well formed “ XML Documents
• “Valid “ XML Documents

“Well formed “ XML Documents
• Is a document that conforms to the XML syntax rules/An
XML document with correct syntax is called "Well Formed".

“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

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

Internal DTD declaration
• If the DTD is declared inside the XML file, it must be
wrapped inside the <!DOCTYPE> definition:

• !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"

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

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.

Building Blocks of XML Documents
➔ The main building blocks of both XML and HTML documents are elements.
◆ Elements
◆ Tags
◆ Attributes
◆ Entities
◆ PCDATA
◆ CDATA

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".

Tags
• Used to mark up elements

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 " /".

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.

• Predefined entities can be added to XML document by
specifying the name followed by the semicolon

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

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.

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

Elements with data
• Elements with data are declared with the datatype

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

Wrapping
• If the DTD is to be included in the XML file it should be
wrapped in a DOCTYPE definition

Declaring Only One Occurrence of the Same
Element
• Declares the child element message can only occur once
inside the note element

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

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.

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.

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

DTD Attributes
• Declaring attributes
• Default attribute value
• Implied attribute
• Required attribute
• Fixed attribute value
• Enumerated attribute values

Declaring attributes
• In a DTD, attributes are declared with an ATTLIST
declaration.

Attribute type:
● specify how the processor should handle the data that
appears in the value.
● 3 categories
○ String type
○ Tokenized types
○ Enumerated types

Attribute default values

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.

FIXED Values
attribute-name
attribute-type #FIXED
"value" >

REQUIRED values
• Whenever you want
specify that an attribute
is required, use
#REQUIRED keyword.
type #REQUIRED>

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.
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.

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.

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

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;

External entities
book.xml

Parameter Entities
• Can occur only in DTD
• Is identified by placing %(percent-space) in front
of its name
• %-references to parameter entities

DTD validation
➔Two categories of xml documents
◆Well formed
◆Valid

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

• If a document is not well formed ,it is not xml
• No need of xml processors to do anything with
such documents

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

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)

➔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

• 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

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

Transforming XML to HTML
• transform XML into XHTML using XSLT
catalog.xml

"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

Link the XSL Style Sheet to the XML Document
• Add the XSL style sheet reference to your XML document
("cdcatalog.xml"):

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".

<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 )

<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.

<xsl:for-each> Element
• allows you to do looping in XSLT
• can be used to select every XML element of a specified node-set

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)
● < less than Dr Sabitha Banu PSGRKCW 225

<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

XSLT elements
• XSLT elements from the W3C Recommendation (XSLT
Version 1.0)

XML namespaces(xmlns)
• Collection of XML elements and attributes identified by
IRI (Internationalized Resource Identifier )
• a method to avoid element name conflicts

Solving the Name Conflict Using a Prefix
• Name conflicts in XML can easily be avoided using a name prefix.

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".

• 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.

• Namespaces can
also be declared in
the XML root
element

Default Namespaces
• Defining a default namespace for an element saves us
from using prefixes in all the child elements.

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

The <schema> element is the root element of every XML Schema:
The <schema> element may contain some attributes.

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.

indicates that the default namespace is
"https://www.w3schools.com".

indicates that any elements used by the XML instance document which were
declared in this schema must be namespace qualified.

• XML Schema is an XML-based alternative to DTD:

● <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

note.xsd
XML document has a reference to
an XML Schema

Building blocks
• Simple elements
• Complex elements

Simple elements
Elements which dont have sub elements /attributes ,contains only text
Built-in data types

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

XSD Attributes
If an element has attributes, it is considered to be of a complex type.
XML element with an attribute

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.

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.

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

• to get a property's value for an element
• This uses jQuery to select all <p> elements on the
page.

• 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.

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.

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).

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

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

• 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

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

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

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

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

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.

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.

• 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.

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.

• 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.

• 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.

• 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.

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.

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.

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.

• 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.

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

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.

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.

• 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

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

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().

• 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.

• 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.

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

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

• appendChild(),getAttribute() -Javascript methods
• after(), insertAfter(), before(), insertBefore()
• setAttribute(), or hasAttributes(),attr()

Writing a Context Menu jQuery Plugin

• 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

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.

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.

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.

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.

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

</head>
<body>

</body>
</html>
<style>
.draggable {
/* Styling for draggable
element */
}
.droppable {
/* Styling for droppable area
*/
}
</style>

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.

Full Stack Web Development Course for Beginners

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Full Stack Web Development Course for Beginners

Ähnlich wie Full Stack Web Development Course for Beginners (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Full Stack Web Development Course for Beginners