WAD LAB Manual

DEPARTMENT OF MASTER OF COMPUTER APPLICATIONS
P20MCP203 - WEB APPLICATION

DEVELOPMENT LAB
MANUAL
YEAR/SEMESTER: I/II
Contents
SNO Experiment PageNo

HTML tags
Study Material of HTML Tags
1 Construct webpage with simple html tags.
2 Develop web page to create your Biodata using html tags
Cascading Style Sheet

3 Build a webpage for college detail using CSS code
Inline/External/Internal
4 Apply CSS property for the webpage creation
5 Build a Webpage to provide look and feel using CSS property

Display float,Inline,Block
Align,opacity,Navigation bar, drop down
Image Gallery Forms
6 Develop a webpage to display a graphic effect using CSS property
Transition ,Grid
7 Create a Webpage for Resume using HTML and CSS
Bootstrap
8 Build responsive website using Bootstrap.
Containers, Grid Basic,Jumbotron,Buttons,Cards,Navbar
9 Forms,Inputs,Input Group,carousel,Modal Filters
JavaScript
10 Implement cilent side programming using javascript to perform client side validation
11 Implement DOM model using java script
12 Develop a webpage to publish result of a class using Java script
JQuery
13 Use JQuery concept on website creation
Selector,event,Effects , hide and show ,fade slide.
14 Using jQuery find all textareas, and make a border. Then add all paragraphs to the
jQuery object to set their borders red.
XML
15
Displaying XML file using CSS
16
Displaying XML file using XSLT
17
XML Document is Well-Formed or not using DOM Parser in Java
18
Reading XML document using DOM Parser in Java
19
XML Document is Well-Formed or not using SAX Parser in Java
20
Reading XML document using SAX Parser in Java
Java
21
Study Material of HTML Tags
<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the
version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code.
<body>: Body tag is used to enclosed all the data which a web page has from texts to links.
All of the content that you see rendered in the browser is contained within this element.
Head tag
The <head> tag in HTML is used to define the head portion of the document which contains
information related to the document. The <head> tag contains other head elements such as
<title>, <meta>, <link>, <style> <link> etc.
The following elements can go inside the <head> element:
 <title> (this element is required in an HTML document)

 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>
Elements Description Syntax

title The <title> tag is required <title>HTML Reference</title>
in all HTML documents
and it defines the title of
the document.
style The <style> tag is used to <style>
define style information for h1 {color:red;}
an HTML document. p {color:blue;}
</style>
base The <base> tag specifies <base href="https://www.w3schools.com/" targe
the base URL/target for all t="_blank">
relative URLs in a
document.
link <link rel="stylesheet" type="text/css" href="the
The <link> tag defines a me.css">
link between a document
and an external resource.
The <link> tag is used to

link to external style
sheets.
meta <meta charset="UTF-8">

The <meta> tag provides <meta name="description" content="Free Web
metadata about the HTML tutorials">
document. Metadata will <meta name="keywords" content="HTML,CSS
not be displayed on the ,XML,JavaScript">
page, but will be machine <meta name="author" content="John Doe">
parsable. <meta name="viewport" content="width=devic
e-width, initial-scale=1.0">
Meta elements are typically
used to specify page
description, keywords,
author of the document,
last modified, and other
metadata.
The metadata can be used

by browsers (how to
display content or reload
page), search engines
(keywords), or other web
services.
script <script>
The <script> tag is used to document.getElementById("demo").innerHTML
define a client-side script = "Hello JavaScript!";
(JavaScript). </script>
The <script> element either

contains scripting
statements, or it points to
an external script file
through the src attribute.
noscript The <noscript> tag defines <script>

an alternate content for document.write("Hello World!")
users that have disabled </script>
scripts in their browser or
have a browser that doesn't
support script.
Formatting Tags
Formatting elements were designed to display special types of text.
i. <b> - Bold text
The HTML <b> element defines bold text, without any extra importance.
Syntax: <b>This text is bold</b>
ii. <strong> - Important text
The HTML <strong> element defines strong text, with added semantic "strong"
importance.
Syntax: <strong>This text is strong</strong>
iii. <i> - Italic text
The HTML <i> element defines italic text, without any extra importance.
Syntax: <i>This text is italic</i>
iv. <em> - Emphasized text
The HTML <em> element defines emphasized text, with added semantic importance.
Syntax: <em>This text is emphasized</em>
v. <mark> - Marked text
The HTML <mark> element defines marked/highlighted text:
Syntax: <h2>HTML <mark>Marked</mark> Formatting</h2>
vi. <small> - Small text
The HTML <small> element defines smaller text:
Syntax:<h2>HTML <small>Small</small> Formatting</h2>
vii. <del> - Deleted text
The HTML <del> element defines deleted/removed text.
Syntax: <p>My favorite color is <del>blue</del> red.</p>

viii. <ins> - Inserted text
The HTML <ins> element defines inserted/added text.
Syntax: <p>My favorite <ins>color</ins> is red.</p>
ix. <sub> - Subscript text
The HTML <sub> element defines subscripted text.
Syntax: <p>This is <sub>subscripted</sub> text.</p>
x. <sup> - Superscript text
The HTML <sup> element defines superscripted text.
Syntax: <p>This is <sup>superscripted</sup> text.</p>

Heading Tags:
Any document starts with a heading of different sizes. HTML has six levels of headings,
which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any
heading, browser adds one line before and one line after that heading.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading.
Image Tag
The “img” tag is used to add images on a webpage. The “img” tag is an empty tag, which
means it can contain only a list of attributes and it has no closing tag.
Syntax: <img src="url" alt="some_text">
Attributes
Attribute Value Description
align top Specifies the alignment of an image according to

bottom surrounding elements
middle
left
right
alt text Specifies an alternate text for an image
border pixels Specifies the width of the border around an image
height pixels Specifies the height of an image

hspace pixels Specifies the whitespace on left and right side of an
image
sizes Specifies image sizes for different page layouts
src URL Specifies the URL of an image
srcset URL Specifies the URL of the image to use in different

situations
usemap #mapname Specifies an image as a client-side image-map
width pixels Specifies the width of an image
Audio Tags
It is used to add audio in web pages. The “audio” tag is an inline element which is used to
embed sound files into a web page. It is a very useful tag if you want to add audio such as
songs, interviews, etc on your webpage.
Syntax:
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
Attributes
autoplay autoplay Specifies that the audio will start playing as soon as it is ready
controls controls Specifies that audio controls should be displayed (such as a

play/pause button etc)
loop loop Specifies that the audio will start over again, every time it is
finished
muted muted Specifies that the audio output should be muted
preload auto Specifies if and how the author thinks the audio should be
metadata loaded when the page loads
none
src URL Specifies the URL of the audio file

Video Tags
The HTML5 “video” element specifies a standard way to embed a video in a web page.
Syntax:
<video src="" controls>&lt/video>
Attributes
autoplay autoplay Specifies that the video will start playing as soon as it is ready
controls controls Specifies that video controls should be displayed (such as a

play/pause button etc).
height pixels Sets the height of the video player
loop loop Specifies that the video will start over again, every time it is finished
muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is downloading, or

until the user hits the play button
preload auto Specifies if and how the author thinks the video should be loaded
metadata when the page loads
none
src URL Specifies the URL of the video file
width pixels Sets the width of the video player
HTML Table
A table is an arrangement of data in rows and columns, or possibly in a more complex
structure. Tables are widely used in communication, research, and data analysis.
 Tables are useful for various tasks such as presenting text information and
numerical data.
 Tables can be used to compare two or more items in tabular form layout.
 Tables are used to create databases.
Defining Tables in HTML
An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A
table header is defined with the “th” tag. By default, table headings are bold and centered. A
table data/cell is defined with the “td” tag.
Syntax:
<table>
<tr> <th>header text</th> </tr>
<tr> <td>cell text</td> </tr>
</table>
Attributes
align left Not supported in HTML5.

center Specifies the alignment of a table according to
right surrounding text
bgcolor rgb(x,x,x) Not supported in HTML5.

#xxxxxx Specifies the background color for a table
colorname
border 1 Not supported in HTML5.

0 Specifies whether or not the table is being
used for layout purposes
cellpadding pixels Not supported in HTML5.

Specifies the space between the cell wall and
the cell content
cellspacing pixels Not supported in HTML5.

Specifies the space between cells
frame void Not supported in HTML5.

above Specifies which parts of the outside borders
below that should be visible
hsides
lhs
rhs
vsides
box
border
rules none Not supported in HTML5.

groups Specifies which parts of the inside borders that
rows should be visible
cols
all
summary text Not supported in HTML5.

Specifies a summary of the content of a table
width pixels Not supported in HTML5.

