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

Kết quả hiển thị:

Vi du the img 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 đó.

Quảng cáo

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ụ imagetrong 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à:

Vi du the img 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 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/logo3.png" alt="Hình ảnh trong HTML" width="150" height="100"/>
</body>
</html>

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

Vi du xac dinh do rong va chieu cao cho hinh anh

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:

Vi du thiet lap border cho hinh anh

1.jsp"%>

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:

Vi du can chinh hinh anh

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML phổ biến khác tại vietjack.com: