1.
Creating an HTML File
Explanation:
An HTML file is the foundation of any webpage. It contains the structure and content
that browsers interpret and display. By creating an HTML file, you set up the
skeleton of your website, which later can be styled with CSS and enhanced with
JavaScript.
Steps:
1. Open any text editor (Notepad, VS Code, Sublime, etc.).
2. Type the basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
3. Save the file with a `.html` extension (e.g., [Link]).
4. Open the file in a web browser to see your webpage.
2. HTML Elements
Explanation:
HTML elements are the building blocks of a webpage. Each element typically has an
opening tag, content, and a closing tag. For example, <p>Hello</p> is a paragraph
element.
Steps:
5. Open your HTML file.
6. Add basic elements like:
<h1>Main Heading</h1>
<p>This is a paragraph.</p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
7. Save and refresh your browser to see the changes.
3. HTML Attributes
Explanation:
Attributes provide additional information about HTML elements. They are written
inside the opening tag and usually come in name-value pairs.
Steps:
8. Add an element with attributes:
<a href="[Link] target="_blank">Visit Example</a>
<img src="[Link]" alt="Company Logo" width="200">
9. Save and view in the browser.
4. HTML Tables
Explanation:
Tables allow you to organize data into rows and columns. They use tags like <table>,
<tr>, <th>, and <td>.
Steps:
10. Insert a table into your HTML file:
<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Alice</td><td>22</td>
</tr>
<tr>
<td>Bob</td><td>25</td>
</tr>
</table>
11. Save and refresh your browser.
5. HTML Links
Explanation:
Links (or anchors) connect webpages and resources. They are created using the <a>
tag with the href attribute.
Steps:
12. Add a link:
<a href="[Link] target="_blank">Go to Google</a>
13. Save and test the link in your browser.
6. Making Navigation
Explanation:
Navigation menus guide users through your website. They are usually a collection of
links styled with CSS.
Steps:
14. Create navigation in HTML:
<nav>
<a href="[Link]">Home</a> |
<a href="[Link]">About</a> |
<a href="[Link]">Contact</a>
</nav>
15. Save and check the links.
7. Creating Tables in HTML
Explanation:
This focuses on detailed table creation with attributes like colspan, rowspan, and
captions.
Steps:
16. <table border="1">
<caption>Student Report</caption>
<tr><th rowspan="2">Name</th><th colspan="2">Scores</th></tr>
<tr><th>Math</th><th>Science</th></tr>
<tr><td>Ali</td><td>90</td><td>85</td></tr>
</table>
8. Adding Images to Your Website
Explanation:
Images make your website visually appealing. They’re added using the <img> tag
with src and alt attributes.
Steps:
17. <img src="[Link]" alt="Beautiful View" width="400">
9. Adding Blocks to Your Website
Explanation:
Blocks are sections or containers in HTML. You can create them with <div> (block-
level) or <span> (inline).
Steps:
18. <div style="background-color: lightblue; padding: 20px;">
<h2>Block Title</h2>
<p>This is a block of content.</p>
</div>
10. Classes
Explanation:
Classes allow you to apply the same style or behavior to multiple elements using CSS
or JavaScript.
Steps:
19. <p class="highlight">This is a highlighted paragraph.</p>
<style>
.highlight { color: red; font-weight: bold; }
</style>
11. HTML Forms
Explanation:
Forms collect input from users, such as text, emails, or passwords. They use the
<form> tag along with various input elements.
Steps:
20. <form action="[Link]" method="post">
<label>Name:</label><input type="text" name="name"><br>
<label>Email:</label><input type="email" name="email"><br>
<input type="submit" value="Submit">
</form>
12. HTML Form Validation
Explanation:
Validation ensures that user input meets specific requirements (e.g., valid email,
required fields).
Steps:
21. <form>
<input type="text" name="username" required placeholder="Enter
username"><br>
<input type="email" name="email" required placeholder="Enter valid
email"><br>
<input type="number" name="age" min="18" max="60" required><br>
<input type="submit" value="Register">
</form>
13. HTML Form Input Types
Explanation:
HTML offers different input types for various data formats, such as text, email,
password, date, file, and radio.
Steps:
22. <form>
<input type="text" placeholder="Text"><br>
<input type="password" placeholder="Password"><br>
<input type="email" placeholder="Email"><br>
<input type="date"><br>
<input type="file"><br>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female<br>
<input type="submit">
</form>
14. HTML Media
Explanation:
Media elements allow you to add videos, audio, and other multimedia content to
your website.
Steps:
23. <video width="400" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support video.
</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
15. HTML APIs
Explanation:
HTML5 introduced APIs that interact with the browser, like Geolocation, Drag &
Drop, and Web Storage.
Steps:
24. <button onclick="getLocation()">Get Location</button>
<p id="demo"></p>
<script>
function getLocation() {
if ([Link])
{ [Link](showPosition);} else
{[Link]("demo").innerHTML = "Geolocation not
supported.";}}
function showPosition(position) {
[Link]("demo").innerHTML = "Latitude: " +
[Link] + "<br>Longitude: " + [Link];}
</script>
16. Creating a CSS File
Explanation:
A CSS file separates design from structure. External CSS makes styling reusable
across multiple pages.
Steps:
25. Create a file named [Link].
26. Add styles:
body {background-color: lightgray; font-family: Arial;} h1 {color: blue;}
27. Link it in HTML: <link rel="stylesheet" href="[Link]">
17. Background Images
Explanation:
CSS allows you to set background images for elements.
Steps:
28. body { background-image: url('[Link]'); background-size: cover;
background-repeat: no-repeat;}
18. Background Colours
Explanation:
You can apply background colors to elements for better visual appeal.
Steps:
29. h1 { background-color: yellow; }
p { background-color: lightblue; }
19. Padding
Explanation:
Padding is the space inside an element, between its content and border.
Steps:
30. div { background-color: lightgreen; padding: 20px; }
20. Margins
Explanation:
Margins are the space outside an element, creating distance between elements.
Steps:
31. p { margin: 30px; }
21. Float
Explanation:
Float positions elements to the left or right within their container.
Steps:
32. img { float: right; margin: 10px; }
22. CSS Navigation Bar
Explanation:
CSS styles navigation links to create horizontal or vertical menus.
Steps:
33. <nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<style>
nav ul { list-style: none; background: #333; padding: 0; }
nav ul li { display: inline-block; }
nav ul li a { color: white; padding: 10px; text-decoration: none; display: block; }
nav ul li a:hover { background: #555; }
</style>
23. CSS Image Gallery
Explanation:
Image galleries display multiple images in a clean, grid-like structure.
Steps:
34. <div class="gallery">
<img src="[Link]" width="200">
<img src="[Link]" width="200">
<img src="[Link]" width="200">
</div>
<style>
.gallery img { margin: 5px; border: 2px solid #ddd; transition: 0.3s; }
.gallery img:hover { border-color: #333; }
</style>
24. CSS Forms
Explanation:
CSS improves the appearance of forms, making them user-friendly.
Steps:
35. <form>
<input type="text" placeholder="Name"><br>
<input type="email" placeholder="Email"><br>
<button>Submit</button>
</form>
<style>
input, button { padding: 10px; margin: 5px; width: 250px; border-radius: 5px; }
button { background: blue; color: white; border: none; }
</style>
25. CSS Website Layout
Explanation:
CSS layouts structure your website into header, navigation, content, and footer.
Steps:
<header>Header</header>
<nav>Navigation</nav>
<main>Content Area</main>
<footer>Footer</footer>
<style>
header, nav, main, footer { padding: 20px; margin: 10px; background: #eee; }
</style>
26. CSS Buttons
Explanation:
CSS transforms plain buttons into visually appealing, clickable elements.
Steps:
<button class="btn">Click Me</button>
<style>
.btn { background: green; color: white; padding: 10px 20px; border: none;
border-radius: 5px; }
.btn:hover { background: darkgreen; }
</style>
27. CSS Pagination
Explanation:
Pagination divides content into multiple pages and improves navigation.
Steps:
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">»</a>
</div>
<style>
.pagination a { color: black; float: left; padding: 8px 16px; text-decoration:
none; }
.pagination a:hover { background-color: #ddd; }
</style>
28. CSS User Interface
Explanation:
CSS UI properties enhance user experience by customizing elements like resize,
outline, and cursor.
Steps:
<textarea class="resizable"></textarea>
<p class="pointer">Hover over me!</p>
<style>
.resizable { resize: both; overflow: auto; }
.pointer { cursor: pointer; outline: 2px solid red; padding: 5px; }
</style>