Scribd
Upload
12 views19 pages

Web Tech Lab 667

This lab report documents the coursework completed by Srushti Rawal in the Internet and Web Technologies Lab for the Artificial Intelligence and Data Science program. It includes a series of experiments focused on HTML document creation, text formatting, multimedia integration, and form design. The report is submitted 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views19 pages

Web Tech Lab 667

This lab report documents the coursework completed by Srushti Rawal in the Internet and Web Technologies Lab for the Artificial Intelligence and Data Science program. It includes a series of experiments focused on HTML document creation, text formatting, multimedia integration, and form design. The report is submitted 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Lab Report

of
INTERNET and WEB TECHNOLOGIES LAB (27241107)

SUBMITTED BY

Srushti Rawal
BTAD24O1067
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.NO Program Date Remark
1. Design a simple HTML document with basic structure in html 18/09/2024
using headings and paragraphs.
2. Design a simple HTML document with proper structure, 18/09/2024
including DOCTYPE declaration, html, head and body
elements.
3. Apply text formatting tags to enhance the appearance of text in 18/09/2024
an HTML document
4. Create a web page that includes both ordered and unordered 25/09/2024
lists, as well as a formatted table.
5. Create your own resume using html including text formatting 09/10/2024
elements , images and hyperlink to your socials.
6. Design a form in HTML that includes different input types, such 16/10/2024
as text, email, password, radio buttons, checkboxes, and a
submit button.
7. Create a webpage which includes different text formatting in the 23/10/2024
article format.
8. Apply style elements to your previous program without the use 23/10/2024
of CSS.
9. Integrate multimedia elements like audio, video, and images 06/11/2024
into an HTML document.
10. Design a responsive web page using CSS media queries to adapt 20/11/2024
the layout for different screen sizes.
EXPERIMENT 1: Design a simple HTML document with basic structure in html using headings and
paragraphs.

CODE:

<! <
EXPERIMENT 2: Design a simple HTML document with proper structure, including DOCTYPE declaration,
html, head and body elements.

CODE:
EXPERIMENT 3: Apply text formatting tags to enhance the appearance of text in an HTML document.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
</head>
<body>
<h1>Text Formatting Example</h1>
<p>This paragraph contains examples of different text formatting tags:</p>
<p>
<b>Bold text</b> using the <code>&lt;b&gt;</code> tag.<br>
<strong>Strong emphasis</strong> using the <code>&lt;strong&gt;</code> tag.<br>
<i>Italic text</i> using the <code>&lt;i&gt;</code> tag.<br>
<em>Emphasized text</em> using the <code>&lt;em&gt;</code> tag.<br>
<u>Underlined text</u> using the <code>&lt;u&gt;</code> tag.<br>
<del>Deleted text</del> using the <code>&lt;del&gt;</code> tag.<br>
<ins>Inserted text</ins> using the <code>&lt;ins&gt;</code> tag.<br>
<mark>Highlighted text</mark> using the <code>&lt;mark&gt;</code> tag.<br>
<small>Smaller text</small> using the <code>&lt;small&gt;</code> tag.<br>
<sub>Subscript text</sub> using the <code>&lt;sub&gt;</code> tag.<br>
<sup>Superscript text</sup> using the <code>&lt;sup&gt;</code> tag.
</p>
</body>
</html>
EXPERIMENT 4: Create a web page that includes both ordered and unordered lists, as well as a formatted table.
CODE:

