How To Add Image in html coding
HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text">
The alt Attribute
The alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The alt attribute provides alternative information for an image if a 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).
If a browser cannot find an image, it will display the alt text:
Example
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »
The alt attribute is required. A web page will not validate correctly without it.
HTML Screen Readers
A screen reader is a software program that can read what is displayed on a screen.
Screen readers are useful to people who are blind, visually impaired, or learning disabled.
Note Screen readers can read the alt attribute.
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px after the value):
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »
Alternatively, you can use width and height attributes. Here, the values are specified in pixels by default:
Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
Use the HTML width and height attributes to define the size of the image
Use the CSS width and height properties to define the size of the image (alternatively)
Use the CSS float property to let the image float
Use the HTML <map> element to define an image-map
Use the HTML <area> element to define the clickable areas in the image-map
Use the HTML <img>'s element usemap attribute to point to an image-map
Note Loading images takes time. Large images can slow down your page. Use images carefully.
Test Yourself with Exercises!
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<p>hello
<!-- paragraph -->
</p>
<img src="https://www.google.com.pk/search?q=car&tbm=isch&imgil=pOChBvlTH3DixM%253A%253B95fOqiu_H0EMwM%253Bhttp%25253A%25252F%25252Fwww.caranddriver.com%25252Ffeatures%25252F2016-editors-choice-for-best-cars-trucks-crossovers-suvs-and-hybrids&source=iu&pf=m&fir=pOChBvlTH3DixM%253A%252C95fOqiu_H0EMwM%252C_&usg=__xI69YQ6jdP-6-kp3uolZLS4ZRwM%3D" alt="some_text"> <--this is url-->
</body>
</html>
No comments:
Post a Comment