Thẻ hiển thị hình ảnh

Thẻ hiển thị hình ảnh: img

Có 3 định dạng ảnh thường dùng trên các trang web: JPG, PNG, GIF 

Ví dụ

<!DOCTYPE html>
<html>
<body>

<h2>Meet Mr. Bob</h2>
<img src="http://codelean/home.png"
     alt="Mr. Bob" style="height:100px">

</body>
</html>

Cú pháp

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

Thẻ <img> là thẻ rỗng, chỉ gồm các thuộc tính và không có thẻ đóng.

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

Thuộc tính alt

Thuộc tính alt tạo ra một dòng chữ thay thế cho hình ảnh trong trường hợp ảnh không hiển thị được (do mạng chậm, đường dẫn của thuộc tính src bị sai, hoặc khi người duyệt web dùng một phần mềm đọc màn hình - screen reader).

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

<p>Nếu trình duyệt không tìm thấy hình ảnh, nó sẽ hiển thị giá trị của thuộc tính alt:</p>
<img src="perfect-girl.gif" alt="Perfect girl not found" style="width:128px;height:128px;">

Ta luôn luôn phải khai báo thuộc tính alt. Một trang web không được coi là hợp lệ nếu không có đủ các thuộc tính alt của thẻ <img>. 

Cỡ ảnh - Chiều rộng và chiều cao

Ta dùng thuộc tính style để chỉ định chiều rộng và chiều cao của ảnh.

Giá trị tính theo pixel (thêm px sau số chỉ chiều rộng/cao):

<img src="http://codelean/home.png"     alt="home icon" style="width:208px;height:128px;">

Ngoài ra, ta có thể dùng thuộc tính width và height. Với hai thuộc tính này, giá trị mặc định là tính theo pixel: Chú ý: Luôn định rõ chiều cao và chiều rộng của hình ảnh. Nếu không trang web sẽ bị rung rinh khi hiển thị hình ảnh. 

<img src="http://codelean/home.png"     alt="Mr. Bob icon" width="128" height="128">

Nên dùng thuộc tính width và height, hay style?

Cả 3 thuộc tính width, height, and style đều hợp lệ trong HTML5.

Tuy nhiên, ta nên dùng thuộc tính style để tránh việc kích thước ảnh bị các thuộc tính css khác điều khiển:

<head>
    <style>
        img {
            width:50%;
        }
    </style>
</head>
<body>
<div>

    <img src="http://codelean/home.png"         alt="HTML5 Icon" style="width:128px;height:128px;" float="left">
    <img src="http://codelean/home.png"         alt="HTML5 Icon" width="128" height="128" float="right">
</div>

</body>

Đường dẫn ảnh

Trong dự án, ảnh thường được lưu vào một thư mục riêng. ta thường dùng đường dẫn tương đối cho thuộc tính src.

Trong đường dẫn ảnh phải ghi đầy đủ tên thư mục vào đường dẫn ảnh:

Ví dụ:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Ảnh động

Ta có thể hiển thị ảnh động (định dạng GIF) như ảnh thông thường, không cần thay đổi cú pháp.

<img src="https://pixelsbyumair.files.wordpress.com/2014/12/cssgif.gif"     alt="Computer Man" style="width:250px;height:200px;">

Dùng ảnh làm liên kết

Để dùng ảnh làm liên kết, chỉ cần đặt thẻ <img> vào trong thẻ <a>:

<a href="http://codelean.vn" target="_blank">
    <img src="http://codelean/home.png"         alt="Website codelean" style="width:142px;height:142px;border:0;">
</a>

Chú ý: thêm border:0; vào style để các phiên bản IE9 và trước đó không hiển thị đường viền quanh hình ảnh dùng làm liên kết. 

Đặt vị trí cho ảnh

Dùng thuộc tính CSS float để đặt ảnh bên trái hoặc bên phải văn bản:

<p><img src="http://codelean/home.png"        alt="Smiley face" style="float:right;width:42px;height:42px;">
    The image will float to the right of the text.</p>
<br/>
<p><img src="http://codelean/home.png"        alt="Smiley face" style="float:left;width:42px;height:42px;">
    The image will float to the left of the text.</p>

Bản đồ ảnh

Ta có thể dùng thẻ <map> để định nghĩa một bản-đồ-ảnh(image-map). Một bản đồ ảnh là một hình ảnh có các vùng có thể nhấp chuột vào.

Thuộc tính usemap của thẻ <img> tương ứng với thuộc tính name của thẻ <map> .

Thẻ <map> có các thẻ <area> để định nghĩa các vùng có thể nhấp chuột trong bản-đồ-ảnh:

<body style="background-color:#272780;">
<img src="http://codelean/home.png"     alt="codelean map" usemap="#codeleanmap" style="width:360px;height:126px;">
<map name="codeleanmap">
    <area shape="rect" coords="0,0,262,126" alt="Codelean"          href="http://codelean.vn"   target="_blank">
    <area shape="circle" coords="300,58,38" alt="Codelean facebook"          href="http://https://www.facebook.com/groups/957732907935331/"

          target="_blank">
</map>
</body>

Tóm tắt

Dùng thẻ <img> để định nghĩa một hình ảnh
Dùng thuộc tính src để định nghĩa URL của hình ảnh
Dùng thuộc tính alt để định nghĩa dòng chữ thay thế cho ảnh khi ảnh không hiển thị được
Dùng thuộc tính width và height để định nghĩa kích thước của ảnh
Dùng thuộc tính CSS width and height để chắc chắn định nghĩa kích thước ảnh (không bị các thuộc tính CSS khác ghi đè)
Dùng thuộc tính CSS float để xếp vị trí ảnh
Dùng thẻ <map> để định nghĩa một bản-đồ-ảnh(image-map)
Dùng thẻ <area> để định nghĩa các vùng có thể click bản-đồ-ảnh
Dùng thuộc tính usemap của thẻ <img> để trỏ ảnh đến thẻ <map> tương ứng

Chú ý: Việc load ảnh nhanh hay chậm phụ thuộc độ lớn bức ảnh. Ảnh lớn quá sẽ làm chậm tốc độ load trang web. Phải lưu ý khi dùng ảnh cho trang web.

Bài đăng nổi bật

Kill Port 8080