Web design:-Practical
Practical:-1
Creating a Simple Web Page with HTML Use basic tags: headings, paragraphs, bold, italic,
lists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
<!-- Heading -->
<h1>Welcome to My Web Page</h1>
<!-- Paragraph -->
<p>This is a simple web page created using <b>HTML</b>. It shows how to use basic tags such as
headings, paragraphs, bold, italic, and lists.</p>
<!-- Bold and Italic -->
<p>HTML is the <b>foundation</b> of web development. It is also <i>easy to learn</i> and very
powerful.</p>
<!-- Unordered List -->
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Traveling</li>
<li>Photography</li>
</ul>
<!-- Ordered List -->
<h2>Steps to Create a Web Page</h2>
<ol>
<li>Open a text editor (like Notepad or VS Code).</li>
<li>Write your HTML code.</li>
<li>Save the file with a <code>.html</code> extension.</li>
<li>Open it in a web browser.</li>
</ol>
<!-- Conclusion Paragraph -->
<p>With just a few simple tags, you can build your own web pages and start your journey into web
development!</p>
</body>
</html>
Asst Prof Asmaa Shaikh
Web design:-Practical
Practical :-2
Formatting and Organizing Content Use tables, hyperlinks, images, and lists on a single
webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Organized Webpage Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 30px;
background-color: #f9f9f9;
}
h1 {
color: #2c3e50;
}
table {
width: 60%;
border-collapse: collapse;
margin: 20px 0;
}
table, th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
img {
max-width: 300px;
height: auto;
margin: 20px 0;
}
ul {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Welcome to My Simple Webpage</h1>
<p>This page shows how to format and organize content using different HTML elements like
tables, lists, images, and hyperlinks.</p>
<!-- Hyperlink -->
<p>Visit <a href="[Link] target="_blank">Wikipedia</a> to learn more
about any topic!</p>
<!-- Image -->
Asst Prof Asmaa Shaikh
Web design:-Practical
<img
src="[Link]
" alt="Sample Image">
<!-- List -->
<h2>My Favorite Hobbies</h2>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Photography</li>
<li>Traveling</li>
</ul>
<!-- Table -->
<h2>Weekly Schedule</h2>
<table>
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Work on projects</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Read a book</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Go for a walk</td>
</tr>
<tr>
<td>Thursday</td>
<td>Online course</td>
</tr>
<tr>
<td>Friday</td>
<td>Watch a movie</td>
</tr>
</table>
</body>
</html>
Asst Prof Asmaa Shaikh
Web design:-Practical
Practical :-3
Designing a Contact Form in HTML Include input fields, text areas, checkboxes, radio buttons,
and a submit button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Contact Form</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 30px;
background-color: #f0f8ff;
}
form {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
max-width: 400px;
}
label {
display: block;
margin-top: 15px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
}
input[type="checkbox"],
input[type="radio"] {
margin-right: 5px;
}
input[type="submit"] {
margin-top: 20px;
padding: 10px 15px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h2>Contact Us</h2>
Asst Prof Asmaa Shaikh
Web design:-Practical
<form action="#" method="post">
<!-- Name -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<!-- Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- Gender (Radio Buttons) -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="Male">
<label for="male" style="display:inline;">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female" style="display:inline;">Female</label>
<!-- Interests (Checkboxes) -->
<label>Interests:</label>
<input type="checkbox" id="coding" name="interest" value="Coding">
<label for="coding" style="display:inline;">Coding</label><br>
<input type="checkbox" id="music" name="interest" value="Music">
<label for="music" style="display:inline;">Music</label><br>
<input type="checkbox" id="travel" name="interest" value="Travel">
<label for="travel" style="display:inline;">Travel</label>
<!-- Message (Text Area) -->
<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
</body>
</html>
Asst Prof Asmaa Shaikh
Web design:-Practical
Practical :-4
Working with CSS for Styling Apply inline, internal, . Style text, backgrounds, and borders
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Styling Example</title>
<!-- Internal CSS -->
<style>
/* Style for body background */
body {
background-color: #f0f8ff; /* Light blue background */
font-family: Arial, sans-serif;
}
/* Text styling */
h1 {
color: darkblue;
text-align: center;
}
/* Styled box with border and background */
.box {
background-color: #ffffff; /* White background */
border: 2px solid #4CAF50; /* Green border */
padding: 20px; /* Inner spacing */
margin: 20px auto; /* Center the box */
width: 50%;
border-radius: 10px; /* Rounded corners */
text-align: center;
}
/* Highlighted text */
.highlight {
color: red;
font-weight: bold;
font-size: 18px;
}
</style>
</head>
<body>
<!-- Inline CSS applied directly -->
<h1 style="text-decoration: underline;">CSS Styling: All in One</h1>
<!-- Internal CSS class used -->
<div class="box">
<p>This box uses internal CSS for background, border, and padding.</p>
<p class="highlight">This text is styled using a CSS class!</p>
<!-- Inline styling on paragraph -->
<p style="color: blue; font-style: italic;">
This paragraph is styled with inline CSS.
</p>
</div>
</body>
</html>
Asst Prof Asmaa Shaikh
Web design:-Practical
Practical 5:-
Building a Web Page Layout Using CSS Use positioning techniques (relative, absolute, fixed),
and the box model.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Page Layout Example</title>
<!-- Internal CSS -->
<style>
/* Box Model example for body */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Header - Fixed Position */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
border-bottom: 3px solid #333;
z-index: 1000;
}
/* Sidebar - Absolute Position */
.sidebar {
position: absolute;
top: 100px;
left: 0;
width: 200px;
height: 300px;
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 15px;
box-sizing: border-box;
}
/* Content - Relative Position */
.content {
position: relative;
margin-left: 220px; /* leave space for sidebar */
padding: 20px;
background-color: #e9e9e9;
border: 2px solid #999;
margin-top: 100px; /* leave space for fixed header */
}
Asst Prof Asmaa Shaikh
Web design:-Practical
/* Footer - Simple block */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- Fixed Header -->
<div class="header">
Fixed Header (Position: fixed)
</div>
<!-- Absolute Sidebar -->
<div class="sidebar">
Sidebar (Position: absolute)<br>
Navigation / Links
</div>
<!-- Main Content Area -->
<div class="content">
<h2>Main Content Area</h2>
<p>This content box uses <strong>relative positioning</strong> and shows how the box model
works.</p>
<ul>
<li><strong>Margin:</strong> Space outside the border</li>
<li><strong>Padding:</strong> Space inside the box</li>
<li><strong>Border:</strong> Line around the content</li>
<li><strong>Width & Height:</strong> Controls box size</li>
</ul>
</div>
<!-- Footer -->
<div class="footer">
Simple Footer
</div>
</body>
</html>
Asst Prof Asmaa Shaikh
Web design:-Practical
Practical 6:-
Designing a Multi-page Website Use navigation links between pages (e.g., Home, About,
Contact)
1. [Link] (Home Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Home - Simple Multi-page Website</title>
<style>
/* Simple internal CSS for navigation styling */
body {
font-family: Arial, sans-serif;
margin: 0; padding: 0;
background-color: #f0f8ff;
}
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav [Link] {
background-color: #4CAF50;
color: white;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<nav>
<a href="[Link]" class="active">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
<div class="content">
<h1>Welcome to the Home Page</h1>
<p>This is a simple multi-page website using navigation links.</p>
</div>
</body>
</html>
Asst Prof Asmaa Shaikh
Web design:-Practical
2. [Link] (About Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>About - Simple Multi-page Website</title>
<style>
/* Same CSS for consistency */
body {
font-family: Arial, sans-serif;
margin: 0; padding: 0;
background-color: #f0f8ff;
}
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav [Link] {
background-color: #4CAF50;
color: white;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]" class="active">About</a>
<a href="[Link]">Contact</a>
</nav>
<div class="content">
<h1>About Us</h1>
<p>This page gives you some information about our website.</p>
</div>
</body>
</html>
Asst Prof Asmaa Shaikh
Web design:-Practical
3. [Link] (Contact Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Contact - Simple Multi-page Website</title>
<style>
/* Same CSS for consistency */
body {
font-family: Arial, sans-serif;
margin: 0; padding: 0;
background-color: #f0f8ff;
}
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
nav [Link] {
background-color: #4CAF50;
color: white;
}
.content {
padding: 20px;
}
</style>
</head>
<body>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]" class="active">Contact</a>
</nav>
<div class="content">
<h1>Contact Us</h1>
<p>You can reach us by email at <a
href="[Link]
</div>
</body>
</html>
Asst Prof Asmaa Shaikh