% Specifies the width of a table
HTML Lists
A list is a record of short pieces of information, such as people’s names, usually written or
printed with a single thing on each line and ordered in a way that makes a particular thing
easy to find.
For example:
 A shopping list
 To-do list
Lists in HTML
HTML offers three ways for specifying lists of information. All lists must contain one
or more list elements.
The types of lists that can be used in HTML are :
 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.
i. Unordered List
An unordered list starts with the “ul” tag. Each list item starts with the “li” tag.The list
items are marked with bullets i.e small black circles by default.
Syntax:
<ul style="list_style_type:disc;">
<li>item1</li> <li>item2</li>.......<li> item n</li>
</ul>
list-style-type - property is used to define the style of the list item marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

ii. Ordered List
The ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list
items are marked with numbers by default.
Syntax:
<ol type="1">
<li>item1</li> <li>item2</li>.......<li> item n</li>
</ol>
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
iii. Description List
A description list is a list of terms, with a description of each term. The <dl> tag
defines the description list, the <dt> tag defines the term name, and the <dd> tag describes
each term.
Syntax:
<dl>
<dt>description term</dt>
<dd>description data</dd>
<dl>
anchor tag
An anchor tag is an HTML tag. It is used to define the beginning and end of a
hypertext link. Search engines use the tag to determine the subject matter of the destination
URL. Users click on the anchor text to reach the link target.
The <a> tag in HTML is used to create a hyperlink on the webpage. This hyperlink is
used to link the webpage to other WebPages.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red
.Syntax:
<a href = "link"> Link Name <a>
Attributes
coords coordinates Not supported in HTML5.

Specifies the coordinates of a link
download filename Specifies that the target will be downloaded when a user clicks
on the hyperlink
href URL Specifies the URL of the page the link goes to
name section_name Not supported in HTML5. Use the global id attribute instead.
Specifies the name of an anchor
shape default Not supported in HTML5.

rect Specifies the shape of a link
circle
poly
target Opens the linked document in a new window or tab

(Specifies _blank
where to
open the _self Opens the linked document in the same frame as it was clicked
linked (this is default)
document)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame
Span tag
The HTML span element is a generic inline container for inline elements and content.
It used to group elements for styling purposes (by using the class or id attributes), A better
way to use it when no other any other semantic element is available. span is very similar to
the div tag, but div is a block-level tag and span is an inline tag. Span tag is a paired tag
means it has both open(<) and closing (>) tag and it is mandatory to close the tag.
 The span tag is used to grouping of inline-elements.

 The span tag does not make any visual change by itself.
 span is very similar to the div tag, but div is a block-level tag and span is an inline tag.
Syntax:
<span class="">Some Text............</span>
Div Tag
The div tag is known as Division tag. The div tag is used in HTML to make divisions
of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has
both open(<div>) and closing (</div>) tag and it is mandatory to close the tag. The Div is the
most usable tag in web development because it helps us to separate out data in the web page
and we can create a particular section for particular data or function in the web pages.
 Div tag is Block level tag

 It is a generic container tag
 It is used to the group of various tags of HTML so that sections can be created and style
can be applied to them.
Syntax:
<div> ...</div>
align left Not supported in HTML5.

right Specifies the alignment of the content inside
center a <div> element
justify
Marquee Tag
The <marquee> tag in HTML is used for creating scrolling text or image in a
webpages. It scrolls either from horizontally left to right or right to left, OR vertically top to
bottom or bottom to top. The marquee element comes in pairs. It means means that the tag
has opening and closing elements.
Syntax:
<marquee>. . .</marquee>
Attibutes
ATTRIBUTES VALUES DESCRIPTION
bgcolor Color Name Define the background color of the marquee.
Top, Down, Left,

direction Right Define the direction of scrolling the content
Specifies how many times content moves. The

loop Number default value is infinite.
height px or % Define the height of marquee
width px or % Define the width of marquee

ATTRIBUTES VALUES DESCRIPTION
hspace px Specify horizontal space around marquee
vspace px Specify vertical space around marquee
scrollamount Number provides a value for speeding the marquee

feature
HTML Form
HTML Form is a document which stores information of a user on a web server using
interactive controls. An HTML form contains different kind of information such as username,
password, contact number, email id etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons
etc. Using these elements the information of an user is submitted on a web server.
The form tag is used to create an HTML form.
Input Element in HTML Forms :
Input Elements are the most common elements which are used in HTML Forms. Various user
input fields can be created such as textfield, check box, password field, radio button, submit
button etc. The most common input elements are listed below:
Input Description Syntax

Element
label To display static text <label for="male">Male</label><br>
on the web page.
Textfield The text field is a one <input type="text" name="Email id"
line input field id="Emailid">
allowing the user to
input text.
Password It is a type of text field <input type="password" name="user-pwd"
fields in which the text id="user-password">
entered is masked
using asterisk or dots
for prevention of user
identity from another
person
Radio Radio Buttons are <input type="radio" name="gender" id="male">
Buttons used to let the user <label for="male">Male</label><br>
select exactly one
option from a list of
predefined options.
Checkboxes Checkboxes are used <input type="checkbox" name="subject"
to let the user select id="maths">
one or more options <label for="maths">Maths</label>
from a pre-defined set
of options.
File select boxes are <label for="fileselect">Upload:</label>
File select used to allow the user <input type="file" name="upload" id="fileselect">
boxes to select a local file
and send it as an
attachment to the web
server
Text Area is a <textarea rows="5" cols="50"
Text area multiple line text name="Description" id="Description"></textarea>
input control which
allows user to provide
a description or text in
multiple lines.
Select boxes are used <select name="country" id="country">
Select to allow users to select <option value="India">India</option>
Boxes one or more than one <option value="Sri Lanka">Sri Lanka</option>
option from a pull- <option value="Australia">Australia</option>
down list of options. </select>
The Submit Button <input type="submit" value="Submit">
Reset And allows the user to <input type="reset" value="Reset">
Submit send the form data to
the web server. The
Buttons
Reset Button is used
to reset the form data
and use the default
values.
Attributes Used in HTML Forms

Attribute Description Syntax
Name
Action The action to be performed after the <form action="test.php"
submission of the form is decided by the method="post" id="users">
action attribute.
Target The Target attribute is used to specify <form action="/test.php"
whether the submitted result will open in target="_blank">
the current window, a new tab or on a
new frame.(self or blank)
name The name attribute is required for each <input type="password"
input field. It is required to get and set name="password">
the value of the form elements.
It is used to specify the HTTP method <form action="/test.php"
Method used to send data while submitting the target="_blank"
form.There are two kinds of HTTP method="GET">
Methods, which are GET and POST.
Block Level Elements
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
<div> <address> <article> <aside> <blockquote> <canvas>
<figure> <video> <form> <h1>- <table> <ul>

<figcaption> <h6> <li>
<ol>
<fieldset> <dd> <p> <header> <footer> <section>

<dl>
<dt>
i. address tag
The <address> tag defines the contact information for the author/owner of a document or an
article.
If the <address> element is inside the <body> element, it represents contact information for
the document.
If the <address> element is inside an <article> element, it represents contact information for
that article.
The text in the <address> element usually renders in italic. Most browsers will add a line
break before and after the address element
ii. Figure and figure caption
Use a <figure> element to mark up a photo in a document. The <figure> element can also
contain a <figcaption>:The <figcaption> tag defines a caption for a <figure> element. The
<figcaption> element can be placed as the first or last child of the <figure> element.
iii. Article
The <article> tag 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:
 Forum post
 Blog post
 News story
 Comment
iv. Aside tag

The <aside> tag is used to describe the main object of the web page in a shorter way
like a highlighter. It basically identifies the content that is related to the primary content of
the web page but does not constitute the main intent of the primary page. The <aside> tag
contains mainly author information, links, related content and so on.
<aside> Vs <div>: Both tags have same behavior with different meaning.
 <div>: It define or create division or section in the web page.
 <aside>: It does the same job by creating section or division but it contains only the
content that is related to the main web page.
The <aside> tag makes easy to design the page and it enhances clarity of html document.
Syntax:
<aside>
<h3>Contents...</h3>
<p>Contents...</p>
</aside>
v. Section tag
The <section> tag defines sections in a document, such as chapters, headers, footers,
or any other sections of the document.
Syntax:
<section>...</section>
vi. canvas
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). The
<canvas> tag is only a container for graphics, you must use a script to actually draw the
graphics.
Ex.No.1 Simple HTML Program
Aim:
To study the structure of HTML program by displaying Images, Links, Tables,
List, Video, Audio, Form message on the browser.
Structure of HTML Program
Procedure:
Program:
<!DOCTYPE html>
<html>
<body style="background-color:turquoise;">
<h1>HTML Image</h1>
<img src="https://www.w3schools.com/html/pic_trulli.jpg" width="500" height="333">
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

<h1>table</h1>
<table style="width:20%" border="4px solid black">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<h1>VIDEO</h1>
<body>
<video src="video path.video type" controls autoplay width="50%">
</video>
<h1>AUDIO </h1>
<body>
<audio src="audio path.audio type" controls></audio>
<h1>HTML unordered list</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h1>HTML ordered list</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Sample Input/Output:
Ex.No.2 Form Creation HTML Program
Aim:
To create a webpage using Form controls.
Procedure:
Program:
<html>
<head>
<title>
Form Creation Example
</title>
</head>
<body>
<h1>HTML forms</h1>
<form>
<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" placeholder="Enter the first name"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" placeholder="Enter the last name"><br>

<label for="fname">Email:</label><br>
<input type="email" id="fname" name="fname" placeholder="Enter the Email"><br>

<label for="fname">Password:</label><br>
<input type="password" id="fname" name="fname" placeholder="Enter the

password"><br>
<h5>Radio button used to select any one of the given options</h5>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br>
<h5>Checkbox is used to select more than one options</h5>

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> I have a car<br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> I have a
boat<br><br>
<label for="vehicle2"> select the Item</label><br>
<select>
<option>BMW</option>
<option>Toyota</option>
<option>Hero Honda</option>
<option>Apache</option>
</select><br><br>
<label for="vehicle2">Add Your Explanation</label><br>
<textarea for="txtarea"></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Ex.No.3 Create Biodata using HTML Tags
Aim:
To Develop a web page to create your Biodata using html tags.
Procedure:
Program:
<html>
<head>
<title>BIO-DATA</title>
</head>
<body>
<table>
<h1 style="text-align:center">BIO-DATA</h1>
<h3>Personal Information:</h3>
<form>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name"></td>
</tr>
<tr>
<td><label for="fname">Father's name:</label></td>
<td><input type="text" id="fname" name="fname"></td>
</tr>
<tr>
<td><label for="mname">Mother's name:</label></td>
<td><input type="text" id="mname" name="mname"></td>
</tr>
<tr>
<td><label for="date of birth:">Date of birth:</label></td>
<td><input type="text" id="date of birth" name="dob"></td>
</tr>
<tr>
<td><label for="address">Permanent address:</label></td>
<td><input type="text" id="address" name="address"></td>
</tr>
<tr>
<td><label for="email">Email id:</label></td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td><label for="phone">Phone.No:</label></td>
<td><input type="text" id="phone" name="phone"></td>
</tr>
<tr>
<td><label for="nationality">Nationality:</label></td>
<td><input type="text" id="nationality" name="nationality"></td>
</tr>
<tr>
<td><label for="courses">educational qualification:</label></td>
<td><select id="courses" name="courses">
<option value="B.Tech">B.Tech</option>
<option value="B.Sc">B.Sc</option>
<option value="B.Arch">B.Arch</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td><label for="work experience">work experience:</label></td>
<td><textarea name="work experience" placeholder="write your work

experience"></textarea></td>
</tr>
</table>
</form>
<h3>Eductional qualifications:</h3>
<table style="width:50%" border="3px solid black">
<tr>
<th>school</th>
<th>board</th>
<th>courses</th>
<th>percentage</th>
<th>passing year</th>
</tr>
<tr>
<td>xxxx</td>
<td>stateboard</td>
<td>HSC</td>
<td>98%</td>
<td>2015</td>
</tr>
<tr>
<td>xxxx</td>
<td>CBSE</td>
<td>SSLC</td>
<td>96%</td>
<td>2013</td>
</tr>
</table><br><br>
<h3>Skills:</h3>
<ol>
<li>fluent in english and spanish</li>
<li>team collaboration</li>
<li>time management</li>
</ol>
<h3>Technical skills:</h3>
<ol>
<li>computer:MS-CIT</li>
<li>typing</li>
</ol>
<h3>Area of interest:</h3>
<ol>
<li>object oreinted programming with C</li>
<li>front end web developer</li>
</ol>
<h3>Hobbies:</h3>
<ul>
<li>reading books</li>
<li>newspapers</li>
<li>travelling</li>
</ul>
<h3>Career Objective</h3>
<p>To work in a challenging environment demanding all my skills and adapt myself in
different fields for the development of the organisation with impressive performance</p>
<input type="submit" value="Submit">
</body>
</html>
BIO-DATA
Personal Information:
Name:
Father's name:
Mother's name:
Date of birth:
Permanent address:
Email id:
Phone.No:
Nationality:
educational qualification:
TBel
i e k
work experience:
e peri n e
Educfional qualificafions:
courseseat e io ye
skateboard JHSC |x% ||zon
CBSE JSSLC |96% j2013
Skills:
1. fluent in english and spanish

2. team collaboration
3. time management
Technical skills:
1. computer:MS-CIT
2. typing
Area of interest:
1. object oreinted programming with C

2. front end web developer
Bobbies:
• Tead@g books
• aewspagers
Career’ Objecfive
To work in a challenging environment demanding all my skills and adapt myself in di8erent fields for the development of the organisation with impressive performance
Cascading Style Sheet
How to write style rules
Selector {property: value;}
h1 {
color: blue;
background-color: green;
}
Means:
Speaking of my heading1, I want the text color to be blue and the background color to be
green.
There are three types of style-rule-places :

- Inlined
- Internal Style Sheet
- External Style Sheet
Inline Syntax:
<body>
<p style = “text-align: center; font- weight: bold; color: yellow;”>What was
I thinking?</p>
</body>
Internal CSS Stylesheet

<head><title>My Wonderful Example</title>
<style type=“text/css”>
body {
text-align: left;
font-family: trebuchet, verdana;}
</style>
</head>
External CSS Stylesheet
<html>
<head><title>My Way</title>
<link rel="stylesheet" href="http://www2.hawaii.edu/~myway. css"
type="text/css“>
</head>
<body> </body>
</html>
The id selector
The id selector selects the id attribute of an HTML element to select a specific element. An
id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Welcometocss</p>
<p>This paragraph will not be affected.</p>
</body>
The class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.
Note: A class name should not be started with a number.
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
Ex.No.4 Create a webpage for your college using CSS property
Aim:
To create a web page for displaying the college details using CSS property like color, Margin
& Padding, Box Model, Fonts, Tables
Procedure:
Program:
<html>
<head>
<title>
box model
</title>
<link rel="stylesheet" href="externalstyle.css">
<style>
div{
width: 900px;
border: 5px solid rgb(128, 0, 0);
padding: 15px;
margin: 20px;
background-color: rgb(230, 227, 64);
}
h1{
color: crimson;
font-family: sans-serif;
text-align: center;
}
table, td, th {
border: 2px solid black;
text-align: center;
}
table {
width: 900px;
border-collapse: collapse;
}
</style>
</head>
<body>
<div>
<h1> SRI MANAKULA VINAYAGAR ENGINEERING COLLEGE</h1>
<h3 style="text-align: center; font-family: cursive; color: rgb(0, 9, 139);"> (An
Autonomous Institution) </h3>
<p> (Approved by AICTE, New Delhi, Affiliated to Pondicherry University) </p>
<p> (Accredited by NBA-AICTE, New Delhi, ISO 9001:2000 Certified Institution
&</p>
<p> Accredited by NACC with "A" Grade)</p>
<h2 style="color: rgb(0, 0, 0); text-align: center;"> Madagadipet, Puducherry -
605107.</h2>
<table >
<tr style="color: rgb(68, 5, 5);">
<th>Department</th>
<th>No of students</th>
</tr>
<tr>
<td>IT</td>
<td>140</td>
</tr>
<tr>
<td>CSE</td>
<td>147</td>
</tr>
<tr>
<td>EEE</td>
<td>136</td>
</tr>
<tr>
<td>ECE</td>
<td>153</td>
</tr>
<tr>
<td>BME</td>
<td>130</td>
</tr>
</table>
</div>
</body>
</html>
/* external style sheet

externalstyle.css */
body{
background-color: rgb(205, 43, 226);
}
p{
color: rgb(0, 0,
0); text-align:
center;
}
Ex.No:5 Build a webpage to provide look and feel using CSS
property Aim:
To build a webpage to provide look and feel using CSS property
Procedure:
Program:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover
{ border: 1px solid
#777; opacity: 0.5;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc
{ padding: 15px;
text-align: center;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}

ul.topnav li a
{ display:
block; color:
white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #04AA6D;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px) {

ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body style="background-color: black;">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
<h1 style="background-color:goldenrod;"><center>MY GALLERY</center></h1>
<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li class="right"><a href="#about">About</a></li>
</ul>
<p><center><h3 style="color: antiquewhite;">This is my photo gallery.This photo are
about natural.</h3></center></p>
<div class="gallery">
<a target="_blank" href="https://encrypted- tbn0.gstatic.com/images?
q=tbn:ANd9GcRvVX8DwgpQC10KQ1eJVXd6gDkSW-
8ciupLsA&usqp=CAU">
<img src="https://encrypted- tbn0.gstatic.com/images?
q=tbn:ANd9GcRvVX8DwgpQC10KQ1eJVXd6gDkSW- 8ciupLsA&usqp=CAU"
alt="River" width="600" height="400">
</a>
<div class="desc" style="color: blanchedalmond;">River Valley</div>
</div>
q=tbn:ANd9GcR8JSBDl7WW3v_2APRn9Lm4s2LsZ23IAmIAPA &usqp=CAU">
q=tbn:ANd9GcR8JSBDl7WW3v_2APRn9Lm4s2LsZ23IAmIAPA &usqp=CAU"
alt="Forest" width="600" height="400">
</a>
<div class="desc" style="color: blanchedalmond;">Forest</div>
</div>
<a target="_blank" href="https://encrypted- bn0.gstatic.com/images?
q=tbn:ANd9GcQ6qmE8re63vevxTs83-hMsRTyWT9oYtOFy9g&usqp=CAU">
q=tbn:ANd9GcQ6qmE8re63vevxTs83- hMsRTyWT9oYtOFy9g&usqp=CAU"
alt="Northern Lights" width="600" height="400">
</a>
<div class="desc" style="color: blanchedalmond;">Northern Lights</div>
</div>
q=tbn:ANd9GcQeJVO7dPtKCMvmVIdEgACkRWq6wgbwSPG56 g&usqp=CAU">
q=tbn:ANd9GcQeJVO7dPtKCMvmVIdEgACkRWq6wgbwSPG56 g&usqp=CAU"
alt="Mountains" width="600" height="400">
</a>
<div class="desc" style="color: blanchedalmond;">Mountains</div>
</div>
q=tbn:ANd9GcTcZuudxdPg_CcE4k4aT9b6dbPS5z0LmUJHLQ&u sqp=CAU">
q=tbn:ANd9GcTcZuudxdPg_CcE4k4aT9b6dbPS5z0LmUJHLQ&u sqp=CAU"
alt="Volcano" width="600" height="400">
</a>
<div class="desc" style="color: blanchedalmond;">Volcano</div>
</div>
<a target="_blank" href="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRPrxmx3Agfr0q6qCkK-
31- MyR7phVuQOLkvw&usqp=CAU">
q=tbn:ANd9GcRPrxmx3Agfr0q6qCkK-31-
MyR7phVuQOLkvw&usqp=CAU" alt="Desert" width="600" height="400">
</a>
<div class="desc" style="color: blanchedalmond;">Desert</div>
</div>
q=tbn:ANd9GcRjCfV1YF5iUAJz251Vb9oguPy8e4xs8M9- AA&usqp=CAU">
q=tbn:ANd9GcRjCfV1YF5iUAJz251Vb9oguPy8e4xs8M9- AA&usqp=CAU"
alt="Sea" width="600" height="400">
</a>
<div class="desc" style="color: blanchedalmond;">Sea</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn- dropdown-toggle" data-toggle="dropdown"
style="color: white;">
INFORMATION
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://en.wikipedia.org/wiki/River_Valley">River
Valley</a>
<a class="dropdown-item" href="https://en.wikipedia.org/wiki/Forest">Forest</a>
<a class="dropdown-item" href="https://en.wikipedia.org/wiki/Aurora">Northern
Lights</a>
<a class="dropdown-item" href="https://en.wikipedia.org/wiki/Mountain#:~:text=A
%20mountain%20is%20an%20eleva ted,feet)%20above%20the%20surrounding
%20land.">Mountains</a>
<a class="dropdown-item" href="https://en.wikipedia.org/wiki/Volcano">Volcano</a>
<a class="dropdown-item" href="https://en.wikipedia.org/wiki/Desert#:~:text=A
%20desert%20is%20a%20barren,is%20 arid%20or%20semi%2Darid.">Desert</a>
<a class="dropdown-item" href="https://en.wikipedia.org/wiki/Sea">Sea</a>
</div>
</div>
<h3 style="color: deeppink;"><center>NATURAL PHOTOGRAPHY</center></h3>
<br>
<br>
<p style="color: darkred;">
# Nature photography is a wide range of photography taken outdoors and devoted to
displaying natural elements such as landscapes, wildlife, plants, and close-ups of natural
scenes and textures. Nature photography tends to put a stronger emphasis on the aesthetic
value of the photo than other photography genres, such as photojournalism and documentary
photography.<br>
# Nature photography" overlaps the fields of—and is sometimes considered an
overarching category including -- "wildlife photography," "landscape photography," and
"garden photography<br>
# Nature photographs are published in scientific, travel and cultural magazines such as
National Geographic Magazine, National Wildlife Magazine and Audubon Magazine or other
more specific magazines such as Outdoor Photographer and Nature's Best Photography. Well
known nature photographers include Ansel Adams, Eliot Porter, Frans Lanting, Galen
Rowell, and Art Wolfe.
</p>
</body>
</html>
Sample Input\Output:
Hover:
Ex.No:6 Displaying Graphic effect using CSS property.
Aim:
Develop a webpage to display a graphic effect using CSS property Transition and Grid
Procedure:
Program:
<!doctype html>
<html>
<title>Example</title>
<style>
body {
display: grid;
grid-template-areas:
"header header
header" "nav article
ads" "footer footer
footer";
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr
15%; grid-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 20px;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
div.div1 {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
div:hover {
width: 300px;
}
</style>
<body>
<header id="pageHeader">Header</header>
<div>
<article id="mainArticle">Article</article>
<div class="div1" id="div1">linear</div><br>
<div class="div1" id="div2">ease</div><br>
<div class="div1" id="div3">ease-in</div><br>
</div>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>
</html>
Ex.No:7 Create a Webpage for Resume using HTML and CSS
Aim:
To create a webpage to display the resume using html and css property.
Procedure:
Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Logesh Varman's CV</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-
DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<img src="d:\susi\path.jpeg" />
</div>
<h1>Logesh Varman</h1>
<section>
<p>Hello! I am Logesh Varman. I work as front-end and back-end
developer. I'm focused, dedicated, hard-worker and team player.</p>
<a href="https://www.facebook.com/lokesh.messi.927/" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</a>
<a href="https://www.instagram.com/logesh_varman/" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/logesh-varman-7699021b1/"
target="_blank">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://github.com/Logeshvarman" target="_blank">
<i class="fab fa-github"></i>
</a>
</section>
</header>
<main>
<section>
<h3>Education</h3>
<article>
<div class='school'>
<span>2020-2024</span> <strong>Sri Manakula Vinayagar Engineering
College</strong>
</div>
<div class="descrition">
Bechelor Degree of Information Technology(pursuing)
</div>
</article>
<article>
<div class='school'>
<span>2014-2020</span> <strong>Seventh Day Adventist Higher
Secondary school</strong>
</div>
</div>
</article>
</section>
<section>
<h3>Skills</h3>
<div class='skills'>
<div class='column'>
<h4>Front-end:</h4>
<ul>
<li>HTML & CSS</li>
<li>Flutter UI</li>
</ul>
</div>
<div class="column">
<h4>Back-end:</h4>
<ul>
<li>FireBase</li>
<li>Django</li>
<li>Flask</li>
</ul>
</div>
<h4>DataBase:</h4>
<ul>
<li>MongoDB</li>
</ul>
</div>
<h4>Tools:</h4>
<ul>
<li>VSCODE</li>
<li>ANDROID STUDIO</li>
<li>POSTMAN</li>
</ul>
</div>
<h4>Languages:</h4>
<ul>
<li>Tamil</li>
<li>English</li>
<li>French</li>
</ul>
</div>
</div>
</section>
<section>
<h3>Courses & Workshops</h3>
<article class='course'>
<div class='title'>
<h4>Coursera : Crash Course on Python</h4>
</div>
<p>Learn to use various tools available for writing and running
Python.</p>
</div>
</article>
<article class='course'>
<div class='title'>
<h4>MTA: Introduction to Programming Using JavaScript</h4>
</div>
<p>Learn how to create web apps and prototypes with JavaScript,
represent and exchange data using JavaScript Object Notation (JSON), and how
to access RESTful APIs on the web.</p>
</div>
</article>
</section>
</main>
</body>
</html>
Style.css
body {
margin: 0;
font-family: 'Raleway';
font-size: 16px;
line-height: 1.8em;
}
a{
color: #1C9C94;
text-decoration: none;
}
a:hover
{ opacity:
0.5;
}
article {
padding:0 1em;
}
section{ margin
: 1em;
padding:
1em;
}
header, main, footer {

margin: 0 auto;
}
header {
padding: 2em;
text-align: center;
background-image: url('assets/code1.jpg');
background-size: cover;
background-position: fixed;
background-position: center;
}
header section {
margin: 0 auto;
max-width: 640px;
}
header img {
border-radius: 50%;
max-width: 150px;
}
h1 {
text-transform: uppercase;
margin: 1em 0;
}
h3 {
text-transform: uppercase;
}
h3, h4 {
font-weight: bold;
}
main {
max-width: 1140px;
}
main section:not(:last-child) {
border-bottom: 1px solid white;
}
.fab {
border: 1px solid rgb(240, 22, 192);
border-radius: 50%;
font-size: 1.5em;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
margin: 5px;
text-align: center;
}
a .fab {
color: rgb(247, 1, 255);
}
.course, .skills {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.course .title {
color: #509e98;
-ms-flex: 0 0 33.3%;
flex: 0 0 33.3%;
max-width: 33%;
}
.course .descrition {
-ms-flex: 0 0 66.6%;
flex: 0 0 66.6%;
max-width: 66.6%;
}
.course .descrition p {
padding-left: 1em;
}
.skills .column {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.skills .column ul, ul.job-description {

list-style-type: none;
}
.skills .column ul> li:before{

content: "►";
padding-right: 0.5em;
color: aqua;
}
.school, .job-title {
text-transform: capitalize;
}
.school span, .job-title span {

color: #889499;
text-decoration: underline;
}
@media only screen and (max-width: 768px) {

.course {
display: block;
}
.course .title, .course .descrition {

max-width: 100%;
}
}
@media only screen and (max-width: 576px) {

.skills {
display: block;
}
.skills .column {
max-width: 100%;
}
}
Ex.No:8 Building a Responsive website using Bootstrap
Aim:
To build a webpage to provide a responsive website using bootstrap using container, card,
navbar
Procedure:
Program:
Index.html
<!doctype html>
<html lang="en">
<head>
<title>Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">


href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
" integrity="sha384-
</head>
<body>
<div class="container-fluid p-3 bg-warning text-white">

<h1><center>BOOSTRAP 4</center></h1>
<p>Mark Otto announced Bootstrap 4 on October 29, 2014.</p>
<p>The first alpha version of Bootstrap 4 was released on August 19,
2015.</p>
</div>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<a class="navbar-brand" href="d:\program\project\page.html">Login</a>
<a class="navbar-brand" href="#">Home</a>
<a class="navbar-brand" href="#">PHP</a>
<a class="navbar-brand" href="#">jQuery</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">Bootstrap</a>
<div class="dropdown-menu">
<a class="dropdown-item"
href="https://en.wikipedia.org/wiki/Bootstrap_(front-
end_framework)">Bootstrap
4</a>
<a class="dropdown-item"
href="https://en.wikipedia.org/wiki/Bootstrap_(front-
end_framework)">Bootstrap
5</a>
</div>
</li>
</ul>
</nav>
<div class="container clearfix">
<div class="row">
<div class="col-lg-4">
<h2>Welcome!</h2>
<p>Everything in this city is worth waiting in line for.</p>
<p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly
beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton
candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry
chocolate pastry jelly croissant.</p>
<p>Cake sesame snaps sweet tart candy canes tiramisu I love
oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw
tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
</div>
<h2>Great food</h2>
<figure>
<img class="feat-img" src="d:\susi\food.jfif" alt="Drinks and
eats">
<figcaption>
<h4>Some Header Content Caption</h4>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam"</p>
</figcaption>
</figure>
<p>Croissant macaroon pie brownie. Cookie marshmallow
liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop
dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan
toffee dragée chocolate bar candy toffee pudding I love. Gummi bears
pie gingerbread lollipop.</p>
</div>
<h2>How to get here</h2>
<p><strong>Plane: </strong>Tiramisu caramels gummies chupa
chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie
lollipop dragée cheesecake.</p>
<p><strong>Train: </strong>Pie apple pie pudding I love wafer
toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin
I love fruitcake toffee pie.</p>
<p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o
jelly-o I love. I love sugar plum chocolate cake pie I love pastry
liquorice.</p>
</div>
</div>
</div>
<footer class="main-footer">
<span>©2017 Residents of The Best City Ever.</span>
</footer>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
<script
integrity="sha384-
</body>
</html>
Login.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-
alpha2/css/bootstrap.min.css"
integrity="sha384-
DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-
alpha2/js/bootstrap.bundle.min.js"
integrity="sha384-
BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD"
</script>
<title>Login In</title>
</head>
<body class="login">
<div class="container">
<div class="row justify-content-lg-center mt-5">
<div class="col-lg-4 col-md-4">
<div class="card bx">
<div class="card-body">
<div class="card-title">
<h4>Login as Admin</h4>
<p class="card-text small text-muted">Login with
your username & password</p>
<form>
<div class="mb-5">
<input type="text" class="form-control
form-control-sm" placeholder="Username"
required>
</div>
<div class="mb-5">
<input type="password" class="form-control
form-control-sm" placeholder="Password"
required>
</div>
<div class="mb-5">
<input type="submit" class="btn btn-block
btn-sm btn-success" value="Sign In">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
login as Admin
Ex.No:9 Webpage design using carousel and form creation using
Bootstrap Aim:
To create a webpage to include carousel and form using Bootstrap
Procedure:
Program:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
</head>
<body>
<div id="show" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#show" data-slide-to="0"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="d:\prg\path.jpeg" width="100%" height="250">
</div>
<div class="carousel-item">
<img src="d:\prg\food.jfif" width="100%" height="250">
</div>
<div class="carousel-item">
<img src="d:\prg\flower.jpg" width="100%" height="250">
</div>
</div>
<a class="carousel-control-prev" href="#show" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#show" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class="container">
<h1>FORM</h1>
<div class="form-group">
<label for="fname">FirstName:</label>
<input type="text" class="form-control" id="fname" name="fname"
placeholder="Enter your firstname">
</div>
<label for="mname">MiddleName:</label>
<input type="text" class="form-control" id="mname" name="mname"
placeholder="Enter your middlename">
</div>
<label for="lname">LastName:</label>
<input type="text" class="form-control" id="lname" name="lname"
placeholder="Enter your lastname">
</div>
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<label for="dob">Date Of Birth:</label>
<input type="date" class="form-group" id="dob" name="dob"
placeholder="Enter your DOB">
</div>
<label for="num">Phone:</label>
<input type="number" class="form-control" id="num" name="num"
placeholder="Enter your Phone NUmber">
</div>
<label for="Add">Address:</label>
<textarea class="form-control" id="Add" name="Add" rows="6"
placeholder="Enter your Address"></textarea>
</div>
<label for="Gender">Gender:</label><br>
<div class="form-check-inline"></div>
<label class="form-check-label" for="m">
<input type="radio" class="form-check-input" id="m" name="m"
value="Male" >Male
</label>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="f" name="f"
value="Female">Female
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="o" name="o"
value="Others">Others
</label>
</div>
<br>
<label for="Lan">Language Know:</label>
<select class="form-control" id="Lan" name="Lan">
<option>Tamil</option>
<option>English</option>
<option>Hindi</option>
<option>French</option>
</select>
</div>
<label for="photo">Photo:</label><br>
<input type="file" class="form-control-file border" name="file">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
<script
integrity="sha384-
</body>
</html>
Ex.No:10 Simple Java Script Program
Aim:
To create a simple javascript program.
Procedure:
Program:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Method</h2>
<p>How to define and use a Class method.</p>
<p id="demo"></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);

document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>
</body>
</html>
Ex.No:11 Client Side Validation using Java Script
Aim:
To create a javascript program to perform client side validation.
Procedure:
Program:
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
<style type="text/css">
body{
font-family: Calibri;
}
input[type="text"] {
width: 250px;
}
input[type="submit"], input[type="reset"] {
width: 77px;
height: 27px;
position: relative;left: 180px;
}
form{
text-align: center;
font-family: Calibri;
font-size: 20px;
border: 3px solid black;
width: 600px;
margin: 20px auto;
}
td {
padding: 10px;
}
td:first-child {
text-align: right;
font-weight: bold;
}
td:last-child
{ text-align:
left;
</style>
<script>
function validate() {
var fname = document.reg_form.fname;
var lname = document.reg_form.lname;
var address = document.reg_form.address;
var gender = document.reg_form.gender;
var email = document.reg_form.email;
var mobile = document.reg_form.mobile;
var course = document.reg_form.course;
if (fname.value.length <= 0) {
alert("Name is required");
fname.focus();
return false;
}
if (lname.value.length <= 0)
{ alert("Last Name is
required"); lname.focus();
return false;
}
if (address.value.length <= 0) {
alert("Address is required");
address.focus();
return false;
}
if (gender.value.length <= 0) {
alert("Gender is required");
gender.focus();
return false;
}
if (email.value.length <= 0)
{ alert("Email Id is
required"); email.focus();
return false;
}
if (mobile.value.length <= 0)
{ alert("Mobile number is
required"); mobile.focus();
return false;
}
if (course.value == "select course") {
alert("Course is required");
course.focus();
return false;
}
return false;
}
</script>
</head>
<body>
<center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>
<hr>
<form method="" action="" name="reg_form" onsubmit="return validate()">
<h2>Registration Form</h2>
<table>
<tr>
<td><label>First Name: </label></td>
<td>
<input type="text" name="fname" placeholder="First Name">
</td>
</tr>
<tr>
<td><label>Last Name: </label></td>
<td>
<input type="text" name="lname" placeholder="Last Name">
</td>
</tr>
<tr>
<td><label>Address: </label></td>
<td>
<input type="textarea" size="50" name="address" placeholder="Address">
</td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="femele">Female
</td>
</tr>
<tr>
<td><label>Email Id: </label></td>
<td>
<input type="text" name="email" placeholder="example@gmail.com">
</td>
</tr>
<tr>
<td><label>Mobile: </label></td>
<td>
<input type="number" name="mobile">
</td>
</tr>
<tr>
<td><label>Course: </label></td>
<td>
<select name="course">
<option value="select course">select course</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JAVASCRIPT</option>
<option value="Java">JAVA</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Performing validation:
This page says
Fo rn Mobile number is required
cript
Registration Form
First Name:D a
Last Name:Dharshini Address:Pondere Gender:O Male O• Female

Email Id:adiri a g
Mobile:
Course:esdeu
Sub tRae
Ex.No:12 Implement DOM Model using Javascript
Aim:
To implement a Document Object Model using javascript program.
Procedure:
Program:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
</head>
<body>
<body>
<div id="container " >
<div class="row">
<div class="card">
<article class="card-body">
<form>
<label for="name">Framework:</label>
<input type="text" id="name" placeholder="Enter a framework"
autocomplete="off">
</div>
<button id="btnAdd" type="submit" class="btn btn-success btn-lg">Add</button>
</div><br>
<label for="list">Framework List:</label><br>
<select id="list" name="list" multiple>
</div>
</select>
<div class="form-group"></div>
<button id="btnRemove" type="submit" class="btn btn-primary btn-
block">Remove Selected Framework</button>
</div>
</form>
</article>
</div>
</div>
</div>
<script>
const btnAdd = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const sb = document.querySelector('#list');
const name = document.querySelector('#name');
btnAdd.onclick = (e) => {

e.preventDefault();
// validate the option

if (name.value == '') {
alert('Please enter the name.');
return;
}
// create a new option
const option = new Option(name.value, name.value);
// add it to the list
sb.add(option, undefined);
// reset the value of the input

name.value = '';
name.focus();
};
// remove selected option

btnRemove.onclick = (e) => {
e.preventDefault();
// save the selected option

let selected = [];
for (let i = 0; i < sb.options.length; i++) {

selected[i] = sb.options[i].selected;
}
// remove all selected option

let index = sb.options.length;
while (index--) {
if (selected[index]) {
sb.remove(index);
}
}
};
</script>
</body>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
<script
integrity="sha384-
</body>
</html>
After Entering Data

Entering java in the texbox and click ADD button it will be entered in the textarea.
Removing the element:
Select JQuery in the textarea and click remove button , it will be deleted.
Ex.No:13 Display Result od the student using JavaScript
Aim:
To develop a webpage to publish result of a class using Java script
Procedure:
Program:
<html>
<head>
<title> Result Form</title>
<h3> YOUR RESULT </h3>

<h4> NAME</h4>
<input type="text" placeholder="Enter your name"/>
<h4> REG NO</h4>
<input type="text" placeholder="Enter your register number"/></br></br>
<script type="text/javascript">
function submit_marks() {
var sub1 =
parseInt(document.getElementById('s1').value); var sub2
= parseInt(document.getElementById('s2').value); var
sub3 = parseInt(document.getElementById('s3').value);
var sub4 =
parseInt(document.getElementById('s4').value); var sub5
= parseInt(document.getElementById('s5').value); var
sub6 = parseInt(document.getElementById('s6').value);
var total = sub1+sub2+sub3+sub4+sub5+sub6;
var avg = total/6;
var grade;
if (sub1<50||sub2<50||sub3<50||sub4<50||sub5<50||sub6<50) {
grade = 'You Failed';
}
else if(avg>=75){
grade = 'First class with Distiction';
}
else if(avg>=65)
{ grade = 'Second
Class';
}
else if(avg>=50)
{ grade = 'Third
Class';
}
document.getElementById("demo").innerHTML = "<h1>Your Total Marks :

</h1>"+total+"<br><br><h1>Your Average Mark :</h1> "+avg+"<br><br><h1>Your
Status :</h1> "+grade;
}
</script>
</head>
</form>
<body>
<h1>Enter Students Marks</h1>
<input type="text" id="s1" placeholder="Enter C Marks"><br>
<input type="text" id="s2" placeholder="Enter Maths Marks"><br>
<input type="text" id="s3" placeholder="Enter FWD Marks"><br>
<input type="text" id="s4" placeholder="Enter COA Marks"><br>
<input type="text" id="s5" placeholder="Enter ISTA Marks"><br>
<input type="text" id="s6" placeholder="Enter MPMC Marks"><br>
<input type="submit" onclick="submit_marks()">
<p id="demo"></p>
</body>
</html>
Your Total Marks :
Your Average Mark :

JQuery
JQuery: CSS method
he JQuery library supports almost all the selectors that are included in the Cascading Style
Sheet (CSS). The css() method in JQuery is used to change the style property of the
selected element. The css() in JQuery can be used in different ways.
css() method can used to check the present value of the property for the selected
element
syntax:
$(selector).css(property)
Return value: It will return the value of the property for the selected element.
css() method also used to add or change the property for the selected element.
Syntax:
$(selector).css(property, value)
Return value: This will change the value of the property for the selected element.
Example 2:
Input: $("p").css("color", "red");
Output: Output of the "p" element becomes red
whatever may be the color previously.
css() method can use function to change the css property for the selected element:
Syntax:
$(selector).css(property, function(index, currentvalue))
Return value: It will return with the changed value for the selected property.
Example 3:
Input: $("p").css("padding", function(i){ return i+20;});

Output: Output will get is the paragraph with padding value
increases to "25px" whatever be the initial value.
We can also apply more than one property at a time in JQuery with the help of css
method.
Note: In this method we write property name in camelCase.
Syntax:
$(selector).css({property:value, property:value, ...})
ii) Get and Set Methods:
jQuery has various methods to get the value of an attribute and set the attribute to
specific value.There methods are powerful enough to the change the website content
and its style. Some of them are:
1. text() – This method is used get or set the text content of selected HTML
element.
2. html() – This method is used get or set the content of selected elements
(including HTML elements).
3. val() – This method is used get or set the value of various form fields in
the webpage.
4. attr() – This method is used get or set the value of various various
attributes in the webpage.
5. css() – This method is used get or set the value of various CSS properties
in the webpage.
Ex.No:13 Using JQuery give the Animation Effect to the document
Aim:
To develop a webpage using JQuery give the Animation Effect to the document.
Procedure:
Program:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
div {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<br/>
<button id="animate">Animate Me</button>
$("#animate").click(function() {
$
("div").animate(
{ width:
"200px", height:
"200px",
borderRadius: "50%",
marginLeft: "210px",
marginTop: "70px",
},
2000,
);
});
</script>
</body>
</html>
After clicking the button

Ex.No:14 Using JQuery give the Event Effect to the document
Aim:
To develop a webpage using JQuery give the Event Effect to the document.
Procedure:
Program:
<!DOCTYPE html>
<html>
<head>
</script>
#e5 {
width: 100px;
height: 100px;
border-radius: 0px;
background-color: aqua;
}
</style>
</head>
<body>
<p id="e1">Welcome.</p>
<p id="e2">Learn and Explore</p>
<p>
<input type="text" id="e3" value="jQuery is powerful!" />
</p>
<p id="e4" align="left">Geeks for Geeks</p>
<p>
<div id="e5"></div>
</p>
<button id="gfg1">Change Text</button>
<button id="gfg2">Change HTML</button>
<button id="gfg3">Change Value</button>
<button id="gfg4">Change Alignment</button>
<button id="gfg5">Change Shape</button>
$("#gfg1").click(function() {
$("#e1").text("Sri Manakula Vinayagar Engineering College");
});
$("#e2").html("<b>Enrich your Knowledge.</b>");
});
$("#e3").val("jQuery at Geeks for Geeks");
});
$("#e4").attr("align", "center");
});
$("#e5").css("border-radius", "50px");
});
</script>
</body>
</html>
Sample Input/Output
After Change HTML button Pressed

