Scribd
Upload
13 views336 pages

Web - Technologies PPT New

The document provides an overview of web technology, focusing on HTML, CSS, and the structure of web pages. It covers essential HTML elements, tags, attributes, and formatting techniques, as well as the creation of lists and tables. Additionally, it explains the importance of proper HTML syntax and the use of various tags for text formatting and page layout.

Uploaded by

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

Web - Technologies PPT New

The document provides an overview of web technology, focusing on HTML, CSS, and the structure of web pages. It covers essential HTML elements, tags, attributes, and formatting techniques, as well as the creation of lists and tables. Additionally, it explains the importance of proper HTML syntax and the use of various tags for text formatting and page layout.

Uploaded by

vasishtsarathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 336

18ITC304JT

Web Technology
Unit 1: Contents
UNIT-I: Introduction to www, web 2.0,web
browser, web server , three tier architecture.
HTML :Basic Syntax, Standard HTML
Document Structure, Basic Text Markup, Images,
Hypertext Links, Lists, Tables, Frames Forms.
CSS: Cascading style sheets : Levels of
Style Sheets, Style Specification Formats,
Selector Forms, Property value forms, Font
Properties, List Properties, color, Alignment of Text
WORLD WIDE WEB

The World wide web is a way of exchanging the


information between the computers on the
internet.
The world wide web is a network of pages of
images , texts and sounds on the internet which
can be viewed using browser.
Introduction to HTML
• HTML is the standard markup language for Web pages.
• With HTML you can create your own Website.
• HTML is easy to learn - You will enjoy it!
• HTML consists of a series of elements
• HTML elements tell the browser how to display the
content
• HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
HTML tags
• HTML markup tags are usually called HTML tags
• HTML tags are keywords (tag names) surrounded
by angle brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is
the end tag
• The end tag is written like the start tag, with a forward
slash before the tag name
• Start and end tags are also called opening tags
and closing tags
History of HTML
Structure of HTML Page
Some Important HTML Tags
HTML Example

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Explanation
 The DOCTYPE declaration defines the
document type
 The text between <html> and </html>
describes the web page
 The text between <body> and </body> is
the visible page content
 The text between <h1> and </h1> is displayed as
a heading
 The text between <p> and </p> is displayed as a
paragraph
What is HTML?
• HTML, otherwise known as HyperText
Markup Language, is the language used to
create Web pages
• Using HTML, you can create a Web page
with text, graphics, sound, and video.
• Hyper means we can navigate from one
web page to another page where they need
not be linear pages.
Tags
• HTML is written in the form of tags
• A tag is a keyword enclosed by pair of angle
brackets ( Example: < > )
• Where some text is placed between tags.
• HTML elements have two basic properties
 Attributes
 contents
More Tags...
• The opening and closing tags use the same
command except the closing tag
contains and additional forward slash /
• For example, the expression <b >
Warning </b> would cause the
word ‘Warning’ to appear in bold
face on a Web page.
• There are some tags which has opening tag
but not closing tag, also known as
Empty HTML Elements.
Eg - <br>,<hr> i.e Break and Horizontal
rule
Nested Tags
• Whenever you have HTML tags within other
HTML tags, you must close the nearest
tag first
• Example:
<h1> <iI> The Nation </Ii> </h1>
Structure of a Web Page
• All Web pages share <html>
<head>
a common structure
<title> Example </title>
• All Web pages </head>
contain a pair of
should <body>
<HTML>, <HEAD>, This is where you would include
the text and images on your Web
<TITLE>, and <BODY> page.
tags. </body>
</html>
Comment Statements
• Comment statements are notes in the HTML
code that explain the important features
of the code
• The comments do not appear on the Web
page itself but are a useful reference to
the author of the page and other
programmers
• To create a comment statement use the
<!-- Write ur comment here --> tags
HTML Elements
An HTML element is defined by a start tag,
some content, and an end tag.
HTML Elements
The HTML element is everything from the
start tag to the end tag:
<tagname>Content goes
here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about
elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
For example:
The href Attribute
The <a> tag defines a hyperlink.
The href attribute specifies the URL of the page the
link goes to:
<a href="https://www.w3schools.com">Visit
W3Schools</a>
The <TITLE> Tag
• Choose the title of your Web page carefully;
The title of a Web page determines its
ranking in certain search engines
• The title will also appear on Favorite lists,
History lists, and Bookmark lists to
identify your page
Headings

• Web pages are typically organized into sections


with headings; To create a heading we use
the expression
• <Hn>….</Hn> where n is a number between 1
and 6
• In this case, the 1 corresponds to the largest
size heading while the 6 corresponds to
the smallest size
Text Formatting
• Manipulating text in HTML can be tricky;
Oftentimes, what you see is NOT what you
get
• For instance, special HTML tags are needed to
create paragraphs, move to the next line,
and create headings
Text Formatting Tags
<b> Bold Face </b>
<strong> This is also same like bold but shows
importance </strong>
<i> Italics </i>
<u> Underline </u>
<p> New Paragraph </p>
<br> Next Line
Example on Text Formatting Tags
<!DOCTYPE html">
<head>
<title>Example on Text Formatting Tags</title>
</head>
<body>
<p><b> Bold Face </b> <br>
<strong> this is also same like bold but shows importance </strong> </p>
<p><i>The text will appear as Italics </i> </p>
<p><u>This text will appear in Underline </u> </p>
<p> New Paragraph will be started from this tag,

we can write the paragraph as

many number of lines and sentences </p>


<br>
</body>
</html>
Other Formatting Tags
<pre>- Preformatted Text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
pre: Defines preformatted text
The <pre> tag defines preformatted text.
• Text in a <pre> element is displayed in a fixed-
width font, and the text preserves both
spaces and line breaks. The text will be
displayed exactly as written in the HTML
source code.
<mark>- Marked text
The HTML <mark> element defines
text should be marked or
that
highlighted:
Example come your <mark>
<p> Please with and </mark> for
Observation Record
your WT Lab
</p>
<small> Tag
• The HTML <small> element defines
smaller text:
Example:
<h6> this will display heading is small font </h6>
<small> This will display text in very small
</small>
Note: h6 is smaller than compared
with small attribute.
<del> - Deleted Text tag
The HTML <del> element defines text that
has been deleted from a document. Browsers
will usually strike a line through deleted text:
Example:
<p>My Interested Job is <del>
Software</del> Government. </p>
<ins> - Inserted text

The HTML <ins> element defines a text


that has been inserted into a document.
Browsers will usually underline inserted text:
Example:
<p>
My Interested Job is <del>
Software</del> <ins>Government </ins>.
</p>
<sub> - Subscript text
The HTML <sub> element defines subscript
text. Subscript text appears half a character
below the normal line, and is sometimes
rendered in a smaller font. Subscript text can
be used for chemical formulas, like H2O:
Example:
<p>This is an example
on
<sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines
superscript text. Superscript text appears half
a character above the normal line, and is
sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like
WW W[1]:
<p>This is an example
on
<sup>superscripted</sup> text.</p>
Example on Text Formatting Tags
<!DOCTYPE html>
<head>
<title>Text Formatting tags </title>
</head>
<body>
<pre>Please come with your
Observation and Record
for your WT Lab
</pre>

<p> Please come with your


