Tạp Chí Đồ Họa Việt Nam

Chèn hình ảnh trong HTML

Chèn hình ảnh trong HTML – Hình ảnh là rất quan trọng trong diễn tả và làm đẹp các khái niệm phức tạp theo một cách đơn giản nhất trên trang Web của bạn. Chương này sẽ đưa bạn qua các bước để sử dụng hình ảnh trong trang của mình.

Chèn hình ảnh trong HTML

Chèn hình ảnh trong HTML – Thẻ img trong HTML

Bạn có thể chèn bất cứ hình ảnh nào vào trang Web của bạn bằng cách sử dụng thẻ <img>. Dưới đây là cú pháp đơn giản để sử dụng thẻ này.

<img  data-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="/wp-content/uploads/2017/01/izdesigner-logo.png" alt="Hình ảnh trong HTML" />
</body>
</html>

Kết quả hiển thị:

Chèn hình ảnh trong HTML

Bạn có thể sử dụng file hình ảnh PNG, JPEG hoặc GIF trên cơ sở sở thích của mình nhưng chắc chắn rằng bạn xác định rõ tên file ảnh trong thuộc tính src. Tên file là phân biệt chữ hoa và thường.

Thuộc tính alt là một thuộc tính ủy quyền, nếu hình ảnh không hiển thị, nó sẽ xác định một văn bản thay thế cho hình ảnh đó.

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 (test.htm) 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 (test.png).

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/logo3.png" alt="Hình ảnh trong HTML" />
</body>
</html>

Nó sẽ tạo ra kết quả là:

Chèn hình ảnh trong 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 widthheight. 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/logo3.png" alt="Hình ảnh trong HTML" width="150" height="100"/>
</body>
</html>

Kết quả hiển thị là:

Chèn hình ảnh trong 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/logo3.png" alt="Hình ảnh trong HTML" border="3"/>
</body>
</html>

Chạy đoạn mã trên sẽ tạo ra kết quả sau:

Chèn hình ảnh trong 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/logo3.png" alt="Hình ảnh trong HTML" border="3" align="right"/>
</body>
</html>

Nó sẽ tạo ra kết quả sau:

Chèn hình ảnh trong HTML