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

[Bài 6] Hình ảnh trong HTML5
  1. Giới thiệu về HTML5
  2. [Bài 1] Chuẩn bị trước khi học HTML5
  3. [Bài 2] Cấu trúc HTML5 đơn giản
  4. [Bài 3] Định dạng văn bản trong HTML5
  5. [Bài 4] Thuộc tính trong HTML5
  6. [Bài 5] Liên kết trong HTML5
  7. [Bài 6] Hình ảnh trong HTML5
  8. [Bài 7] Bình luận trong HTML5
  9. [Bài 8] Danh sách trong HTML5
  10. [Bài 9] Bảng biểu trong HTML5
  11. [Bài thực hành 1] Viết cấu trúc HTML5 đơn giản
  12. [Bài 10] Iframe trong HTML5
  13. [Bài 11] Video trong HTML5
  14. HTML5 nâng cao

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
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
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 widthheight, 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>

img size

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/

0 0 bình chọn
Đánh giá bài viết

Tiền Minh Vy

Xin chào! Tôi là Tiền Minh Vy, là một lập trình viên có nhiều kinh nghiệm với Wordpress, tập trung nhiều với PHP.
Đăng ký
Thông báo cho tôi về
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận