0% found this document useful (0 votes)
26 views

HTML Lab

html lab

Uploaded by

Shiva
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
0% found this document useful (0 votes)
26 views

HTML Lab

html lab

Uploaded by

Shiva
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/ 43

Web Design Lab

1. For creating six levels of heading by using horizontal rules.


<html>
<head></head>
<body>
<h1>Welcome to HTML</h1>
<h2>Raichur University Raichur</h2>
<h3>Dept of Computer Science</h3>
<h4>Name : Maheshkumar</h4>
<h5>Semester : IV Semester</h5>
<h6>Reg No : P23ON21S0126</h6>
</body>
</html>

Out put :

M.Sc. IV Semester Page 1


Web Design Lab
2. For creating more than one paragraph by using line breaks <br> tag and spaces
with the <pre> tag.
<html>
<head></head>
<body>
<p>Welcome to HTML</p><br>
<p>Raichur University Raichur</p><br>
<p>Dept of Computer Science</p><br>
<p>Name : Maheshkumar</p><br>
<pre>Semester : IV Semester</pre><br>
<pre>Reg No : P23ON21S0126</pre>
</body>
</html>

Out put :

M.Sc. IV Semester Page 2


Web Design Lab
3. To format a text by using text formatting tags, namely (Bold, Italic, Strong,
emphasized, small, marked, deleted, inserted, subscript and superscript).
<html>
<head></head>
<body>
<b>Welcome to HTML</b><br>
<strong>Raichur University Raichur</strong><br>
<i>Dept of Computer Science</i><br>
<mark>Name : Maheshkumar</mark><br>
<em>Semester : IV Semester</em><br>
<small>Reg No : P23ON21S0126</small><br>
<del>Place : Shahapur</del><br>
<ins>Course : M.Sc.</ins><br>
<p>H<sub>2</sub>O</p><br>
<p>2<sup>3</sup>=8</p>
</body>
</html>

Out put :

M.Sc. IV Semester Page 3


Web Design Lab
4. For setting styles on the text like text color, text font, text size, text alignment
and background color.
<html>
<head></head>
<body>
<h1 style="color:blue;">Welcome to HTML</h1>
<h2 style="color:red;font-family:verdana;">Raichur University</h2>
<h3 style="font-size:30px;">Dept of Computer Science</h3>
<h4 style="align:center;">Name : Maheshkumar</h4>
</body>
</html>

Out put :

M.Sc. IV Semester Page 4


Web Design Lab
5. For establish a link for a webpage by using <href> tag.
<html>
<head></head>
<body>
<h1>Raichur University Website Link</h1>
<a href="https://raichuruniversity.ac.in/">Raichur University | Home Page</a>
</body>
</html>

Out put :

M.Sc. IV Semester Page 5


Web Design Lab
6. For changing the colors of links i.e. visited and un visited.
<html>
<head>
<style>
a:link{
color:blue;
}
a:visited{
color:red;
}
</style>
</head>
<body>
<h1>Raichur University Website Link</h1>
<a href="https://raichuruniversity.ac.in/">Raichur University | Home Page</a>
</body>
</html>

Out put :

M.Sc. IV Semester Page 6


Web Design Lab
7. For adding an image using image tag and set height and width using attributes.
<html>
<head></head>
<body>
<h2>Raichur University Logo</h2>
<img src="C:\Users\admin\Downloads\download.jpg" width="500" height="600"></img>
</body>
</html>

Out put :

M.Sc. IV Semester Page 7


Web Design Lab
8. For creating ordered list using different types of ordering namely.
(numbered, letters, lowercase letters, roman letters and uppercase letters.)
<html>
<head></head>
<body>
<ol>
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ol>
<ol type="1">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ol>
<ol type="A">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ol>
<ol type="a">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ol>
<ol type="I">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>

M.Sc. IV Semester Page 8


Web Design Lab
</ol>
<ol type="i">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ol>
<ol start="50">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ol>
</body>
</html>

Out put :

M.Sc. IV Semester Page 9


Web Design Lab
9. For creating unordered list using different types of ordering namely.
(Disc bullets, circle bullets, square bullets and without bullets.)
<html>
<head></head>
<body>
<ul style="list-style-type:disc">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ul>
<ul style="list-style-type:circle">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ul>
<ul style="list-style-type:square">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ul>
<ul style="list-style-type:none">
<li>Mahesh</li>
<li>Chandu</li>
<li>Chandu Lover</li>
<li>Chandu GF</li>
<li>Chandu Bestiee... : Lav</li>
</ul>
</body>
</html>

M.Sc. IV Semester Page 10


Web Design Lab
Out put :

M.Sc. IV Semester Page 11