<mark> Observation and
Record </mark> for your WT
Lab
</p>
<h6> this will display heading
is small font </h6>
<small> This will display text
in very small </small>
<p>My Interested Job is <del>
Software</del> Government.
</p>
Tables
• Tables can be used to display rows and columns
of data, create multi-column text, captions for
images, and sidebars
• The <table> tag is used to create a table;
the <tr> tag defines the beginning of a row while
the <td> tag defines the beginning of a cell
<th> is used to define the table heading for a cell
<thead> is used to define the heading for the entire
table
Adding a Border
• The BORDER=n attribute allows you to
add a border n pixels thick around the
table
• To make a solid border color, use the
BORDERCOLOR=“color” attribute
Creating Simple Table
<TABLE BORDER=10> • Here’s how it would
<TR>
<TD>One</TD>
look on the Web:
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
<
/
T
R
>
<
/
Adjusting the Width
• When a Web browser displays a table, it often
adds extra space. To eliminate this space use
the WIDTH =n attribute in the <TABLE> and
<TD> tags
• Keep in mind - a cell cannot be smaller than its
contents, and if you make a table wider than
the browser window, users will not be able to
see parts of it.
Centering a Table
• There are two ways to center a table
– Type <TABLE ALIGN=CENTER>
– Enclose the <TABLE> tags in opening and closing
<CENTER> tags
Wrapping Text around a Table
• It is possible to wrap text around a table. This
technique is often used to keep images and captions
together within an article.
• To wrap text around a table, type <TABLE ALIGN =
LEFT> to align the table to the left while the text
flows to the right.
• Create the table using the <TR>, <TD>, and </TABLE>
tags as you normally would
Adding Space around a Table
• To add space around a table, use the
HSPACE=n and VSPACE=n attributes in the
<TABLE> tag
• Example:
<TABLE HSPACE=20 VSPACE=20>
Nesting Tables
• Create the inner table
• Create the outer table and determine which cell of
the outer table will hold the inner table
• Test both tables separately to make sure they work
• Copy the inner table into the cell of the outer
table
• Don’t nest too many tables. If you find yourself doing
that, find an easier way to lay out your Web page
Changing a Cell’s Color
• To change a cell’s color, add the
BGCOLOR=“color” attribute to the <TD> tag
• Example:
<TD BGCOLOR=“blue”>
Colspan and Rowspan Attributes

You will use colspan attribute if


you want to merge two or more
columns into a single column. Similar
way you will use rowspan if you want
to merge two or more rows.
Changing the Font
• The expression <font face = “fontname”>
…
</font>
can be used to change the font of the enclosed
text
• To change the size of text use the
expression
<font size=n> …. </font> where n is a number
between 1 and 7
Changing the Font

• To the color, use <font


change
color=“red”>…. </font>; The color can also
be defined using hexadecimal
representation ( Example: #ffffff )
• These attributes can be combined to change
the font, size, and color of the text all at once;
For example, <font size=4 face=“Courier”
color=“red”> …. </font>
Aligning Text
• The align attribute can be inserted in the <p>
and <hn> tags to right justify, center, or
left justify the text
• For example, <h1 align=center> The New York
Times </h1> would create a centered
heading of the largest size
Page Formatting
• To define the background color, use the
BGCOLOR attribute in the <BODY> tag
• To define the text color, use the TEXT attribute
in the <BODY> tag
• To define the size of the text, type <BASEFONT
SIZE=n>
Example
<html>
<head>
<title> First Example Program </title>
</head>
<body>
<h1 style="background-color:tomato;">
This is where you would include the text and images on your Web page.
</h1>
</body>
</html>
HTML Lists
HTML offers web three
specifying authors lists of ways for All
contain one or information.
more list elements. lists Lists
mustmay
contain −
<ul> − An unordered list. This will list items using
plain bullets.
<ol> − An ordered list. This will use different
schemes of numbers to list your items.
<dl> − A definition list. This arranges your items in
the same way as they are arranged in a
dictionary.
HTML Un-Ordered List
An unordered list is a collection of related
items that have no special order or sequence.
This list is created by using HTML <ul> tag.
Each item in the list is marked with a bullet.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML
Unordered
List</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Java
Script</li>
<li>Angular</
li>
</ul>
The type Attribute

You can use type attribute for <ul>


tag to specify the type of bullet you
like. By default, it is a disc. Following
are the possible options
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
HTML Ordered Lists

If you are required to put your items in a


numbered list instead of bulleted, then HTML
ordered list will be used. This list is created by
using <ol> tag. The numbering starts at one
and is incremented by one for each successive
ordered list element tagged with <li>
Ordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML
Unordered
List</title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Java
Script</li>
<li>Angular</
li>
</ol>
</body>
The type Attribute

You can use type attribute for <ol>


tag to specify the type of numbering
you like. By default, it is a number.
Following are the possible options −
<ol type = "1"> - Default-Case
Numerals.
<ol type = "I"> - Upper-
Case Numerals.
<ol type = "i"> - Lower-
Case Numerals.
<ol type = "A"> - Upper-Case Letters.
Html definition/description list
In order to create the definition or
description list in html,we have 3 important
tags. They are as follows:

<dl> this is root element ofdefinition list


</dl>
<dt> defines the definition type or name
of data
<dd> defines the data of hat definition type
Example on definition list
<dl>
<dt>Programming</dt>
<dd>C</dd>
<dd>CPP</dd>
<dd>JAVA</dd>
<dt>Designing</dt>
<dd>HTML</dd>
<dd>CSS</dd>
</dl>
HTML FORMS
HTML Forms are required when you want
to collect some data from the site visitor. For
example during user registration you would
like to collect information such as name, email
address, credit card, etc. A form will take input
from the site visitor and then will post it to a
back-end application such as database, ASP
Script or PHP script etc.
Example
Html form tag

form -create an html form,


contains elements .
form elements form
.
<form>
form
elements
Form elements
Form Elements are text fields,
text area fields, drop-down menus, radio
buttons, check
boxes.
Sub-Element
<input> element which contains main attribute
type.
text type
Text Input
<form>
First name: <br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Radio Button Input
• Input type=“radio” defines a radio button

<html>
<body>
<form>
First name: <br>
<input type="radio" name="gender" value="Male"“ > Male <br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other <br>
</form>
</body>
</html>
Other tags
• <input type =“ checkbox” >
• <input type =“ file”>
• <textarea rows=“5”
cols=“100”>
• </textarea>
Type = Submit button attribute
<body>
<form action="a.txt">
First name:<br>
<input type="text" name="firstname“> <br>
Password:<br>
<input type="password" name="pass" ><br><br>
<input type="submit" value="Submit">
</form>
File Upload Box
<body>
<form>
<input type="file" name="fileupload"/>
</form>
</body>
Html form Elements
Some of the main elements in HTML form tag is:
• <input>
• <label>
• <select>
• <textarea>
• <button>
• <fieldset>
• <legend>
• <datalist>
• <output>
• <option>
• <optgroup>
label element
The <label> element defines a label for
several form elements. The for attribute of
the <label> tag should be equal to
the id attribute of the <input> element to
bind them together.
Syntax:
<label for="fname">First name:</
label>
<input type="text" id="fname“ >
The select element
The <select> Element
• The <select> element defines a drop-down list:
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<option> element
• The <option> elements defines an option that
can be selected.
• By default, the first item in the drop-down list
is selected.
• To define a pre-selected option,
add the selected attribute to the option:
Syntax:
<option value="fiat" selected>Fiat</option>
Allow multiple selections
• Use the multiple attribute to allow the user to
select more than one value:
Syntax:
The <fieldset> and <legend> Elements

• The <fieldset> element is used to


group related data in a form.
• The <legend> element defines a caption
for the <fieldset> element.
Html Frames
Frame Creation
HTML Frames -Creating Frames
• Divide your browser window into multiple sections where each
section can load a separate HTML document.
• A collection of frames in the browser window - A frameset.
• The window is divided into frames with rows and columns.
<frameset> tag instead of <body> tag
•The rows attribute of <frameset> tag defines horizontal
frames cols attribute defines vertical frames.
• Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame.
This <frame> tag is currently not used in HTML5, so we need to
use<iframe> instead of that.
Syntax
<html>

<frameset cols="70%,30%">

<frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />

<frame src="https://developer.mozilla.org/en/HTML/Element/frame" />

</frameset>

</html>
Cascading Style Sheets(CSS)
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve
a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files
• The extension for external style sheets is .css
CSS Solved a Big
Problem ?
• HTML was never intended to contain tags
for formatting a document.
• HTML was intended to define the content of a
document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes
were added to the HTML 3.2 specification, it
started a nightmare for web developers.
Development of large web sites, where fonts
and color information were added to every single
page, became a long and expensive process.
To solve this problem, the World Wide Web
Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed
from the HTML document, and stored in a
separate CSS file.All browsers support CSS today.
CSS Syntax
CSS Syntax
The CSS syntax is made up of
three parts:a selector, a property and a
value:
selector { property : value ;Font-
family:”times”
;color:red ; size:10; }

The selector is normally the HTML


element/tag you wish to define, the property is
the attribute you wish to change, and each
property can take a value. The property and value
are separated by a colon, and surrounded by
For example
body {font-family: times new roman;
color: blue;width:20pt;}
Or else we can also define as follows:
p
{
font-family : "sans serif“
}
H1{}
H2{}
Multiple Attributes in one selector
If you wish to specify more than one property,
you must separate each property with a
semicolon. The example below shows how to
define a center aligned paragraph, with a red text
color:
Example:
p{
text-
align:center;
color:red;
}
Levels of Style Sheets
The CSS can be declared in 3 ways:
1) External style sheet
2) Internal style sheet (inside the <head> tag)
3) Inline style (inside an HTML element)
1)Internal Style Sheet
An internal style sheet should be used when a
single document has a unique style. You define internal
styles in the head section with the <style> tag.
Example:
<head>
<style
type="text/css"> body
{background-color:
red} p
{margin-left: 20px}
</style>
</head>
2) Inline Styles

An inline style should be used when a unique style is to


be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the
relevant tag. The style attribute can contain any CSS property.
The example shows how to change the color and the left
margin of a paragraph:
For Example
<p style="color: red; margin-left: 20px">
This is a paragraph</p>
3)External Style Sheet
An external style sheet is ideal, when the
style is applied to many pages. Each page
must link to the style sheet using the <link>
tag. The <link> tag goes the head
inside section.
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
Multiple Style Sheets
If some properties have been set for the same
selector in different style sheets, the values will
be inherited from the more specific style
sheet. For example, an external style sheet has
these properties for the h3 selector:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
And an internal style sheethas
these properties for the h3 selector:
h3
{
text-align: right;
font-size: 20pt
}
If the page with the internal style sheet
also links to the external style sheet the
properties for h3 will be:
Then the h3 properties will be as follows:

color: red;
text-align: right;
font-size: 20pt
The color is inherited from the external
style sheet and the text-alignment and the
font-size is replaced by the internal style
sheet.
Example on CSS
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1> Java made simple </h1>
<h2> Introduction </h2>
<p> Java was invented by SunMicro … </p>
</body>
</html>
CSS Selectors

CSS selectors are used to "find" (or select)


the HTML elements you want to style
1) CSS element selector
2) CSS id selector
3) CSS class selector
4) CSS Universal selector
5) CSS Generic selector
1) CSS Element Selector
The element selector selects HTML
elements based on the element name.
For example: If we want to align the paragraph to
center and change font color to red.
Syntax:
p
{
text-align: center;
color: red;
}
Simple selector form
The selector is a tag name or
a list of tag names, separated by
commas
Consider the following examples, in which
the property is font-size and the property value is a
number of points :
h1, h3
{
font-size: 24pt ;
}
h2
{
font-size: 20pt ;
}
2. Css Id Selector
An id selector allow the application of a style to one specific element.
General form:
#specific-id
{
property-value list
}
Example:
#section14
{
font-size: 20;
}

Specifies a font size of 20 points to the

<h2 id = “section14” > Hello <h2>


3. CSS Class Selector
Used to allow different occurrences of the same tag
to use different style specifications .A style class has a
name, which is attached to a tag name
p.normal {property/value
list} p.warning{property/value
list}
The class you want on a particular occurrence of a
tag is specified with the class attribute of the tag.
For example,
<p class = “normal”> A paragraph of text that we want to
be presented in ‘normal’ presentation style </p>
<p class = “warning” > A paragraph of text that is a
warning to the reader ,which should be presented in an
especially noticeable style. </p>
4. CSS Universal Selector
The universal selector by an
denoted asterisk(*).
It applies its style to all
elements in the document
For Eg:
*
{
text-align: right;
}
Makes all elements in the document align right
side
5. CSS Generic Selector
• A generic class can be defined if you want a style
to apply to more than one kind of tag. A generic
class must be named, and the name must be.
Example,
.large {property : value list }
• Use it as if it were a normal style class
<h1 class = “large"> … </h1>
...
<p class = “large"> … </p> in with a period
CSS Properties
CSS 60 different properties in 7
include
categories:
• Fonts
• Lists
• Alignment of
text
• Margins
• Colors
• Backgrounds
• Borders
1)Fonts
1. Font-Families
• The font-family property is used to specify
a list of font name.
• The browser will use the first font in the
list that it supports. For example, the
following could be specified.
Example: font- family: Arial, Helvetica, Courier
2.font-size
Sets the size of fonts. There are two categories of
font-size values, absolute and relative.In the case of
absolute category the size value could be given as
length value in points, picas or pixels or keywords
from the list xx-small, x-small, small, medium, large
and x-large.
Eg: font-size: 10pt
The relative size values are smaller and larger,
which adjust the font size relative to the font size of
the parent element.
Eg: font-size: 1.2em
This sets the font size to 1.2 times the font size of
the parent element.1.2em and 120% are same.
3.Font Variant

• The default value of the font-variant property


is normal, which specifies the usual
character font.
• This property can be set to small-caps to
specify small capital letters.
4. font-style
Most commonly used to specify italic.
Eg: font-style: italic
5. font-weight
• Used to specify degrees of boldness.
Eg: font-weight: bold
• Possible values are bolder, lighter,
bold, normal(default)
6. Font Shorthands
For specifying more than one font
properties. The values can be stated in a list as
value of the font property.
Eg: font: bold 14pt Arial Helvetica
The order which browser follows is last
must be font name, second last font size and
then the font style, font variant and font
weight can be in any order but before the font
size and names.
7. The text-decoration property
Specifies some special features of text. Possible
values of text-decoration property are : line-
through, overline, underline, none
Suppose if we apply these for a paragraph tag
8. List properties
• Property Name: list-style-type can applied to
both ordered and unordered list.
Unordered lists
• Bullet can be a disc (default), a square, or a circle. Set it
on either the <ul> or <li> tag. On
<ul>, it applies to list items.
<style type = “text/CSS”>
ul
{
list-style-type:square;
}
</style>
ORDERED LIST
On ordered lists - list-style-type
property can be used to change the
sequence
Property values
value Sequence type First four
Decimal Arabic numerals 1, 2, 3, 4
upper-alpha UC letters A, B, C, D
lower-alpha lc letters a, b, c, d
upper-roman Uc Roman I, II, III, IV
lower-roman Lc Roman i, ii, iii, iv
9.CSS Color properties
Color is a problem for the Web for two reasons:
1. Monitors vary widely
2. Browsers vary widely
There are three color collections
1) color: color name;
2) color: rgb(100,255,125);
3) color: #01a2cf
For hexa decimal we need to enter the color range
in 0 to f letters only.
10. Alignment of text
The text-align property has the possible
values, left default), center, right, or
(the justify.
text-align: center;
18ITC304JT
Web Technology
Unit 2: Contents
UNIT-II: Working with XML: Introduction,
The syntax of XML, XML Document Structure,
Document type Definition (DTD), Namespaces,
XML schemas, XSLT, XML Parsers - DOM and SAX
Introduction to XML
1) What is XML?
A. XML stands for Extensible Markup Language
B. XML is a markup language much like HTML
C. XML was designed to carry data, not to display data
D. XML tags are not predefined. You must define your
own tags
E. XML is designed to be self-descriptive
F. XML is a W3C Recommendation(World
Wide Web Consortium)
XML Syntax
XML syntax refers to the rules that
determine how an XML application can be
written. The XML syntax is very straight
forward, and this makes XML very easy to
learn. Below are the main points to remember
when creating XML documents.
XML documents must contain
one root element that is the parent of all
other elements
XML Document Structure
<? xml version="1.0" encoding="UTF-
8"?>
<root>
<child>
<subchild>..... </subchild>
</child>
</root>
XML Prolog
<?xml version="1.0" encoding="UTF-8"?>
is also known as XML prolog
Features of XML
Tag based language. tags are used to describe the
content of the document
• Tags are defined by user and not by language
• Case sensitive and strict.
• Endorsed and maintained by w3c and used by all major
companies like microsoft, oracle, Sun and IBM.
• Platform independent and language independent –any
language on any platform can read process the data
in xml document.
• With xml,white space is preserved
What is Well-formed XML
Ever xml document must be a well formed
xml document. A well-formed XML is an
document that compiles with following rules:
1. It has a single root element
2. Ever tag is opened and closed. Tags
must be properly nested.
3. Values of an attribute is enclosed
is quotes-single or double.
Course.xml
<? xml version=”1.0” encoding=“UTF-8” ?>
<course>
<name>java</name>
<fee currency=”INR”>7500</fee>
<prereqsite> c Language done by thomasa
asfsafsafsafassfasfsafsafsafsafsafsa</prer
eqsite>
</course>
Team.xml
<?xml version=”1.0” encoding=“UTF-8” ?>
<team name=”Men InBule”
<player>
<name>M.S Dhoni</name>
<age> 30</age>
</player>
<player>
<name>ViratKohli</name>
<age> 25</age>
</player>
<player>
<name>Rohit</name>
<age> 28</age>
</player>
</team>
Why XML is
Used?
We developers uses the XML files for following purposes:
• Storing the data for some application such as menu data or
data for some comobox
• For developing the database driven websites.
• In image gallery application is can work as the data file (xml)
/storing the names and location of the images.
• For shopping application it can be used to store the product
details
• In travel applications XML data can be used to talk to booking
gateway.
• On the web web services such as Weather services, Currency
rates service etc. are using the XML language
Document Object Model

A DOM is a standard
tree structure, where each
node contains one of the
components from an XML
structure. The two most
common types of nodes are
element nodes and text
nodes. Using DOM
functions lets create
nodes, you
remove nodes,
change their contents, and
traverse the node hierarchy.
Why Use a DTD (Document Type Definition)

With a DTD, each of your XML files can carry a


description of its own format. With a DTD, independent
groups of people can agree to use a standard DTD for
interchanging data. Your application can use a standard DTD
to verify that the data you receive from the outside world is
valid. You can also use a DTD to verify your own data. Seen
from a DTD point of view, all XML documents (and HTML
documents) are made up by the following building blocks:
1. Elements
2. Attributes
3. Entities
4. PCDATA (Parsed Character Data)
5. CDATA (Character Data)
PCDATA
• PCDATA means parsed character data.
• Think of character data as the text found between
the start tag and the end tag of an XML element.
• PCDATA is text that WILL be parsed by a parser. The
text will be examined by the parser for entities
and markup.
• Tags inside the text will be treated as markup and
entities will be expanded.
• However, parsed character data should not contain
any &, <, or > characters; these need to
be represented by the &amp; &lt; and &gt;
entities, respectively.
CDATA
• CDATA means character data.
• CDATA is text that will NOT be parsed by a parser.
Tags inside the text will NOT be treated as
markup and entities will not be expanded.
• the qualifiers you can add to an element definition
are listed in below:
You can specify what type of data an
element can contain parsed character data
(PCDATA) or CDATA section ,which contain
character data that is not parsed. The# that
precedes PCDATA indicates that what follows
is a special word rather than an element
name.
Lab Task Exercise 4
Exercise 4:

Write an XML file which will display


the Book information which includes the following: (i) Title
of the book
(ii) AuthorName (iii) ISBN number
(iv) Publisher name(v)
Edition (vi) Price

(a)Write a Document Type Definition (DTD) to


validate the above XML file.
Sample DTD for Book
Book.xml
Contd..
Contd..
book.xsl
Contd…
Ways to declare DTD
• A Document Type Definition (DTD) defines the legal building
blocks of an XML document. It defines the document
structure with a list of legal elements and attributes.
• A DTD can be declared inline inside an XML document, or as an
external reference.
Internal DTD Declaration
• If the DTD is declared inside the XML file, it should be wrapped in
a DOCTYPE definition with the following syntax:
<!DOCTYPE root-element [element-declarations]>
External DTD Declaration
• If the DTD is declared in an external file, it
should be wrapped in
a DOCTYPE definition with the following syntax:
<!DOCTYPE root-element SYSTEM "filename">
XML Namespaces
•XML Namespaces provide a method to avoid
el Name Conflicts
• In XML, element names are defined by the
developer. This often results in a conflict when
trying to mix XML documents from different
XML applications.
<table>
<tr>
<t
d>
Ap
ple
s<
• In the second XML file, the sample table
element takes different values:
<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>
If these XML fragments were added together,
there would be a name conflict. Both contain a
<table> element, but the elements have
different content and meaning. A user or an XML
application will not know how to handle these
differences.
Solving the Name Conflict Using a Prefix
Name conflicts in XML can easily be avoided using a name prefix.This
XML carries information about an HTML table, and a piece of furniture:
<h:tab
le>
<h:tr>
<h:t
d>A
pple
s</
h:td
>
<h:t
d>Ba
nana
s</
XML 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".

Here Uniform Resource Identifier (URI) is a


string of
characters which identifies an Internet Resource.
Example on XML Namespaces
<root xmlns:h="http://www.w3.org/TR/html4/"
xmlns:f="https://www.w3schools.com/furniture">
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:name>African Coffee Table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
</root>
XML schemas
• An XML Schema describes the structure of an
XML document, just like a DTD.
• An XML document with correct syntax is called
"Well Formed".
• An XML document validated against an XML
Schema is both "Well Formed"
and "Valid".
• XML Schemas are extensible to future additions
• XML Schemas are richer and more powerful than DTDs
• XML Schemas are written in XML
• XML Schemas Support data types
• XML Schemas supports namespace
Most common datatypes
xs:string,
xs:decimal,
xs:integer,
xs:boolean,
xs:date,
xs:time
Example:
<xs:elemen
t
name=”last
name”
type=”xs:st
ring”/>
XSLT( Extensible Style Sheet
Language Transformation)

Before XSLT, first we should learn about


XSL. XSL stands for eXtensible Style sheet
Language. It is a styling language for XML just
like CSS is a styling language for HTML.
XSLT stands for XSL Transformation. It is
used to transform XML documents into other
formats (like transforming XML into HTML).
Architecture of XSLT
Syntax of XSLT
<?xml version = "1.0" encoding=”UTF-8” ?>

<xsl:stylesheet version="1.0“>

<xsl:template match="/">

<xsl:for-each select=“xml root element/parent element">

<xsl:value-of select=“xml child element name"/>

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>
If we want to link xml style sheet
for an XML page
<?xml-
stylesheet type = "text/xsl" href =
"filename.xsl"?>
XML Parsers - DOM and SAX

There are two types of XML parsers namely Simple API


for XML and Document Object Model.
1. SAX (Simple API for XML)
2. DOM( Document Object Model)
The objective of DOM (Document Object Model) parser
and SAX (Simple API for XML) parser are same but
implementation is different. Both the parser work in different
way internally, but intent of both are same. Internal
implementation of DOM Vs SAX is different. It means, with
same intent philosophy of the implementation are different.
In order to understand the difference between DOM and
SAX, you have to understand each one of the parsers.
Key Differences between DOM & SAX parsers

• DOM parser load full XML file in-memory and creates a tree
representation of XML document, while SAX is an event
based XML parser and doesn’t load whole XML
document into memory.
• If you know you have sufficient amount of memory in your
server you can choose DOM as this is faster because
load entire XML in-memory and works as tree structure
which is faster to access.
• As a thumb rule, for small and medium sized XML documents,
DOM is much faster than SAX because of in
memory management.
• As a thumb rule, for larger XML and for frequent parsing, SAX
XML parser is better because it consume less memory.
Differences
Web Technologies
Unit 3: Contents
UNIT-III: WORKING WITH DATABASE:
Getting started Defining ODBC,
with JDBC , Introduction to of JDBC, JDBC
JDBC, Components
Architecture, Types of Drivers, Working with JDBC APIs,
Creating a Simple Application, Working with Prepared
Statement.
Getting Started with JDBC
1) What is JDBC?
Java Database Connectivity in short called as
JDBC. It is a java API which enables the java
programs to execute SQL statements. It is an
application programming interface that defines how
a java programmer can access the database in
tabular format from Java code using a set
of standard interfaces and classes written in the Java
programming language.
The JDBC DriverManager class defines
objects which can connect Java applications to
a JDBC driver. DriverManager has traditionally
been the backbone of the JDBC architecture. It
is quite small and simple.
JDBC Components
JDBC provides the following
components as part of the JDK.
The JDBC driver manager is the backbone of the
JDBC Driver Manager JDBC Architecture. It actually is quite small and
simple; its primary function is to connect Java
applications to the correct JDBC Driver and then get
out of the way.

The JDBC-ODBC bridge allows ODBC drivers to be


JDBC-ODBC Bridge used as JDBC drivers. It provides a way to access less
popular DBMS.If JDBC driver is not implemented for
it.
JDBC Driver Component Architecture
Defining ODBC
ODBC is known as Open Database Connectivity,
this is present in built in every operating system. The
following are the steps to check where the ODBC is
present in our operating system.
Go to Start menu..Choose Control Panel
Contd…
Next choose Administrative tools from
that control panel.
Contd…
After that choose Data Sources(ODBC option)
Contd…
Next we can add the Data Source Name
for the type of database which we want to
connect
If we use 32-bit Operating system
If we use 32 bit operating system in our system, then we
can see the list of options in the ODBC:
We can choose DSN Name for that
database
Here we choose Test as data source name.
If we use 64 Bit OS,then we cannot able to see
multiple databases, only SQL server can be seen
JDBC has four major components
that are used for the interaction with the
database.
1. JDBC API
2. JDBC Test Suite
3. JDBC Driver Manger
4. JDBC ODBC Bridge Driver
1) interfaces
JDBC API:andJDBC API to
methods provides
establishvarious
easy
connection with different databases.
javax.sql.*;
java.sql.*;
2)JDBC Test suite: JDBC Test suite
facilitates the programmer to test the various
operations such as deletion, updation,
insertion that are being executed by the JDBC
Drivers.
3) JDBC the
loads Driver manager: JDBC Driver
database-specific driver manager
into an
application in orderto establish
connection with the
database. the
Driver manager is also used to The makeJDBC
the
database-specific call to the database in order
to do the processing of a user request.
4) JDBC-ODBC Bridge Drivers: JDBC-ODBC
Bridge Drivers are used to connect the
database drivers to the database. The bridge
does the translation of the JDBC method calls
into the ODBC method call. It makes the usage
of the sun.jdbc.odbc package that
encompasses the native library in order to
access the ODBC (Open Database
Connectivity) characteristics.
Working with JDBC API
Components of JDBC API
In JDBC API,we can have several pre-
defined classes ,interfaces and corresponding
methods to execute the task. The following are
the some of the classes, interfaces and
methods which are present in the JDBC API.
In java, we can use JDBC with the help of
following package
import java.sql.*;
Types of Drivers
JDBC driver implementations
because vary of the wideoperating
variety
of
systems and hardware platforms in which
Java operates. Sun has divided the
implementation types into four categories,
Types 1, 2, 3, and 4 :
1) Type 1 − JDBC-ODBC Bridge Driver
2) Type 2 − JDBC-Native API
3) Type 3 − JDBC-Net pure Java
4) Type 4 − 100% Pure Java
Type 1-JDBC-ODBC Bridge Driver
1)In a Type 1 driver, a JDBC bridge is used to
access ODBC drivers installed on each client machine.

2) Using ODBC, requires configuring on your system a


Data Source Name (DSN) that represents the target
database.

3) When Java first came out, this was a useful


driver because most databases only supported ODBC
access but now this type of driver is recommended
only for experimental use or when no other alternative is
available.
Type 1 Architecture
Pros and Cons for Type 1 Driver
Type-2 : Native-API driver

• The Native API driver is also known as Type 2 driver.

• Type 2 driver uses the native code part instead of ODBC parts.
It uses the client-side libraries of the database.
• It is vender specific driver, so must be installed on each client
system. This driver converts the JDBC method call into
native call of database.
• The Oracle Call Interface (OCI) driver is an example of a
Native API Driver.
Type -2 Architecture
Pros and Cons of Type -2
Type-3: Network-Protocol Driver
The Network Protocol driver uses middleware (application server) that
converts JDBC calls directly or indirectly into the vendor-specific database
protocol. It is fully written in java.
Pros and Cons
Type 4 Driver: thin driver
The thin driver converts JDBC calls directly into
the vendor-specific database protocol. That is why it
is known as thin driver. It is fully written in Java
language.
Pros and Cons
MYSQL connectivity using Type 4 Driver for Data Retrieval
Before executing the program,just try to create
database with following tables

create database vasavi;


use vasavi;
create table emp(id int(10),name varchar(40),age int(3));

insert into emp values(1,'praveen',31);


insert into emp values(2,'Kumar',30);
insert into emp values(3,'Sowmya',29);
MYSQL connectivity using Type 4 Driver for Data Update
MYSQL connectivity using Type 4 Driver for Data Deletion
Database Tables for Delete Operation Program

• CREATE DATABASE "vasavi";

• USE "vasavi";

• CREATE TABLE /*!32312 IF NOT EXISTS*/ "student" ( "stdno" int(50) ,


"stdname" varchar(50) , "stdmarks" int(10));

• Try to insert some student details in the above


table.s
PreparedStatement
A PreparedStatement is a pre-compiled SQL statement. It
is a subinterface of Statement. Prepared Statement objects
have some useful additional features than Statement objects.
Instead of hard coding queries, PreparedStatement object
provides a feature to execute a parameterized query.
When PreparedStatement is created, the SQL query is
passed as a parameter. This Prepared Statement contains a
pre-compiled SQL query, so when the PreparedStatement is
executed, DBMS can just run the query instead of first
compiling it.
Method : prepareStatement()
Prepared Statement for Retrieving Query in Dynamic Way
Prepared Statement for insert the records in Dynamic Way
Web Technologies
Unit 4: Contents
UNIT IV: Introduction to Servlets & JSP:
Introduction to servlets, Life cycle of
Servlet,
Limitations of Java Server
Overview, servlets, Pages: JSP ofa
comments, Components JSP Page:
Scriplets , Declarations,
Database Directives,
implicit objects,Expression Access, session tracking.
s,
What is Web Application ?
Web Application is an application that runs in Web. A Java
web application is a collection of dynamic resources (such as
Servlet, Java Server Pages, Java classes and jars) and static
resources (HTML pages and pictures). A Java web application can
be deployed as a ".war" file. The ".war" file is a zip file which
contains the complete content of the corresponding web
application. A Servlet is a Java class which extends
"HttpServlet" and answers a HTTP request within a web
container.
Package: javax.Servlet.*;
What is Web Client/Browser ?
• Web client makes a request to web server using
HTTP protocol.
• Web client receives HTML sent from server and displays
it to end user.
• Internet Explorer, Mozilla Firefox and
Netscape Navigator are widely used web browsers.
• Browser is also responsible for running client-
side scripting written in JavaScript.
HTTP PROTOCOL
• HTTP is an application protocol
implemented on TCP/IP.
• It is request and response protocol.
• Client sends a request to receive
information from server or invoke a process on
the server.
CGI Means: Common Gateway
Interface
Java Servlets
1. Servlet are server side components that provide a powerful
mechanism for developing server side programs.

2. Servlet provide component-based, platform-independent


methods for building Web-based applications, without
the performance limitations of CGI programs.

3. Using Servlet web developers can create fast and


