Scribd
Upload
50 views

Web Design

This document is an HTML resume for Ashish Gupta. It contains personal details, educational qualifications, technical skills, projects completed, achievements and a career objective. The resume is formatted using tables for layout. Programs completed include an online store using React and Node and a note keeping app using HTML, CSS and JavaScript. Achievements include selection in a national competition and winning first prize in a university quiz. The resume is submitted to the Assistant Professor for a Web Design lab course.

Uploaded by

Enlight
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
50 views

Web Design

This document is an HTML resume for Ashish Gupta. It contains personal details, educational qualifications, technical skills, projects completed, achievements and a career objective. The resume is formatted using tables for layout. Programs completed include an online store using React and Node and a note keeping app using HTML, CSS and JavaScript. Achievements include selection in a national competition and winning first prize in a university quiz. The resume is submitted to the Assistant Professor for a Web Design lab course.

Uploaded by

Enlight
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/ 25

UNIVERSITY OF LUCKNOW

Faculty Of Engineering And Technology


Semester : 2023-2024

Bachelors Of Computer Applications


Year : 3 Semester : 5

Subject : Web Design Lab


Subject CODE: 507 P

Submitted To : Submitted By:


Er.Neeraj Kumar Ashish gupta
Assistant Professor 2110014045063

1
INDEX
S no. Program Date Signature

1. HTML program to create resume preparation using tables.

2. HTML program for home page creation using frames.

3. HTML program for form creation.

4. Create a web page to embed an image map in a web page


using HTML.

5. Create a web page to get all the coordinates from an image


using javascript.

6. Create a web page with all types of Cascading Style


Sheets.

7.
Write HTML/Javascript to display your CV in
navigator,your institute website,Department website and
tutorial website for specific subject.

8. Design HTML form for keeping student record and


validate it using Javascript.
9. Writing program in XML for creation of DTD,which
specifies set of rules.
10. Create a style sheet in CSS/XSL & display the document in
browser.

2
Program 01
HTML program to create resume preparation using tables.

<! DOCTYPE html> <tr>


<html lang="en"> <td><table width="850" border="0"
class="bor">
<head>
<tr>
<meta charset="UTF-8">
<td height="60" colspan="2"><div
<meta name="viewport"
align="center"><strong>Ashish
content="width=device-width, initial-
gupta</strong>
scale=1.0">
</div></td>
<title>Resume</title>
</tr>
</head>
<tr>
<body>
<td width="48%">Email ID:
<style>
[email protected]</td>
body,td,th {
<td width="52%"><div
font-family: Arial, Helvetica, sans-serif; align="right">Contact: 90137-----
</div></td>
font-size: 12px;
</tr>
color: #000000;
<tr>
}
<td colspan="2"
body { bgcolor="#CCCCCC"><strong>CAREER
margin-left: 0px; OBJECTIVE</strong></td>

margin-top: 0px; </tr>

margin-right: 0px; <tr>

margin-bottom: 0px; <td colspan="2" style="text-


indent:30px;">Aim to become a software
} devloper and apply my knowledge
.pad to create new things and grow.Looking
{ for a firm which values my skills and give
oppurtunity for growth
padding-left:10px;
of both.</td>
}
</tr>
</style>
<tr>
<table width="850" border="0"
align="center">
3
<td colspan="2" <td><div align="center">2021</div></td>
bgcolor="#CCCCCC"><strong>EDUCAT
<td>91.3%</td>
IONAL PROFILE</strong></td>
</tr>
</tr>
<tr>
<tr>
<td>HIGHSCHOOL</td>
<td colspan="2"><table width="850"
border="1" bordercolor="#000000"> <td>CBSE</td>
<tr> <td><div align="left">MJRP
Academy</div></td>
<td><div
align="center"><strong>Course</strong>< <td><div align="center">2019</div></td>
/div></td>
<td>89.4%</td>
<td><div
</tr>
align="center"><strong>Board/University
</strong></div></td> </table></td>
<td><div </tr>
align="center"><strong>Educational
Institutation</strong></div></td> <tr>

<td><div align="center"><strong>Year of <td colspan="2"


pass</strong></div></td> bgcolor="#CCCCCC"><strong>TECHNI
CAL SKILLS</strong></td>
<td><p align="center"><strong>% of
Marks</strong></p></td> </tr>

</tr> <tr>

<tr> <td colspan="2"><table width="831"


