Scribd
Upload
134 views11 pages

Internet and Web Technologies Lab Assignment 1 Parshva A Maniar 20BDS0058

This document contains Parshva Maniar's assignment for an Internet and Web Technologies lab. It includes code for: 1) An "aboutme.html" page with information about Parshva like name, address, classes, favorite movies/shows, and programming skills. 2) An HTML table with nested tables and images. 3) An HTML form with inputs like text, radio buttons, checkboxes to enter personal and course information. 4) An image map of India with clickable state areas linking to Wikipedia pages. 5) An HTML page linking an external CSS style sheet and using internal and inline styles.

Uploaded by

Parshva Maniar
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
134 views11 pages

Internet and Web Technologies Lab Assignment 1 Parshva A Maniar 20BDS0058

This document contains Parshva Maniar's assignment for an Internet and Web Technologies lab. It includes code for: 1) An "aboutme.html" page with information about Parshva like name, address, classes, favorite movies/shows, and programming skills. 2) An HTML table with nested tables and images. 3) An HTML form with inputs like text, radio buttons, checkboxes to enter personal and course information. 4) An image map of India with clickable state areas linking to Wikipedia pages. 5) An HTML page linking an external CSS style sheet and using internal and inline styles.

Uploaded by

Parshva Maniar
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/ 11

Internet and Web Technologies Lab Assignment 1

Parshva A Maniar
20BDS0058

Q1. Create a page aboutme.html that describes you.


Include information such as:
a) Your name in the top of the page in large text and your address in smaller text.
b) A description of you in <= 2 sentences. Emphasize important word(s) in bold.
c) A list of classes you are taking right now with a simple description of each with
interesting subjects in marvelous colors.
d) Your 3 favorite movies, books, or TV shows, in order. Make at least one link to an
interesting site about that TV show/movie/book.
e) Two images that represent you when you're happy and sad.
f) Describe your skill level in programming languages.
Ans 1.
Code:
<html>
<head>
<title>
About Me
</title>
</head>
<body>
<h1>Parshva Maniar</h1>
<p> Hi, I am <strong>Parshva Maniar</strong> and I reside in <strong>
South Mumbai </strong> and I am pursuing<strong>CSE with Data Science at VIT,
Vellore.</strong> My address is<strong> 12, Jain Bhuvan, 1st Floor, Bhajekar
Street, Mumbai-400004.</strong></p>
<h2>My classes this semester are as follows:</h2>
<ul>
<li style="color:blue;">IWP</li>
<li style="color: aqua;">NetCom</li>
<li style="color: aquamarine;">Java</li>
<li style="color: blueviolet;">Advanced C</li>
</ul>
<br>
<br>
<h3>My favourite movies are:</h3>
<ul>
<li>Titanic</li>
<li><a href="https://youtu.be/TmxYlA26Jr4" target="_blank"> Phir Hera
Pheri</a></li>
<li>De Dena Dhan</li>
</ul>
<h4>My moods:</h4>
<p>Happy:<img src="C:\Users\Parshva
Maniar\Desktop\2b115adb901249d9fd7957de21397905.jpg"alt ="Happy" title="When I Am
happy"></p>
<p>Sad: <img src="C:\Users\Parshva
Maniar\Desktop\32d61e55845f1cb1d78fdcea5eb7f331.jpg" alt='Sad'></p>
<h5>My Programming Skills:</h5>
<ol>
<li>C</li>
<li>C++</li>
<li>Python Basics</li>
<li>Learning Java</li>
</ol>

</body>
</html>

Output:
Q2.

Ans 2.
Code:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Header column 1</th>
<th>Header column 2</th>
<th>Header column 3</th>
<th>Header column 4</th>
</tr>
<tr>
<td>Row 2 - item 1</td>
<td>Row 2 - item 2</td>

