2-Định dạng văn bản trong HTML
Trong bài hôm nay chúng ta sẽ tìm hiểu các thẻ dùng để định dạng văn bản trên một trang web.
Last updated
Trong bài hôm nay chúng ta sẽ tìm hiểu các thẻ dùng để định dạng văn bản trên một trang web.
Last updated
Khi truy cập vào các website, chúng ta thấy văn bản xuất hiện ở khắp mọi nơi với nhiều kích thước, màu sắc hay định dạng khác nhau.
Vậy làm thế nào để trình bày 1 văn bản trên website? Chúng ta sẽ cùng tìm hiểu trong tiết học ngày hôm nay.
Thẻ tiêu đề thường xuyên được sử dụng trong tài liệu HTML. Khi truy cập vào các website các bạn sẽ nhìn thấy các tiêu đề như tên bài viết được hiển thị to và in đậm.
Một trong các cách sử dụng thường thấy là sử dụng thẻ tiêu đề.
Ví dụ:
Ở ví dụ trên, thẻ tiêu đề được dùng để hiển thị tiêu đề của bài viết là “HLV Park Hang Seo trả lời họp báo sau trận thắng Indonesia”.
Cấu trúc thẻ khi chúng ta xem source code qua công cụ devtool:
Thẻ tiêu đề cho phép bạn định nghĩa, đánh dấu cấu trúc và nội dung của trang web rõ ràng.
Thẻ tiêu đề trong HTML bao gồm 6 loại thẻ từ thẻ <h1> đến thẻ <h6>
Có 6 cú pháp:
Trong thẻ thẻ <h1> sẽ trả về kết quả lớn nhất và <h6> trả về kết quả nhở nhất.
Chú ý:
Thẻ heading là cặp thẻ đóng mở nên cần có đầy đủ thẻ mở <h1-6> và thẻ đóng </h1-6>.
Chúng ta không sử dụng thẻ tiêu đề để bôi đậm hoặc tăng cỡ chữ.
Để hiển thị 1 đoạn văn bản trong website, chúng ta dùng thẻ <p> để định nghĩa.
Cú pháp:
Ví dụ:
Ở ví dụ trên trong phần thẻ <p>, chúng ta nhận thấy rằng khi enter xuống dòng giữa 2 đoạn trong code, nhưng khi hiển thị kết quả thì nội dung vẫn nằm trên một dòng. Điều đó có nghĩa là chúng ta không thể dùng enter để xuống dòng như trong word đối với 1 đoạn văn bản trên HTML.
Thẻ <br> có tác dụng để xuống dòng (ngắt dòng) trong HTML. Thẻ <br> là thẻ đơn (không phải là cặp thẻ đóng mở).
Ví dụ:
Để tạo 1 đường kẻ ngang giúp ngăn cách/ngắt theo chủ đề trong trang HTML, chúng ta sử dụng thẻ <hr>. Cũng giống như thẻ <br> thẻ <hr> là thẻ đơn.
Các thuộc tính của thẻ <hr>
Size: độ dày của đường kẻ tính bằng px
Width: độ dài của đường kẻ tính bằng px hoặc %
Color: màu của đường kẻ, sử dụng tên màu hoặc mã màu
Align: Căn chỉnh vị trí của đường kẻ. Có 3 giá trị: left (trái), center (giữa), right (phải)
Ví dụ:
Trong ví dụ trên đường kẻ được tạo ra có độ dày 5px, dài 500px, màu xanh nước biển và được căn trái (mặc định).
Khi sử dụng word để soạn thảo văn bản, chúng ta đã rất quen thuộc với việc trình bày văn bản để rõ ràng mạch lạc như in đậm, in nghiêng, gạch chân… Vậy trong thiết kế web, để in đậm, in nghiêng, gạch chân… chúng ta cũng có các thẻ tương ứng để có thể thực hiện được điều này.
Các thẻ định dạng văn bản thường dùng:
Thẻ in đậm văn bản <b>, in nghiêng văn bản <i>, thẻ gạch chân văn bản <u>, thẻ gạch ngang văn bản <s>. Các thẻ này là cặp thẻ đóng mở nên cần có thẻ mở và thẻ đóng.
Thẻ <pre> là cặp thẻ đóng mở để chỉ định dạng văn bản được định dạng trước.
Cú pháp:
Thẻ <sup> để tạo văn bản có kích thước nhỏ hơn văn bản bình thường và nằm ở vị trí khoảng từ phân nửa trở lên so với văn bản bình thường (Dạng phương trình bậc 2 chúng ta đã biết). Nếu muốn văn bản có kích thước nhỏ hơn nằm ở phân nửa dưới trở xuống chúng ta dùng thẻ <sub> (dạng sử dụng viết công thức hóa học đã biết).
Cú pháp:
Trong trình bày nội dung, bạn có thể sẽ phải sử dụng kiểu trình bày dạng danh sách trong đó được phân loại thành: danh sách có tứ tự, danh sách không có thứ tự và danh sách tự định nghĩa.
Ví dụ về danh sách có thứ tự:
Cú pháp:
Để bắt đầu một danh sách có thứ tự chúng ta dung thẻ cặp thẻ ol, từng nội dung bên trong được nằm trong thẻ <li>.
Một số thuộc tính của thẻ ol
Thuộc tính type nhận các giá trị: 1, A, a, I, I để thay đổi các kiểu thứ tự hiển thị khác nhau.
Thuộc tính reversed để đảo ngược danh sách.
Thuộc tính start để chỉ định danh sách bắt đầu từ số nào.
Ví dụ về danh sách không có thứ tự
Cú pháp
Để bắt đầu một danh sách không có thứ tự chúng ta dùng thẻ cặp thẻ ul, từng nội dung bên trong được nằm trong thẻ <li>.
Một số thuộc tính của thẻ ul
Thuộc tính type nhận các giá trị như: disc, circle, square, none để thay đổi các kiểu hiển thị danh sách.
Ví dụ về danh sách định nghĩa
Cú pháp:
Trong đó:
Thẻ <dl> để định nghĩa 1 danh sách
Thẻ <dt> chứa thuật ngữ cần định nghĩa hay giải thích
Thẻ <dd> chứa định nghĩa của thuật ngữ trong thẻ dt
Chúng ta có thể tạo 1 danh sách khác nằm trong một thành phần của danh sách khác.
Ví dụ
Cú pháp
