Hình ảnh được chèn vào trang web thông qua thẻ <img>.
Khi thiết kế trang web, chèn hình ảnh đóng vai trò quan trọng trong việc tạo ra trải nghiệm đặc biệt cho người dùng. Thẻ <img> trong HTML là công cụ giúp chúng ta chèn hình ảnh một cách dễ dàng và linh hoạt. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về cách sử dụng và các thuộc tính của thẻ <img>.
Chèn hình ảnh với thẻ <img>
Thẻ <img> dùng để chèn hình ảnh vào trang web. Mỗi thẻ <img> tương ứng với một tấm hình và không có thẻ đóng.
Để sử dụng thẻ <img>, ta sử dụng cú pháp như sau:
<img src="đường_dẫn_đến_tập_tin_hình_ảnh">Ví dụ, các hình ảnh bên dưới được chèn vào trang web nhờ vào thẻ <img>:
Các thuộc tính của thẻ <img>
Thẻ <img> có một số thuộc tính cơ bản để điều chỉnh hiển thị hình ảnh trên trang web. Dưới đây là một số thuộc tính quan trọng của thẻ <img>:
1) Thuộc tính src
Thuộc tính src được sử dụng để xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web. Đường dẫn có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối.
2) Thuộc tính alt
Thuộc tính alt được sử dụng để xác định một nội dung văn bản sẽ được hiển thị thay thế khi đường dẫn đến tập tin hình ảnh không chính xác.
3) Thuộc tính border
Thuộc tính border được sử dụng để xác định độ dày của đường viền bao xung quanh tấm hình.
4) Thuộc tính width
Thuộc tính width được sử dụng để thiết lập chiều rộng cho tấm hình. Giá trị của thuộc tính width có thể xác định theo đơn vị pixel hoặc tỷ lệ phần trăm.
5) Thuộc tính height
Thuộc tính height được sử dụng để thiết lập chiều cao cho tấm hình. Giá trị của thuộc tính height cũng có thể xác định theo đơn vị pixel hoặc tỷ lệ phần trăm.
6) Thuộc tính vspace
Thuộc tính vspace được sử dụng để xác định khoảng cách lề phía trên và lề phía dưới của tấm hình. Ta có thể sử dụng thuộc tính margin-top và margin-bottom trong CSS để thay thế.
7) Thuộc tính hspace
Thuộc tính hspace được sử dụng để xác định khoảng cách lề bên trái và lề bên phải của tấm hình. Ta có thể sử dụng thuộc tính margin-left và margin-right trong CSS để thay thế.
8) Thuộc tính align
Thuộc tính align được sử dụng để xác định vị trí của tấm hình so với các văn bản xung quanh. Thuộc tính align có năm giá trị cơ bản: left, right, top, middle, bottom.
Định dạng CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị phần tử <img> với định dạng CSS mặc định như sau:
img {
display: inline-block;
}Với thẻ <img>, bạn có thể linh hoạt chèn hình ảnh vào trang web của mình và tạo ra những trải nghiệm độc đáo cho người dùng.
Vì vậy, hãy tận dụng thẻ <img> và tạo ra những trang web đẹp mắt, sống động và hấp dẫn.