border="0" align="center">
<td>DEGREE</td>
<tr>
<td>Lucknow University</td>
<ul>
<td><div align="left">Univeristy of
Lucknow</div></td> <td><li>Programming
Languages</li></td>
<td><div align="center">2024</div></td>
<td><strong>:</strong></td>
<td>85%</td>
<td>C,Java,JavaScript</td>
</tr>
</ul>
<tr>
</tr>
<td>INTERMEDIATE</td>
<tr>
<td>CBSE</td>
<ul>
<td><div align="left">MJRP
Academy</div></td> <td><li>Frameworks</li></td>

4
<td><strong>:</strong></td> <ul>
<td>React Js ,Bootstrap</td> <td width="831"><li>Done a project
<strong> &quot;"Online Store and Billing
</ul>
System"
</tr>
&quot;</strong> using React js and Node
<tr> Js</li></td>

<ul> </ul>

<td><li>Database</li></td> </tr>

<td><strong>:</strong></td> <tr>

<td>MongoDB, Mysql</td> <td></td>

</ul> </tr>

</tr> <tr>

</table></td> </tr>

</tr> </table></td>

<tr> </tr>

<td colspan="2" <tr>


bgcolor="#CCCCCC"><strong>PROJEC
<td height="17" colspan="2"
T EXPERIENCE</strong></td>
bgcolor="#FFFFFF"></td>
</tr>
</tr>
<tr>
</table></td>
<td height="1" colspan="2"
</tr>
bgcolor="#FFFFFF"><table width="829"
border="0" </table>
align="center"> <table width="800" border="0"
align="center">
<tr>
<tr>
<ul>
<td><table width="800" border="0">
<td width="831"><li>Done main-project
<strong> &quot;"KEEP NOTES" <tr>
&quot;</strong> using HTML ,CSS and <td colspan="3"
JavaScript</li></td> bgcolor="#CCCCCC"><strong>ACHIVE
MENTS</strong></td>
</ul>
</tr>
</tr>
<tr>
<tr>

5
<td height="2" colspan="2" <td colspan="2"
bgcolor="#FFFFFF"><table width="829" bgcolor="#FFFFFF"><table width="829"
border="0" border="0" align="center">
align="center"> <tr>
<tr> <ul>
<ul> <td width="513"><li>Creativity</li></td>
<td width="513"><li>Selected in Top 30 </ul>
of Samsung Solve For Tomorrow across
</tr>
India. </li></td>
<tr>
</ul>
<ul>
</tr>
<td><li>Adaptability</li></td>
<tr>
</ul>
<ul>
</tr>
<td><li>Bagged 1st prize in IT Quiz
copmpetition at Univeristy of <tr>
Lucknow</li></td>
<ul>
</ul>
<td><li>Self Motivation</li></td>
</tr>
</ul>
</table></td>
</tr>
</tr>
<tr>
<tr>
<ul>
<td colspan="2"><table width="829"
<td><li>Quick Learning to new
border="0" align="center">
things</li></td>
</table></td>
</ul>
</tr>
</tr>
</table></td>
</table></td>
</tr>
</tr>
<tr>
<tr>
<td colspan="2"
<td colspan="2"
bgcolor="#CCCCCC"><strong>STRENG
bgcolor="#CCCCCC"><strong>HOBBIE
HTS</strong></td>
S</strong></td>
</tr>
</tr>
<tr>
<tr>

6
<td colspan="2" </table></td>
bgcolor="#FFFFFF"><table width="829"
</tr>
border="0" align="center">
<tr>
<tr>
<td width="50%"
<ul>
bgcolor="#FFFFFF">Place:Lucknow</td>
<td width="513"><li>Playing
<td width="9%"
Chess</li></td>
bgcolor="#FFFFFF"><div
</ul> align="right">(Vinay)</div></td>
</tr> </tr>
<tr> <tr>
<ul> <td colspan="2"
bgcolor="#FFFFFF">Date:02/11/2023</td
<td><li>Watching Sci-fi and Thriller
>
Movies/Series</li></td>
</tr>
</ul>
</table></td>
</tr>
</tr>
</table></td>
</table>
</tr>
</body>
<tr>
</html>
<td colspan="2"
bgcolor="#FFFFFF"><table width="829"
border="0" align="center">

7
OUTPUT-

8
Program 02
HTML program for home page creation using frames.

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>
<head> <head>
<title>My Homepage</title> <title>Page 1</title>
</head> </head>
<body> <body>
<header> <h2>This is Page 1</h2>
<h1>Welcome to My <p>Welcome to Page 1 of my
Homepage</h1> website.</p>
</header> </body>
<nav> </html>
<ul> page2.html
<li><a href="page1.html" <!DOCTYPE html>
target="iframe">Page 1</a></li> <html>
<li><a href="page2.html" <head>
target="iframe">Page 2</a></li>
<title>Page 2</title>
</ul>
</head>
</nav>
<body>
<main>
<h2>This is Page 2</h2>
<iframe name="iframe"
src="page1.html" width="800" <p>Welcome to Page 2 of my
height="600"></iframe> website.</p>

</main> </body>

<footer> </html>

<p>&copy; 2023 My Homepage</p>


</footer>
</body>
</html>
page1.html

9
Output-

10
Program 03
HTML program for form creation.
<Html> <input type="radio" name="female"/>
<head> Female

<title> <input type="radio" name="other"/>


Other
Registration Page
<br> <br>
</title>
<label>
</head>
Phone :
<body>
</label>
<br>
<input type="text" name="country
<br> code" value="+91" size="2"/>
<h2>Student Registration Form </h2> <input type="text" name="phone"
<form> size="10"/> <br> <br>
<label> Name </label> Address
<input type="text" name="firstname" <br>
size="25" placeholder="vinay"/> <br> <textarea cols="40" rows="3"
<br> value="address">
<label> </textarea>
Course : <br> <br>
</label> Email:
<select> <input type="email" id="email"
<option name="email"
value="Course">Course</option> placeholder="[email protected]"/>
<option value="BCA">BCA</option> <br> <br>
<option value="BBA">BBA</option> Password:
<option <input type="Password" id="pass"
value="B.Tech">B.Tech</option> name="pass">
</select> <br> <br>
<br><br> Re-type password:
<label> <input type="Password" id="repass"
Gender : name="repass"> <br> <br>

</label> <input type="button" value="Submit"/>

<input type="radio" name="male"/> </form>


Male </body>
</html>

11
Output

12
Program 04
Create a web page to embed an image map using HTML.

<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<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="Coffee" href="coffee.htm">
</map></body>
</html>

Output –

13
Program 05
Create a web page to get the coordinates from an image using JavaScript.

<!DOCTYPE html> <img id="image" src="i.jfif" alt="Your


<html> Image" style="width: 500px;">

<head> <div id="coordinates"></div>

<title>Image Coordinate Finder</title> </div>

<style> <script>

#image-container { const image =


document.getElementById('image');
position: relative;
const coordinatesDisplay =
} document.getElementById('coordinates');
#image { image.addEventListener('click', (event)
max-width: 100%; => {
} const x = event.offsetX;
#coordinates { const y = event.offsetY;
position: absolute; displayCoordinates(x, y);
background-color: rgba(255, 255, 255, });
0.7); function displayCoordinates(x, y) {
padding: 5px; coordinatesDisplay.innerHTML = `X:
} ${x}, Y: ${y}`;
</style> coordinatesDisplay.style.left = x + 'px';
</head> coordinatesDisplay.style.top = y + 'px';
<body> }
<h1>Click on the image to get </script>
coordinates</h1> </body>
<div id="image-container"> </html

Output –

14
Program 06
Create a web page with all types of cascading style sheets .
<!DOCTYPE html> width: 100px;
<html lang="en"> height: 100px;
<head> background-color: #28a745;
<meta charset="UTF-8"> margin: 10px;
<meta name="viewport" display: inline-block;
content="width=device-width, initial- }
scale=1.0">
<title>CSS Showcase</title>
#special-text {
font-weight: bold;
<!-- Internal Styles -->
color: #d9534f;
<style>
}
body {
</style>
font-family: Arial, sans-serif;
</head>
background-color: #f5f5f5;
<body>
color: #333;
}
<!-- Inline Styles -->
<header style="font-size: 24px;">Inline
header { Styles</header>
text-align: center;
padding: 20px; <section style="border: 2px solid
background-color: #007bff; #007bff; padding: 15px;">
color: white; <p>This is a paragraph with inline
} styles.</p>
<div style="width: 150px; height:
150px; background-color:
section { #ffcc00;"></div>
margin: 20px; </section>
padding: 20px;
border: 1px solid #ccc; <!-- Internal Styles -->
border-radius: 5px; <header>Internal Styles</header>
background-color: #fff;
} <section>
<p>This is a paragraph with internal
.box { styles.</p>

15
<div class="box"></div> <section>
<div class="box"></div> <p>This is a paragraph with external
<div class="box"></div> styles.</p>

</section> <div id="special-text">Special


Text</div>
</section>
<!-- External Styles -->
<link rel="stylesheet" href="styles.css">
</body>
</html>
<header>External Styles</header>

Output –

16
Program 07
Write HTML/JavaScript to display your CV in navigator, your institute
website, department website and tutorial website for specific subject.

<!DOCTYPE html> if (cvContent.style.display === 'none' ||


<html> cvContent.style.display === '') {

<head> cvContent.style.display = 'block';

<title>My Personal Page</title> cvLink.textContent = 'Hide CV';

</head> } else {

<body> cvContent.style.display = 'none';

<h1>Welcome to My Personal Page</h1> cvLink.textContent = 'View CV';

<h2>My CV</h2> }

<a href="#" id="cv-link">View CV</a> });

