Làm thế nào để bạn đưa một hình ảnh vào css?

Làm thế nào để chúng tôi đặt một hình ảnh trên một trang web?

Để đưa một hình ảnh đơn giản lên trang web, chúng ta sử dụng phần tử

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Thuộc tính

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Ghi chú. Bạn nên đọc Sơ lược nhanh về URL và đường dẫn để nhớ lại các URL tương đối và tuyệt đối trước khi tiếp tục

Vì vậy, ví dụ: nếu hình ảnh của bạn có tên là

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Nếu hình ảnh nằm trong thư mục con

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Và như thế

Ghi chú. Công cụ tìm kiếm cũng đọc tên tệp hình ảnh và tính chúng cho SEO. Do đó, bạn nên đặt cho hình ảnh của mình một tên tệp mô tả;

Ví dụ: bạn có thể nhúng hình ảnh bằng URL tuyệt đối của nó

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Nhưng điều này không được khuyến khích. Bạn nên lưu trữ hình ảnh của riêng mình, điều này trong các thiết lập đơn giản có nghĩa là giữ hình ảnh cho trang web của bạn trên cùng một máy chủ với HTML của bạn. Trong các thiết lập nâng cao hơn, bạn có thể sử dụng CDN (Mạng phân phối nội dung) để phân phối hình ảnh của mình

Cảnh báo. Không bao giờ trỏ thuộc tính src của bạn vào một hình ảnh được lưu trữ trên trang web của người khác mà không được phép. Điều này được gọi là "liên kết nóng". Nó thường được coi là phi đạo đức, vì người khác sẽ trả chi phí băng thông để phân phối hình ảnh khi ai đó truy cập trang của bạn. Nó cũng khiến bạn không kiểm soát được liệu hình ảnh có bị xóa hay thay thế bằng thứ gì đó đáng xấu hổ hay không

Nói chung, bạn nên lưu trữ những hình ảnh bạn muốn sử dụng trên trang web của mình. Hãy nhớ rằng nhiều hình ảnh bạn có thể tìm thấy trên web có bản quyền. Trước khi bạn lưu trữ một hình ảnh, bạn nên đảm bảo rằng một trong những điều này được áp dụng

• Bạn sở hữu hình ảnh
• Bạn đã nhận được sự cho phép rõ ràng bằng văn bản từ chủ sở hữu hình ảnh
• Trên thực tế, bạn có nhiều bằng chứng cho thấy hình ảnh thuộc phạm vi công cộng

Mã trên của chúng tôi sẽ cho chúng tôi kết quả sau

Ghi chú. Các phần tử như

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Ghi chú. Bạn có thể tìm thấy ví dụ đã hoàn thành từ phần này đang chạy trên GitHub (cũng xem mã nguồn. )

văn bản thay thế

Thuộc tính tiếp theo chúng ta sẽ xem xét là

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Cách dễ nhất để kiểm tra văn bản

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Vì vậy, tại sao bạn lại thấy hoặc cần văn bản thay thế?

• Người dùng bị khiếm thị và đang sử dụng trình đọc màn hình để đọc trang web cho họ nghe. Trên thực tế, việc có sẵn văn bản thay thế để mô tả hình ảnh là hữu ích đối với hầu hết người dùng
• Như đã mô tả ở trên, chính tả của tệp hoặc tên đường dẫn có thể sai
• Trình duyệt không hỗ trợ loại hình ảnh. Một số người vẫn sử dụng trình duyệt chỉ có văn bản, chẳng hạn như Lynx, hiển thị văn bản thay thế của hình ảnh
• Bạn có thể muốn cung cấp văn bản cho các công cụ tìm kiếm sử dụng;
• Người dùng đã tắt hình ảnh để giảm khối lượng truyền dữ liệu và giảm phiền nhiễu. Điều này đặc biệt phổ biến trên điện thoại di động và ở các quốc gia có băng thông hạn chế hoặc đắt đỏ

Chính xác thì bạn nên viết gì bên trong thuộc tính

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

• trang trí. Bạn nên sử dụng ảnh nền CSS cho hình ảnh trang trí, nhưng nếu bạn phải sử dụng HTML, hãy thêm một khoảng trống

  <img src="images/dinosaur.jpg" alt="Dinosaur" />
  

  78. Nếu hình ảnh không phải là một phần của nội dung, trình đọc màn hình không nên lãng phí thời gian để đọc nó
