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

HTML Lab

html lab

Uploaded by

Shiva
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
17 views

HTML Lab

html lab

Uploaded by

Shiva
Copyright
© © All Rights Reserved
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