HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Sport</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 20px;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #4CAF50;
text-align: center;
}
img {
display: block;
margin: 10px auto;
max-width: 100%;
height: auto;
}
a {
color: #4CAF50;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container {
max-width: 800px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>My Favorite Sport: Cricket</h1>
<p>Cricket is my most favorite sport. It is a team game played between two teams of 11 players each. The game involves batting, bowling, and fielding to score runs and get the opposing team out.</p>
<img src="https://via.placeholder.com/600x400" alt="Image of Cricket Game">
<p>Cricket is one of the most popular sports in India. My favorite player is Virat Kohli. His batting style inspires me a lot.</p>
<p>To learn more about cricket, <a href="https://www.icc-cricket.com" target="_blank">click here</a>.</p>
</div>
</body>
</html>
How to Create and View It:
- Copy the above code into a text editor (e.g., Notepad).
- Save the file with the name "favorite-sport.html".
- Open this file in your browser (e.g., Chrome).
Features:
- Image:
- Includes an image of the sport (a placeholder URL is used; you can replace it with your own).
- Link:
- Provides a clickable link to the official cricket website.
- Styling:
- CSS styling makes the page visually appealing.
- Responsive Design:
- Content and images adjust according to screen size.
You can similarly create a page on "My School" with details like:
- School name, address, and photo.
- A link to the school’s website.
- Information about the school.
MCQs on "My Favorite Sport" Web Page Project
1. What is the purpose of the <title> tag in an HTML document?
A. To create headings on the webpage
B. To display the title of the webpage in the browser tab
C. To add images to the webpage
D. To create a link
Answer: B
2. Which HTML tag is used to insert an image into a webpage?
A. <img>
B. <image>
C. <src>
D. <link>
Answer: A
3. What does the alt attribute in the <img> tag specify?
A. The URL of the image
B. The alignment of the image
C. The alternate text if the image cannot be displayed
D. The size of the image
Answer: C
4. Which attribute is used to create a hyperlink in HTML?
A. src
B. href
C. alt
D. title
Answer: B
5. What is the function of CSS in the web page project?
A. To structure the content
B. To add styling and design to the webpage
C. To add interactivity to the webpage
D. To link other webpages
Answer: B
6. What does the <body> tag contain in an HTML document?
A. Metadata of the webpage
B. Styles and scripts
C. Content visible on the webpage
D. Links to external resources
Answer: C
7. Which CSS property is used to change the background color of a webpage?
A. color
B. background
C. background-color
D. bgcolor
Answer: C
8. What does the target="_blank" attribute in the <a> tag do?
A. Opens the link in the same window
B. Opens the link in a new tab or window
C. Adds a tooltip to the link
D. Changes the text color of the link
Answer: B
9. What is the correct structure of an HTML document?
A. <head>, <body>, <html>
B. <html>, <body>, <head>
C. <html>, <head>, <body>
D. <body>, <html>, <head>
Answer: C
10. Which tag is used to display the main heading of a webpage?
A. <h1>
B. <h6>
C. <head>
D. <title>
Answer: A
11. How can you make a link underline disappear in CSS?
A. text-color: none;
B. text-decoration: none;
C. font-style: none;
D. link-decoration: none;
Answer: B
12. What does the max-width property in CSS do?
A. Sets the minimum width of an element
B. Sets the maximum width of an element
C. Stretches the element to fit the page
D. Centers the element on the page
Answer: B
0 Comments
कमेंट केवल पोस्ट से रिलेटेड करें