Học HTML – Bài 4: Định dạng văn bản và chữ viết trong HTML

6304 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

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

Mời xem tại đây

Thẻ định dạng chữ viết

Mời xem tại đây

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

và kết quả là:

Thẻ chèn trích dẫn trong html
Thẻ chèn trích dẫn trong html

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ụ: 

và kết quả là:

thẻ chèn chỉ số trên sup
Sử dụng thẻ <sup> để viết những bài toán giải phương trình toán học

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ụ:

và kết quả là:

Thẻ chèn chỉ số dưới trong html
Thẻ chèn chỉ số dưới trong html để viết các công thức hóa học

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ụ:

thẻ pre trong html

và kết quả là:

sử dụng thẻ pre để giữ nguyên định dạng soạn thảo
Sử dụng thẻ <pre> để giữ nguyên định dạng soạn thảo

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%, pt hoặc px hoặc em. Đơn giản nhất, bạn cứ dùng px cho dễ. Ví dụ:

và kết quả là:

font-size

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ụ:

và kết quả là:

font-family
Tùy chọn font Helvetica cho tiêu đề

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.

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.

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ụ:

và kết quả là:

text-decoration

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

5/5 - (1 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Bài viết mới cập nhật:

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *