HTML
HTML5
CANVAS
HEADING TAGS
FORM TAGS
LIST TAGS
PARAGRAPH TAGS
COMMON TAGS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT

Quảng cáo

Cách dùng thẻ img trong HTML và các thuộc tính của img

Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ img trong HTML để tạo hình ảnh, giúp trang web trở nên sinh động hơn.

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ó.

Quảng cáo

  • Tạo hình đẹp => Sử dụng các thẻ HTML để xây dựng, điển hình là thẻ img.
  • 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 chúng ta sẽ tìm hiểu dùng thẻ img để tạo hình ảnh trước.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Thẻ img trong HTML là gì?

Img là chữ viết tắt của image, nó là một thẻ HTML được dùng để tạo hình ảnh trên các trang web. 100% các trang web đều có sử dụng thẻ này.

Để 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="link"/>

Trong đó link chính là đường dẫn trỏ đến hình ảnh. Nó phải là một link tồn tại trên internet, không thể là link trên máy tính của khách được. Vì vậy bạn phải upload hình lên hosting thì bất kì máy tính nào truy cập vào trang web đều nhìn thấy.

Ví dụ: Tạo ra một hình ảnh với đường link của hình đã được upload sẵn lên hosting của freetuts.

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

2. Các thuộc tính của thẻ img trong HTML

Để làm việc nhuần nhuyễn với thẻ a thì bạn phải hiểu ý nghĩa tất cả cá thuộc tính của nó, điển hình nhất chính là những thuộc tính sau:

Thuộc tính 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 (tất cả đều đã upload lên hosting).

Quảng cáo

Ví dụ:

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

Thuộc tính alt

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

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

Đối với dân làm SEO thì thuộc tính này giúp công cụ bot của Google biết được ý nghĩa của bức ảnh.

Thuộc tính width và height

Đây là thuộc tính thiết lập chiều rộng (width) và chiều cao (height) cho hình ảnh. Bạn cũng có thể sử dụng CSS để thiết lập.

Demo RUN
<img width="500px" height="200px" src="https://freetuts.net/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>
<img width="200px" height="100px" src="https://freetuts.net/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ì 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 trong html

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

Quảng cáo

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

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

Demo RUN
<a href="https://freetuts.net">
    <img src="http://code.freetuts.net/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 và trong hình 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ì sẽ chuyển tới hình full về mặt trời, cách làm như ví dụ dưới đây.

Demo RUN
<img src="https://freetuts.net/upload/tut_post/images/2014/08/14/123/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://freetuts.net/upload/tut_post/images/2014/08/14/123/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ẻ mapname="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
    • https://freetuts.net/upload/tut_post/images/2014/08/14/123/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.

Quảng cáo

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top