• Nội dung. Nếu hình ảnh của bạn cung cấp thông tin quan trọng, hãy cung cấp thông tin tương tự trong một văn bản ngắn gọn

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0 – hoặc thậm chí tốt hơn, trong văn bản chính mà mọi người có thể nhìn thấy. Đừng viết văn bản

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0 dư thừa. Người dùng sáng mắt sẽ khó chịu như thế nào nếu tất cả các đoạn được viết hai lần trong nội dung chính?
• liên kết. Nếu bạn đặt hình ảnh bên trong thẻ

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  3, để biến hình ảnh thành liên kết, bạn vẫn phải cung cấp văn bản liên kết có thể truy cập được. Trong những trường hợp như vậy, bạn có thể viết nó bên trong cùng một thành phần

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  3 hoặc bên trong thuộc tính

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0 của hình ảnh – tùy theo cách nào phù hợp nhất trong trường hợp của bạn
• Chữ. Bạn không nên đưa văn bản của mình vào hình ảnh. Ví dụ: nếu tiêu đề chính của bạn cần một bóng đổ, hãy sử dụng CSS cho điều đó thay vì đặt văn bản vào một hình ảnh. Tuy nhiên, nếu bạn thực sự không thể tránh làm điều này, bạn nên cung cấp văn bản bên trong thuộc tính

  <img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />
  

  0

Về cơ bản, điều quan trọng là mang lại trải nghiệm có thể sử dụng được, ngay cả khi không thể nhìn thấy hình ảnh. Điều này đảm bảo tất cả người dùng không bỏ lỡ bất kỳ nội dung nào. Hãy thử tắt hình ảnh trong trình duyệt của bạn và xem mọi thứ như thế nào. Bạn sẽ sớm nhận ra văn bản thay thế hữu ích như thế nào nếu không thể nhìn thấy hình ảnh

Ghi chú. Để biết thêm thông tin, hãy xem hướng dẫn của chúng tôi về Các lựa chọn thay thế văn bản

Chiều rộng và chiều cao

Bạn có thể sử dụng các thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Điều này không dẫn đến nhiều khác biệt cho màn hình, trong các trường hợp bình thường. Nhưng nếu hình ảnh không được hiển thị, chẳng hạn như người dùng vừa điều hướng đến trang và hình ảnh chưa được tải, bạn sẽ nhận thấy trình duyệt đang để lại một khoảng trống để hình ảnh xuất hiện trong đó.

Đây là một điều nên làm, dẫn đến việc tải trang nhanh hơn và mượt mà hơn

Tuy nhiên, bạn không nên thay đổi kích thước hình ảnh của mình bằng các thuộc tính HTML. Nếu bạn đặt kích thước hình ảnh quá lớn, bạn sẽ nhận được hình ảnh trông có hạt, mờ hoặc quá nhỏ và lãng phí băng thông khi tải xuống hình ảnh không phù hợp với nhu cầu của người dùng. Hình ảnh cũng có thể trông bị méo nếu bạn không duy trì tỷ lệ khung hình chính xác. Bạn nên sử dụng trình chỉnh sửa hình ảnh để đặt hình ảnh của mình ở kích thước chính xác trước khi đưa nó lên trang web của bạn

Ghi chú. Nếu bạn cần thay đổi kích thước của hình ảnh, bạn nên sử dụng CSS để thay thế

Tiêu đề hình ảnh

Đối với các liên kết, bạn cũng có thể thêm thuộc tính

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Điều này cung cấp cho chúng tôi chú giải công cụ khi di chuột, giống như tiêu đề liên kết

Tuy nhiên, điều này không được khuyến nghị —

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Tốt hơn là bao gồm thông tin hỗ trợ như vậy trong văn bản chính của bài viết, thay vì đính kèm với hình ảnh

học tích cực. nhúng một hình ảnh

Bây giờ đến lượt bạn chơi. Phần học tích cực này sẽ giúp bạn bắt đầu và chạy với một bài tập nhúng đơn giản. Bạn được cung cấp một thẻ

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Trước đó chúng tôi đã nói không bao giờ liên kết nóng đến hình ảnh trên các máy chủ khác, nhưng điều này chỉ nhằm mục đích học tập, vì vậy chúng tôi sẽ bỏ qua điều này một lần

Chúng tôi cũng muốn bạn

• Thêm một số văn bản thay thế và kiểm tra xem nó có hoạt động không bằng cách viết sai chính tả URL hình ảnh
• Đặt hình ảnh đúng là

  <img src="images/dinosaur.jpg" alt="Dinosaur" />
  

  46 và

  <img src="images/dinosaur.jpg" alt="Dinosaur" />
  

  47 (gợi ý. nó rộng 200px và cao 171px), sau đó thử nghiệm với các giá trị khác để xem hiệu ứng là gì
• Đặt một

  <img src="images/dinosaur.jpg" alt="Dinosaur" />
  

  48 trên hình ảnh

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Chú thích hình ảnh với số liệu và chú thích hình

Nói về chú thích, có một số cách bạn có thể thêm chú thích đi kèm với hình ảnh của mình. Ví dụ, sẽ không có gì ngăn cản bạn làm điều này

<img src="images/dinosaur.jpg" alt="Dinosaur" />

cái này ổn. Nó chứa nội dung bạn cần và có thể tạo kiểu độc đáo bằng CSS. Nhưng có một vấn đề ở đây. không có gì liên kết ngữ nghĩa hình ảnh với chú thích của nó, điều này có thể gây ra sự cố cho trình đọc màn hình. Ví dụ: khi bạn có 50 hình ảnh và chú thích, chú thích nào đi với hình ảnh nào?

Một giải pháp tốt hơn là sử dụng các phần tử HTML

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Phần tử

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Ghi chú. Từ quan điểm về khả năng tiếp cận, chú thích và văn bản

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

Một hình không nhất thiết phải là một hình ảnh. Nó là một đơn vị nội dung độc lập mà

• Thể hiện ý nghĩa của bạn một cách cô đọng, dễ nắm bắt
• Có thể xuất hiện ở một số vị trí trong luồng tuyến tính của trang
• Cung cấp thông tin cần thiết hỗ trợ văn bản chính

Một hình có thể là một số hình ảnh, đoạn mã, âm thanh, video, phương trình, bảng hoặc thứ gì đó khác

học tích cực. tạo hình

Trong phần học tích cực này, chúng tôi muốn bạn lấy đoạn mã đã hoàn thành từ phần học tích cực trước đó và biến nó thành một hình

1. Bọc nó trong một yếu tố

   <img src="images/dinosaur.jpg" alt="Dinosaur" />
   

   7
2. Sao chép văn bản ra khỏi thuộc tính

   <img src="images/dinosaur.jpg" alt="Dinosaur" />
   

   48, xóa thuộc tính

   <img src="images/dinosaur.jpg" alt="Dinosaur" />
   

   48 và đặt văn bản bên trong thành phần

   <img src="images/dinosaur.jpg" alt="Dinosaur" />
   

   85 bên dưới hình ảnh

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại. Nếu bạn thực sự gặp khó khăn, hãy nhấn nút Hiển thị giải pháp để xem câu trả lời

<img src="images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Ảnh nền CSS

Bạn cũng có thể sử dụng CSS để nhúng hình ảnh vào trang web (và JavaScript, nhưng đó hoàn toàn là một câu chuyện khác). Thuộc tính CSS

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

<img src="images/dinosaur.jpg" alt="Dinosaur" />

Hình ảnh nhúng kết quả được cho là dễ định vị và kiểm soát hơn so với hình ảnh HTML. Vậy tại sao phải bận tâm với hình ảnh HTML? . Nếu bạn chỉ muốn thêm một cái gì đó đẹp đẽ vào trang của mình để nâng cao hình ảnh, thì điều này là tốt. Mặc dù, những hình ảnh như vậy không có ý nghĩa ngữ nghĩa nào cả. Chúng không thể có bất kỳ văn bản tương đương nào, không hiển thị với trình đọc màn hình, v.v. Đây là nơi hình ảnh HTML tỏa sáng

Tổng hợp. nếu một hình ảnh có ý nghĩa, về mặt nội dung của bạn, bạn nên sử dụng một hình ảnh HTML. Nếu hình ảnh chỉ mang tính chất trang trí, bạn nên sử dụng hình nền CSS

Ghi chú. Bạn sẽ tìm hiểu thêm về hình nền CSS trong chủ đề CSS của chúng tôi

Kiểm tra kỹ năng của bạn

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . hình ảnh HTML

Tóm lược

Đó là tất cả cho bây giờ. Chúng tôi có hình ảnh và chú thích chi tiết. Trong bài viết tiếp theo, chúng ta sẽ tiến dần lên, xem xét cách sử dụng HTML để nhúng nội dung video và âm thanh vào các trang web

Làm cách nào để chèn hình ảnh vào CSS HTML?

Bạn có thể thêm hình ảnh vào tệp CSS không?

Làm cách nào để thêm hình ảnh vào CSS bằng URL?

Làm cách nào để định vị một hình ảnh trong CSS?