Adding images in your HTML code is easy. It can be done in your text editor while you write the code. This can also be linked to the style sheet attributes to insert images through your code.
In HTML, images are defined with the <img> tag. If 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="image url" alt="your keyword here">
The “alt” attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute also 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. The alt attribute is mandatory. A web page will not be validated correctly if this attribute goes missing.
Here’s an example that shows how to add images through HTML coding.
<!DOCTYPE html> <html> <body> <h2>Spectacular Mountain</h2> <img src="https://www.dmhubtraining.com/wp-content/uploads/2017/03/Digital-Marekting-Certification-Malaysia.jpg" alt="Digital Marketing Professional Certification Malaysia" style="width:304px;height:228px;"> </body> </html>
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). Here’s an example that describes the use of style attribute to specify the image width and height.
<img src="https://www.dmhubtraining.com/wp-content/uploads/2017/03/Digital-Marekting-Certification-Malaysia.jpg" alt="Digital Marketing Professional Certification Malaysia" style="width:128px;height:128px;">
Width and height attributes can also be used here. The values are specified in pixels by default, like how it’s shown in the image below.
<img src="https://www.dmhubtraining.com/wp-content/uploads/2017/03/Digital-Marekting-Certification-Malaysia.jpg" alt="Digital Marketing Professional Certification Malaysia" width="128" height="128">
Inserting images in HTML
The Latest HTML5 standard allows both width, height and style standards.
It’s best to use the style attribute. It prevents the style sheets from changing the original image file properties.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="https://www.dmhubtraining.com/wp-content/uploads/2017/03/Digital-Marekting-Certification-Malaysia.jpg" alt="Digital Marketing Professional Certification Malaysia" style="width:128px;height:128px;">
</body>
</html>