WT File

MAHARISHI DAYANAND
UNIVERSITY
DELHI GLOBAL INSTITUTE OF

TECHNOLOGY
WEB TECHNOLOGY-LAB
PRACTICAL FILE(session 2019-2023)
SUBJECT CODE: LC-CSE-216G
Submitted By: ANJALI

Enrolment No: 191380197
WEB TECHNOLOGIES-FILE LC-CSE-216G
1
Index
Web technology file
Sr.no. content Page no.
HTML
01. Create a HTML file for displaying a webpage
with following Tags.
02. Design a Web Site with the name as HTML
tutorial with following specifications
03. Design a Web Page of your CV with headings
04. Create a nested list as follows:
05. Design tables as follows:
06. Design following HTML form
07. Design following frame
CSS
08. Inline text
09. Embed an image
10. External background solid color
2
HTML
3
Date of Experiment: 24-05-2021 Experiment No : 01
Faculty Signature………. Roll No:191380197
AIM: Create a HTML file for displaying a webpage with following
Tags. The file should contain a brief description about all these
tags:
1. Bold 7. Headings
2. Italics 8. HR
3. Underline 9. Background
4. Alignment 10. Line Break
5. Paragraph 11. Pre
6. Text color
CODING:
<html>
<head>
<title>Ques1_rno_003</title>
</head>
<body bgcolor=turquoise>
<b>BOLD:-This tag change the text in Bold form.</b><br>
<i>ITALICS:-This tag change the text in Italic form.</i><br>
<u>UNDERLINE:-This tag is used to underline the text.</u><br>
ALIGNMENT:There are three options to align the text: left,right,center.For
example:
<h2 align="center">QUES 1</h2>
PARAGRAPH:If we want to align paragraphs,we can mark the beginning and the
end of a paragraph by "p and /p" in angular braces. For example:
<p>The text will show in paragraph.</p>
4
<p>We can align a paragraph left,right or center</p>
<font face="algerian" size=2 font color="yellow">Text Color: This tag is used to
change the color of the text.<br></font>
We can print HEADINGS using any one of the six tag H1,H2,H3,H4,H5,H6 in
angular braces.
<h1>Heading 1</h1> <h2>Heading 2</h2>
<hr color=red>HR tag is used to provide a line wherever you want.<hr color=red>
BACKGROUND COLOR:- BG tag in angular braces is used to provide background
color.
<br>LINE BREAK:- BR tag in angular braces is used to break the line.</br>
PRE tag is used when you want to show the text in specific manner.
<pre><i>
<u>Created By: Laksh Pasricha</u>
<u>R_no: 00324402013</u>
<u>Class: MBA(E) 4 sem</u>
</pre></i>
OUTPUT :
5
Date of Experiment: 24-05-2021 Experiment No: 02
AIM: Design a Web Site with the name as HTML tutorial with
following specifications:
Make following hyperlinks (i.e. 5 different web pages):
Formatting Styles and Headings: Include Bold, italics, Underline,
Strike, Subscript, superscript and all six type of headings
Font Styles and Images: Font and Basefont tag, Image tag
Anchor: Internal (linking within page) and External (linking with
other documents) links
Marquee: Move text, image and hyperlink
Other tags: br, hr, pre, p
Include following specifications:
 In all these web pages only mention about use, attributes

apply them.
 Insert a background image on home page
 Make all the topics as hyperlinks and go to some other page
for description
6
 Insert a marquee showing HTML Tutorial as moving text.
 Use different font style for different topics
 On every page, make a hyperlink for going back to home
page.
7
CODING:
<html>
<head>
<title>ques 2 064</title>
</head>
<body background="11.jpg">
<marquee>HTML TUTORIAL</marquee>
<font style="Monotype Corsiva"size="6" color="white"><a
href="a.html">1.Formatting Styles and Headings</a><br>
<a href="b.html">2.Font Styles and Images</a><br>
<a href="c.html">3.Anchor</a><br>
<a href="d.html">4.Marquee</a><br>
<a href="e.html">5.Other tags</a>
</font>
</body>
</html>
OUTPUT :
8
Faculty Signature: ………. Roll No: 191380197
AIM: Design a Web Page of your CV with headings as Objective,
educational qualification, achievements, strengths, hobbies and
personal details.
Apply following specifications:
 Insert a horizontal line after every above mentioned heading

(Eg. Insert horizontal line once objectives are complete)
 Set any light color as page background.
 Bold and underline every heading
 Insert your image on left side of web page
 Use heading tag to specify the headings
 After every heading is over put a horizontal line
 Use pre tag for Educational Qualification
 Use Base font tag for all the text
CODING:
<html>
<head>
<title>"C.V"</title>
<basefont="Brush Script MT" size=7 color="Black">
<font face="times new roman" color="black" size=7>
<u><b><h4 align="center">INTRODUCTION</h1></b></u>
9
</head>
<body>
<img src="E:\DESKTOp\wallpapers\Media\WhatsApp
Images\IMG-20140422-WA0039.jpg" height=350 width=500
border=3 align="left">
<pre><body bgcolor="red">
<hr size=2 width=5500 color="blue">
Name: Laksh Pasricha
Adress: Block-15,House no.60
Geeta Colony,Delhi-31
Mobile no.:8447909941
Email_id:lakshpasricha08@gmail.com</pre>
<b><u><h4>Objectives:</h4></b></u>
To work in a challenging environment so that I can utilize my
full potential, this would benefit me.<br>
<b><u><h4>Qualification:</h4></b></u>
<pre><b>
Particulars Board year of passing
Percentage</b>
10
12<sup>th</sup> C.B.S.E 2012
84
10<sup>th</sup> C.B.S.E 2010
54</pre>
<b><u><h4>Hobbies:</h4></b></u>
Playing games
Listening songs</font>
</body>
</html>
11
OUTPUT:
12
Faculty Signature: ………. Roll No:191380197
AIM: Create a nested list as follows:
Computer System
1. Input Devices
i. Keyboard
ii. Mouse
iii. Joystic
iv. Scanner
a. Flat Bed Scanner
b. Hand held Scanner
2. Output Devices
i. Monitor
a. LCD
b. CRT
ii. Printer
a. Impact Printer
b. Non Impact Printer
13
Apply following parts:
 Insert an image of computer on top right corner of

web page
 Display a marquee displaying “Input and Output
Devices”
 Use different font styles and colors for Input and
Output Devices
 Insert horizontal line after Input Devices are over
 Use bold, italics and underline in headings
14
CODING:
<html>
<head>
<title>Q5_rno_003</title>
<body><h3 align = center><b><i><u> COMPUTER
SYSTEM</b></i></u></h1>
<p><img src = "C:\Users\Hina
Sharma\Desktop\pix\ComputerSpecial.jpg" align="right"
height=100 width=100 border=3>
</p>
<ol type = 1>
<font face="Algerian" color="red">
<marquee><u> "INPUT AND OUTPUT DEVICES" </u></marquee>
<li><u>INPUT DEVICES</u></li></font>
<ol type = i>
<li>Keyboard</li>
<li>Mouse</li>
<li>Joystick</li>
<li>Scanner</li>
<ol type = a>
<li> flatbed scanner</li>
<li> hand held</li>
15
</ol>
</ol>
<hr>
<font face="times new roman" color="red">
<li><u>OUTPUT DEVICES</u></li></font>
<ol type = i>
<li> Monitor</li>
<ol type = a>
<li> LCD</li>
<li> CRT<li>
</ol>
<li>Printer</li>
<ol type = a>
<li> Impact printer</li>
<li> Non-impact printer</li>
</ol>
</ol>
</body>
</html>
16
OUTPUT:
17
Date of Experiment: 01/06/2021 Experiment No: 05
Faculty Signature: Roll No:191380197
AIM: Design tables as follows:

Roll no Name Course Marks
1 Ajay Kumar BBA 78
2 Kavita BCA 62
Sharma
3 Rohit Garg BBA CAM 87
4 Pooja BBA 67
Kapoor
5 Mohit Gupta BBA CAM 72
CODING:
<html>
<head>
<title>Q7_rno_003 </title>
</head>
<body>
<table border=5 align="Center" Cellspacing="4" Cellpadding="6">
<tr>
18
<th>roll no</th>
<th>name</th>
<th>course</th>
<th>marks</th>
</tr>
<tr>
<td>1</td>
<td>Ajay Kumar</td>
<td>BBA</td>
<td>78</td>
</tr>
<tr>
<td>2</td>
<td>Kavita Sharma</td>
<td>BCA</td>
<td>62</td>
</tr>
<tr>
<td>3</td>
<td>Rohit Garg</td>
<td>BBA CAM</td>
<td>87</td>
19
</tr>
<tr>
<td>4</td>
<td>Pooja Kapoor</td>
<td>BBA</td>
<td>67</td>
</tr>
<tr>
<td>5</td>
<td>Mohit Gupta</td>
<td>BBA CAM</td>
<td>72</td>
</tr>
</table>
</body>
</html>
20
OUTPUT:
21
AIM: Design following HTML form:
CODING:
<html>
<head>
<title>ques 13 003</title>
22
</head>
<body>
<h2 align="center"><u>Employee Form</u></h2>
<form>
<pre>
Name <input type="text" name="n1">
Designation <select name="des">
<option>Select Any Option</option>
<option>Manager</option>
<option>Department Head</option>
<option>Engineer</option>
<option>Clerk</option>
</select>
Salary <input type="password" name="pwd">
Specification <input type="radio" name="r1" value="IT">IT
<input type="radio" name="r1"
value="Management">Management
23
Hobbies <input type="checkbox" name="c1"
value="Travelling">Travelling <input type="checkbox" name="c1"
value="Sports">Sports
<input type="checkbox" name="c1" value="Reading">Reading
<input type="checkbox" name="c1" value="Net surfing">Net
surfing
Address
<textarea name="a1" rows=5 cols=20>
</textarea>
<input type="submit" value="submit"> <input type="reset"
value="reset">
</form>
</body>
</html>
24
OUTPUT:
25
Date of Experiment : 02/06/2021 Experiment No: 07
AIM: Design following frame:
PRODUCTS
Mobile Phone Shoes
Pen Drive Shirt
Description (Product code, Name,

Image Brand, Price, Color, Discount,
Offer/Scheme etc.)
Mobile phone, shoes, Pen drive, Shirt will be hyperlinks. If user
clicks on any item, its picture should be displayed in frame 2 and
details about the product in frame 3.
CODING:
Main:
<html>
<head>
<title>Ques10</title>
</head>
<frameset rows="50%,50%">
26
<frame src="frame1.html" name="f1">
<frameset cols="50%,50%">
<frame name="f2">
<frame name="f3">
</frameset>
</frameset>
</html>
Product:
<html>
<head>
<title>frame1</title>
</head>
<body>
<h3 align="center">PRODUCTS</h3>
<pre>
<a href="mobile.html" target="f1">Mobile Phone</a> <a
href="shoes.html" target="f1">Shoes</a> <a href="pd.html"
target="f1">Pen Drive</a> <a href="shirt.html"
target="f1">Shirt</a>
</pre>
</body>
27
</html>
Mobile Phones:
<html>
<head>
<title>Mobile Phones</title>
<body>
<a href="d1.html" target="f3"><img src="untitled.png"
target="f2" height=300 width=300></a>
</head>
</html>
Shoes:
<html>
<head>
<title>Shoes</title>
<body>
<a href="d2.html" target="f3"><img src="dd.png" target="f2"
height=300 width=300></a>
</head>
</html>
28
Pen drive:
<html>
<head>
<title>Pen drive</title>
<body>
<a href="d3.html" target="f3"><img src="as.png" target="f2"
</head>
</html>
Shirts:
<html>
<head>
<title>shirts</title>
<body>
<a href="d4.html" target="f3"><img src="fds.png" target="f2"
</head>
</html>
29
OUTPUT:
30
CASCADING
STYLE SHEET
31
Date of Experiment: 24-05-2021 Experiment No : 08
32
AIM: Inline text
<html>
<body>
<p style="background: blue; color: white; font-size: 20pt; ">
Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation semantics (the look and formatting)
of a document written in a markup language.
In simpler words, Cascading Style Sheets (CSS) is a simple
mechanism for adding style (e.g., fonts, colors, spacing) to Web
documents.
It is designed primarily to enable the separation of document
content (written in HTML or a similar markup language) from
document presentation, including elements such as the layout,
colors, and fonts
</p>
<h1 style="color:red; text-align:right; "> Heading style 1 </h1>
</body>
33
</html>
34
AIM: Embed an image
<html>
<head>
<style type="text/css">
hr {color:red;}
p {margin-left:20px;}
body {background-image:url("C:\Users\Public\Pictures\Sample
Pictures\Tulips.jpg");}
</style>
35
<body>
<p>Cascading Style Sheets (CSS) is a style sheet language used
for describing the presentation semantics (the look and
formatting)
</p>
<hr>
</body>
</html>
36
AIM: External background solid color
37
Notepad 1
p {margin-left:20px;}
body {background-color:red;}
hr {color:blue;}
Notepad 2
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p> hello</p>
<hr>
</body>
</html>
38
0
39
Faculty Signature: ………. Roll No:191380197
AIM: Embed and resize image
<html>
<head>
body
{background-image:url("C:\Users\Public\Pictures\Sample
Pictures\Tulips.jpg");
background-repeat: no-repeat; background-position:center;}
</style>
<body>
Cascading Style Sheets (CSS) is a style sheet language used
formatting)
</body>
40
</html>
41
Faculty Signature: Roll No: 191380197
AIM: Change font and size
<html>
<head>
p{font-size:40px;font-style:normal;font-weight:bold}
</style>
<body>
<p style="font-family:Comic Sans MS;">
formatting)
</p>
</body>
42
</html>
43
AIM: Change font color and size
<html>
<head>
<style>
#para1
{text-align:center;color:green;font-size:50;font-family:times;}
.a
{text-align:right;color:red;font-size:30;font-family:times;}
</style>
</head>
<body>
<p id="para1">Cascading Style Sheets (CSS) is a style sheet
language used
formatting)
</p>
<p class="a">Cascading Style Sheets (CSS) is a style sheet
language used
44
formatting)
</p>
</body>
</html>
45
Date of Experiment : 02/06/2021 Experiment No: 14
AIM: Change font color, font background and size
<html>
<head>
hr {color:red;}
h1,p {background-color:yellow;color:blue;}
</style>
<body>
<h1>Cascading Style Sheet</h1>
<p>
formatting)
46
</p>
<hr>
</body>
</html>
47
XML
48
AIM: Create a XML file containing note as the root element and
to, from, subject and body as its child element.
Input
<?xml version ="1.0"?>
<note>
<to>A</to>
<from>B</from>
<subject lang="eng">Web Technology</subject>
<body> Use of XML </body>
</note>
Output
49
AIM: Create a valid XML document containing the tags
mentioned in the 1st question (use internal DTD).
Input
<?xml version="1.0"?>
<!DOCTYPE note[
<!ELEMENT note(to,from,heading,body)>
<!ELEMENT to(#PCDATA)>
<!ELEMENT from(#PCDATA)>
50
<!ELEMENT heading(#PCDATA)>
<!ELEMENT body(#PCDATA)>
]>
<note>
<to>A</to><br>
<from>B</from><br>
<heading>Remainder</heading><br>
<body>My name is Aman Batra</body>
</note>
Output
51
52
AIM: Create a well formed XML file having 5 tags- food_menu ,
food, name, price and calories .Food_menu is the main parent
element that contains food as the child element. Food is the
parent element of name, price and calories.
Input
<?xml version ="1.0"?>
<food_menu>
<food> <b> <u>Deserts </u> </b> <br>
<Deserts>
<name>Choclate Fantancy</name>
   <price>Rs.100</price>
   <calories>150K</calories>
</Deserts>
<Des><br>
<name>Hot Choclate</name>
53
</Des>
</food><br>
<Food1> <b> <u> Italian </u> </b> </br>
<itl>
<name>Pizza</name>
</itl>
<mak><br>
<name>Pasta</name>
</mak>
</food_menu>
54
Output
55
AIM: Create a valid XML document containing employee as the
root tag and empname, empno, salary, department as its child
tags. Use external DTD to implement it.
Input
<!DOCTYPE employee[
<!ELEMENT employee(emp_no,salary,department)>
<!ELEMENT emp_no(#PCDATA)>
<!ELEMENT salary(#PCDATA)>
<!ELEMENT department(#PCDATA)>
]>
<?xml version="1.0"?>
<!DOCTYPE note SYSTEM "file2.dtd"
<employee>
<emp_no>Emp_no: 40</emp_no><br>
<salary>Salary: 80000</salary><br>
56
<department>Department: IT</department><br>
<emp_no>Emp_no: 45</emp_no><br>
<salary>Salary: 75000</salary><br>
<department>Department: Manager</department><br>
</employee>
57
Output
58

WT File

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT File

Uploaded by

Copyright:

Available Formats

MAHARISHI DAYANAND

DELHI GLOBAL INSTITUTE OF

Submitted By: ANJALI

Sr.no. content Page no.

01. Create a HTML file for displaying a webpage

with following Tags.

02. Design a Web Site with the name as HTML

tutorial with following specifications

03. Design a Web Page of your CV with headings

04. Create a nested list as follows:

05. Design tables as follows:

06. Design following HTML form

07. Design following frame

08. Inline text

09. Embed an image

10. External background solid color

WEB TECHNOLOGIES-FILE LC-CSE-216G

WEB TECHNOLOGIES-FILE LC-CSE-216G

Faculty Signature………. Roll No:191380197

AIM: Create a HTML file for displaying a webpage with following

WEB TECHNOLOGIES-FILE LC-CSE-216G

Faculty Signature………. Roll No:191380197

Make following hyperlinks (i.e. 5 different web pages):

Formatting Styles and Headings: Include Bold, italics, Underline,

Strike, Subscript, superscript and all six type of headings

Anchor: Internal (linking within page) and External (linking with

other documents) links

Marquee: Move text, image and hyperlink

Other tags: br, hr, pre, p

Include following specifications:

 In all these web pages only mention about use, attributes

WEB TECHNOLOGIES-FILE LC-CSE-216G

WEB TECHNOLOGIES-FILE LC-CSE-216G

WEB TECHNOLOGIES-FILE LC-CSE-216G

Faculty Signature: ………. Roll No: 191380197

AIM: Design a Web Page of your CV with headings as Objective,

educational qualification, achievements, strengths, hobbies and

Apply following specifications:

 Insert a horizontal line after every above mentioned heading

<basefont="Brush Script MT" size=7 color="Black">

<font face="times new roman" color="black" size=7>

WEB TECHNOLOGIES-FILE LC-CSE-216G

Images\IMG-20140422-WA0039.jpg" height=350 width=500

<hr size=2 width=5500 color="blue">

Name: Laksh Pasricha

Adress: Block-15,House no.60

<hr size=2 width=5500 color="blue">

To work in a challenging environment so that I can utilize my

full potential, this would benefit me.<br>

<hr size=2 width=5500 color="blue">

Particulars Board year of passing

WEB TECHNOLOGIES-FILE LC-CSE-216G

10<sup>th</sup> C.B.S.E 2010

<hr size=2 width=5500 color="blue">

<hr size=2 width=5500 color="blue">

WEB TECHNOLOGIES-FILE LC-CSE-216G

WEB TECHNOLOGIES-FILE LC-CSE-216G

Faculty Signature: ………. Roll No:191380197

AIM: Create a nested list as follows:

a. Flat Bed Scanner

b. Hand held Scanner

b. Non Impact Printer

WEB TECHNOLOGIES-FILE LC-CSE-216G