HTML

Hình ảnh

Hình ảnh có thể cải thiện thiết kế và giao diện của trang web.

Ví dụ

& lt; img src = “img_girl.jpg”
alt = “Cô gái mặc áo khoác” & gt;

Hãy tự mình thử »

Ví dụ

& lt; img src = “img_chania.jpg”
alt = “Hoa ở Chania” & gt;

Hãy tự mình thử »

Cú pháp hình ảnh HTML

Thẻ HTML & lt; img & gt; được sử dụng để nhúng một
hình ảnh trong một trang web.

Hình ảnh không được chèn vào một trang web về mặt kỹ thuật; hình ảnh được liên kết với web
các trang. Thẻ & lt; img & gt; tạo sự lưu giữ
không gian cho hình ảnh được tham chiếu.

Thẻ & lt; img & gt; trống, nó chỉ chứa các thuộc tính và không chứa
có thẻ đóng.

Thẻ & lt; img & gt; có hai thẻ bắt buộc
thuộc tính:

• 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

& lt; img src = “” alt = “alternatetext” & gt;

Thuộc tính src

Thuộc tính src bắt buộc chỉ định đường dẫn (URL) đến hình ảnh.

Lưu ý: Khi một trang web tải, đó là trình duyệt, tại đó
khoảnh khắc đó 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í trong mối quan hệ
vào 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. Sự tan vỡ
biểu tượng liên kết và văn bản alt được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.

Ví dụ

& lt; img src = “img_chania.jpg” alt = “Hoa
ở Chania “& gt;

Hãy tự mình thử »

Thuộc tính alt

Thuộc tính alt bắt buộc cung cấp văn bản thay thế cho hình ảnh, nếu người dùng
một số lý do không thể xem nó (do kết nối chậm, lỗi trong 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 phải mô tả hình ảnh:

Ví dụ

& lt; img src = “img_chania.jpg” alt = “Hoa
ở Chania “& gt;

Hãy tự mình thử »

Nếu trình duyệt không thể tìm thấy hình ảnh, nó sẽ hiển thị giá trị của alt
thuộc tính:

Ví dụ

& lt; img src = “falsename.gif” alt = “Hoa
ở Chania “& gt;

Hãy tự mình thử »

Mẹo: Trình đọc màn hình là một chương trình phần mềm đọc mã 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
dành cho người khiếm thị hoặc người khuyết tật về khả năng học tập.

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.

Ví dụ

& lt; img src = “img_girl.jpg” alt = “Cô gái mặc áo khoác” style = “width: 500px; height: 600px;” & gt;

Hãy tự mình thử »

Ngoài ra, bạn có thể sử dụng các thuộc tính width và height :

Ví dụ

& lt; img src = “img_girl.jpg” alt = “Cô gái mặc áo khoác” width = “500” height = “600” & gt;

Hãy tự mình thử »

Thuộc tính width và height luôn xác định chiều rộng và chiều cao của
hình ảnh tí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.

Chiều rộng và Chiều cao hay Kiểu?

width , height và style thuộc tính là
tất cả đều hợp lệ trong HTML.