WAD Master Lab Manual

Department of Information Technology

WEB APPLICATION AND

DEVELOPMENT (WAD)

MASTER LAB MANUAL

PC632IT-VI-SEM

Contents

Program 1: An Introduction to HTML

Program 2: To design an HTML page to insert a table.

Program 3: To design an HTML page to create an ordered and unordered list of items and tags to provide link to different pages.

Program 4: To design an HTML page that contains different frames in a single window.

Program 5: To design an HTML page that contains CSS

Program 6: To design a web page using Inline Styling.

Program 7: To design a Form using HTML.

Program 8 : XML document to store information about a student.

Program 9: XSL

Program 10: HTML Manipulation

Program 11: val() - Sets or returns the value of form fields

Program 12: The jQuery attr() method is used to get attribute values.

Program 13: Set Content:

Program 14 AngularJS

Program 15:

Program 16:

Program 17:

Program 18:

Program 19:

Mongodb

Program 1: An Introduction to HTML

HTML

What is HTML?

HTML is the standard markup language for creating Web pages.

· HTML stands for Hyper Text Markup Language

· HTML describes the structure of Web pages using markup

· HTML elements are the building blocks of HTML pages

· HTML elements are represented by tags

· HTML tags label pieces of content such as "heading", "paragraph", "table", and so on

· Browsers do not display the HTML tags, but use them to render the content of the page

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html> Output:

My First Heading My first paragraph. Explanation

· The <!DOCTYPE html> declaration defines this document to be HTML5

· The <html> element is the root element of an HTML page

· The <head> element contains meta information about the document

· The <title> element specifies a title for the document

· The <body> element contains the visible page content

· The <h1> element defines a large heading

· The <p> element defines a paragraph

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

· HTML tags normally come in pairs like <p> and </p>

· The first tag in a pair is the start tag, the second tag is the end tag

· The end tag is written like the start tag, but with a forward slash inserted before the tag name

Web Browsers

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.

The browser does not display the HTML tags, but uses them to determine how to display the document

HTML Page Structure

Below is a visualization of an HTML page structure:

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags). The <!DOCTYPE> declaration is not case sensitive.

HTML Versions

Since the early days of the web, there have been many versions of HTML:

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

Write HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

Steps to create a web page

1. Open Notepad

2. Write or copy some HTML into Notepad.

3. Save the file on your computer. Select File > Save as in the Notepad menu.

4. Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

5. Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with")

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

Output

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

<!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Output

This is a paragraph.

This is another paragraph.

HTML Links

HTML links are defined with the <a> tag:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<p>HTML links are defined with the a tag:</p>

</body>

</html> Output HTML Links

HTML links are defined with the a tag:

This is a link

Explanation

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements. You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Images</h2>

<p>HTML images are defined with the imgtag:</p>

<imgsrc="Desert.jpg" alt="Desert" width="104" height="142">

</body>

</html>

Output

HTML Images

HTML images are defined with the img tag:

Explanation

HTML Attributes

Attributes provide additional information about HTML elements.

· All HTML elements can have attributes

· Attributes provide additional information about an element

· Attributes are always specified in the start tag

· Attributes usually come in name/value pairs like: name="value" The src Attribute

HTML images are defined with the <img> tag.

The filename of the image source is specified in the src attribute:

The width and height Attributes

Images in HTML have a set of size attributes, which specifies the width and height of the image

<!DOCTYPE html>

<html>

<body>

<h2>Size Attributes</h2>

<p>Images in HTML have a set of size attributes, which specifies the width and height of the image:</p>

<imgsrc="img_girl.jpg" width="500" height="600">

</body>

</html>

Output

The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.

<!DOCTYPE html>

<html>

<body>

<h2>The style Attribute</h2>

<p>The style attribute is used to specify the styling of an element, like color:</p>

<p style="color:red">I am a paragraph.</p>

</body>

</html>

Output

The style Attribute

The style attribute is used to specify the styling of an element, like color: I am a paragraph.

The title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:

<!DOCTYPE html>

<html>

<body>

<h2 title="I'm a header">The title Attribute</h2>

Mouse over this paragraph, to display the title attribute as a tooltip.

</p>

</body>

</html>

Output

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>

</html>

Output

This is heading 1

This is some text.

This is heading 2

This is some other text.

This is heading 2

This is some other text.

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.

The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.

The <head> element is placed between the <html> tag and the <body> tag:

<!DOCTYPE html>

<html>

<head>

<title>My First HTML</title>

</head>

<body>

<p>The HTML head element contains meta data.</p>

<p>Meta data is data about the HTML document.</p>

</body>

</html>

Output

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?" View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in IE), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

HTML Background Color

The background-color property defines the background color for an HTML element. This example sets the background color for a page to powderblue:

