Bài 4: Các thẻ định dạng văn thường gặp trong HTML

60

Chào các bạn,

Như ở bài trước mình đã giới thiệu về cấu trúc của một trang HTML thì bạn thấy rằng một tài liệu HTML được cấu tạo hoàn toàn từ các thẻ. Hay cũng có thể nói các thẻ HTML chính là bản chất của tài liệu HTML. Vậy bạn chỉ nắm rõ được HTML khi bạn hiểu rõ được các thẻ cấu tạo nên nó. Vì vậy mà trong series này, mình có dành một số lượng bài nhất định để trình bày về cách sử dụng các thẻ phổ biến trong HTML, mà mở đầu chính là bài này – Các thẻ định dạng văn thường gặp trong HTML.

I. Các thẻ heading

Heading là các thẻ được sử dụng để đánh dấu tiêu đề cho nội dung trang web. Trong HTML, các thẻ heading được chia làm 6 cấp bậc, với kích thước nhỏ dần như sau:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Cụ thể cú pháp của các thẻ heading trong HTML như sau:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Giống như bạn trình bày một trang sách, các mục Một lớn, Hai lớn sẽ ưu tiên được đặt trong các thẻ h1, h2, các mục nhỏ hơn thì sử dụng các thẻ h3, h4

Đặc biệt, các công cụ tìm kiếm như Google sẽ dựa vào các thẻ heading này để nhận biết về cấu trúc nội dung trang web của bạn, vì vậy nếu bạn có làm việc trong nghề SEO thì cũng nên để ý tới việc sử dụng các thẻ heading hợp lý.

II. Các thẻ định dạng văn bản

Thẻ định dạng văn bản trong HTML rất phong phú. Cụ thể bạn có thể dễ dạng định dạng một dòng chữ đậm, chữ nghiêng, chữ gạch chân bằng HTML.

Ví dụ

Dòng chữ này đậm
Dòng chữ này nghiêng
Dòng chữ này có gạch chân
Dòng chữ này bị gạch ngang

Các thẻ định dạng văn bản này rất dễ học và dễ nhớ, vì vậy mình có tổng hợp một số thẻ hay dùng trong bảng dưới đây để các bạn tiện theo dõi.

CodeOutput
<b>Dòng chữ này đậm</b>Dòng chữ này đậm
<i>Dòng chữ này nghiêng</i>Dòng chữ này nghiêng
<u>Dòng chữ này có gạch chân</u>Dòng chữ này có gạch chân
<s>Dòng chữ này bị gạch ngang</s>Dòng chữ này bị gạch ngang
<b>C</b><sub>2</sub><b>H</b><sub>4</sub>C2H4
<b>a</b><sup>2</sup> + <b>b</b><sup>2</sup>a2 + b2

III. Các thẻ định dạng đoạn văn bản

Ngoài việc định dạng văn bản nói chung, HTML còn cho bạn định dạng từng đoạn văn bản. Cụ thể, bạn có thể đánh dấu một đoạn văn bản bằng cách sử dụng thẻ <p>...</p>, hay quản lý việc xuống dòng bằng thẻ <br />.

Ví dụ

Đây là đoạn văn thứ nhất. HTML là chữ viết tắt của Hyper Text Markup Language, dịch ra có nghĩa là Ngôn ngữ đánh dấu siêu văn bản. Trong lập trình web, HTML có nhiệm vụ là xây dựng lên bố cục trang web.

Đây là đoạn văn thứ 2. Ở dạng nguyên thể, HTML chỉ là văn bản đơn thuần, chỉ khi đi qua bộ biên dịch của trình duyệt nó mới có thể trở thành như những gì bạn trông thấy.

Nếu bạn muốn ngắt dòng,
bạn chỉ cần đặt thẻ <br> vào chỗ muốn xuống dòng

Mỗi một đoạn văn bản trên đều được đặt trong cặp thẻ <p>...</p>. Khi nội dung đặt trong cặp thẻ này, nó sẽ tự động được ngăn cách với các phần tử bên dưới một khoảng nhất định, đủ để bạn phân biệt rạch ròi nội dung đó thuộc về đoạn văn bản nào.

Trường hợp bạn muốn xuống hàng lưng chừng câu, bạn chỉ cần đặt vào chỗ muốn xuống hàng thẻ <br> là xong.

IV. Tự định dạng thông qua thuộc tính style

Các thẻ định dạng văn bản trong HTML tuy phong phú, nhưng chưa đủ độ biến hóa để có thể thể hiện được hết óc sáng tạo của các web developer. Chính vì vậy mà HTML cung cấp một thuộc tính có tên là style để giúp các developer có thể tùy chỉnh thêm các thuộc tính nâng cao khác.

4.1 Định dạng màu chữ

Các màu cơ bản như xanh, đỏ, tím, vàng, đen,… trong HTML được mô tả bằng cách từ Tiếng Anh tương ứng, như red là đỏ, black là đen, green là xanh lá cây,… Để định dạng lại màu chữ, bạn sử dụng theo cú pháp như sau:

<tagname style="color: colorname">...</tagname>

Ví dụ

CodeOutput
<b style="color: red">Chữ đậm màu đỏ</b>Chữ đậm màu đỏ
Giá gốc <s style="color: blue">1000.000</s>Giá 1000.000

4.2 Căn lề văn bản

Nếu bạn muốn căn lề trái, phải, giữa, căn đều hai bên cho đoạn văn, bạn có thể sử dụng cú pháp:

<div style="text-align: align">...</div>

Với align nhận các giá trị được thể hiện trong bảng dưới

alignGiải thích
centerCăn giữa
leftCăn trái (mặc định)
rightCăn phải
justifyCăn đều hai bên

Ví dụ

Căn trái
Căn giữa
Căn phải
Căn đều

Code HTML của ví dụ trên

<div style="text-align: left">Căn trái</div>
<div style="text-align: center">Căn giữa</div>
<div style="text-align: right">Căn phải</div>
<div style="text-align: justify;">Căn đều</div>

Với trường hợp căn đều, bạn cần phải thử với một đoạn văn dài mới cảm thấy sự khác biệt

4.3 Thay đổi kích thước

Trong trường hợp bạn muốn thay đổi kích thước văn bản, bạn có thể sử dụng cú pháp:

<tagname style="font-size: size">...</tagname>

Trong đó size là một đơn vị đo kích thước, thường là pixel, pixel càng lớn thì văn bản càng lớn.

Ví dụ:

Dòng chữ này lớn 20 pixel
Dòng chữ này lớn 18 pixel

Code HTML của ví dụ trên

<b style="font-size: 20px">Dòng chữ này lớn 20 pixel</b>
<b style="font-size: 18px">Dòng chữ này lớn 18 pixel</b>

V. Tổng kết

Việc căn chỉnh, định dạng một nội dung khoa học và đẹp mắt sẽ khiến người đọc cảm thấy dễ chịu khi trải nghiệm trang web của bạn, vì vậy mà thao tác định dạng văn bản là điều cực kỳ quan trọng và cần thiết. Mặt khác, văn bản lại là một trong những nội dung phổ biến trên các website hiện nay, điều này càng nhắc nhở bạn phải nắm rõ các cách căn chỉnh văn bản. Vì vậy mà mình muốn bạn hãy lưu ý lại bài viết này của mình, để khi cần sẽ có tài liệu để tra cứu.

Chúc các bạn học tập hiệu quả.