Menu
GIỚI THIỆU
  • Qua bài học này chúng ta học về cách sử dụng img để tạo hình ảnh trong HTML. Ngoài các thẻ background, background-image trong css nay chúng ta sử dụng trong HTML

Bài 07: Tạo hình ảnh bằng thẻ img trong HTML

Thêm hình ảnh vào trang HTML là một phần không thể thiếu trong công việc một thiết kế web, bạn sẽ làm điều đó bằng cách nào? Dưới đây chúng ta sẽ đi tìm hiểu các đưa một hình ảnh vào website như thế nào.

 

1. Cú pháp hiển thị hình ảnh bằng <img /> trong HTML

Trong HTML, hình ảnh được định nghĩa bằng thẻ <img> .

Thẻ <img> trống, chỉ chứa các thuộc tính, và không có thẻ đóng.

Thuộc tính src xác định URL (địa chỉ web) của hình ảnh:

<img src="http://hoicode.com/themes/default/images/logo/logo_footer.png"/>

2. Thuộc tính của thẻ img

#Thuộc tính alt và title

Thuộc tính alt cung cấp một văn bản thay thế cho một hình ảnh, nếu người dùng vì một lý do nào đó không thể xem nó (do kết nối chậm, lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình).

Title image công cấp thông tin bổ sung (additional  information) và tuân theo các chỉ dẫn về tiêu  đề : phải ngắn gọn, miêu tả chính xác, hợp lý. Ví dụ trong Internet  Explorer hay Firefox, bạn sẽ thấy hiển thị đoạn text sau khi lướt chuột qua file hình ảnh.

Nếu một trình duyệt không thể tìm thấy một hình ảnh, nó sẽ hiển thị giá trị của thuộc tính alt:

<img src="footer.png" alt="Footer hoicode.com" title="Footer hoicode.com">

#Width và Height hoặc Style

Cả thuộc tính width, height và style đều có giá trị trong HTML5.

Tuy nhiên, Mình khuyên bạn nên sử dụng thuộc tính style. Nó ngăn chặn các phong cách bên trong hoặc bên ngoài về sự thay đổi kích thước ban đầu của hình ảnh:

<!DOCTYPE html>
<html>
<head>
<style>
img { 
    width:100%; 
}
</style>
</head>
<body>
/*Sử dụng style để sét width và height cho ảnh*/
<img src="footer.png" alt="Footer Hoicode" style="width:128px;height:128px;">

/*Sử dụng thuộc tính width và height*/
<img src="footer.png" alt="Footer Hoicode" width="128" height="128">

</body>
</html>

3. Sử dụng một hình ảnh cho một liên kết

Để sử dụng một hình ảnh như là một liên kết, bạn chỉ cần xếp thẻ <img> bên trong thẻ <a>:

<a href="http://hoicode.com/">
  <img src="/uploads/logo.png" alt="Logo" style="width:42px;height:42px;border:0;">
</a>

4. Sử dụng thẻ map xác định bản đồ hình ảnh

Sử dụng thẻ <map> để xác định bản đồ hình ảnh. Bản đồ hình ảnh là một hình ảnh có các khu vực có thể nhấp.

Thuộc tính name của thẻ <map> được liên kết với thuộc tính usemap của <img> và tạo ra một mối quan hệ giữa hình ảnh và bản đồ.

Thẻ <map> chứa một số thẻ <area>, xác định các khu vực có thể nhấp vào trong bản đồ hình ảnh:

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Chú Giải:

  • 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
    • href="http://www.w3schools.com/images/sun.gif" là link khi click vào area này thì chuyển đến.

5. Tóm lược bài học

  • Sử dụng phần tử HTML <img> để xác định hình ảnh
  • Sử dụng thuộc tính HTML src để xác định URL của hình ảnh
  • Sử dụng thuộc tính HTML alt để xác định một văn bản thay thế cho một hình ảnh, nếu nó không thể được hiển thị
  • Sử dụng HTML Width Height các thuộc tính để xác định kích thước của hình ảnh
  • Sử dụng CSS Width Height  tính để xác định kích thước của hình ảnh (cách khác)
  • Sử dụng thuộc tính float CSS để cho hình ảnh trôi nổi
  • Sử dụng phần tử HTML <map> để xác định bản đồ hình ảnh
  • Sử dụng phần tử HTML <area> để xác định các khu vực có thể nhấp được trong bản đồ hình ảnh
  • Sử dụng thuộc tính usemap của phần tử HTML <img> để trỏ tới một bản đồ hình ảnh

Lưu ý:

- Luôn xác định độ rộng và chiều cao của hình ảnh. Nếu chiều rộng và chiều cao không được chỉ định, trang sẽ nhấp nháy trong khi tải hình ảnh.

Việc tải hình ảnh mất thời gian. Hình ảnh lớn có thể làm chậm trang của bạn. Sử dụng hình ảnh cẩn thận.

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. Bài tiếp theo .

Chúc các bạn thành công

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 07: Tạo hình ảnh bằng thẻ img trong HTML
Tags: css html thẻ img img thẻ a
Category: HTML cơ bản
Mạnh xã hội: Follow fanpage của team https://www.facebook.com/hoicode/ để tiếp tục theo dõi các loạt bài mới nhất về HTML cơ bản,Java,C,C++,Javascript,HTML,PHP,Python,Database,Mobile.... mới nhất của chúng tôi.

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha