HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
- src - Specifies the path to the image
- alt - Specifies an alternate text for the image
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
<img src="image_name\image_name.image_exetension" alt="image_name">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
<img src="image_name\image_name.image_exetension" height="300" width="200">
Width and Height, or Style?
The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:
<!DOCTYPE html>
<html>
<head>
<style>
/* This style sets the width of all images to 100%: */
img {
width: 100%;
}
</style>
</head>
<body>
<h2>Width/Height Attributes or Style?</h2>
<p>The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%.</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<p>The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Common Image Formats:
|
Abbreviation |
File Format |
File Extension |
|
APNG |
Animated Portable Network Graphics |
.apng |
|
GIF |
Graphics Interchange Format |
.gif |
|
ICO |
Microsoft Icon |
.ico, .cur |
|
JPEG |
Joint Photographic Expert Group image |
.jpg, .jpeg, .jfif, .pjpeg, .pjp |
|
PNG |
Portable Network Graphics |
.png |
|
SVG |
Scalable Vector Graphics |
.svg |
Chapter Summary
- Use the HTML
<img>element to define an image - Use the HTML
srcattribute to define the URL of the image - Use the HTML
altattribute to define an alternate text for an image, if it cannot be displayed - Use the HTML
widthandheightattributes or the CSSwidthandheightproperties to define the size of the image - Use the CSS
floatproperty to let the image float to the left or to the right
No comments
Welcome to saveracom.blogspot.com