Scribd
Upload
5 views41 pages

Web ADVFILEpdf

The document is a lab manual for Web Designing using Advanced Tools, submitted by Priyanka Narang for the BCA program. It includes a series of practical exercises covering JavaScript, VBScript, PHP, CSS, and Macromedia Dreamweaver, with code examples and outputs. The manual is affiliated with Kurukshetra University and serves as a guide for students to learn web development techniques.

Uploaded by

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

Web ADVFILEpdf

The document is a lab manual for Web Designing using Advanced Tools, submitted by Priyanka Narang for the BCA program. It includes a series of practical exercises covering JavaScript, VBScript, PHP, CSS, and Macromedia Dreamweaver, with code examples and outputs. The manual is affiliated with Kurukshetra University and serves as a guide for students to learn web development techniques.

Uploaded by

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

Panipat Institute of Engineering & Technology, Samalkha,

Panipat

Department of Computer Applications

Lab Manual of Web Designing


using Advanced Tools
Submitted To: Submitted By:
Rohit Sir Priyanka Narang
BCA-6th Sem A
Deptt. Of Computer Applications Roll No 20505

Affiliated to

Kurukshetra University Kurukshetra, India

Priyanka Narang
S.no Name of Practical Date Sign

1 Write a program using conditional


statement,function in JavaScript

2 Write a program using conditional


statement ,function in VBScript

3 WAP to develop form validation in


JavaScript
4 Explain all steps of Macromedia
Dreamweaver
5 WAP to create a table in PHP
6 WAP to define ways of defining
CSS in HTML
7 Design a registration page using
validation,CSS and PHP
8 Explain the steps to create a web
page in Microsoft web page

9 Write the syntax and structure of


XML document
10 Write a structure for DTD incuding
internal and external in XML

Priyanka Narang
1

Practical no.1
Aim: Write a program using conditional statement,function in JavaScript

<html>
<head>
<title>IF Statments!!!</title>
<script type="text/javascript">
var age = prompt("Please enter your age");
if (age >= 18)
document.write("You are an adult <br />");
if (age < 18)
document.write("You are NOT an adult <br />");

</script>
</head>
<body>
<p>conditional statemtent</p>
</body>
</html>

Priyanka Narang
2

Output

Priyanka Narang
3

If else

<html>
<head>
<title>If...Else Statments!!!</title>
<script type="text/javascript">
// Get the current hours
var hours = new Date().getHours();
if(hours<12)
document.write("Good Morning!!!<br />");
else
document.write("Good Afternoon!!!<br />");
</script>
</head>
<body>
</body>
</html>

Priyanka Narang
4

Output

Function in JavaScript
<html>
<head>
<title>Functions!!!</title>
<script type="text/javascript">
function myFunction(){
document.write("This is a simple function.<br />");
}
myFunction();
</script>
</head>
<body style="background-color: yellow;">
</body>
</html>
Priyanka Narang
5

Output

Priyanka Narang
6

Practical no.2
Aim: Write a program using conditional statement,function in VBscript
Code view
Function in VBscript:
Code view

<!DOCTYPE html>
<html> function in vbscript
<head>
<title>vbscriptFunction</title>
</head>
<body>
<script type="text/vbscript">
Function findArea(radius)
const pi=3.14
area = pi*radius*radius
findArea = area
End Function
document.write("The area of the circle when the radius is 20 is " &
findArea(20) &"<br/>")
document.write("The area of the circle when the radius is 10 is " &
findArea(10))
</script>
</body>
</html>

Priyanka Narang
7

<html>
<head>
<script type="text/vbscript">
Dim age
age = InputBox("Enter your age")
If age<18 Then
document.write("You are too young.")
ElseIf age<45 Then
document.write("You are still young.")
ElseIf age<70 Then
document.write("You are getting older.")
Else
document.write("You are too old.")
End If

</script>
</head>
<body>
<p>hello</p>
</body>
</html>

Output

Priyanka Narang
8

Priyanka Narang
9

