Các thẻ định dạng văn bản nằm trong html
Bài trước chúng ta đã tìm hiểu về các thẻ nằm trong thẻ <head></head> rồi, từ bây giờ chúng ta sẽ tìm hiểu các thẻ nằm trong <body></body>, vì đây là phần quan trọng nhất, nó sẽ hiện thị trên website của chúng ta.
Trong bài viết này mình sẽ giới thiệu cho các bạn các thẻ để định dạng tiêu đề, văn bản và 1 số thuộc tính style để định dạng như chữ to nhỏ, màu sắc, font chữ…
Nội dung
Các thẻ tiêu đề (Headline)
Trong HTML, các thẻ tiêu đề được định nghĩa bằng cặp thẻ từ <h1> cho đến <h6>, tương ứng với từng số, số càng nhỏ thì chữ càng lớn. Mình sẽ soạn thảo mẫu cho các bạn để dễ hình dung hơn:
See the Pen Serie học HTML cơ bản – Bài 5 by BlogIT.vn (@blogitvn) on CodePen.
Như bạn thấy thẻ h1 sẽ có cỡ chữ lớn nhất và ngược lại thẻ h6 sẽ có cỡ chữ nhỏ nhất. Khi bạn soạn thảo văn bản thì nên sử dụng các thẻ này để nhìn bài viết rất chuyên nghiệp và còn ảnh hưởng tốt đến SEO nữa.
Thẻ đoạn văn bản
Đoạn văn bản được định dạng bởi thẻ <p></p>. Các văn bản nằm trong cặp thẻ này được gọi là 1 đoạn văn bản và khi hết đoạn văn nó sẽ tự động xuống hàng:
See the Pen Serie học HTML cơ bản – Bài 5 on CodePen.
Các thẻ định dạng chữ viết
Các thẻ định dạng chữ viết ở đây như là chữ đậm, chữ nghiêng, chữ gạch chân, chữ gạch ngang…
See the Pen Serie học HTML cơ bản – Bài 5 by BlogIT.vn on CodePen.
Mình xin giải thích một số thẻ mới như sau:
<strong>: In đậm chữ viết.
<i>: In nghiêng chứ viết.
<u>: Gạch chân chữ viết.
<hr>: Thước kẻ ngang xuống dòng.
<br>: xuống dòng.
<strike>: Gạch ngang chữ viết.
<code>: Định dạng một đoạn mã code.
<mark>: Tô sáng chữ viết.
<em>: Nhấn mạnh câu.
Thẻ định dạng sẵn(preformatted)
Thẻ này được viết là <pre></pre>, pre được viết tắt của từ preformatted. Thẻ này được gọi là thẻ định dạng sẵn vì những nội dung trong thẻ này sẽ được trình duyệt định dạng mặc định các font chữ, màu sắc… Những đoạn văn trong thẻ <pre> khi xuống dòng thì không cần phải dùng đến <br>
Thẻ này thường được dùng để in ra 1 đoạn code, hay mảng khi mình dùng print_r trong php
See the Pen Serie học HTML cơ bản – Bài 5 by BlogIT.vn on CodePen.
Thuộc tính style để định dạng font chữ
Thông thường các định dạng font chữ này sẽ được viết bằng css để thuận tiện hơn nhưng bạn cũng có thể viết bên HTML bằng thuộc tính style.
Cấu trúc:
<tên thẻ style="tên thuộc tính: giá trị">
Ví dụ:
See the Pen Serie học HTML cơ bản – Bài 5 by BlogIT.vn on CodePen.
Màu chữ:
Bạn sử dụng thuộc tính color trong style, bạn có thể dùng tên tiếng anh của màu hoặc dùng mã HEX
Định dạng chữ <span style="color: red;">màu đỏ</span> Sử dụng mã HEX để định dạng <span style="color: #ff0000;">màu chữ</span>
Màu nền:
Bạn sử dụng thuộc tính backgroud trong style, cũng giống như màu chữ, bạn có thể dùng mã HEX
Định dạng <span style="background:#ffcccc; color:#007fff">Màu nền cho chữ</span>
Kích thước:
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, thông thường thì vẫn sử dụng px.
Định dạng <span style="font-size:24px">font 24px</span>
Font chữ
Nếu bạn muốn sử dụng font chữ khác so với font chữ mặc định thì 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.
Định dạng <span style="font-family: Arial">chữ Aria</span>
Lời kết
Ở phần này chúng ta tìm hiểu cũng khá nhiều về html rồi, những thứ ở trên đều rất cơ bản và quan trọng, có thể bạn chưa thể nhớ hết được nhưng hãy viết thật nhiều để làm quen, sau này bạn sẽ cảm thấy không khó khăn gì cả.