<!DOCTYPE html>
<html> <tbody>
<head> <tr>
<title>HTML Lists and Table</title> <td>Apple</td>
</head> <td>3</td>
<body> <td>200</td>
<h1>HTML Lists and Table Example</h1> </tr>
<tr>
<h2>Unordered List</h2> <td>Banana</td>
<ul> <td>6</td>
<li>Apple</li> <td>150</td>
<li>Banana</li> </tr>
<li>Cherry</li> <tr>
</ul> <td>Cherry</td>
<h2>Ordered List</h2> <td>10</td>
<ol> <td>300</td>
<li>Step 1: Gather ingredients</li> </tr>
<li>Step 2: Mix ingredients</li> </tbody>
<li>Step 3: Bake the cake</li> </table>
</ol> </body>
<h2>Formatted Table</h2> </html>
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
EXPERIMENT 5: Create your own resume using html including text formatting elements , images and
hyperlink to your socials.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Srushti Rawal - Resume</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/
all.min.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6; }
h1, h2 {
color: #393:}
.section {
margin-bottom: 20px;}
.contact-info {
display: flex;
align-items: center;
margin-bottom: 20px: }
.profile-image {
width: 150px;
height: auto;
border-radius: 50%;
margin-right: 20px; }
.contact-icons i {
margin-right: 10px;}
.highlight {
font-weight: bold;
font-size: 1.1em;
color: #006400; }
</style>
</head>
<body>
<h1>Srushti Rawal</h1>
<div class="contact-info">
<img src="U:\1721325063684.jpg" alt="Srushti Rawal" class="profile-image">
<div class="contact-icons">
<p><i class="fas fa-envelope"></i>Email: <a
href="mailto:[email protected]">[email protected]</a></p>
<p><i class="fas fa-phone"></i>Phone: <span class="highlight">6267220827</span></p>
<p><i class="fab fa-linkedin"></i>LinkedIn: <a
href="https://www.linkedin.com/in/srushtirawal/">https://www.linkedin.com/in/srushtirawal/</a></p>
</div>
<div>
<div class="section">
<h2>About Me</h2>
<p>I am an enthusiastic and driven individual with a strong passion for leadership and teamwork.
My outspoken nature allows me to communicate ideas effectively and inspire those around me. I thrive in
dynamic environments where I can apply my problem-solving skills, take initiative, and encourage
collaboration. With a commitment to personal and professional growth, I am always eager to take on new
challenges and make a meaningful impact.</p>
</div>
<div class="section">
<h2>Education</h2>
<h3>Bachelor of Technology in Artificial Intelligence & Data Science</h3>
<p>Madhav Institute of Technology & Science, Gwalior, M.P - 2028</p>
</div>
<div class="section">
<h2>Skills</h2>
<ul>
<li>MySQL</li>
<li>Python</li>
<li>Core programming understanding</li>
<li>Video editing</li>
</ul>
</div>
<div class="section">
<h2>Personal Details</h2>
<ul>
<li>Home Address: 578, Katju Nagar, Ratlam (M.P.) - 457001</li>
<li>Work Address: E/19, Pitambara Estate, Indramani Nagar, Gwalior (M.P.) - 474001</li>
<li>Schooling : Both HighSchool and Higher Secondary School done from Himalaya
International School, Ratlam (M.P.)</li>
</ul>
</div>
<div class="section">
<h2>Achievements</h2>
<ul>
<li>Best Delegate MUN - Himalaya International School, Ratlam, 2023</li>
<li>Rank 125 out of 16837, Junior Coding Olympiad - Newton School of Technology, Delhi,
2024</li>
<li>Class Representative , AI&DS First Year, 2024</li>
</ul>
<p></p>
<p></p>
</div>
</hr>
</body>
</html>
EXPERIMENT 6: :Design a form in HTML that includes different input types, such as text, email, password,
radio buttons, checkboxes, and a submit button.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
</head>
<body style="background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
url('Madhav_Institute_of_Technology__Science.jpg') no-repeat center center fixed; background-size: cover; font-
family: Arial, sans-serif;">
<h1 style="text-align: center; color: navy; background-color: #baf2bb; padding: 10px; border-radius: 10px;
width: fit-content; margin: 20px auto;">
Registration Form
</h1>
<h3 style="text-align: center; text-decoration: underline; color: darkblue;">
SRUSHTI RAWAL BTAD24O1067
</h3>
<div style="background-color: #bce784; margin: auto; padding: 20px; border: 2px solid navy; border-radius:
15px; width: 60%; box-shadow: 5px 5px 10px gray;">
<div style="text-align: center; margin-bottom: 20px;">
<img src="Madhav_Institute_of_Technology_and_Science_logo.png" alt="Placeholder Image"
style="width: AUTO; height: 150px; " />
</div>
<form>
<p>
<label for="name" style="font-weight: bold;">Name:</label><br>
<input type="text" id="name" name="name" style="width: 80%; padding: 8px;">
</p>
<p>
<label for="enrollment" style="font-weight: bold;">Enrollment no:</label><br>
<input type="text" id="enrollment" name="enrollment" style="width: 80%; padding: 8px;">
</p>
<!-- Address input -->
<p>
<label for="address" style="font-weight: bold;">Address:</label><br>
<input type="text" id="address" name="address" style="width: 80%; padding: 8px;">
</p>
<!-- Password input -->
<p>
<label for="password" style="font-weight: bold;">Password:</label><br>
<input type="password" id="password" name="password" style="width: 80%; padding: 8px;">
</p>
<p>
<label style="font-weight: bold;">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</p>
<p>
<label for="age" style="font-weight: bold;">Age:</label><br>
<input type="text" id="age" name="age" style="width: 80%; padding: 8px;">
</p>
<p>
<label for="email" style="font-weight: bold;">Email:</label><br>
<input type="text" id="email" name="email" placeholder="Email" style="width: 80%; padding: 8px;">
</p>
<p>
<label for="mobile" style="font-weight: bold;">Mobile No:</label><br>
<select name="country_code" style="padding: 8px;">
<option value="+91">+91</option>
<option value="+92">+92</option>
</select>
<input type="text" id="mobile" name="mobile" style="width: 60%; padding: 8px;">
</p>
<p>
<label for="branch" style="font-weight: bold;">Branch:</label><br>
<select id="branch" name="branch" style="width: 80%; padding: 8px;">
<option>AIDS</option>
<option>AIML</option>
<option>AI</option>
<option>AIR</option>
<option>CSE</option>
<option>IT</option>
</select>
</p>
<p>
<label for="feedback" style="font-weight: bold;">Feedback (if any):</label><br>
<textarea id="feedback" name="feedback" rows="5" style="width: 80%; padding: 8px;"></textarea>
</p>
<!-- File upload -->
<p>
<label for="upload_image" style="font-weight: bold;">Upload Image:</label><br>
<input type="file" id="upload_image" name="upload_image" accept="image/*" style="padding:
8px;">
</p>
<p style="text-align: center;">
<input type="submit" value="Submit" style="background-color: navy; color: white; padding: 10px
20px; border: none; border-radius: 5px; cursor: pointer;">
</p>
</form>
</div>
</body>
</html>
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 8: Apply style elements to your previous program without the use of CSS.
CODE:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About ACM</title>
</head>
<body style="background-color: #edf6f9;">
<h1><u><center>About the ACM Organization</center></u></h1>
<h4><u><center><p style="color: #83c5be;">SRUSHTI RAWAL
BTAD24O1067</p></center></u></h4>
<table>
<tr>
<td>
<img src="U:\acmm.png" alt="ACM Logo" style="width:200px;">
</td>
<td>
<p><strong>ACM brings together computing educators, researchers, and professionals to inspire
dialogue, share resources, and address the field's challenges.</strong> 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><p style="color: #006d77;"><u>Special Interest Groups Form around ACM’s Powerful, Vibrant
Communities</u></p></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>
<hr style="border: 0; height: 2px; background-color: #028090;">
<h1><p style="color: #00a896;"><i><u>Chapters ~</u></i></p></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>
<hr style="border: 0; height: 2px; background-color: #028090;">
</body>
</html>
EXPERIMENT 9: Integrate multimedia elements like audio, video, and images into an HTML
document.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different Shapes of Pasta</title>
<style>

body {
font-family: 'Georgia', serif; .media {
background-color: #faf3e0; display: flex;
margin: 0; align-items: center;
padding: 0; gap: 20px;
color: #5f4b32; } flex: 1;}
header { .media video, .media img {
text-align: center; width: 300px;
padding: 20px; border-radius: 8px; }
background-color: #ffe6cc;} article {
header h1 { font-size: 1.2rem;
font-size: 2.5rem; line-height: 1.8;
margin: 0; text-align: justify;
font-family: 'Dancing Script', cursive; } flex: 2; }
.container { footer {
display: flex; text-align: center;
flex-wrap: wrap; padding: 10px;
justify-content: center; background-color: #ffe6cc;
gap: 20px; position: relative;}
padding: 20px; footer p {
max-width: 1000px; margin: 0;}
margin: 0 auto;}

</style>
</head>
<body>
<header>
<h1>Different Shapes of Pasta</h1>
</header>
<section class="container">
<div class="media">
<img src="pasta-shapes.jpg" alt="Different shapes of pasta">
<video controls autoplay>
<source src="different-pastas-shapes.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<article>
<p>Pasta comes in a delightful variety of shapes, each designed for specific culinary purposes. Long and
thin spaghetti pairs perfectly with tomato-based sauces, while tubular penne captures creamy sauces in its ridges.
Ribbon-like fettuccine is ideal for rich, buttery sauces like Alfredo, and shell-shaped conchiglie holds chunky
fillings beautifully. Then there’s bow-tie farfalle, a fun choice for salads and lighter dishes. With such diversity,
pasta shapes elevate the dining experience, ensuring that each bite complements the sauce and ingredients it's
paired with.</p>
</article>
</section>
<footer>
<p>Enjoy your pasta adventures!</p>
<p>Audio:</p>
<audio controls autoplay>
<source src="cafe-music-163375.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</footer>
</body>
</html>
EXPERIMENT 10:.Design a responsive web page using CSS media queries to adapt the layout for
different screen sizes.
CODE:
Html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different Shapes of Pasta</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Different Shapes of Pasta</h1>
</header>
<section class="container">
<div class="media">
<img src="pasta-shapes.jpg" alt="Different shapes of pasta"> </div>
<article>
<p>Pasta comes in a delightful variety of shapes, each designed for specific culinary purposes. Long and
thin spaghetti pairs perfectly with tomato-based sauces, while tubular penne captures creamy sauces in its ridges.
Ribbon-like fettuccine is ideal for rich, buttery sauces like Alfredo, and shell-shaped conchiglie holds chunky
fillings beautifully. Then there’s bow-tie farfalle, a fun choice for salads and lighter dishes. With such diversity,
pasta shapes elevate the dining experience, ensuring that each bite complements the sauce and ingredients it's
paired with.</p>
</article>
</section>
<footer>
<p>Enjoy your pasta adventures!</p>
<p>Audio:</p>
<audio controls autoplay>
<source src="cafe-music-163375.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</footer>
</body>
</html>
CSS file:

body { footer {
font-family: 'Georgia', serif; text-align: center;
background-color: #f9f7f1; padding: 10px;
margin: 0; background-color: #ffcc80;
padding: 0; color: #4e342e;
color: #3e2723;} position: relative;}
header { footer p {
text-align: center; margin: 0;
padding: 20px; }
background-color: #ffcc80;}
header h1 { @media (max-width: 768px) {
font-size: 2.5rem; .container {
margin: 0; flex-direction: column;
font-family: 'Dancing Script', cursive; padding: 10px;
color: #4e342e;} }
.container { .media {
display: flex; flex-direction: column;
flex-wrap: wrap; align-items: center;
justify-content: center; }
gap: 20px; .media img {
padding: 20px; width: 100%;
max-width: 1000px; max-width: 300px;
margin: 0 auto;} }
.media { article {
display: flex; font-size: 1rem;
align-items: center; text-align: center;
gap: 20px; }
flex: 1;} }
.media img { @media (max-width: 480px) {
width: 300px; header h1 {
border-radius: 8px; font-size: 1.8rem;
border: 2px solid #d7ccc8;} }
article { article {
font-size: 1.2rem; font-size: 0.9rem;
line-height: 1.8; line-height: 1.5;
text-align: justify; }
flex: 2; }
color: #5d4037;}

You might also like