Practical no.3
Aim: Write a program to develop form validation in JavaScript
Code view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple HTML Form Validation</title>
<link rel="stylesheet" href="web.css">
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()"
action="confirmation.php" method="post">
<h2>Application Form</h2>
<div class="row">
<label>Full Name</label>
<input type="text" name="name">
<div class="error" id="nameErr"></div>
</div>
<div class="row">
<label>Email Address</label>
<input type="text" name="email">
<div class="error" id="emailErr"></div>
</div>
<div class="row">
<label>Mobile Number</label>

Priyanka Narang
10

<input type="text" name="mobile" maxlength="10">


<div class="error" id="mobileErr"></div>
</div>
<div class="row">
<label>Country</label>
<select name="country">
<option>Select</option>
<option>Australia</option>
<option>India</option>
<option>United States</option>
<option>United Kingdom</option>
</select>
<div class="error" id="countryErr"></div>
</div>
<div class="row">
<label>Gender</label>
<div class="form-inline">
<label><input type="radio" name="gender" value="male">
Male</label>
<label><input type="radio" name="gender" value="female">
Female</label>
</div>
<div class="error" id="genderErr"></div>
</div>
<div class="row">
<label>Hobbies <i>(Optional)</i></label>
<div class="form-inline">
Priyanka Narang
11

<label><input type="checkbox" name="hobbies[]"


value="sports"> Sports</label>
<label><input type="checkbox" name="hobbies[]"
value="movies"> Movies</label>
<label><input type="checkbox" name="hobbies[]"
value="music"> Music</label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
<script type="text/javascript" src="web.js"></script>
</body>
</html>

CSS code:
body {
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
text-align: center;
text-decoration: underline;
}
form {
Priyanka Narang
12

width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px
}
label i {
color: #999;
font-size: 80%;
}
input, select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}
.row {
padding-bottom: 10px;
}.form-inline {

Priyanka Narang
13

border: 1px solid #ccc;


padding: 8px 10px 4px;
border-radius: 2px;
}
.form-inline label, .form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}
.error {
color: red;
font-size: 90%;
}
input[type="submit"] {
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background: #0165b6;
}

Priyanka Narang
14

Output

Priyanka Narang
15

Practical no.4
Aim:Explain all steps of Macromedia Dreamweaver
Creating a New Page
The first HTML page that you create in a new site should be the index page,
which is the page that a Web browser loads automatically when a visitor goes
to the site. Depending on how you are naming pages on your site, the index
page could have a variety of names, but it is most often named index.html.
After you create the index page, you will want to create other pages for the
site.

As you'll see is often the case with Dreamweaver, there is more than one way
to do the task at hand. You can create a new page using the Start Page, or
you can use the New Document dialog.

Using the Start Page


The Start Page is the fastest way to create a new HTML page. It appears
when you have closed all other document windows.

To create a new page from the Start Page:

1. Close any open document windows. The Start Page appears . Each of
the items in the Start Page is a link.

Priyanka Narang
16

In the Create New section, click HTML. Dreamweaver creates the new blank HTML page

Priyanka Narang
17

Using the New Document dialog


The New Document dialog gives you a bit more flexibility than the Start Page when
creating new documents. Like the Start Page, you can create several different types of
new documents, plus it allows you to choose the doctype of the new document.

To create a new page from the New Document dialog:

1. Choose File > New, or press Ctrl-N (Cmd-N). The New Document
dialog appears , set to the General tab.

1. Click to choose one of the items in the Category column. The second
column changes to show the available items for the category you selected.
The name of this column also changes to match the name of the category.
Priyanka Narang
18

2. Click the item you want in the second column. If Dreamweaver has a
preview image of the item you selected available, it will appear in the
Preview pane (previews are mostly available for sample pages and
templates), with its description below the preview area.
3. (Optional) Some of the kinds of documents you can create in this
dialog allow you to declare their doctype, and for those the Document
Type (DTD) pop-up menu will be available. Most of the time the default
choice will be fine, but if you want to you can change the doctype from the
pop-up menu

Click Create. Dreamweaver creates the new document and displays it in a new window.

Priyanka Narang
19

