Đưa hình ảnh vào tài liệu HTML





Mỗi
ảnh được lưu giữ trong máy tính thành một tệp riêng biệt. Tệp ảnh có
nhiều định dạng khác nhau, thể hiện qua phần mở rộng (đuôi) của tên tệp:
*.bmp, *.gif, *.jpeg, *.jpg,…













1. Hình ảnh tĩnh
1.1 Tệp ảnh :

Tuy nhiên các trình duyệt chỉ có thể "hiểu" được các tệp ảnh dưới
dạng GIF hay JPEG. Hình ảnh dạng GIF được sử dụng rộng rãi nhất trên
Internet, sau đó là đến các ảnh dạng JPEG.

1.2 Thẻ <IMG…> :

Cú pháp chèn ảnh vào trang Web:




IMG (Image), thuộc tính SRC (Source) là đường dẫn đến nơi lấy tệp
ảnh. Giá trị của thuộc tính SRC được gán bằng URL là một địa chỉ trên
máy tính địa phương hay trên Internet. Nó chỉ ra nơi lưu trữ tệp ảnh cần
chèn vào.

Địa chỉ URL báo cho trình duyệt biết cần lấy tệp ảnh ở đâu.

Nếu tệp ảnh nằm ngay trên máy tính địa phương thì cần ghi rõ đường dẫn.

Nếu tệp ảnh lấy từ một nơi khác trên Internet thì phải ghi đầy đủ địa chỉ URL.

Ví dụ:





2. Các thuộc tính của thẻ chèn hình ảnh
1.1 Tệp ảnh :

Trong thẻ IMG còn có một số thuộc tính khác như: ALT, WIDTH, HEIGHT, ALIGN, VSPACE, HSPACE, BORDER.

2.1 Thuộc tính ALT :

Thuộc tính ALT – ALTernative cho phép ta chèn một đoạn chữ
thay thế vào chỗ có hình và hiện lên xâu chú thích khi đưa trỏ chuột vào
ảnh. Thuộc tính này dùng trong trường hợp trình duyệt không hiển thị
được hình ảnh thì sẽ hiện dòng văn bản thay thế. Làm như vậy để những
người sử dụng trình duyệt không có khả năng đọc ảnh hay đã tắt chức năng
đọc ảnh để tăng tốc độ có thể biết được đó là hình ảnh gì và họ có thể
chọn xem sau nếu có thời gian.

Nên luôn sử dụng thuộc tính này khi đưa hình ảnh vào trang Web vì
nhiều người muốn có tốc độ cao, lướt nhanh qua các thông tin là chính đã
tắt chức năng đọc ảnh của trình duyệt vẫn có thể biết được ảnh đó mang
nội dung gì.

Ví dụ:







Hiện ảnh




Ảnh (không hiện lên) khi có và không sử dụng thuộc tính ALT

Nếu không sử dụng thuộc tính ALT thì tại chỗ có hình sẽ hiện từ IMAGE hoặc biểu tượng ảnh bị khuyết.

2.2 Thuộc tính WIDTH và HEIGHT :

Thuộc tính WIDTH và HEIGHT dùng để xác định chiều rộng và chiều cao của ảnh. Giá trị này có thể tính theo phần trăm (%) hoặc pixel.

Chú ý:

Nếu đặt chiều rộng và chiều cao không chuẩn sẽ làm hình trong ảnh bị
co giãn méo đi. Để khắc phục nhược điểm này, ta nên xử lý ảnh để kích
thước phù hợp với yêu cầu.

Ví dụ:









2.3 Thuộc tính ALIGN :

Thuộc tính ALIGN cho phép chỉnh lại vị trí của ảnh theo cả hai chiều ngang và chiều dọc.

Theo chiều dọc:








Theo chiều ngang:








Nếu như không có thuộc tính này thì mặc định ảnh được đặt tại đúng
nơi đặt thẻ IMG dóng trên cùng dòng chữ, theo cạnh dưới của khung nhìn.

3. Thuộc tính VSPACE và HSPACE :
Khi sử dụng thuộc tính ALIGN, ảnh được chèn vào dòng văn bản với các
chữ dính sát liền. Thuộc tính VSPACE và HSPACE dùng để tạo khoảng trống
nhỏ viền xung quanh ảnh (tính theo đơn vị pixel).

VSPACE=n Thêm khoảng trống theo chiều dọc.

HSPACE=n Thêm khoảng trống theo chiều ngang.

Ví dụ:








Hết




Nguồn: Sưu tầm Internet