Assignment

Date of experiment:24-05-2021 experiment no.
:01
Faculty signature………………………. Roll no.:02
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> ALIGNMENT:There are three options to
align the text: left, right,center. For example:
<i>ITALICS:-This tag change the text in Italic form.</i><br> <u>UNDERLINE:-This tag is used to
underline the text.</u><br>
<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> <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>
WEB TECHNOLOGIES-FILE
LC-CSE-216G
<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>
Date of experiment:24-05-2021 Experiment -02

Faculty signature:…………………….. Roll 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
 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.
<html>
<head>
<title>
HTML TUTORIAL
</title>
</head>
<body bgcolor="11.jpg">
<marquee>HTML TUTORIAL</marquee>
<a href = "a.html">1.Formatting Stylea 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>
<b><h1 align="center"></h1></b><br>
<i><h2 align="center"></h2></i><br>
<u><h3 align="center"></h3></u><br>
<p>This site contains different .There are different</p>
<hr color = red>
<font style = "Monotype Corsiva" size="6" color = "White">This is going to be live</font>
</body>
<pre><i>
<u>Created by :Anjali Mudhal</u>
<u>Dated :26/05/21</u>
</pre></i>
</html>
Date of experiment:25-05-2021 Experiment no.:03
Faculty signature:……………………….. Roll no.:02
AIM3: 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
<html>
<head>
<title>"C.V"</title>
<basefont = "Brush Script MT" size = 7 color = "Black">
<font face = "times new roman" color = "black" size = 7 color = "black">
<b><h4 align = "center">Introduction</h4></b>
</head>
<body>
<img src = "C:\Users\Anjali\OneDrive\Pictures\WIN_20191215_03_42_17_Pro_LI[1425].jpg" height =
100 width = 200 border = 3 align = "left">
<pre><b>H.No -1328,Sector-1</b>
<b>MB.no-9910889368</b>
<b>Emailid:[email protected]</b></pre>
<hr size = 2 width = 5500 color = "blue">
<b><u><h4>Objectives:</h4></b></u>
Engineer
<br><hr size = 2 width = 5500 color ="blue">
<b><u><h4>Qualification:</h4></b></u>
<pre><b>
Particular board year of passing Percentage</b>
12<sup>th</sup> C.B.S.E 2021 84
10<sup>th</sup> C.B.S.E 2010 54</pre>
<hr size = 2 width = 5500 color = "blue">
<b><u><h4>Hobbies:</h4></b></u>
Playing games
Listening songs</font>
<hr size =2 width = 5500 color = "blue">
</body>
</html>
Date of experiment:25-05-2021 Experiment No.:04

Faculty signature :……………………. Roll No.:
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
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
<html>
<title>Nested List </title>
<body><h3 align = center><b><i><u>Computer system</b></i></u></h3>
<img src = "C:\Users\Anjali\Downloads\pexels-anete-lusina-5240543.jpg" align = right height = 100
width = 100 border = 3 >
<ol type =1>
<font face = "Algorithm" color = "red">
<marquee>Input and output Devices</marquee>
<li><u>Input Devices</u></li></font>
<ol type = i>
<li>keyboard</li>
<li>Mouse</li>
<li>Lightpen</li>
<li>Scanner</li>
<ol type = a>
<li>Flathead</li>
<li>Handheld</li>
</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>
Date of Experiment : …………... Experiment No……….
Faculty Signature………. Roll
No.191380197
AIM: Design tables as follows:
Roll no Name Course Marks
1 Ajay Kumar BBA 78
2 Kavita Sharma BCA 62
3 Rohit Garg BBA CAM 87
4 Pooja Kapoor BBA 67
5 Mohit Gupta BBA CAM 72
<html>
<head>
<title>Q7_rno_003 </title>
</head>
<body>
<table border = 5 align = "Center" Cellspace="4" Cellpadding="6">
<tr>
<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>
</td>
<tr>
<td>4</td>
<td>Pooja Kapoor</td>
<td>BBA</td>
</tr>
<tr>
<td>5</td>
<td>Mohit Gupta</td>
<td>BBA CAM</td>
<td>72</td>
</tr>
</table>
</body>
</html>
Date of Experiment : ……01/06/2021……... Experiment

