[Link].1 Create a Simple Web Page using Basic HTML Tags.
Aim:
To design and develop a simple static web page using basic HTML tags such as headings,
paragraphs, lists, images, links, and tables.
Algorithm / Steps
1. Open a text editor.
2. Create a new file and save it with .html extension.
3. Define the basic HTML structure using <html>, <head>, and <body> tags.
4. Add headings and paragraph content.
5. Insert lists, images, and hyperlinks.
6. Create a simple table.
7. Save the file.
8. Open the file in a web browser to view the output.
1. Heading Tag
<html>
<head>
<title>heading tags example </title>
</head>
<body>
<h1>heading1</h1>
<h2>heading2</h2>
<h3>heading3</h3>
<h4>heading4</h4>
<h5>heading5</h5>
<h6>heading6</h6>
</body>
</html>
1
2. Formatting Text phrases
<html>
<head><title>Formatting Text phrases</title></head>
<body>
<span style=”font-style:italic”>span italic</span><br/>
<span style=”text-decoration:underline”> span underline</span><br/><tt><br/><strong>strong </strong><br/>
<b>bold</b><br/><i>italic</li><br/>
<big>big</big><br/>
<small>small</small><hr/>
</body>
3. Horizontal rule:<hr>
Horizontal rule is produced using hr
Also an empty element<hr/>
Style can be modified using style sheet technology
Example
<html>
<head>Horizontal Line</head>
<title>Lines</title>
<h1>Amrita Viswa Vidhyapeetham</h1>
<h2>Nagercoil</h2>
<hr>
Courses
</html>
4. Image tag
<!DOCTYPE html>
<html>
<body>
<img src="[Link]" width="104" height="142"></body>
</html>
5. Text Alignment
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
<div align="center">This line is aligned at center</div>
<div align="left">This line is aligned at left</div>
<div align="right">This line is aligned at right</div>
</body>
</html>
6. Setting the Font
<!DOCTYPE html>
<html>
<body>
<p style="font-family:verdana;font-size:110%;color:green">
This is a paragraph with some text in it. This is a paragraph with some text in it.
This is a paragraph with some text in it. This is a paragraph with some text in it.
</p>
</body>
</html>
2
7. background color
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
8. LINKS: <a> ELEMENT
<!DOCTYPE html>
<html>
<body>
<a href="[Link]
This is a link</a>
</body>
</html>
9. List
Unordered
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered List
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Definition List
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
3
10. Tables
<!DOCTYPE html>
<html>
<body>
<h4>This table has no borders:</h4>
<table border=’2’>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
CELLPADDING
Control the white space between the cell content and the borders
Program
<!DOCTYPE html>
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1"> OUTPUT
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
4
CELL SPACING
Control the distance between the cells
Program
<!DOCTYPE html>
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Practice questions
Create an Educational Website using HTML Tags
Create an Personal portfolio pages using HTML Tags
Create an HTML document containing six short paragraphs describing different tourist
attractions of your country and add HTML tags containing a list of tourist places in your state.
Create an HTML web page that displays a student information table with columns such as Roll
Number, Name, Department, and Year.
Apply:
A background color for the table header
A different text color for table data
A border around the table
5
[Link].2 Develop a Web Page with Hyperlinks and Images.
Aim:
To develop a Web Page with Hyperlinks and Images
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Page with Hyperlinks and Images</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f6f8;
margin: 30px;
}
h1 {
color: #003366;
}
p{
font-size: 16px;
}
a{
color: #0066cc;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
img {
width: 300px;
height: auto;
border: 2px solid #333;
margin-top: 15px;
}
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>
This web page demonstrates the use of <b>hyperlinks</b> and <b>images</b> using
6
HTML.
</p>
<!-- Hyperlinks -->
<h2>Useful Links</h2>
<ul>
<li><a href="[Link] target="_blank">Visit Google</a></li>
<li><a href="[Link] target="_blank">Visit Wikipedia</a></li>
<li><a href="[Link] target="_blank">Learn HTML
(W3Schools)</a></li>
</ul>
<!-- Image -->
<h2>Sample Image</h2>
<img src="[Link] alt="Sample Image">
<p>
Click the above links to navigate to different websites. The image shown is an example of
embedding an image in a web page.
</p>
</body>
</html>
Output:
Welcome to My Web Page
This web page demonstrates the use of hyperlinks and images using HTML.
Useful Links
Visit Google
Visit Wikipedia
Learn HTML (W3Schools)
Sample Image
7
Click the above links to navigate to different websites. The image shown is an example
of embedding an image in a web page.
Practice Questions:
1. Department Web Page
Create a web page for a department that displays:
Department image
Hyperlinks to Faculty Details, Syllabus, and Research Areas
2. Tourism Promotion Page
Design a tourism web page that shows:
Images of three tourist places
Each image should act as a hyperlink to a webpage providing more details
3. Online Shopping Portal (Basic)
Develop a product showcase page that includes:
Product images
Hyperlinks labeled View Details and Buy Now
4. Event Promotion Page
Develop a web page to promote an event with:
Event poster image
Hyperlinks for Registration and Schedule
8
Ex. No.3 Design a web page to create table and List. Apply background color
and text color for a web page.
Aim:
To design a web page to create table and List. Apply background color and text color for a web
page.
Program:
<!DOCTYPE html>
<html>
<head>
<title>Table and List Web Page</title>
</head>
<body bgcolor="lightyellow" text="black">
<h1 align="center">Web Page with Table and List</h1>
<!-- Table Section -->
<h2>Student Details Table</h2>
<table border="1" cellpadding="10" cellspacing="0" bgcolor="lightblue">
<tr bgcolor="orange">
<th>Name</th>
<th>Roll No</th>
<th>Department</th>
</tr>
<tr>
<td>XXX</td>
<td>101</td>
<td>AID</td>
</tr>
<tr>
<td>YYY</td>
<td>102</td>
<td>AID</td>
</tr>
</table>
<br><br>
<!-- List Section -->
<h2>Course Subjects List</h2>
<ul bgcolor="lightgreen">
<li>Data Structures</li>
<li>User Interface Design</li>
<li>Database Management Systems</li>
<li>Operating Systems</li>
</ul>
</body>
</html>
9
Output
Practice Questions
1. Design a web page for a college portal that displays student and academic information.
Create a simple table to display student details (Roll No, Name, Branch).
Apply cell spacing and padding to improve table readability.
Use an unordered list to display available departments.
Use a simple list to display college facilities.
2. Design a basic product listing page for an online shopping website.
Create a table to display product name, price, and availability.
Use cell padding for spacing.
Use an unordered list to display product features.
Use an ordered list to show steps for placing an order.
[Link] a web page for a hospital information system.
Create a table to show doctor duty schedules.
Use rowspan for doctor names.
Use colspan for morning/evening shifts.
Use a simple list to show hospital services.
Use an unordered list for departments.
10
[Link].4 Write HTML code to embed images, videos, and audio in a webpage.
Aim:
To Write HTML code to embed images, videos, and audio in a webpage
Steps:
Create a new text file and save it with the .html extension (for example, [Link]).
Define the basic HTML document structure using the <!DOCTYPE html>, <html>, <head>,
and <body> tags.
Use the <img> tag inside the <body> section to embed an image by specifying the image file
path and alternate text.
Insert a video into the webpage using the <video> tag along with the controls attribute and
appropriate <source> elements.
Embed an audio file using the <audio> tag with the controls attribute and supported audio
formats.
Save the file and open it in a web browser to verify that the image, video, and audio are
displayed and playable correctly.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedding Media in HTML</title>
</head>
<body>
<h1>HTML Media Embedding Example</h1>
<!-- Image Embedding -->
<h2>Image</h2>
<img src="[Link]" alt="Sample Image" width="300" height="200">
<!-- Video Embedding -->
<h2>Video</h2>
<video width="400" height="300" controls>
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- Audio Embedding -->
<h2>Audio</h2>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
11
</audio>
</body>
</html>
Output
Result :
12
1. Practice Questions:
Write an HTML program to embed an image with a specified width and height, and
explain the purpose of the alt attribute.
2. Modify the given webpage to include multiple image formats and explain how browsers
select the supported format.
3. Create an HTML page that embeds a video without controls and enables autoplay and
loop features.
4. Write an HTML program to embed an audio file with multiple <source> elements and
explain why multiple formats are used.
5. Differentiate between the <embed> tag and the <audio> / <video> tags with suitable
examples.
13
[Link].5 Create a Web Page using HTML5 Semantic Elements.
Aim:
To Create a Web Page using HTML5 Semantic Elements.
Steps:
1. Create a new file and save it with a .html extension.
2. Write the basic HTML5 document structure.
3. Use the <header> tag to define the page header.
4. Insert a navigation menu using the <nav> element.
5. Add main content using <section> and <article> tags.
6. Include additional related content using the <aside> tag.
7. Add page information such as copyright using the <footer> tag.
8. Save the file and open it in a web browser to view the output.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Semantic Elements</title>
</head>
<body>
<header>
<h1>Welcome to HTML5</h1>
<p>Understanding Semantic Elements</p>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<section>
<h2>Introduction</h2>
<p>
HTML5 semantic elements clearly describe their meaning to both
the browser and the developer.
14
They improve code readability and accessibility.
</p>
</section>
<article>
<h2>Semantic Elements</h2>
<p>
Examples of semantic elements include header, footer, section,
article, nav, and aside.
These elements help in structuring the web page effectively.
</p>
</article>
<aside>
<h3>Did You Know?</h3>
<p>
Semantic HTML improves SEO and accessibility for screen readers.
</p>
</aside>
<footer>
<p>© 2026 HTML5 Learning</p>
</footer>
</body>
</html>
Output:
15
Practice Questions:
1. Design a college department website homepage using appropriate HTML5 semantic
elements for header, navigation, main content, and footer.
2. Convert an existing non-semantic webpage layout (using only <div> tags) into a fully
semantic HTML5 structure and explain the changes made.
3. Create a blog page where each blog post is represented using <article> and grouped
under a <section>.
4. Develop a news portal webpage where the main news is displayed using <article> and
related news is shown using <aside>.
5. Design an e-commerce product page using semantic elements to represent product
details, reviews, and additional offers.
6. Create a webpage layout for an online course platform using <header>, <nav>,
<section>, <article>, and <footer>.
16
[Link].6 Create a web-based form with input fields, dropdowns, checkboxes, and buttons
Aim:
To design and develop a web-based form using HTML that collects user information through input
fields, dropdown menus, checkboxes, and buttons.
Steps:
1. Create a new file and save it with a .html extension.
2. Define the basic HTML structure using <html>, <head>, and <body> tags.
3. Create a form using the <form> tag.
4. Add input fields such as text, email, and password using the <input> tag.
5. Insert a dropdown list using the <select> and <option> tags.
6. Include radio buttons and checkboxes for selection inputs.
7. Add a submit and reset button to complete the form.
8. Save and open the file in a web browser to view the form.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web-Based Form</title>
</head>
<body>
<h2>User Registration Form</h2>
<form>
<!-- Text Input -->
<label>Full Name:</label><br>
<input type="text" name="fullname" required><br><br>
<!-- Email Input -->
<label>Email Address:</label><br>
<input type="email" name="email" required><br><br>
<!-- Password Input -->
<label>Password:</label><br>
<input type="password" name="password"><br><br>
<!-- Dropdown -->
<label>Department:</label><br>
<select name="department">
<option value="cse">Computer Science</option>
<option value="ece">Electronics</option>
17
<option value="eee">Electrical</option>
<option value="mech">Mechanical</option>
</select><br><br>
<!-- Radio Buttons -->
<label>Gender:</label><br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other<br><br>
<!-- Checkboxes -->
<label>Skills:</label><br>
<input type="checkbox" name="skill1"> HTML
<input type="checkbox" name="skill2"> CSS
<input type="checkbox" name="skill3"> JavaScript<br><br>
<!-- Textarea -->
<label>Address:</label><br>
<textarea rows="4" cols="30"></textarea><br><br>
<!-- Buttons -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output:
18
Result
A web-based form with input fields, dropdowns, checkboxes, and buttons is successfully
created and displayed in a web browser.
Practice Questions.
1. Design a student registration form for a college website using HTML form elements.
2. Modify the form to include validation using required, pattern, and maxlength attributes.
3. Create a job application form that includes file upload and date input fields.
19
[Link].7 To design a webpage using media queries to design a responsive webpage that
adjusts for different screen sizes.
Aim
To design and develop a responsive webpage using CSS media queries that automatically
adjusts its layout and appearance for desktop, tablet, and mobile screen sizes.
Algorithm / Steps
1. Create an HTML file and define the basic structure using HTML5 tags.
2. Apply CSS styles for desktop view as the default layout.
3. Use @media queries to define styles for tablet screens.
4. Use @media queries to define styles for mobile screens.
5. Test the webpage by resizing the browser window.
6. Verify layout changes for different screen widths.
HTML Tags Used
Tag Description
<html> Root element of the webpage
<head> Contains meta information and CSS
<title> Title of the webpage
<style> Internal CSS styling
<body> Main content of the webpage
<header> Header section
<div> Content containers
<h1>, <h2> Headings
<p> Paragraph text
<footer> Footer section
Program Code
<!DOCTYPE html>
<html>
<head>
<title>Responsive Webpage</title>
<style>
body {
font-family: Arial;
margin: 0;
background-color: #f2f2f2;
}
header {
background-color: #003366;
color: white;
text-align: center;
padding: 20px;
}
.container {
display: flex;
padding: 20px;
gap: 20px;
20
}
.box {
flex: 1;
background-color: white;
padding: 20px;
border-radius: 5px;
}
footer {
background-color: #003366;
color: white;
text-align: center;
padding: 10px;
}
/* Tablet View */
@media screen and (max-width: 1024px) {
.container {
flex-direction: column;
}
}
/* Mobile View */
@media screen and (max-width: 768px) {
header {
font-size: 18px;
}
.box {
font-size: 14px;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive Web Design</h1>
</header>
<div class="container">
<div class="box">
<h2>HTML</h2>
<p>HTML defines webpage structure.</p>
</div>
<div class="box">
<h2>CSS</h2>
<p>CSS styles the webpage.</p>
</div>
<div class="box">
<h2>Media Queries</h2>
<p>Media queries make the page responsive.</p>
</div>
</div>
<footer>
<p>Web Technology Lab</p>
</footer>
</body>
</html>
21
Output
Result
Thus, a responsive webpage was successfully designed using CSS media queries, and the
webpage adapts effectively to different screen sizes such as desktop, tablet, and mobile.
Practice Questions.
1. A university website must be accessible on desktops, tablets, and mobile phones.
How can CSS media queries be used to modify the layout of the webpage for smaller
screens?
Explain with a suitable example.
2. An e-commerce website displays three product cards in a row on desktop screens.
When viewed on a mobile phone, the cards appear too small.
How will you redesign the layout using media queries to improve readability on
mobile devices?
3. web developer wants to reduce font size and padding when a webpage is accessed
from a mobile device to improve performance and usability.
Which media query conditions will be used, and how will the CSS rules be applied?
22
[Link].8 To style a web page using CSS apply external, internal, and inline CSS to style a
webpage.
Aim
To design and style a web page using the three types of CSS:
1. Inline CSS
2. Internal CSS
3. External CSS
and understand the difference between them.
CSS (Cascading Style Sheets) is used to control the presentation of HTML elements.
There are three ways to apply CSS:
1. Inline CSS – Applied directly inside HTML tags.
2. Internal CSS – Written inside <style> tag in <head>.
3. External CSS – Written in a separate .css file.
Step 1:
Create a file named:
[Link]
Step 2:
Create another file named:
[Link]
Step 3:
Link the external CSS file in HTML.
Step 4:
Apply:
Inline CSS to one element
Internal CSS to some elements
External CSS to remaining elements
Step 5:
Open [Link] in browser and observe output.
Code :
Inline CSS
<!DOCTYPE html>
23
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="color: red; text-align: center;">
Inline CSS Example
</h1>
<p style="color: blue; font-size: 18px;">
This paragraph is styled using inline CSS.
</p>
<button style="background-color: green; color: white; padding: 10px;">
Submit
</button>
</body>
</html>
Output
Internal CSS
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body {
24
background-color: lightgray;
}
h1 {
color: purple;
text-align: center;
}
p{
font-size: 18px;
color: darkblue;
}
</style>
</head>
<body>
<h1>Internal CSS Example</h1>
<p>This paragraph is styled using internal CSS.</p>
<p>All styles are inside the style tag.</p>
</body>
</html>
External CSS
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>External CSS Example</h1>
<p>This is styled using an external CSS file.</p>
<button>Login</button>
</body>
</html>
body {
background-color: #f0f8ff;
}
h1 {
25
color: green;
text-align: center;
}
[Link]
p{
font-size: 18px;
color: brown;
}
button {
background-color: black;
color: white;
padding: 10px 20px;
}
Practice Questions
1. Design a web page using Inline CSS to style:
A heading with red color
A paragraph with blue color
A button with green background
[Link] a web page using Internal CSS to:
Set background color for the page
Center align the heading
Change font size of all paragraphs
[Link] a web page using External CSS where:
Heading should be in purple color
Paragraph should have border and padding
Button should have black background and white text, image ,video,
[Link] a single web page demonstrating all three types of CSS:
Inline CSS for heading
Internal CSS for paragraph
External CSS for button
26
[Link].9 Create a Personal Profile Page using CSS Formatting.
Aim
To design and develop a Personal Profile Web Page using HTML and apply CSS formatting to improve
the appearance of the page.
Algorithm / Procedure
1. Start the program.
2. Create an HTML file named [Link].
3. Add basic HTML structure using <html>, <head>, and <body> tags.
4. Insert personal details using:
o <h1> for name
o <p> for description
o <ul> for skills
o <img> for profile photo
5. Create a CSS file named [Link].
6. Apply CSS formatting such as:
o Background color
o Font styles
o Text alignment
o Borders and padding
7. Link the CSS file with the HTML file.
8. Open the HTML file in a web browser.
9. Observe the styled profile page.
10. Stop.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="profile">
<img src="[Link]" alt="Profile Photo" class="photo">
<h1>Jothi Lakshmi</h1>
<p class="dept">[Link] - Artificial Intelligence & Data Science</p>
<h2>About Me</h2>
<p>
I am a student interested in web development and artificial intelligence.
I enjoy learning new technologies and building creative projects.
</p>
<h2>Skills</h2>
27
<ul>
<li>HTML & CSS</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Data Analysis</li>
</ul>
<h2>Contact</h2>
<p>Email: jothi@[Link]</p>
<p>Phone: 9876543210</p>
</div>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="profile">
<img src="[Link]" alt="Profile Photo" class="photo">
<h1>Jothi Lakshmi</h1>
<p class="dept">[Link] - Artificial Intelligence & Data Science</p>
<h2>About Me</h2>
<p>
I am a student interested in web development and artificial intelligence.
I enjoy learning new technologies and building creative projects.
</p>
<h2>Skills</h2>
<ul>
<li>HTML & CSS</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Data Analysis</li>
</ul>
<h2>Contact</h2>
<p>Email: jothi@[Link]</p>
<p>Phone: 9876543210</p>
</div>
</body>
</html>
28
Result
Thus, a Personal Profile Web Page was successfully created using HTML and styled using
CSS formatting. The CSS improved the layout, colors, fonts, and overall presentation of the
page.
29
[Link].10 Implement of margins, padding, borders, and positioning properties
in CSS to design a webpage layout
Aim:
To design a simple webpage layout using CSS margin, padding, border, and positioning
properties in order to understand the CSS box model and element placement.
ALGORITHM
1. Start the program.
2. Create an HTML structure consisting of header, sidebar, content, and footer.
3. Link an external CSS file to the HTML document.
4. Apply margin to control spacing between elements.
5. Apply padding to create space inside elements.
6. Apply border to visually separate sections.
7. Use CSS positioning properties (relative, absolute, fixed) to arrange the layout.
8. Save and execute the HTML file in a web browser.
9. Observe the designed webpage layout.
10. Stop the program.
Program
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Layout Design</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header class="header">
Website Header
</header>
<div class="container">
30
<div class="sidebar">
Sidebar Menu
</div>
<div class="content">
<h2>Main Content</h2>
<p>This section demonstrates margin, padding, border, and positioning.</p>
</div>
</div>
<footer class="footer">
Website Footer
</footer>
</body>
</html>
[Link]
/* Body */
body {
margin: 0;
font-family: Arial, sans-serif;
/* Header */
.header {
padding: 20px;
31
background-color: steelblue;
color: white;
text-align: center;
border-bottom: 3px solid navy;
/* Container */
.container {
margin: 20px;
position: relative;
/* Sidebar */
.sidebar {
width: 200px;
padding: 15px;
background-color: lightgray;
border: 2px solid gray;
position: absolute;
left: 0;
top: 0;
/* Content */
.content {
margin-left: 230px;
padding: 20px;
border: 2px solid black;
background-color: #f9f9f9;
32
}
/* Footer */
.footer {
padding: 15px;
background-color: black;
color: white;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
Practice problems
1. Problem 1: Basic Box Model
Task:
Create a <div> with class box1
Set:
o Width: 300px
o Padding: 20px
o Border: 3px solid blue
o Margin: 15px
Add background color and text inside the box
33
Problem 2: Comparing Padding vs Margin
Objective: Differentiate padding and margin
Task:
Create two <div> elements
First div: large padding, small margin
Second div: small padding, large margin
Apply different background colors
Problem 3: Border Styling
Objective: Use different border properties
Task:
Create three boxes with:
o Dotted border
o Dashed border
o Double border
Set different border colors and widths
Problem 4: Fixed Navigation Bar
Objective: Use position: fixed
Task:
Create a navigation bar at the top of the page
Fix it using CSS
Add page content long enough to scroll
34
[Link].11 Design a webpage using CSS transitions and keyframes to create
animations(e.g., a button hover effect).
Aim:
To design a webpage using CSS transitions and keyframe animations to create interactive
visual effects, such as a button hover animation.
Algorithm / Steps
1. Create a basic HTML structure using <html>, <head>, and <body> tags.
2. Add a button element inside the body section.
3. Use CSS to style the button with background color, padding, and border.
4. Apply CSS transition properties to animate changes on hover.
5. Define a CSS keyframes animation to create additional effects such as scaling or color
change.
6. Apply the animation to the button when hovered.
7. Save the file with .html extension and open it in a web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
button {
padding: 15px 30px;
font-size: 18px;
border: none;
border-radius: 6px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.4s ease, transform 0.4s ease;
}
button:hover {
background-color: #0056b3;
transform: scale(1.1);
animation: pulse 0.6s;
}
@keyframes pulse {
35
0% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
100% {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<button>Hover Me</button>
</body>
</html>
Output
Result
Thus, a webpage was successfully designed using CSS transitions and keyframe animations,
and an animated hover effect was applied to a button.
Practice Problems
1. Create a button that changes color and rotates slightly on hover using CSS transitions.
2. Design a loading animation using @keyframes.
3. Apply a fade-in animation to a text element when the page loads.
4. Create a bouncing ball animation using CSS keyframes.
5. Design a navigation menu with animated hover underline effects.
6. Modify the button animation to include a shadow glow effect.
36
7. Create a card element that flips on hover using CSS animations.
8. Use animation-delay to animate multiple elements sequentially.
37