NTM Solutions

Facebook Youtube Google+

Chủ Nhật, 4 tháng 12, 2016

TỰ HỌC HTML – BÀI 11 – XỬ LÝ HÌNH ẢNH

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>

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>

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">Try it Yourself »

Ả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>

Ví dụ

<a href="default.asp">
  
<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ữ.

Ví dụ

<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>Try it Yourself »

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>