efficient server side application which can run on any
Servlet enabled web server.

4. Servlet run entirely inside the Java Virtual Machine.


5. Servlet can access the entire family of Java APIs, including
the JDBC API to access enterprise databases.

6. Servlet can also access a library of HTTP-specific calls.

7. Servlets are platform independent and can be accessed by


any one easily.

8. Servlets are one form of CGI program,which is not designed


for a specific protocol. They are universal and can
be accessed by any one.

9. Servlet uses the classes in the java packages javax.servlet


and javax.servlet.http.
Life Cycle of Servlet

The following are the


paths followed by a Servlet.
• The Servlet is initialized by
calling the init () method.
• The Servlet calls service()
method to process a
client's request.
• The Servlet is terminated by
calling the destroy() method.
• Finally, Servlet is garbage
collected by the
garbage collector of
the JVM.
Flow
1) Start: Execution of servlet begins.
2) Loading & instantiation void init(): It is called
when servlet is first loaded. This method lets you
initialize servlet.
3) Initialized void service(): The purpose of this
method is to serve a request. You can call it as many
times as you like.
4) Handling request and destroying servlet:
Java application must be first determined what
code is needed to execute the request URL to
provide a response. To destroy servlet Void destroy
method is used at the end of servlet life cycle.
5) End of Request Thread: When
service() finishes its task, either the thread
ends or returns to the thread pool that is
managed by servlet container.

6) End: Servlet lifecycle finishes.

7) Stop: Servlet stop executing.


Limitations of servlets
Here are the
disadvantages
for using Servlet: 7. HTML code is mixed up with Java
1. One servlet is loaded into JVM. It code therefore, changes done
does matter numbers of requests. in one code can affect
2. When there is a request, there is another code.
a thread, not a process. 8. Writing HTML code in servlet
3. Servlet is persistent programming is very
untilit difficult. It also makes
destroys. servlet looks bulky.
4. Designing in a servlet is difficult 9. In servlet programming, if you
and slows down the application. want to use implicit objects,
you need to write some
5. You need a JRE(Java Runtime additional code in order to
Environment) on the server access them.
to run servlets.
10. Developers must take
6. For non-java developers, servlet is care of exception handling
not suitable as they
JSP(Java Server Pages)
• JSP Stands for Java Server Pages.
• It is the technology that allows you to easily
create web content that has both static
and dynamic components.
• Provides expression language for accessing
server-side objects.
• JSP specifications extend the java Servlet API.
Life Cycle of JSP
Life Cycle of JSP
• A JSP Page services requests as a servlet.Thus,the
life cycle of JSP Pages is determined by Java
Servlet technology.
• When a request is mapped to a JSP page ,the web
container first checks whether the JSP page’s
servlet is older than the JSP page. If the servlet
is older, the web container translates the JSP page
into a servlet class and compiles the class
Internal Flow of JSP Page
JSP Page Interface

• Ever Jsp page should implement Servlet


class
• They may Extend Servlet interface
• For JSP page there will be two main threads :
void jspInit()-same as init()
void jspDestroy()-same as destroy()
JSP COMPONENTS:
Directives Are used to control how the
web
container translates and executes the
jsp page.
Scripting Element Are inserted into the JSP Pages servlet
class.

Expression Language Expression Are passed as parameters


to calls to the JSP expression
evaluator.

Jsp[set|get]Property Elements are converted into


method
calls to java beans components.

Custom tags Are converted into calls to the tag


handler that implements the custom
tag.
JSP Scriplets
In JSP if we want to use any component
to be added within the program, we need to
use <% and %>. These are
Scriplets known as and for any
component piece
weof need tocodeuse
or Scriplets
functionality.
For displaying any statement as output, we can use
following statements in JSP:

• out.println(“Statement to be displayed”);
• out.write(“Statement to be printed”);
• out.print(Any expression );
1. DIRECTIVE
Specifieswhat JSP container must do.It
starts with @character within the tag.
There are 3 directive-
1. page directive,
2. include directive and
3. taglib directive.
Syntax of JSP Directive:

<%@ directive attribute="value" %>


2. DECLARATIONS
• It is a block of java code <%!
that is used to int a;
define class wide float b;
variables and
methods in the public
generated class file. void
add()
• It is enclosed between
<%! and %> {
Piece
of
logic
part
3. SCRIPLETS
• It is the block of a java <%
code that is out.println(“HELLO JSP
executed when jsp is WORLD”);
executed . %>
• It is enclosed in <% and
%>
4. EXPRESSIONS
• It is a shorthand notation for a scriplet that outputs a
value in the response stream back to the client.
• It is enclosed in
<%= and %>.
<%=new Date()%>
<input type=text value= ’<%=request.getParameter(“age”)%>’
name=’age’ >
5. Comments
• It is given using <%- - and - -%>
Syntax:
<%-- Example of SQRT function using two ways --%>
Lab Exercise 5:Create a simple JSP to print the current
Date and Time.
Lab Exercise 6:Create a simple JSP a) Display
current IP-Address of the System b) Find out the
Square root for a Number
6 b) Find out the Square root for a Number
Lab Exercise 7:Develop JSP program calculates factorial values for an integer
number, while the input is taken from an HTML form.

Index.jsp
Develop JSP program calculates factorial values for an
integer number, while the input is taken from an
HTML form.
Exercise 8:Develop JSP program shows a Sample Order Form
Catalog.jsp
JSP IMPLICIT OBJECTS
There are 9 jsp
implicit objects. These
objects are created by
the web container that
is available to all the jsp
pages. The available
implicit objects are out,
request, config, session,
application etc. A list of
the 9 implicit objects is
given below:
1) JSP out implicit object

For writing any data to the buffer, JSP provides


an implicit object named out. It is the object of
JspWriter. In case of servlet you need to write:
PrintWriter out=response.getWriter ();

IN JSP we can declare out as:


• out.println();
• out.write();
• out.print();
2. request Implicit Object
The JSP request is an implicit object of type
HttpServletRequest i.e. created for each jsp request
by the web container. It can be used to get request
information such as parameter, header information,
remote address, server name, server port, content
type, character encoding etc.
For Example
String name=request.getParameter("uname");
3) JSP response implicit object

It can be used to add or manipulate response


such as redirect response to another resource, send
error etc.
For example
<%
response.sendRedirect(
"http://www.google.com");
%>
4) JSP config implicit object

In JSP, config is an implicit object of


type ServletConfig. This object can be used to get
initialization parameter for a particular JSP page. The
config object is created by the web container for
each jsp page.
Generally, it is used to get initialization
parameter from the web.xml file.
5) JSP Application Implicit Object
ServletConfig and ServletContext, both are objects created at the
time of servlet initialization and used to provide some initial parameters
or configuration information to the servlet. But, the difference lies in the
fact that information shared by ServletConfig is for a specific servlet,
while information shared by ServletContext is available for all servlets in
the web application.

For example:
If we create one web site with website name, the same website
name should be re-used for all the web pages hence we try to gather
that information using ServletContext object.

getServletContext.getInitParameter(“Name”)
6) Session Tracking Object
In JSP, session is an implicit object of type
HttpSession.The Java developer can use this object to
set,get or remove attribute or to get session
information.

For Example

session.setAttribute("user",name);
7)pageContext implicit object
pageContext extends JspContext to contribute helpful
context details while JSP technology is applied in a Servlet
environment. A PageContext is an instance that gives access to
all the namespaces related to a JSP page, gives access to some
page attributes and a layer over the application details. Implicit
objects are connected to the pageContext consequently.
8)page implicit Object
In JSP, page is an implicit object of type
Object class.This object is assigned to the
reference of auto generated servlet class. It is
written as:
Object page=this;
9)Jsp exception implicit object
The exception is
By errorPage and isErrorPage attributes of
normally an object that is
thrown at runtime. page directive
Exception Handling is
By <error-page> element in web.xml file
process the to
handleThere
runtime errors. the may
occur exception any time in
your web application. So
handling exceptions is a
safer side for the web
developer. In JSP, there are
two ways to perform
exception handling:
DATABASE ACCESS & SESSION TRACKING
• Session simply means a
• For connecting the JSP
particular interval of time.
pages with My-SQL we
• Session Tracking is a way to
need to use JDBC
maintain state (data) of an user.
It is also known as session connectivity with Type 4
management in servlet. Driver. type
JDBC Once 4 driver is
• In general we can use any type constructed now the JSP
of database for connecting JSP pages can be
page to store and retrieve the connected easily
data from centralized data database with the
storage location. Here we are
going to use MY-SQL as back
end database to store and
retrieve the information.
Session Tracking
• Session simply means a particular
interval of time.
• Session Tracking is a way to
maintain state (data) of an
user. It is also known as
session management in
servlet.
• Http protocol is a stateless so we
need to maintain state
using session tracking
techniques. Each time user
requests to the server, server
treats the request as the
new request. So we need
to maintain the state of
an user to recognize to
particular user.
Database Connection Using My-SQL In JSP
Web Technologies
Unit 5: Contents

UNIT V: Fundamentals of NODE JS and


Angular :
Understanding Node.js, Installing Node.js,
Working with Node Creating a Node.js
Packages,
Application, Understanding Angular, Modules,
Directives, Data Binding, Dependency Injection,
Services, Creating a Basic Angular
Application.
What is Node Js?
1) What is NODE JS?
Node.js is an open- cross-
platform
source,runtime environment, library, and
development framework used to create
server-side and networking JavaScript
applications. It also provides
developers
with a vast library of JavaScript modules
that simplify coding
Node.js offers developers the following
benefits
1. It’s open-source
2. It’s scalable. Developers can use it either for horizontal scaling or
vertical scaling
3. It supports out of the box unit testing. Developers can use any JavaScript
unit testing framework to test their Node.js code
4. It features built-in application programming interfaces (API) that helps
developers create different types of servers
5. It is a high-performance tool, thanks to incorporating non-blocking I/O
operations. It employs the JavaScript V8 engine to execute
code, increasing its speed
6. It supports scripting languages like Ruby, CoffeeScript, and TypeScript
7. It enables rapid development suitable for applications that require
frequent changes
Node JS Installation
Go to the URL :
https://nodejs.org/en/download/
Choose the windows platform based on ur Laptop
or PC
Operating System and then click on that installer
In my Pc I am using windows as operating system and my
working bit is 64-bit.
Download windows installer 64 bit file

Double click on that installer and try to install the Node.Js


Installer Platform
Installation will be completed
Working with Node Js Package
1. One of the most powerful features of the Node.js framework is the
ability to easily extend it with additional Node Packaged
Modules (NPMs) using the Node Package Manager (NPM).
NPM is mainly used for referring Node Packaged Modules as
Modules.

2. A Node Packaged Module is a packaged library that can easily be


shared, reused, and installed in different projects. Many different
modules are available for a variety of purposes.

3. Node.js modules are created by various third-party organizations to


provide the needed features that Node.js lacks out of the box. This
community of contributors is active in adding and updating modules.
The Node modules have a managed location called the
Node Package Registry where packages are registered. This
allows you to publish your own packages in a location where
others can use them as well as download packages that others
have created. The Node Package Registry is located at
https://npmjs.com

From this location you can view the newest and most
popular modules as well as search for specific packages

https://npmjs.com
Home Page for NPM Registry

Here u can create whatever u want to create new packages or


else find the details about already existing packages
USING THE NODE PACKAGE MANAGER
The Node Package Manager you have already
seen is a command-line utility. It allows you to find,
install, remove, publish, and do everything else related
to Node Package Modules. The Node Package
Manager provides the link between the Node Package
Registry and your development environment.
The simplest way to really explain the Node
Package Manager is to list some of the command-line
options and what they do.
Node Package Manager Register Methods
Node.Js First Application
• Before creating an actual "First Node Js Welcome !" application
using Node.js.
• Let us see the components of a Node.js application. A
Node.js application consists of the following three important
components :

1) Import required modules

2) Create Server

3) Read request and return response


1)Import required modules
We use the require directive to load Node.js modules.. In
general for importing any modules in Node.js we use require
keyword.

For Example

var http = require("http");

Here var is keyword which is used to create a variable


and we use require to load the http package for initializing the
http protocol
2)Create Server
Create server − A server which will listen to client's requests
similar to Apache HTTP Server.This server is one which should be
invoked by the user, but in apache tomcat we can get server
automatically invoked.
We use the created http instance and call
http.createServer() method to create a server instance and then
we bind it at port 8081 using the listen method associated with the
server instance.
3) Testing Request & Response
Let's put step 1 and 2 together in a file called hello.js and
start our HTTP server as shown below –

I.e Step 1 and Step 2 are stored in one file and save the file with
extension .js

Here in our example we want to


display hello world program so we try to save the
filename as hello.js
Exercise 10: Design a simple Node JS application
How to run the hello.js program
Now execute the hello.js to start the server as follows
−
Output
HTTP Response Codes
HTTP Response Codes are classified into 5 classes

1. Informational responses (100–199)

2. Successful responses (200–299)

3. Redirection messages (300–399)

4. Client error responses (400–499)

5. Server error responses (500–599)

In our program we use 200 as


response code. That means it is ok
Understanding Angular JS
AngularJS is an open-source structural framework developed and
maintained by Google. It lets developers use HTML as a template language,
and is used to create dynamic, single-page client-side web applications.
AngularJS gives developers the following advantages:
1. It’s open-source
2. It’s easy to use, thanks to decoupling Document Object Models (DOM)
manipulation from application logic
3. It provides built-in features like filters, directives, and automatic data
binding
4. It provides a smooth, dynamic Model View Control Architecture, making
it easier for developers to create client-side web applications
5. It uses the Plain Old JavaScript Objects (POJO) data model, producing
spontaneous and clean code, ideal for interactive, user-friendly web-
based apps
6. It supports object-oriented, functional, and event-driven programming
paradigms
7. It makes unit testing easy, thanks to its built-in test runner (Karma)
Disadvantages of AngularJS
Though AngularJS comes with a lot of merits, here are
some points of concern:
1) Not secure : Being JavaScript only framework, application
written in AngularJS are not safe. Server side
authentication and authorization is must to keep an
application secure. But this is not possible in angular.
2) Not degradable: If the user of your application disables
JavaScript, then nothing would be visible, except the
basic page.
Angular JS Concepts
Angular Js Directives
The AngularJS framework can be divided
into three major parts:
1) ng-app : This directive defines and links an
AngularJS application to HTML.
2) ng-model : This directive binds the values
of AngularJS application data to
HTML input controls.
3) ng-bind : This directive binds the AngularJS
application data to HTML tags
Ng-App Directive
The ng-app starts an
directive Application. AngularJS root
It
automaticallydefines
initializes orthe element.
bootstraps the application
It
when the web page containing AngularJS Application
is loaded. It is also used to load various AngularJS
modules in AngularJS Application.
NG MODEL DIRECTIVE
The ng-model directive defines the
model/variable to be used in AngularJS
Application. In the following example, we define a
model named name
ng-bind
This directive binds the
AngularJS Application data to HTML
tags.
OTHER DIRECTIVES: ng-init directive
The ng-init directive initializes an
AngularJS Application data. It is used to
assign values to the variables. In the
following example, we initialize an array of
countries. We use JSON syntax to define
the array of countries.
NG-REPEAT DIRECTIVE
The ng-repeat directive repeats
HTML elements for each item in a
collection. This is used just like loop
statements.
Angular MODULES: NODE Package manager (npm)
NPM supports modularity.
 Each modules can be bundled under a single package.
 Each module contains methods and properties.
 Modules can be a single file or a collection of multiples
files/folders.
 The reason programmers are heavily reliant on modules is
because of their re-usability as well as the ability to break
down a complex piece of code into manageable chunks.
 Modules are of three types:
