[HTML cơ bản] Các thẻ định dạng chữ và văn bản trong HTML

Post on: 2016-09-14 11:12:49 | in: HTML

Các thẻ giúp định dạng, trang trí chữ viết/văn bản trong HTML thẻ tiêu đề, thẻ định dạng chữ viết, màu chữ, cỡ chữ, căn lề...

Sau khi đọc qua bài các thẻ khai báo cơ bản trong HTML chúng ta đã tìm hiểu xong về cặp thẻ <head>. Tiếp theo với bài này chúng ta sẽ bắt đầu tiếp xúc với nội dung chứa trong cặp thẻ <body> phần nội dung chính của tài liệu HTML.

Bài này của chúng ta sẽ giới thiệu về các thẻ HTML có chức năng định dạng chữ viết và văn bản trong tài liệu HTML như thẻ tiêu đề, thẻ định dạng chữ viết, thẻ trích dẫn, thuộc tính style...

Thẻ tiêu đề

Thẻ tiêu đề được là một thẻ cơ bản và quan trọng trong HTML nó nổi bật hơn với các phần tử còn lại trong văn bản, trong HTML có 6 thẻ tiêu đề lần lượt từ <h1> đến <h6>, như ví dụ dưới.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Xem code

Qua ví dụ trên có thể thấy thẻ <h1> có kích thước lớn nhất và giảm dần đến <h6>. Thông thường một tài liệu HTML chuẩn SEO có một thẻ <h1> chứa tiêu đề quan trọng nhất của bài, 2 thẻ <h2> trở lên hỗ trợ cho thẻ <h1> và các <h3>, <h4>, <h5>.

Đoạn văn bản

Đoạn văn bản được định nghĩa trong cặp thẻ <p></p>, phần lớn nội dung của trang web nằm trong cặp thẻ này. Nội dung văn bản nằm trong cặp thẻ này được hiểu là một đoạn văn bản sẽ được xuống dòng và cách nhau với tỷ lệ nhất định.

Các thẻ định dạng chữ viết

Trong một văn bản bạn để ý có thể có chữ được in đậm, in nghiêng thậm chí là ~~gạch ngang~~ ... ví dụ

<h3>Đây là các thẻ định dạng chữ viết</h3>
<strong>Đây là chữ in đậm</strong>
<i>Đây là chữ in nghiêng</i>
<u>Đây là chữ in gạch chân</u>
<strike>Đây là chữ in gạch ngang chữ viết</strike>
Xem code

Giải thích ví dụ
- Thẻ <strong>: In đậm chữ viết.
- Thẻ <i>: In nghiêng chữ viết.
- Thẻ <u>: Gạch chân chữ viết.
- Thẻ <strike>: Gạch ngang chữ viết.
Và một số thẻ khác nữa

Thuộc tính style định dạng chữ viết

Mặc dù việc làm đẹp cho website đã có các file css giải quyết, nhưng một văn bản HTML thông thường cũng có thể trang trí cho chữ viết bằng thuộc tính style. Thuộc tính style có thể đặt trong bất kỳ thẻ HTML nào và giá trị của các thuộc tính là các thuộc tính css như bình thường.

Cấu trúc thuộc tính <tên thẻ style="tên thuộc tính: giá trị">

Màu chữ

Để thiết lập màu chữ ta có thể sử dụng thuộc tính color, giá trị của nó có thể là tên tiếng anh hoặc mã HEX.

Màu nền

Cách sử dụng như màu chữ, để thiết lập sử dụng thuộc tính background-color

Kích thước chữ

Sử dụng thuộc tính font-size, và giá trị là số kèm theo đơn vị. Đơn vị có thể là px, %, pt, hoặc em nhưng thường sử dụng px.

<p style="font-size: 16px">Chữ có kích thước 16px</p>

Font chữ

Sử dụng font-family với giá trị là tên font chữ có trên máy tính, các font chữ cơ bản như Arial, Helvetica, Time New Roman, Verdana. Có thể để một hoặc nhiều kiểu chữ làm dự phòng.

<span style="font-family: Helvetica, Arial">Font chữ Arial</span>

Căn lề văn bản

Sử dụng thuộc tính text-align với giá trị là left,center, right hoặc justify.

Kết thúc

Vậy là chúng ta đã tìm hiểu kha khá về các thẻ định dạng văn bản và chữ viết rồi đó. Bài sau chúng ta sẽ đến với các thẻ tạo liên kết trong HTML nhé.