Web Design Lab
10. To illustrate marquee tag with its slide, scroll, and alternate behavior.
<html>
<head></head>
<body>
<p>Slide</p>
<marquee behavior="slide" bgcolor="pink">Raichur University</marquee><br>
<p>Scroll</p>
<marquee behavior="scroll" bgcolor="green" style="color:white">Master of
Science</marquee><br>
<p>Alternate</p>
<marquee style="color:red" direction="down" behavior="alternate" bgcolor="yellow"
width="300" height="300">Dept of Compter Science</marquee>
</body>
</html>

Out put :

M.Sc. IV Semester Page 12


Web Design Lab
11. For a Table consisting information about Students and illustrate row span and
column span attributes.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse:collapse;
text-align:center;
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th colspan="2">Name</th>
<th rowspan="2">Age</th>
<th rowspan="2">Course</th>
<th rowspan="2">Dept</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Maheshkumar</td>
<td>Hiremath</td>
<td>23</td>
<td rowspan="3">M.Sc.</td>
<td rowspan="3">CS</td>
</tr>
<tr>
<td>Devaraja</td>
<td>Dass</td>
<td>24</td>
</tr>
<tr>
<td>Sharanabasava</td>
<td>Godehala</td>

M.Sc. IV Semester Page 13


Web Design Lab
<td>23</td>
</tr>
</tbody>
</table>
</body>
</html>

Out put :

M.Sc. IV Semester Page 14


Web Design Lab
12. For a Table consisting information about Company and illustrate cell padding
and cell spacing attributes.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
text-align:center;
padding:10px;
}
</style>
</head>
<body>
<table cellspacing="10px">
<tbody>
<tr>
<th colspan="4">Employee's Detail's</th>
</tr>
<tr>
<th>Emp Id</th>
<th>Emp Name</th>
<th>Dept No</th>
<th>Emp City</th>
</tr>
<tr>
<td>101</td>
<td>Sharana</td>
<td>15</td>
<td>Lingasugur</td>
</tr>
<tr>
<td>102</td>
<td>Radha</td>
<td>20</td>
<td>Bhatkal</td>
</tr>
</tbody>
</table>
</body>

M.Sc. IV Semester Page 15


Web Design Lab
</html>

Out put :

M.Sc. IV Semester Page 16


Web Design Lab
13. For inserting audio and video.
<html>
<head></head>
<body>
<h2>Click Play button to play audio</h2>
<audio src="E:\function\devamma.mp3" controls=""></audio>
<h2>Click Play button to play video</h2>
<video src="G:\mahesh photos\videos\VID-20211022-WA0045.mp4"
controls=""></video>
</body>
</html>

Out put :

M.Sc. IV Semester Page 17


Web Design Lab
14. For creating four horizontal frames.
<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="50%,50%">
<frame src="r1.html">
<frame src="r2.html">
</frameset>
</html>

Out put :

M.Sc. IV Semester Page 18


Web Design Lab
15. For creating four vertical frames.
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="r1.html">
<frame src="r2.html">
</frameset>
</html>

Out put :

M.Sc. IV Semester Page 19


Web Design Lab
16. For navigation between Web Pages.
<html>
<head></head>
<body>
<h1>The Navigation Links</h1>
<nav>
<a href="https://www.google.com">Google | Home Page</a><br>
<a href="https://raichuruniversity.ac.in">Raichur University | Home Page</a><br>
<a href="https://gug.ac.in">Gulbarga University | Home Page</a>
</nav>
</body>
</html>

Out put :

M.Sc. IV Semester Page 20


Web Design Lab
17. For creating a form which is used to select different kinds of user inputs namely
text fields, password fields, radio buttons, checkboxes and submit button.
<html>
<head></head>
<body>
<h2>HTML Forms</h2>
<form>
<h3>User inputs</h3>
<lable>First Name : </lable><input type"text"=""><br>
<lable>Last Name : </lable><input type"text"=""><br>
<h3>Radio Buttons</h3>
<input type="radio"><lable>HTML</lable><br>
<input type="radio"><lable>CSS</lable><br>
<input type="radio"><lable>JAVA</lable><br>
<h3>Check Boxs</h3>
<input type="checkbox"><lable>HTML</lable><br>
<input type="checkbox"><lable>CSS</lable><br>
<input type="checkbox"><lable>JAVA</lable><br>
<h3>User id, Password and Submit Button</h3>
<lable>User id : </lable><input type"text"=""><br>
<lable>Password : </lable><input type"text"=""><br>
<input type="Button" value="Submit" />
</form>
</body>
</html>
Out put :

M.Sc. IV Semester Page 21