1. Core Modules
2. local Modules
3. Third-party
NPM is used to load necessary
Modules Angular JS Modules into
the application and then execute the programs very easily.
How to install Angular 7
• Install Visual Studio Code IDE or JetBrains
WebStorm
• You can download VS Code
from https://code.visualstudio.com
• Run the Angular CLI command to install Angular
CLI
• npm install -g @angular/cli
Or
• Your Angular 7 Environment setup is complete
now.
Run the following command to create your first
Angular app.

ng new my-first-app
• Navigate to your first app.
cd my-first-app
• Start your server to run app.
ng serve
About Data Binding
Data binding is the synchronization of
data between business logic and view of
the application. It serves as a bridge
between two components of angular that is
model part and view part. Data Binding is
automatic and provides a way to wire the
two important part of an application that is
the UI and application data.
How data binding is possible in
angular
The directive in AngularJS used to bind the value
of the input field (such as text field, text area) to the
HTML element is ng-model. An ng-model directive is
used to perform data binding in angular. We don’t have
to write extra code to link the model part with view
part by adding few snippets of code we can bind the
data with the HTML control.
In the Angular JS we will be using ng-
model and
ng-bind for performing the binding operations.
Data Binding
There are two types of data binding
present in Angular Js. They are as follows:
1) One-way Data Binding
2) Two –Way Data Binding
Now lets see the difference between one-way and
two-way data binding .
1. One Way data binding
Two way data binding

You can also use double braces {{ }} to display


content
Angular dependency injection
What is meant by Angular
Dependecy ?
Dependency injection (DI) is a
pattern where objects are passed design to
object to complete the tasks. In angular a service
another
or component may require other dependent
services to complete a task. Angular uses
dependency injection design pattern to fulfil these
dependencies. The advantage of dependency
injection design pattern is to divide the task
among deferent services.
In Angular we specify providers for services using
@Injectable(),
@ngModule() &
@Component() decorators.
Now let us
discuss about each
decorators in detail
@Injectable(): This is used to inject some sort of
service in the angular.

@ngModule(): This is used to construct some new


module

@Component(): This is used to specify some


components used to execute the application.
Providers in angular dependency
injection
useClass: A class provider that creates and returns
new instance of specified class.

useExisting: An alias provider that maps one token


to another.

useFactory: Configures a factory provider that


returns object for dependency injection.

useValue: A value provider that returns a fixed


value for dependency injection.
Some Components in angular
What is meant by service ?
Services
AngularJS supports the concept of Separation of Concerns using
services architecture. Services are JavaScript functions, which are responsible to
perform only specific tasks. This makes them individual entities which are
maintainable and testable. The controllers and filters can call them on requirement
basis. Services are normally injected using the dependency injection mechanism
of AngularJS. There are some components to inject services.

1. Value

2. Factory

3. Service

4. Provider

5. Constant
1) Value
Value is an object. It can be a number,
string or javascript object. It is used to pass the
value to controller, service or factories in config
or run phase.
Components
Templat
e
Class
MetaDa
ta
Sample Program
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.
min.js"></script>
<body>
<div ng-app="" >
<p>Enter Some text here :</p>
<p>Name: <input type="text" ng-model="language"></p>
<p>Hello : {{ language }}</p>
</div>
</body>
</html>
Expected Output : When internet
is not available
When u connect internet
Sample application using ng-init
<!DOCTYPE html>
directive
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.
min.js"></script>
<body>
<div ng-app="" ng-init="quantity=1;price=5">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity * price}}</p>
</div>
</body>
Output
Sample application using ng-repeat
<!DOCTYPE html>
directive
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.mi
n.js"></script>
<body>
<div ng-app="" ng-init="names=['Kumar','Kiran','Rajesh']">
<p>Example on ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
Output
WT LAB 1 to 10
PROGRAMS
Prepare thesesame program to ur
Theory Exams also
Exercise 1:
Design HTML fundamental Concepts.
• Headings
• Links
• Paragraph
• Images
• Tables
Example on Headings
1) Headings
The headings will be declared under <hn> Content to be added here…</hn> ,
where n can be value range from 1 to 6.

<!DOCTYPE html>
<html>
<head>
<title> My First Example on Headings </title>
</head>
<body>
<h1>My First Heading with H1 Size </h1>
<h2>My First Heading with H2 Size </h2>
<h3>My First Heading with H3 Size </h3>
<h4>My First Heading with H4 Size </h4>
<h5>My First Heading with H5 Size </h5>
<h6>My First Heading with H6 Size </h6>
</body>
</html>
2) Links
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>

Example program
<!DOCTYPE html>
<html>
<head>
<title> Example on HTML Links </title>
</head>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Click Here for More
Information !</a></p>
</body>
</html>
3)Paragraph
<p> is the tag which is used to display the content in paragraph manner < /p>
Example program
<!DOCTYPE html>
<html>
<head>
<title> Example on HTML Paragraph </title>
</head>
<body>
<p> This is one of the main tag
Which is used to display the content in paragraph manner

Here we can give either single line or multiple lines and display
whole content in paragraph
</p>
</body>
</html>
4) Images
<img src= ” is the tag which is used to link images “
>
Example

<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src=“img_girl.jpg" alt="Girl in a jacket ”
width="500" height="600">
</body>
</html>
5) tables
Example on rowspan and colspan
Exercise 2: Design HTML fundamental
constructs. (i) Frames (ii) Forms and
HTML controls
i)Frames
ii) Html Forms
Exercise 3: Design Cascading style
sheets
(i) Internal
(ii) External
(iii) Inline
1) Internal Style Sheet
2)Inline style sheet
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">
This is a heading</h1>
<p style="color:red;">This is a
paragraph.</p>
</body>
</html>
3)External Style Sheet(External.html)
abc.css file
Element Selectors
<!DOCTYPE html>
<html>
<head>
<style>
p.intro {
background-color: yellow;
}</style>
</head>
<body>
<h1>Demo of the element.class selector</h1>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p class="intro">My best friend is Mickey.</p></body></html>
Exercise 4
Exercise 4:
Write an XML file which will display
the Book information which includes the following: (i) Title
of the book
(ii) AuthorName (iii) ISBN number
(iv) Publisher name(v)
Edition (vi) Price
(a)Write a Document Type Definition (DTD) to
validate the above XML file.
(b) Write a XML Schema Definition (XSD)
Sample DTD for Book
Book.xml
Contd..
Contd..
book.xsl
Contd…
Lab Exercise 5:Create a simple JSP to print the current
Date and Time.
Lab Exercise 6:Create a simple JSP a) Display current IP-
Address of the System b) Find out the Square root for a
Number
6 b) Find out the Square root for a Number
Lab Exercise 7:Develop JSP program calculates factorial values for an integer
number, while the input is taken from an HTML form.

Index.jsp
Exercise 7: Develop JSP program calculates factorial values
for an integer number, while the input is taken from an
HTML form.
Exercise 8:Develop JSP program shows a Sample Order Form
Catalog.jsp
Exercise 9:
a) MYSQL connectivity using Type 4 Driver for Data
Retrieval
Before executing the program,just try to create
database with following tables

create database vasavi;


use vasavi;
create table emp(id int(10),name varchar(40),age int(3));

insert into emp values(1,'praveen',31);


insert into emp values(2,'Kumar',30);
insert into emp values(3,'Sowmya',29);
Exercise 9:
b) MYSQL connectivity using Type 4 Driver for Data
Update
Exercise 9:
c) MYSQL connectivity using Type 4 Driver for Data
Deletion
Database Tables for Delete Operation Program

• CREATE DATABASE "vasavi";

• USE "vasavi";

• CREATE TABLE /*!32312 IF NOT EXISTS*/ "student" ( "stdno" int(50) ,


"stdname" varchar(50) , "stdmarks" int(10));

• Try to insert some student details in the above


table.s
Exercise 9:
d) MYSQL connectivity using Type 4 Driver for Data
Insertion using Prepared Statement
Exercise 10: Design a simple Node JS application
How to run the hello.js program
Now execute the hello.js to start the server as follows
−

You might also like