Tất cả các website đều phải có hình ảnh. Chèn hình ảnh vào trang web rất quan trọng để làm đẹp cũng như mô tả nhiều nội dung phức tạp theo cách đơn giản trên trang web của bạn. Bài viết này sẽ hướng dẫn bạn qua các bước đơn giản để sử dụng hình ảnh trong các trang web của bạn. 
Chèn hình ả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> . Sau đây là cú pháp đơn giản để sử dụng thẻ này. <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 tạo 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>Sử dụng hình ảnh trong website</title>
</head>
<body>
<p>Chèn hình ảnh đơn giản</p>
<img src = "../html/test.png" alt = "Test Image" />
</body>
</html>
Đây là kết quả:
Bạn có thể sử dụng tệp hình ảnh PNG, JPEG hoặc GIF tùy theo nhu cầu của mình nhưng hãy đảm bảo bạn chỉ định đúng tên tệp hình ảnh trong thuộc tính “src”. Tên hình ảnh luôn phân biệt chữ hoa chữ thường. Thuộc tính “alt” là một thuộc tính bắt buộc trong đó xác định một văn bản thay thế cho hình ảnh, nếu hình ảnh không thể hiển thị. Thẻ này cũng có tác dụng đối với SEO, nó giúp các con bot hiểu được nội dung hình ảnh.
>> HTML là gì?
Đặt nơi lưu trữ hình ảnh
Thông thường, bạn nên 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 của trang web và tạo một thư mục con hình ảnh bên trong thư mục chính, nơi bạn sẽ lưu giữ tất cả hình ảnh sử dụng cho website. Ví dụ Giả sử vị trí hình ảnh của trang web là “image/test.png”, hãy thử ví dụ sau:
<!DOCTYPE html>
<html>
<head>
<title>Sử dụng hình ảnh trong website</title>
</head>
<body>
<p>Lưu trữ hình ảnh trong thư mục riêng</p>
<img src = "../html/images/test.png" alt = "Test Image" />
</body>
</html>
Kết quả:
Đặt chiều rộng / chiều cao 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ụ
<!DOCTYPE html>
<html>
<head>
<title>Thiết lập kích thước cho ảnh</title>
</head>
<body>
<p> Thiết lập kích thước cho ảnh </p>
<img src = "../html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>
Đặ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.
<!DOCTYPE html>
<html>
<head>
<title>Đặt đường viền cho ảnh</title>
</head>
<body>
<p> Đặt đường viền cho ảnh </p>
<img src = "../html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
Kết quả:
Đặt 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.
<!DOCTYPE html>
<html>
<head>
<title> Đặt căn chỉnh hình ảnh</title>
</head>
<body>
<p> Đặt căn chỉnh hình ảnh</p>
<img src = "../html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>
Kết quả:
Kết luận
Bài học html hôm nay mình đã hướng dẫn cách chèn hình ảnh vào trang web cũng như các thuộc tính của nó. Thật đơn giản phải không nào? Hãy thực hành ngay nhé!
