Thẻ <IMG> dùng để đặt ảnh lên trang Web.
Các tập tin ảnh với phần mở rộng .jpg và .gif được hỗ trợ bởi hầu hết
các web Browser. Ngòai ra, một số trình duyệt cũng chấp nhận tập tin
.bmp và .png. Trong HTML, tag <IMG> không chỉ được dùng để đặt ảnh
lên Web mà còn dùng để chèn ảnh thay thế cho đọan chữ minh họa một liên
kết. Chúng ta sẽ đề cập đến các liên kết và các sử dụng ảnh làm liên
kết trong bài 13.

1-Cú pháp:

<IMG SRC="imagefile" ALIGN="vị trí" BORDER="Số" WIDTH="số" HEIGHT="số" ALT="text">

Trong đó:

• IMG : dùng để khai báo một ảnh sẽ được chèn vào. (Viết tắt của Image: ảnh)
  
• SRC= :Khai báo đường dẫn đến file ảnh với tên của file ảnh cần chèn vào. (viết tắt của Source: Nguồn)
  
• ALIGN= ùng để canh vị trí ảnh trong trang. (các giá trị là: right, top, left, bottom, và middle)
  
• BORDER= :Hiển thị viền bao quanh ảnh, giá trị giấu viền là 0.
  
• WIDTH= :Xác định chiều RỘNG của ảnh.
  
• HEIGHT= :Xác định chiều CAO của ảnh.
  
• ALT= :Đọan chữ thay thế cho ảnh trong trường hợp ảnh không hiển thị trên Web. (alt=Alternate: Thay thế)
  

2-Ví dụ:
Giả sử bạn có một ảnh có tên là
mypicture.jpg, Ảnh này có chiều rộng là 200px và chiều cao là 300px. Bạn
muốn đặt ảnh này lên Web. Sử dụng Thẻ <IMG>, bạn viết như sau:

<IMG SRC="http://www.thuvien-it.net/home/media/2009_it/html/image/mypicture.jpg" WIDTH="200" HEIGHT="300" ALT="my picture">


-Nếu ảnh này nằm trong thư mục image và trang Web chứa ảnh của bạn ở ngòai thư mục này. Bạn chỉ đường dẫn đến file ảnh này như sau:


<IMG SRC="image/mypicture.jpg" WIDTH="200" HEIGHT="300" ALT="my picture">


-Nếu ảnh này đặt tại địa chỉ: http://www.thuvien-it.net/image/mypicture.jpg, Bạn chỉ đường dẫn đến file ảnh này như sau:



<IMG SRC="http://www.thuvien-it.net/image/mypicture.jpg" WIDTH="200" HEIGHT="300" ALT="my picture">


Tuy nhiên file ảnh này chỉ hiển thị khi máy tính nơi bạn thực hành có
kết nối Internet. Do vậy ứng dụng này ít được sử dụng. Tốt hơn hết nên
Download tập tin ảnh về máy trước.

-Trong trường hợp tập tin ảnh không có trong đường dẫn SRC=, dòng Text của ALT sẽ hiển thị thay thế: Xem ví dụ dưới:






Lưu ý: Nên khai báo thuộc tính WIDTH và HEIGHT
cho ảnh vì như vậy sẽ giúp trang Web hiển thị nhanh hơn. Bởi vì,
Browser sẽ tự động dành một khỏang trống bằng chiều rộng và chiều cao
của ảnh trước rồi tải các nội dung của trang. Sau đó sẽ tiếp tục tải ảnh
vào. Ngòai ra giá trị mà bạn gán cho WIDTH và HEIGHT
khác với chiều rộng và chiều cao của ảnh cũng sẽ làm thay đổi hiển thị
của ảnh trong trang Web. Các bài thực hành bên dưới sẽ minh họa điều
này.



3-Thực hành:

Với ảnh bên dưới đây có chiều rộng là 200px và chiều cao là 150px, lần lượt áp dụng các thuộc tính và giá trị của thẻ <IMG> cho ảnh này. Trước hết bạn cần tải ảnh này về máy tính và đặt trong thư mục html
là thư mục chứa các tập tin Html mà bạn thực hành từ trứơc. Các bài
thực hành này không đề cập đến các cặp tag cần thiết để mở và đóng một
trang HTML mà chỉ tập trung vào thẻ <IMG> Lưu ý:: để canh ảnh vào giữa, chúng ta dùng cặp thẻ <center> </center> đặt trước và sau thẻ <IMG>








Thực hành 1: tag IMG đơn giản nhất


Viết: <IMG SRC="mypicture.jpg">

Xem kết quả.


Để đặt một ảnh vào giữa trang Web, khi ảnh không nằm trong một TD (sẽ đề cập trong bài 12), dùng cặp thẻ: <center> </center>


Viết: <center><IMG SRC="mypicture.jpg"></center>

Xem kết quả.



Thực hành 2: Dùng ALIGN để định ví trị cho ảnh:

Viết: <IMG SRC="mypicture.jpg" ALIGN="right">Ảnh này
được canh phải so với dòng chữ này, nội dung sẽ nằm bên trái của ảnh.
Giống như Wrap ảnh trong Word.

Xem kết quả.


Ảnh này được canh phải so với dòng chữ này, nội dung sẽ nằm bên trái của ảnh. Giống như Wrap ảnh trong Word.
Viết: <IMG SRC="mypicture.jpg" ALIGN="middle">Dòng chữ này nằm giữa so với vị trí của ảnh.


Xem kết quả.

Dòng chữ này nằm giữa so với vị trí của ảnh


Tương tự, bạn có thể thực hành với các vị trị: left, top, bottom


Thực hành 3: Dùng Border để thêm viền cho ảnh:


Viết: <IMG SRC="mypicture.jpg" BORDER="5">

Xem kết quả.



Thực hành 4: Thu nhỏ ảnh bằng HEIGHT và WIDTH:

Để thu nhỏ ảnh bằngh Height và Width, bạn cần thu nhỏ theo tỉ lệ theo
chiều rộng và chiều cao. Chẳng hạn, ảnh trong ví dụ này có chiều rộng
là 200px và chiều cao là 150px. Như vậy khi giảm chiều rộng xuống 1/2
thì chiều cao cũng giảm 1/2 tương ứng. Tức là WIDTH="100" VÀ HEIGHT="75"

Viết: <IMG SRC="mypicture.jpg" WIDTH="100" HEIGHT="75">

Xem kết quả.


Bài học này bao trùm cách sử dụng Thẻ <IMG> để chèn ảnh vào
trang Web. Đây là Thẻ duy nhất dùng để hiển thị ảnh trên trang Web (Trừ
ảnh làm nền với thẻ background). Do đó, bạn cần thực hành cách dùng thẻ
này thật nhiều lần để hiển thị ảnh trên trang theo ý muốn.

Hết bài 8.




Nguồn: Sưu tầm Internet