Đinh dạng cho các Paragraph (Học HTML)

Trong bài viết trước, bạn đã soạn thảo ra các đoạn văn. Trong bài viết này của mình, mình sẽ chia sẻ cho các bạn biết được một số thẻ giúp định dạng đoạn văn giống như đoạn văn mẫu.

1. Các thẻ định dạng văn bản

Ngắt dòng:

Bạn đang mắc phải một vấn đề làm sao ngắt được các câu xuống dòng trong cùng một đoạn văn. Dưới đây là 2 cách giúp bạn ngắt dòng:

Thứ nhất là sử dụng thẻ <br/>

br là viết tắt của chữ break để thực hiện chức năng ngắt dòng. Khi trình duyệt đọc thẻ này, lập tức nó sẽ ngắt thành 1 dòng mới cho ký tự theo sau nó. Ví dụ đoạn mã sau:

<html>
<head>
</head>
<body>
Màu tím hoa sim màu tím nhớ<br/>
Màu tím lòng người tím ước mơ<br/>
Ôi tím thủy chung màu đẹp quá<br/>
Màu tím chiều tà tím ý thơ<br/>
</body>
</html>

Kết quả hiển thị sẽ là:

Và như các bạn thấy, thẻ <br> là một thẻ rỗng, nó không có content và có thể không cần thẻ đóng nhưng ta nên theo chuẩn nghiêm ngặt là có đóng như cú pháp trên đó chính là <br/>

Thứ hai là sử dụng thẻ <pre>

Thẻ <pre>, được viết tắt bởi từ pre-formatted, nghĩa là content, hay nội dung văn bản trong thẻ <pre> sẽ được giữ nguyên định dạng khi trình duyệt hiển thị. Ví dụ đoạn mã sau đây:

<!doctype html>
<html>
<head>
</head>
<body>
<pre>
Màu tím hoa sim màu tím nhớ
Màu tím lòng người tím ước mơ
Ôi tím thủy chung màu đẹp quá
Màu tím chiều tà tím ý thơ
</pre>
</body>
</html>

Kết quả hiển thị:

Trong đoạn Paragraph trên, ta đã định dạng đoạn văn có những chỗ ngắt dòng thì khi hiển thị ra trình duyệt, nội dung vẫn giữ nguyên định dạng đó. Nghĩa là ta có kết quả hiển thị giống như sử dụng thẻ <br/>.

Nên lựa chọn sử dụng <br/> hoặc <pre>

Vậy chúng ta nên chọn cách nào? Như đã ví dụ ở trên, mỗi cách đều có ý nghĩa riêng. Thông thường ta sẽ sử dụng cách thứ nhất nếu như văn bản ta không có gì đặc biệt, chỉ đơn giản ta muốn ngắt dòng.

Và điều đặc biệt là nó không những có chức năng ngắt dòng của văn bản mà ngắt dòng cho mọi nội dung khác như hình ảnh và video…

Còn đối với thẻ <pre>, như tên gọi của nó thì ta dành riêng cho việc định dạng văn bản. Có những đoạn văn có kiểu hiển thị khá đặc biệt, ví dụ như bài thơ, các câu trích dẫn thì ta nên sử dụng thẻ <pre>, thứ nhất về mặt ý nghĩa thì nó đúng với chức năng thứ hai ta có thể tiết kiệm thời gian và không gian cho việc xử lý ngắt dòng cũng như xử lý khoảng trắng đối với những loại văn bản này.

Lưu ý: Thẻ <pre> chỉ giữ các khoảng trắng và ngắt dòng của đoạn văn được viết trong mã nguồn html. Do đó, các bạn có thể viết các thẻ html khác vào trong nó.

Thẻ Blockquote <blockquote>

Đây là thẻ có chức năng cho bạn trích dẫn một câu nói của ai đó hoặc từ nguồn nào đó mà bạn phải giữ nguyên văn, không được thay đổi một từ nào. Ví dụ sau đây:

<!doctype html>
<html>
<head>
</head>
<body>
<blockquote>
" Nếu bạn sinh ra trong nghèo khó, đó không phải là lỗi của bạn.
Nhưng nếu bạn chết trong nghèo khó, thì đó là lỗi của bạn."<small>Bill Gates</small>
</blockquote>
</body>
</html>

Kết quả hiển thị:

Như các bạn thấy câu trích dẫn ở trên sử dụng thẻ <blockquote>. Và bạn cần phải nắm rõ ý nghĩa, chức năng của từng thẻ để sử dụng đúng mục đích không chỉ vì hình thức hiển thị mà quan trọng hơn là sau này để lập trình hay tương tác với website khác.

Về hình thức hiển thị, ta có thể thay đổi dễ dàng. Mình khuyến khích các bạn nắm rõ mục đích sử dụng của từng loại thẻ.

Thẻ in đậm <b>

Ta có một đoạn văn bản sau: Làm thế nào để làm một dòng chữ in đậm?

Để làm được như trên ta sẽ sử dụng thẻ <b>, được viết tắt là bold, nghĩa là in đậm. Content, tức là nội dung đặt trong thẻ <b> nãy sẽ được in đậm lên so với các chữ khác. Và ta sẽ có mã nguồn cho việc in đậm chữ “Chúc mừng sinh nhật” như sau:

<!doctype html>
<html>
<head>
</head>
<body>
<b>Chúc mừng sinh nhật
</b>
</body>
</html>

Thẻ in nghiêng <i>

Ngoài định dạng in đậm ra ta còn thấy những chữ in nghiêng, ngay lập tức ta sẽ có thẻ <i>, được viết tắt là italic để thực hiện chức năng này, cách dùng thì giống như thẻ <b> vậy. Ví dụ sau đây:

<!doctype html>
<html>
<head>
</head>
<body>
<i>Chúc mừng sinh nhật
</i>
</body>
</html>

Thẻ nhấn mạnh câu từ <em>

Trong html, ta có một thẻ dùng để nhấn mạnh câu, chữ để làm nổi bật nó trong đoạn văn, thẻ đó gọi là Emphasis, có cú pháp như sau:

<!doctype html>
<html>
<head>
</head>
<body>
<em>Chúc mừng sinh nhật
</em>
</body>
</html>

Kết quả hiển thị sẽ là:

Thẻ nhấn mạnh câu từ <strong>

Tương tự như thẻ <em>, ta có thẻ <strong> dùng để nhấn mạnh câu từ, hoặc chữ trong đoạn văn.

Nhưng thể hiện của thẻ <strong> là in đậm vì vậy ta lại dễ nhầm lẫn với thẻ bold. Vì thế, hãy phân biệt rõ ràng về chức năng để sử dụng

So sánh thẻ <b> và <strong>,và thẻ <i> và <em>

Thẻ <b> và <i> chỉ đơn giản là định dạng văn bản, còn thẻ <em> và <strong> là ta muốn nhấn mạnh nội dung.

<b> và <strong>: đều làm in đậm phần nội dung của thẻ

<i> và <strong>: đều làm in nghiêng phần content của thẻ.

Dĩ nhiên, ta có thể nhấn mạnh câu chữ bằng thẻ <b> hoặc <i>. Tuy nhiên, thẻ <em> và <strong> không chỉ làm được việc đó, mà còn làm cho các chương trình máy tính khác hiểu được rằng, đó là phần nội dung được nhấn mạnh.

Thẻ gạch dưới <u>

Tạo đường gạch dưới thẻ. Ví dụ đoạn mã như sau:

<!doctype html>
<html>
<head>
</head>
<body>
<u>Chúc mừng sinh nhật
</u>
</body>
</html>

Kết quả hiển thị như sau:

Thẻ gạch giữa chữ <del>

Thẻ này sẽ tạo một đường gạch giữa cho phần nội dung đoạn văn. Chỉ ra rằng phần nội dung đang đề cập đã bị loại bỏ. Ví dụ đoạn mã như sau

<!doctype html>
<html>
<head>
</head>
<body>
<del>
Macbook Pro 2018 là sản phẩm mỏng thế giới hiện nay</del> đã được tọa ra bởi Apple Inc.
</body>
</html>

Kết quả hiển thị như sau:

Tại sao lại có thẻ <del>? Lý do là khi chúng ta soạn ra một tài liệu

80% thời gian trong ngày được sử dụng cho hoạt động giao tiếp, các đối tượng chính bạn giao tiếp gồm có:

  • Khách hàng và đối tác
  • Đồng nghiệp và cấp trên
  • Bạn bè và người thân

Để quá trình giao tiếp diễn ra thành công và đạt được các mục tiêu trong giao tiếp, bạn cần phải nắm vững các kỹ năng giao tiếp chuyên nghiệp, đặc biệt là khả năng tự tin trước đám đông

Để lại bình luận của bạn

avatar