1. Chèn ảnh
Bạn có thể chèn bất kỳ hình ảnh nào vào trang web của mình bằng cách sử dụng thẻ <img> .
Cú pháp : <img src = “Image URL” … attributes-list/>
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à không có thẻ đóng.
Ví dụ:
Để thử ví dụ sau, hãy giữ tệp HTML test.htm và tệp hình ảnh test.png trong cùng một thư mục
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = “/html/images/test.png” alt = “Test Image” />
</body>
</html>
2. Vị trí lưu hình ảnh
Thông thường, chúng ta giữ tất cả các hình ảnh trong một thư mục riêng biệt. Vì vậy, hãy giữ tệp HTML test.htm trong thư mục chính và tạo một thư mục con hình ảnh bên trong thư mục chính.
Ví dụ :Giả sử vị trí hình ảnh là “image / test.png”
3. Cài đặt kích thước hình ảnh
Bạn có thể đặt chiều rộng và chiều cao của hình ảnh dựa trên yêu cầu của mình bằng cách sử dụng các thuộc tính chiều rộng và chiều cao . Bạn có thể chỉ định chiều rộng và chiều cao của hình ảnh theo pixel hoặc tỷ lệ phần trăm so với kích thước thực của nó.
Ví dụ :
4. Đặt đường viền hình ảnh
Theo mặc định, hình ảnh sẽ có đường viền xung quanh, bạn có thể chỉ định độ dày đường viền theo pixel bằng cách sử dụng thuộc tính border. Độ dày bằng 0 có nghĩa là, không có đường viền xung quanh hình ảnh.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = “/html/images/test.png” alt = “Test Image” border = “3”/>
</body>
</html>
5. 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 để đặt nó ở giữa hoặc bên phải.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = “/html/images/test.png” alt = “Test Image” border = “3” align = “right”/>
</body>
</html>