After Change Shape Pressed
Ex.No:14 Using JQuery give the CSS Effect to the document
Aim:
Using jQuery find all textareas, and make a border. Then add all paragraphs to the jQuery object to set
their borders red.
Procedure:
Program:
a) adding padding property to paragraph using JQuery.
<!DOCTYPE html>
<head>
//this is the link of JQuery CDN direct from

//the jquery website so that we can use all
//the function of JQuery css()
</script>
</head>
<body>
<button>Click here and the padding will change.</button>
<p style="border: 2px solid green;color:green;padding=5px;">
Welcome to gfg!.</p>
</body>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").css("padding", function(h) {
return h + 30;
});
});
});
</script>
</html>
b.)Using jQuery find all textareas, and make a border. Then add all paragraphs to the jQuery
object to set their borders red.
<!DOCTYPE html>
<html>
<head>
<script src=" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>Using jQuery find all textareas and makes a border. Now adds all paragraphs to the
jQuery object and makes a border.</title>
<style>
button {
display: block;
margin: 20px 0 0 0;
}
textarea
{ width:
200px;
height: 60px;
margin: 10px;
float: left;
font-size: 18px;
}
p{
clear: left;
font-weight: bold;
font-size: 18px;
color: green;
margin: 5px 10px 0 10px;
padding: 2px;
}
</style>
</head>
<body>
<textarea>jQuery</textarea>
<textarea>JavaScript</textarea>
<p>jQuery</p>
<p>JavaScript</p>
<button id="button1">Click to check the effect</button>
</body>
<script>
$(document).ready(function() {
$('#button1').click(function(){
$( "textarea" ).css( "border", "2px solid red" ).add( "p" ).css( "border", "2px solid red" );
});
});
</script>
</html>
After clicking the button:
Ex.No:14 Displaying XML file using CSS
Aim:
To Display XML file using the CSS.
ALGORITHM:
STEP 1: Start the program.

