Bài 5 – Cách chèn hình ảnh trong HTML

img trong html

Hình ảnh trong HTML là các phần tử nội tuyến có thể được đặt trong một đoạn văn. Để thêm hình ảnh, hãy sử dụng thẻ cùng với thuộc tính để chỉ định vị trí của hình ảnh.<img>src

Bạn có thể sử dụng JavaScript để kích hoạt sự kiện khi hình ảnh tải xong.

Thay đổi kích thước hình ảnh có thể được thực hiện bằng cách sử dụng các thuộc tính chiều rộng và chiều cao của một hình ảnh, hoặc cách khác bằng cách sử dụng CSS:

Việc đặt thuộc tính “alt” cho hình ảnh hữu ích khi hình ảnh không thể tải hoặc khi bạn muốn thêm mô tả chú giải công cụ sẽ được hiển thị khi di chuột lên đầu hình ảnh.

Loại hình ảnh

Có ba loại định dạng hình ảnh chính mà bạn nên sử dụng.

  • Định dạng lossless – hữu ích khi bạn cần đồ họa pixel hoàn hảo, ví dụ như cho biểu trưng. Định dạng phổ biến nhất là PNG. PNG cũng hỗ trợ tính trong suốt của alpha, nghĩa là bạn có thể sử dụng bất kỳ nền nào bạn muốn và phủ lên hình ảnh trên nền đó.
  • Định dạng mất dữ liệu – hữu ích để hiển thị hình ảnh phong phú. Sử dụng định dạng lossless như PNG sẽ có thứ tự độ lớn lớn hơn nếu được sử dụng trong các hình ảnh đó. Định dạng phổ biến nhất được sử dụng trong danh mục này là JPG.
  • Định dạng động – hữu ích khi hiển thị hình ảnh động ngắn. Định dạng phổ biến nhất là GIF, mặc dù nó là một định dạng rất cũ nhưng được hỗ trợ rộng rãi, với nhiều nhược điểm cố hữu, chẳng hạn như giới hạn 256 màu trên mỗi khung và nén kém.

Sử dụng thuộc tính float CSS với hình ảnh

Hình ảnh có thể được thiết lập để nổi văn bản gần đó để họ sẽ pha trộn với văn bản tốt hơn. Lưu ý việc sử dụng clearthuộc tính CSS – chỉ thị trình duyệt phá vỡ hiệu ứng nổi sau đoạn đầu tiên.

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *