Scribd
Upload
50 views34 pages

WDC Assignment (Sakshi)

The document discusses 5 HTML programs - to create a resume using tables, create a home page using frames, design a student registration form, embed an image map in a web page, and create a DTD specifying rules for an XML document.

Uploaded by

priyanshi srivastava
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views34 pages

WDC Assignment (Sakshi)

The document discusses 5 HTML programs - to create a resume using tables, create a home page using frames, design a student registration form, embed an image map in a web page, and create a DTD specifying rules for an XML document.

Uploaded by

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

Name – Priyanshi Srivastava

Course – BCA 3rd Year (5th Sem)

Roll no. – 200820040063

Subject – WEB DESIGN LAB

Paper Code – BCA 507P

Submitted to – Dr. Akhilesh Yadav

Priyanshi Srivastava 1 2008200400


1. HTML program to create resume preparation using tables.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

background-color: rgb(253, 254,

255); display: flex;

justify-content: center;

align-items: center;

.full {

width: 50%;

max-width:

1000px; min-

height: 100px;

background-color: rgb(245, 239,

231); margin: 0px;

display: grid;

grid-template-columns: 2fr 4fr;


Priyanshi Srivastava 2 2008200400
}

.left {

position: initial;

background-color: rgb(156 179 9);

padding: 20px;

.right {

position: initial;

background-color: rgb(206 162

180); padding: 20px;

.image, .Contact, .Skills, .Language, .Hobbies, .title,

.Summary, .Experience, .Education, .project {

margin-bottom: 30px;

.h2 {

background-color: rgb(4, 96, 150);

</style>

</head>

<body>

<div class="full">

<div class="left">

<div class="Contact">

<h2>Contact</h2>

<p><b>Email id:</b>[email protected]</p><p><b>Mobile no :</b>1234567890</p>

Priyanshi Srivastava 3 2008200400


</div>

<div class="Skills">

<h2>Skills</h2>

<ul>

<li><b>Programming Languages :

Python, Java, C++</b></li>

<li><b>Frontend : HTML5, CSS3,

JavaScript, React</b></li>

<li><b>Backend : Node.js</b></li>

</ul>

</div>

<div class="Language">

<h2>Language</h2>

<ul>

<li>English</li>

<li>Hindi</li>

</ul>

</div>

<div class="Hobbies">

<h2>Hobbies</h2>

<ul>

<li>Playing cricket</li>

<li>Swimming</li>

</ul>

</div>

</div>

<div class="right">

<div class="name">

<h1>Sakshi Singh</h1>

Priyanshi Srivastava 4 2008200400


</div>

<div class="title">

<p>Web Developer</p>

</div>

<div class="Summary">

<h2>Summary</h2>

<p>To secure a challenging position in a

reputable organization

to expand my learning knowledge and skill

</p>

</div>

<div class="Experience">

<h2>Experience</h2>

<h3>Abc webdev pvt ltd - Senior Web Developer</h3>

<p>January 2022 to Present</p>

<ul>

<li>Actively engaged in web creative

design and development.</li>

<li>Designing project & planning</li>

</ul>

<h3>Xyz webdev pvt ltd - junior web developer</h3>

<p>August 2021 to December 2021</p>

<ul>

<li>Actively engaged in web creative

design and development.</li>

<li>Designing project & planning</li>

<li>Working on designing</li>

</ul>

</div>

Priyanshi Srivastava 5 2008200400


<div class="Education">

<h2>Education</h2>

<table>

<tr>

<th>University/college </th>

<th>Passing year </th>

<th>percentage/cgpa</th>

</tr>

<tr>

<td>xyz</td>

<td>2020</td>

<td>8.9</td>

</tr>

<tr>

<td>pqr</td>

<td>2018</td>

<td>89%</td>

</tr>

</table>

</div>

<div class="project">

<ul>

<li>

<h2>Project1</h2>

<p>This project is based on

html & used React</p>

</li>

<li>

<h2>Project2</h2>

Priyanshi Srivastava 6 2008200400


<p>This project is based on

html & used React</p>

</li>

</ul>

</div>

</div>

</div>

</body>

</html>

OUTPUT: -

Priyanshi Srivastava 7 2008200400


2. HTML program for home page creation using frames.

<!DOCTYPE html>

<html>

<head>

<title>Frame tag</title>

</head>

<frameset cols="25%,50%,25%">

<frame src="frame1.html" >

<frame src="frame2.html">

<frame src="frame3.html">

</frameset>

</html>

OUTPUT: -

Priyanshi Srivastava 8 2008200400


3. HTML program to design Student Registration Form.

<html lang="en">

<head>

<meta charset=" UTF-8">

<title>this first web pages </title>

</head>

<body>

<form action="https://httpbin.org/grt" method = "post" id = 'asd'>

<fieldset id = 'asd'>

<legend> STUDENT REGISTRATION</legend> <p>

<h2><label for="Candidate Photo">Candidate Photo</label></h2>

<div><img src="D:\New folder\photo.jpg" ></div>

<input type="file">

</p><h2>Personal Details</h2><hr><p>

<label for="candidate name">Candidate Photo</label>

<input type="text" name="firstname" id="firstname" placeholder=" Your Name"

autocomplete="on" autofocus>

</p><hr><p>

<label for="candidate name">Candidate Name :</label>

<input type="text" name="firstname" id="firstname" placeholder=" Your Name"

autocomplete="on"autofocus>

</p><hr><p>

<label for="Number">Number:</label>

<input type="number" name="Number" id="Number" placeholder=" Your Number"

autocomplete="on" autofocus>

</p><hr><p>

<label for="Course Applied "> Course Applied : </label>

Priyanshi Srivastava 9 2008200400


<div>

<input type="radio" >

<label for = "BCA">BCA</label>

<input type="radio" >

<label for = "BBA">BBA</label>

<input type="radio" >

<label for = "B.com">B.COM</label>

<input type="radio" >

<label for = "B.com (HONS)">B.COM (HONS)</label>

</div></p><hr><p>

<label for="Course Applied "> Gender : </label>

<div> <input type="radio" >

<label for = "MALE">MALE</label>

<input type="radio" >

<label for = "FEMALE">FEMALE</label>

</div></p><hr><p>

<label for="Course Applied "> Category : </label>

<div>

<input type="radio" >

<label for = "GEN">GEN</label>

<input type="radio" >

<label for = "SC">SC</label>

<input type="radio" >

<label for = "ST">ST</label>

<input type="radio" >

<label for = "OBC">OBC</label>

</div></p><hr><p>

<label for="Father Name">Father Name :</label>

<input type="text" name="Father Name" placeholder=" Your Father Name"

Priyanshi Srivastava 1 2008200400


autocomplete="on"autofocus>

</p><hr><p>

<label for="Mother Name">Mother Name :</label>

<input type="text" name="Mother Name" placeholder=" Your Mother Name"

autocomplete="on" autofocus>

</p><hr><p>

<label for="E-mail">E-mail :</label>

<input type="text" name="E-mail" id="E-mail" placeholder="@gmail.com"

autocomplete="on" autofocus>

</p><hr><p>

<label for="decade">Date of Birth :</label>

<input type="date" name="Date of Birth" placeholder=" Guardian Number"

autocomplete="on" autofocus>

</p> <legend></legend>

<h2>Address Details</h2><hr><p>

<label for = "Address Details">Address Details</label>

<input type="text" autocomplete="on" autofocus>

</p><hr><p>

<label for = "City">City</label>

<input type="text" autocomplete="on" autofocus>

</p><hr><p>

<label for = "state">state</label>

<input type="text" autocomplete="on" autofocus>

</p><hr><p>

<label for = "country">country</label>

<input type="text" autocomplete="on" autofocus>

</p><hr><p>

<label for = "Pincode">Pincode</label>

<input type="number" autocomplete="on" autofocus>

Priyanshi Srivastava 1 2008200400


</p></fieldset></form>

</body>

</html>

OUTPUT: -

Priyanshi Srivastava 1 2008200400


4. Create a web page to embed an image map in a web page
using HTML.
<!DOCTYPE html>

<html>

<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and

read more about the topic:</p>

<img src="OIP4.jfif" alt="Workplace" usemap="#workmap" width="400"

height="379">

<map name="workmap">

<area shape="circle" coords="34,44,270,350" alt="coffee" href="New folder\

coffee.html">

<area shape="circle" coords="290,172,333,250" alt="laptop " href="New folder\

laptop.html">

<area shape="circle" coords="337,300,44" alt=" sunglass " href="New folder\

sunglass.html">

</map>

</body>

</html>

Coffee
<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body>

<img src=coffe.jfif>

</body>

Priyanshi Srivastava 1 2008200400


</html>

Laptop
<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body> <img src=laptop.jfif> </body>

</html>

Sunglasses
<!DOCTYPE html>

<html lang="en">

<head>

</head>

<body> <img src=sunglass.jfif> </body>

</html>

Priyanshi Srivastava 1 2008200400


5. Writing program in XML for creation of DTD, which
specifies set of rules.
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note [

<!ENTITY nbsp "&#xA0;">

<!ENTITY writer "Writer: Donald Duck.">

<!ENTITY copyright "Copyright: W3Schools.">

]>

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

<footer>&writer;&nbsp;&copyright;</footer>

</note>

Priyanshi Srivastava 1 2008200400


6. Create a web page to implement all types of cascading style
sheets.
<html>

<head>

<meta charset="utf-8">

<meta name = "viewport" content = " width=device-width , initial- scale = 1.1">

<title> CSE Library </title>

</head>

<body >

<style>

body {

background-image: url("inaki-del-olmo-NIJuEQw0RKg- unsplash.jpg");

background-repeat: no-repeat; background-

size: 1px 1530px;

div {text-align: center;}

ol {list-style-type: inherit;} h2 { color:

rgb(14, 11, 8);}

a { color: rgb(6, 17, 17);}

.hl {

border-left: 6px solid green

height: 500px;} fieldset {

background-color: #eeeeee; margin-left:

600px;

margin-right: 600px; padding-top:

0.35em;} Legend {

text-align: center; background-color:

gray; color: white;

Priyanshi Srivastava 1 2008200400


padding: 10px 15px;}

</style>

<fieldset>

<legend> CSE Library Books</legend>

<div>

<h2>App Development</h2>

<a href="App Development\App_Development_1.HTML"> Books </a>

</div>

<div>

<h2>Artificial Intelligence</h2>

<a href="Artificial Intelligence\main.HTML"> Books </a>

</div>

<div>

<h2>C</h2>

<a href="C\C_Programming_ Language.HTML"> Books </a>

</div>

<div>

<h2> C ++</h2>

<a href="C++\C++.HTML"> Books </a>

</div>

<div>

<h2>Clean code</h2>

<a href="clean code\Clean_code.HTML"> Books </a>

</div>

<div>

<h2>Coding Interview</h2>

<a href="Coding Interview\code Interview.HTML"> Books </a>

</div>

<div>

Priyanshi Srivastava 1 2008200400


<h2>DS _ Algorithms</h2>

<a href="DS _ Algorithms\DS_ALGO.HTML"> Books </a>

</div>

<div>

<h2>Ethical Hacking</h2>

<a href="Ethical Hacking\Ethical Hackers.HTML"> Books </a>

</div>

</fieldset>

</body>

</html>

Priyanshi Srivastava 1 2008200400


7. Write a JavaScript code to input the name and address of a
visitor and display greeting message
<html>

<head>

<title>My first java script page</title>

<script language="javascript" type="text/javascript">

function displayname(name,address){

document.write("<h1>Hello Welcome in the World of Javascript!!!!</h1>")

alert("Your Entered Name is: "+name.toUpperCase()) alert("Your

Entered Address is :"+address.toUpperCase())

</script>

</head>

<body>

Plz. Enter your Name:<input type="text" id="Fname" value=""><br/><br/>

Plz. Enter yourAddress :<input type="text" id="Aname" value=""><br/><br/>

<input type="button" name="b1" value="Click here to see message"

onClick="displayname(Fname.value,Aname.value)" />

</body>

</html>

Priyanshi Srivastava 1 2008200400


Priyanshi Srivastava 2 2008200400
8. Write a JavaScript function to input two numbers
from user and print the sum of them.
<!DOCTYPE html>

<html>

<head>

<title>sum the two number</title>

<script type='text/javascript'> function

table_gen() {

var num1 = Number(document.getElementById('number1').value);

var num2 = Number(document.getElementById('number2').value);

var sum = num1 + num2

var result = document.getElementById('result') result.innerHTML += (num1 + "+" +

num2 + "=" + sum+ '<br/>')

}
</script>

</head>

<body>

<h1>javascript - sum the two number</h1>

<label>enter the first number</label>

<div>

<input type="text" id="number1" placeholder=" Enter the number ">

</div>

<label>enter the second number</label>

<div>

<input type="text" id="number2" placeholder=" Enter the number ">

</div>

<p>

<input type="button" id="b1" value="submit" onclick=table_gen()>

Priyanshi Srivastava 2 2008200400


</p>

<p id = 'result'> sum : </p>

</body>

</html>

Priyanshi Srivastava 2 2008200400


9. Write a JavaScript function to input a number
from user and print table of it.
<html>

<head>

<title>function to displat table</title>

<script type='text/javascript'> function

table_gen() {

var num = Number(document.getElementById('number').value);

alert('Please click on anumber'+ num) if (num == -1)

{alert('Please click on anumber')} else {

for (var i = 1; i <= 10; i++) {


var result = document.getElementById('result') result.innerHTML += (i + "x" + num

+ "=" + i * num + '<br/>')


} }}
</script>
</head>
<body>
<h1>javascript - function to displat table</h1>
<div>
<input type="text" id="number" placeholder=" Enter the number ">
</div>
<p><input type="button" id="b1" value="submit" onclick=table_gen()> </p>
<p id = 'result'></p>
</body>
</html>

Priyanshi Srivastava 2 2008200400


Priyanshi Srivastava 2 2008200400
10. Write a JavaScript code to change the background
colour of page.
<html lang="en">

<head>

<meta charset="utf-8">

<title>Change the Background Color with JavaScript</title>

<script>

function changeBodyBg(color){

document.body.style.background = color;

</script>

</head>

<body>

<h1 id="heading">This is a heading</h1>

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

<hr>

<div>

<label>Change Webpage Background To:</label>

<button type="button" onclick="changeBodyBg('yellow');">Yellow</button>

<button type="button" onclick="changeBodyBg('green');">Green</button

<button type="button" onclick="changeBodyBg('pink');">Pink</button>

</div>

</body>

</html>

Priyanshi Srivastava 2 2008200400


Priyanshi Srivastava 2 2008200400
11. Write a JavaScript code to open new window with
some greeting message.
<html lang="en">

<head>

<script>

function newwindon() { window.open('D:\\New

folder\\4.html') }

</script>

</head>

<body>

<p>open new window button </p>

<input type="button" name="open window" value = "open window"

onclick="newwindon()">

</body>

</html>

Priyanshi Srivastava 2 2008200400


12. Design HTML form for keeping student record and validate
it using Java script.
<!DOCTYPE html>

<html>

<head>

<title>Reg Form</title>

</head>

<body>

<center><h1>Form Validation using JavaScript</h1></center>

<hr>

<form method="" action="" name="reg_form" onsubmit="return validate()">

<h2>Registration Form</h2>

<table>

<tr>

<td><label>First Name: </label></td>

<td>

<input type="text" name="fname" placeholder="First

Name">

</td>

</tr>

<tr>

<td><label>Last Name: </label></td>

<td>

<input type="text" name="lname" placeholder="Last

Name">

</td>

</tr>

<tr>

Priyanshi Srivastava 2 2008200400


<td><label>Address: </label></td>

<td>

<input type="textarea" size="50" name="address" placeholder="Address">

</td>

</tr>

<tr>

<td><label>Gender: </label></td>

<td>

<input type="radio" name="gender" value="male">Male

<input type="radio" name="gender" value="female">Female

</td>

</tr>

<tr>

<td><label>Email Id: </label></td>

<td>

<input type="text" name="email" placeholder="[email protected]">

</td>

</tr>

<tr>

<td><label>Mobile: </label></td>

<td>

<input type="number" name="mobile">

</td>

</tr>

<tr>

<td><label>Course: </label></td>

<td>

<select name="course">

<option value="select course">select course</option>

Priyanshi Srivastava 2 2008200400


<option value="BCA">BCA</option>

<option value="BSC">BSC</option>

<option value="MCA">MCA</option>

<option value="BCOM">BCOM</option>

</select>

</td>

</tr>

<tr>

<td>

<input type="submit" name="submit" value="Submit">

<input type="reset" name="reset" value="Reset">

</td>

</tr>

</table>

</form>

</body>

</html>

Priyanshi Srivastava 3 2008200400


13. Write a javascript program to get the coordinates from an
image.
<!DOCTYPE html>

<html>

<body>

<h2>Image Maps</h2>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and

read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"

height="379">

<map name="workmap">

<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">

<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">

</map>

</body>

</html>

Priyanshi Srivastava 3 2008200400


14. Write a program to design an xml file to store five students
detail.
<?xml version="1.0"?>

<student>

<record_1>

<roll_no> 101 </roll_no>

<firstname>kavita</firstname>

<lastname>nayal</lastname>

</record_1>

<record_2>

<roll_no> 102 </roll_no>

<firstname>janhavi</firstname>

<lastname>srivastava</lastname>

</record_2>

<record_3>

<roll_no> 103 </roll_no>

<firstname>jasmine</firstname>

<lastname>siddiqui</lastname>

</record_3>

<record_4>

<roll_no> 104 </roll_no>

<firstname>priya</firstname>

<lastname>negi</lastname>

</record_4>

</student>

Priyanshi Srivastava 3 2008200400


15. Write a program in asp to print student data entered in the
form.
<!DOCTYPE html>

<html>

<head>

<title>Student Form</title>

</head>

<body>

<form method = "post" action = "">

<fieldset>

<legend>Add Student</legend>

<div>

<label for = "StudentName">Student Name: </label>

<input type = "text" name = "StudentName" value = "" />

</div>

<div>

<label for = "UniName">University Name:</label>

<input type = "text" name = "UniName" value = "" />

</div>

<div>

<label for = "Address">Res. Address:</label>

<input type = "text" name = "Address" value = "" />

</div>

<div>

<label> </label>

<input type = "submit" value = "Submit" class = "submit" />

</div>

</fieldset>

Priyanshi Srivastava 3 2008200400


</form>

</body>

</html>

OUTPUT: -

Priyanshi Srivastava 3 2008200400

You might also like