Friday 17 March 2023

HTML Images



HTML provides a way to display images on web pages using the <img> tag. 


Basic image tag:


<img src="image.jpg" alt="Example Image">


The src attribute specifies the URL or file path of the image file, while the alt attribute provides a textual description of the image that will be displayed if the image cannot be loaded.


HTML code for basic image tag:


<!DOCTYPE html>
<html>
<head>
<title>Image Tag</title>
</head>
<body>
<h1>Image</h1>
<img src="scenary.png" alt="Nature image">
</body>
</html>


output:



Image tag with width and height attributes:


<img src="image.jpg" alt="Example Image" width="200" height="150">


The width and height attributes can be used to specify the dimensions of the image in pixels. This can be useful for controlling the layout of the page.


<!DOCTYPE html>
<html>
<head>
<title>Image Tag</title>
</head>
<body>
<h1>Image</h1>
<img src="scenary.png" alt="Nature image" width="200"; height="150";>
</body>
</html>


output:



Practice Time!

  1. Create a webpage about your favorite hobby or sport. Include at least three headings, three paragraphs, one comment, and one image that is relevant to the topic.

  2. Design a webpage for a local restaurant. Include at least three headings, five paragraphs, one comment, and three images of dishes or the restaurant's atmosphere.

  3. Build a portfolio webpage to showcase your skills and projects. Include at least five headings, five paragraphs, one comment, and five images related to your work.

  4. Create a webpage that highlights a travel destination. Include at least three headings, five paragraphs, one comment, and five images of the destination, including its attractions and culture.

  5. Design a webpage that promotes a charitable cause. Include at least three headings, five paragraphs, one comment, and three images that are relevant to the cause, including statistics and ways to donate.

These mini projects should help you practice using HTML headings, paragraphs, comments, and images effectively in different contexts.

No comments:

Post a Comment

HTML Text Formatting

<i> - This tag is used to italicize text, meaning the text enclosed within <i> tags will be rendered in italic font style. How...