STEP 2: Create a XML file with the required attributes and variables.
STEP 3: Use the style sheet by declaring it in the “text/css” at the header.
STEP 4: Create <Cd> node and get the details for the XML file.
STEP 5: Create an external Catalog.Css file in which add the graphic components such as
margin: , display: , color: ,font-size.
STEP 6: Embed the External.css file in cd_catalog.xml file using xml-stylesheet element.
STEP 7: Print the output.
STEP 8: Stop the program.
cd_catalog.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
</CATALOG>
cd_catalog.css
CATALOG {
background-color: #ffffff;
width: 100%;
}
CD {
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE {
display: block;
color: #ff0000;
font-size: 20pt;
}
ARTIST {
display: block;
color: #0000ff;
font-size: 20pt;
}
COUNTRY, PRICE, YEAR, COMPANY {
display: block;
color: #00ff00;
margin-left: 20pt;
}
Output:-
Ex.No:16 Displaying XML file using XSLT
Aim:
To Display the XML file using the XSLT.
ALGORITHM:

STEP 2: Create a XML file “Sports.xml” with the required attributes name, paragraph and id to get all details about
the sport.
STEP 3: Create a “sports.xsl” file in which use the style sheet to provide the necessary design to the xml file.
STEP 4: Embed the sports.xsl file in sport.xml file using xml-stylesheet element.
STEP 5: By creating the another “Sports1.xsl” file with the necessary information of the sport will be displayed.
STEP 6: use the xsl:value-of select=” ” attribute to fetch the id, name and paragraph values.
sports.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="sports.xsl"?>
<sports>
<game id="783">
<name>Cricket</name>
<paragraph>
More popular among commonwealth nation.
</paragraph>
</game>
<game id="239">
<name>Baseball</name>
<paragraph>
More popular game in America.
</paragraph>
</game>
<game id="418">
<name>Soccer(Futbol)</name>
<paragraph>
More popular sport in the world.
</paragraph>
</game>
</sports>
sports.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head><title>Sports</title></head>
<body>
<h2>Sports Database</h2>
<table border ="1">
<tr>
<th>ID</th>
<th>Sport</th>
<th>Information</th>
</tr>
<xsl:for-each select="sports/game">
<tr bgcolor="pink">
<td><xsl:value-of select="@id"/></td>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="paragraph"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
sports1.xsl
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Sports</title>
</head>
<body>
<h2>Sports Database</h2>
<table border ="1">
<tr>
<th>ID</th>
<th>Sport</th>
<th>Information</th>
</tr>
<xsl:for-each select="sports/game[name='Cricket']">
<tr bgcolor="pink">
<td><xsl:value-of select="@id"/></td>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="paragraph"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Ex.No:17 XML Document is Well-Formed or not using DOM Parser in Java.
Aim:
To write the java program to perform the DOM Parser with XML.
Algorithm:
STEP 1: Start the process.

STEP 2: Open the NetBeans IDE 8.0.2.
STEP 3: Create the new application by click File->New project->java
STEP 4: Import the necessary java package and DOM related package.
STEP 5: Create an object for Document Builder factory ,Document builder and Input source.
STEP 6: Create an XML file or use the already existing xml file to check the xml is well formed or not.
STEP 7: If the object get an expected xml file, data will be displayed in well formed.
STEP 8: If XML file has any error then the data in the Xml file will said to be not well formed.
STEP 9: Stop the process.
SOURCE CODE:
ParsingDomDemo.java
import java.io.*;
import javax.xml.parsers.*;
import org.w3c.dom.*;
import org.xml.sax.*;
import java.util.*;
public class ParsingDomDemo

{
public static void main(String[] arg)
{
try
{
System.out.println("Enter the name of XML document");
Scanner s=new Scanner(System.in);
String file_name=s.nextLine();
File fp=new File(file_name);
if(fp.exists())
{
try
{
DocumentBuilderFactory Factory_obj=DocumentBuilderFactory.newInstance();
DocumentBuilder builder=Factory_obj.newDocumentBuilder();
InputSource ip_src=new InputSource(file_name);
Document doc = builder.parse(ip_src);
System.out.println(file_name+"is well-formed!!!");
}
catch(Exception e)
{
System.out.println(file_name+"isn't well-formed!");
System.exit(1);
}
}
else
{
System.out.print("File not found");
}
}
catch(IOException ex)
{
ex.printStackTrace();
}
}
}
Student.xml:-
<student>
<Roll_No>10</Roll_No>
<Personal_Info>
<Name>Parth</Name>
<Address>Pune</Address>
<Phone>123456</Phone>
</Personal_Info>
<Class>Second</Class>
<Subject>Mathematics</Subject>
<Marks>100</Marks>
<Personal_Info>
<Name>Anuradha</Name>
<Address>Banglore</Address>
</Personal_Info>
<Class>Fifth</Class>
<Subject>English</Subject>
<Marks>90</Marks>
<Personal_Info>
<Name>Anandh</Name>
<Address>Mumbai</Address>
</Personal_Info>
<Class>Fifth</Class>
<Subject>English</Subject>
<Marks>90</Marks>
</student>
Output:-
Ex.No:18 Reading XML document using DOM Parser in Java
AIM:
To write a program to parse XML document using SAX parser.
ALGORITHM:

STEP 4: Right click the application choose New->xml document to create the xml.
STEP 5: Then double click the .java file in the application.
STEP 6: Import the necessary java package and DOM related package.
STEP 7: Create an object for DOM parser to check the XML file
STEP 8: Then check for the specific values or function and the default handler function.
STEP 9: Create an object for the Document Builder factory, Document builder, Node list in order to perform the
operation.
STEP 10: Get the Xml file name in order to display.
STEP 11: Check the elements and get the values of each and every elements and the print the
result.
STEP 12: Verify the result.
SOURCE CODE:
Dom.java
import java.io.File;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.DocumentBuilder;
import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.w3c.dom.Node;
import org.w3c.dom.Element;
public class Dom

{
public static void main(String[] args)
{
try {
File inputFile = new File("XMLdom.xml");
DocumentBuilderFactory dbFactory = DocumentBuilderFactory.newInstance();
DocumentBuilder dBuilder = dbFactory.newDocumentBuilder();
Document doc = dBuilder.parse(inputFile);
doc.getDocumentElement().normalize();
System.out.println("Root element :" + doc.getDocumentElement().getNodeName());
NodeList nList = doc.getElementsByTagName("student");
System.out.println("----------------------------");
for (int temp = 0; temp < nList.getLength(); temp++)
{
Node nNode = nList.item(temp);
System.out.println("\nCurrent Element :" + nNode.getNodeName());
if (nNode.getNodeType() == Node.ELEMENT_NODE)
{
Element eElement = (Element) nNode;
System.out.println("Student roll no : " + eElement.getAttribute("rollno"));
System.out.println("First Name : " + eElement.getElementsByTagName("firstname").item(0).getTextContent());
System.out.println("Last Name : " + eElement.getElementsByTagName("lastname").item(0).getTextContent());
System.out.println("Nick Name : " + eElement.getElementsByTagName("nickname").item(0).getTextContent());
System.out.println("Marks : " + eElement.getElementsByTagName("marks").item(0).getTextContent());
}
}
}catch (Exception e)
{
e.printStackTrace();
}
}
}
XMLdom.xml
<class>
<student rollno="393">
<firstname>dinkar</firstname>
<lastname>kad</lastname>
<nickname>dinkar</nickname>
<marks>85</marks>
</student>
<firstname>Vaneet</firstname>
<lastname>Gupta</lastname>
<nickname>vinni</nickname>
<marks>95</marks>
</student>
<firstname>jasvir</firstname>
<lastname>singn</lastname>
<nickname>jazz</nickname>
<marks>90</marks>
</student>
</class>
Output:-
Ex.No:19 XML Document is Well-Formed or not using SAX Parser in Java
Aim:
To check whether the given XML file is well formed or not using the SAX parser in java..
ALGORITHM:

STEP 4: Import the necessary java package and SAX related Package.
STEP 5: Create an object for the class Sax Parse check.
STEP 6: Create an XML reader object by means which get the input file for the process.
STEP 7: Create an Xml file or use the already existing xml file to check the xml is well formed or not.
STEP 8: Check whether the given XML file is well formed or not.
STEP 9: If Xml file has any error then the data in the Xml file will said to be not well formed.
SOURCE CODE:
SAXParserCheck.java
import org.xml.sax.helpers.*;
import java.io.*;
import java.util.*;
public class SAXParserCheck

{
public static void main(String[] args) throws IOException
{
System.out.print("Enter XML file name:");
String xmlFile = s.nextLine();
SAXParserCheck par = new SAXParserCheck(xmlFile);
}
public SAXParserCheck(String str)
{
try
{
File file = new File(str);
if (file.exists())
{
XMLReader reader = XMLReaderFactory.createXMLReader();
reader.parse(str);
System.out.println(str + " is well-formed!");
}
else
{
System.out.println("File not found: " + str);
}
}
catch (SAXException sax)
{
System.out.println(str + " isn't well-formed");
}
catch (IOException io)
{
System.out.println(io.getMessage());
}
}
}
Employee-Detail.xml
<?xml version = "1.0" ?>
<Employee-Detail>
<Employee>
<Emp_Id> 11032 </Emp_Id>
<Emp_Name> Hari </Emp_Name>
<Emp_E-mail> harideivasigamani@gmail.com </Emp_E-mail>
</Employee>
<Employee>
<Emp_Name> Ashok kumar </Emp_Name>
<Emp_E-mail> ashokkumar782@gmail.com </Emp_E-mail>
</Employee>
<Employee>
<Emp_Name> Elavarasan </Emp_Name>
<Emp_E-mail> ela@pec.in </Emp_E-mail>
</Employee>
</Employee-Detail>
Output:-
Ex.No:20 Reading XML document using SAX Parser in Java
AIM:
To write a program to parse XML document using SAX parser.
ALGORITHM:

STEP 4: Right click the application choose New->xml document to create the xml.
STEP 5: Then double click the .java file in the application.
STEP 6: Write the java code and save it.
STEP 7: Create an object for the class SAXParserFactory, SAXParser and for the default handler function.
STEP 8:Use the Element_name.equals() function to perform the condition operation.
STEP 8: Save the whole project and run it.
STEP 9: Verify the result.
SOURCE CODE:
EmployeeDetails.java
import javax.xml.parsers.*;
import org.xml.sax.helpers.*;
import java.io.*;
import java.util.*;
public class EmployeeDetails
{
public static void main(String[] args) throws IOException
{
System.out.print("Enter XML file name:");
String xmlFile = s.nextLine();
EmployeeDetails detail = new EmployeeDetails(xmlFile);
}
public EmployeeDetails(String str)
{
try
{
File file = new File(str);
if (file.exists())
{
SAXParserFactory parserFact = SAXParserFactory.newInstance();
SAXParser parser = parserFact.newSAXParser();
System.out.println("XML Data: ");
DefaultHandler dHandler = new DefaultHandler()
{
boolean id;
boolean name;
boolean mail;
public void startElement(String uri, String localName, String element_name,

Attributes attributes)throws SAXException
{
if (element_name.equals("Emp_Id"))
{
id = true;
}
if (element_name.equals("Emp_Name"))
{
name = true;
}
if (element_name.equals("Emp_E-mail"))
{
mail = true;
}
}
public void characters(char[] ch, int start, int len) throws SAXException
{
String str = new String (ch, start, len);
if (id)
{
System.out.println("Emp_Id: "+str);
id = false;
}
if (name)
{
System.out.println("Name: "+str);
name = false;
}
if (mail)
{
System.out.println("E-mail: "+str);
mail = false;
}
}
};
parser.parse(str, dHandler);
}
else
{
System.out.println("File not found!");
}
}
catch (Exception e)
{
System.out.println("XML File hasn't any elements");
e.printStackTrace();
}
}
}
Employee-Detail.xml
<?xml version = "1.0" ?>
<Employee-Detail>
<Employee>
<Emp_Name> Hari </Emp_Name>
<Emp_E-mail> harideivasigamani@gmail.com </Emp_E-mail>
</Employee>
<Employee>
<Emp_Name> Ashok kumar </Emp_Name>
<Emp_E-mail> ashokkumar782@gmail.com </Emp_E-mail>
</Employee>
<Employee>
<Emp_Name> Elavarasan </Emp_Name>
<Emp_E-mail> ela@pec.in </Emp_E-mail>
</Employee>
</Employee-Detail>
Output:-

WAD LAB Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WAD LAB Manual

Uploaded by

Copyright:

Available Formats

DEPARTMENT OF MASTER OF COMPUTER APPLICATIONS

P20MCP203 - WEB APPLICATION

SNO Experiment PageNo

1 Construct webpage with simple html tags.

2 Develop web page to create your Biodata using html tags

Cascading Style Sheet

4 Apply CSS property for the webpage creation

5 Build a Webpage to provide look and feel using CSS property

11 Implement DOM model using java script

12 Develop a webpage to publish result of a class using Java script

The following elements can go inside the <head> element:

 <title> (this element is required in an HTML document)

Elements Description Syntax

The <link> tag is used to

meta <meta charset="UTF-8">

The metadata can be used

The <script> element either

noscript The <noscript> tag defines <script>

Formatting elements were designed to display special types of text.

i. <b> - Bold text

Syntax: <b>This text is bold</b>

ii. <strong> - Important text

Syntax: <strong>This text is strong</strong>

iii. <i> - Italic text

Syntax: <i>This text is italic</i>

iv. <em> - Emphasized text

Syntax: <em>This text is emphasized</em>

v. <mark> - Marked text

The HTML <mark> element defines marked/highlighted text:

Syntax: <h2>HTML <mark>Marked</mark> Formatting</h2>

vi. <small> - Small text

The HTML <small> element defines smaller text:

Syntax:<h2>HTML <small>Small</small> Formatting</h2>

vii. <del> - Deleted text

The HTML <del> element defines deleted/removed text.

Syntax: <p>My favorite color is <del>blue</del> red.</p>

The HTML <ins> element defines inserted/added text.

Syntax: <p>My favorite <ins>color</ins> is red.</p>

ix. <sub> - Subscript text

The HTML <sub> element defines subscripted text.

Syntax: <p>This is <sub>subscripted</sub> text.</p>

x. <sup> - Superscript text

The HTML <sup> element defines superscripted text.

Syntax: <p>This is <sup>superscripted</sup> text.</p>

Headings are defined with the <h1> to <h6> tags.

Attribute Value Description

align top Specifies the alignment of an image according to

alt text Specifies an alternate text for an image

border pixels Specifies the width of the border around an image

height pixels Specifies the height of an image

sizes Specifies image sizes for different page layouts

src URL Specifies the URL of an image

srcset URL Specifies the URL of the image to use in different

usemap #mapname Specifies an image as a client-side image-map

width pixels Specifies the width of an image

Attribute Value Description

controls controls Specifies that audio controls should be displayed (such as a

muted muted Specifies that the audio output should be muted

src URL Specifies the URL of the audio file

Attribute Value Description

controls controls Specifies that video controls should be displayed (such as a

height pixels Sets the height of the video player

poster URL Specifies an image to be shown while the video is downloading, or