HỌC HTML - CÁCH CHÈN HÌNH ẢNH TRONG HTML [BÀI 4]

Bài viết này, mình sẽ giới thiệu với các bạn cách chèn hình ảnh trong HTML. Trong HTML, hình ảnh được nhận biết thông qua thẻ <img>. Thẻ <img> là thẻ rỗng, nó không có thẻ đóng. Để tìm hiểu chi tiết, các bạn theo dõi bài viết sau:

Thẻ img là thẻ html bạn dùng tương đối thường xuyên trong quá trình làm web. Vì thế, sau này bạn sẽ vận dụng thẻ img nhiều đó. Bạn dành ra khoảng 30 phút để thực hành với thẻ img(đối với những bạn mới bắt đầu)

Công việc đầu tiên bạn cần làm trước khi chèn ảnh, tất nhiên đó là bạn cần tạo một file html để viết code.

1. Cách chèn hình ảnh vào file html

Để hiển thị hình ảnh lên web thì bạn sử dụng thẻ img với cú pháp sau:
<img src="url">
Ví dụ: <img src="http://www.tech12h.com/canh.jpg” >
Và kết quả hiển thị trên web sẽ là:

Rất đơn giản phải không các bạn

2. Các thuộc tính của thẻ IMG

Thẻ img có đầy đủ các thuộc tính chung của thẻ HTML.
Ngoài ra, thẻ img còn có thêm các thuộc tính

2.1 Các thuộc tính hay dùng

• src - thuộc tính bắt buộc

Đây là thuộc tính chứa đường dẫn trỏ đến file hình (url). Có nhiều loại định dạng hình ảnh khác nhau như: gif, png, jpg,…. Và tất cả đều có thể hiện thị được trên website nhờ thẻ img. URL có thể là URL kèm domain hoặc là URL ở trên máy của bạn (dạng local).
Ví dụ:

• tech12h.com/canh.jpg
• images/cooking.png

• alt

Thuộc tính này cho phép bạn hiển thị một đoạn text thay thế cho hình ảnh khi url bị sai hoặc có lỗi kết nối. Nghĩa là nó sẽ hiển thị đoạn text thay cho hình ảnh.
Ví dụ: <img src="duong-truyen-sai/cooking.png" alt="cooking" />. Thuộc tính này không bắt buộc. Tuy nhiên, khi làm chuyên nghiệp thì nó cần có vì tốt cho SEO

• width và height

Thuộc tính thiết lập chiều rộng (width) và chiều cao (height) cho hình ảnh:
Ví dụ: <img src="http://www.tech12h.com/canh.jpg" alt="cooking" width="500px" height="200px">

2.2 Các thuộc tính khác

• ismap

Sử dụng thuộc tính này thì khi click lên image, tọa độ vị trí click chuột sẽ được gửi về server. Thuộc tính này chỉ được cho phép khi thẻ  được đặt trong thẻ a với một href hợp lệ.

• usemap

Sử dụng thẻ 

3. Hỗ trợ các định dạng hình ảnh

Chuẩn HTML không đưa ra một danh sách định dạng được hỗ trợ. Tuy nhiên, mình xin được giới thiệu với các bạn một số định dạng thường dùng với thẻ 
JPEG, GIF, PNG, APNG, SVG, BMP, BMP ICO, PNG, ICO

4. Một số cách sử dụng thẻ img

• Ví dụ 1:

Kết hợp với thẻ a để tạo link cho hình ảnh. Nghĩa là khi click vào hình ảnh sẽ ra 1 trang mới
Để tạo link cho một hình ảnh, rất đơn giản là bạn đặt thẻ img bên trong thẻ a

<a href="http://www.tech12h.com/cong-nghe/hoc-html.html" >
 <img src="http://www.tech12h.com/canh.jpg" alt="Hoc HTML" />
</a>

• Ví dụ 2:

Căn ảnh nằm ở bên trái hoặc bên phải của đoạn văn bản.
Sử dụng thuộc tính css float để đưa ảnh sang bên trái hoặc bên phải đoạn văn bản

 <p> <img src="http://www.tech12h.com/canh.jpg" style="float:right;">
Ảnh nằm bên phải, chữ nằm bên trái</p>

 <p> <img src="http://www.tech12h.com/canh.jpg" style="float:left;">
Ảnh nằm bên trái, chữ nằm bên phải</p>

• Ví dụ 3:

Thẻ img kết hợp với map để tạo bản đồ hình ảnh

 <img src="http://www.tech12h.com/canh.jpg" alt="Planets" usemap="#planetmap" >
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="tech12h.com/">
</map>

Xem bài này để biết cách sử dụng thuộc tính Map trong thẻ <img>
Kết luận: Trong bài mình đã giới thiệu cho các bạn cách sử dụng thẻ img để tạo hình ảnh đơn giản trong HTML. Ngoài ra các bạn có thể kết hợp thẻ img với một số thẻ khác để làm những chức năng khá hữu ích khác. Mình cũng có một lời khuyên nho nhỏ cho các bạn là khi chèn ảnh trong html các bạn luôn đảm bảo đủ 2 thuộc tính src và alt nhé, để theo chuẩn w3c.