Bài 07: Dùng thẻ img trong HTML để tạo hình ảnh

Có câu "một website đẹp phải có hình ảnh, bổ cục rõ ràng và nhiều hiệu ứng bắt mắt". Chỉ với câu nói này thôi đủ để chúng ta liệt kê những công nghệ phải sử dụng để tạo nên nó.

• Tạo hình đẹp và tạo bổ cục => Sử dụng các thẻ HTML để xây dựng.
• Bổ cục rõ ràng => Sử dụng CSS để phân chia layout.
• Hiệu ứng bắt mắt => Sử dụng HTML5 và CSS3 hoặc các thư viên Javascript như jQuery.

Quá nhiều kiến thức phải không nào? Nhưng bạn đừng lo, chúng ta phải đi từ từ chứ không vội được nên trong bài này mình sẽ tìm hiểu dùng thẻ img trong HTML để tạo hình ảnh trước.

1. Sử dụng thẻ img để hiển thị hình ảnh

Để hiển thị hình ảnh lên web thì bạn sử dụng thẻ img với cú pháp sau:

<img src="url_to_image"/>

Ví dụ: XEM DEMO

<img src="https://code24h.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

2. Một số thuộc tính của thẻ img

Sau đây là một số thuộc tính hay sử dụng với thẻ img.

src

Đây là thuộc tính chứa đường dẫn trỏ đến file hình. Có nhiều loại hình khác nhau như png, jpg, gif, ... và tất cả đều có thể hiển thị được trên website. Riêng đối với giá trị của URL phải ở một trong hai dạng đó là URL kèm domain hoặc URL ở ngay thư mục hiện tại.

Ví dụ:

• https://code24h.com/images/image-name.png là full URL
• ./images/image-name.png là ngay thư mục hiện tại

alt

Đây là thuộc tính sẽ hiển thị cho trường hợp bạn truyền URL image bị sai. Nghĩa là nó sẽ hiển thị đoạn text này thay vì hình ảnh nếu URL bạn truyền vào bị sai.

Ví dụ: XEM DEMO

<img src="url_khong_ton_tai" alt="hình ảnh"/>

Width và Height

Đây là thuộc tính thiết lập chiều rộng (awidth) và chiều cao (height) cho hình ảnh.

Ví dụ: XEM DEMO

<img awidth="500px" height="200px" src="https://code24h.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>
<img awidth="200px" height="100px" src="https://code24h.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

Thông thường ta sẽ sử dụng CSS để thiết lập chiều rộng và chiều cao thay vì sử dụng hai thuộc tính trên, tuy nhiên vì chúng ta chưa học CSS nên bạn  có thể sử dụng hai thuộc tính đó để thay thế.

3. Một số cách sử dụng thẻ img

Chúng ta có thể sử dụng thẻ img kết hợp với các thẻ khác để tạo giao diện website.

Kết hợp thẻ a để tạo link hình

Nếu bạn muốn khi người dùng click chuột vào hình của bạn thì nó chuyển đến một trang nào đó thì bạn sử dụng thêm một thẻ a bao quan cái hình đó là được.

Ví dụ: XEM DEMO

<a href="https://code24h.com">
    <img src="http://code.code24h.com/upload/config/images/hoc-lap-trinh-online.png" title="Học lập trình"/>
</a>

Kết hợp thẻ map để gán link vào một vị trí nhỏ trong hình

Giả sử bạn có một hình ảnh vệ tinh trong đó có một góc nhỏ là ảnh mặt trời. Bạn muốn khi click vào góc nhỏ mặt trời trong hình đó thì nó sẽ chuyển tới hình full về mặt trời, cách làm như ví dụ dưới đây.

Ví dụ: XEM DEMO

<img src="http://www.w3schools.com/TAGS/planets.gif" awidth="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.w3schools.com/images/sun.gif">
</map>

Giải thích:

• Trong thẻ img có một thuộc tính là usemap="#planetmap" có ý nghĩa là chỉ định map được apply vào hình này, vì giá trị của nó là #planemap nên nó sẽ lấy thẻ map có name="planemap".
• Trong thẻ map có định nghĩa một area với các thuộc tính
  • shape="rect" tức là rectangle
  • coords="0,0,82,126" tức là danh sách các tọa độ tạo thành area, lấy hình ảnh trên kia làm tiêu chuẩn để đo và được tính bằng pixel.
  • alt="sun" là khi hover chuột vào vị trí có tọa độ trên thì sẽ hiển thị title này
  • href="http://www.w3schools.com/images/sun.gif" là link khi click vào area này thì chuyển đến.

4. Lời kết

Trong bài mình đã giới thiệu cách sử dụng thẻ img để tạo hình ảnh đơn giản trong HTML, và mình có giới thiệu một số cách sư dụng thẻ img kết hợp với các thẻ khác như thẻ a, thẻ map để làm những chức năng khá hữu ích. Thực tế khi các bạn làm thì phải kết hợp với CSS nữa thì giao diện mới đẹp và hiệu ứng mới bắt mắt.

Nguồn: code24h.com