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:

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ụ

Tham khảo thêm

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://nguyenhungplus.com/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ụ

Thuộc tính widthheight

Đâ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ụ

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.

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ụ

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

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

Giả sử ở đây mình sẽ gán link vào chữ b và chữ o trong logo nguyenhungplus.com để 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ụ

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, y1tọa độ góc trên bên trái của hình chữ nhật, x2, y2tọ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à radiusbá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 NguyenHungPlus.Com bạn có thể tự học HTML tốt hơn tại nhà. Chúc bạn thành công!

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

Tìm bài viết bằng cú pháp: từ khóa + nguyenhung

  • cách dùng thẻ img để tạo chú thích dưới ảnh
  • thẻ chen ảnh html
  • thẻ map trong html

Để lại ý kiến của bạn

Hãy trở thành người đầu tiên bình luận!

avatar
wpDiscuz
Hello! Tôi là Nguyễn Hùng, blog này tôi xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức về máy tính và làm web Wordpress, SEO, SEM, MMO,... mà tôi biết cho tất cả mọi người. Cảm ơn bạn đã ghé qua và đọc blog, nếu thấy bài viết hay hãy chia sẻ nó thay cho lời cảm ơn nhé. → Xem tiếp"