html-image

Tìm hiểu về HTML Image (Phần 2)

Bạn có muốn biết cơ chế thực hiện việc hiển thị hình ảnh của Browser ( trình duyệt) như thế nào không? Khi bạn mở một trang web hoặc mở một liên kết tới hình ảnh, thì ngay sau đó trình duyệt sẽ hiển thị trang web, hoặc bức hình dựa vào liên kết mà chúng ta gõ trên thanh địa chỉ. Quá trình như vậy chia làm hai phần: Thứ nhất là Request (Gửi yêu cầu) và Response (Trả kết quả). Giờ chúng ta sẽ tìm hiểu chi tiết hai quá trình này nhé:

Request (Gửi yêu cầu)

Khi chúng ta gõ địa chỉ một website, ví dụ như:

https://cuonglog.com/lap-trinh.html

Khi đó, chúng ta đang yêu cầu truy cập tới một máy tính trên Internet (Thường gọi là máy chủ web, tiếng anh gọi là Web Server) có địa chỉ là www.cuonglog.com

Việc truy cập vào địa chỉ https://cuonglog.com được ánh xạ tới thư mục website trên máy chủ. Cuối cùng là tên file html mà ta muốn yêu cầu hiển thị. Trong ví dụ trên à file lap-trinh.html

Response (Trả kết quả)

Sau khi đã thực hiện gửi yêu cầu ở trên, máy chủ (còn gọi là Web Server) sẽ trả về cho trình duyệt toàn bộ nội dung trang HTML.

Lúc này, trình duyệt chỉ nạp trang HTML và hiển thị phần văn bản được thể hiện trong file HTML, quá trình này gọi là Response ( máy chủ trả kết quả về cho trình duyệt – Browser).

Nếu trong file HTML có liên kết tới hình ảnh, thì lúc này hình ảnh chưa được tải về mà trình duyệt sẽ thực hiện lại quá trình Request – Response đối với liên kết tới hình ảnh đó. Trong trường hợp trang HTML trả về có chứa liên kết tới hình ảnh, trình duyệt sẽ thực hiện quá trình Request – Response đôi với hình ảnh đó.

Ví dụ sau đây: Trang laptrinh.html có chứa liên kết của html.jpg, css.jpg, html5.jpg, khi đó trình duyệt sẽ thực hiện 3 lần Request – Response.

Thuộc tính của thẻ <Image>

Thuộc tính alt

Tuy nhiên, có trường hợp máy chủ web (Web Server) không tìm thấy hình cần mở hoặc do mạng quá chậm, không tải về được thì ta sẽ thấy trang web hiển thị một vùng trống, điều đó làm cho người dùng cảm thấy không tin tưởng website.

Để giải quyết vấn đề trên, ta dùng thuộc tính alt (viết tắt của từ Alternative). Giá trị của biến này chính là nội dung chúng ta cần mô tả về bức ảnh khi đó chưa được tải về trang web.

Ví dụ đoạn mã với thuộc tính alt như sau:

<img src=”doremon.jpg” alt=”Hình mèo doremon” />

Hơn thế nữa, những phần mềm đọc chữ trên website, gọi là HTML Screen Reader, dành cho những người khiếm thị sẽ dựa vào thuộc tính alt này để đọc. Chính vì những lý do đó, HTML5 bắt buộc ta phải có thuộc tính này cho thẻ image. Nếu không có thuộc tính này, khi các bạn kiểm tra mã trên Validator của W3C sẽ nhận lấy 1 lỗi vì thiếu thuộc tính này.

Thuộc tính title

Ngoài thuộc tính alt, chúng ta có thêm một thuộc tính giúp cho người sử dụng website mỗi khi rê chuột vào hình sẽ có 1 tooltip hiển thị chú giải cho hình đó. Ví dụ như khi các bạn rê chuột lên hình bên dưới sẽ có một tooltip hiển thị ra ( hình ảnh xe đạp):

 

Thuộc tính này đó chính là title, với cú pháp

<img src=”https://cuonglog.com/wp-content/uploads/2018/09/chiếc-xe-đạp-1jpg.jpg” alt=”Hình ảnh xe đạp” title=”Hình ảnh xe đạp” />

Tuy nhiên, về mức độ quan trọng thì nó không bằng thuộc tính alt. Vì thế, trong thẻ img các bạn có thể không sử dụng thuộc tính title mà yên tâm là không bị nhận lỗi nào từ W3C Validator.

Thuộc tính định kích thước width – height

Đối với hình ảnh, bạn rất nên quy định kích thước của nó khi hiển thị trên website của mình. Điều này rất có lợi, bởi vì có khả năng hình ảnh gốc, nghĩa là file đang được lưu trữ có kích thước lớn hơn kích thước trang web của mình, thì việc quy định khung hình để giới hạn kích thước hiển thị của mình là điều cần thiết, tránh làm hư cấu trúc thiết kế của website.

Kích thước  của hình ảnh thông qua hai thuộc tính là: width và height:

  • width: Quy định chiều rộng của  hình ảnh
  • height: Quy định chiều cao của hình ảnh

Ta thực hiện đoạn mã sau đây

<img src=”https://cuonglog.com/wp-content/uploads/2018/09/chiếc-xe-đạp-1jpg.jpg” alt=”Hình ảnh xe đạp” title=”Hình ảnh xe đạp”  width=”500px” height=”400px” />

Gán chú thích cho hình ảnh <figure> – <figcaption>

Bạn có hay thường thấy ở mỗi hình ảnh thường sẽ có chú thích ở ngay trên hoặc dưới hình, cái này được gọi là caption.

Và trong HTML5, bạn có thể dùng thẻ <figure> để giúp ta làm được điều này. Ta thực hiện cú pháp như sau

<figure>

<img src=”https://cuonglog.com/wp-content/uploads/2018/09/chiếc-xe-đạp-1jpg.jpg” alt=”Hình ảnh xe đạp” title=”Hình ảnh xe đạp”  width=”500px” height=”400px” />

<figcaption>Hình ảnh tranh vẽ xe đạp</figcaption>

</figure>

Thẻ <figcaption> sẽ giúp chúng ta đặt dòng chữ chú thích cho bức hình. Cả 2 thẻ <figcaption> và <img> đều được đặt lồng bên trong thẻ <figure>. Khi ta muốn chú thích nằm trên hình ta sẽ đặt thẻ <figcaption> ở trên thẻ <img>.

Ngược lại, ta đặt thẻ <figcaption> dưới thẻ <img> thì chú thích sẽ nằm dưới hình như ví dụ đoạn mã bên trên.

Tổng kết

Bài viết trên đã giúp bạn tìm hiểu về Content Image trong trang web. Content Image là loại hình ảnh dùng để truyền tải nội dung cho trang web, nó mang thông tin cho người xem vì vậy ta phải biết sửa lỗi khi hình ảnh không được nạp bởi một lý do khách quan nào đó, bằng cách sử dụng thuộc tính alt. Content Image không thể thiếu một trong hai thuộc tính là src và alt.

 

 

 

 

Để lại bình luận của bạn

avatar