Cafedev chia sẻ về cách hiển thị hình trong html và một số kiến thức liên quan.
Hình ảnh có thể cải thiện thiết kế và sự xuất hiện của một trang web.
Ace lưu ý: Một số ví dụ dưới đây, khi chạy demo hình ảnh bị lỗi là do đường dẫn ảnh bị sai hoặc không tồn tại nha bạn, nếu bạn demo ở dưới máy mình với tên hình và đường dẫn chính xác sẽ hiển thị như bình thương.
Ví dụ:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
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>
Nội dung chính
1. Cú pháp hình ảnh trong html
Thẻ <img> trong HTML được sử dụng để nhúng hình ảnh vào trang web.
Hình ảnh không được chèn kỹ thuật vào một trang web; hình ảnh được liên kết đến các trang web. Thẻ <img> tạo không gian lưu cho hình ảnh được tham chiếu.
Thẻ <img> trống, nó chỉ chứa các thuộc tính và không có thẻ đóng.
Thẻ <img> có hai thuộc tính bắt buộc:
- src – Chỉ định đường dẫn đến hình ảnh
- alt – Chỉ định văn bản thay thế cho hình ảnh
Cú pháp:
<img src="url" alt="alternatetext"> 2. Thuộc tính src
Thuộc tính src cần thiết chỉ định đường dẫn (URL) đến hình ảnh.
Lưu ý: Khi một trang web tải; tại thời điểm đó, trình duyệt sẽ lấy hình ảnh từ máy chủ web và chèn nó vào trang. Do đó, hãy đảm bảo rằng hình ảnh thực sự ở cùng một vị trí liên quan đến trang web, nếu không khách truy cập của bạn sẽ nhận được một biểu tượng liên kết bị hỏng. Biểu tượng liên kết bị hỏng được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.
<img src="img_vietnam.jpg" alt="Flowers in VietNam"> 3. Thuộc tính alt
Thuộc tính alt được yêu cầu cung cấp văn bản thay thế cho hình ảnh, nếu người dùng vì lý do nào đó không thể xem nó (vì kết nối chậm, lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình).
Giá trị của thuộc tính alt sẽ mô tả hình ảnh:
<img src="img_vietnam.jpg" alt="Flowers in VietNam"> Mẹo: Trình đọc màn hình là chương trình phần mềm đọc code HTML và cho phép người dùng “nghe” nội dung. Trình đọc màn hình rất hữu ích cho những người khiếm thị hoặc khuyết tật học tập.
4. Kích thước hình ảnh – Chiều rộng và chiều cao
Bạn có thể sử dụng thuộc tính style để chỉ định chiều rộng và chiều cao của hình ảnh.
<img src="img_girl.jpg" alt="Girl in a VN" style="width:500px;height:600px;"> Ngoài ra, bạn có thể sử dụng các thuộc tính width và height:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> Các thuộc tính chiều rộng và chiều cao luôn xác định chiều rộng và chiều cao của hình ảnh bằng pixel.
Lưu ý: Luôn chỉ định chiều rộng và chiều cao của hình ảnh. Nếu chiều rộng và chiều cao không được chỉ định, trang web có thể nhấp nháy trong khi tải hình ảnh.
5. Sử dụng Width and Height, or Style
Các thuộc tính width, height và style đều hợp lệ trong HTML.
Tuy nhiên, chúng tôi đề nghị sử dụng thuộc tính style. Nó giúp thay đổi kích thước của hình ảnh dễ hơn, và nhìn nó độc lập hơn:
Ví du:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
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="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html> 6. Hình ảnh trong thư mục khác
Các ví dụ trên tại src chỉ dùng tên của hình ảnh vì hình ảnh đó nằm cùng thư mục với file code html của bạn. Trường hợp khác thư mục thì bạn có thể mô tả rõ như sau:
Nếu bạn có hình ảnh của mình trong một thư mục con, bạn phải bao gồm tên thư mục trong thuộc tính src:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> 7. Hình ảnh trên máy chủ khác
Một số trang web lưu trữ hình ảnh của họ trên một máy chủ khác.
Trên thực tế, bạn có thể truy cập hình ảnh từ bất kỳ địa chỉ web nào trên thế giới:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
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. Hình ảnh dưới dạng một liên kết
Hình ảnh dưới dạng một liên kết với thẻ <img> trong thẻ <a>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial Cafedev" style="width:42px;height:42px;">
</a> 9. Nhưng format ảnh có thể load được trong HTML
Dưới đây là các loại tệp hình ảnh phổ biến nhất, được hỗ trợ trong tất cả các trình duyệt (Chrome, Edge, Firefox, Safari, Opera):
| Viết tắt | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics(Đồ họa mạng di động) | .apng |
| GIF | Graphics Interchange Format(Ảnh động) | .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 |
Lưu ý: Tải hình ảnh lớn sẽ mất thời gian và có thể làm chậm trang web của bạn. Sử dụng hình ảnh cẩn thận.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
