HTML Images

21/01/2020

« Bài trước

Cú pháp tạo image

Trong HTML, Hình ảnh được định nghĩa bởi thẻ <img>.

Thẻ <img> là một thẻ rỗng, nó chỉ chứa các thuộc tính (Attribute ) và không có thẻ đóng.

Thuộc tính src là địa chỉ lưu trữ của hình ảnh.

Cú pháp cơ bản image:

<img src="url_image" >

Thuộc tính alt

Thuộc tính alt là đoạn text hiển thị thay thế khi hình ảnh không hiển thị (vì đường dẫn hình ảnh bị sai, mạng load chậm,...). Và thuộc tính này bắt buộc phải có đối với image vì nó quan trọng cho SEO (con bot của google sẽ đọc thuộc tính này để biết hình ảnh của bạn đang nói về vấn đề gì ).

<img src="url_image" alt="Học HTML cơ bản" >

Image Size - Width và Height

Bạn có thể dùng thuộc tính style để xác định width và height cho image.

<img src="url_image" alt="Học HTML cơ bản" style="width:600px;height:400px;" >

Hoặc có thể dùng thuộc tính widthheight :

<img src="url_image" alt="Học HTML cơ bản" width="600" height="400" >

Thuộc tính widthheight luôn luôn được tính bằng đơn vị pixel.

Image Float

Ta có thể sử dụng thuộc tính css float để image nằm bên trái text hoặc nằm bên phải text :

<p> <img src="url_image" alt="Học HTML cơ bản" style="float:left;width:200px;"> Đoạn văn bản nằm bên phải hình ảnh. </p> <p> <img src="url_image" alt="Học HTML cơ bản" style="float:right;width:200px;"> Đoạn văn bản nằm bên trái hình ảnh. </p>

Bạn có thể tìm hiểu kỹ hơn về thuộc tính CSS Float. Xem bài hướng dẫn : CSS Float

Background Image

Ta có thể dùng image để làm hình nền bằng cách sử dụng thuộc tính CSS background-image

Cú pháp tạo background image cho thẻ DIV trong HTML như sau:

<div style="background-image: url('img_url.jpg');">

Bạn có thể xem thêm các thuộc tính khác của background image tại bài hướng dẫn Thuộc tính Backgrounds.

« Bài trước
Back to top