No………. 06
Faculty Signature………. Roll No.191380197
AIM: . . Design following HTML form:

CODING:
<html>
<head>
<title>ques 13 003</title>
</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
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>Netsurfing
Address <textarea name = "a1"row=5 cols=20>
</textarea>
<input type="submit"value="submit"> <input type="reset" value="reset">
</form>
</body>
</html>

Date of Experiment : …………... Experiment No……….
Faculty Signature………. Roll No.191380197
AIM: Design following frame:
PRODUCTS
Mobile Phone Shoes Pen Drive Shirt
Description (Product code, Name, Brand, Price,

Image 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%">
<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>
</html>
Mobile Phones:
<html>
<head>
<title>Mobile Phones</title>
<body>
<a href="d1.html" target="f3"><img src="https://pluspng.com/img-png/png-mobile-

phone-smartphone-cell-phone-mobile-phone-iphone-icon-1024.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="https://freepngimg.com/thumb/shoes/28530-3-nike-shoes-transparent.png"
target="f2" height=300 width=300></a>
</head>
</html>
Pen drive:
<html>
<head>
<title>Pen drive</title>
<body>
<a href="d3.html" target="f3"><img

src="https://www.allwhitebackground.com/images/1/Pen-Drive-6.png" target="f2"
height=300 width=300></a>
</head>
</html>
Shirts:
<html>
<head>
<title>shirts</title>
<body>
<a href="d4.html" target="f3"><img src="https://cdn.pngsumo.com/-clothing-png-

1200_1616.png" target="f2" height=300 width=300></a>
</head>
</html>
Output:
DATE OF EXPERIMENT:24-05-2021 EXPERIMENT NO.:08

FACULTY SIGNATURE:…………………. ROLL NO.:191380197
AIM:Inline text
CODING:
<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>
</html>
Date of experiment:25-05-2021 Experiment No.:
Embedded
<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>

<body>
<p>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.
</p>
<hr>
</body>
</html>

Assignment

Uploaded by

Copyright:

Available Formats

Assignment

Uploaded by

Document Information

Original Description:

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

Assignment

Uploaded by

Copyright:

Available Formats

Date of experiment:24-05-2021 experiment no.

<h2 align="center">QUES 1</h2>

<h1>Heading 1</h1> <h2>Heading 2</h2>

<u>Created By: Laksh Pasricha</u>

<u>Class: MBA(E) 4 sem</u>

Date of experiment:24-05-2021 Experiment -02

Include following specifications:

Date of experiment:25-05-2021 Experiment no.:03

Faculty signature:……………………….. Roll no.:02

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

Apply following specifications:

Date of experiment:25-05-2021 Experiment No.:04

AIM: Create a nested list as follows:

Date of Experiment : ……01/06/2021……... Experiment

Designation <select name = "des">

Hobbies <input type = "checkbox"name="c1"value ="Travelling">Travelling

Description (Product code, Name, Brand, Price,

<frame src="frame1.html" name="f1">

<a href="mobile.html" target="f1">Mobile Phone</a> <a href="shoes.html"

<a href="d1.html" target="f3"><img src="https://pluspng.com/img-png/png-mobile-

<a href="d2.html" target="f3"><img

<a href="d3.html" target="f3"><img

<a href="d4.html" target="f3"><img src="https://cdn.pngsumo.com/-clothing-png-

DATE OF EXPERIMENT:24-05-2021 EXPERIMENT NO.:08

<p style="background: blue; color: white; font-size: 20pt; ">

It is designed primarily to enable the separation of document content (written in

<h1 style="color:red; text-align:right; "> Heading style 1 </h1>

Date of experiment:25-05-2021 Experiment No.:

You might also like