Để cho website bạn tự làm sinh động, thu hút nhiều đọc giả ghé thăm bạn cần phải chèn thêm ảnh, đối với website sử dụng cấu trúc HTML, bạn có thể chèn ảnh bằng thẻ image trong html theo cú phép sau:
<img src="đường dẫn url tới nơi chứa hình ảnh" ... danh-sách-thuộc-tính/>
Thẻ <img> 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:
<!DOCTYPE html>
<html>
<head>
<title>Hinh anh trong HTML</title>
</head>
<body>
<p>Vi du the img trong HTML.</p>
<img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" />
</body>
</html>
Trong đó, bạn có thể sử dụng fie đuôi jpg, gif hoặc png đều được, nhưng bạn phải chọn đúng tên tấm ảnh của mình ở
thuộc tính src, nếu sai ảnh sẽ không hiển thị.
Thuộc tính alt chính là miêu tả hình ảnh, bạn có thể thêm không thêm, khi thêm thì sẽ hiển thị tên để người dùng hiểu được bạn đang nói đến cái gì, thuộc tính này rất cần thiết để đáp ứng chuẩn SEO của Google khi làm website từ giao diện đến cấu trúc nội dung và onpage.
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 trong thư mục chính và tạo thư mục phụ image trong thư mục chính để lưu file hình ảnh.
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:
<!DOCTYPE html>
<html>
<head>
<title>Hinh anh trong HTML</title>
</head>
<body>
<p>Vi du the img trong HTML.</p>
<img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" />
</body>
</html>
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ụ
<!DOCTYPE html>
<html>
<head>
<title>Thiet lap chieu cao va do rong hinh anh</title>
</head>
<body>
<p>Vi du xac dinh do rong va chieu cao cho hinh anh</p>
<img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" width="150" height="100"/>
</body>
</html>
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ụ
<!DOCTYPE html>
<html>
<head>
<title>Thiet lap border cho hinh anh trong HTML</title>
</head>
<body>
<p>Vi du thiet lap border cho hinh anh</p>
<img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" border="3"/>
</body>
</html>
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ụ
<!DOCTYPE html> <html> <head> <title>Can chinh hinh anh trong HTML</title> </head> <body> <p>Vi du can chinh hinh anh</p> <img src="./images/dzr-web.png" alt="Hình ảnh trong HTML" border="3" align="right"/> </body> </html>
Chỉ với những bước cơ bản trên thì bạn hoàn toàn có thể edit hình ảnh trong trang web của mình, hy vọng với những chia sẻ trên chúng tôi có thể giúp những bạn đang tự tạo website có thể thêm hình ảnh vào web dễ dàng, giúp web sinh động và thu hút hơn.