Images in HTML

HTML

Preface

This article will share how to display images in html and related knowledge.

Images can improve the design and appearance of a website.

Ace notes: Some examples below, when running the demo image, the error is because the image path is wrong or does not exist, if you demo on your computer with the correct image name and path will be displayed. as usual.

For example:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="https://cafedev.vn/wp-content/uploads/2020/05/cafedevn_html.png" alt="html image" width="500" height="333">

</body>
</html>

Copy and run the code

1. Syntax of images in html

Card <img> in HTML is used to embed images in the web page.

Images are not technically inserted into a web page; Images are linked to web pages. Card <img> Creates a save space for referenced images.

Card <img> is empty, it only contains attributes and has no closing tag.

Card <img> There are two required attributes:

  • src – Specifies the path to the image
  • alt – Specifies alt text for images

Syntax:

 <img src="https://cafedev.vn/tu-hoc-html-hinhimages-trong-html/url" alt="alternatetext"> 

2. The src attribute

Properties src It is necessary to specify the path (URL) to the image.

Note: When a web page loads; at that point, the browser will take the image from the web server and insert it into the page. Therefore, make sure that the image is actually in the same place relative to the website, otherwise your visitors will get a broken link icon. A broken link icon is displayed if the browser cannot find the image.

 <img src="https://cafedev.vn/tu-hoc-html-hinhimages-trong-html/img_vietnam.jpg" alt="Flowers in VietNam"> 

Copy and run the code

3. The alt attribute

Properties alt are required to provide alternative text for the image, if the user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the attribute alt will describe the image:

 <img src="https://cafedev.vn/tu-hoc-html-hinhimages-trong-html/img_vietnam.jpg" alt="Flowers in VietNam"> 

Copy and run the code

Tip: A screen reader is a software program that reads HTML code and allows the user to “listen” to the content. Screen readers are useful for people with visual impairments or learning disabilities.

4. Image size – Width and height

You can use properties style to specify the width and height of an image.

 <img src="https://cafedev.vn/tu-hoc-html-hinhimages-trong-html/img_girl.jpg" alt="Girl in a VN" style="width:500px;height:600px;"> 

Copy and run the code

Alternatively, you can use properties width and height:

 <img src="https://cafedev.vn/tu-hoc-html-hinhimages-trong-html/img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> 

Copy and run the code

The width and height attributes always determine the width and height of an image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page may blink while images are loaded.

5. Use Width and Height, or Style

Properties width, height and style are valid in HTML.

However, we recommend using attributes style. It makes resizing the image easier, and looking at it independently:

For example:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="https://cafedev.vn/tu-hoc-html-hinhimages-trong-html/html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="https://cafedev.vn/tu-hoc-html-hinhimages-trong-html/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html> 

Copy and run the code

6. Pictures in another folder

The examples above at src use only the name of the image because the image is in the same directory as your html code file. In other case directories, you can clearly describe as follows:

If you have your image in a subdirectory, you must include the directory name in the src attribute:

 <img src="https://cafedev.vn/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> 

7. Images on another server

Some websites host their images on another server.

In fact, you can access images from any web address in the world:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="https://cafedev.vn/wp-content/uploads/2020/05/cafedevn_html.png" alt="html image" width="500" height="333">

</body>
</html>

8. Image as a link

Image as a link to the tag <img> in the card <a>

 <a href="https://cafedev.vn/tu-hoc-html-hinhimages-trong-html/default.asp">
  <img src="https://cafedev.vn/tu-hoc-html-hinhimages-trong-html/smiley.gif" alt="HTML tutorial Cafedev" style="width:42px;height:42px;">
</a> 

9. But the image format can be loaded in HTML

Here are the most common image file types, supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Acronym 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

Note: Loading large images takes time and can slow down your website. Use images carefully.

Hope this helps!

Source link

Leave a Reply

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