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

Ở những bài viết trước mình đã giới thiệu cho các bạn biết cách trình bày văn bản và danh sách cho trang web thông qua HTML. Đã đến lúc chúng ta học cách chèn những đối tượng khác ngoài chữ hay còn gọi là text vào trang web của mình. Bài viết sau đây, bạn sẽ tìm hiểu cách chèn hình ảnh vào trong trang web của mình.

Với trang web, ta có 2 loại image với ý nghĩa khác nhau. Đó là

  • Content Image
  • Background Image

Content Image

Với một tấm hình, ta có thể truyền tải nội dung cho người xem một cách rõ ràng và thiết thực nhất. Và với mục đích này, thì ta có loại “Content Image”, nghĩa là hình ảnh thể hiện nội dung ta muốn truyền tải cho người xem.

Ví dụ, ta có một website bán hàng ở FPT Shop. Các loại sản phẩm muốn bán được thì cần có hình ảnh để người mua nhìn rõ sản phẩm và khi nhìn vào hình ảnh đó thì họ cũng có được một số thông tin về sản phẩm đó . Loại hình ảnh như vậy ta rất thường thấy ở các website và nó chính là “Content Image”.

Background Image

Background Image mang ý nghĩa về kỹ thuật cho website, nghĩa là làm bắt mắt, tôn lên vẻ đẹp của website mà không cần truyền tải một thông điệp rõ ràng. Và có tên gọi là “background image”

Tìm hiểu về Content Image

Với Content Image, ta sẽ sử dụng thẻ <img> để hiển thị một hình ảnh trang web.

Thẻ <img> là một thẻ rỗng. Vì thế, ta có thể sử dụng 2 cú pháp như sau:

<img>

Mình khuyến khích các bạn sử dụng loại cú pháp này:

<img />

Tuy nhiên, với cú pháp như vậy ta chưa thể hiện một hình ảnh trên trang web, vì ta chưa hề chỉ định hình ảnh nào sẽ được hiển thị. Để làm điều đó, bạn cần sử dụng một thuộc tính gọi là source (src). Trong đó, giá trị value của thuộc tính src là một đường dẫn chỉ đến ảnh của chúng ta đang lưu trữ.

Có 2 loại đường dẫn:

  • Đường dẫn tuyệt đối (absolute path)
  • Đường dẫn tường đối (relative path)

Đường dẫn tuyệt đối

Với đường dẫn tuyệt đối, ta phải ghi rõ đường dẫn nằm bắt đầu từ ổ đĩa nào, rồi tới các thư mục chứa nó theo thứ tự, sau đó là tên file ảnh.

Đối với việc liên kết các file bao gồm cả hình ảnh, video, file script và cả những file html khác trong cùng một ứng dụng website, bạn nên tránh sử dụng loại đường dẫn này.

Lý do là vì khi ta thay đổi thư mục website qua một ổ đĩa khác thì ta phải thay đổi lại giá trị của thuộc tính src trong mã nguồn html.

Và đường dẫn tuyệt đối thì nhìn rất dài dòng. Tuy nhiên, có trường hợp là những liên kết ngoài ứng dụng website của bạn thì ta phải sử dụng loại đường dẫn này.

Đường dẫn tương đối

Đường dẫn tuyệt đối còn gọi là Relative path thì hoàn toàn khuyến khích sử dụng bởi vì nó khắc phục hạn chế của đường dẫn tuyệt đối.

Bạn không cần chỉ định rõ ổ đĩa, các thư mục trên cấp của thư mục website. Mà ta chỉ cần quan tâm, đường dẫn từ cấp thư mục website làm việc.

Cơ chế của đường dẫn tương đối , là nó sẽ bắt đầu tìm kiếm từ thư mục đang chứa file HTML. Ví dụ ta có cấu trúc website như sau

Thư mục: HTML

File: laptrinh.html

File: html.jpg

Như ví dụ ở trên, thư mục chứa file laptrinh.html chính là thư mục “HTML”, vì thế trong mã nguồn khi ta dùng đường dẫn tương đối là tên file “html.jpg” thì trình duyệt sẽ hiểu ngay file ảnh của ta đang có vị trí cùng cấp với file HTML mà nó đang hiển thị. Trên thực tế, ta sẽ thấy người ta có một cấu trúc lưu trữ khoa học cho thư mục website.

Tất cả hình ảnh sẽ vào thư mục chứa hình ảnh là images. Lúc này, ở mã nguồn của bạn phải thay đổi lại đường dẫn và đơn giản là ta chỉ cần thêm từ images vào dấu / ngay trước tên file.

Cũng dựa trên  nguyên tắc của đường dẫn tương đối, là sẽ xác định từ file html đang làm việc. Sau đó, để đi tới hình ảnh này thì nó phải đi vào thư mục images.

Khi đó, đường dẫn tương đối đến file html.jpg trong trang laptrinh.html sẽ là

<img src=”images/html.jpg” />

Lời kết

Bạn vừa tìm hiểu về Content Image, loại hình ảnh giúp truyền tải nội dung cho website có tính sinh động và bắt mắt, đó là thẻ <img>

Trong thẻ này, bạn có một thuộc tính quan trọng chính là src (source). Điều đặc biệt mà ta đã tìm hiểu đối với thuộc tính src chính là giá trị của nó chấp nhận một trong hai loại đường dẫn là đường dẫn tuyệt đối (absolute path) và đường dẫn tương đối (relative path)

Đó là hai khái niệm rất phổ biến và quan trọng khi ta làm việc với HTML cụ thể là hyperlink. Bạn hãy nhớ rằng, với các liên kết nội bộ, nghĩa là trong cùng ứng dụng website, chúng ta phải sử dụng đường dẫn tương đối.

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

avatar