Exercise: Creating a Simple Web Page
Question:
Create a simple web page with the following elements:
- Title: "Welcome to My Website"
- Heading: "Introduction"
- Paragraph: "This is my first website. Welcome!"
- Link: "Click here to learn more" linking to "https://www.example.com"
- Image: An image of your choice with alt text "My Website Logo"
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Description of your website">
<meta name="keywords" content="keywords, for, SEO">
<meta name="author" content="Your Name">
<title>Welcome to My Website</title>
</head>
<body>
<h1>Introduction</h1>
<p>This is my first website. Welcome!</p>
<a href="https://www.example.com" title="Learn More">Click here to learn more</a>
<img src="logo.jpg" alt="My Website Logo">
</body>
</html>
Exercise 2: Creating a Contact Form
Question:
Design a contact form with fields for name, email, subject, and message.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Contact Form">
<meta name="keywords" content="contact, form, HTML">
<meta name="author" content="Your Name">
<title>Contact Us</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="#" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="subject">Subject:</label><br>
<input type="text" id="subject" name="subject" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Exercise 3: Creating a List
Question:
Create an ordered list of your top 5 favorite movies.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="List of Favorite Movies">
<meta name="keywords" content="movies, favorites, HTML">
<meta name="author" content="Your Name">
<title>My Favorite Movies</title>
</head>
<body>
<h1>My Favorite Movies</h1>
<ol>
<li>The Shawshank Redemption</li>
<li>The Godfather</li>
<li>The Dark Knight</li>
<li>Pulp Fiction</li>
<li>Forrest Gump</li>
</ol>
</body>
</html>
SEO Considerations:
- Meta Tags: Use meta tags like
description,keywords, andauthorto provide metadata about your webpage. - Semantic HTML: Use semantic HTML elements (
<header>,<nav>,<footer>, etc.) where appropriate for better SEO. - Optimized Images: Use descriptive file names and alt attributes for images to improve accessibility and SEO.
- Content Quality: Ensure your content is relevant, high-quality, and original to rank better in search engine results.
- Mobile Responsiveness: Ensure your website is mobile-friendly, as Google prioritizes mobile-friendly websites in search results.