<div id="cv-content" style="display: </script>


none;"> </body>
<p>Name: Your Name</p> </html>
<p>Email:
[email protected]</p>
<p>Education: Your Education</p>
<p>Experience: Your Experience</p>
</div>
<h2>My Institute</h2>
<a
href="https://www.yourinstitutewebsite.com"
target="_blank">Visit Institute</a>
<h2>My Department</h2>
<a
href="https://www.yourdepartmentwebsite.co
m" target="_blank">Visit Department</a>
<h2>Tutorial for a Specific Subject</h2>
<a href="https://www.tutorialwebsite.com"
target="_blank">View Tutorial</a>
<script>
const cvLink =
document.getElementById('cv-link');
const cvContent =
document.getElementById('cv-content');
cvLink.addEventListener('click',
function() {

17
OUTPUT-

18
Program 08
Design HTML form for keeping student record and validate using
JavaScript.

<!DOCTYPE html> <option value="">Select a


<html> course</option>

<head> <option
value="Math">Math</option>
<title>Student Record Form</title>
<option
<style> value="Science">Science</option>
.error { <option
color: red; value="History">History</option>
} <option
</style> value="English">English</option>

</head> </select>

<body> <span id="courseError"


class="error"></span><br><br>
<h1>Student Record Form</h1>
<input type="submit"
<form id="studentForm" value="Submit">
onsubmit="return validateForm()">
</form>
<label for="name">Name:</label>
<script>
<input type="text" id="name"
name="name" required> function validateForm() {

<span id="nameError" const name =


class="error"></span><br><br> document.getElementById("name").value;

<label for="roll">Roll const roll =


Number:</label> document.getElementById("roll").value;

<input type="text" id="roll" const email =


name="roll" required> document.getElementById("email").value;

<span id="rollError" const course =


class="error"></span><br><br> document.getElementById("course").value
;
<label for="email">Email:</label>
const nameError =
<input type="email" id="email" document.getElementById("nameError");
name="email" required>
const rollError =
<span id="emailError" document.getElementById("rollError");
class="error"></span><br><br>
const emailError =
<label for="course">Course:</label> document.getElementById("emailError");
<select id="course" name="course" const courseError =
required> document.getElementById("courseError");

19
let isValid = true; isValid = false;
nameError.textContent = ""; } else if (!isValidEmail(email)) {
rollError.textContent = ""; emailError.textContent =
emailError.textContent = ""; "Invalid email format.";

courseError.textContent = ""; isValid = false;

if (!name) { }

nameError.textContent = "Name if (course === "") {


is required."; courseError.textContent =
isValid = false; "Please select a course.";

} isValid = false;

if (!roll) { }

rollError.textContent = "Roll return isValid;


Number is required."; }
isValid = false; function isValidEmail(email) {
} else if (isNaN(roll)) { const emailRegex =
rollError.textContent = "Roll /^\S+@\S+\.\S+$/;
Number must be a number."; return emailRegex.test(email);
isValid = false; }
} </script>
if (!email) { </body>
emailError.textContent = "Email </html>
is required.";

20
Output :

21
Program 09
Writing program in XML for creation of DTD, which specifies set of rules.

A Document Type Definition (DTD) in XML is used to specify a set of rules that define the structure
and content of an XML document. Here's an example of a simple DTD for an XML document that
describes a list of books:

<!DOCTYPE library [ <book ISBN="978-1234567890">


<!ELEMENT library (book+)> <title>Sample Book</title>
<!ELEMENT book (title, author, <author>John Doe</author>
publication_date, price)> <publication_date
<!ELEMENT title (#PCDATA)> format="hardcover">2023-01-
<!ELEMENT author (#PCDATA)> 01</publication_date>

<!ELEMENT publication_date <price currency="USD">29.99</price>


(#PCDATA)> </book>
<!ELEMENT price (#PCDATA)> <book ISBN="978-0987654321">
<!ATTLIST book ISBN CDATA <title>Another Book</title>
#REQUIRED> <author>Jane Smith</author>
<!ATTLIST publication_date format <publication_date
(paperback|hardcover|ebook) "paperback"> format="paperback">2023-02-
<!ATTLIST price currency (USD|EUR) 15</publication_date>
"USD"> <price currency="EUR">19.99</price>
]> </book>
<library> </library>

In this example, we have created a DTD within the <!DOCTYPE> declaration. The DTD specifies the
following rules:
The root element is <library>, which contains one or more <book> elements.
Each <book> element must contain the following child elements: <title>, <author>,
<publication_date>, and <price>.
The content of <title>, <author>, <publication_date>, and <price> elements is defined as parsed
character data (#PCDATA), meaning they can contain text content.
The <!ATTLIST> declarations define attributes for the <book> and <publication_date> elements,
specifying the ISBN and format attributes for <book>, and the format and currency attributes for
<publication_date>. These attributes have default values if not provided.
The XML document below the DTD defines a sample library with two books, each following the
rules specified in the DTD.

22
Program 10
Create a style sheet in CSS/XSL & display the document in browser.
<!DOCTYPE html> xml.send(null);
<html> xsl.send(null);
<head> var xmlDoc = xml.responseXML;
<title>Library Catalog</title> var xslDoc = xsl.responseXML;
</head>
<body> xsltProcessor.importStylesheet(xslDoc);

<h1>Library Catalog</h1> var resultDocument =


xsltProcessor.transformToDocument(xmlDoc);
<iframe src="data.xml" style="display:
none;"></iframe>
document.body.appendChild(resultDocument.
<script> documentElement);
if (window.ActiveXObject || } else {
"ActiveXObject" in window) {
document.write("XSLT not supported
// Internet Explorer in this browser.");
var xml = new }
ActiveXObject("Msxml2.DOMDocument");
</script>
xml.async = false;
</body>
xml.load("data.xml");
</html>
var xslt = new
ActiveXObject("Msxml2.XSLTemplate"); style.css

var xslProc; body {

xslt.stylesheet = new font-family: Arial, sans-serif;


ActiveXObject("Msxml2.FreeThreadedDOM background-color: #f2f2f2;
Document"); margin: 20px;
xslt.stylesheet.load("style.xsl"); padding: 20px;
xslProc = xslt.createProcessor(); }
xslProc.input = xml; .book {
xslProc.transform(); background-color: #fff;
document.write(xslProc.output); border: 1px solid #ddd;
} else if (document.implementation && padding: 10px;
document.implementation.createDocument) {
margin: 10px;
// Modern browsers
border-radius: 5px;
var xsltProcessor = new
XSLTProcessor(); box-shadow: 2px 2px 5px #888888;

var xml = new XMLHttpRequest(); }

var xsl = new XMLHttpRequest(); h1 {

xml.open("GET", "data.xml", false); color: #333;

xsl.open("GET", "style.xsl", false); }

23
h2 { <xsl:stylesheet version="1.0"
color: #555; xmlns:xsl="http://www.w3.org/1999/XSL/Tra
nsform">
}
<xsl:template match="/">
p{
<html>
color: #777;
<head>
}
<link rel="stylesheet"
data.xml type="text/css" href="style.css" />
<?xml version="1.0" encoding="UTF-8"?> </head>
<library> <body>
<book> <xsl:apply-templates
<title>Sample Book</title> select="library/book" />
<author>John Doe</author> </body>
<publication_date>2023-01- </html>
01</publication_date> </xsl:template>
<price>29.99</price> <xsl:template match="book">
</book> <div class="book">
<book> <h2><xsl:value-of select="title"
<title>Another Book</title> /></h2>
<author>Jane Smith</author> <p>Author: <xsl:value-of
select="author" /></p>
<publication_date>2023-02-
15</publication_date> <p>Publication Date: <xsl:value-of
select="publication_date" /></p>
<price>19.99</price>
<p>Price: $<xsl:value-of
</book>
select="price" /></p>
</library>
</div>
style.xsl
</xsl:template>
<?xml version="1.0" encoding="UTF-8"?>
</xsl:stylesheet>

24
Output –

25

You might also like