Bài 8: Thẻ IMG trong HTML – Thẻ chèn hình ảnh trong HTML

Với 1 trang web bất kỳ, ngoài nội dung hấp dẫn thì cần phải có những hình ảnh để minh họa cho nội dung. Chính vì thế khi làm web với HTML bạn cũng cần biết chèn hình ảnh vào trong HTML để làm cho trang web đẹp hơn.

Việc chèn hình ảnh trong HTML có khó không? Thẻ nào hỗ trợ chèn hình ảnh trong HTML? Chúng ta cùng tìm hiểu trong bài viết này nhé.

Thẻ IMG trong HTML – Thẻ chèn hình ảnh trong HTML

Trong HTML có 1 thẻ hỗ trợ bạn chèn hình ảnh đó chính là thẻ <img/>. Mỗi khi cần chèn hình ảnh vào HTML bạn chỉ cần sử dụng thẻ <img/> theo cú pháp sau đây:

<img src="đường dẫn url tới nơi lưu ảnh" các-thuộc-tính-khác/>

Thẻ <img/> là thẻ không cần thẻ đóng. Trong thẻ img có các thuộc tính như src, alt, width, height,… trong đó thuộc tính src là thuộc tính bắt buộc dùng để khai báo đường dẫn url của hình ảnh.

Ví dụ

<img src="./img/logo.png" alt="blog-cong-dong"/>

Tham khảo thêm

• Tìm hiểu về cấu trúc thẻ và thuộc tính trong HTML
• Các thẻ tạo danh sách (list) trong HTML
• Các thẻ định dạng văn bản trong HTML

Một số thuộc tính trong thẻ img

Thẻ img trong HTML có 1 số thuộc tính cơ bản sau đây bạn cần biết

Thuộc tính src

Đây là thuộc tính bắt buộc phải có. Nó là thuộc tính khai báo đường dẫn file ảnh. Các loại tập tin hình ảnh được hỗ trợ gồm png, jpg, gif,… Giá trị của URL hình ảnh có thể để ở dạng đường dẫn tuyệt đối hoặc tương đối.

Ví dụ

• Đường dẫn tuyệt đối: https://nguyenhung.net/wp-content/uploads/2016/03/logo.png
• Đường dẫn tương đối: ./wp-content/uploads/2016/03/logo.png

Thuộc tính alt

Đây là thuộc tính mô tả thông tin cho hình ảnh bằng chữ. Thuộc tính này sẽ hiển thị cho người dùng thấy khi đường dẫn hình ảnh bị lỗi. Đặc biệt nó rất quan trọng trong SEO hình ảnh, nó giúp các Search Engine hiểu được hình ảnh của bạn nói về cái gì.

Ví dụ

<img src="url_hinh_anh_loi" alr="chèn ảnh trong html"/>

Thuộc tính width và height

Đây là thuộc tính giúp thiết lập độ rộng (width) và chiều cao (height) cho hình ảnh.

Ví dụ

<img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" width="500px" height="500px"/>

Thuộc tính align

Mặc định khi chèn hình ảnh trong HTML thì ảnh sẽ được căn trái vì vậy nên nếu bạn muốn căn chỉnh lại vị trí hình ảnh thì cần dùng đến thuộc tính align để thiết lập.

<img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" align="right"/>

Các giá trị của thuộc tính align gồm có: top, bottom, middle, left, right

Thuộc tính border

Thuộc tính border giúp xác định độ dày của đường viền xung quanh hình ảnh.

Ví dụ

<img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" border="1px"/>

Một số kết với giữa thẻ img với thẻ khác thường dùng

Kết hợp với thẻ a tạo image link

Bạn thường thấy khi click vào hình ảnh sẽ được dẫn đến 1 link nào đó đúng không? Đó là người ta sử dụng kết hợp thẻ a và thẻ img để tạo đó. Để làm điều đó chúng ta chỉ cần cho thẻ a bao quanh thẻ img như sau

<a href="https://nguyenhung.net">
    <img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" alt="blog cộng đồng"/>
</a>

Kết hợp thẻ a với thẻ map để gán link vào 1 vùng trên ảnh

Giả sử ở đây mình sẽ gán link vào chữ b và chữ o trong logo nguyenhung.net để khi click chuột vào chữ b hoặc chữ o thì bạn được đưa tới trang chủ Nguyễn Hùng, còn khi click vào các vùng khác sẽ không có gì hết.

Ví dụ

<img src="https://nguyenhung.net/wp-content/uploads/2016/03/logo.png" alt="blog cộng đồng" usemap="#logoblog"/>
<map name="logoblog">
  <area shape="rec" coords="26,0,68,56" href="https://nguyenhung.net" target="_blank"/>
  <area shape="circle" coords="104,43,13" href="https://nguyenhung.net" target="_blank"/>
</map>

Trong đoạn code trên chúng ta có:

Thẻ img có thêm thuộc tính usemap=”#logoblog”. Nó giúp chỉ định map có giá trị name=”logoblog” được áp dụng vào hình này.

Thẻ map sẽ có thuộc tính name=”logoblog” giúp thẻ img nhận diện đồng thời nằm bên trong nó còn có thẻ area giúp xác định hình khối bằng tọa độ và link đích.

Trong thẻ area có các thuộc tính sau giúp xác định vùng ảnh được chọn

• shape: Xác định dạng hình khối cần chọn. Có các giá trị rec (hình chữ nhật), circle (hình tròn), poly (hình đa giác)
• href: Link đích khi click vào vùng ảnh
• coords: Tọa độ các điểm tạo thành vùng chọn với các xác định tùy thuộc vào dạng shape bên dưới

rect = x1, y1, x2, y2

Trong đó: x1, y1 là tọa độ góc trên bên trái của hình chữ nhật, x2, y2 là tọa độ góc dưới bên phải của hình chữ nhật. VD: Hình chữ nhật có tọa độ góc trên bên trái là 26,0 và tọa độ góc dưới bên phải là 68,56. Giá trị thuộc tính là coords=”26,0,68,56″.

circle = xc, yc, radius

Trong đó: xc, yc là các tọa độ của tâm vòng tròn và radius là bán kính vòng tròn. VD: Tâm của vòng tròn có tọa độ 104, 43 và có bán kính là 13 thì thuộc tính coords=”104,43,13″.

poly = x1, y1, x2, y2, x3, y3, … xn, yn

Trong đó các cặp x, y là tọa độ để xác định các đỉnh của hình đa giác nối từ điểm này đến điểm khác.

=> Tất cả các tọa độ đều lấy điểm trên cùng bên trái là gốc với tọa độ (0,0). Để xác định tọa độ của hình ảnh bạn có thể sử dụng photoshop hoặc phần mềm chỉnh sửa ảnh nào đó để xác định.

Lời kết

Như vậy qua bài viết này bạn đã có thể sử dụng thẻ img để chèn hình ảnh trong HTML rồi nhé. Ngoài ra, bạn có thể kết hợp thẻ img với một số thẻ khác để tạo ra những chức năng hữu ích với hình ảnh. Hi vọng với những chia sẻ của NguyenHung.Net bạn có thể tự học HTML tốt hơn tại nhà. Chúc bạn thành công!