Làm việc với Tag <IMG>

Thẻ
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 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 sau.

1-Cú pháp:



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= :Dù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ẻ
, bạn viết như sau:





SRC="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:

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:

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

Lưu ý:: để canh ảnh vào giữa, chúng ta dùng cặp thẻ
đặt trước và sau thẻ


Thực hành 1: tag IMG đơn giản nhất
Viết:
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ẻ:


Viết:
Xem kết quả.




Thực hành 2: Dùng ALIGN để định ví trị cho ảnh:
Viết: 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: 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: 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:
Xem kết quả.






Bài học này bao trùm cách sử dụng Thẻ
để 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.