[HTML/HTML5] Phần 15: Hình ảnh trong HTML

Cú pháp hình ảnh HTML
Trong HTML, hình ảnh được định nghĩa bằng thẻ <img>. Thẻ <img> là thẻ rỗng chỉ chứa các thuộc tính và không có thẻ đóng. Đôi khi, chúng ta còn có thể viết thẻ hình ảnh dưới dạng <img/>, tương tự như thẻ <br/>.

Các thuộc tính quan trọng thẻ img:

• Thuộc tính src: dùng để mô tả dướng dẫn URL của hình ảnh.
• Thuộc tính alt: lưu trữ giá trị văn bản hiển thị trong trường hợp hình ảnh không thể hiển thị do bị lỗi sai đường dẫn.
• Thuộc tính width: chiều rộng của hình ảnh.
• Thuộc tính height: chiều cao của hình ảnh.

Ngoài ra, hình ảnh hiển thị thường có đuôi định dạng là .jpg, .gif, .jpge, .png, .bmp (không khuyến cáo vì định dạng này làm tăng dung lượng hình ảnh), … và nhiều định dạng khác.

Thuộc tính src
Thuộc tính này dùng để mô tả đường dẫn của hình ảnh. Ví dụ nhúng hình ảnh có tên là dammio.jpg có alt=”Website” và chiều rộng 200px, chiều cao 50px.

<img src="dammio.jpg" alt="Website" style="width:100px;height:50px;">

Thuộc tính alt
Thuộc tính này dùng để lưu trữ giá trị văn bản hiển thị trong trường hợp hình ảnh không thể hiển thị do bị lỗi sai đường dẫn. Nếu trình duyệt không tìm thấy hình ảnh dammio123.jpg, thì dòng văn bản trong giá trị “alt” sẽ được hiển thị là “Website” được hiển thị.

<img src="dammio123.jpg" alt="Website" style="width:100px;height:50px;">

Thuộc tính width, height
Kích thước chiều rộng và chiều cao có thể tính bằng px (pixel) hay không cần đơn vị đều như nhau. Hai thuộc tính này có thể khai báo nằm trong thuộc tính style.

<img src="dammio.gif" alt="Website" style="width:128px;height:128px;">

Hoặc bạn có thể khai báo width, height độc lập như sau và không cần đơn vị px như sau.

<img src="dammio.gif" alt="Website" width="128" height="128">

Vậy nên khai báo thuộc tính width, height hay trong thuộc tính style? Cái này là tùy bạn, tuy nhiên website dammio.com khuyến cáo nên dùng style vì nó giúp chặn các phong cách bên ngoài hoặc bên trong (internal & external styles) ghi đè lên phong cách ảnh.

Hình ảnh ở thư mục khác cùng server
Nếu không mô tả gì về đường dẫn, trình duyệt sẽ tự động tìm thấy hình ảnh cùng thư mục với trang web đang hiển thị nội dung. Tuy nhiên, khi thiết kế Web, đa số lập trình viên thường đặt hình ảnh vào 1 thư mục, chẳng hạn thư mục images, img, …

Ví dụ sau, chúng ta thấy hình dammio.gif được đặt nằm trong thư mục images dưới 1 cấp so với thư mục hiện tại.

<img src="/images/dammio.gif" alt="Website" style="width:128px;height:128px;">

Hình ảnh ở server khác
Đôi khi bạn muốn hiển thị hình ảnh ở server khác để tiết kiệm bộ nhớ lưu trữ hình ảnh cho website. Điều đó là hoàn toàn bình thường, bạn có thể lấy hình ảnh ở bất kỳ đâu nếu được phép truy cập hình.

Ví dụ bạn lấy hình Logo của trang dammio.com như sau.

<img src="https://www.dammio.com/wp-content/uploads/2017/06/cropped-dammio_logo-1-1.png" alt="logo dammio.com">

Hình ảnh động (hoạt hình)
Chỉ có định dạng GIF là cho phép hiển thị hình ảnh động, người ta thường nói là GIF động. Có rất nhiều chương trình tạo hình ảnh GIF động ở trên mạng, bạn có thể search cụm từ “Animated GIF software” ở Google để tải về các chương trình tạo GIF động.

Ví dụ bạn nhúng 1 hình GIF động Trái Đất đang quay từ Wikipedia.

<img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif" alt="Computer Man" style="width:48px;height:48px;">

Liên kết hình ảnh
Như bài trước, bạn có thể dùng hình ảnh làm 1 liên kết, đơn giản là đặt thẻ img bên trong thẻ a.

<a href="dammio.html">
  <img src="dammio.gif" alt="Website" style="width:42px;height:42px;border:0;">
</a>

Thuộc tính float
Thuộc tính float dùng để canh chỉnh hình ảnh bên trái hoặc bên phải của đoạn văn bản.

<p><img src="dammio.gif" alt="Website" style="float:right;width:42px;height:42px;">
Hình ảnh hiển thị bên phải của đoạn văn bản</p>

<p><img src="dammio.gif" alt="Website" style="float:left;width:42px;height:42px;">
Hình ảnh hiển thị bên trái của đoạn văn bản</p>

Kết luận: Các kiến thức cơ bản về hình ảnh và cách nhúng hình ảnh vào website đã được trình bày ở bài này. Mời bạn tiếp tục theo bài tiếp theo để học thêm về HTML.