Thẻ Chèn ảnh Vảo HTML

Trang chủ » Chèn ảnh Bằng Css » Thẻ Chèn ảnh Vảo HTML

Có thể bạn quan tâm

  • Thẻ <img>
  • Điều chỉnh cỡ ảnh hiện thị
  • Đường viền khung ảnh

Thẻ <img> chèn hình ảnh vào HTML

Thẻ <img> được dùng để nhúng một hình ảnh vào trang HTML. Thẻ này có vài thuộc tính và nó không có phần đóng thẻ. Địa chỉ URL dẫn đến vị trí của ảnh được xác định thông qua thuộc tính src. Cú pháp chèn ảnh có dạng:

<img src="image.jpg" />

Vị trí URL ảnh phải nằm giữa dấu nháy kép "...", ví dụ bạn có một ảnh có tên "flower.jpg" lưu trữ cùng thư mục với file HTML, thì hiện thị ảnh có thể có dạng:

<img src="flower.jpg" alt="" />

Trong trường hợp ảnh không hiện thị được (ví dụ ảnh bị xóa ...) thì thuộc tính alt là một văn bản thay thế sẽ hiện thị thay cho ảnh. Nói chung bất kỳ ảnh nào trong HTML thì thuộc tính alt yêu cầu nên có.

Thuộc tính src thiết lập địa chỉ ảnh, bạn có thể nhập địa chỉ ảnh đến một URL tuyệt đối, ví dụ địa chỉ https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png

<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png" />

Thuộc tính src thiết lập địa chỉ URL của ảnh, nó có thể là địa chỉ tương đối, tuyệt đối, hay đến file ảnh cục bộ trên máy tính, hãy xem Địa chỉ URL để hiểu về cấu trúc đường dẫn này.

Thuộc tính width và height - điều chỉnh cỡ ảnh <img>

Điều chỉnh cỡ ảnh hiện thị bạn có thể chỉ ra chiều rộng và chiều cao của ảnh thông qua thuộc tính width và height. Đơn vị sử dụng là pixel px hoặc phần trăm %

<html> <head> <title>Thẻ IMG</title> </head> <body> <img src="flower.jpg" height="150px" width="150px" alt="" /> <!-- hoặc --> <img src="flower.jpg" height="50%" width="50%" alt="" /> </body> </html>

Khi sử dụng ảnh trong trang web, sẽ mất thời gian để tải ảnh về và hiện thị, nên bạn cần lưu ý chọn cỡ ảnh gốc sao cho phù hợp với yêu cầu hiện thị của trang

Đường viền khung ảnh - border

Mặc định, anh không có đường viền bao quanh. Để tạo đường viền bao quanh ảnh sử dụng thuộc tính border và chỉ ra kích cỡ của đường viền theo đơn vị px

Viết code HTML, có một số URL ảnh sau:

  • https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-004.png
  • https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-005.png
  • https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-006.png

Hãy viết code hiện thị ảnh và xem kết quả ra sao ở hộp sau:

<html> <head> <title>Ví dụ về ảnh</title> </head> <body> <img border="4px" width="700px" src="https://raw.githubusercontent.com/xuanthulabnet/learn-php/master/imgs/php-004.png" alt="vi du" /> </body> </html> Mục lục bài viết Thẻ <img>Điều chỉnh cỡ ảnh hiện thịĐường viền khung ảnh ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới

Từ khóa » Chèn ảnh Bằng Css