Hướng dẫn how do i display text on an image in html? - làm cách nào để hiển thị văn bản trên hình ảnh trong html?

Làm cách nào để đặt văn bản vào một bức tranh?

Sử dụng hộp văn bản để thêm văn bản trên đầu ảnh trên tab Chèn, trong nhóm văn bản, nhấp vào hộp văn bản, kéo để vẽ hộp văn bản ở bất cứ đâu gần ảnh, sau đó nhập văn bản của bạn. Để thay đổi phông chữ hoặc kiểu của văn bản, hãy tô sáng văn bản, nhấp chuột phải vào nó và sau đó chọn định dạng văn bản bạn muốn trên menu phím tắt.

Làm cách nào để hiển thị văn bản trong thẻ hình ảnh?

Vì vậy, ví dụ, nếu hình ảnh của bạn được gọi là

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

<img src="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ế.

Lưu ý: Các công cụ tìm kiếm cũng đọc tên tệp hình ảnh và đếm chúng về phía SEO. Do đó, bạn nên cung cấp cho hình ảnh của bạn một tên tệp mô tả;

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

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

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

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

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

<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, 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) để cung cấp hình ảnh của bạn.

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à "hotlinking". Nó thường được coi là phi đạo đức, vì một người khác sẽ trả chi phí băng thông để cung cấp 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 việc hình ảnh được gỡ bỏ hay thay thế bằng một cái gì đó đáng xấu hổ. Never point your src attribute at an image hosted on someone else's website without permission. This is called "hotlinking". It is generally considered unethical, since someone else would be paying the bandwidth costs for delivering the image when someone visits your page. It also leaves you with no control over whether the image is removed or replaced with something embarrassing.

Nói chung, bạn nên lưu trữ các 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 áp dụng này:

• 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.
• Bạn có nhiều bằng chứng rằng hình ảnh trên thực tế, trong 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:

Lưu ý: Các yếu tố như

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

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

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

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

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="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

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="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

Vì vậy, tại sao bạn sẽ thấy hoặc cần văn bản alt? Nó có thể có ích vì một số lý do:

• Người dùng bị khiếm thị và đang sử dụng đầu đọc màn hình để đọc web cho họ. Trong thực tế, có sẵn văn bản ALT để mô tả hình ảnh là hữu ích cho 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 alt 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; Ví dụ: công cụ tìm kiếm có thể khớp với văn bản alt với các truy vấn tìm kiếm.
• Người dùng đã tắt hình ảnh để giảm khối lượng truyền dữ liệu và phân tâm. Điều này đặc biệt phổ biến trên điện thoại di động và ở các quốc gia nơi băng thông bị hạn chế hoặc tốn kém.

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 hình ả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 chiếc trống

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth" />
  

  8. Nếu hình ảnh không phải là một phần của nội dung, người đọc màn hình không nên lãng phí thời gian để đọc nó. You should use CSS background images for decorative images, but if you must use HTML, add a blank

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth" />
  

  8. If the image isn't part of the content, a screen reader shouldn't waste time reading it.
• 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

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

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

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

  0 dự phòng. Làm thế nào gây khó chịu cho một người dùng nhìn thấy nếu tất cả các đoạn văn được viết hai lần trong nội dung chính? Nếu hình ảnh được mô tả đầy đủ bởi cơ thể văn bản chính, bạn chỉ có thể sử dụng

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth" />
  

  8. If your image provides significant information, provide the same information in a brief

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

  0 text – or even better, in the main text which everybody can see. Don't write redundant

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

  0 text. How annoying would it be for a sighted user if all paragraphs were written twice in the main content? If the image is described adequately by the main text body, you can just use

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth" />
  

  8.
• Liên kết. Nếu bạn đặt mộ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 một 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. Trong những trường hợp như vậy, bạn cũng có thể viết nó bên trong cùng một phần tử

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

  3 hoặc bên trong thuộc tính ____20 của hình ảnh - bất kỳ hoạt động nào tốt nhất trong trường hợp của bạn. If you put an image inside

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

  3 tags, to turn an image into a link, you still must provide accessible link text. In such cases you may, either, write it inside the same

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

  3 element, or inside the image's

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

  0 attribute – whichever works best in your case.
• Chữ. Bạn không nên đặt văn bản của bạn vào hình ảnh. Ví dụ, nếu tiêu đề chính của bạn cần một cái bóng thả, 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 được việc 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. You should not put your text into images. If your main heading needs a drop shadow, for example, use CSS for that rather than putting the text into an image. However, If you really can't avoid doing this, you should supply the text inside the

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

  0 attribute.

Về cơ bản, chìa khóa là cung cấp trải nghiệm có thể sử dụng, 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 thiếu 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ứ trông như thế nào. Bạn sẽ sớm nhận ra văn bản alt hữu ích như thế nào nếu hình ảnh không thể được nhìn thấy.

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="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

Điều này không dẫn đến nhiều sự khác biệt cho màn hình, trong trường hợp bình thường. Nhưng nếu hình ảnh không được hiển thị, ví dụ, 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 sẽ để lại một khoảng trống để hình ảnh xuất hiện trong:

Đây là một điều tốt để làm, dẫn đến việc tải trang nhanh hơn và suôn sẻ 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ẽ kết thúc với những hình ảnh trông giống như sần sùi, mờ hoặc quá nhỏ và lãng phí băng thông tải xuống một 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ể cuối cùng trông bị biến dạng, 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 bạn ở kích thước chính xác trước khi đặt nó lên trang web của bạn.

Lưu ý: 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ế. If you do need to alter an image's size, you should use CSS instead.

Tiêu đề hình ảnh

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

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

Điều này cung cấp cho chúng tôi một chú giải công cụ trên chuột di chuột, giống như các 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="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

Tốt hơn là bao gồm thông tin hỗ trợ như vậy trong văn bản bài viết chính, thay vì gắn vào hình ảnh.

Học tập tích cực: Nhúng hình ảnh

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

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

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Trước đó chúng tôi đã nói không bao giờ liên kết với hình ảnh trên các máy chủ khác, nhưng đây chỉ là mục đích học tập, vì vậy chúng tôi sẽ cho phép bạn tắt đ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 Alt, và kiểm tra xem nó có hoạt động bằng cách viết sai URL hình ảnh không.
• Đặt hình ảnh chính xác

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
  

  6 và

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
  

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

  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />
  

  8 trên hình ảnh.

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

<h2>Live outputh2>

<div class="output" style="min-height: 50px;">div>

<h2>Editable codeh2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
<img>
textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById('code');
const reset = document.getElementById('reset');
const solution = document.getElementById('solution');
const output = document.querySelector('.output');
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution = '
';
let solutionEntry = htmlSolution;

reset.addEventListener('click', () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', () => {
  if (solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Chú thích hình ảnh với hình và chú thích hình

Nói về chú thích, có một số cách mà bạn có thể thêm chú thích để đi 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" />

Điều này là ok. Nó chứa nội dung bạn cần, và có thể kiểm duyệt độc đáo bằng CSS. Nhưng có một vấn đề ở đây: không có gì liên kết về mặt ngữ nghĩa hình ảnh với chú thích của nó, điều này có thể gây ra vấn đề cho người đọ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 theo hình ảnh nào?

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

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

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

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

Phần tử

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

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

LƯU Ý: Từ quan điểm truy cập, 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" />

<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 con số không 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 theo cách nhỏ gọn, dễ nắm bắt.
• Có thể đi ở một số nơi 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 con số có thể là một số hình ảnh, đoạn mã, âm thanh, video, phương trình, bảng hoặc một cái gì đó khác.

Học tập tích cực: Tạo ra một con số

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

1. Bọc nó trong một phần 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="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
     width="400"
     height="341" />
   

   8, xóa thuộc tính

   <img
     src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
     width="400"
     height="341" />
   

   8 và đặt văn bản vào phần tử

   <img
     src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum" />
   

   5 bên dưới hình ảnh.

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại nó bằng nút đặt lại. Nếu bạn thực sự bị mắc kẹt, 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" />

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

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

Hình ảnh nền CSS

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

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

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

Hình ảnh nhúng kết quả được cho là dễ dàng định vị và điều khiể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? Như gợi ý ở trên, hình ảnh nền CSS chỉ dành cho trang trí. Nếu bạn chỉ muốn thêm một cái gì đó đẹp vào trang của bạn để nâng cao hình ảnh, đ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ả. Họ không thể có bất kỳ tương đương văn bản, là vô hình đối với người đọc màn hình, v.v. Đây là nơi hình ảnh HTML tỏa sáng!

Tóm tắt: 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 hình ảnh HTML. Nếu một hình ảnh hoàn toàn là trang trí, bạn nên sử dụng hình ảnh nền CSS.

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

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra các kỹ năng của bạn: Hình ảnh HTML.

Bản tóm tắt

Đó 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 tôi sẽ chuyển nó lên một thiết bị, xem xét cách sử dụng HTML để nhúng nội dung video và âm thanh trong các trang web.

• Tổng quan: Đa phương tiện và nhúng
• Tiếp theo

Trong mô -đun này