•
Hình Ảnh
Để tạo hình ảnh chúng ta dùng thẻ <img>:
<img src="https://www.codehub.vn/img/logo.png">Tạo Hình Ảnh trong HTML với Thẻ
Lưu ý: Thẻ <img> là thẻ tự đóng nên chúng ta không thêm thẻ đóng cho nó.
Các thuộc tính thường được sử dụng cho thẻ <img> gồm có:
- Thuộc tính
src. - Thuộc tính
alt. - Thuộc tính
widthvàheight. - Thuộc tính
title.
Thuộc Tính src
Thuộc tính src là thuộc tính bắt buộc khi sử dụng thẻ <img> và giá trị của nó được dùng để xác định vị trí của hình ảnh.
<img src="https://www.codehub.vn/img/logo.png">Ở ví dụ trên, trong thẻ <img> chúng ta sử dụng thuộc tính src với giá trị là một URL https://www.codehub.vn/img/logo.png.
Thuộc tính src được dùng để quy định đường dẫn của ảnh.
Giá trị của thuộc tính src có thể là một đường dẫn URL tuyệt đối (như ở ví dụ trên) hoặc một URL tương đối.
Chúng ta sử dụng địa chỉ URL tương đối trong trường hợp địa chỉ URL của hình ảnh có giao thức (http hay https), tên miền và cổng (mặc định là 80) trùng với địa chỉ URL của trang web chứa nó.
Ví dụ:
<img src="/img/logo.png">Với ví dụ trên thì trình duyệt sẽ chuyển địa chỉ tương đối /img/logo.png về địa chỉ tuyệt đối sử dụng giao thức (http hay https), tên miền và cổng của trang web chứa đoạn mã này.
Thuộc Tính width và height
Thuộc tính width và height dùng lần lượt để quy định bề rộng và bề dài của ảnh.
<img src="https://www.codehub.vn/img/logo.png" widht="50px" height="50px">Nếu các thuộc tình này không xuất hiện trong thẻ <img> thì chúng sẽ có giá trị mặc định là 100% bề rộng hoặc bề dài của ảnh gốc.
Thuộc Tính alt
Thuộc tính alt (viết tắt của từ alternative nghĩa là thay thế) được các máy tìm kiếm như Google hay Bing sử dụng để xác định nội dung của hình ảnh vì các máy tìm kiếm này không thể đọc được hình ảnh mà chỉ đọc được văn bản.
<img src="https://www.codehub.vn/img/logo.png" alt="Logo CodeHub.vn">Mặc dù không tạo ra sự khác biệt nào khi được hiển thị trên trình duyệt. Bạn vẫn nên sử dụng thuộc tính alt vì nó giúp các máy tìm kiếm đọc tốt hơn nội dung của trang.
Thuộc Tính title
Thuộc tính title quy đinh tiêu đề của ảnh. Khi người dùng rê chuột lên trên ảnh thì trình duyệt sẽ hiển thị một popup nhỏ với nội dung là giá trị của thuộc tính title này.
<img src="https://www.codehub.vn/img/logo.png" title="Logo CodeHub.vn">Giá trị của thuộc tính title được trình duyệt hiển thị khi người dùng rê chuột lên hình ảnh. Khác với alt, title thường không được các máy đọc màn hình và các máy tìm kiểm sử dụng. Chính vì vậy thuộc tính này thường vắng mặt trong các thẻ <img>.
