Thẻ Trong HTML | Chèn Hình ảnh Vào Trang Web
Có thể bạn quan tâm
1) Thẻ <img> trong HTML
- Thẻ <img> dùng để chèn hình ảnh vào trang web.
- Ví dụ: Các hình ảnh bên dưới được chèn vào trang web chính là nhờ vào thẻ <img>.
- Một thẻ <img> sẽ tương đương với một tấm hình.
- Thẻ <img> không có thẻ đóng.
- Để sử dụng thẻ <img>, ta dùng cú pháp như sau:
<img src="đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web"> Ví dụ: <!DOCTYPE html> <html> <body> <img src="http://webcoban.vn/image/flower.gif"> </body> </html> Xem ví dụ2) Các thuộc tính của thẻ <img>
- Thẻ <img> có chín thuộc tính cơ bản:
- Dưới đây là bảng mô tả sơ lược về chín thuộc tính đó:
src | Xác định đường dẫn đến tập tin hình ảnh mà bạn muốn chèn vào trang web |
alt | 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 |
border | Xác định độ dày của đường viền bao xung quanh tấm hình |
width | Thiết lập chiều rộng cho tấm hình |
height | Thiết lập chiều cao cho tấm hình |
vspace | Xác định khoảng cách lề phía trên và lề phía dưới của tấm hình |
hspace | Xác định khoảng cách lề bên trái và lề bên phải của tấm hình |
align | Xác định vị trí của tấm hình so với các văn bản xung quanh |
usemap | Xác định một "bản đồ hệ thống tọa độ của các vùng" để kết hợp với tấm hình, tạo ra một bản đồ ảnh. Bạn sẽ được tìm hiểu rõ về thuộc tính này trong bài thẻ <map> & <area> |
2.1) Thuộc tính src
- Thuộc tính src 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 đến tập tin hình ảnh có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)
Ví dụ: <!DOCTYPE html> <html> <body> <p>- Thẻ img bên dưới sử dụng đường dẫn tuyệt đối</p> <img src="http://webcoban.vn/image/flower.gif"> <p>- Thẻ img bên dưới sử dụng đường dẫn tương đối</p> <img src="../image/flower.gif"> </body> </html> Xem ví dụ2.2) Thuộc tính alt
- Thuộc tính alt 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.
Ví dụ: <!DOCTYPE html> <html> <body> <img src="../image/flower.gif" alt="Hình ảnh không tồn tại"> <img src="../image/flower75.gif" alt="Hình ảnh không tồn tại"> </body> </html> Xem ví dụ2.3) Thuộc tính border
- Thuộc tính border dùng để xác định độ dày của đường viền bao xung quanh tấm hình.
(Mặc định, giá trị của thuộc tính border được tính theo đơn vị pixel)
Ví dụ:- Tấm hình bên dưới sẽ có đường viền dày 10px
<!DOCTYPE html> <html> <body> <img src="../image/flower.gif" border="10"> </body> </html> Xem ví dụ2.4) Thuộc tính width
- Thuộc tính width 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 một trong hai loại đơn vị:
- px (pixel)
- % (tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó)
2.5) Thuộc tính height
- Thuộc tính height dùng để thiết lập chiều cao cho tấm hình.
- Giá trị của thuộc tính height có thể xác định theo một trong hai loại đơn vị:
- px (pixel)
- % (tỷ lệ phần trăm chiều cao phần nội dung của phần tử cha của nó)
- Lưu ý: Nếu thiết lập giá trị của thuộc tính height theo đơn vị % thì phần tử cha của nó phải có chiều cao được xác định.
Ví dụ: <!DOCTYPE html> <html> <body> <p>- Tấm hình bên dưới sẽ có chiều cao bằng 100 pixel</p> <img src="../image/flower.gif" width="100px"> <p>- Tấm hình bên dưới sẽ có chiều cao bằng 50% chiều cao phần nội dung của phần tử cha của nó.</p> <div style="border:1px solid black;height:300px"> <img src="../image/flower.gif" height="50%"> </div> </body> </html> Xem ví dụ2.6) Thuộc tính vspace
- Thuộc tính vspace 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.
Ví dụ:- Tấm hình bên dưới sẽ có lề trên và lề dưới là 100px
<!DOCTYPE html> <html> <body> <div style="display:inline-block;border:1px solid #555"> <img src="../image/smile.png" vspace="100"> </div> </body> </html> Xem ví dụ- Lưu ý; Ta có thể sử dụng thuộc tính margin-top & margin-bottom trong CSS để thay thế.
2.7) Thuộc tính hspace
- Thuộc tính hspace 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.
Ví dụ:- Tấm hình bên dưới sẽ có lề trái và lề phải là 100px
<!DOCTYPE html> <html> <body> <div style="display:inline-block;border:1px solid #555"> <img src="../image/smile.png" hspace="100"> </div> </body> </html> Xem ví dụ- Lưu ý; Ta có thể sử dụng thuộc tính margin-left & margin-right trong CSS để thay thế.
2.8) Thuộc tính align
- Thuộc tính align 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 | Tấm hình sẽ được đẩy sang bên trái | Xem ví dụ |
right | Tấm hình sẽ được đẩy sang bên phải | Xem ví dụ |
top | Văn bản sẽ nằm ở vị trí cao nhất so với tấm hình | Xem ví dụ |
middle | Văn bản sẽ nằm ở vị trí giữa so với tấm hình | Xem ví dụ |
bottom | Văn bản sẽ nằm ở vị trí thấp nhất so với tấm hình | Xem ví dụ |
3) Đị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 như sau:
img { display: inline-block; }Từ khóa » Chèn Hình ảnh Vào Html
-
Chèn ảnh Trong HTML | Tìm ở đây
-
Cách Chèn Hình ảnh Vào Trang Web HTML
-
Thẻ Chèn ảnh Vảo HTML
-
Cách Chèn ảnh Vào HTML - Học Tốt
-
Cách Chèn ảnh Vào File Html Theo 2 Cách Trong Website
-
Bài 8: Thẻ IMG Trong HTML – Thẻ Chèn Hình ảnh Trong HTML
-
Cách để Chèn ảnh Bằng HTML - WikiHow
-
Bài 6: Chèn Hình ảnh Vào Trang Web Với Thẻ Img Trong HTML
-
Cách Chèn ảnh Từ Máy Tính Vào HTML - Hàng Hiệu Giá Tốt
-
Thẻ Img Trong HTML - Hình ảnh - Hoclaptrinh
-
Học HTML Cách Chèn Hình ảnh Trong Html [bài 4] | Tech12h
-
[HTML] Bài 2 - Hiển Thị Ảnh & Các Liên Kết - Viblo
-
Chèn ảnh Bằng Thẻ Image Trong HTML | DZR-Web