Thẻ <img> trong HTML

1) Thẻ <img> trong HTML

- Thẻ <img> dùng để chèn hình ảnh vào trang web.

- Ví dụ: Các hình ảnh bên dưới được chèn vào trang web chính là nhờ vào thẻ <img>.

- Một thẻ <img> sẽ tương đương với một tấm hình.

- Thẻ <img> không có thẻ đóng.

- Để sử dụng thẻ <img>, ta dùng cú pháp như sau:

<img src="đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web">

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <img src="http://webcoban.vn/image/flower.gif">
</body>
</html>

Xem ví dụ

2) Các thuộc tính của thẻ <img>

- Thẻ <img> có chín thuộc tính cơ bản:

- Dưới đây là bảng mô tả sơ lược về chín thuộc tính đó:

src	Xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web
alt	Xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác
border	Xác định độ dày của đường viền bao xung quanh tấm hình
width	Thiết lập chiều rộng cho tấm hình
height	Thiết lập chiều cao cho tấm hình
vspace	Xác định khoảng cách lề phía trên và lề phía dưới của tấm hình
hspace	Xác định khoảng cách lề bên trái và lề bên phải của tấm hình
align	Xác định vị trí của tấm hình so với các văn bản xung quanh
usemap	Xác định một "bản đồ hệ thống tọa độ của các vùng" để kết hợp với tấm hình, tạo ra một bản đồ ảnh. Bạn sẽ được tìm hiểu rõ về thuộc tính này trong bài thẻ <map> & <area>

2.1) Thuộc tính src

- Thuộc tính src dùng để xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web.

(Đường dẫn đến tập tin hình ảnh có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Thẻ img bên dưới sử dụng đường dẫn tuyệt đối</p>
    <img src="http://webcoban.vn/image/flower.gif">
    <p>- Thẻ img bên dưới sử dụng đường dẫn tương đối</p>
    <img src="../image/flower.gif">
</body>
</html>

Xem ví dụ

2.2) Thuộc tính alt

- Thuộc tính alt dùng để xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <img src="../image/flower.gif" alt="Hình ảnh không tồn tại">
    <img src="../image/flower75.gif" alt="Hình ảnh không tồn tại">
</body>
</html>

Xem ví dụ

2.3) Thuộc tính border

- Thuộc tính border dùng để xác định độ dày của đường viền bao xung quanh tấm hình.

(Mặc định, giá trị của thuộc tính border được tính theo đơn vị pixel)

Ví dụ:

- Tấm hình bên dưới sẽ có đường viền dày 10px

<!DOCTYPE html>
<html>
<body>
    <img src="../image/flower.gif" border="10">
</body>
</html>

Xem ví dụ

2.4) Thuộc tính width

- Thuộc tính width dùng để thiết lập chiều rộng cho tấm hình.

- Giá trị của thuộc tính width có thể xác định theo một trong hai loại đơn vị:

px (pixel)
% (tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó)

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Tấm hình bên dưới sẽ có chiều rộng bằng 300 pixel</p>
    <img src="../image/flower.gif" width="300px">
    <p>- Tấm hình bên dưới sẽ có chiều rộng bằng 100% chiều rộng phần nội dung của phần tử cha của nó (tức là phần tử body)</p>
    <img src="../image/flower.gif" width="100%">
</body>
</html>

Xem ví dụ

2.5) Thuộc tính height

- Thuộc tính height dùng để thiết lập chiều cao cho tấm hình.

- Giá trị của thuộc tính height có thể xác định theo một trong hai loại đơn vị:

px (pixel)
% (tỷ lệ phần trăm chiều cao phần nội dung của phần tử cha của nó)

- Lưu ý: Nếu thiết lập giá trị của thuộc tính height theo đơn vị % thì phần tử cha của nó phải có chiều cao được xác định.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <p>- Tấm hình bên dưới sẽ có chiều cao bằng 100 pixel</p>
    <img src="../image/flower.gif" width="100px">
    <p>- Tấm hình bên dưới sẽ có chiều cao bằng 50% chiều cao phần nội dung của phần tử cha của nó.</p>
    <div style="border:1px solid black;height:300px">
        <img src="../image/flower.gif" height="50%">
    </div>
</body>
</html>

Xem ví dụ

2.6) Thuộc tính vspace

- Thuộc tính vspace dùng để xác định khoảng cách lề phía trên và lề phía dưới của tấm hình.

Ví dụ:

- Tấm hình bên dưới sẽ có lề trên và lề dưới là 100px

<!DOCTYPE html>
<html>
<body>
    <div style="display:inline-block;border:1px solid #555">
        <img src="../image/smile.png" vspace="100">
    </div>
</body>
</html>

Xem ví dụ

- Lưu ý; Ta có thể sử dụng thuộc tính margin-top & margin-bottom trong CSS để thay thế.

2.7) Thuộc tính hspace

- Thuộc tính hspace dùng để xác định khoảng cách lề bên trái và lề bên phải của tấm hình.

Ví dụ:

- Tấm hình bên dưới sẽ có lề trái và lề phải là 100px

<!DOCTYPE html>
<html>
<body>
    <div style="display:inline-block;border:1px solid #555">
        <img src="../image/smile.png" hspace="100">
    </div>
</body>
</html>

Xem ví dụ

- Lưu ý; Ta có thể sử dụng thuộc tính margin-left & margin-right trong CSS để thay thế.

2.8) Thuộc tính align

- Thuộc tính align dùng để xác định vị trí của tấm hình so với các văn bản xung quanh.

- Thuộc tính align có năm giá trị cơ bản:

left	Tấm hình sẽ được đẩy sang bên trái	Xem ví dụ
right	Tấm hình sẽ được đẩy sang bên phải	Xem ví dụ
top	Văn bản sẽ nằm ở vị trí cao nhất so với tấm hình	Xem ví dụ
middle	Văn bản sẽ nằm ở vị trí giữa so với tấm hình	Xem ví dụ
bottom	Văn bản sẽ nằm ở vị trí thấp nhất so với tấm hình	Xem ví dụ

3) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <img> với định dạng CSS như sau:

img { 
    display: inline-block;
}