Web Design Lab
18. For creating form user contact Address which contains name, address, city,
state, country, zip code, mobile number of user.
<Html>
<head>
<title>
User Contact Address
</title>
</head>
<body bgcolor="Lightskyblue"> <br> <br>
<form>
<h1> User Contact Address Form : </h1> <br>
<label> Firstname </label>
<input type="text"/> <br> <br>
<label> Middlename: </label>
<input type="text"/> <br> <br>
<label> Lastname: </label>
<input type="text"/> <br> <br>
<label>Contry : </label>
<select>
<option>Contry</option>
<option>India</option>
<option>Others</option>
</select> <br> <br>
<label>State : </label>
<select>
<option>State</option>
<option>Andhra Pradesh</option>
<option>Arunachal Pradesh</option>
<option>Assam</option>
<option>Bihar</option>
<option>Chhattisgarh</option>
<option>Gujarat</option>
<option>Haryana</option>
<option>Himachal Pradesh</option>
<option>Jammu and Kashmir</option>
<option>Goa</option>
<option>Jharkhand</option>
<option>Karnataka</option>
<option>Kerala</option>

M.Sc. IV Semester Page 22


Web Design Lab
<option>Madhya Pradesh</option>
<option>Maharashtra</option>
<option>Manipur</option>
<option>Meghalaya</option>
<option>Mizoram</option>
<option>Nagaland</option>
<option>Odisha</option>
<option>Punjab</option>
<option>Rajasthan</option>
<option>Sikkim</option>
<option>Tamil Nadu</option>
<option>Telangana</option>
<option>Tripura</option>
<option>Uttarakhand</option>
<option>Uttar Pradesh</option>
<option>West Bengal</option>
<option>Andaman and Nicobar Islands</option>
<option>Chandigarh</option>
<option>Dadra and Nagar Haveli</option>
<option>Daman and Diu</option>
<option>Delhi</option>
<option>Lakshadweep</option>
<option>Puducherry</option>
</select> <br> <br>
<label>Address : </label> <br>
<textarea cols="80" rows="5"> </textarea> <br> <br>
<label>Zip Code:</label>
<input type="text" size="6"/> <br> <br>
<label>Mobile No : </label>
<input type="text" value="+91" size="2"/>
<input type="text" size="10"/> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>

M.Sc. IV Semester Page 23


Web Design Lab
Out put :

M.Sc. IV Semester Page 24


Web Design Lab
19. For creating a form for a student registration.
<Html>
<head>
<title>
Registration Page
</title>
</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<h1> Student Registration Form : </h1> <br>
<label> Firstname </label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>

<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>

<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>

M.Sc. IV Semester Page 25


Web Design Lab
<input type="radio" name="other"/> Other
<br>
<br>

<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>
</html>

M.Sc. IV Semester Page 26


Web Design Lab
Out put :

M.Sc. IV Semester Page 27


Web Design Lab
Develop an CSS based HTML document for following assignments:
20. To perform Text Transformation.
<!DOCTYPE html>
<html>
<head>
<style>
.text-to-transform {
bgcolor:yellow;
}
#transform-uppercase:checked ~ .text-to-transform {
text-transform: uppercase;
}
#transform-lowercase:checked ~ .text-to-transform {
text-transform: lowercase;
}
#transform-capitalize:checked ~ .text-to-transform {
text-transform: capitalize;
}
</style>
</head>
<body>
<h1> Text transform styles : </h1>
<input type="radio" name="text-transform" id="transform-uppercase">
<label for="transform-uppercase">Uppercase</label>

<input type="radio" name="text-transform" id="transform-lowercase">


<label for="transform-lowercase">Lowercase</label>

<input type="radio" name="text-transform" id="transform-capitalize">


<label for="transform-capitalize">Capitalize</label>

<h1 class="text-to-transform">This is some text.</h1>


</body>
</html>

M.Sc. IV Semester Page 28


Web Design Lab
Out put :

M.Sc. IV Semester Page 29


Web Design Lab
21. To perform word spacing and letter spacing.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
letter-spacing: 5px;
}
h3 {
word-spacing: 10px;
}
</style>
</head>
<body>
<h1>Using letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>

</body>
</html>

Out put :

M.Sc. IV Semester Page 30


Web Design Lab
22. To show Text shadow color.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 10px 10px 10px red;
}
</style>
</head>
<body>
<h1>Text-shadow with blur effect</h1>
</body>
</html>

Out put :

M.Sc. IV Semester Page 31


Web Design Lab
23. To show same padding on all sides.
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom
padding of 50px, and a left padding of 80px.</div>
</body>
</html>

Out put :

M.Sc. IV Semester Page 32


Web Design Lab
24. To show CSS fort-size property.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major
browsers, and allows all browsers to resize the text!</p>
</body>
</html>
Out put :

