Cách căn chỉnh văn bản trong html

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
• II. Các thẻ định dạng văn bản
• III. Các thẻ định dạng đoạn văn bản
• IV. Tự định dạng thông qua thuộc tính style
  • 4.1 Định dạng màu chữ
  • 4.2 Căn lề văn bản
  • 4.3 Thay đổi kích thước
• V. Tổng kết

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 5Heading 6

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

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

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ẻ h2, 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ý.

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.

Code	Output
Dòng chữ này đậm	Dòng chữ này đậm
Dòng chữ này nghiêng	Dòng chữ này nghiêng
Dòng chữ này có gạch chân	Dòng chữ này có gạch chân
Dòng chữ này bị gạch ngang	Dòng chữ này bị gạch ngang
C2H4	C2H4
a2 + b2	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ẻ

...

, hay quản lý việc xuống dòng bằng thẻ
.

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ẻ
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ẻ

...

. 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ẻ
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:

...

Ví dụ

Code	Output
Chữ đậm màu đỏ	Chữ đậm màu đỏ
Giá gốc 1000.000	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:

...

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

align	Giải thích
center	Căn giữa
left	Căn trái [mặc định]
right	Căn phải
justify	Că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

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

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:

...

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

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

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ả.

• Bài 1: Ngôn ngữ HTML là gì?
• Bài 2: Các khái niệm thường gặp trong HTML
• Bài 3: Cấu trúc trang HTML
• Bài 4: Các thẻ định dạng văn thường gặp trong HTML
• Bài 5: Chèn liên kết vào trang web với thẻ a trong HTML
• Bài 6: Chèn hình ảnh vào trang web với thẻ img trong HTML
• Bài 7: Chèn một trang web khác vào trang web của mình với thẻ iframe trong HTML
• Bài 8: Tạo bảng với HTML
• Bài 9: Tạo một danh sách với HTML
• Bài 10: Các thẻ input, thẻ tạo form nhập liệu trong HTML
• Bài 11: Kết thúc serie học HTML cơ bản