Bài 7: Định dạng văn bản trong HTML – HTML Text Formatting
Bài 7: Định dạng văn bản trong HTML
HTML cung cấp một số thẻ đặc biệt để sử lý văn bản. Ngoài việc hiển thị văn bản trong HTML theo cách thông thường, bạn có thể làm cho văn bản trên website trông nổi bật hơn.
Ví dụ: bạn có thể sử dụng thẻ <b>để làm đậm văn bản, gắn thẻ <i>để làm cho văn bản in nghiêng. Thẻ <mark>để làm nổi bật văn bản, thẻ <code>để hiển thị một đoạn mã. Thẻ <ins>và <del>để đánh dấu chèn và xóa biên tập, v.v.
Lưu Ý: Bạn hãy học bài 6 nói về Liên kết trong HTML trước nhé.
Ví dụ định dạng văn bản trong HTML
Ví dụ sau đây cho thấy các thẻ định dạng văn bản trong HTML được sử dụng phổ biến nhất. Bạn hãy thử nghiệm đoạn code bên dưới để xem cách các thẻ hoạt động.
1 2 3 4 5 6 7 8 9 10 | <p>This is <b>bold text</b>.</p> <p>This is <strong>strongly important text</strong>.</p> <p>This is <i>italic text</i>.</p> <p>This is <em>emphasized text</em>.</p> <p>This is <mark>highlighted text</mark>.</p> <p>This is <code>computer code</code>.</p> <p>This is <small>smaller text</small>.</p> <p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p> <p>This is <del>deleted text</del>.</p> <p>This is <ins>inserted text</ins>.</p> |
Theo mặc định, thẻ <strong>thường được hiển thị trong trình duyệt dưới dạng <b>. Trong khi <em>được hiển thị là <i>. Tuy nhiên, có một sự khác biệt trong ý nghĩa của các thẻ này.
Sự khác biệt giữa thẻ <strong> và <b>
Cả hai thẻ <strong>và <b> hiển thị văn bản trong html kèm theo theo kiểu chữ in đậm theo mặc định. Nhưng thẻ <strong>cho biết nội dung của nó có tầm quan trọng mạnh mẽ hơn. Và thẻ <b> chỉ đơn giản được sử dụng để thu hút sự chú ý của người đọc mà không truyền đạt bất kỳ tầm quan trọng đặc biệt nào.
1 2 | <p><strong>WARNING!</strong> Please proceed with caution.</p> <p>The concert will be held at <b>Hyde Park</b> in London.</p> |
Sự khác biệt giữa thẻ <em> và <i>
Tương tự, cả hai thẻ <em>và <i> đều hiển thị văn bản đính kèm theo kiểu in nghiêng theo mặc định. Nhưng thẻ <em> cho biết nội dung của nó có trọng tâm nhấn mạnh so với văn bản xung quanh. Trong khi thẻ <i> được sử dụng để đánh dấu văn bản trong html từ văn bản bình thường vì lý do dễ đọc. Chẳng hạn như một thuật ngữ kỹ thuật, một cụm từ thành ngữ từ một ngôn ngữ khác, một ý nghĩ, v.v.
1 2 | <p>Cats are <em>cute</em> animals.</p> <p>The <i>Royal Cruise</i> sailed last night.</p> |
Lưu ý: Sử dụng các thẻ <em> và <strong> khi nội dung trang của bạn yêu cầu các từ hoặc cụm từ nhất định phải có sự nhấn mạnh. Ngoài ra, trong HTML5 thẻ <b> và <i> là các thẻ đã được xác định lại, trước đó chúng không có ý nghĩa ngữ nghĩa.
Định dạng văn bản trong HTML
Bạn có thể dễ dàng định dạng các khối trích dẫn từ các nguồn khác bằng thẻ <blockquote> trong HTML .
Blockquote thường được hiển thị với lề trái và phải thụt lề, cùng với một ít không gian thêm vào bên trên và bên dưới. Hãy thử một ví dụ để xem nó hoạt động như thế nào:
1 2 3 4 | <blockquote> <p>Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.</p> <cite>— Albert Einstein</cite> </blockquote> |
Mẹo: Các thẻ cite được sử dụng để mô tả một tham chiếu đến một công việc sáng tạo. Nó phải bao gồm tiêu đề của tác phẩm đó hoặc tên của tác giả (người hoặc tổ chức) hoặc tham chiếu URL.
Đối với trích dẫn nội tuyến ngắn, bạn có thể sử dụng thẻ <q> để sử lý văn bản trong HTML. Hầu hết các trình duyệt hiển thị dấu ngoặc kép bằng cách bao quanh văn bản trong dấu ngoặc kép. Đây là một ví dụ:
1 | <p>According to the World Health Organization (WHO): <q>Health is a state of complete physical, mental, and social well-being.</q></p> |
Hiển thị từ viết tắt
Viết tắt là một dạng rút gọn của một từ, cụm từ hoặc tên. Bạn có thể sử dụng thẻ <abbr>để biểu thị một từ viết tắt. Sau khi triển khai đoạn code bên dưới, bạn hãy đưa con trỏ chuột vào các tiêu đề viết tắt. Bạn sẽ thấy nội dung hiển thị lên.
1 | <p>The <abbr title="World Wide Web Consortium">W3C</abbr> is the main international standards organization for the <abbr title="World Wide Web">WWW or W3</abbr>. It was was founded by Tim Berners-Lee.</p> |
Đánh dấu địa chỉ liên lạc
Các trang web thường bao gồm các địa chỉ đường phố hoặc mã bưu chính. HTML cung cấp một thẻ đặc biệt <address>để thể hiện thông tin liên hệ (vật lý và / hoặc kỹ thuật số) cho một người, mọi người hoặc tổ chức.
Thẻ này nên được sử dụng lý tưởng để hiển thị thông tin liên hệ liên quan. Đây là cách sử lý văn bản trong html rất tuyệt vời. Hầu hết các trình duyệt hiển thị một khối địa chỉ in nghiêng. Đây là một ví dụ:
1 2 3 4 5 | <address> Mozilla Foundation<br> 331 E. Evelyn Avenue<br> Mountain View, CA 94041, USA </address> |
Kết Thúc
Bài viết này sẽ hướng dẫn cho các bạn cách sử lý văn bản trong HTML. Chúng tôi hy vọng bạn sẽ dễ dàng làm quen và tiến sâu hơn với các thẻ trong HTML. Bạn hãy luyệt tập thật nhiều để không bao giờ quên các thẻ này.