M.Sc. IV Semester Page 33


Web Design Lab
25. To create Image Gallery.
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid red;
float: left;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank">
<img src="C:\Users\admin\Downloads\download.jpg" width="500"
height="600"></img>
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank">

M.Sc. IV Semester Page 34


Web Design Lab
<img src="E:\NSS Youth Camp - 2023\IMG_0003.JPG" alt="Forest" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank">
<img src="E:\NSS Youth Camp - 2023\IMG_0001.JPG" alt="Northern Lights"
width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank">
<img src="E:\NSS Youth Camp - 2023\IMG_0012.JPG" alt="Mountains" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>

Out put :

M.Sc. IV Semester Page 35


Web Design Lab
Develop an XML based HTML document for the following assignments:
26. To show the book information in a book store.
<html>
<head></head>
<body>
<bookstore>
<book>
<booktitle>Book Title 1</booktitle><br/>
<author>Author 1</author><br/>
<genre>Fiction</genre><br/>
<price>19.99</price><br/><br/>
</book>
<book>
<booktitle>Book Title 2</booktitle><br/>
<author>Author 2</author><br/>
<genre>Non-fiction</genre><br/>
<price>15.99</price><br/><br/>
</book>
</bookstore>
</body>
</html>

Out put :

M.Sc. IV Semester Page 36


Web Design Lab
27. To show the status of employee details.
<?xml version="1.0" encoding="ISO-8859-1"?>
<employees>
<employee department="ENG">
<name id="1">Upendra Roul</title>
<position>Software Developer</author>
<joinyear>2010</joinyear>
<salary>6000</price>
</employee>
<employee category="ENG">
<name id="1">Jay Prakash</title>
<position>Testers</author>
<joinyear>2010</joinyear>
<salary>7000</price>
</employee>
<employee category="HR">
<name id="1">Rekha Sharma</title>
<position>HR</author>
<joinyear>2005</joinyear>
<salary>7000</price>
</employee>
<employee category="HK">
<name id="1">Rohit S</title>
<position>House Keeping</author>
<joinyear>2000</joinyear>
<salary>3000</price>
</employee>
</employees>

Out put :

M.Sc. IV Semester Page 37


Web Design Lab
Write a JavaScript program for the following assignments :
28. To create a dialogue box with “Welcome to my website” message.
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<script>
document.write("Welcome to my website")
</script>
</body>
</html>

Out put :

M.Sc. IV Semester Page 38


Web Design Lab
29. To display time and print the message accordingly.
<html>
<head>
<title>Time-Based Message</title>
</head>
<body>
<script>
var currentTime = new Date();
var currentHour = currentTime.getHours();
var message;
if (currentHour >= 0 && currentHour < 4) {
message = "Mid Night!";
}else if (currentHour >= 4 && currentHour < 12) {
message = "Good morning!";
} else if (currentHour >= 12 && currentHour < 16) {
message = "Good afternoon!";
} else if (currentHour >= 16 && currentHour < 20) {
message = "Good evening!";
} else {
message = "Good night!";
}
alert("The current time is: " + currentTime.toLocaleTimeString() + "\n" + message);
</script>
</body>
</html>

Out put :

M.Sc. IV Semester Page 39


Web Design Lab
30. To display Fibonacci series.
<html>
<head>
<title> Fibonacci Series in JavaScript </title>
</head>
<body>
<script>
var n1 = 0, n2 = 1, n3, i;
var num = parseInt (prompt (" Enter the limit for Fibonacci Series "));
document.write( "Fibonacci Series: ");
for ( i = 1; i <= num; i++)
{
document.write (" <br> " + n1);
n3 = n1 + n2;
n1 = n2;
n2 = n3;
}
</script>
</body>
</html>

Out put :

M.Sc. IV Semester Page 40


Web Design Lab
31. To display the square of a given numbers.
<html>
<head>
<title> Square of a number in JavaScript </title>
</head>
<body>
<script>
var sqr;
var num = parseInt (prompt (" Enter the number : "));
document.write( "Square of given number is : ");
sqr=num*num;
document.write(sqr);
</script>
</body>
</html>

Out put :

M.Sc. IV Semester Page 41


Web Design Lab
32. To define a user defined function for sorting the values in an array.
<!DOCTYPE html>
<html>
<body>
<script>
var myarr = [];
var size= prompt('Enter size of array ');
for(var i=0; i<size; i++) {
myarr[i] = prompt('Enter Element ' + (i+1));
}
myarr.sort(function(a, b){return a - b});
document.writeln(myarr);
</script>
</body>
</html>

Out put :

M.Sc. IV Semester Page 42


Web Design Lab

M.Sc. IV Semester Page 43

You might also like