Các thẻ định dạng chữ viết và văn bản
- Thứ hai - 29/08/2016 00:41
- In ra
- Đóng cửa sổ này
Bắt đầu từ bài viết này, chúng ta sẽ cùng nhau làm việc trong cặp thẻ <body> </body> trong tài liệu web HTML để viết nội dung hiển thị ra ngoài website, và đây cũng sẽ là phần mà hầu như website nào cũng có. Phần <head> </head> chỉ cần dùng tới khi cần khai báo thông tin của tài liệu html.
Cũng giống như trong việc trình bày văn bản trên Word hay trình soạn thảo văn bản nào. Trong tài liệu HTML cũng có các thẻ dành cho mục đích định dạng chữ viết và văn bản bên trong website, ví dụ như tiêu đề văn bản, in đậm, in nghiêng, màu sắc, kích thước…
Mục lục nội dung
Tiêu đề và đoạn văn bản
Tiêu đề (Headline) và đoạn văn bản (Paragraph) là hai thành phần mà bạn cần phân biệt để sau này sử dụng cho đúng. Bạn hãy hiểu rằng, tiêu đề văn bản nó giống như tên của từng chương trong một quyển sách vậy, nó sẽ được hiển thị to hơn nhằm nổi bật hơn.
Thẻ Heading dùng để tạo tiêu đề chính và các tiêu đề phụ cho một trang web, nó có tác dụng nhấn mạnh tiêu đề mà còn có tác dụng trong SEO.
Ví dụ: Xem demo
<h1>Đây là tiêu đề H1</h1>
<h2>Đây là tiêu đề H2</h2>
<h3>Đây là tiêu đề H3</h3>
<h4>Đây là tiêu đề H4</h4>
<h5>Đây là tiêu đề H5</h5>
<h6>Đây là tiêu đề H6</h6>
Bạn thấy không, thẻ <h1> sẽ có kích thước to nhất và thẻ <h6> sẽ có kích thước nhỏ nhất. Nếu sau này bạn có soạn thảo một bài viết bằng HTML thì nhớ sử dụng các thẻ tiêu đề này để làm văn bản trở nên chuyên nghiệp hơn.
Còn đoạn văn bản thì nó sẽ được khai báo bằng cặp thẻ <p> </p>. Các văn bản nằm trong cặp thẻ này sẽ được hiểu là một đoạn văn bản, mỗi đoạn văn bản sẽ được xuống dòng và cách nhau với tỷ lệ nhất định
Ví dụ: Xem demo
<p>Đây là một đoạn văn bản, mỗi đoạn văn bản sẽ được hiển thị một dòng riêng và được khai báo bằng thẻ <code>< p ></code>.</p>
<p>Đây cũng là một đoạn văn bản.</p>
Các thẻ định dạng chữ viết
Đôi khi trong văn bản của bạn sẽ cần định dạng lại chữ viết như in đậm, tô nghiêng, gạch chân,…và đây là các thẻ HTML cho từng chức năng đó. Trước hết là hãy soạn một đoạn văn bản HTML như thế này:
Xem ví dụ demo:
<p>Trong tài liệu HTML, bạn có thể định dạng lại chữ viết như <strong>tô đậm</strong> chữ viết, hoặc có thể <i>in nghiêng</i>, hoặc cũng có thể <u>gạch chân</u> nó tùy thích. Một số trường hợp bạn cũng có thể sẽ cần <strike>gạch ngang</strike> chữ viết.</p>
<hr>
<p>Ở trên là một đoạn kẻ ngang được khai báo bằng thẻ <code>< hr ></code>.</p>
<p>Nếu bạn cần nhấn mạnh gì đó, bạn có thể <em>viết như thế này</em>.</p>
Ý nghĩa các thẻ như sau:
- <strong>: In đậm chữ viết.
- <i>: In nghiêng chứ viết.
- <u>: Gạch chân chữ viết.
- <strike>: Gạch ngang chữ viết.
- <em>: Nhấn mạnh câu.
- <code>: Định dạng cho một đoạn mã nào đó.
- <hr>: Thước kẻ ngang trên tài liệu.
- <mark>: Tô sáng chữ viết.
Thẻ định dạng sẵn
Trong HTML hiện tại nó có một thẻ được gọi là thẻ định dạng sẵn (preformatted), thẻ này sẽ được viết là <pre> </pre>. Sở dĩ nó được gọi là thẻ định dạng sẵn vì mặc định trình duyệt đã tự động định dạng cho các nội dung nằm bên trong thẻ đó như kích thước chữ, khoảng cách, kiểu chữ.
Thẻ <pre> </pre> này thường được dùng để đăng một câu đối thoại hoặc in một đoạn mã để cho dễ phân biệt với các văn bản thông thường.
Thử biên tập 1 đoạn code như sau và xem kết quả trên trình duyệt:
<p>
Học HTML <mark>không khó</mark> với tài liệu chia sẽ tại <wbr>học mót<wbr>.
</p>
Ngoài ra cũng lưu ý rằng khi viết văn bản trong cặp thẻ <pre> thì việc xuống hàng thông thường vẫn sẽ được định dạng ra mà không cần thêm thẻ <p>.
Thuộc tính style để định dạng chữ viết
Mặc dù việc lên màu sắc trên website là do CSS đảm nhận, nhưng nếu là một văn bản HTML thông thường thì bạn vẫn có thể thêm màu sắc cho chữ viết bằng thuộc tính style. Thuộc tính style có thể đặt trong bất cứ thẻ nào và giá trị của thuộc tính đó là các thuộc tính của CSS (mình sẽ liệt kê một số thuộc tính hay dùng bên dưới).
Một đoạn code mẫu:
<p>
<span style="color: white; background-color: blue">Đây là một đoạn văn bản có thuộc tính style</span>. Nếu bạn muốn dùng nhiều style trong một đoạn văn thì có thể sử dụng thẻ <code><span></code> để thêm <span style="color: red">nhiều style</span> khác nhau.
</p>
Cấu trúc viết thuộc tính sẽ là <tên thẻ style="tên thuộc tính: giá trị">.
Màu chữ
Để thiết lập màu chữ, bạn có thể sử dụng thuộc tính color. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX.
| 01 | <span style="color: red">chữ màu đỏ</span> |
Màu nền
Màu nền có cách thiết lập giống hệt màu chữ, tức là bạn có thể dùng giá trị là tên màu trong tiếng Anh hoặcmã màu HEX. Tên thuộc tính của màu nền là background-color.
| 01 | <span style="color: white; background-color: red">Chữ có nền màu đỏ và màu chữ là trắng</span> |
Kích thước chữ
Kích thước chữ bạn có thể sử dụng thuộc tính font-size và giá trị là số kèm đơn vị. Bạn có thể sử dụng đơn vị px, %, pt hoặc em tùy thích, đơn giản nhất là dùng px.
| 01 | <span style="font-size: 16px">Chữ có kích thước 16px</span> |
Font chữ
Nếu bạn có nhu cầu sử dụng font chữ khác so với font chữ mặc định thì hãy dùng thuộc tính font-family với giá trị là tên font chữ có trên máy tính. Một số tên font chữ phổ biến nhất là Arial, Helvetica, Time New Roman, Verdana.
| 01 | <span style="font-family: Arial">Font chữ Arial</span> |
Ngoài ra bạn có thể thêm font chữ dự phòng bằng cách khai báo nhiều tên font chữ khác nhau được ngăn cách bởi dấu phẩy, ví dụ:
| 01 | <span style="font-family: Helvetica, Arial">Font chữ Arial</span> |
Có nghĩa là nếu máy người đọc không có font chữ Helvetica thì nó sẽ sử dụng font chữ Arial.
Căn lề văn bản
Để canh lề, chúng ta sử dụng thuộc tính text-align với giá trị là left,center, right hoặc justify.
| 01 | <span style="text-align: center">Canh giữa văn bản</span> |
Lời kết
Vậy là bài này chúng ta đã tìm hiểu về rất nhiều thẻ HTML rồi. Tuy còn rất nhiều thẻ không được đề cập đến và đều rất quan trọng do đó bạn cần nên tập viết nhiều để làm quen với nó vì về sau nó sẽ giúp ích bạn nhiều trong công việc nói chung và việc làm web nói riêng.
Chắc chắn sẽ có những bài thực hành cụ thể hơn, sau loạt bài lý thuyết, nên bạn cũng đừng quá lo lắng. hãy tìm hiểu thêm các thẻ HTML khác tại đây