<td rowspan="2">
Row 2: Nested table 1
<br />
<br />
<table>
<tr>
<th>Row Header 1</th>
<th>item</th>
</tr>
<tr>
<th>Row Header 1</th>
<th>item</th>
</tr>
<tr>
<th>Row Header 1</th>
<th>item</th>
</tr>
</table>
</td>
<td>
Row 2 - item 4 <br />
A second line
</td>
</tr>
<tr>
<td>
Row 3: Nested table 2
<br />
<br />
<table>
<tr>
<th>Row Header 1</th>
<th>item</th>
</tr>
<tr>
<th>Row Header 1</th>
<th>item</th>
</tr>
<tr>
<th>Row Header 1</th>
<th>item</th>
</tr>
</table>
</td>
<td>
<ul>
<li>VB.Net</li>
<li>CSharp</li>
<li>Asp.Net</li>
</ul>
</td>
<td rowspan="2"><img class="C" src="C:\Users\Parshva
Maniar\Desktop\Vp9WvV7YKdH4k8sKRePcE8-320-80.jpg" alt="" /></td>
</tr>
<tr>
<td>Row 4 - item 1</td>
<td>Row 4 - item 2</td>
<td>Row 4 - item 3</td>
</tr>
<tr>
<td colspan="4">Row 5 - Last row of outer table</td>
</tr>
</table>
<br />
<br />
</body>
</html>

Output:
Q3.

Ans 3.
Code:
<html>
<head>
<title>Personal Information</title>
<link rel="stylesheet" href="forms.css" />
</head>
<body>
<form action="" style="background-color: blue;">
<fieldset>
<legend>Personal Information</legend>
First Name<input name="name" type="text" size="20"><br>
Last Name<input name="name" type="text" size="30"><br>
</fieldset>
<fieldset>
<legend>Course Information</legend><br>
Course:<br>
Web Design <input type="radio" name="Course" value="WebDesign"><br>
SQL<input type="radio" name="Course" value="SQL"><br>
Programming<input type="radio" name="Course" value="Programming"><br>

<legend> Goal:</legend><br>
<select name="Goal">
<option selected>Programmer
<option >Gamer
<option> Businessman
</select>
<br>
Skills(Check All That Apply): <br>
UNIX<input type="checkbox" name="UNIX" value="Skills"> VIM <input
type="checkbox" name="VIM" value="Skills"><br>
HTML<input type="checkbox" name="HTML" value="Skills"> CSS<input
type="checkbox" name="CSS" value="Skills"><br>
Python<input type="checkbox" name="Python" value="Skills">
Javascript<input type="checkbox" name="Javascript" value="Skill"><br>

Describe any additional skills you have:<br>


<textarea name="additional skills" rows="5" cols="20">
</textarea>
</fieldset>
<button>Enter my information</button>
</form>

</body>
</html>

CSS CODE:
.main {
background-color: blue;
width: 50%;
padding: 2%;
}
legend {
color: white;
}
label {
color: white;
}
legend {
color: white;
list-style: none;
}
th {
color: white;
}
textarea {
width: 500px;
height: 100px;
}
table {
align-items: left;
}

Output:
Q4. Write a program to demonstrate the concept of HTML Image mapping element. e.g
Consider an image of India with different states. Use image mapping to give the demo
graphics of the states
Ans 4.
Code:
<html>
<head>
<body>
<h1>Indian Map</h1>
<img src="C:\Users\Parshva Maniar\Desktop\html iwp\Indian-States-and-UT-
MOW.jpg" width="500" height="500" alt="webmap" usemap="#webmap">
<map name="webmap">
<area shape="circle" coords="150,180,50"
href="https://en.wikipedia.org/wiki/Rajasthan" alt="Rajasthan" target="blank">
<area shape="circle" coords="200,90,20"
href="https://en.wikipedia.org/wiki/Uttar_Pradesh" alt="Uttar_Pradesh"
target="blank">
</map>
</body>
</head>
</html>

Output:
Q5. Create an external style sheet named as “external.css” and provide some styles for
h2, p and body tags. Create an html file named as “welcome.html” and link the external
style sheet. Include internal style sheet for body tags. Include a tags with inline style
sheet.
Ans 5.
Code:
<html>
<head>
<title>20BDS0058</title>
<link rel="stylesheet" href="external.css"/>
<style>
p {
border-top: dotted 2px red;
border-right: dashed 2px red;
border-left: dashed 2px red;
border-bottom: dashed 2px red;
color: white;
margin-left: 500px;
}
</style>
</head>
<body style="padding: 10px">
<div
style="background-color: white; height: fit-content; margin-left: 500px"
>
<h2>Hello World!!</h2>
<h4>
This example contains some advance css methods that you may not have
learned yet, but we will explain these methods in a later chapter in the
tutorial.
</h4>
</div>
<div>
<p>This is some text in a paragraph</p>
</div>
</body>
</html>

CSS Code:
body {
background-image: url("stock-photo-11834033.jpg");
background-size: cover;
}
div {
padding: 10px;
}
h2 {
padding-top: 10px;
}
Output:

You might also like