Scribd
Upload
3 views12 pages

shivam

This document is a lab record for a Web Designing Workshop for the B.Tech CSE-AI program, detailing various experiments conducted by Shivam Rathore. Each lab focuses on different aspects of web development, including HTML structure, forms, CSS styling, media embedding, responsive design, semantic HTML, and creating lists and tables. The document includes objectives, instructions, and code examples for each lab exercise.

Uploaded by

animehindiexplaner
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
3 views12 pages

shivam

This document is a lab record for a Web Designing Workshop for the B.Tech CSE-AI program, detailing various experiments conducted by Shivam Rathore. Each lab focuses on different aspects of web development, including HTML structure, forms, CSS styling, media embedding, responsive design, semantic HTML, and creating lists and tables. The document includes objectives, instructions, and code examples for each lab exercise.

Uploaded by

animehindiexplaner
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/ 12

DEAPRTMENT OF B.

TECH CSE-AI
SESSION 2024- 25 , THIRD SEMESTER

LAB RECORD

WEB DESIGNING WORKSHOP


(BCC-353)

Submitted to : submitted by :
Dr. Ishwar singh Shivam Rathore
Professor ID: 2300195
Depart. Of CSE Roll no. 2301321520094
NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

Lab 1: Basic HTML Page Structure


Objective:

Create a basic HTML page with standard elements.

Instructions:

1. Open your text editor and create a new file named index.html.
2. Structure the file with HTML5 doctype and basic elements.
3. Add a header, navigation, main content area, and footer.

CODE:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Home</h2>
<p>Welcome to the home page!</p>
</section>
<section id="about">
<h2>About</h2>
<p>About us section.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Contact us here.</p>
</section>
</main>
<footer>
<p>&copy; 2024 My Web Page</p>
</footer>
</body>
</html>

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :


NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :


NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

Lab 2: Working with Form

Objective:

Create and style an HTML form.

Instructions:

1. Create a new file named form.html.


2. Add form elements such as text inputs, email inputs, textareas, checkboxes, and a submit button.

CODE:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>

<label for="subscribe">
<input type="checkbox" id="subscribe" name="subscribe">
Subscribe to newsletter
</label>

<button type="submit">Send</button>
</form>
</body>
</html>

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :


NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :


NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

Lab 3: Styling with CSS

Objective:

Apply CSS styles to an HTML document.

Instructions:

1. Create a new file named styles.css.


2. Link the CSS file to your HTML document.
3. Apply styles to different elements.

CODE:

index.html

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Styled Web Page</h1>
</header>
<main>
<p>This page has been styled with CSS.</p>
</main>
</body>
</html>

styles.css

css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :
NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

main {
padding: 1em;
}

p {
color: #555;
}

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :


NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

Lab 5: Embedding Media

Objective:

Embed video and audio elements in an HTML document.

Instructions:

1. Create a new file named media.html.


2. Embed a video and an audio file.

CODE:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Embedding</title>
</head>
<body>
<h1>Embedding Media</h1>

<h2>Video</h2>
<video width="600" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :


NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

Lab 6: Responsive Design Basics


Objective:

Create a responsive web page using media queries.

Instructions:

1. Create a new file named responsive.html.


2. Implement responsive design techniques using media queries.

CODE:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
@media (max-width: 600px) {
.container {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Design</h1>
<p>This page adjusts its layout based on the screen size.</p>
</div>
</body>
</html>

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :


NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

Lab 7: Using HTML5 Semantic Elements

Objective:

Implement HTML5 semantic elements to structure content effectively.

Instructions:

1. Create a new file named semantic.html.


2. Use semantic HTML5 elements to organize content.

Exercise:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML</title>
</head>
<body>
<header>
<h1>Semantic HTML Example</h1>
</header>

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<main>
<article>
<h2>Main Article</h2>
<p>This is the main article content.</p>
</article>

<aside>
<h3>Related Information</h3>
<p>Additional details or links can be placed here.</p>
</aside>
</main>

<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :


NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

Lab 4: Creating Lists and Tables

Objective:

Create and style HTML lists and tables.

Instructions:

1. Create a new file named lists-tables.html.


2. Add ordered and unordered lists, and create a table with headers and rows.

CODE:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists and Tables</title>
</head>
<body>
<h1>Lists and Tables</h1>

<h2>Unordered List</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<h2>Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

<h2>Table</h2>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :


NAME: Shivam Rathore ROLL No. 2301321520094
EXPERIMENT No. : DATE :

<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</body>
</html>

FACULTY NAME : DR. ISHWAR SINGH SIGNATURE :

You might also like