Hướng dẫn cách căn chỉnh hình ảnh trong html đơn giản

Tham khảo ngay dịch vụ ATP Media
DỊCH VỤ GUEST POST
DỊCH VỤ CONTENT

Cách căn chỉnh hình ảnh trong html đây là một từ khóa được tìm nhiều nhất trên google về chủ đề về html. Trong bài viết này, ATP Media sẽ giúp bạn tìm hiểu cách căn lề, điều chỉnh kích cỡ hình ảnh trong html một cách đơn giản dễ hiểu nhất nhé.

Cách chèn ảnh vào HTML bằng thẻ img

Chúng ta có thể chèn bất kỳ Hình ảnh nào vào website của bạn bằng cách sử dụng thẻ <img>. Sau đây là cú pháp để dùng thẻ này:

<img src=”đường dẫn url tới nơi chứa hình ảnh” … thuộc tính khác nếu có/>

Thẻ này là một trong những thẻ đơn (trống), nghĩa là chỉ cần mở thẻ chứ không cần đóng thẻ.

Ví dụ:

<html>
     <head>
         <title>Chen hinh anh vao HTML</title>
     </head>
     <body>
<p>Vi du the img trong HTML.</p>
<img src=”https://atpmedia.vn/wp-content/uploads/2021/08/logo-media-2048×995-1-e1622080908346.png.webp” alt=”Chèn hình ảnh trong HTML” />
</body>
</html>

 

Kết quả hiển thị:

Cách chèn ảnh vào HTML bằng thẻ img

 

Chúng ta có thể sử dụng file Ảnh PNG, JPEG hoặc GIF tùy thích nhưng chắc chắn rằng bạn xác định rõ tên file Hình ảnh trong thuộc tính src. Tên file có phân biệt chữ hoa & thường.

Thuộc tính alt có tác dụng: nếu hình ảnh không thể hiển thị vì mạng yếu hay lý do nào đó, nó sẽ hiển thị một văn bản thay thế cho ảnh đó.

>>> Top Cách kiếm tiền với ChatGPT gia tăng thu nhập

Chỉnh vị trí ảnh trong html

Một lời khuyên cho bạn là nên lưu trữ tất cả hình ảnh trong một thư mục riêng. Hãy lưu các file HTML thực thi trong folder chính  tạo thư mục phụ image để lưu trữ ảnh cho dự án nhằm dễ dàng quản lý hơn.

Ví dụ:

Bạn tạo folder chính tên “test”, lưu file html tại đây. Trong đó bạn tạo thêm folder phụ tên “images”, chứa hình ảnh “logo”.

Lúc này bạn có thể dễ dàng chèn ảnh vào code html dễ dàng hơn nhiều với cú pháp sau:

<img src=”./images/logo.png” />

Cách chỉnh kích cỡ hình ảnh trong HTML

Bạn có thể căn chỉnh size ảnh như chiều cao, độ rộng của ảnh bằng cách thêm thuộc tính heightwidth vào trong thẻ img. Thường thì size ảnh xác định chiều rộng, chiều cao bằng đơn vị px (pixel) hoặc mặc định là kích thước thật của nó.

Ví dụ:

<html>
     <head>
         <title>Căn chỉnh size ảnh trong HTML</title>
   </head>
<body>
<p>Vi du can chinh size anh HTML.</p>
<img src=”https://atpmedia.vn/wp-content/uploads/2021/08/logo-media-2048×995-1-e1622080908346.png.webp” alt=”Chỉnh kích cỡ ảnh trong HTML” width=”200″ height=”200″ />
</body>
</html>

 

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

Cách chỉnh kích cỡ hình ảnh trong HTML

Thiết lập viền (border) cho hình ảnh trong HTML

Nếu bạn muốn hình ảnh đẹp hơn thì có thể chỉnh viền xung quanh ảnh bằng thuộc tính border. Nếu độ dày viền bằng 0, nghĩa là sẽ không tồn tại Border xung quanh ảnh.

<html>
     <head>
<title>Thiết lập border ảnh trong HTML</title>
</head>
<body>
<p>Vi du border anh HTML.</p>
<img src=”https://atpmedia.vn/wp-content/uploads/2021/08/logo-media-2048×995-1-e1622080908346.png.webp” alt=”Chỉnh border ảnh trong HTML” border=”3″ />
</body>
</html>

 

Kết quả sẽ là:

chỉnh border cho ảnh html

Căn lề ảnh trong html – chỉnh vị trí hình ảnh

Theo mặc định thì hình ảnh bạn thêm vào sẽ được căn theo cạnh trái của trang web, nhưng chúng ta có thể sử dụng thuộc tính align để căn lề lại ở giữa hoặc bên phải.

align=”right” => ảnh sẽ được căn lề bên phải.

Ví dụ:

<html>
<head>
 <title>Chỉnh vị trí ảnh trong HTML</title>
 </head>
<body>
<p>Vi du can le anh HTML.</p>
<img src=”https://atpmedia.vn/wp-content/uploads/2021/08/logo-media-2048×995-1-e1622080908346.png.webp” alt=”Căn lề ảnh trong HTML” align=”right” />
   </body>
</html>

 

Kết quả sẽ là:

Cách căn lề ảnh trong html

Ngoài ra, nếu bạn muốn căn giữa hình ảnh, thì có thể thêm thẻ center ở bên ngoài thẻ img là được.

<center>
<img src=”abc.png”>
</center>
Nếu bạn muốn điều chỉnh vị trí hình ảnh một cách chi tiết, thì có thể thêm các thuộc tính margin hoặc padding vào thẻ img nhé (đơn vị là px).
Trên đây là những bí quyết đơn giản để bạn có thể căn chỉnh hình ảnh trong html. Hi vọng bài viết này sẽ giúp ích được cho bạn trong quá trình viết code. Chúc bạn thực hiện thành công.
Nguồn tham khảo: Internet.

Xem thêm:

Dịch vụ chăm sóc website Chuyên nghiệp và Uy tín

BÀI VIẾT NỔI BẬT

TƯ VẤN SEO WEBSITE

ĐĂNG KÝ
DỊCH VỤ ATP MEDIA

Giảm giá

90%

KHO TÊN MIỀN ĐẸP

Sở hữu tên miền đẹp chỉ từ 300k

ĐĂNG KÝ DỊCH VỤ ATP MEDIA

Nhận tư vấn giải pháp Marketing

Hơn 80.000 chủ shop, chủ doanh nghiệp tin tưởng và ứng dụng

Cám ơn bạn đã quan tâm dịch vụ tại ATP. Chúng tôi sẽ liên hệ bạn ngay bây giờ!

Liên hệ