Scribd
Upload
64 views

Sarthak - Srivastava - Web - Dev - LAB (Assignment 1)

This document contains an assignment submitted by a student named Sarthak Srivastava from the 20 ITB 19 branch. The assignment includes 5 questions related to HTML and web development. For each question, the student provides the code for an answer along with screenshots of the output. The questions cover topics like inserting different text formatting, headings, images, tables, and links in HTML documents.

Uploaded by

Sorabh Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
64 views

Sarthak - Srivastava - Web - Dev - LAB (Assignment 1)

This document contains an assignment submitted by a student named Sarthak Srivastava from the 20 ITB 19 branch. The assignment includes 5 questions related to HTML and web development. For each question, the student provides the code for an answer along with screenshots of the output. The questions cover topics like inserting different text formatting, headings, images, tables, and links in HTML documents.

Uploaded by

Sorabh Singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

WD_20ITB-19

Student Name: Sarthak Srivastava Branch: 20 ITB 19


UID: 20 BCS 5482 Subject Name: Introduction to
Date of Submission: 19/06/2021
Web Development

Assignment 1
Question 1: Create a webpage which should have Title as defined by
the user. it should display content in bold, italic, underlined and entire
content should be centre aligned. Include the link to www.google.com
also.

Answer 1:

PROGRAM CODE: -

<!--question 1-->
<!DOCTYPE html>
<html>
<head>
<title>Question 1</title>
</head>
<body align="center" bgcolor="#DFFF00">
<p>Video provides a powerful way to help you prove your point. When you click
Online Video, you can paste in the embed code for the video you want to add. You can
also type a keyword to search online for the video that best fits your
document.<br><br><br>
To make your document look professionally produced, Word provides header,
footer, cover page, and text box designs that complement each other. For example, you
can add a matching cover page, header, and sidebar. Click Insert and then choose the
elements you want from the different galleries.<br><br><br>
WD_20ITB-19
<b>Themes and styles also help keep your document coordinated.
When you click Design and choose a new Theme, the pictures, charts, and SmartArt
graphics change to match your new theme. When you apply styles, your headings change
to match the new theme.</b><br><br><br>
<i>Save time in Word with new buttons that show up where you need them. To
change the way a picture fits in your document, click it and a button for layout options
appears next to it. When you work on a table, click where you want to add a row or a
column, and then click the plus sign.</i><br><br><br>
<u>Reading is easier, too, in the new Reading view. You can collapse parts of the
document and focus on the text you want. If you need to stop reading before you reach
the end, Word remembers where you left off - even on another
device.</u><br><br><br>
</p>
<br>
<!--Google image contains link-->
<a href="http://google.com/search" align="center">
<img alt ="Google search"
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92
dp.png" width="500" height="200"><br><br>

<div class="topnav">
<input type="text" placeholder="Search..." size="50px">
</div>
</body>
</html>
WD_20ITB-19

OUTPUT: -
WD_20ITB-19

Question 2: -
Create a HTML Document in such a way that it should include the
tags like paragraph, h1 to h6 heading, break tag usage.

Answer: -
PROGRAM CODE: -

<!--question 2-->
<!DOCTYPE html>
<html>
<head>
<title>Question 2</Title>
</head>
<body bgcolor="#40E0D0">
<p style = "font-family:georgia,garamond,serif;font-size:16px;">
Themes and styles also help keep your document coordinated. When
you click Design and choose a new Theme, the pictures, charts, and
SmartArt graphics change to match your new theme. When you apply
styles, your headings change to match the new theme.<br><br>
Save time in Word with new buttons that show up where you need them.
To change the way a picture fits in your document, click it and a button
for layout options appears next to it. When you work on a table, click
where you want to add a row or a column, and then click the plus
sign.<br><br>

Reading is easier, too, in the new Reading view. You can collapse parts
of the document and focus on the text you want. If you need to stop
reading before you reach the end, Word remembers where you left off -
even on another device.<br><br>
WD_20ITB-19

</p>
<b>Different Heading Sizes:</b>
<h1>Heading size 1</h1><br>
<h2>Heading size 2</h2><br>
<h3>Heading size 3</h3><br>
<h4>Heading size 4</h4><br>
<h5>Heading size 5</h5><br>
<h6>Heading size 6</h6><br>
</body>
</html>

OUTPUT: -
WD_20ITB-19

Question 3: -
Create a webpage which should have an image as background
with width 400px and 500px dimensions. If the image could not
be loaded, it should display an alternate text which should
inform the user about the same.

Answer: -
PROGRAM CODE: -

<!--question 3-->
<!DOCTYPE html>
<html>
<head>
<title>Question 3</Title>
</head>
<body bgcolor="#FF7F50">
<center><h2>Scenery Image</h2>
<center><img src="https://thewallpaper.co/wp-
content/uploads/2020/08/beautiful-lake-amazing-landscape-organic-
plants-widescreen-nature-images-download-nature-wallpapers-green-
fresh-health-1504x846-1-1200x675.jpg"
height="400px" width="500px" alt="We're working to restore
all services as soon as possible. Please check back soon.">
<p>A <b>natual landscape</b> is the original landscape that
exists before it is acted upon by human culture.<br>
The natural landscape and the cultural landscape are separate
parts of the landscape.<br>
However, in the 21st century, landscapes that are totally
untouched by human activity no longer exist, <br>
so that reference is sometimes now made to degrees of
naturalness within a landscape.</p></center>
WD_20ITB-19
</body>
</html>

OUTPUTS: -
WD_20ITB-19

Question 4: -
Create a webpage using HTML Table tag in such a way it should
display Firstname, lastname, age, multiple telephone numbers of
the user. The table caption of the table should be User
Information which should be displayed at the Top of the table.
Try using rowspan and colspan feature of table.

Answer: -
PROGRAM CODE: -

<!--question 4-->
<!DOCTYPE html>
<html>
<head>
<title>Question 4</title>
</head>
<body bgcolor="#FFBF00">
<table border="12" cellspacing="5" align="center"
cellpadding="8"><center>
<h3><b>User Information</b></h3></center>

<tr>
<th>Sr. No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
WD_20ITB-19
<th>Contact Number</th>
</tr>
<tr>
<td>1.</td>
<td>John</td>
<td>Michael</td>
<td>23</td>
<td>9876543210, 9876543222</td>
</tr>
<tr>
<td>2.</td>
<td>Smith</td>
<td>Santner</td>
<td>25</td>
<td>9876543211, 9876543233</td>
</tr>
<tr>
<td>3.</td>
<td>Rhona</td>
<td>Steves</td>
<td>27</td>
<td>9876543212, 9876543244</td>
</tr>
<tr>
<td>4,</td>
WD_20ITB-19
<td>Klink</td>
<td>Williamson</td>
<td>32</td>

<td>9876543213, 9876543255</td>
</tr>
<tr>
<td>5.</td>
<td>Salena</td>
<td>Embryo</td>
<td>24</td>
<td>9876543214, 9876543277</td>
</tr>
</table>

</body>
</html>
WD_20ITB-19

OUTPUT: -
WD_20ITB-19

Question 5: -
Insert an image and create a link such that clicking on image
takes user to other page.

Answer: -
PROGRAM CODE: -

<!--Question 5-->
<!DOCTYPE html>
<html>
<head>
<title>Question 5</title>
</head>
<body bgcolor="Tropical Salad"><center>
<h3>The following image works as a link:</h3><br>

<a href="http://google.com/search">
<img alt="Google Search"
src="https://www.google.com/images/branding/googlelogo/2x/googlelo
go_color_272x92dp.png"
width="250" height="100">
</a>
<h3>Click on the above image to see the results</h3>
</center>
</body>
</html>
WD_20ITB-19

OUTPUT: -

-------------------------------------------THANK YOU---------------------------------------------

You might also like