Hình ảnh trong HTML

---

---

---

Hình ảnh là rất quan trọng trong diễn tả và làm đẹp các khái niệm phức tạp theo một cách đơn giản nhất trên trang Web của bạn. Chương này sẽ đưa bạn qua các bước để sử dụng hình ảnh trong trang của mình.

Chèn hình ảnh trong HTML - Thẻ img trong HTML

Bạn có thể chèn bất cứ hình ảnh nào vào trang Web của bạn bằng cách sử dụng thẻ . Dưới đây là cú pháp đơn giản để sử dụng thẻ này.

Thẻ này là một thẻ trống, nghĩa là nó chỉ có thể chứa danh sách các thuộc tính và không có thẻ đóng.

Ví dụ

Bạn thử ví dụ sau:

Vi du the img trong HTML.

Kết quả hiển thị:

Bạn có thể sử dụng file hình ảnh PNG, JPEG hoặc GIF trên cơ sở sở thích của mình nhưng chắc chắn rằng bạn xác định rõ tên file ảnh trong thuộc tính src. Tên file là phân biệt chữ hoa và thường.

Thuộc tính alt là một thuộc tính ủy quyền, nếu hình ảnh không hiển thị, nó sẽ xác định một văn bản thay thế cho hình ảnh đó.

Thiết lập vị trí của hình ảnh trong HTML

Chúng ta thường giữ tất cả hình ảnh trong một thư mục riêng. Vì thế hãy lưu các file HTML (test.htm) trong thư mục chính và tạo thư mục phụ imagetrong thư mục chính để lưu file hình ảnh (test.png).

Ví dụ

Giả sử vị trí tệp hình ảnh của chúng ta là "image/test.png", bạn thử ví dụ sau:

Vi  du the img trong HTML.

Nó sẽ tạo ra kết quả là:

Thiết lập chiều cao/độ rộng hình ảnh trong HTML

Bạn có thể thiết lập chiều cao/độ rộng của hình ảnh trên cơ sở sử dụng thuộc tính width và height. Bạn có thể xác định chiều độ rộng, chiều cao của hình sử dụng mối quan hệ hoặc là với Pixel hoặc là với kích thước thật của hình đó.

Ví dụ

Vi du xac dinh do rong va chieu cao cho hinh anh

Kết quả hiển thị là:

Thiết lập Border cho hình ảnh trong HTML

Theo mặc định thì sẽ có một Border quanh hình ảnh, bạn có thể xác định độ dày của viền bằng Pixel sử dụng thuộc tính border. Nếu độ dày bằng 0, nghĩa là sẽ không có Border quanh hình ảnh.

Ví dụ

Vi du thiet lap border cho hinh anh

Chạy đoạn mã trên sẽ tạo ra kết quả sau:

1.jsp"%>

Căn chỉnh hình ảnh trong HTML

Theo mặc định thì hình ảnh sẽ được căn chỉnh theo cạnh trái của trang web, nhưng bạn có thể sử dụng thuộc tính align để thiết lập lại sự căn chỉnh này: trung tâm hoặc bên phải.

Ví dụ

Vi du can chinh hinh anh

Nó sẽ tạo ra kết quả sau:

---

---

---