Trang chủ Thế giới ngôn ngữ lập trình - Programming Languages Tự học HTML Hình(Images) trong HTML

[Tự học HTML] Hình(Images) trong HTML

Bởi

23 Tháng Bảy, 2020

977

🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

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>

Copy and chạy code

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">

Copy and chạy code

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">

Copy and chạy code

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;">

Copy and chạy code

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">

Copy and chạy code

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>

Copy and chạy code

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!

[Tự học HTML] Hình(Images) trong HTML

1. Cú pháp hình ảnh trong html

2. Thuộc tính src

3. Thuộc tính alt

4. Kích thước hình ảnh – Chiều rộng và chiều cao

5. Sử dụng Width and Height, or Style

6. Hình ảnh trong thư mục khác

7. Hình ảnh trên máy chủ khác

8. Hình ảnh dưới dạng một liên kết

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT TIÊU BIỂU

Học JavaScript từ cơ bản đến nâng cao | Hiểu về...

Học JavaScript từ cơ bản đến nâng cao | Chi sẻ...

Học JavaScript từ cơ bản đến nâng cao | Top các...

BÀI VIẾT PHỔ BIẾN

Tổng hợp toàn bộ tài liệu học hướng đối tượng và...

[Tự học C++] Số dấu phẩy động(float, double,…) trong C++

Tổng hợp và chọn lọc bài tập SQL full hướng dẫn...

MỤC XEM NHIỀU