Lập Trình HTML Cơ Bản

Thẻ định dạng trong HTML

Posted on by ComdyVN

Thẻ định dạng trong HTML

Nếu bạn đã từng sử dụng ứng dụng Word, bạn phải làm quen với các thao tác để in đậm, in nghiêng, hay gạch chân; đó là 3 trong số 10 tùy chọn có sẵn để chỉ cách mà văn bản xuất hiện trong HTML và XHTML.

In đậm trong HTML

Bất cứ nội dung gì mà xuất hiện trong phần tử <b>…</b> đều được in đậm.

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <b> trong HTML

In nghiêng trong HTML

Bất cứ nội dung gì xuất hiện trong phần tử <i>…</i> đều được in nghiêng:

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <i> trong HTML

Gạch chân trong HTML

Bất cứ nội dung gì xuất hiện trong phần tử <u>…</u> đều được gạch chân:

Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <u> trong HTML

Gạch ngang trong HTML

Bất cứ nội dung nào xuất hiện trong phần tử <strike>…</strike> đều được gạch ngang:

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <strike> trong HTML

Font chữ đơn cách trong HTML

Nội dung trong phần tử <tt>…</tt> được viết dưới dạng font chữ đơn cách. Hầu hết các font chữ đều được biết như là các font chữ rộng bởi vì các ký tự khác nhau có độ rộng khác nhau (ví dụ như ký tự ‘m’ rộng hơn ký tự ‘i’). Tuy nhiên trong font chữ đơn cách, các ký tự có độ rộng giống nhau.

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <tt> trong HTML

Chỉ số trên trong HTML

Nội dung trong phần tử <sup>…</sup> được viết dưới dạng chỉ số trên, kích cỡ của nó bằng kích cỡ của các ký tự quanh nó nhưng độ cao của nó bằng một nửa các ký tự khác.

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <sup> trong HTML

Chỉ số dưới trong HTML

Nội dung trong phần tử <sub>…</sub> được viết ở dạng chỉ số dưới, kích cỡ của nó bằng kích cỡ các ký tự xung quanh nhưng chiều cao bằng một nửa.

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <sub> trong HTML

Chèn văn bản trong HTML

Bất cứ nội dung xuất hiện trong phần tử <ins>…</ins> được hiển thị như ở dạng văn bản được chèn.

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <ins> trong HTML

Xóa văn bản trong HTML

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <del> trong HTML

Văn bản lớn hơn trong HTML

Nội dung trong phần tử <big>…</big> được hiển thị ở một kích cỡ lớn hơn phần còn lại xung quanh nó.

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <big> trong HTML

Văn bản nhỏ hơn trong HTML

Nội dung xuất hiện trong phần tử <small>…</small> được hiển thị ở một kích cỡ nhỏ hơn phần còn lại xung quanh nó.

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

Đây là kết quả:

Thẻ <small> trong HTML

Nhóm nội dung trong HTML

Phần tử <div> và <span> cho phép bạn tạo các phần tử thành nhóm nội dung để tạo ra các khu vực hoặc các tiểu khu của một trang.

Ví dụ, bạn muốn đặt tất cả các lời chú thích ở cuối trang và đặt tất cả chúng trong một phần tử <div> để chỉ rằng tất cả các phần tử trong phần tử <div> nào đó. Bạn cũng có thể đính kèm một style cho phần tử này.

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id="menu" align="middle" >
         <a href="/index.htm">HOME</a> | 
         <a href="/about/contact_us.htm">CONTACT</a> | 
         <a href="/about/index.htm">ABOUT</a>
      </div>

      <div id="content" align="left" bgcolor="white">
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

Đây là kết quả:

Thẻ <div> trong HTML

Bên cạnh đó, phần tử <span> có thể sử dụng để tạo nhóm chỉ cho các phần tử trong một dòng.

Vì thế, nếu bạn có một phần của câu hay đoạn văn mà bạn muốn phân nhóm chúng, bạn có thể sử dụng phần tử <span> như ví dụ dưới đây.

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

Đây là kết quả:

Thẻ <span> trong HTML

Những thẻ này được sử dụng phổ biến với CSS cho phép bạn đính kèm một style tới một khu vực của trang.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *