Scribd
Upload
2 views

HTML Lab Report Program 8 to 13

This lab report details various experiments conducted in the Internet and Web Technology course, focusing on HTML document creation and formatting. It includes tasks such as designing simple HTML documents, applying text formatting, creating web pages with lists and tables, and integrating multimedia elements. The report is submitted by Rahul Kushwah to Dr. Arun Kumar and Mrs. Geetika Hazra at the Madhav Institute of Technology & Science for the session 2024-25.

Uploaded by

Ghanshyam Dhakad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Lab Report Program 8 to 13

This lab report details various experiments conducted in the Internet and Web Technology course, focusing on HTML document creation and formatting. It includes tasks such as designing simple HTML documents, applying text formatting, creating web pages with lists and tables, and integrating multimedia elements. The report is submitted by Rahul Kushwah to Dr. Arun Kumar and Mrs. Geetika Hazra at the Madhav Institute of Technology & Science for the session 2024-25.

Uploaded by

Ghanshyam Dhakad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Lab Report

of

Internet and web Technology(27241103/28241103)

SUBMITTED BY

Rahul Kushwah
BTAD 24O1052
I semester
Artificial Intelligence and Data Science

SUBMITTED TO

Dr. ARUN KUMAR


Assistant Professor
Mrs. Geetika Hazra
Assistant Professor

CENTRE FOR ARTIFICIAL INTELLIGENCE


Madhav Institute of Technology & Science
Gwalior - 474005 (MP) est. 1957

Session: 2024-25
INDEX
S. Name of the Program Date Page
No. No.
Design a simple HTML document with basic structure in html using
01. headings and paragraphs 18\09\2024 3
.
Design a simple HTML document with a proper structure including
02. DOCTYPE declaration, html ,head, and body element. 18\09\2024 4

Apply text formatting tags to enhance the appearance of text in an


03. HTML document . 18\09\2024 5

Create a web page that includes both ordered and unordered


04. lists, as well as a formatted table. 25\09\2024 6

Create your own resume using html including text formatting


05. elements , images and hyperlink to your socials 09\10\2024 8

Design a form in HTML that includes different input types , such as


06. text , email,password,radio button , checkboxes, and a submit 16\10\2024 10
button.
Create a webpage which includes different text formatting in the
07. article format. 23\10\2024 12

Apply style elements to your previous program without the use of CSS.
08. 23\10\2024 13

Integrate multimedia elements like audio, video, andimage, into an


09 HTML document. 06\11\2024 14

Design a responsive web page using CSS media queries to adapt


10 the layout for different screen sizes. 20\11\2024 16
EXPERIMENT 1: Design a simple HTML document with basic structure in html using headings and
paragraphs.
CODE :
<!DOCTYPE html>
<head>
<title>headings and paragraphs</title>
</head>
<body>
<h1>This is an H1 Heading</h1>
<p>This is a paragraph under the H1 heading.</p>
<h2>This is an H2 Heading</h2>
<p>This is a paragraph under the H2 heading.</p>
<h3>This is an H3 Heading</h3>
<p>This is a paragraph under the H3 heading.</p>
<h4>This is an H4 Heading</h4>
<p>This is a paragraph under the H4 heading.</p>
<h5>This is an H5 Heading</h5>
<p>This is a paragraph under the H5 heading.</p>
</body>
</html>
EXPERIMENT 2: Design a simple HTML document with a proper structure including
DOCTYPE declaration, html ,head, and body elements.

CODE.
<!DOCTYPE html>
<html>
<head>
<title> PROGRAM 8 </title>
<head>
<body>
<center><h1>Interval Data</h1></center>
<p>
• Interval data is a quantitative type of data that

classifies variables
in a ranked order on a scale, with equal distances

(intervals)
between each variable.<br/>
• Data in the interval level of measurement is

numerical, or only in
the form of numbers.<br/>
• For Example: Temperature in degrees, grouped

income ranges and


SAT scores are examples of interval data.<br/>
</p>
</body>
</html>

