Bài 5 : Hình Ảnh Trong HTML | Học HTML Cơ Bản
Bài 5 : Hình Ảnh Trong HTML | Học HTML Cơ Bản

Cú pháp hình ảnh trong HTML

Thẻ <img> trong HTML được sử dụng để nhúng hình ảnh vào một trang web.

Các thẻ <img> là thẻ trống, nó chỉ chứa các thuộc tính, và không có một thẻ đóng.

Các thẻ <img> có hai thuộc tính cần thiết:

  • src – Chỉ định đường dẫn đến hình ảnh
  • alt – Chỉ định văn bản thay thế cho hình ảnh
<img src=”url ảnh alt=”Mô tả ảnh>
Bài 5 : Hình Ảnh Trong HTML | Học HTML Cơ Bản
Bài 5 : Hình Ảnh Trong HTML | Học HTML Cơ Bản

Thuộc tính src

srcThuộc tính bắt buộc 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 đó, chính trình duyệt 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 và altvăn bản được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.

Ví dụ:

<img src=”img_VN.jpg” alt=”Flowers in VN”>

Thuộc tính alt

alt là thuộc tính bắt buộc 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ó (do 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 alt thuộc tính phải mô tả hình ảnh:

<img src=”url ảnh alt=”Mô tả ảnh>

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.

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ụ:

<img src=”anh.jpg” alt=”HTML cơ bản” style=”width:500px;height:600px;”>

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

Ví dụ:

<img src=”anh.jpg” alt=”HTML cơ bản=”500″ height=”600″>

Các width và heightcác thuộc tính luôn luôn xác định chiều rộng và chiều cao của hình ảnh bằng pixel.

 

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments