Trong nội dung bài trước, chúng ta đã tìm hiểu một số thẻ HTML căn bản. Trong bài 6, các bạn sẽ tìm hiểu thẻ làm việc với hình ảnh và âm thanh. Đây là những đối tượng hiển thị chủ yếu của trang web.
Cú pháp:
<img src="url" alt="text" width="value" height="value" border="value" align="value">
Trong đó:
- src: xác định đường dẫn tới tập tin ảnh cần tải lên, để đường dẫn tương đối hoặc tuyệt đối
- alt: chứa nội dung văn bản thay thế cho hình ảnh khi hình không load về được, nếu load về được thì sẽ xuất hiện nội dung trong textbox mỗi khi người dùng đưa chuột tới hình.
- width: xác định chiều rộng của ảnh.
- height: xác định chiều cao của ảnh.
- border: xác định đường viền của ảnh.
- align: xác định căn lề của ảnh so với văn bản.
Ví dụ 1: sử dụng thuộc tính style
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<img src="html.png" alt="HTML Icon" style="width:128px;height:128px;">
</body>
</html>
Kết quả:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<img src="html.png" alt="HTML Icon" width="228" height="228"">
</body>
</html>
Kết quả:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<p>Nên sử dụng thuộc tính style (bao gồm thuộc tính width và height), bởi vì ảnh sẽ không bị vỡ trong các trường hợp kích thước ảnh gốc nhỏ hơn kích thước mong muốn hiển thị
</p>
<img src="html.png" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html.png" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Kết quả:
Ví dụ 4: sử dụng đường dẫn ảnh từ một thư mục khác
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="/images/html.png" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="http://minhhienict.blogspot.com/images/html_demo.png" alt="HTML Demo">
</body>
</html>
Kết quả:
Cú pháp:
<a href="Địa chỉ trang liên kết">
<img src="đường dẫn tới ảnh" alt="nội dung thay thế">Nhãn
</a>
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<a href="Sanpham.html">
<img src="sanpham.gif" alt="Sản phẩm" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>
6.3. Bản đồ ảnh
Cú pháp:
<IMG UseMap=”Label”>
<Map Name=”Label”>
<Area Shape= “type” coords=”x1,y1,x2,y2, …” href=”URL”>
</Map>
Trong đó:
- Label: tên của bản đồ ảnh
- Type: hình dạng của các vùng trên ảnh, gồm các loại:
+ Rect: Vùng hình chữ nhật
+ Circle: Vùng hình tròn
+ Poly: Vùng hình đa giác
- Coords: toạ độ các đỉnhcủa hình
+ Rect: (x1, y1, x2, y2) là toạ độ 2 đỉnh chéo của vùng hình CN
+ Circle: (x, y, r) lần lượt là toạ độ tâm và bán kính của vùng hình tròn Poly: (x1, y1, x2, y2, x3, y3, …) là các đỉnh của vùng hình đa giác
Ví dụ:
<html>
<head><title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<img src="../image/Map.jpg" width="150" height="150" border="0" usemap="#Map1">
<map name="Map1">
<area shape="rect" coords="73,3,149,66" href="B1.htm">
<area shape="poly" coords="152,81,71,75,62,109,97,123" href="B3.htm">
<area shape="circle" coords="37,32,27" href="B2.htm">
</map>
</body>
</html>
- Type: hình dạng của các vùng trên ảnh, gồm các loại:
+ Rect: Vùng hình chữ nhật
+ Circle: Vùng hình tròn
+ Poly: Vùng hình đa giác
- Coords: toạ độ các đỉnhcủa hình
+ Rect: (x1, y1, x2, y2) là toạ độ 2 đỉnh chéo của vùng hình CN
+ Circle: (x, y, r) lần lượt là toạ độ tâm và bán kính của vùng hình tròn Poly: (x1, y1, x2, y2, x3, y3, …) là các đỉnh của vùng hình đa giác
Ví dụ:
<html>
<head><title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<img src="../image/Map.jpg" width="150" height="150" border="0" usemap="#Map1">
<map name="Map1">
<area shape="rect" coords="73,3,149,66" href="B1.htm">
<area shape="poly" coords="152,81,71,75,62,109,97,123" href="B3.htm">
<area shape="circle" coords="37,32,27" href="B2.htm">
</map>
</body>
</html>
0 on: "[HTML] Bài 6: Thẻ hình ảnh (IMG)"