Cách để Chèn khoảng trống trong HTML

2 Phương pháp:Chèn những khoảng cách và tab đơnThiết lập quãng trống dài hơn

Rất nhiều khoảng trống được tạo theo cách bình thường bằng dấu cách, phím tab và phím enter đều bị bỏ qua trong ngôn ngữ lập trình web. HTML định nghĩa toàn bộ chúng như khoảng trắng thông thường giữa các từ và chỉ hiển thị một dấu cách duy nhất. Trong khi CSS cho phép người dùng thiết lập chi tiết hơn về khoảng trắng và canh lề thì HTML lại không có một số công cụ sẵn có để tùy biến khoảng cách của bạn.

1
Chèn những khoảng cách và tab đơn

  1. 1
    Chèn khoảng trống không bị phá vỡ. Thông thường, HTML sẽ chỉ hiển thị một khoảng cách giữa các từ, không cần biết bạn đã nhấn phím cách bao nhiêu lần. Để làm cho nhiều khoảng cách liền nhau được hiển thị, gõ   hay  .[1] Mã này sẽ tạo ra một ký tự đặc biệt gọi là "không gian không bị phá hủy" (non-breaking space) và nó luôn luôn được hiển thị.
    • Ký tự trên được gọi là “không gian không bị phá hủy” vì nó ngăn chặn dấu ngắt dòng ngay tại vị trí của mình. Nếu bạn lạm dụng ký tự này, trình duyệt sẽ gặp khó khăn trong việc chèn các dấu ngắt dòng theo một cách có trật tự và dễ dọc.[2]
  2. 2
    Chèn khoảng trắng với chiều rộng khác nhau. Có một số ký tự thực thể khác yêu cầu trình duyệt hiển thị khoảng trắng. Cách hiển thị những khoảng trắng này đối với những trình duyệt khác nhau có đôi chút khác biệt, tuy nhiên, khác với  , các mã dưới đây sẽ không gây ảnh hưởng đến dấu ngắt dòng:[3][4]
    •   — được đặt tên theo khoảng cách "N" của máy in (đơn vị đo dòng chữ in), khoảng trống “en” có độ rộng bằng hai lần dấu cách thông thường.
    •   — khoảng trống “em”, xấp xỉ bằng bốn lần dấu cách.
  3. 3
    Mô phỏng một tab với nhiều không gian không bị phá hủy. Để thụt lề đoạn văn, bạn có thể chèn liên tiếp các không gian không bị phá hủy:     . Đây là giải pháp duy nhất nếu chỉ dùng HTML, nhưng nếu bạn sử dụng cả CSS (được mô tả riêng trong bước bên dưới) thì thao tác sẽ ngắn gọn hơn.
  4. 4
    Canh lề đoạn văn với CSS. Thuộc tính “margin” và “padding” trong CSS đưa ra những hướng dẫn trực tiếp cho trình duyệt, vì thế kết quả hiển thị sẽ nhất quán hơn. Phương pháp này không khó thực hiện, trừ khi bạn không biết gì về CSS và trang của bạn không có mảng định dạng (style sheet). Sau đây là ví dụ về cách chuyển toàn bộ một đoạn văn sang lề phải:[5]
    • Trong phần <head></head> của tài liệu HTML, chèn đoạn mã sau:
      <style>p.indent{ padding-left: 1.8em }</style>
      trong đó: "p.indent" định nghĩa một thuộc tính của văn bản (thẻ p) tên "indent" (bạn có thể sử dụng tên khác). Phần còn lại của mã bổ sung đặc điểm của khoảng trống "padding" vào phía bên trái đoạn văn.
    • Bây giờ, trở lại với phần nội dụng của tài liệu HTML. Bất kỳ lúc nào bạn muốn thụt lề cho một đoạn văn nào đó (trong ví dụ này vẫn là “indent”), đặt đoạn văn ấy vào trong đoạn mã này:
      <p class="indent"></p>
    • Để canh chỉnh khoảng cách thụt vào, thay đổi con số "1.8" trong mã CSS. Vẫn giữ lại "em" phía sau vì đây là đơn vị đo chiều dài gắn liền với kích thước phông chữ.[6]

2
Thiết lập quãng trống dài hơn

  1. 1
    Sử dụng thẻ định dạng sẵn . Bất kỳ phím space hay Enter được nhập trong thẻ sẽ được hiển thị chính xác như khi bạn gõ. Bạn cũng có thể sử dụng thẻ này để trình bày các ví dụ, bài thơ hay bất kỳ văn bản nào khác cần sự chính xác cao trong việc trình bày khoảng cách và các dấu ngắt dòng.[7]
    • Nhược điểm chính của thẻ định dạng sẵn là độ rộng. Không giống như HTML thông thường, văn bản được định dạng sẵn sẽ không tùy biến kích thước để phù hợp với kích thước cửa sổ của người dùng.[8]
  2. 2
    Tạo dấu ngắt dòng. Thẻ <br> sẽ kết thúc dòng hiện tại của văn bản. Bạn có thể tạo những dòng trống bằng nhiều thẻ ngắt dòng br. Đối với học viên mới tìm hiểu HTML, đây là cách tiếp cận hay, nhưng nếu bạn đã học CSS thì kiểu định dạng HTML bắt buộc này sẽ không được khuyến khích sử dụng.
  3. 3
    Xác định đoạn văn với thẻ “p”. Thẻ <p></p> xung quanh văn bản có tác dụng xác định đoạn văn đó. Hầu hết trình duyệt sẽ tách đoạn văn ra bằng một dòng trống, tuy nhiên, bạn không thể đảm bảo về một định dạng nhất quán cho văn bản.[9]

Lời khuyên

  • Khi kiểm tra lại lần cuối bản hiển thị trên trang web, nếu bạn thấy những ký tự thừa nằm ở vị trí bất thường xung quanh đoạn mã, kiểm tra lại xem có thẻ nào chưa được hoàn chỉnh không, chẳng hạn như <br thay vì <br>.
  • CSS là công cụ mạnh và chủ động hơn để trình bày trang web, bao gồm cả việc cách khoảng cho văn bản.
  • Hạn chế những khoảng trắng đột ngột phía sau một thẻ mở hay phía trước một thẻ đóng. Ví dụ, bạn nên viết là Spaces <a>Tutorial</a> chứ không phải là Spaces<a> Tutorial </a>.[10]
  • Không gian không bị phá hủy &nbsp; là một ví dụ về ký tự thực thể: mã thể hiện cho một ký tự mà bạn không thể nhập từ bàn phím.

Cảnh báo

  • Thuộc tính HTML thể hiện phím Tab &#09; thực ra không hiệu quả như bạn nghĩ. Một tài liệu HTML chuẩn không có các điểm dừng tab, vì vậy, ký tự tab không có tác dụng gì.
  • Luôn viết ngôn ngữ HTML trong một trình soạn thảo mã hoặc tập tin văn bản thuần túy, không sử dụng định dạng xử lý tệp văn bản. Nếu những khoảng trống của bạn trở thành những ký tự lạ trên trình duyệt web, rất có thể là do những dữ liệu thừa mà trình xử lý văn bản tự thêm vào, những dữ liệu này không dành cho việc hiển thị trực tuyến.

Thông tin Bài viết

Chuyên mục: Máy tính

Ngôn ngữ khác:

English: Insert Spaces in HTML, Español: insertar espacios en HTML, Português: Inserir Espaços no HTML, Français: insérer des espaces dans un code HTML, Русский: вставить пробелы в HTML, Italiano: Inserire gli Spazi in HTML, Deutsch: Leerzeichen in HTML einfügen, 中文: 在HTML中插入空格, Bahasa Indonesia: Menyisipkan Spasi Dalam HTML, Nederlands: Spaties in HTML toevoegen, العربية: إدراج مسافات في لغة اتش تي ام ال, ไทย: เว้นวรรคห่างๆ ใน HTML, 日本語: HTMLでスペースを挿入する, 한국어: HTML에 공백 넣는 방법, हिन्दी: HTML में स्पेस इन्सर्ट करना सीखें (Insert Spaces in HTML), Türkçe: HTML'de Boşluk Nasıl Eklenir

Trang này đã được đọc 41.514 lần.

Bài viết này đã giúp ích cho bạn?