ĐƯA HÌNH ẢNH VÀO TRANG WEB

Trước tiên bạn cần lưu một số hình ảnh vào thư mục "Website", ví dụ tôi có các ảnh sau:

Niagara.jpg

WestPoint.jpg

butterfly.jpg

Liberty.jpg

Để đưa hình ảnh vào trang web, bạn dùng đoạn mã sau:

<img border="*" src="#" width="*" height="*" alt="#">

- border set bằng giá trị dương; nếu bạn không muốn hình ảnh bị đóng khung thì set bằng 0;
- src (source: nguồn) chỉ đường dẫn của file hình ảnh, bạn nên lưu file ở định dạng gif hoặc jpg để tương thích với các trình duyệt. Nếu bạn lưu ảnh ở thư mục khác thì phải chỉ đường dẫn đến thư mục đó, ví dụ bạn tạo sub-folder images trong folder website, thì đuờng dẫn phải là src="images/#";
- width (chiều ngang), height (chiều cao): tính bằng đơn vị pixel. Nếu không set gì cả thì hình ảnh sẽ hiển thị bằng giá trị của hình gốc;
- alt (alter description): chú thích cho hình ảnh (khi bạn đưa chuột vào ảnh thì dòng chú thích sẽ hiển thị).

Ví dụ, tôi muốn đưa ảnh Niagara.jpg vào trang web với kích thước nguyên gốc, tôi sẽ viết đoạn mã này vào vị trí mà tôi muốn tấm ảnh hiển thị trên website:

<img border="0" src="Niagara.jpg" alt="Niagara Falls">

Đây là kết quả:

Muốn định vị trí cho ảnh, bạn cũng dùng thẻ <div align="*"> </div>; các giá trị cũng giống như định vị cho text, bao gồm "left", "center" và "right".

Ví dụ, tôi muốn thêm ảnh WestPoint.jpg vào bên phải của website, tôi sẽ viết đoạn mã sau:

<div align="right">
<img border="0" src="WestPoint.jpg" alt="Bear Mountain Bridge, New York">
</div>

Kết quả:

Giá trị width và height rất hữu ích trong trường hợp bạn dùng một ảnh, với nhiều kích thước khác nhau, để trang trí ở nhiều vị trí trên trang web. Bạn không cần phải lưu file với nhiều kích thước khác nhau (tiết kiệm dung lượng và bandwidth - tôi đoán thế). Ví dụ tôi muốn ảnh butterfly.jpg hiển thị ba lần với 3 kích thước khác nhau, tôi sẽ viết như sau:

<img border="0" src="butterfly.jpg" width="150" height="113">
<img border="0" src="butterfly.jpg" width="250" height="188">
<img border="0" src="butterfly.jpg">

Kết quả:

Tương tự như đối với text, trình duyệt sẽ tự động sắp xếp hình ảnh đến hết chiều ngang của màn hình. Do đó, nếu bạn muốn sắp các ảnh theo từng hàng, bạn cũng phải dùng thẻ <br>. Thẻ <br> cũng rất hữu ích trong trường hợp bạn muốn ghi chú thích ngay phía dưới tấm ảnh. Ví dụ, tôi có đoạn mã sau:

<div align="center">
<img border="0" src="Liberty.jpg" alt="Ms. Liberty"><br>
Liberty Island, New York, May 20, 2006<br>
(Photo taken from Circle Line Cruiser)
</div>

Đây là kết quả:

Liberty Island, New York, May 20, 2006
(Photo taken from Circle Line Cruiser)