- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
Sử dụng các thẻ định dạng chữ viết và văn bản
Bắt đầu từ phần này, chúng ta sẽ cùng nhau làm việc trong cặp thẻ <body> </body> trong tài liệu web HTML để viết nội dung hiển thị ra ngoài website, và đây cũng sẽ là phần mà bạn sẽ làm việc nhiều nhất sau này vì thẻ <head> </head> chỉ cần đụng tới khi cần khai báo thông tin của tài liệu mà thôi.
Trong khuôn khổ bài viết này, mình sẽ giới thiệu chi tiết các thẻ HTML dành cho mục đích định dạng chữ viết và văn bản bên trong website, ví dụ như tiêu đề văn bản, in đậm, in nghiêng,…
Tiêu đề và đoạn văn bản
Tiêu đề (Headline) và đoạn văn bản (Paragraph) là hai thành phần mà bạn cần phân biệt để sau này sử dụng cho đúng. Bạn hãy hiểu rằng, tiêu đề văn bản nó giống như tên của từng chương trong một quyển sách vậy, nó sẽ được hiển thị to hơn nhằm nổi bật hơn.
Trong HTML, các thẻ tiêu đề sẽ được định nghĩa bằng cặp thẻ <hn>, trong đó n là số tự nhiên từ 1 đến 6 tương ứng với từng cấp độ, số càng nhỏ thì cấp độ càng lớn. Để dễ hiểu hơn, hãy thử soạn thảo một tài liệu HTML như dưới đây.
Kết quả:
Bạn thấy không, thẻ <h1> sẽ có kích thước to nhất và thẻ <h6> sẽ có kích thước nhỏ nhất. Nếu sau này bạn có soạn thảo một bài viết bằng HTML thì nhớ sử dụng các thẻ tiêu đề này để làm văn bản trở nên chuyên nghiệp hơn.
Còn đoạn văn bản thì nó sẽ được khai báo bằng cặp thẻ <p> </p>. Các văn bản nằm trong cặp thẻ này sẽ được hiểu là một đoạn văn bản, mỗi đoạn văn bản sẽ được xuống dòng và cách nhau với tỷ lệ nhất định. Ví dụ bên dưới:
Kết quả:
Các thẻ định dạng chữ viết
Đôi khi trong văn bản của bạn sẽ cần định dạng lại chữ viết như in đậm, tô nghiêng, gạch chân,…và đây là các thẻ HTML cho từng chức năng đó. Trước hết là hãy soạn một đoạn văn bản HTML như thế này:
Kết quả:
Mình xin giải thích một số thẻ mới như sau:
Trích dẫn (Quote) là một thẻ có thể bạn sẽ thường sử dụng nếu thường xuyên viết báo hay phóng sự, mục đích của nó là định dạng một câu nói như một câu trích dẫn và có thể định dạng thêm tên người trích dẫn một cách chuyên nghiệp hơn, thẻ trích dẫn được quy định là <quote> và tên tác giả trích dẫn được quy định là <cite>. Ví dụ:
Kết quả:
Lưu ý rằng thẻ <cite> thường chỉ nên dùng đặt trong thẻ <quote> thôi chứ dùng tùy tiện nó lại mất hay. Và mặc định thì các trình duyệt sẽ tự quy định nội dung nằm trong thẻ <cite> sẽ được in nghiêng, còn thẻ <quote> thì không có gì cả nhưng sau này bạn làm tới phần CSS rồi thì có thể tự thêm tí “phong cách” cho thẻ quote đẹp hơn.
Thẻ định dạng sẵn
Trong HTML hiện tại nó có một thẻ được gọi là thẻ định dạng sẵn (preformatted), thẻ này sẽ được viết là <pre> </pre>. Sở dĩ nó được gọi là thẻ định dạng sẵn vì mặc định trình duyệt đã tự động định dạng cho các nội dung nằm bên trong thẻ đó như kích thước chữ, khoảng cách, kiểu chữ.
Thẻ <pre> </pre> này thường được dùng để đăng một câu đối thoại hoặc in một đoạn mã để cho dễ phân biệt với các văn bản thông thường. Xem ví dụ:
Kết quả:
Ngoài ra cũng lưu ý rằng khi viết văn bản trong cặp thẻ <pre> thì việc xuống hàng thông thường vẫn sẽ được định dạng ra mà không cần thêm thẻ <p>.
Thuộc tính style để định dạng chữ viết
Mặc dù việc lên màu sắc trên website là do CSS đảm nhận, nhưng nếu là một văn bản HTML thông thường thì bạn vẫn có thể thêm màu sắc cho chữ viết bằng thuộc tính style. Thuộc tính style có thể đặt trong bất cứ thẻ nào và giá trị của thuộc tính đó là các thuộc tính của CSS (mình sẽ liệt kê một số thuộc tính hay dùng bên dưới). Ví dụ:
Kết quả:
Cấu trúc viết thuộc tính sẽ là <tên thẻ style="tên thuộc tính: giá trị">.
Màu chữ
Để thiết lập màu chữ, bạn có thể sử dụng thuộc tính color. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX.
Màu nền
Màu nền có cách thiết lập giống hệt màu chữ, tức là bạn có thể dùng giá trị là tên màu trong tiếng Anh hoặc mã màu HEX. Tên thuộc tính của màu nền là background-color.
Kích thước chữ
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 tùy thích, đơn giản nhất là dùng px.
Font chữ
Nếu bạn có nhu cầu sử dụng font chữ khác so với font chữ mặc định thì hãy 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.
Ngoài ra bạn có thể thêm font chữ dự phòng bằng cách khai báo nhiều tên font chữ khác nhau được ngăn cách bởi dấu phẩy, ví dụ:
Có nghĩa là nếu máy người đọc không có font chữ Helvetica thì nó sẽ sử dụng font chữ Arial.
Căn lề văn bản
Để canh lề, chúng ta sử dụng thuộc tính text-align với giá trị là left,center, right hoặc justify.
Lời kết
Có vẻ bài này chúng ta đã tìm hiểu hơi nhiều về HTML rồi phải không? Nhưng những gì mình đề cập ở trên đều rất quan trọng và bạn cần nên tập viết nhiều để làm quen với nó vì về sau nó sẽ giúp ích bạn nhiều trong công việc nói chung và việc làm web nói riêng.
Chúc các bạn thành công.
Bắt đầu từ phần này, chúng ta sẽ cùng nhau làm việc trong cặp thẻ <body> </body> trong tài liệu web HTML để viết nội dung hiển thị ra ngoài website, và đây cũng sẽ là phần mà bạn sẽ làm việc nhiều nhất sau này vì thẻ <head> </head> chỉ cần đụng tới khi cần khai báo thông tin của tài liệu mà thôi.
Tiêu đề và đoạn văn bản
Tiêu đề (Headline) và đoạn văn bản (Paragraph) là hai thành phần mà bạn cần phân biệt để sau này sử dụng cho đúng. Bạn hãy hiểu rằng, tiêu đề văn bản nó giống như tên của từng chương trong một quyển sách vậy, nó sẽ được hiển thị to hơn nhằm nổi bật hơn.
Trong HTML, các thẻ tiêu đề sẽ được định nghĩa bằng cặp thẻ <hn>, trong đó n là số tự nhiên từ 1 đến 6 tương ứng với từng cấp độ, số càng nhỏ thì cấp độ càng lớn. Để dễ hiểu hơn, hãy thử soạn thảo một tài liệu HTML như dưới đây.
HTML:
<h1>Headline level 1</h1>
<h2>Headline level 2</h2>
<h3>Headline level 3</h3>
<h4>Headline level 4</h4>
<h5>Headline level 5</h5>
<h6>Headline level 6</h6>Kết quả:
Còn đoạn văn bản thì nó sẽ được khai báo bằng cặp thẻ <p> </p>. Các văn bản nằm trong cặp thẻ này sẽ được hiểu là một đoạn văn bản, mỗi đoạn văn bản sẽ được xuống dòng và cách nhau với tỷ lệ nhất định. Ví dụ bên dưới:
Mã:
<p>Đây là một đoạn văn bản, mỗi đoạn văn bản sẽ được hiển thị một dòng riêng và được khai báo bằng thẻ <code><p></code>.</p>
<p>Đây cũng là một đoạn văn bản.</p>Kết quả:
Đôi khi trong văn bản của bạn sẽ cần định dạng lại chữ viết như in đậm, tô nghiêng, gạch chân,…và đây là các thẻ HTML cho từng chức năng đó. Trước hết là hãy soạn một đoạn văn bản HTML như thế này:
Mã:
<p>Trong tài liệu HTML, bạn có thể định dạng lại chữ viết như <strong>tô đậm</strong> chữ viết, hoặc có thể <i>in nghiêng</i>, hoặc cũng có thể <u>gạch chân</u> nó tùy thích. Một số trường hợp bạn cũng có thể sẽ cần <strike>gạch ngang</strike> chữ viết.</p>
<hr>
<p>Ở trên là một đoạn kẻ ngang được khai báo bằng thẻ <code><hr></code>.</p>
<p>Nếu bạn cần nhấn mạnh gì đó, bạn có thể <em>viết như thế này</em>.</p>Kết quả:
- <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>: Thước kẻ ngang trên tài liệu.
- <mark>: Tô sáng chữ viết.
Trích dẫn (Quote) là một thẻ có thể bạn sẽ thường sử dụng nếu thường xuyên viết báo hay phóng sự, mục đích của nó là định dạng một câu nói như một câu trích dẫn và có thể định dạng thêm tên người trích dẫn một cách chuyên nghiệp hơn, thẻ trích dẫn được quy định là <quote> và tên tác giả trích dẫn được quy định là <cite>. Ví dụ:
Mã:
<quote>
<p>Thoạt nhìn đoạn văn này tưởng nó không có nghĩa, nhưng khi nhìn kỹ lại thì đúng là chẳng có nghĩa gì.</p>
<cite>- VNXF</cite>
</quote>Kết quả:
Thẻ định dạng sẵn
Trong HTML hiện tại nó có một thẻ được gọi là thẻ định dạng sẵn (preformatted), thẻ này sẽ được viết là <pre> </pre>. Sở dĩ nó được gọi là thẻ định dạng sẵn vì mặc định trình duyệt đã tự động định dạng cho các nội dung nằm bên trong thẻ đó như kích thước chữ, khoảng cách, kiểu chữ.
Thẻ <pre> </pre> này thường được dùng để đăng một câu đối thoại hoặc in một đoạn mã để cho dễ phân biệt với các văn bản thông thường. Xem ví dụ:
Mã:
<p>
To learn AJAX, you must be <mark>familiar</mark> with the XML<wbr>Http<wbr>Request Object.
</p>Kết quả:
Thuộc tính style để định dạng chữ viết
Mặc dù việc lên màu sắc trên website là do CSS đảm nhận, nhưng nếu là một văn bản HTML thông thường thì bạn vẫn có thể thêm màu sắc cho chữ viết bằng thuộc tính style. Thuộc tính style có thể đặt trong bất cứ thẻ nào và giá trị của thuộc tính đó là các thuộc tính của CSS (mình sẽ liệt kê một số thuộc tính hay dùng bên dưới). Ví dụ:
Mã:
<p>
<span style="color: white; background-color: red">Đây là một văn bản có thuộc tính style</span>. Nếu bạn muốn dùng nhiều style trong một đoạn văn thì có thể sử dụng thẻ <code><span></code> để thêm <span style="color: blue">nhiều style</span> khác nhau.
</p>Kết quả:
Màu chữ
Để thiết lập màu chữ, bạn có thể sử dụng thuộc tính color. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX.
Mã:
<span style="color: red">chữ màu đỏ</span>Màu nền
Màu nền có cách thiết lập giống hệt màu chữ, tức là bạn có thể dùng giá trị là tên màu trong tiếng Anh hoặc mã màu HEX. Tên thuộc tính của màu nền là background-color.
Mã:
<span style="color: white; background-color: red">Chữ có nền màu đỏ và màu chữ là trắng</span>Kích thước chữ
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 tùy thích, đơn giản nhất là dùng px.
Mã:
<span style="font-size: 32px">Chữ có kích thước 32px</span>Font chữ
Nếu bạn có nhu cầu sử dụng font chữ khác so với font chữ mặc định thì hãy 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.
Mã:
<span style="font-family: Arial">Font chữ Arial</span>Ngoài ra bạn có thể thêm font chữ dự phòng bằng cách khai báo nhiều tên font chữ khác nhau được ngăn cách bởi dấu phẩy, ví dụ:
Mã:
<span style="font-family: Helvetica, Arial">Font chữ Arial</span>Có nghĩa là nếu máy người đọc không có font chữ Helvetica thì nó sẽ sử dụng font chữ Arial.
Căn lề văn bản
Để canh lề, chúng ta sử dụng thuộc tính text-align với giá trị là left,center, right hoặc justify.
Mã:
<span style="text-align: center">Canh giữa văn bản</span>Lời kết
Có vẻ bài này chúng ta đã tìm hiểu hơi nhiều về HTML rồi phải không? Nhưng những gì mình đề cập ở trên đều rất quan trọng và bạn cần nên tập viết nhiều để làm quen với nó vì về sau nó sẽ giúp ích bạn nhiều trong công việc nói chung và việc làm web nói riêng.
Chúc các bạn thành công.
Nguồn: thachpham.com
Bài viết liên quan
Bài viết mới
