[Bài 6] Hình ảnh trong HTML5

Trong bài này, mình sẽ giới thiệu với các bạn về một thứ không thể thiếu trong serie bài học này, đó chính là hình ảnh trong HTML5, để có thể thêm hình ảnh vào tài liệu HTML5, chúng ta sẽ dùng đến thẻ hình ảnh.

Như các bạn đã biết, khi soạn thảo văn bản trong Word, ngoài chữ viết và việc định dạng văn bản ra thì hình ảnh cũng là thứ rất quan trọng, đôi khi chỉ với một tấm ảnh đã thay cho hàng vạn câu chữ trong bài rồi. Và trong HTML5 cho phép bạn chèn hình ảnh vào qua thẻ <img>.

Thẻ hình ảnh trong HTML5

Thẻ hình ảnh trong HTML5 (<img>) được dùng để chèn hình ảnh từ đường dẫn tuyệt đối (từ website khác hoặc chính website đang truy cập) hay đường dẫn tương đối, bạn cần chú ý là thẻ này không có thẻ đóng. Bên dưới là cú pháp của thẻ và kết quả:

<img src='https://i1.wp.com/tienminhvy.com/wp-content/uploads/2020/07/Logo_landscape-sm.png'>

Thẻ hình ảnh trong HTML5

Cách ghi nhớ: trong tiếng Anh, từ “hình ảnh” có nghĩa là “image“, bạn lấy 3 ký tự “i“, “m” và “g” sẽ ra được thẻ <img>

Các thuộc tính cần nhớ của thẻ hình ảnh trong HTML5

Các thuộc tính của thẻ <img> bạn cần nhớ được liệt kê bên dưới:

• src – đường dẫn của ảnh, đây là thuộc tính bắt buộc
• alt – văn bản miêu tả về hình ảnh, khi đường dẫn đến hình ảnh bị trục trặc làm cho ảnh bị lỗi, đoạn văn bản này sẽ được dùng để thay thế cho ảnh bị lỗi đó, tốt cho SEO (không bắt buộc)
• width – chiều rộng của ảnh (mặc định là giá trị của ảnh gốc – không bắt buộc)
• height – chiều cao của ảnh (mặc định là giá trị của ảnh gốc – không bắt buộc)

Cách ghi nhớ: src là viết tắt của từ “source” trong tiếng Anh (nghĩa là nguồn gốc), còn alt là viết tắt của “alternative information” (nghĩa là thông tin tương tự).

Trong trường hợp thuộc tính src trỏ không đúng đến ảnh hoặc không được xác định mà thuộc tính alt được xác định thì kết quả bạn sẽ thấy tương tự như sau:

<img src='https://i1.wp.com/tienminhvy.com/wp-content/uploads/2020/07/Logo_landscape-sm.jpg' alt='Logo website tienminhvy.com'>

Thẻ hình ảnh trong HTML5 – khi ảnh bị lỗi có thuộc tính alt

Bạn có thể thay đổi kích cỡ hình ảnh bằng 2 thuộc tính width và height, 2 thuộc tính này nhận các giá trị như px, em, vw, vh (các loại giá trị này chúng ta sẽ học ở phần HTML và CSS nâng cao)

Tuy nhiên, ta cần thay đổi sao cho phù hợp với tỉ lệ hình ảnh, ví dụ dưới đây là sự thay đổi hình ảnh bất hợp lí, làm cho hình ảnh bị méo mó, khác hẳn so với hình ảnh gốc:

<img src='https://i1.wp.com/tienminhvy.com/wp-content/uploads/2021/03/prepair.jpg' alt='Logo website tienminhvy.com' width=100 height=200>

Tóm lại

Qua bài viết này, chúng ta đã học được:

• Thẻ hình ảnh trong HTML5
• Các thuộc tính của thẻ hình ảnh
• Cách ghi nhớ thẻ và thuộc tính

Trong bài sau, chúng ta sẽ tìm hiểu về bình luận trong HTML5 (comment). Bạn truy cập tại đây để đến bài 7: https://tienminhvy.com/hoc-tap/bai-7-binh-luan-trong-html5/