Chào mừng các bạn quay trở lại các bài học HTML cơ bản tại Giuseart.com Trong bài học này, mình giới thiệu với các bạn một số thẻ dùng để định dạng chữ viết và văn bản trên website.
Các thẻ định dạng văn bản
Thẻ tiêu đề và đoạn văn bản
Thẻ định dạng chữ viết
Ngoài ra, có một số thẻ mới mà các bạn cần lưu ý như:
<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>: Chèn dòng ngang trên tài liệu.
<mark>: Tô sáng chữ viết.
Thẻ trích dẫn văn bản (Quote)
Nếu bạn thường phải viết báo, phóng sự, bạn sẽ cần dùng nhiều thẻ trích dẫn này <quote>. Mục đích của thẻ này là trình bày một câu nói như một trích dẫn và có tùy chọn thêm tên tác giả cho chuyên nghiệp hơn. Thẻ trích dẫn được quy định là <quote> và tên tác giả được trích dẫn quy định là <cite>.
1 2 3 4 5 6 | <body> <quote> <p>Đoạn text mình đang gõ đây chả có ý nghĩa gì cả</p> <cite>-Giuseart-</cite> </quote> </body> |
và kết quả là:
Lưu ý: Thẻ chèn tên tác giả được trích dẫn <cite> chỉ nên đặt trong cặp thẻ <quote> thôi, không nên đặt tùy tiện nhé! Mặc định nội dung bên trong cặp thẻ <cite> sẽ được in nghiêng. Tuy nhiên, bạn có thể dùng CSS để trang trí lại cho phong cách sau cũng được.
Thẻ chèn chỉ số trên
Chỉ số trên chúng ta hay dùng trong lĩnh vực toán học, vật lý hay hóa học. Cặp thẻ <sup>…</sup> dùng để chèn các chỉ số trên như H2O. Ví dụ:
1 2 3 4 | <body style="text-align:center"> <h2>Giải bài toán sau:</h2><br> 6x<sup>2</sup> + 4x + 2 = 0 </body> |
và kết quả là:
Thẻ chèn chỉ số dưới
Tương tự như thẻ chèn chỉ số trên, thẻ chèn chỉ số dưới <sub>…</sub> cũng được sử dụng chủ yếu trong lĩnh vực toán học, vật lý hoặc hóa học. Dùng cặp thẻ <sub>…</sub> để viết những ký tự có dạng H2O. Ví dụ:
1 2 3 4 | <body style="text-align:center"> <h2>Kiến thức cơ bản về Amino-Amin Axit</h2><br> CH<sub>3</sub>NH<sub>2</sub> + H<sub>2</sub>O = CH<sub>3</sub>NH<sub>3</sub><sup>+</sup> + OH<sup>-</sup> </body> |
và kết quả là:
Thẻ giữ nguyên định dạng
Khi bạn trình bày một đoạn văn bản bằng các công cụ chỉnh sửa trực quan, đã điều chỉnh khoảng cách, màu sắc phù hợp rồi và muốn giữ nguyên định dạng đó khi file .html được mở trên trình duyệt mà không sợ bị nhảy chữ lung tung hoặc không như ý muốn, bạn có thể sử dụng cặp thẻ <pre>…</pre>. Ví dụ:
và kết quả là:
Thuộc tính Style để định dạng chữ viết
Mặc dù việc tô màu sắc cho chữ viết do CSS đảm nhiệm. Tuy nhiên, chỉ với một file HTML thông thường, bạn cũng có thể định dạng màu sắc cho chữ dựa vào thuộc tính Style. Thuộc tính style có thể đặt trong bất kỳ thẻ nào và sử dụng các giá trị là các thuộc tính CSS.
Cấu trúc viết thuộc tính style là: <tên thẻ style="tên thuộc tính: giá trị">.
Font-size: Kích thước chữ
Để thay đổi kích thước chữ, bạn sử dụng thuộc tính font-size và giá trị là số kèm đơn vị. Các đơn vị dùng cho font-size là %, pt hoặc px hoặc em. Đơn giản nhất, bạn cứ dùng px cho dễ. Ví dụ:
1 2 | <h1 style="font-size:30px">Đây là ví dụ font chữ có kích thước 30px</h1> <h1 style="font-size:25px">Còn đây là ví dụ font chữ có kích thước 25px</h1> |
và kết quả là:
Font-family: Font chữ
Nếu bạn muốn thay đổi font chữ cho văn bản trên website khác với font chữ mặc định, hãy sử dụng thuộc tính font-family với giá trị là tên font. Các tên font phổ biến như Arial, Helvetica Nueu, Roboto,… Ví dụ:
1 | <h1 style="font-family:Helvetica">Đây là tùy chọn font chữ Helvetica cho tiêu đề</h1> |
và kết quả là:
Ngoài ra, bạn cũng có thể khai báo hàng loạt các font cùng lúc để đề phòng trường hợp máy không có font này thì hệ thống sẽ tự động lấy font khác cho bạn.
1 | <h1 style="font-family:Helvetica, arial, roboto">Đây là tùy chọn nhiều font chữ cho tiêu đề/h1> |
Color: Thay đổi màu chữ
Thuộc tính color cho phép bạn điều chỉnh màu sắc của font chữ sử dụng. Giá trị của nó thường là tên màu trong tiếng Anh hoặc mã màu HEX.
1 | <span style="color: red">chữ màu đỏ</span> |
Text-decoration: Trang trí cho kiểu chữ
Bạn có thể gạch trên, gạch dưới, gạch giữa hoặc loại bỏ hết các định dạng cho văn bản bằng cách sử dụng thuộc tính text-decoration với các giá trị: gạch dưới, gạch trên, gạch ngang và none. Ví dụ:
1 | <span style="text-decoration: underline">chữ này bị loại bỏ hết định dạng/span> |
và kết quả là:
Còn một số thuộc tính nữa cũng thường dùng như border-style (kiểu đường viền); border-color (màu đường viền); background-color (màu nền) các bạn có thể tự tìm hiểu nhé!
Lời kết
Mình đã chỉ cho các bạn một số thẻ định dạng chữ và văn bản trong HTML rồi phải không? Một lời khuyên hữu ích là hãy tập viết thật nhiều để nhớ và giúp ích cho các bạn về sau rất nhiều nhé!
Bài trước: Bài 3: Định dạng trang HTML
Bài tiếp: Thẻ chèn hình ảnh trong HTML
Chia sẻ bài viết:
