Hello friends, in today’s post, we are starting you about JavaScript(html image tag) , what happens. How does the key work, so today you should tell about JavaScript.
HTML Images
Through html image, you can make the webpage attractive and beautiful, for this you can add an image to the web page through html (Image in html in Hindi), then the image tag tag is used for this. The tag provides many attributes by which the presentation of the image can be controlled.
Example
<img src="first-image.jpg" alt="this is the first image">
Example
<img src="bond.jpg" alt="make bond image">
Example
<img src="work_hard.jpg" alt="focus on work hard">
HTML Image Syntax
In HTML, images are defined with the <img> tag.
<img> tag is empty, it only contains attributes, it does not have closing tag.
The src attribute of the image specifies the URL ((web address)):
<img src="url">
alt attribute
The alt attribute helps to provide alternate text for the image, if the user is unable to see the image for any reason (such as slow connection, error in the src attribute, or if the user is using a screen reader), then the image Instead of alt text, the screen reader can read about the image and the user can guess about the image.
The alt attribute should essentially tell about the image because when the image is not visible, the alt text acts as the image:
Example
<img src="work_hard.jpg" alt="focus on work hard">
If the browser does not find an image, it will display the value of the alt attribute:
Example
<img src="wrongpath.gif" alt="focus on work hard">
Note: alt attribute is required. Because without it the web page will not validate correctly.
Image Size – Width and Height
You can use the style attribute to specify the width and height of the image.
Example
<img src="bond.jpg" alt="make bond" style="width:500px;height:600px;">
Alternatively, you can also use the width and height attributes:
Example
<img src="bond.jpg" alt="make bond" width="500" height="600px">
The width and height attributes always define image width and height pixels.
Note: Always specify the width and height of the image. If width and height are not specified, the page may flicker(an unsteady movement) while the image is loading.
More Topics See
- what is Javascript ? This is 1st Post
- What is JavaScript Syntax? This is 2nd Post
- what is Javascript where to ? This is 3nd Post
- what is External Javascript ?This is 4th Post
- what is Output of Javascript? This is 5th Post
Width and Height, or Style?
The width, height, and style attributes are valid in HTML.
However, we suggest using the style attribute. This prevents the style sheet from changing the size of images :
Example
Images in another folder
If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder(a folder contained within another folder.). Then you need to include the folder name in the src attribute:
Example
<img src="/images/edu.gif" alt="edu icon" style="width:128px;height:128px;">
images on another server
Some web sites store their images on image servers.
In fact, you can access the image from any web address in the world:
Example
<img src="https://www.example.com/images/example.jpg" alt="html example">
You can find more information about file paths in the chapter HTML File Paths which we will update soon.
Animated Images
HTML also allows for animated GIFs:
Example
<img src="program.gif" alt="HTML WORLD" style="width:48px;height:48px;">
image as link
To use an image as a link, put the tag inside the <img> tag:
Example
Note: border:0; is added to prevent IE9 (and earlier browsers) from displaying a border around the image (when the image is a link)….
image floating
The CSS float property is used to move the image to the right or the text to the left:
Example
The image will float on the right side of the text.
The image will float on the left side of the text.
Tip: If you support people, we will soon launch a css app, in which you will be able to get more information about css float.
Image Maps
The tag defines the image-map. image-map is an image with clickable areas.
In the image below, click on Computer, Phone or Cup of Coffee:
Workplace
Example
The name attribute of the tag is associated with the usemap attribute of the and creates a relationship between the image and the map.
The element contains several tags, which define the clickable areas in the image-map.
background images
To add a background-image to an HTML element, use the CSS property background-image :
Example
To add a background image to a web page, specify a background image on the BODY element:
Background Image
Example
To add a background image to a paragraph, specify the background-image property on the P element:
,
With more information about background images, we will soon launch CSS app, in which you will be able to read CSS Background Tutorial. ,
The element was introduced to add more flexibility when specifying HTML5 image resources.
HTML5 introduced the element to add more flexibility when specifying image resources.
The element contains several elements, each referring to different image resources. This way the browser can choose the image that best fits the current view and/or device.
Each element has attributes to describe which image is most suitable for them.
The browser will match the first element with the attribute values, and ignore any following elements. ,
Example
Show one image if the browser window (viewport) is at least 650 pixels, and show another image if it is no larger than 465 pixels.
Note: Always specify an element as the last child element of the element. The
element is used by browsers that do not support the element, or if none match the .
HTML Screen Readers
A screen reader is a software program that reads HTML code, converts text, and allows the user to “hear” the content. Screen readers are useful for people who are visually impaired or have disabilities.
Chapter Summary
Use the HTML element to define an image.
Use HTML src attribute to define the URL of the image
Use the HTML alt attribute to define alternative text for an image if the image cannot be displayed.
Use 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 (optionally)
Use CSS float property to float image
Use the HTML element to define clickable areas in an image map
Use the HTML element to define clickable areas in the image-map
Use the usemap attribute of the HTML element to point to the image-map
Use HTML element to show different images for different devices
Note: Loading of images takes time. Large images can slow down your page. Use images with care.
HTML Image Tags
Tag details
Defines an image
Defines an image-map
to define the clickable area inside the image-map
to define a container for multiple image resources
For a complete list of all available html tags, click HTML Tag Reference.
reference- https://javahindi.com/2020/10/20/html-program/
Request – If you found this post useful for you(html image tag), then do not limit it to yourself(html image tag), do share it