Академический Документы
Профессиональный Документы
Культура Документы
Web Technology
Lab Manual
Academic Year: Dec 2016 – May 2017
List of Exercises
Exercises Cycle – I
Exercises Cycle – II
AIM
To study the html tags.
HTML EDITORS:
You can easily edit HTML files using a WYSIWYG (What You See Is What You Get) editor like
FrontPage or Dreamweaver
You want to be a skillful Web developer, we strongly recommend that you use a plain text editor to
learn your primer HTML.
HTML documents are text files made up of HTML elements.
HTML elements are defined using HTML tags.
EXAMPLE:
<!DOCTYPE HTML>
<html>
<head>
<title> THIS IS THE TITLE TAG </title>
<head>
<body>
This is the body of the document.
</body>
</html>
OUTPUT:
TAGS
I. < ! DOCTYPE HTML>
NAME : Document Type
SYNTAX : <! DOCTYPE HTML>
DESCRIPTION :
The < ! doctype> tag provides an instruction to the browser about the version of HTML
It should be the first tag in an HTML document. It does not have any end tags
II. <HTML>
NAME : html tag
SYNTAX :
<html>
…….
…….
</html>
DESCRIPTION :
The <html> tag specifies to the browser that a document is an html document.
The opening HTML tag, <HTML>, and the closing HTML tag, </HTML>, mark the
beginning and end of a web page.
It is the container tag which encloses the entire content of the web page.
III. <HEAD>
NAME : head tag
SYNTAX :
<head>
……
……
</head>
DESCRIPTION :
The <head> tag is contained within the <html> and </html> tags.
It is used to describe the header of the HTML document.
The header is the first section of an HTML document where the global settings for the
document, such as the web page title, file format and the last modified date, can be
defined.
IV. <BODY> TAG
NAME : body tag
SYNTAX :
<body>
……
……
</body>
DESCRIPTION:
The <body> tag sets the boundary for the content in the HTML document.
When the web page is displayed in a browser, users can see the content enclosed
within the opening <BODY> and closing </BODY> tags.
The HTML content that can be placed within the <body> tag includes text and
graphics to be displayed on the web page.
I. <TITLE>
NAME : title tag
SYNTAX : <title> title of the page </title>
DESCRIPTION :
The <title> tag defines the title of the document that appears in the title bar of the
browser window. In addition, this title:
Displays a title for the page to be used in the search-engine results.
Provides a title for the page that will be added to favorites
An HTML document can have only one title. If a title is not provided, most web
browsers display the name of the html document has the default title of the web page.
EXAMPLE:
<head>
<title> title of the page </title>
</head>
II. <BASE>
NAME : base tag
SYNTAX : <base href=”location”>
DESCRIPTION :
The <base> tag specifies a base URL or address for all the related links on the page.
EXAMPLE:
<html>
<head>
<title> The BASE TAG </title>
<base href=”d:/Images/”>
</head>
<body>
<img src=”image.jpg”>
</body>
</html>
III. <STYLE>
NAME : title tag
SYNTAX : <title> title of the page </title>
DESCRIPTION :
The <style> tag defines the style information associated with the HTML document.
Using this element, you can specify the way the HTML elements should render in a
browser
The style tag provides various attributes like type and media
EXAMPLE:
<html>
<head>
<title> MY STYLES </title>
<style>
p{ font-style: italic;}
</style>
</head>
7 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<body>
<p> My paragraph tag in the html document within the body tag</p>
</body>
</html>
Heading tags:
<H1>……</H1> - Level 1 Header
Heading in HTML are to be used like heading in Books and Newspapers. Headings divide sections of
text and improve page readability.
The above six levels of headings defined by HTML.
Lists tag:
The most commonly list are of 2 types
Ordered Lists (OL)
Unordered Lists (UL)
The ordered list tags <OL>……</OL> create ordered list item.
The unordered list tags <UL>……</UL> create unordered list item.
For each list item in the list, within either of these set of tag, user can use the listing tag (LI) – List
Item, this tag is used singly and does not have an end tag.
<HR> is used to draw a horizontal line on the web page requires only a single tag.
Font tag:
<Font color = “Red” Face = “Times” size = 5>
All data displayed here is red in color and has the times font and the size is 5
</Font>
Anchor tag:
<a href = “location of the page”> </a>
It is used to hyperlink the web page.
The most important capability of the HTML is its ability to create hyperlinks to documents and make
the World Wide Web as a collection of linked documents.
The links are created using anchor <a>…..</a> element.
This element requires an attribute to mark the location of the object to get linked. The address of the
object is specified using href attribute.
The href attribute of the tag tells the browser to get another html document of the web.
Internal linking:
To create links to external documents. HTML has facilities to include internal links also by assigning a
location name to any individual point in an HTML document.
This location name can then be added to the page URL
For internal linking also, the anchor tag is used.
Syntax:
To create name the following tag is used
<a name=”location”> </a>
To refer to the location use
<a href = “#name”> text </a>
Embedding Images:
Images can be embedded into the web page. To add images as a background for the whole web page,
the following format is used,
<body background = “bg.gif”>
To include the image as a normal figure in the web page the <img> tag is used.
The image tag has the following attributes
src
height
width
border
align
alt
The src attribute is used to specify the location of the image, height and width, specify the size.
alt attribute which is provided for browsers that have images turned off or that cannot have images.
The value of alt attribute will appear on screen in the place of the images.
Example:
< img src = “url “ height = “144” border = “1” width = “200” alt = “An image is here”>
</img>
The other related tag is <map> which is used to create hot spots. The syntax is
<map name = “ “>
……
</map>
Example:
The following code creates a hot spot of rectangular shape and has the hyperlink in the coordinates
mentioned.
<map>
<area shape = “rect” cords =”23, 45, 56, 89” href = “source.html”>
</map>
Frames:
Frame layout is one in which the browser windows is broken into multiple region called frames.
Each frame contains different HTML documents.
The <frameset> tag is a container for frames and replaces the body tag. </frameset>
<frame> tag is used to place the contents into the frame.
Example:
<frameset rows = “value” cols = “value”>
The attribute rows – The window is to be divided in horizontal stripes.
The attribute cols – The window is to be divided in vertical stripes.
Example:
Divides the window into 2 regions in row wise
<frameset rows = “30%, 70%”>
The <frame> tag is used to place different HTML documents in each frame.
<frame src = “ “ frameborder = “0|1” name = “name” scrolling = “yes|no|auto”>
Other tags:
& – is used to insert an ampersand
The tag <del> is used to strike through text with a horizontal line.
The tag <sub> and <aup> are used to turn the text into subscript and superscript.
To draw a horizontal line in the web page <hr> tag is used. This tag has 3 attributes
width – to specify the width of the line
size – to specify the height of the line
noshade – eliminates the default shading effect and instead display the horizontal rule as a solid
color bar.
Tables:
This form tag is the HTMLs best way of arranging information in space and controlling layout
Table element to format a table
The various tag in table as
<table> …… </table>
The attributes is align = left, center, right
The other attributes is border = make a border around the table & its cells
1. The <tr> element (table row) inserts a row in the table.
2. The <td> element (table detail) inserts a cell within a row
3. The <th> element (table header) to add headings to the rows and columns of the table.
Example:
<table>
<tr>
<td> apples
<td> celery
</tr>
<tr>
<td> oranges
<td> carrots
</tr>
</table>
Output:
Apples Celery
oranges Carrots
<caption> tag is used to be added to row and column headings. By default it will be aligned in center
of a table
<border> is used for draw a border around the tables and the individual cells. Specify the border width
in pixels
Color can be added to tables by using the bgcolor = and bordercolor = attributes. These attributes are
available in the Table, <tr> and <td> elements; so user can apply colors to all the cell in a table,
selected rows and individual cells.
Example:
<table border = “1” cellspacing = “10%” cellpadding = “10%”>
Spanning rows:
The two types of attributes are
colspan – to span column
rowspan – to span rows
Example:
<table border = “2”>
<tr>
<th colspan = 3> Tic Tac Games </th>
</tr>
<tr>
<td> X </td>
<td> O </td>
<td> X </td>
</tr>
</table>
Example:
<table border = “2”>
<tr>
<th rowspan = 3> Tic Tac Games </th>
</tr>
<tr>
<td> X </td>
<td> O </td>
<td> X </td>
</tr>
</table>
The bgcolor = attribute sets the color used to fill the background of the cell before text and images are
drawn.
The border color = attribute sets the color of the borders drawn around the table, row or cell.
HTML Forms:
Form provides a way to prompt the user for information and to carry out the actions based on the
input.
A form consists of one or more input controls that the user uses to enter text and select choices.
Once the user provides the input, the form collects the data and sent it to a destination specified in the
form element.
To carry out the requested action, the server must have a script or other service that corresponds to the
destination.
A form can contain inputs like text fields, check boxes, passwords, radio-buttons, submit buttons and
reset buttons.
The <form> tag is used to create an HTML form.
<form>
……..
</form>
HTML forms are used to pass the data to the server.
Input Types:
1. Text Fields
2. Check Boxes
3. Password
4. Radio Button
5. Submit Button
6. Reset Button
7. Image Based Buttons
8. Scripted Buttons
The syntax is
<input type = “text | passwd” name =”name” value =”default_value” size=”field size”>
1. Text Fields:
<input type=”text”> defines a one line input field that a user can text into.
Example: <form>
First name: <input type=”text” name=”first name”>
Last name: <input type=”text” name=”last name”>
</form>
Output:
First name:
Last name:
2. Password Field:
<input type=”password”> defines a password field.
Example: <form>
Password: <input type=”password” name=”pwd”>
</form>
Output:
Password:
3. Radio Buttons:
<input type=”radio”> defines a radio button.
Radio buttons let a user to select only one of a limited number of choices.
Example:
<form>
Gender<input type=”radio” name=”gender” value=”male” checked> Male
Gender<input type=”radio” name=”gender” value=”female”> Female
</form>
Output:
Male
Female
4. Checkboxes:
<input type=”checkbox”> defines a checkbox.
Checkboxes let a user to select one or more options of a limited number of choices.
Example:
<form>
<input type=”checkbox” name=”vehicle” value=”bike”> Bike <br>
<input type=”checkbox” name=”vehicle” value=”car”> Car
</form>
Output:
Bike
Car
5. Submit Button:
6. Text Area:
This tag sets up a multiple line input text window.
Syntax:
<textarea name=”name” rows=”no of rows” cols=”no of cols” accesskey=”shortcut key”></textarea>
<select name=”select1”>
<option> Item1</option>
<option> Item2</option>
</select>
</form>
Output:
8. Image Button:
<input type=”image” src=” “ name=”submit” value=”submit”>
9. Filename:
<input type=”file” name=”filename” value=” “ size=25> Browse
Example:
Browse
<body>
<center> <h1> Form Submission </h1> </center>
<form action=" " method="get">
Login Name: <input type="text" name="login" size=20> <br>
Password: <input type="password" name="pass" size=20> <br>
Birthdate: <input type="text" name="DOB" size=20> <br>
Gender: <input type="radio" name="gender" value="F" checked> Female
<input type="radio" name="gender" value="M"> Male <br> <br>
Department
<select name="dept">
<option> CSE</option>
<option> IT</option>
</select><br>
Give the comments here <br>
<textarea name="comments" rows=10 cols=20> </textarea>
<input type="button" value="check" OnClick="validate()"> <br>
<input type="submit" value="login" OnClick="submit()">
<input type="reset" value="clear" OnClick="clear">
</form>
</body>
</html>
OUTPUT
RESULT
Thus the basic HTML tags have been studied.
PROCEDURE
Step 1: Create a new html file with basic structural tags
Step 2: Under the <head> tag, define a <title> tag with the element contents as Time Table and close
the <title> and <head> tag
Step 3: Under the <body> tag, define the following:
I. Create a <h1> tag with the properties, face of arial black, align as center within the tag
<h1 face="arial black" align="center">
properties
II. Under the <h1> tag, declare <font> tag with the property color as Red within the tag
III. Give the element content for the <h1> tag is Time Table and close the <h1> tag
IV. Create <h2> tag with the properties, face as purple and align as center and style with color
as #3300FF within the tag
V. Give the element content for <h2> tag as THRID YEAR "B" TIME TABLE
And close the tag
VI. Create a <table> tag with the properties, border of 1, cellpadding as 15% and cellspacing as
0, align as center, style of color #3333FF and BGCOLOR as #66FF99
i. Within the table tag, create a row using <tr> tag with property specifying
BGCOLOR as GREY within the tag
ii. Within the <tr> tag, create a table head with <th> tag with the element content as
Time/Date
iii. Create 11 <th> tag to specify the times allotted for the subject
iv. Close the <tr> tag
v. Create another row <tr> tag, with one table head <th> tag with property BGCOLOR
as GREY and the element content as the Monday and create 11 column tags <td>
with the property, align as center and specify the subject for the time allotted for the
day as the element content
vi. For the fifth column specify the property as rowspan with the value as 6 and 7 th
column specify the property as columnspan with value 3
vii. Repeat the above steps v to schedule the timetable for the rest of the working days
and specify the columnspan wherever it is necessary like the lab sessions
viii. Close the <table> tag
SOURCE CODE
timetable.html
<html>
<head>
<title>time table</title>
</head>
<body>
<h1 face="arial black" align="center">
<font color="red"> time table </font>
</h1>
<h2 face="purple" align="center" style="color:#3300ff">thrid year "b" time table </h2>
-04.35p.m.</th>
</tr>
<th bgcolor="grey"><b>monday</b></th>
<td align=center> ooad</td>
<td align="center">wt</td>
<td rowspan=2><b>break</b></center></td>
<td align="center">cn</td>
<td align="center">ai</td>
<td rowspan=6>
<center><b>l<br><br>u<br><br>n<br><br>c<br><br>h</center></b></td>
<td align="center">ict</td>
<td colspan=4><center><b> cn/wt/mini projectlab</center></b></td>
</tr>
<tr>
<th bgcolor="grey"><b>tuesday</b></th>
<td align="center">cn</td>
<td align="center">wt</td>
<td align="center">bi</td>
<td align="center">ooad</td>
<td align="center">ai</td>
<td align="center">wt</td>
<td align="center"><b>break</b></center></td>
<td>cn</td>
<td>ooad</td>
</tr>
<tr>
<th bgcolor="grey">wednesday</th>
<td align="center">ooad / test</td>
<td colspan=4><center><b>placement</b></center></td>
<td align="center">cn</td>
<td colspan=4><center><b>cn/wt/mini projectlab</center></b></td>
</tr>
<tr>
<th bgcolor="grey">thursday</th>
<td align="center">cn</td>
<td colspan=4><center><b>cn/wt/mini projectlab</center><b></td>
<td colspan=2><center>gp ii </center></td>
<td rowspan=3><b>break</b></td>
<td align="center">bi</td>
<td align="center">wt</td>
</tr>
<tr>
<th bgcolor="grey">friday</th>
<td align="center">cn / test</td>
<td align="center">wt</td>
<td rowspan=2><b><center>break</center></b></td>
<td align="center">ooad</td>
<td align="center">bi</td>
<td align="center">ict</td>
<td align="center">cn</td>
<td align="center">ooad</td>
<td align="center">ai</td>
</tr>
<tr>
<th bgcolor="grey">saturday</th>
<td align="center">wt</td>
<td align="center">cn</td>
<td align="center">ict</td>
<td align="center">wt</td>
<td align="center">ooad</td>
<td align="center">ai</td>
<td align="center">ooad</td>
<td align="center">cn</td>
</tr>
</table>
</b>
</font>
</body>
</html>
OUTPUT
RESULT
Thus the static web pages for semester time table have been created and the output is verified.
AIM
To create a static web page for resume preparation using HTML tags.
PROCEDURE:
Step 1: Create a new html file with basic structural tags
Step 2: Within the <head> tag, define a <title> tag with the element contents as Resume Preparation
and close both the <title> and <head> tag
Step 3: Within the <body> tag, define the following,
I. For the <body> tag specify the property as bgcolor as grey within the <body> tag
II. Use the <h1> tag with the properties as, face as cambria, size as 8, color as white and
align center and give the element content as Resume within the body tag and close the
<h1> tag
III. Insert an image using <img> tag and give the source of the image file using src element
and also the source for the alternative picture if no source is found using alt element
and specify the properties, align as right, height as 30% and width as 20% within the
tag
<img align="right" src="images.jpg" alt="pic" height="30%" width="20%">
IV. Use <br> tag for giving new line space
V. Use the <h2> tag with the properties, face as cambria, size as 6, color as white within
the tag and use to give necessary white spaces and give the element content as
SMVEC and close the tag
VI. Use the <div> tag with the property align as center, face as cambria and size as 4
within the tag and give the address, mail id and phone number as the element content
VII. Use the <hr> tag with the properties, size as 3 and color as red within the tag and use
the <dl> tag with properties, face as Cambria, size as 4 and color white and use the
<DT> tag and give the element content as Objective and close the <DT> tag
VIII. Use the <dd> tag with the properties, face cambria, size 4, and give the content for the
objective as the element content and close <dd> and <dl>
IX. Use <hr> tag with properties, size as 3 and color as red within in the tag, and use
<font> tag with the properties face as cambria size as 4 and color as white and specify
the element content as academic qualification and close the <font> tag
X. Use the <br> to give necessary breaks
XI. Use <table> tag to create a table with the properties, border as 3, cellpadding as 5,
cellspacing as 5, width as 80% align as center
XII. Use the <font> tag with the properties, face as cambria and size as 4 within the tag and
use <tr> to create a row and align it to center and use 6 <th> tags to specify the table
heads for the table and close the <tr> tag,
XIII. Use the <tr> tags and <td> tags to specify your educational qualifications
XIV. Close the <font> and the <table> tag
XV. Add all the skills like technical, area of interest, courses studied and achievement
XVI. Add your biodata with proper alignments by using and finally with declaration
XVII. Finally use div tag with the properties as size 4 and face cambria and give the element
content as signature and close the <div> tag and <h3> tag with align right property and
(smvec) as the element content and close the tag
SOURCE CODE
Resume.html:
<html>
<head>
<title> RESUME PREPARATION</title>
</head>
<body bgcolor="grey">
<h1>
<DL>
<b>
<font face="Cambria" size="4" color="white">
<DT> OBJECTIVE :</DT>
</font>
</b>
<DD>
<font face="Cambria" size="4">
To get placed in a well reputed organisation,where i can upgrade my knowledge and
which provides opportunities to develop your organisation.
</font>
</DD>
<br>
</DL>
<hr size="3" color="red">
<b>
<font face="Cambria" size="4" color="white">
ACADEMIC QUALIFICATION:
</font>
</b>
<tr align="center">
<th> B.Tech (CSE)</th>
<td> SMVEC </td>
<td> Pondicherry University</td>
<td> APRIL / 2016 </td>
<td> 9.55 </td>
<td> First Class with Distinction </td>
</tr>
<tr align="center">
<th> Diploma (CSE)</th>
<tr align="center">
<th> H.Sc </th>
<td> John Dewey Matric Hr. Sec School</td>
<td> Tamilnadu State Board </td>
<td> March / 2011</td>
<td> 85% </td>
<td> First Class with Distinction </td>
</tr>
<tr align="center">
<th> SSLC </th>
<td> S.D.A Matric Hr. Sec School</td>
<td> Tamilnadu State Board </td>
<td> March / 2009 </td>
<td> 80% </td>
<td> First Class </td>
</tr>
</font>
</table>
<br>
<b>
<font face="Cambria" size="4" color="white">
TECHNICAL SKILLS:
</font>
</b>
<br>
<b>
<font face="Cambria" size="4" color="white">
COURSES STUDIED:
</font>
</b>
<font face="Cambria" size="4">
<UL type="square">
<b>
<font face="Cambria" size="4" color="white">
ACHIEVEMENTS :
</font>
</b>
<font face="Cambria" size="4">
<UL type="square">
<LI> Got the Silver Medal in U.G. Pondicherry University.
<LI> Got the Second Rank in Higher Secondary State Board Examination.
<LI> Got the First Rank in SSLC Board Examination.
</UL>
</font>
<br>
<b>
<font face="Cambria" size="4" color="white">
EXTRA-CURICULLAR ACTIVITIES:
</font>
</b>
<font face="Cambria" size="4">
<UL type="square">
<LI> Won the Inter-College Cricket Championship in Pondicherry University.
<LI> Won the Second Prize in Athletic events.
<LI> Participated various Competition like Foot-ball, Volley-ball.
</UL>
</font>
<br>
<b>
<font face="Cambria" size="4" color="white">
PERSONAL DETAILS:
</font>
</b>
<font size="4" face="cambria">
<UL type="square">
<LI> Father's Name : ABCD <br>
<LI> Mother's Name : ABCD <br>
<LI> Date of Birth :
07-06-1990 <br>
<LI>Gender
: Male <br>
<LI> Marital Status :
Unmarried / Married <br>
<LI> Languages Known : Hindi, English, Tamil <br>
<LI> Religion
: Hindu <br>
</font>
<br>
<center>
<font size="4" face="Cambria" color="white">
<b> <u> DECLARATION </u> </b>
</font>
</center>
<br>
<font size="4" align="center" face="Cambria" >
<center>
I hereby declare that the above furnished details are true to the best of my knowledge.
<br> <br>
</center>
</font>
<div align="right">
<font size="4" face="Cambria" >
<b> Signature, </b>
</font>
</div>
OUTPUT
RESULT
Thus static web page for Resume Preparation using HTML tags have been created and output is
verified.
AIM
To create a static web page for your own institution using HTML tags.
PROCEDURE
HOME PAGE
Step 1: Create an Html file using basic tags.
Step 2: Using the <title> tag give title to the page as SRI MANAKULA VINAYAGAR
ENGINEERING COLLEGE and close the <head> and <title> tag
Step 3: In the <body> session, do the following:
I. Use <div> tag with an id and properties, style = ” position: relative; width: 70%; margin-
top:0px margin-bottom: 0px;” within the <div> tag
II. Use another <div> tag with the properties, style="width:1100px; margin-top: 0px; margin-
left:50px; margin-right:150px;" within the <div> tag
III. Use another <div> tag with the properties, style="width:1100px; height:190px; float: left;
padding-left:10px;"
IV. Use <img> to insert the image having the source of the file and the properties, width=500
and height=150 within the tag
V. Use <nav> tag which has the navigation links and use anchor tag <a> with href to refer two
pages one is home and the other is about us and close the <nav> tag and one <div> tag
VI. Use another <div> tag with the properties, style="width: 1000px; height:830px; float: left;
padding-left:20px; border:1px solid red;"
VII. Use <h1> tag and give heading as OUR COLLEGE CAMPUS
VIII. Insert any four image of the college using <img> tag with the properties, width=190
height=160
IX. Use <article > tag and <p> and give some content about the college and close those tags
X. Then use <details> tag with <summary> tag giving the element content as DEPARTENTS
and close <summary> tag
XI. Use <ul> and <li> tag to list the departments and close the <details> tag
XII. Close the <div> tags
Step 4: Close the rest of the structural tags
Step 5: Execute the web page
ABOUTUS.HTML
SOURCE CODE
Home.html
<html>
<head>
<title>sri manakula vinayagar engineering college</title>
</head>
<body>
<div id="maindivcontainer" style="position: relative; width:70%; margin-top: 0px; margin-
bottom: 0px;">
</nav>
</div>
<div style="width: 1000px; height:830px; float:left; padding-left:20px; border:1px
solid red;">
<h1>our college campus...</h1><bs>
<img src="images\images2.jpg" width=190 height=160></a>
<img src="images\download2.jpg" width=190 height=160></a>
<img src="images\images3.jpg" width=190 height=160></a>
<img src="images\download.jpg" width=190 height=160></a>
<img src="images\download1.jpg" width=190 height=160></a>
<br>
<br>
<br>
<article>
<p> our founder chairman shri. n. kesevan, a philanthropist and visionary, strongly
believes in empowering the society through education. he emphasizes upon the good quality
education at the gross root level, can only transform the dreams of our nation into a real entity.
also he had a deep concern for extending excellent services in the health care sector to the rural
mass and even to the untouched vulnerable section of the society thereby achieving the goal of
inclusive growth.</p>
<p>sri manakula vinayaga educational trust was formed with the avowed objective of
imparting quality technical education, especially to the weaker sections of society. </p>
</article>
<details>
<summary><b>departments</b></summary>
<ul>
<li>information technology
<li>computer science and engineering
<li> mechanical engineering
<li> electronics and communication engineering
<li> electrical and electronics engineering
<li> civil engineering
<li> ice
</details>
</div>
</div>
</body>
</html>
about.html
<html><head><title>about us page</title>
<link type="text/css" rel="stylesheet" href="externalstylesheet/homestylesheet.css" />
</head>
<body>
<div id="maindivcontainer" style="position: relative; width: 100%; margin-top: 0px; margin-bottom: 0px;">
<div style="width: 1100px; margin-top: 0px; margin-left: auto; margin-right:auto;">
OUTPUT
RESULT
Thus the static webpage for the college website has been designed and executed successfully
PROCEDURE
INLINE CSS:
Step1: Create basic html tags.
Step2: In the <head> tag, define <title> tag as Inline Style Sheet and close both the tag
Step3: Within the <body> tag define the following tags
I. Use <p> tag with the element content as “This text does not have any style applied to it”
and close </p> tag.
II. Use <p> tag with the properties as, style = "font-size: 20pt" and the element content as
“This text has the <i>font-size</i> style applied to it, making it 20pt and close the </p> tag
III. Again use another <p> tag with the properties as, style = "font-size: 20pt; and color:
#0000ff" and element content as This text has the <i>font-size</i> and <i>color</i> styles
applied to it, making it 20pt. and blue and close the </p> tag along with the </body> tag
Step 4: Close the <html> tag.
INTERNAL CSS:
Step1: Create basic html tags.
Step 2: Under the <head> tag, do the following
I. Use the <title> tag and give the element content as Internal Style Sheet and close the
<title> tag
II. Use the <style> with the properties type as “text/css” and define the style for the
elements i, h1, p and for class special (for referring class use ‘.’ Operator infront of the
name of the class)
III. For i define the properties as background-color: #8000ff and color: white and for h1
define the properties as font-family: arial, sans-serif and for p define the properties as
font-size: 14pt and for class name special define the properties as color: blue and close
the <style> tag and <head> tag
Step 4: In the body tag define the following:
I. In <h1> tag give <class = "special"> decirbing the special color to be give to the text “Indra
Krishnamurthy Nooyi.” and close tag </h1>
II. Image is inserted using <img src="IndraNooyi.jpg" / with <height="200" width="200">
this is enclosed with the tags <center></center>.
III. Then <p></p> are given with descriptive text while another <p class=”special”></p>is also
give some description.
Step 5: Bothe the </body> and </html> tags are closed.
External CSS:
Step 1: Create basic html tags.
Step 2: In<head> tag define <title>Linking External Style Sheets</title>
also give the link to the external stylesheet by following
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
finally close the </head>
Step 3: In <body> tag define the fol:lowing
I. In <h1> tag “Shopping list for Monday” is given where italics <i> tag is used for
“Monday”</i> and </h1> tag is closed.
II. <ul> unorder list tag is opened specifying certen items which are to be listed in <li> tag.
And both tags are closed,
III. <p> tag is used where a website is give under <a href = "http://www.food.com">Go to the
Grocery store</a>tags.
IV. Another <p> with some description is also closed.
Step 4: Close both </body> and </html> tags.
Step 5: In the external stylesheet whose file name is saved with the extension .css has
Definition for following a, a:hover, li i, ul and the classname classone
Step 6: the element a as the following properties text-decoration: none and a: hover has text-
decoration: underline; color: red; background-color: #ccffcc and li I has color: red; font-weight: bold;
background-color: #ffffff and ul as margin-left: 2cm and class name classone has text-decoration:
underline; margin-left: .5cm
Step 7: Save the file and run the application
SOURCE CODE
INLINE CSS:
<html>
<head>
<title>Inline Style Sheet </title>
</head>
<body>
<p>This text does not have any style applied to it.</p>
<!-- The style attribute allows you to declare -->
<!-- inline styles. Separate multiple styles -->
<!-- with a semicolon. -->
<p style = "font-size: 20pt">This text has the
<i>font-size</i> style applied to it, making it 20pt.
</p>
<p style = "font-size: 20pt; color: #0000ff">
This text has the <i>font-size</i> and
<i>color</i> styles applied to it, making it
20pt. and blue.</p>
</body>
</html>
Internal.html:
<html>
<head>
<title> Internal Style Sheets</title>
<!-- this begins the style sheet section -->
<style type = "text/css">
i
{
background-color: #8000ff;
color: white
}
h1
{
font-family: arial, sans-serif
}
p
{
font-size: 14pt
}
.special
{
color: blue
}
</style>
</head>
<body>
<!-- this class attribute applies the .special style -->
<h1 class = "special">Indra Krishnamurthy Nooyi.</h1>
<center>
<img src="IndraNooyi.jpg" height="200" width="200">
</center>
<p>
Indra Krishnamurthy Nooyi (born 28 October 1955) is an Indian-American business executive
and the current Chairman and Chief Executive Officer of PepsiCo, the second largest food and
beverage business in the world by net revenue. According to Forbes, she is consistently ranked
among World's 100 Most Powerful Women.
</p>
<p class = "special">
Nooyi was born in <i>Madras (presently Chennai)</i>, Tamil Nadu, India. She was educated at
Holy Angels Anglo Indian Higher Secondary School in Madras. She received a Bachelor's
degree in Physics, Chemistry and Mathematics from Madras Christian College in 1974
and a Post Graduate Diploma in Management (MBA) from Indian Institute of Management
Calcutta in 1976. Beginning her career in India, Nooyi held product manager positions at
Johnson & Johnson and textile firm Mettur Beardsell.She was admitted to Yale School of
Management in 1978 and earned a Master’s degree in Public and Private Management. While at
Yale, she completed her summer internship with Booz Allen Hamilton. Graduating in 1980,
Nooyi joined the Boston Consulting Group (BCG), and then held strategy positions at Motorola
and Asea Brown Boveri.
</p>
</body>
</html>
External.html:
<html>
<head>
<title>Linking External Style Sheets</title>
<link rel = "stylesheet" type = "text/css" href = "styles.css" />
</head>
<body>
<h1>Shopping list for <i>Monday</i>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <i>with mushrooms</i></li>
</ul>
<p>
<a href = "http://www.food.com">Go to the Grocery store</a>
</p>
OUTPUT:
Inline style sheet:
RESULT
Thus the static webpage using cascading style sheet have been created and output is verified.
PROCEDURE
Step 1: Create an Html file using basic tags.
Step 2: Under the <head> tag,
I. Give title to the web page using the <title> tag and close the <title> tag
II. Use the <script> tag to specify the type of script to be javascript by following:
<script type="text/javascript">
III. Under the script tag declare a function add and define the function with the following:
a. Declare 5 variables of type var where,
i. n1 -> to get the input from the window for getting number 1
ii. a -> to parse the input to int
iii. n2 -> to get the input from the window for getting number 2
iv. b -> to parse the input to int
v. c -> to store the result of the operation
b. Get the input for the first number and store it in n1 variable by the following
syntax :
n1=window.prompt("Enter the value of A","");
c. Parse the input from string to Interger by following syntax:
a=parseInt(n1);
d. Get the second number as input and store in the variable n2
e. Parse the input from string to integer
f. Add two numbers and store it in the variable c
g. Display the output in the output screen by the following
Alert (“Sum is ”+c);
IV. Declare another 3 functions for subtract, multiplication and division and repeat the above
steps again in each function definition
V. Close the <script> tag and close the <head> tag
Step 3: Under the <body> tag, do the following
I. Use the <center> tag and give the element content as ARITHMETIC OPERATION and
close the <center> tag
II. Use <br> tag to give necessary new line space
III. Use the <form> tag and do the following
a. Again open the <center> tag and create a button using <input> tag of type button
and give value as addition and add the property onclick to redirect the control to the
necessary function in this case add() function by the following
<input type="button" value=" ADDITION " onclick = "add()">
b. Create 3 other buttons by the above steps for different methods of subtract, multiply
and divide
IV. Close the <form> tag
Step 4: Close the rest of the structural tags
Step 5: Save the filename.html
Step 6: Execute the web page
SOURCE CODE
Arithmetic.html:
<html>
<head>
<title> Arithmetic operations </title>
<script type="text/javascript">
function add()
{
var a,b,c,n1,n2;
n1=window.prompt("Enter the value of A","");
a=parseInt(n1);
n2=window.prompt("Enter the value of B","");
b=parseInt(n2);
c=a+b;
alert("Sum is " + c);
}
function sub()
{
var a,b,c,n1,n2;
n1=window.prompt("Enter the value of A","");
a=parseInt(n1);
n2=window.prompt("Enter the value of B","");
b=parseInt(n2);
c=a-b;
alert("Difference is " + c);
}
function mul()
{
var a,b,c,n1,n2;
n1=window.prompt("Enter the value of A","");
a=parseInt(n1);
n2=window.prompt("Enter the value of B","");
b=parseInt(n2);
c=a*b;
alert("Product is " + c);
}
function div()
{
var a,b,c,n1,n2;
n1=window.prompt("Enter the value of A");
a=parseInt(n1);
n2=window.prompt("Enter the value of B","");
b=parseInt(n2);
c=a/b;
alert("Quotient is " + c);
}
</script>
</head>
<body>
<br>
<br>
<b><center> ARITHMETIC OPERATION </center></b>
<form>
<br>
<br>
<center>
<br>
<input type="button" value=" ADDITION " onclick = "add()">
<br>
<br>
<input type="button" value="SUBTRACT" onclick = "sub()">
<br>
<br>
<input type="button" value=" MULTIPLY " onclick = "mul()">
<br>
<br>
<input type="button" value=" DIVISION " onclick = "div()">
<br>
</center>
<br>
</form>
</body>
</html>
OUTPUT
RESULT
Thus the arithmetic operations have been created using java script and output is verified.
AIM
To create an website with built-in function using VB Script
PROCEDURE
SOURCE CODE
<html>
<head>
<title>Built-in Functions in VBScript</title>
<Script type="Text/vbscript">
sub operation(a)
if a=1 then
msgbox("LowerCase of Given String is "&LCase(st.str.value))
elseif a=2 then
msgbox("UpperCase of Given String is "&UCase(st.str.value))
elseif a=3 then
msgbox("Length of Given String is "&Len(st.str.value))
elseif a=4 then
msgbox("Reverse of Given String is "&StrReverse(st.str.value))
elseif a=5 then
msgbox(Now)
elseif a=6 then
msgbox(Date)
elseif a=7 then
msgbox("The Log value of the given Number is"&Log(st.num.value))
elseif a=8 then
msgbox("The Sin value of the given Number is"&Sin(st.num.value))
elseif a=9 then
msgbox("The Cos value of the given Number is"&Cos(st.num.value))
elseif a=10 then
msgbox("The Tan value of the given Number is"&Tan(st.num.value))
End if
End sub
</Script>
</head>
<body bgcolor=" Beige">
<form name="st">
<h1 align="center">Built-in Functions in VBScript</h1>
<h2>String Functions</h2>
<b>Enter a String:</b>
<input type="text" id="str"><br><br>
<input type=button value="Lower" onclick="operation(1)">
<input type=button value="Higher" onclick="operation(2)">
<input type=button value="Length" onclick="operation(3)">
<input type=button value="Reverse" onclick="operation(4)">
<br/><br/>
<h2>Date/Time Functions</h2>
<input type=button value="Date" onClick="operation(5)">
<input type=button value="Now" onClick="operation(6)">
<h2>Math Functions</h2>
<b>Enter a Number:</b>
<input type="text" id="num"><br><br>
<input type=button value="Log" onClick="operation(7)">
<input type=button value="Sin" onClick="operation(8)">
<input type=button value="Cos" onClick="operation(9)">
<input type=button value="Tan" onClick="operation(10)">
</form>
</body>
</html>
OUTPUT
RESULT
Thus the basic built-in function using VB Script has been successfully executed and verified
AIM
To write a java program to design a Smiley using applet.
PROCEDURE:
Step 1: Import all the necessary packages
Step 2: Create a class Smile and extend the class applet
Step 3: Declare the function as paint with the parameters as Graphics g
Step 4: Then include the necessary shapes and add colors and include strings by the
following
g.fillArc(80,160,80,30,175,175);
g.setColor(Color.black);
g.drawString("SMILE",285,120);
Step 5: Give the height, width and colors in the parameters
Step 6: Save the file and execute the file
SOURCE CODE
import java.awt.*;
import java.applet.*;
/*<applet code="Smile.class"width=500 height=300></applet>*/
public class Smile extends Applet
{
public void paint(Graphics g)
{
g.setColor(Color.yellow);
g.fillOval(20,20,200,200);
g.setColor(Color.black);
g.fillOval(80,90,20,20);
g.fillOval(150,90,20,20);
g.setColor(Color.red);
g.fillOval(110,120,20,30);
g.setColor(Color.pink);
g.fillArc(80,160,80,30,175,175);
g.setColor(Color.black);
g.drawString("SMILE",285,120);
}
}
OUTPUT
RESULT
Thus the java program for creating smiley using applet has been executed and verified successfully
AIM
To write a java program to run a thread program.
PROCEDURE
Step 1: create a class that inherits the interface runnable
Step 2: create an object for the thread class as mythread
Step 3: Use the constructor of the class and declare the following within the constructor
I. Initialize the obect by MYTHREAD = NEW THREAD(THIS, "MY RUNNABLE
THREAD");
II. Print the object of the thread by using println statement
III. Start the thread by using the following:
MYTHREAD.START();
Step 4: Declare a function run and using the exception handling print the count using for loop
Step 5: Within the for loop print the count and also use sleep() function
Step 6: In the catch block print the exception occurred
Step 7: Create another class and declare the main function within the class
Step 8: Create an object for the previous class as cnt
Step 9: Use the exception handling, within the try block use while loop with the condition as
cnt.mythread.isalive()
Step 10: Within the loop print any statement and use the sleep() function
Step 11: Within the catch block print the exception that occurred
Step 12: Print that the main thread is finished
Step 13: Save and run the program
SOURCE CODE
class count implements runnable
{
thread mythread ;
count()
{
mythread = new thread(this, "my runnable thread");
system.out.println("my thread created" + mythread);
mythread.start();
}
public void run()
{
try
{
for (int i=0 ;i<10;i++)
{
system.out.println("printing the count " + i);
thread.sleep(1000);
}
}
catch(interruptedexception e)
{
system.out.println("my thread interrupted");
}
system.out.println("mythread run is over" );
}
}
class runnableexample
{
public static void main(string args[])
{
catch(interruptedexception e)
{
system.out.println("main thread interrupted");
}
system.out.println("main thread run is over" );
}
}
OUTPUT
RESULT
Thus the java program for counting numbers using thread has been executed and verified successfully
AIM
To write a java program to implement one way client server communication using TCP.
PROCEDURE
CLIENT:
Step 1: Import all the necessary packages
Step 2: Create a class named TcpOneWayClient
Step 3: Within the class declare and define the main class with the exceptopn of IOException
Step 4: Create an object for socket by the following:
Socket sock=new Socket("portname",portnumber);
Step 5: Create an object for the datainputstream by the following:
DataInputStream dis=new DataInputStream(sock.getInputStream());
Step 6: Print that the connection is established Successfully and Listing to server
Step 7: Declare the variable str of datatype string
Str -> for getting the input from the server
Step 7: Use a while loop with the condition specified as true
Step 8: Within the loop assign str to the value which is received from the server by using readLine()
Step 9: Print the message received
Step 10: Use the if statement with the condition str.equals(“end”) then close the socket and leave the loop
using break;
SERVER:
Step 1: Import all the necessary packages
Step 2: Declare the class TcpOneWayChatServer
Step 3: Declare and define the main function with the exception as IOException
Step 4: Create an object for the server socket by following
ServerSocket servsock=new ServerSocket(portnumber);
Step 5: Create object for the socket that accepts the server socket object
Step 6: Create object for scanner for getting the input
Step 7: Create object for the printstream for the output by the following
PrintStream ps=new PrintStream(sock.getOutputStream());
Step 8: Print that the connection is established and the message can be sent now and enter end to stop the
communication
Step 9: Use the while loop with the condition true
Step 10: Within the loop get the input message to be passed using a string variable
Step 11: use the object of the printstream to pass the message to the client
Step 12: Use the if condition statement with the condition str.equals(“end”)
Step 13: If the condition get satisfies close the server socket and leave the loop using the break; s
statement
SOURCE CODE
CLIENT
import java.io.*;
import java.net.*;
class TcpOneWayChatClient
{
public static void main(String args[]) throws IOException
{
// Establishes connection to the specified IP and Port Number
Socket sock=new Socket("localHost",8000);
String str;
// Receives the messages from the server
DataInputStream dis=new DataInputStream(sock.getInputStream());
System.out.println("Connection established successfully!");
System.out.println("Listening for server...");
while(true)
{
// Reads the input from server
str=dis.readLine();
System.out.println("Message Received:"+str);
if (str.equals("end"))
{
//Close the socket
sock.close();
break;
}
}
}
}
SERVER
import java.io.*;
import java.net.*;
import java.util.*;
class TcpOneWayChatServer
{
public static void main(String a[])throws IOException
{
// Establishes connection to the specified IP and Port Number
ServerSocket servsock=new ServerSocket(8000);
// Opens the socket and binds the connection on the port number 8000
Socket sock=servsock.accept();
//DataInputStream dis=new DataInputStream(System.in);
Scanner s=new Scanner(System.in);
PrintStream ps=new PrintStream(sock.getOutputStream());
System.out.println("Connection established successfully!");
System.out.println("You can start sending messages now!");
System.out.println("Enter 'end' to quit");
while(true)
{
System.out.println("Enter message to send:"); // reads the input message string from the input device
String str=s.nextLine();
ps.println(str); //checks for end of message
if(str.equals("end"))
{
//Closes the socket
servsock.close();
break;
}
}
}
}
OUTPUT
SERVER:
CLIENT
RESULT
Thus the TCP one way communication program is executed and output is verified successfully.
AIM
To develop a web application for registration process using Java Server Page (JSP).
PROCEDURE
Step 1: Create a database and table using mysql with the following fields.
Rno -> int
Name -> varchar(20)
Password -> varchar(20)
Dept -> varchar(8)
Dob -> date
Contact -> bigint
Email -> varchar(25)
Step 2: Create a java web file using netbeans.
I. Steps to create the new project:
File->New Project->java web->web application->next->give the file name-> next
->select the server-> next-> finish
II. After creating the project index.html page will be created. In index.html create the front page of
your login by the following:
a. Under the <head> tag, use <title> tag to give title for the page and close both the tags
b. Under the <body> tag, use <form > tag with the property action which specify the login file
where the form should be redirected when the form is submitted
c. Create a table <table> tag with the properties border as 1 and width as 25%
d. Under the <table> tag create first row using <tr> and use 2 <td> tags to create two
columns one having element content as Enter the user Name and the other of the <input>
tag with the type, name for the input tag
e. Create another row and two coloums in which first column as the element name as Enter
Password and the other as the <input> tag with its properties name and its type
f. Create another row and two columns in which one as the button reset and the other has the
button submit using <input> tag and type as reset and submit respectively
g. Create another row which as the link to redirect to register page for the new users in which
link is made using <a> tag
h. Close the <form>, <body> and <html> tag
i. Now the home page has been designed
LOGIN PAGE:
Step 1: Create a JSP page by right click the project-> new-> jsp page and name the page
Step 2: Import the necessary packages by the following syntax: <%@page import="java.sql.*" %>
Step 3: Under the <head> tag give the title to the page within the <title> tag
Step 4: Under the <body> tag do the following:
I. Use the <form> tag with the property action which redirects the form to the update file when
the update button is clicked
II. The java code are embedded with the html code with the syntax <%..%>
III. Include the java code for the database connection as follows
Class.forName("com.mysql.jdbc.Driver");
Connection con =
DriverManager.getConnection( "jdbc:mysql://localhost:3306/details"
, "root", "root");
IV. Connect the mysql connector to the project under the library folder
V. Declare the variables str1, str2, selectQuery of the type string
i. Str1-> for getting the name
ii. Str2-> for getting password
VI. Get the parameters that are passed from the index page by the following syntax
request.getParameter("name");
VII. Likewise get the password too
VIII. Assign the selectQuery variable to the select query from the dbms
IX. Use the preparedstatement and create the object to it by the following
PreparedStatement ps = con.prepareStatement(selectQuery);
X. Store the result in the resultset by creating object for it and as follows
ResultSet rs = ps.executeQuery();
XI. Use the if condition with the condition rs.next to check if the user is valid or not
XII. If the condition satisfies then print that the user is valid and display all the details of the user
XIII. Else print invalid user and close all the unclosed tags
REGISTRATION PAGE:
I. Use the <title> tag to give the title to the page
II. Design the page using html page for getting all the input and store in the database
III. Use the insert query to store them in the database
IV. Use the PreparedStatement and create object and use setstring to set the values to the field
SOURCE CODE
LOGIN.JSP
<%@page contenttype="text/html" pageencoding="utf-8"%>
<%@page import="java.sql.*" %>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>my_details</title>
</head>
<body>
<form action="update.jsp">
<%
class.forname("com.mysql.jdbc.driver");
string str1=request.getparameter("name");
string str2=request.getparameter("password");
connection con = drivermanager.getconnection( "jdbc:mysql://localhost:3306/details", "root", "root");
string selectquery = "select * from login where name='"+str1+"'and password='"+str2+"'";
preparedstatement ps = con.preparestatement(selectquery);
resultset rs = ps.executequery();
if (rs.next())
{
out.print("<center><h1>welcome!!! you are a valid user</h1></center>");
}
else
{
out.print("<center><h1>you have entered a wrong password...</center></h1>");
}
%>
<center>
<table border="2" width="25%">
<tr>
REG.JSP
<%@page contenttype="text/html" pageencoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>register</title>
</head>
<body>
<form action="registration.jsp" method="get">
<br><br><br><br><br> <center>
<table border="1" width="30%" cellpadding="5">
<tr>
<td>register number:</td>
<td><input type="text" name="rno" value="" /></td>
</tr>
<tr>
<td>name:</td>
<td><input type="text" name="name" value="" /></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" name="password" value="" /></td>
</tr>
<tr>
<td>department:</td>
<td><input type="text" name="dept" value="" /></td>
</tr>
<tr>
<td>date of birth:</td>
<td><input type="text" name="dob" value="" /></td>
</tr>
<tr>
<td>contact:</td>
<td><input type="text" name="contact" value="" /></td>
</tr>
<tr>
<td>email:</td>
REGISTRATION.JSP
<%@page contenttype="text/html" pageencoding="utf-8"%>
<%@ page import ="java.sql.*" %>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jsp page</title>
</head>
<body>
<%
class.forname("com.mysql.jdbc.driver");
connection con1 = drivermanager.getconnection( "jdbc:mysql://localhost:3306/details", "root", "root");
string rno=request.getparameter("rno");
string name=request.getparameter("name");
string password=request.getparameter("password");
string dept=request.getparameter("dept");
string dob=request.getparameter("dob");
string contact=request.getparameter("contact");
string email=request.getparameter("email");
string query="insert into login(rno,name,password,dept,dob,contact,email)values(?,?,?,?,?,?,?)";
preparedstatement ps=con1.preparestatement(query);
ps.setstring(1,rno);
ps.setstring(2,name);
ps.setstring(3,password);
ps.setstring(4,dept);
ps.setstring(5,dob);
ps.setstring(6,contact);
ps.setstring(7,email);
int updatequery=ps.executeupdate();
if(updatequery!=0)
{
response.sendredirect("index.html");
}
%>
</body>
</html>
UPDATE.JSP
<%@page contenttype="text/html" pageencoding="utf-8"%>
<%@ page import ="java.sql.*" %>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jsp page</title>
</head>
<body>
<%
class.forname("com.mysql.jdbc.driver");
connection con1 = drivermanager.getconnection( "jdbc:mysql://localhost:3306/details", "root", "root");
string rno=request.getparameter("rno");
string name=request.getparameter("name");
string password=request.getparameter("password");
string dept=request.getparameter("dept");
83 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
string dob=request.getparameter("dob");
string contact=request.getparameter("contact");
string email=request.getparameter("email");
INDEX.HTML
<html>
<head>
<title>loginpage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="login.jsp">
<br><br><br><br><br>
<center> <h1> login page </h1>
<table border="1" width="25%">
<tr> <td>enter user name:</td><td> <input type="text" name="name"> </td></tr>
<tr><td> enter password:</td><td> <input type="password" name="password"></td></tr>
<tr>
<td> <input type="reset"
value="reset"></td>
OUTPUT
RESULT
Thus the web application for registration process using java server page has been designed executed and
verified successfully
AIM
To implement a simple movie-listing web application that supports creating, editing, searching and
listing movies from a database using asp.net.
PROCEDURE
Step 1: Open the visual studio 2012 and create new web application by the following
under Visual C# - web Category:
File -> New project -> ASP.NET MVC 4
Step 2: Give the file name as MvcMovie and browse the location and create the project
Step 3: In the New ASP.NET MVC 4 Project dialog box, select Internet Application
Step 4: Leave Razor as the default view engine and click OK
Step 5: To add the model to the project do the following:
I. In Solution Explorer, right click the Models folder, select Add, and then select Class
II. Enter the class name "Movie" and add the following five properties to the class
a. ID-> to get the id -> int
b. Title-> to get the movie title -> string
c. ReleaseDate-> to get the date -> dateTime
d. Gerene -> to get the Gerene -> string
e. Price -> to get the price -> decimal
III. We'll use the Movie class to represent movies in a database. Each instance of a Movie
object will correspond to a row within a database table, and each property of the Movie
class will map to a column in the table.
IV. Add the following MovieDBContext class
Step 6: Open the application root Web.config file. (Not the Web.config file in the Views folder.)
Step 7: Add the connection string to the <connectionStrings> element in the Web.config file.
Step 8: Create a controller class and do the following
I. Right-click the Controllers folder and create a new MoviesController controller.
II. Select the following options:
a. Controller name: MoviesController. (This is the default.)
b. Template: MVC Controller with read/write actions and views, using Entity
Framework.
c. Model class: Movie (MvcMovie.Models).
d. Data context class: MovieDBContext (MvcMovie.Models).
e. Views: Razor (CSHTML). (The default.)
III. Click add and the necessary files and folders will be created
IV. Adding a SearchIndex action method to the existing MoviesController class. The
method will return a view that contains an HTML form.
V. The first line of the SearchIndex method creates the following LINQ query to select the
movies:
var movies = from m in db.Movies select m;
VI. If the searchString parameter contains a string, the movies query is modified to filter on
the value of the search string using the if condition
VII. Implement the SearchIndex view that will display the form to the user. Right-click
inside the SearchIndex method and then click Add View. In the Add View dialog box,
specify that you're going to pass a Movie object to the view template as its model class.
In the Scaffold template list, choose List, then click Add.
VIII. Save and run the project
SOURCE CODE
MODEL:
using System;
using System.Data.Entity;
namespace MvcMovie.Models
{
public class Movie
{
public int ID { get; set; }
public string Title { get; set; }
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
public decimal Price { get; set; }
}
public class MovieDBContext : DbContext
{
public DbSet<Movie> Movies { get; set; }
}
}
CONTROLLER CODE:
public ActionResult SearchIndex(string movieGenre, string searchString)
{
var GenreLst = new List<string>();
var GenreQry = from d in db.Movies
orderby d.Genre
select d.Genre;
GenreLst.AddRange(GenreQry.Distinct());
ViewBag.movieGenre = new SelectList(GenreLst);
var movies = from m in db.Movies select m;
if (!String.IsNullOrEmpty(searchString))
{
movies = movies.Where(s => s.Title.Contains(searchString));
}
if (string.IsNullOrEmpty(movieGenre))
return View(movies);
else
{
return View(movies.Where(x => x.Genre == movieGenre));
}
}
VIEW CODE:
@model IEnumerable<MvcMovie.Models.Movie>
@{ ViewBag.Title = "SearchIndex"; }
<h2>SearchIndex</h2>
<p> @Html.ActionLink("Create New", "Create")
@using (Html.BeginForm("SearchIndex","Movies",FormMethod.Get))
{
<p> Title: @Html.TextBox("SearchString")<br />
<input type="submit" value="Filter" />
</p>
}
</p>
<table>
<tr>
<th> Title </th>
<th> ReleaseDate </th>
<th> Genre </th>
<th> Price </th> <th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td> @Html.DisplayFor(modelItem => item.Title) </td>
<td> @Html.DisplayFor(modelItem => item.ReleaseDate) </td>
<td> @Html.DisplayFor(modelItem => item.Genre) </td>
<td> @Html.DisplayFor(modelItem => item.Price) </td>
<td> @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
@Html.ActionLink("Details", "Details", new { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.ID }) </td> </tr>
}
</table>
OUTPUT
RESULT
Thus the ASP.Net application for the movie listing has been executed and verified successfully
AIM
To create XML document to display CD catalog using CSS tags.
PROCEDURE
1. Create the XML with Catalog as main tag and its child tag as CD
2. Inside CD tag add information such title, artist, country, company and price using the respective tags.
3. Create external CSS file to format the XML file
4. External CSS file contain the properties such as background color and formatting the all cd
information tags with necessary attributes.
5. Display the content using web browser
SOURCE CODE
Catalog.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cat.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>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR> </CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR> </CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR> </CD>
</CATALOG>
cat.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: #000000; margin-left: 20pt;
}
OUTPUT
XML file with DOM Structure
RESULT
Thus the XML document to display CD catalog using CSS tags is created and verified successfully.
AIM
To create an web application to display and remove shopping items using Angular JS.
PROCEDURE
Step 1. Getting Started:
Start by making an application called myShoppingList, and add a controller named myCtrl to it.
The controller adds an array named products to the current $scope.
In the HTML, we use the ng-repeat directive to display a list using the items in the array.
Step 2. Adding Items:
In the HTML, add a text field, and bind it to the application with the ng-model directive.
In the controller, make a function named addItem, and use the value of the addMe input field to add an
item to the products array.
Add a button, and give it an ng-click directive that will run the addItem function when the button is
clicked.
Step 3. Removing Items:
We also want to be able to remove items from the shopping list.
In the controller, make a function named removeItem, which takes the index of the item you want to
remove, as a parameter.
In the HTML, make a <span> element for each item, and give them an ng-click directive which calls
the removeItem function with the current $index.
SOURCE CODE
<!DOCTYPE html>
98 Department of Information Technology, SMVEC
WEB TECHNOLOGY LAB VI SEM
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
$scope.removeItem = function (x) {
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
<p>Click the little x to remove an item from the shopping list.</p>
</body>
</html>
OUTPUT
RESULT
Thus the web application to display and remove shopping items using Angular JS is created and verified .
AIM
To create an web application to perform form validation using Angular JS.
PROCEDURE
1. In HTML, the new directive will be referred to by using the attribute my-directive.
2. In the JavaScript we start by adding a new directive named myDirective.
3. you must use a camel case name, myDirective, but when invoking it, you must use - separated name, my-
directive.
4. Then, return an object where you specify that we require ngModel, which is the ngModelController.
5. Make a linking function which takes some arguments, where the fourth argument, mCtrl, is the
ngModelController,
6. Then specify a function, in this case named myValidation, which takes one argument, this argument is the
value of the input element.
7. Test if the value contains the letter "e", and set the validity of the model controller to either true or false.
8. At last, mCtrl.$parsers.push(myValidation); will add the myValidation function to an array of other
functions, which will be executed every time the input value changes.
$dirty One or more have been modified
$invalid The form content is not valid
SOURCE CODE
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span></p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span></p>
<p>
<input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p></form><script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script></body></html>
OUTPUT
RESULT
Thus the web application to perform form validation using Angular JS is created and verified .