How to Install Operating System ??Complete Guide Installing The Operating System

HTML Displaying Images

e-Book Computer – The use of images in HTML on a website is very varied, in addition to beautifying the appearance of the website generally images in HTML are used to display the logo or as an enhancement of the impression of visualization on the writing on the website, where the role of this image is like a living message on a writing. Not infrequently HTML Displaying Images is often used as an initial introduction to learning HTML code, like this article, after previously discussing many ways to use text, this time a discussion about how to display images in HTML.

Use an HTML Tag Image Attributes

In HTML the image is defined as the <img> tag where the <img> tag is not written in pairs or single tags that do not have a closing tag so that in giving the value to the <img> tag only by using non-element attributes, the example below is a collection of standard attributes commonly used to display images.

List Attribute Tag Image HTML

AttributeValueInformation
srcURLThe required attribute in the html tag is to determine the location of the image you want to display.
alttextTo specify alternate text if the image cannot appear in the browser.
heightpixelsUsed to determine the height of the image.
widthpixelsUsed to determine the width of the image.

 

The attribute table for the <img> tag above is the most frequently used tag, actually, there are still some image tags that can be seen in w3schools.

Before going forward, there are a number of articles that you might be looking for.

Read too :

To display an image in the img in html tag like the description in the table above, that is by using the src attribute, where the value of this src is the address where the image is located.

<img src = “image-location-image extension”>

Writing the img code on html is often lacking in accuracy so that the image does not appear in the browser, usually this happens due to not entering the location of the image correctly, or writing the extension or image format is not correct, causing the image not to appear, a complete example

<! DOCTYPE html>

<html>

<head>

<title> Displays Images in HTML </ title>

</ head>

<body>

<img src = “example-image-html.jpg”>

</ body>

</ html>

From complete html code to display images.

Then more or less will appear as above, once again the author emphasizes that if the image cannot appear in a web browser then check the location of the image again.

Change The Image Size In The IMAGE Tag

Images that have been selected to display on the website usually have a height and width size that doesn’t fit into the wish, but take it easy, we don’t need to edit the image using a photo editor, you only need to add the attributes width and or height inside the tag <img >, the author will give values for 400px width and 500px height.

<! DOCTYPE html>

<html>

<head>

<title> Displays Images in HTML </ title>

</ head>

<body>

<img src = “example-image-html.jpg” width = “400px” height = “500px”>

</ body>

</ html>

From the HTML code above it will look like it will produce an unbalanced size between the objects in the photo and the size of the width and height so that the shape of the image will look strange. So just use one attribute to adjust the shape of the image, select between width or height, for example, only use the width attribute, automatically for the height size will adjust according to the original shape, as in the example below the author only gives a value of 400px from the width picture.

<! DOCTYPE html>

<html>

<head>

<title> Displays Images in HTML </ title>

</ head>

<body>

<img src = “example-image-html.jpg” width = “400px”>

</ body>

</ html>

Adding Alternative Text to Tag Image HTML

Using the alt (alternate text) attribute is very helpful when the browser fails to display images, browser failure in displaying images has many factors, for example the directed image has been deleted at the source or the slow connection is triggered, if that happens then the browser will replace it with the display value given to this alt attribute. For example, the author will give the src value with two <img> tags without any images intended, one by not using the alt attribute and one using the alt attribute.

<! DOCTYPE html>

<html>

<head>

<title> Displays Images in HTML </ title>

</ head>

<body>

1. <img src = “not-ada.jpg” width = “400px”> <br />

2. <img src = “no-ada.jpg” width = “400px” alt = “Substitute text”>

</ body>

</ html>

From the code above, it can be seen that the use of alt attributes is very helpful to handle the possibility of the browser failing to display images, so the website reader will know in text what the image is.

Thus the tutorial in displaying images in HTML code, actually there are still some attributes that can be used in this <img> tag, only the attributes written here are attributes that are commonly used to create images in HTML code.

Before proceeding, there are a number of articles that might be looking for.

Also read :

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *