Hình ảnh trong HTML

Hình ảnh rất quan trọng để làm đẹp cũng như mô tả nhiều khái niệm phức tạp theo cách đơn giản trên trang web. Bài học này sẽ hướng dẫn các bước đơn giản để sử dụng hình ảnh trong các trang web.

Chèn hình ảnh

Bạn có thể chèn bất kỳ hình ảnh vào trang web bằng cách sử dụng thẻ <img>. Sau đây là cú pháp đơn giản để sử dụng thẻ này.

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

Trong ví dụ này, chúng ta tạo ra một file HTML có tên test.html và có file ảnh test.png trong cùng thư mục. Trong file test.html viết mã lệnh sau.

Chèn hình ảnh đơn giản

Hình ảnh thử nghiệm
<!DOCTYPE html>
<html>
<head>
<title> Sử dụng hình ảnh trong trang web </title>
</head>
<body>
<p> Chèn hình ảnh đơn giản </p>
<img src = "test.png" alt = "Hình ảnh thử nghiệm" />
</body>
</html>
Bạn có thể sử dụng file hình ảnh PNG, JPEG hoặc GIF nhưng cần đảm bảo khai báo chính xác đuôi mở rộng trong thuộc tính src. Thuộc tính alt là một thuộc tính bắt buộc cần có, nó hiển thị một văn bản thay thế cho hình ảnh khi hình ảnh không thể được hiển thị.

Thiết lập vị trí ảnh

Thông thường chúng ta lưu trữ tất cả các hình ảnh trong một thư mục riêng biệt. Vì vậy, hãy lưu tệp HTML test.html trong thư mục chính và tạo thư mục con images trong thư mục gỗ, chúng ta sẽ lưu trữ hình ảnh test.png trong thư mục images.

Chèn hình ảnh đơn giản

Hình ảnh thử nghiệm
<!DOCTYPE html>
<html>
<head>
<title> Sử dụng hình ảnh trong trang web </title>
</head>
<body>
<p> Chèn hình ảnh đơn giản </p>
<img src = "images/test.png" alt = "Hình ảnh thử nghiệm" />
</body>
</html>

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

Bạn có thể thiết lập chiều rộng và chiều cao hình ảnh dựa trên yêu cầu của bạn bằng cách sử dụng thuộc tính widthheight. Bạn có thể thiết lập chiều rộng và chiều cao của hình ảnh theo pixel hoặc tỉ lệ phần trăm kích thước thực của nó.

Đặt chiều rộng và chiều cao hình ảnh

Hình ảnh thử nghiệm
<!DOCTYPE html>
<html>
<head>
<title> Đặt chiều rộng và chiều cao hình ảnh </title>
</head>
<body>
<p> Đặt chiều rộng và chiều cao hình ảnh </p>
<img src = "images/test.png" alt = "Hình ảnh thử nghiệm" width = "150" height = "100" />
</body>
</html>

Thiết lập viền ảnh

Theo mặc định, hình ảnh sẽ có một đường viền xung quanh nó, bạn có thể chỉ định độ dày đường viền theo pixel bằng thuộc tính boder. Độ dày bằng 0 có nghĩa là không có viền xung quanh bức tranh.

Cài đặt viền hình ảnh

Hình ảnh thử nghiệm
<!DOCTYPE html>
<html>
<head>
<title> Đặt viền hình ảnh </title>
</head>
<body>
<p> Cài đặt viền hình ảnh </p>
<img src = "images/test.png" alt = "Hình ảnh thử nghiệm" boder = "3" />
</body>
</html>

Thiết lập căn chỉnh hình ảnh

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

Thiết lập căn chỉnh hình ảnh

Hình ảnh thử nghiệm
<!DOCTYPE html>
<html>
<head>
<title> Thiết lập căn chỉnh hình ảnh </title>
</head>
<body>
<p> Thiết lập căn chỉnh hình ảnh </p>
<img src = "images/test.png" alt = "Hình ảnh thử nghiệm" boder = "3" align = "right" />
</body>
</html>