Practical no.5
Aim:WAP to create a table in PHP
<!DOCTYPE html>
<html>
<body>
<table align = "left" border = "1" cellpadding = "3" cellspacing = "0">
<tr>
<td>Value</td>
<td>Multiplication</td>
</tr>
<?php
$x = 1;
while($x <= 5) {
echo "<tr>";
echo "<td> $x*$x </td>";
echo "<td>" .$x*$x. "</td>";
echo "</tr>";
$x++;
}
?>
</table>
</body>
</html>

Priyanka Narang
20

Output

Priyanka Narang
21

Practical no.6
Aim:WAP to define ways of defining CSS in HTML
Inline CSS

<!DOCTYPE html>
<html>
<head>
<title>inlineCSS</title>
</head>
<body>
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


</body>
</html>

Priyanka Narang
22

Output

Priyanka Narang
23

Internal CSS
<!DOCTYPE html>

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
<title>internal css</title>
</head>
<body>

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

</body>
</html>

Priyanka Narang
24

Output

Priyanka Narang
25

External CSS
<!DOCTYPE html>
<html>
<head>
<title>external css</title>
<link rel="stylesheet" href="web.css">
</head>
<body>

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

</body>
</html>

CSS:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

Priyanka Narang
26

Priyanka Narang
27

Practical no.7
Aim: Design a validation page using validation,CSS and PHP

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>FORM DATA</title>
<style>
*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
.container{
margin: 10px 50px;
}
.form-group{
margin: 10px;
}

.form-group0{

border: solid 1px #eee;


padding: 15px 10px;
}

Priyanka Narang
28

input{
width: 100%;
border: solid 1px #eee;
padding: 15px 10px;
}
button{
width: 200px;
padding: 15px;
margin-left: 250px;
background: #fff;
color: dodgerblue;
border: solid 1px dodgerblue;
border-radius:33px;
cursor: pointer;
transition: all .38s ease-in-out;
}
button:hover{
background: dodgerblue;
color: #fff;
}
table tr td{
border: solid 1px #eee;
padding: 10px;
}
.form-group:before{

Priyanka Narang
29

content: " *";


color: red;
}
.container {
width: 640px;
height: 660px;
align: center;
border: 5px solid #339;
}
.he{
text-align:center;
}
.c1{
margin-left: auto;
margin-right:auto;
}
</style>

</head>
<body>

<div class="container">
<h2 class="he"><u>Registration Form</u></h2>
<br><br>
<form action="test1.php", method="POST">

Priyanka Narang
30

<div class="form-group">
<b>First Name</b> <input type="text" name="fname"
id="fname" required placeholder="Enter first name" pattern="^[A-
Z]\w*$" oninvalid="this.setCustomValidity('Please make first letter of
your name as capital')"
onchange="try{setCustomValidity('')}catch(e){}"></input>
</div>
<div class="form-group">
<b>Last Name</b> <input type="text" name="lname"
id="lname" required placeholder="Enter last name" pattern="^[A-
Z]\w*$" oninvalid="this.setCustomValidity('Please make first letter of
your name as capital')"
onchange="try{setCustomValidity('')}catch(e){}"></input>
</div>
<div class="form-group">
<b>Email Address</b> <input type="email" name="email"
id="email" placeholder="Enter email address" required
oninvalid="this.setCustomValidity('Please give valid format, like
@yahoo.com or @gmail.com, etc,.')"
onchange="try{setCustomValidity('')}catch(e){}"></input>
</div>
<div class="form-group">
<b>Password</b> <input type="password" name="pwd"
id="pwd" placeholder="Enter new password" pattern="(?=.*[0-
9])(?=.*[!@#$%^&*])(?=.*[a-z]).{6,10}" title="Password should be of 6-
10 length and should contain atleast one character and one
number"></input>
</div>
<div class="form-group">
<b>Confirm Password</b> <input type="password"
name="psw-repeat" id="psw-repeat" placeholder="Repeat your
password" required>
Priyanka Narang
31

</div>
<div class="form-group0">
<b>Date Of Birth</b>
<input type="date" id="birthday" name="birthday" min="1900-
01-01" max="2010-12-31" >
</div>
<div class="form-group1">
<button type="submit">Sign Up</button>
</div>
</form>
</div>

<script>
var password = document.getElementById("pwd")
, confirm_password = document.getElementById("psw-repeat");

function validatePassword(){
if(password.value != confirm_password.value) {
confirm_password.setCustomValidity("Passwords Don't Match");
} else {
confirm_password.setCustomValidity('');
}
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

Priyanka Narang
32

</script>

Priyanka Narang
33

Output

Priyanka Narang
34

Practical no.8
Aim: Explain the steps to create a web page
in Microsoft web page

Using Microsoft Word to create a web page


You can use Microsoft Word to convert existing documents into HTML
format. Use the “Save as Web Page” option to create documents for the
web. Remember, layout differences may exist after you convert a
document. For example, if you used tabs to create a table in Word, the
tab space will not appear in the HTML document. To avoid having to
correct an improperly aligned table, always use Word’s Insert Table
options to create new tables. Also, each time you use the ENTER key in
Word, extra white space will appear in the converted document (let the
text wrap automatically whenever possible).
Note: Read the instructions for using the "Save as Web page..." option
before you start.

Open Word.
When the application opens, from the “File” menu, choose “Open.”
Then, from the list of available documents, double click the document
you wish to convert.
Note: When the document opens, familiarize yourself with the layout.
The converted document will not look exactly like the original.
From the “File” menu, choose “Save as Web Page.” Click “Save.”
Note: When you convert a document to HTML format, you retain the
original document as a separate file. The new HTML file has the same file
name but a different file extension (.htm).
When the conversion is complete, the converted file appears in the
window (filename.htm). View the HTML source code file by selecting the
“View” menu, then “HTML Source.”

Priyanka Narang
35

If you have graphics in your document, scroll through the HTML source
code to find the reference to the image. Word names images
consecutively (Image1.gif, Image2.gif, etc.) When you publish your page,
be sure to include these image files.
Return to edit mode by clicking the “X” in the HTML Source window.
You can modify the HTML file using the Microsoft Word formatting
buttons and menu options and the Web toolbar options (insert hyperlink,
insert image). When you are satisfied with the appearance of your page,
be sure to save it.
Close your document by selecting the “File” menu, then choosing
“Close.” Click the Close button (the “X” in the upper-right corner) to
close Word.
Open your HTML file in a WWW browser to see how it will appear. You
can adjust the layout of the page if necessary using Mozilla’s editing
options.
Next, you must move your files to your Web directory using SSH Secure
Shell file transfer software.
Once you have published your page, view it in Mozilla to see how it will
appear to the world.

Open Mozilla Navigator. In the “Location:” box, type the address (URL)
of your page.
If you published in your “public_html” directory, the URL will be
http://udel.edu/~your_username/filename.htm.
If you published in an official University directory, the URL will be
http://www.udel.edu/directory_path/filename.htm.
If you published your student organization page, the URL will be
http://copland.udel.edu/stu-org/your_organization's_directory

Priyanka Narang
36

Practical No.9
Aim:Write the syntax and structure of XML document
Syntax of XML
<?xml version="1.0" encoding="UTF-8"?>

Structure

<!DOCTYPE website [
<!ELEMENT website (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>

<website>
<name>GeeksforGeeks</name>
<company>GeeksforGeeks</company>
<phone>011-24567981</phone>
</website> -->

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


<website>
<company category="geeksforgeeks">
<title>Machine learning</title>
<author>aarti majumdar</author>
<year>2022</year>

Priyanka Narang
37

</company>
<company category="geeksforgeeks">
<title>Web Development</title>
<author>aarti majumdar</author>
<year>2022</year>
</company>
<company category="geeksforgeekse">
<title>XML</title>
<author>aarti majumdar</author>
<year>2022</year>
</company>
</website>

Priyanka Narang
38

Practical No.10
Aim:Write a structure for DTD incuding internal and
external in XML

Syntax of DTD:

<!DOCTYPE root-element [<!element-declarations>]

INTERNAL DTD
<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>

EXTERNAL DTD
<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

Priyanka Narang
39

Priyanka Narang

You might also like