Lesson 5: Working with Images and the <link> Tag
1. The <img> Tag
The <img> tag is used to display images in HTML. It is a self-closing tag.
Common Attributes of <img>:
- src: Path to the image file
- alt: Alternate text for the image
- width: Width of the image (in px or %)
- height: Height of the image (in px or %)
- title: Tooltip text on hover
- loading: Lazy or eager loading
- style: Inline CSS styling
Example:
<img src="img/sample.jpg" alt="A sample image" width="300" height="200" title="Sample Image" loading="lazy">
2. The <link> Tag
The <link> tag is mainly used in the <head> section to link external resources such as stylesheets or icons.
Common Attributes of <link>:
- rel: Relationship between current and linked document (e.g.,
stylesheet)
- href: URL of the linked file
- type: Type of the linked resource
- media: Specifies what media/device the linked resource is optimized for
Example:
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="icon" href="img/logo.png" type="image/png">
Code X Community