Bài 15: Ảnh trong HTML
Ảnh trong HTML
Ảnh JPG
Ảnh GIF
Ảnh PNG
Ví dụ:
<!DOCTYPE html>
<html>
<body><h2>Núi hùng vĩ</h2>
<img src=“pic mountain.gif” alt=“Mountain View” style=“width:304px;height:228px;”></body>
</html>
 |
Luôn đặt chiều rộng và chiều cao của một ảnh. Nếu chiều rộng và chiều cao không được xác định, trang sẽ nhấp nháy trong khi ảnh tải lên. |
|---|
Cú pháp chèn ảnh trong HTML
Trong HTML, ảnh được định nghĩa với thẻ <img>.
Thẻ <img> là trống, nó chỉ chứa các thuộc tính, và không có thẻ đóng.
Các thuộc tính src xác định URL ( địa chỉ web) của ảnh:
<img src=“url“ alt=“some_text“>Các thuộc tính alt
Thuộc tính alt định nghĩa một văn bản thay thế cho hình ảnh, nếu hình ảnh không thể hiện thị được.
Thuộc tính alt cung cấp thông tin thay thế cho một hình ảnh, nếu một người vì lí do nào đó không thể xem nó (vì kết nối mạng chậm, hoặc lỗi trong thuộc tính src, hoặc nếu người dùng sử dụng một trình đọc màn hình).
Nếu trình duyệt không thể tìm thấy ảnh, nó sẽ hiển thị nội dung chứa trong alt:
Thuộc tính alt là bắt buộc. Một trang web sẽ không hợp lệ nếu thiếu nó.
Trình đọc màn hình trong HTML
Trình đọc màn hình là một chương trình phần mềm mà có thể đọc mọi thứ hiển thị trên màn hình.
Trình đọc màn hình này rất có ích cho người mù, khiếm thị hoặc học dạng khiếm thính.
|
Trình đọc màn hình có thể đọc thuộc tính alt. |
|---|
Kích thước ảnh – Width và Height
Bạn có thể sử dụng thuộc tính style để xác định chiều rộng và chiều cao cho một ảnh.
Các giá trị được quy định tại các điểm ảnh pixel (sử dụng px sau giá trị):
Ngoài ra bạn có thể sử dụng thộc tính width và height. Tại đây, giá trị được đặt mặc định theo đơn vị pixel:
Width and Height or Style?
Tất cả thuộc tính width, height, and style là phù hợp trong các tiêu chuẩn HTML5 mới nhất.
Chúng tôi gợi ý bạn nên sử dụng thuộc tính style. Nó sẽ tránh được việc thay đổi định kiểu được định ngĩa trong style sheet.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body><img src=“html5.gif” alt=“HTML5 Icon” style=“width:128px;height:128px;”>
<img src=“html5.gif” alt=“HTML5 Icon” width=“128” height=“128”></body>
</html>
Hình ảnh trong thư mục khác
Nếu chỉ rõ đường dẫn, trình duyệt sẽ tìm các ảnh trong cùng thư mục với trang web .
Tuy nhiên, thường lưu trữ các ảnh trong thư mục con. Vì thế, bạn phải cho cả tên thư mục con vào trong thuộc tính src:
Ảnh trên máy chủ khác
Một số trang web lưu trữ hình ảnh của họ trên các máy chủ hình ảnh.
Thực vậy, bạn có thể truy cập hình ảnh từ bất kỳ địa chỉ web trên thế giới:
Ví dụ:
<img src=“https://timoday.edu.vn/wp-content/uploads/2015/09/logo11.png” alt=“timoday.edu.vn”>
Ảnh động
Chuẩn GIF cho phép tạo ảnh động:
Lưu ý cú pháp chèn hình ảnh động không khác gì với chèn hình ảnh không bình thường.
Sử dụng ảnh như là một liên kết (link)
Để sử dụng ảnh như một liên kết, đơn giản chỉ là thẻ <img> nằm trong thẻ <a>:
Ví dụ:
<a href=“timoday.edu.vn”>
<img src=“smiley.gif” alt=“Tìm ở đây” style=“width:42px;height:42px;border:0;”>
</a>
|
Thêm “border: 0;” để tránh trình duyệt IE9 (và phiên bản cũ hơn) hiển thị đường viền xung quanh hình ảnh. |
|---|
Ảnh nổi
Sử dụng các thuộc tính CSS để các hình ảnh nổi lên.
Các ảnh có thể nổi sang phải hoặc sang trái của văn bản::
Ví dụ:
<p>
<img src=“smiley.gif” alt=“Smiley face” style=“float:right;width:42px;height:42px;”>
Ảnh sẽ nổi sang bên phải của văn bản.
</p><p>
<img src=“smiley.gif” alt=“Smiley face” style=“float:left;width:42px;height:42px;”>
Ảnh sẽ nổi sang bên trái của văn bản.
</p>
Bản đồ ảnh
Sử dụng thẻ <map> để định nghĩa một bản đồ ảnh. Bản đồ ảnh là một ảnh mà ở đó chúng ta có thể kích được.
Tên thuộc tính của thẻ <map>kết hợp với thẻ <img> là thuộc tính “usemap” và tạo một mối quan hệ giữa ảnh và bản đồ.
Thẻ <map>chứa một số thẻ <area>, xác định các khu vực có thể kích vào trong bản đồ ảnh:
Ví dụ:
<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>
Tóm tắt
- Sử dụng thẻ <img> để định nghĩa một ảnh
- Sử dụng thuộc tính src xác định URL ( địa chỉ web) của ảnh
- Sử dụng thuộc tính alt để xác định văn bản thay thế cho ảnh, nếu ảnh không hiển thị
- Sử dụng thuộc tính width và height để xác định kích thước của ảnh
- Sử dụng CSS width và height để xác định kích thước ảnh (cách khác)
- Sử dụng CSS float để đặt ảnh nổi
- Sử dụng thẻ <map> để định nghĩa một bản đồ ảnh
- Sử dụng thẻ <area> để định nghĩa một vùng kích được trong bản đồ ảnh
- Sử dụng thẻ <img> với thuộc tính usemap để chỉ tới một bản đồ ảnh
|
Nạp ảnh mất nhiều thời gian. Các hình ảnh lớn có thể làm chậm trang của bạn. Sử dụng các ảnh phải cẩn thận. |
|---|
Các thẻ ảnh trong HTML
| Thẻ | Mô tả |
|---|---|
| <img> | Định nghĩa một ảnh |
| <map> | Định nghĩa một ảnh bản đồ |
| <area> | Định nghĩa vùng kích được trong bản đồ ảnh |
Gỉa sử ta muốn khi rê chuột vào 1 area nào đó thì sẽ có hiệu ứng làm cho area đó MỜ đi 1 chút thì làm như thế nào vậy bạn, mình đã làm nhiếu cách mà không được? Nghĩa là làm sao để chạy được giống như thế này nà: https://gemriverside.vn/mat-bang/block1-dien-hinh-3-24-27-31.html
Muốn làm được như bạn mong muốn, bạn cần có kiến thức về CSS để biết cách cài đặt css cho các thẻ html.
xem ví dụ: https://www.w3schools.com/css/tryit.asp?filename=trycss_image_transparency
Trong ví dụ này họ sửu dụng CSS để thiết lập cho thẻ ảnh img
img.hover => là css sẽ chạy kho chuột di chuyển qua thẻ ảnh tương ứng.
Em muốn chèn ảnh nhưng không biêt định dạng cho từng cái như thế nào ý ạ?
VD:
Kiểu nếu trong mà có div thì là định dạng cho cả 2 cái luôn, đầy em chỉ muốn định dạng cho cái div của ảnh tree.jpg thôi ý ạ, còn ảnh kia không định dạng gì cả.
Ad giải đáp giúp em với ạ, em cảm ơn!