HTML - Hình ảnh
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 của bạn. Hướng dẫn này sẽ đưa 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 <img>nhãn. 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.
Thí 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>Điều này sẽ tạo ra kết quả sau:
Bạn có thể sử dụng tệp hình ảnh PNG, JPEG hoặc GIF tùy theo sự thoải mái của mình nhưng hãy đảm bảo bạn chỉ định đúng tên tệp hình ảnh trong srcthuộc tính. Tên hình ảnh luôn phân biệt chữ hoa chữ thường.
Các alt thuộc tính là một thuộc tính bắt buộc chỉ định văn bản thay thế cho một hình ảnh, nếu hình ảnh không thể được hiển thị.
Đặt vị trí hình ảnh
Thông thường chúng tôi 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 chúng tôi và tạo một thư mục conimages bên trong thư mục chính, nơi chúng tôi sẽ lưu hình ảnh test.png.
Thí dụ
Giả sử vị trí hình ảnh của chúng tôi là "image / test.png", hãy thử ví dụ sau:
<!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>Điều này sẽ tạo ra kết quả sau:
Đặt chiều rộng / chiều cao hình ảnh
Bạn có thể đặt chiều rộng và chiều cao hình ảnh dựa trên yêu cầu của mình bằng cách sử dụng width và heightthuộc tính. 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ó.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đặ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.
Thí 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>Điều này sẽ tạo ra kết quả sau:
Đặ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 align để đặt nó ở giữa hoặc bên phải.
Thí 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>Điều này sẽ tạo ra kết quả sau:
Đồ họa web miễn phí
Đối với Đồ họa web miễn phí bao gồm các mẫu bạn có thể xem trong Đồ họa web miễn phí