OUTPUT.
EXPERIMENT 3. Apply text formatting tags to enhance the appearance of text in an HTML
document .
CODE :
<!DOCTYPE>
<html>
<head>
<title>program 9 </title>
</head>
<body>
<h1>Human Being is More Than Just the Body</h1>
<p1>There is a familiar shape and structure of a human body<br/>
that is immediately apparent to us and we imagine someone with </p1>
<hr/>
<p2> It makes entire process online where <u> student can search books</u>,
staff can <b>generate reports</b> and do book transactions.</p2>
<center><i>ARTIFICIAL INTELLIGENCE</i></center>
<strike>RAHUL KUSHWAH</strike>
<br/>
<p2>In this type of testing we<tt> test various integration</tt> of the project </p2><br/>
<p3>In this type of<sub> testing</sub>. various integration of the project<p3><br/><br/
<p4> Library <del>management</del> <ins>system</ins> is a
<strong>computerized</strong> system</p4>
<address>388A, Road No. Jubilee Hills-Hyderadab</address>
</body>
</html><h1>
EXPERIMENT 4. Create a web page that includes both ordered and unordered lists,
as well as a formatted table.
CODE :
<!DOCTYPE>
<html>
<head>
<title>program 10 </title>
</head>
<body>
<h1>What is Data Science</h1>
<ul>
<li>An area that manage, manipulates, extracts amount of data</li>
<li>Data science (DS) is a multidisciplinary field of study with goal to address the
challenges in
big data</li>
<li>Data science principles apply to all data- big and small</li>
</ul>
<h2>What is Data Science</h2>
<ol>
<li>An area that manage, manipulates, extracts amount of data</li>
<li>Data science (DS) is a multidisciplinary field of study with goal to address the
challenges in
big data</li>
<li>Data science principles apply to all data- big and small</li>
</ol>
<h1 align="center">TABLE FORMAT</h1>
<table border="1px" width="50%" cellspacing="10px" cellpadding="10px"
bgcolor="red" align="center">
<tr bgcolor="orange"> <th>Student name</th>
<th>Roll Number</th>
<th>Class</th>
<th>Date of Birth</th>
<th>Gender</th>
</tr>
<tr>
<td>Rahul kushwah</td>
<td>BTD24O1052 </td>
<td>(10+2)th</td>
<td>10-03-2005</td>
<td>male</td>
</tr>
<tr>
<td>Anoop kushwah</td>
<td>1076 </td>
<td>11th</td>
<td>11-06-2008</td>
<td>male</td>
</tr>
<tr>
<td>Nisha kushwah</td>
<td>1020 </td>
<td>9th</td>
<td>14-01-2010</td>
<td>Female</td>
</tr>
<tr>
<td>Kartik kushwah</td>
<td> 102 </td>
<td>5th</td>
<td>14-01-2017</td>
<td>male</td>
</tr>
</table>
</body>
</html>
EXPERIMENT 5. Create your own resume using html including text formatting elements ,
images and hyperlink to your socials.
CODE :
<!DOCTYPE html>
<html>
<head>
<title>RESUME</title>
</head>
<body>
<h1> RAHUL KUSHWAH </h1>
<p> ARTIFICIAL INTELLIGENCE AND DATA SCIENCE STUDENT<br /> </p>
<p>
<img src ="C:\Users\abc\Downloads\IMG_20241008_200428.jpg"alt="my
pic"width="150"heigh="100">
</p>
<hr/>
<h4>
ABOUT ME
</h4>
My name is Rahul kushwah.<br> I am from morena,india currently studying at MITS
Gwalior<br/> I like reading

books and

My hobbies are playing cricket.


<hr/>
<h4>
CONTACT-<br/>
</h4>
<p>
Phone no. =<font color="blue">7247372331</font><br/>
Linkedin = rahul_ps<br/>
mail id =<a href="[email protected]">gmail</a>
</p>
<center>
<HR/>
<h4>EXPERIENCE</h4>
<p>
Know little bit of c++, html and some tech related certificates
</p>
</center>
</body>
</html>
EXPERIMENT 6. Design a form in HTML that includes different input types , such as text ,
email,password,radio button , checkboxes, and a submit button.

<!DOCTYPE html>
<html>
<head>
<title> program 11 </title>
<head>
<body>
<form>
<table>
<tr>
<td>
Name :
</td>
<td>
<input type="text" placeholder="Name" name="">
</td>
</tr>
<tr>
<td>
passward :
</td>
<td>
<input type="password" placeholder="password" name="">
</td>
</tr>
<tr>
<td>
Gender :
</td>
<td>
<input type="radio" name="gender">male
<input type="radio" name="gender">female
</td>
</tr>
<tr>
<td>
Age :
</td>
<td>
<input type="Age" placeholder="Age" name="">
</td>
</tr>
<tr>
<td>
Email :
</td>
<td>
<input type="mail" placeholder="Email" name="">
</td>
</tr>
<tr>
<td>
Mobile No. :
</td>
<td>
<select>
<option>+91</option>
<option>+92</option>
<option>+93</option>
<option>+94</option>
<option>+95</option>
</select>
<input type="Mobile No." placeholder="Mobile No." name="">
</td>
</tr>
<tr>
<td>
Branch :
</td>
<td>
<select>
<option>AI&DS</option>
<option>IT</option>
<option>CSE</option>
<option>EC</option>
<option>ME</option>
</select>
<input type="Branch" placeholder="Branch" name="">
</td>
</tr>
<tr>
<td>
pref :
</td>
<td>
<input type="checkbox">morena
<input type="checkbox">gwalior
<input type="checkbox">bhopal
<input type="checkbox">indore
</td>
</tr>
<tr>
<td>
<input type="Submit" value="Submit" >
</td>
</tr>
</table>
</form>
</body>
</html>

OUTPUT :

EXPERIMENT 7. Create a webpage which includes different text formatting in the article
format.
CODE :
<!DOCTYPE html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About ACM</title></head>
<h1><u><center>About the ACM Organization</center></u></h1>
<h4><u><center>SRUSHTI RAWAL BTAD24O1067</center></u></h4><table><tr><td>
<p>ACM brings together computing educators, researchers, and professionals to inspire dialogue,
share resources, and address the field's challenges. As the world’s largest computing society, ACM
strengthens the profession's collective voice through strong leadership, promotion of the highest
standards, and recognition of technical excellence. ACM supports the professional growth of its
members by providing opportunities for life‐long learning, career development, and professional
networking.</p></td></tr></table><h2><u>Special Interest Groups Form around ACM’s Powerful,
Vibrant Communities</u></h2>
<p>Networking opportunities in ACM’s 38 Special Interest Groups (SIGs) are always expanding,
reflecting the growth of computing’s discrete disciplines and technical communities. The leading
representatives of their fields, ACM SIGs sponsor annual conferences, workshops, and symposia
serving practitioner‐ and research‐based constituencies. Because they provide objective arenas for
novel, often competing ideas, many of these meetings have become premier global events.</p>
<br> <h1><u>Chapters</u></h1><h2>ACM's "Local Neighborhoods"</h2>
<p>ACM’s broad-based infrastructure supports more than 860 professional and student chapters
worldwide. These "local neighborhoods" offer opportunities for members to gain access to critical
research and establish personal networking systems.</p><h2>ACM, Member-driven, Volunteer-
led</h2>
<p>ACM offers volunteer opportunities for members and non‐members that create networking
possibilities and enhance career development. At the grassroots level, ACM volunteers serve a
growing international community of researchers, practitioners, and students by lending valuable
assistance at conferences, publications, webinars, and other events.</p><h2>ACM’s "Big Tent"
Philosophy Embraces Diversity</h2> <p>The ACM community is as diverse as the subfields that
comprise computer science, from educators and researchers in academia to practitioners in project
management, industrial research, and software development, engineering, and application
design.</p></body>
</html>

EXPERIMENT 9. Integrate multimedia elements like audio, video, and image, into an HTML
document.
CODE :

<!DOCTYPE html>
<html>
<head>
<title>program 12 </title>
</head>
<body>

<h1 align="center">Image Example</h1>


<p1><center>
<img src ="tajmahal image.jpg" width="250"heigh="30
0">
</center></p1> </br> </br>

<center>
<h1 align="center">audio Example</h1>
<audio controls>
<source src="ring tone.mp3">
</audio>
</center>

<center>
<h1 align="center">video Example</h1>
<video width="250" height="300" controls>
<source src="\Downloads\VID_20241207_060701_113 (1).mp4">
</video>
</center>

</body>

</html>
EXPERIMENT 10. Design a responsive web page using CSS media queries to adapt the
layout for different screen sizes.
CODE :
<!DOCTYPE html>
<html>
<head>
<title>Library management system </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<ul class ="menu">
<li><a href ="#"> Home </a> </li>
<li><a href ="#"> Ragister </a> </li>
<li><a href ="#"> Login</a> </li>
<li><a href ="#"> About us </a> </li>
</ul>
</body>
</html>
body{
margin-left:0px;
margin-right:0px;
padding-left:0px;
padding-right:0px; }
.menu {
width: 100%;
height:50px;
background-color:#0347f4; }
.menu li {
list-style:none;
width: 160px;
height:50px;
background-color:darkcyan;
margin-left:5px;
text-align:center;
line-height:50px;
float:left;}
.menu li a{
color: white;
display:block;
text-decoration:none;}

You might also like