(<body bgcolor="red;">)

<!DOCTYPE html>

<html>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Output

HTML Text Color

The color property defines the text color for an HTML element:

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>

</html>

Output

This is a heading

This is a paragraph.

HTML Fonts

The font-family property defines the font to be used for an HTML element:

<!DOCTYPE html>

<html>

<body>

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

</body>

</html>

Output

This is a heading

This is a paragraph.

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

<!DOCTYPE html>

<html>

<body>

<h1 style="text-align:Left;">left Heading</h1>

<h1 style="text-align:center;">Center Heading</h1>

<h1 style="text-align:Right;">Right Heading</h1>

</body>

</html>

Output

HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text. Formatting elements were designed to display special types of text:

· <b> - Bold text

· <strong> - Important text

· <i> - Italic text

· <em> - Emphasized text

· <mark> - Marked text

· <small> - Small text

· <del> - Deleted text

· <ins> - Inserted text

· <sub> - Subscript text

· <sup> - Superscript text

HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional override.

The <bdo> element is used to override the current text direction:

<!DOCTYPE html>

<html>

<body>

<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

</body>

</html>

Output

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag. Note: Comments are not displayed by the browser, but they can help document your HTML source code.

With comments you can place notifications and reminders in your HTML:

<!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

</body></html>

Output

This is a paragraph.

Program 2: To design an HTML page to insert a table.

<html>

<head>

<title>Table Program</title>

</head>

<th><font color="white">Students Table</font></th>

<tr>

<td><font color="white"><b>Class</b></font></td>

</tr>

<tr>

<td><font color="white">Imran</font></td>

<tr>

<td><font color="white">Azher</font></td>

</tr>

<tr>

<td><font color="white">Mannan</font></td>

</tr>

<tr>

<td><font color="white">Ahmed</font></td>

</tr>

<tr>

<td><font color="white">Sohail</font></td>

</tr>

<tr>

<td><font color="white">Nayeem</font></td>

</body></html>

Output:

Program 3: To design an HTML page to create an ordered and unordered list of items and tags to provide link to different pages.

<html>

<head>

<title> List:ordered & unordered </title>

</head>

<p>persons invited in party</p></br>

<a href="table.html">click on the link</a>

<h1 align="center">A list of items to be purchased for a B'day party</h1>

<ol>

<li> Ballons</li>

<li>Sweets</li>

<li>Namkeen</li>

<li>Return Gifts</li>

</ol>

<ul>

<li>Chocolates</li>

<li>Cold Drink</li>

<li>Decorative Material</li>

<li>Music</li>

<li>Ribbon</li>

</ul>

</body></html>

Output:-

Program 4: To design an HTML page that contains different frames in a single window.

<html>

<head>

<title>Frame</title></head>

</frameset>

</frameset>

</html>

Output:

Program 5: To design an HTML page that contains CSS

Code for CSS file

body

{

background-color:red

}

{

font color:white

}

Code for html file

<html>

<head>

</head><body>

<h1> I am formatted with a linked stylesheet </h1>

</body> </html>

Output

Program 6: To design a web page using Inline Styling.

<html>

<head>

h3 {color: blue}

</style>

</head>

<body>

<h1>This is header 1</h1>

<h3>This is header 3 </h3></body>

</html>

Output:

Program 7: To design a Form using HTML.

<html>

<body>

First name : <input type="text" name="firstname" /> </br> Last name : <input type="text" name= "lastname" />

</br>

I have a bike:

<br>

I have a car:

<br>

I have a airplane:

<br>

Male: <input type="radio" checked="checked" name="Sex" value="male" /> <br> Female: <input type="radio" name="Sex" value="female" />

</form>

</body>

</html>

Output

Program 8 : XML document to store information about a student.

Design an XML document to store information about a student in an engineering college affiliated to VTU. The information must include USN, Name, and Name of the College, Branch, Year of Joining, and email id. Make up sample data for 3 students. Create a CSS style sheet and use it to display the document.

Aim:

To design a XML document to store information about a student.

Program 5.xml

<?xml-stylesheet type="text/css" href="5.css" ?>

<!DOCTYPE HTML>

<html>

<head>

<h1>STUDENTS DESCRIPTION</h1>

</head>

<name>NAME : ABDUL</name>

<college>COLLEGE : ISL</college>

<branch>BRANCH : Information Technology</branch>

<e-mail>E-Mail : abdul@gmail.com</e-mail></student>

<name>NAME : AHMED</name>

<college>COLLEGE : ISL</college>

<branch> BRANCH : Computer Science and Engineering</branch>

<e-mail>E-Mail : ahmed@gmail.com</e-mail></student>

<name>NAME: RAHEEM</name>

<college>COLLEGE : ISL</college>

<branch>BRANCH : Electronics and Communication Engineering

</branch>

<e-mail>E-Mail : raheem@gmail.com</e-mail></student>

</students>

</html>

Program 5.css

student{

display:block; margin-top:10px; color:Navy;

}

USN{

display:block; margin-left:10px;font-size:14pt; color:Red;

}

name{

display:block; margin-left:20px;font-size:14pt; color:Blue;

}

college{

display:block; margin-left:20px;font-size:12pt; color:Maroon;

}

branch{

display:block; margin-left:20px;font-size:12pt; color:Purple;

}

year{

display:block; margin-left:20px;font-size:14pt; color:Green;

}

e-mail{

display:block; margin-left:20px;font-size:12pt; color:Blue;

}

Output:

STUDENTS DESCRIPTION

Program 9: XSL

<?xml version = "1.0" encoding = "utf-8"?>

<xsl:stylesheet version = "1.0"

xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"

xmlns = "http://www.w3.org/1999/xhtml" >

<xsl:template match = "breakfast_menu">

<h2> Breakfast Menu Descriptions </h2>

<xsl:for-each select = "food">

<xsl:value-of select = "name" /> <br />

<span style = "font-style: italic; color: blue;"> Price: </span>

<xsl:value-of select = "price" /> <br />

<span style = "font-style: italic; color: blue;"> Description: </span>

<xsl:value-of select = "description" /> <br />

<span style = "font-style: italic; color: blue;"> Calories: </span>

<xsl:value-of select = "calories" /> <br /> <br />

</xsl:for-each>

</xsl:template>

</xsl:stylesheet>

Output

Program 10: HTML Manipulation

jQuery comes with a group of DOM related methods that make it easy to access and manipulate elements and attributes. Three simple, but useful, jQuery methods for DOM manipulation are:

i. text() - Sets or returns the text content of selected elements

ii. html() - Sets or returns the content of selected elements (including HTML markup)

Example:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#btn1").click(function(){

alert("Text: " + $("#test").text());

});

$("#btn2").click(function(){

alert("HTML: " + $("#test").html());

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

</body>

</html>

OUTPUT

Normal text

HTML CODE

Program 11: val() - Sets or returns the value of form fields

Example:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

alert("Value: " + $("#test").val());

});

</script>

</head>

<body>

<button>Show Value</button>

</body>

</html>

Output

Program 12: The jQuery attr() method is used to get attribute values.

Example:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

alert($("#isl").attr("href"));

});

</script>

</head>

<body>

<p><a href="http://www.islec.ac.in" id="isl">islec.ac.in</a></p>

<button>Show href Value</button>

</body>

</html>

Output:

Program 13: Set Content:

The same three methods text, html and val are used to set content:

· text() - Sets or returns the text content of selected elements

· html() - Sets or returns the content of selected elements (including HTML markup)

· val() - Sets or returns the value of form fields

Example:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#btn1").click(function(){

$("#test1").text("Hello world!");

});

$("#btn2").click(function(){

$("#test2").html("<b>Hello world!</b>");

});

$("#btn3").click(function(){

$("#test3").val("ISLEC");

});

</script>

</head>

<body>

<p id="test1">This is a paragraph.</p>

<p id="test2">This is another paragraph.</p>

<p>Input field: <input type="text" id="test3" value="Hello World"></p>

<button id="btn3">Set Value</button>

</body>

</html>

Output:

Program 14 AngularJS

<!DOCTYPE html>

<html>

<body>

<p>Change the value of the input field:</p>

</div>

<p>AngularJS resolves the expression and returns the result.</p>

<p>The background color of the input box will be whatever you write in the input field.</p>

</body>

</html>

Output:

Program 15:

<!DOCTYPE html>

<html>

<body>

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>

<br>

Full Name: {{fullName()}}

</div>

var app = angular.module('myApp', []);

app.controller('personCtrl', function($scope) {

$scope.firstName = "Pathan Ahmed";

$scope.lastName = "Khan";

$scope.fullName = function() {

return $scope.firstName + " " + $scope.lastName;

};

});

</script>

</body>

</html>

Output

Program 16:

<!DOCTYPE html>

<html>

<body>

Enter the first Number: <input type="text" ng-model="val1"><br>

Enter the second Number: <input type="text" ng-model="val2"><br>

<br>

Result: {{val3}}

</br>

<button ng-click="add()">Addition</button>

<button ng-click="mul()">Multiplication</button>

</div>

var app = angular.module('myApp', []);

app.controller('arthCtrl', function($scope) {

$scope.val1=0;

$scope.val2=0;

$scope.val3=0;

$scope.add = function() {

$scope.val3=Number($scope.val1) + Number($scope.val2);

};

$scope.mul = function() {

$scope.val3=$scope.val1 * $scope.val2;

};

});

</script>

</body>

</html>

Output

Multiplication

Addition

Program 17:

<!DOCTYPE html>

<html>

<body>

<h1>{{theTime}}</h1>

</div>

<p>The $interval service runs a function every specified millisecond.</p>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $interval) {

$scope.theTime = new Date().toLocaleTimeString();

$interval(function () {

$scope.theTime = new Date().toLocaleTimeString();

}, 1000);

});

</script>

</body>

</html>

Output

Program 18:

<!DOCTYPE html>

<html>

<body>

<h3>{{myUrl}}</h3>

</div>

<p>This example uses the built-in $location service to get the absolute url of the page.</p>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $location) {

$scope.myUrl = $location.absUrl();

});

</script>

</body>

</html>

Output

Program 19:

<!DOCTYPE html>

<html>

<body>

<p>This header will change after two seconds:</p>

<h1>{{myHeader}}</h1>

</div>

<p>The $timeout service runs a function after a specified number of milliseconds.</p>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $timeout) {

$scope.myHeader = "Hello World!";

$timeout(function () {

$scope.myHeader = "How are you today?";

}, 2000);

});

</script>

</body>

</html>

Output:

Mongodb

//1. Create a Database

var MClient = require('mongodb').MongoClient;

var url = "mongodb://localhost:27017/mydb";

MClient.connect(url, function(err, db) {

if (err) throw err;

console.log("Database created!");

db.close();

});

//2. Create a collection

var MClient = require('mongodb').MongoClient;

var url = "mongodb://localhost:27017/";

MClient.connect(url, function(err, db) {

if (err) throw err;

var dbo = db.db("mydb");

dbo.createCollection("customers", function(err, res) {

if (err) throw err;

console.log("Collection created!");

db.close();

});

//3. Insert data in a collection:

var MClient = require('mongodb').MongoClient;

var url = "mongodb://localhost:27017/";

MClient.connect(url, function(err, db) {

if (err) throw err;

var dbo = db.db("mydb");

var myobj = [

{ name: 'Mohiuddin', address: 'Main Road 989'},

{ name: 'Tharun', address: 'Sideway 1633'},

{ name: 'Raza', address: 'Hyderabad'}

];

dbo.collection("customers").insertMany(myobj, function(err, res) {

if (err) throw err;

console.log("Number of documents inserted: " + res.insertedCount);

db.close();

});

//4. Query the Database:

var MClient = require('mongodb').MongoClient;

var url = "mongodb://localhost:27017/";

MClient.connect(url, function(err, db) {

if (err) throw err;

var dbo = db.db("mydb");

var query = { address: "Hyderabad" };

dbo.collection("customers").find(query).toArray(function(err, result) {

if (err) throw err;

console.log(result);

db.close();

});

//5. Delete a record

var MongoClient = require('mongodb').MongoClient;

var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {

if (err) throw err;

var dbo = db.db("mydb");

var myquery = { address: 'Mountain 21' };

dbo.collection("customers").deleteOne(myquery, function(err, obj) {

if (err) throw err;

console.log("1 document deleted");

db.close();

});

//6. Update a Record

var MongoClient = require('mongodb').MongoClient;

var url = "mongodb://127.0.0.1:27017/";

MongoClient.connect(url, function(err, db) {

if (err) throw err;

var dbo = db.db("mydb");

var myquery = { address: "Valley 345" };

var newvalues = { $set: {name: "Mickey", address: "Canyon 123" } };

dbo.collection("customers").updateOne(myquery, newvalues, function(err, res) {

if (err) throw err;

console.log("1 document updated");

db.close();

});

Best Information for Learners

Search This Blog

WAD Master Lab Manual

Program 1: An Introduction to HTML

Program 2: To design an HTML page to insert a table.

Program 3: To design an HTML page to create an ordered and unordered list of items and tags to provide link to different pages.

Program 4: To design an HTML page that contains different frames in a single window.

Program 5: To design an HTML page that contains CSS

Program 6: To design a web page using Inline Styling.

Program 7: To design a Form using HTML.

Program 8 : XML document to store information about a student.

Program 9: XSL

Program 10: HTML Manipulation

Program 11: val() - Sets or returns the value of form fields

Program 12: The jQuery attr() method is used to get attribute values.

Program 13: Set Content:

Program 14 AngularJS

Program 15:

Program 16:

Program 17:

Program 18:

Program 19:

Mongodb

Comments

Post a Comment

Popular posts from this blog

DESIGN AND ANALYSIS OF ALGORITHMS – QUESTION BANK (CSE)

Web Application Development (WAD)

DESIGN AND ANALYSIS OF ALGORITHMS – QUESTION BANK (IT)