Bạn đang xem : cách nhúng hình ảnh vào html

HTML

Hình ảnh

Hình ảnh có thể cải thiện thiết kế và giao diện của trang web.

Ví dụ

& lt; img src = “img_girl.jpg”
alt = “Cô gái mặc áo khoác” & gt;

Hãy tự mình thử »

Ví dụ

& lt; img src = “img_chania.jpg”
alt = “Hoa ở Chania” & gt;

Hãy tự mình thử »

Cú pháp hình ảnh HTML

Thẻ HTML & lt; img & gt; được sử dụng để nhúng một
hình ảnh trong một trang web.

Hình ảnh không được chèn vào một trang web về mặt kỹ thuật; hình ảnh được liên kết với web
các trang. Thẻ & lt; img & gt; tạo sự lưu giữ
không gian cho hình ảnh được tham chiếu.

Thẻ & lt; img & gt; trống, nó chỉ chứa các thuộc tính và không chứa
có thẻ đóng.

Thẻ & lt; img & gt; có hai thẻ bắt buộc
thuộc tính:

  • src – Chỉ định đường dẫn đến hình ảnh
  • alt – Chỉ định văn bản thay thế cho hình ảnh

Cú pháp

& lt; img src = “” alt = “alternatetext” & gt;

Thuộc tính src

Thuộc tính src bắt buộc chỉ định đường dẫn (URL) đến hình ảnh.

Lưu ý: Khi một trang web tải, đó là trình duyệt, tại đó
khoảnh khắc đó lấy hình ảnh từ máy chủ web và chèn nó vào trang.
Do đó, hãy đảm bảo rằng hình ảnh thực sự ở cùng một vị trí trong mối quan hệ
vào trang web, nếu không khách truy cập của bạn sẽ nhận được một biểu tượng liên kết bị hỏng. Sự tan vỡ
biểu tượng liên kết và văn bản alt được hiển thị nếu trình duyệt không thể tìm thấy hình ảnh.

Ví dụ

& lt; img src = “img_chania.jpg” alt = “Hoa
ở Chania “& gt;

Hãy tự mình thử »

Thuộc tính alt

Thuộc tính alt bắt buộc cung cấp văn bản thay thế cho hình ảnh, nếu người dùng
một số lý do không thể xem nó (do kết nối chậm, lỗi trong src
hoặc nếu người dùng sử dụng trình đọc màn hình).

Giá trị của thuộc tính alt phải mô tả hình ảnh:

Ví dụ

& lt; img src = “img_chania.jpg” alt = “Hoa
ở Chania “& gt;

Hãy tự mình thử »

Nếu trình duyệt không thể tìm thấy hình ảnh, nó sẽ hiển thị giá trị của alt
thuộc tính:

Ví dụ

& lt; img src = “falsename.gif” alt = “Hoa
ở Chania “& gt;

Hãy tự mình thử »

Xem Thêm  Cách căn giữa một nút theo chiều ngang trong CSS - nút trung tâm theo chiều ngang css

Mẹo: Trình đọc màn hình là một chương trình phần mềm đọc mã HTML và cho phép người dùng “nghe” nội dung. Trình đọc màn hình rất hữu ích
dành cho người khiếm thị hoặc người khuyết tật về khả năng học tập.

Kích thước hình ảnh – Chiều rộng và Chiều cao

Bạn có thể sử dụng thuộc tính style để chỉ định chiều rộng và
chiều cao của hình ảnh.

Ví dụ

& lt; img src = “img_girl.jpg” alt = “Cô gái mặc áo khoác” style = “width: 500px; height: 600px;” & gt;

Hãy tự mình thử »

Ngoài ra, bạn có thể sử dụng các thuộc tính width height :

Ví dụ

& lt; img src = “img_girl.jpg” alt = “Cô gái mặc áo khoác” width = “500” height = “600” & gt;

Hãy tự mình thử »

Thuộc tính width height luôn xác định chiều rộng và chiều cao của
hình ảnh tính bằng pixel.

Lưu ý: Luôn chỉ định chiều rộng và chiều cao của hình ảnh. Nếu chiều rộng và chiều cao không được chỉ định,
trang web
có thể nhấp nháy trong khi tải hình ảnh.

Chiều rộng và Chiều cao hay Kiểu?

width , height style thuộc tính là
tất cả đều hợp lệ trong HTML.

Tuy nhiên, chúng tôi khuyên bạn nên sử dụngthuộc tính style . Nó ngăn các trang định kiểu thay đổi
kích thước của hình ảnh:

Ví dụ

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; style & gt;
img {
width: 100%;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; img src = "html5.gif" alt = "Biểu tượng HTML5" width = "128 "height =" 128 "& gt;

& lt; img src =" html5.gif "alt =" Biểu tượng HTML5 "style =" width: 128px; height: 128px; "& gt;

& lt; / body & gt;
& lt; / html & gt;

Hãy tự mình thử »

Hình ảnh trong một thư mục khác

Nếu bạn có hình ảnh của mình trong một thư mục con, bạn phải bao gồm thư mục
tên trong thuộc tính src :

Hình ảnh trên Máy chủ / Trang web khác

Một số trang web trỏ đến một hình ảnh trên một máy chủ khác.

Để trỏ đến một hình ảnh trên một máy chủ khác, bạn phải chỉ định giá trị tuyệt đối (đầy đủ)
URL trong thuộc tính src :

Ghi chú về hình ảnh bên ngoài: Hình ảnh bên ngoài có thể nằm dưới
bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm
luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể đột ngột
bị xóa hoặc thay đổi.

Hình ảnh động

HTML cho phép ảnh GIF động:

Hình ảnh dưới dạng liên kết

Để sử dụng hình ảnh làm liên kết, hãy đặt thẻ & lt; img & gt; bên trong thẻ & lt; a & gt;
thẻ:

Hình ảnh nổi

Sử dụng thuộc tính CSS float để hình ảnh nổi sang phải hoặc sang trái của văn bản:

Ví dụ

& lt; p & gt; & lt; img src = "smiley.gif" alt = "Mặt cười"
style = "float: right; width: 42px; height: 42px;" & gt;
Hình ảnh sẽ nổi ở bên phải của
văn bản. & lt; / p & gt;

& lt; p & gt; & lt; img src = "smiley.gif" alt = "Mặt cười"
style = "float: left; width: 42px; height: 42px;" & gt;
Hình ảnh sẽ trôi về bên trái của
văn bản. & lt; / p & gt;

Hãy tự mình thử »

Mẹo: Để tìm hiểu thêm về CSS Float, hãy đọc Hướng dẫn về CSS Float của chúng tôi.

Các định dạng hình ảnh phổ biến

Dưới đây là các loại tệp hình ảnh phổ biến nhất, được hỗ trợ trong tất cả các trình duyệt
(Chrome, Edge, Firefox, Safari, Opera):

Viết tắt
Định dạng tệp
Phần mở rộng tệp

APNG
Đồ họa mạng di động hoạt hình
.apng

GIF
Thay đổi định dạng đồ họa
.gif

ICO
Biểu tượng Microsoft
.ico, .cur

JPEG
Hình ảnh Nhóm Chuyên gia Nhiếp ảnh Chung
.jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG
Biểu đồ minh họa mạng lưới không dây
.png

SVG
Đồ họa vector có thể mở rộng
.svg

Tóm tắt chương

  • Sử dụng phần tử HTML & lt; img & gt; để xác định hình ảnh
  • Sử dụng thuộc tính HTML src để xác định URL của hình ảnh
  • Sử dụng thuộc tính HTML alt để xác định văn bản thay thế cho hình ảnh, nếu không thể hiển thị văn bản đó
  • Sử dụng các thuộc tính HTML width height
    hoặc CSS width height
    thuộc tính xác định kích thước của hình ảnh
  • Sử dụng thuộc tính CSS float để hình ảnh nổi
    sang trái hoặc sang phải

Lưu ý: Tải hình ảnh lớn mất thời gian và có thể làm chậm
trang web. Sử dụng hình ảnh một cách cẩn thận.

Bài tập HTML

Tự kiểm tra bằng các bài tập

Bài tập:

Sử dụng các thuộc tính hình ảnh HTML để đặt kích thước của hình ảnh rộng 250 pixel và cao 400 pixel.

& lt; img src = "hét.png" = "250" = "400" & gt;

Bắt đầu bài tập

Thẻ hình ảnh HTML

Nhãn
Sự mô tả

& lt; img & gt;
Xác định một hình ảnh

& lt; bản đồ & gt;
Xác định một bản đồ hình ảnh

& lt; khu vực & gt;
Xác định khu vực có thể nhấp bên trong bản đồ hình ảnh

& lt; hình ảnh & gt;
Xác định vùng chứa cho nhiều tài nguyên hình ảnh

Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.


Xem thêm những thông tin liên quan đến chủ đề cách nhúng hình ảnh vào html

HTML - 08 - Chèn ảnh vào web (Image)

  • Tác giả: Phan Kim Tu
  • Ngày đăng: 2021-11-04
  • Đánh giá: 4 ⭐ ( 7396 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://www.phankimtu.com

Thẻ chèn ảnh vảo HTML

  • Tác giả: xuanthulab.net
  • Đánh giá: 3 ⭐ ( 2906 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để nhúng hình ảnh vào HTML sử dụng thẻ , với thuộc tính src là đường dẫn ảnh, alt là dòng text thay thế, xác định chiều rộng và chiều cao ảnh bằng thuộc tính width và height

nhúng hình ảnh vào email html

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 4737 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cố gắng chèn trực tiếp, bằng cách này bạn có thể chèn nhiều hình ảnh ở…

Bài 10: Cách chèn link vào chữ, hình ảnh trong html

  • Tác giả: kinhdoanhthantoc.com
  • Đánh giá: 4 ⭐ ( 2634 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách để Chèn ảnh bằng HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 4 ⭐ ( 5005 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Chèn ảnh bằng HTML. Chèn ảnh vào website hay hồ sơ mạng xã hội là cách tuyệt vời để làm đẹp trang cá nhân. Mã HTML để chèn ảnh rất đơn giản, thường là bài học đầu tiên cho người mới học HTML. Tải ảnh lên internet. Có nhiều dịch vụ...

Thẻ chèn hình ảnh, audio, video, object và iframe

  • Tác giả: thachpham.com
  • Đánh giá: 3 ⭐ ( 4781 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chèn hình ảnh,phim ảnh,flash vào tài liệu HTML.Cách chèn một khung website vào web HTML bằng thẻ iframe.

cách đưa hình ảnh vào trang web của bạn

  • Tác giả: freehost.page
  • Đánh giá: 4 ⭐ ( 2537 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php