Trong bài chúng ta sẽ học những
mục sau:
- Dùng thẻ <img> để chèn 01 hình ảnh vào tài liệu HTML.
- Dùng thuộc tính src to define the URL of the image
- Dùng thuộc tính alt để xác định dòng chữ thay thế cho 01 tấm ảnh nếu nó bị lỗi không hiển thị được.
- Dùng thuộc tính width và height để định kích thước hình ảnh.
- Dùng thuộc tính CSS width và height để định kích thước ảnh.
- Dùng thuộc tính CSS float để làm cho hình "nổi lên".
- Dùng thẻ <map> để làm 1 "bản đồ hình"
- Dùng thẻ <area> để xác định khu vực có thể bấm chuột trong bản đồ hình.
- Dùng thuộc tính usemap trong thẻ <img> để trỏ tới 1 bản đồ hình.
Ghi
chú:Việc tải hình ảnh rất mất thời gian.
Hình ảnh có dung lượng lớn có thể làm chậm trang web
của bạn.Nên cân nhắc khi sử dụng hình ảnh.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>
Cú pháp
Trong
HTML, hình ảnh được thêm vào bằng thẻ <img>
Thẻ
<img> là thẻ rỗng, nó chỉ chứa các thuộc tính, và
không có thẻ đóng.
Thuộc
tính src xác định URL (đường dẫn) của file hình:
<img src="url" alt="some_text" style="width:width;height:height;">
Thuộc tính alt
Thuộc
tính dùng để hiển thị dòng chữ thay thế trong trường
hợp hình ảnh bị lỗi không hiển thị được.
Ví dụ:
<img src="wrongname.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Kích cỡ ảnh - Width và Height
Bạn
có thể dùng thuộc tính style để định chiều rộng(width)
và chiều cao(height) của hình ảnh(đơn vị là pixel).
Ví dụ:
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Bên
cạnh đó, bạn có thể dùng thuộc tính width
và height( đơn vị cũng là pixel) để định kích cỡ
hình.
Ví dụ:
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
Dùng Width và Height, hay Style?
Cả
03 thuộc tính đều hợp chuẩn HTML5.
Tuy
nhiên, tôi khuyến cáo bạn nên dùng thuộc tính style để
ngăn ngừa sự chỉnh sửa thuộc tính từ bên ngoài.
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>
<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 lưu trữ trong thư mục khác
Nếu
không cấu hình rõ, mặc định trình duyệt sẽ tự động
tìm trong thư mục cùng cấp của trang web.
Tuy
vậy, người ta thường lưu trữ hình ảnh trong thư mục
con. Bạn phải cấu hình đương dẫn đến thư mục trong
thuộc tính src.
Ví dụ:
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Hình ảnh lưu trên Server khác
01
vài trang web lưu hình ảnh trên server riêng.
Ví dụ:
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Ảnh động
Chuẩn
GIF là chuẩn ảnh động.
Ví dụ:
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
Dùng hình ảnh như liên kết
Để
dùng hình ảnh như là 1 liên kết,
đơn giản bạn chỉ cần bỏ thẻ <img> bên trong thẻ
<a>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Chú
ý: thuộc tính border:0;
để ngăn IE9 (và các trình duyệt cũ) thêm vào đường
viền quanh hình ảnh (khi hình ảnh được xem như là 1
liên kết).
Làm "nổi" ảnh
Dùng
thuộc tính CSS float
để làm hình ảnh nổi bên phải hay bên trái chữ.
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Bản đồ hình ảnh
Dùng
thẻ <map> để tạo bản đồ hình ảnh. 01 bản đồ
hình ảnh là 1 tấm ảnh có những vùng có thể click được.
Thuộc
tính name của thẻ <map> liên quan thuộc tính
usemap trong thẻ <img> (xem ví dụ)
Thẻ
<map> chứa 01 số thẻ <area> , dùng để xác định
nơi nào có thể click chuột được trên bản đồ hình.
Tham
số coor="top,left,width,height" nếu là hình vuông
Tham
số coor="top,left,radius" nếu là hình tròn
Ví dụ:
<img src="xinh.jpg" alt="Planets" usemap="#planetmap"style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Mắt" href="mat.htm">
<area shape="circle" coords="90,58,3" alt="Mũi" href="mui.htm">
<area shape="circle" coords="124,58,8" alt="Miệng" href="mieng.htm">
</map>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Mắt" href="mat.htm">
<area shape="circle" coords="90,58,3" alt="Mũi" href="mui.htm">
<area shape="circle" coords="124,58,8" alt="Miệng" href="mieng.htm">
</map>
Tác giả: #drM
Nguồn: Sưu Tầm
Không có nhận xét nào:
Đăng nhận xét