Khi trình bày một trang nội dung trong website, dù đó là bài viết hay là mô tả sản phẩm, thì nó cũng cần phải được trình bày rõ ràng, đẹp mắt và dễ đọc. Để được như vậy thì chúng ta cần phải định dạng cỡ chữ, tiêu đề, in đậm, in nghiêng, gạch chân,… tương tự như soạn văn bản trong Word.
Trong bài viết này chúng ta sẽ học về các thẻ định dạng câu chữ và văn bản trong HTML để trình bày một trang html rõ ràng đẹp mắt.
Abstract blue green circle digital technology background, futuristic structure elements concept background design
Thẻ tiêu đề
Các thẻ tiêu đề dùng để dịnh dạng các tiêu đề trong nội dung html, mục đích là làm nổi bật các tiêu đề, chia nhỏ các chương mục nội dung hoặc để tạo mục lục tự động trong bài viết.
Trong html có 6 thẻ định dạng tiêu đề, thừ h1 đến h6 với các kích thước chữ to và nhỏ dần theo thứ tự. Chúng ta cũng có thể thay đổi định dạng cho từng thẻ h (thay đổi màu sắc, kích cỡ, in đậm, in nghiêng,…) bằng cách thêm chúng vào CSS và định dạng lại. Để sử dụng, chúng ta sẽ bỏ câu tiêu đề vào cặp thẻ <h1>….</h1>. Để hiểu rõ hơn, hãy cùng xem ví dụ dưới đây về thẻ h.
See the Pen
by Ken Halink (@kenhalink)
on CodePen.0
Đoạn văn
Đoạn văn là những đoạn nội dung dài trong bài viết. Để định dạng đoạn văn, chúng ta sẽ bỏ nó vào cặp thẻ <p>…</p>. Mỗi đoạn văn nằm trong thẻ <p> sẽ được xuống hàng và cách nhau một khoảng giúp cho chúng rõ ràng dễ đọc hơn. Xem ví dụ học html định dạng đoạn văn sau:
See the Pen
by Ken Halink (@kenhalink)
on CodePen.0
Các thẻ định dạng chữ
Trong một đoạn văn, thỉnh thoảng chúng ta cần định dạng font chữ, như là in đậm, in nghiêng, gạch chân,… Dưới đây là một số thẻ định dạng chữ:
<strong>: In đậm<i>: In nghiêng<u>: Gạch chân<strike>: Gạch ngang<em>: Nhấn mạnh câu<code>: Định dạng cho một đoạn mã nào đó.<hr>: Một gạch ngang ngăn cách các đoạn<mark>: Làm nổi bật
Dưới đây là các ví dụ:
See the Pen
Code văn bản HTML by Ken Halink (@kenhalink)
on CodePen.0
Trên đây là những định dạng câu chữ thường dùng, chúng rất dễ sử dụng cũng như dễ ghi nhớ. Bạn nên để chúng trong đầu và lôi ra dùng ngay khi cần.
Thuộc tính chữ
Ngoài các thẻ định dạng ở trên, nếu muốn thay đổi màu sắc, cỡ chữ, font chữ,… thì chúng ta phải sử dụng style để khai báo thuộc tính. Cách sử dụng style khác với sử dụng thẻ, nó được dùng bằng cách lồng vào 1 thẻ khác, ví dụ thẻ <h1 style=” “>, thẻ <p style=” “> hoặc bạn cũng có thể định dạng thuộc tính chữ cho 1 đoạn ngắn trong một đoạn văn dài bằng cách dùng thẻ <span stlye=” “></span>. Các thuộc tính html được bỏ trong ” ” và cách nhau bằng dấu ;
Trong style chúng ta sẽ khai báo các thuộc tính như sau:
color:thay đổi màu sắc chữ. Chúng ta có thể sử dụng tên màu trong tiếng Anh (red, black, blue,…) hoặc dùng mã màu HEX trong thiết kế (ví dụ #ffffff, #cecece)
font-size: thay đổi kích thước chữ. Kích thước font chữ có thể dùng px, %, pt hoặc em tuỳ ý.
background-color: thay đổi màu nền.
text-align: căn lề văn bản, bao gồm left, center, right, justify.
Xem ví dụ sau:
See the Pen
by Ken Halink (@kenhalink)
on CodePen.0
Kết bài
Trong bài này bạn đã học được các cách định dạng tiêu đề, đoạn văn và câu chữ trong html. Chúng rất dễ sử dụng và dễ nhớ, hãy cố gắng ghi nhớ trong đầu để khi soạn thảo html chúng ta code nhanh và chính xác hơn nhé.
