Trong bài chia sẻ trước: Hướng dẫn cách tạo Link liên kết trong HTML , chúng ta đã biết được cách để chèn link rồi đúng không? Bài viết hôm nay chúng ta sẽ đi tới phần Formatting text trong HTML. Đây là phần định dạng văn bản, giúp trang web trở nên khác biệt, sinh động hơn.
Làm thế nào để định dạng văn bản bằng HTML
HTML cung cấp số thẻ Tags rất phong phú.Bạn có thể sử dụng chúng để làm cho trang web khác trở nên khác biệt hơn. Phần này chúng ta hay gọi là định dạng văn bản trong HTML (Formatting Text trong HTML). Ví dụ: Bạn có thể sử dụng thẻ <b> để in đậm, thẻ <i> làm cho văn bản nghiêng, thẻ <mark> là nổi bật văn bản. Thẻ <code> dùng để hiển thị các đoạn mã lập trình máy tính, Thẻ <ins> và <del> để chèn và xóa bỏ văn bản, cùng nhiều thẻ tag khác nữa.
Một ví dụ minh họa dưới đây cho ta thấy được cách hoạt động của chúng như thế nào. Đây cũng là các thẻ định đạng được sử dụng phổ biến nhất trong thực tế.
<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ị như thẻ <b>, trong khi thẻ <em> thì hiển thị như thẻ <i>. Tuy hiển thị giống nhau, nhưng có sự khác nhau về ý nghĩa của các thẻ tags này.
Sự khác biệt giữa thẻ <strong> và <b>
Cả hai thẻ <strong> và <b> đều hiển thị văn bản kèm theo ở dạng chữ in đậm theo mặc định, nhưng thẻ <strong> chỉ ra rằng nội dung của nó có tầm quan trọng mạnh mẽ, trong khi thẻ <b> chỉ được sử dụng để thu hút sự chú ý của người đọc mà không truyền tải bất kỳ tầm quan trọng đặc biệt nào. Thông thường là dùng để nhấn mạnh các danh từ.
<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 kèm theo ở kiểu in nghiêng theo mặc định, nhưng thẻ <em> cho biết rằng nội dung của nó được nhấn mạnh hơn so với văn bản xung quanh, trong khi thẻ <i> được sử dụng để đánh dấu văn bản được đặt ra khỏi văn bản bình thường vì lý do dễ đọc , chẳng hạn như một thuật ngữ chuyên môn, một cụm từ thành ngữ từ một ngôn ngữ khác, một ý nghĩ, v.v.
<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ó mức độ nhấn mạnh hoặc tầm quan trọng. Ngoài ra, trong HTML5 các thẻ <b>, <i> đã được định nghĩa lại, nên chúng không còn nhiều ý nghĩa nữa.
Định dạng Quotations
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> HTML .
Các dấu ngoặc kép thường được hiển thị với lề trái và phải được thụt vào, cùng với một chút không gian thừa được 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:
<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>
Đối với các trích dẫn nội dòng ngắn, bạn có thể sử dụng thẻ <q> HTML . Hầu hết các trình duyệt hiển thị trích dẫn nội dòng bằng cách đặt văn bản trong dấu ngoặc kép. Đây là một ví dụ:
<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ị các từ viết tắt
Viết tắt là một dạng rút gọn của từ, cụm từ hoặc tên.
Bạn có thể sử dụng thẻ <abbr> để hiển thị một chữ viết tắt. Các thuộc tính Title được sử dụng bên trong thẻ tag này để cung cấp sự mở rộng đầy đủ các chữ viết tắt. Phần này được hiển thị bởi các trình duyệt như một tooltip khi con trỏ chuột được quét qua phần tử. Hãy thử một ví dụ:
<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>
Bạn sẽ thấy được chữ viết tắt là W3C, với phần hiển thị khi đưa chuột vào là: World Wide Web Consortium.
Đánh dấu địa chỉ liên hệ bằng thẻ <address>
Các trang web thường bao gồm đường phố hoặc địa chỉ bưu điện. HTML cung cấp một thẻ đặc biệt <address> để đại diện cho thông tin liên hệ . Bao gồm thông tin cho một người hoặc tổ chức.
Thẻ này lý tưởng nên được sử dụng để hiển thị thông tin liên hệ liên quan đến chính tài liệu, chẳng hạn như tác giả của bài báo. Hầu hết các trình duyệt hiển thị một khối địa chỉ ở dạng nghiêng. Đây là một ví dụ:
<address> Mozilla Foundation<br> 331 E. Evelyn Avenue<br> Mountain View, CA 94041, USA </address>
Related
Article Categories:
HTML căn bản
