Tuesday, April 8, 2014

Hình ảnh trong HTML

Với HTML bạn có thể thể hiện hình ảnh trong tài liệu.
Ví dụ
Chèn hỉnh ảnh
Cách cho hiển thị một tấm hình trên trang web.
Chèn hình ảnh từ những vị trí khác
Cách hiện một hoặc nhiều tấm hình từ một thư mục khác hoặc từ một server khác trên trang web của bạn.
Thẻ Image và thuộc tính src
Trong HTML, hình ảnh được xác định bởi thẻ <img>. Để hiển thị một hình trên trang web, bạn cần phải sử dụng thuộc tính src. Src là chữ viết tắt của source. Giá trị của thuộc tính src là địa chỉ URL của hình ảnh mà bạn muốn hiển thị trên trang web.
Cú pháp để xác định một tấm hình
<img src=”url”>
Địa chỉ URL chỉ đến điểm mà hình ảnh được lưu trữ. Một file hình có tên là “vidu.gif” được đặt ở thư mục images trên hocvietcode.eu5.org có địa chỉ URL là: http://hocvietcode.eu5.org/images/vidu.gif
Trình duyệt sẽ hiển thị hình ảnh nơi mà có thẻ image được chèn trong tài liệu. Nếu bạn muốn thêm thẻ image vào giữa một đoạn văn, trình duyệt sẽ hiển thị đoạn văn thứ nhất trước, sau đó đến hình và sau cùng là đoạn văn thứ hai.
Thuộc tính Alt
Thuộc tính alt được sử dụng để xác định chữ thay cho hình. Bởi vì nếu hình đó không hiện được thì một dòng chữ sẽ xuất hiện để báo cho người đọc biết. Gía trị của thuộc tính alt là một dòng chữ như sau:
<img src=”vidu.gif” alt=”vi du”>
Thuộc tính alt báo cho người đọc biết họ không xem được hình gì khi mà trình duyệt không load được hình đó. Trình duyệt sau đó sẽ hiển thị dòng chữ thay vì hình ảnh. Bạn nên tạo cho mình thói quen thêm thuộc tính “alt” vào mỗi tấm hình trên một trang, để tăng khả năng hiển thị và giúp những người lướt web mà không dùng hình ảnh.
Một vài ví dụ
Tạo image map
Cách tạo một image map, với những vùng có thể click được. Mỗi một vùng của hình là một đường liên kết.
Biến tấm hình thành image map
Cách biến một tấm hình thành một image map. Bạn sẽ thấy nếu bạn di chuyển con chuột lên trên tấm hình, góc phần tư sẽ xuất hiện trên thanh trạng thái.
Thẻ Image
TagMô Tả
<img>Hình ành
<map>Định nghĩa map ( sơ đồ trên 1 hình)
<area>Định Area, 1 vùng nhỏ tương ứng trên sơ đồ

0 nhận xét:

Post a Comment