[Html cơ bản bài 4] Đoạn văn bản trong HTML

Ngày đăng: 13/12/2023 | Tác giả: bbugtea | 711 lượt xem

Chào mọi người! Trong serise này mình xin viết lại chủ đề về Html cơ bản bài 4: “Đoạn đoạn văn bản trong HTML”. Ở bài trước các bạn đã hiểu hơn về HTML rồi thì chúng ta bắt đầu chinh phục HTML tiếp thôi nào! Tài liệu này được biên soạn từ thực tế của mình và tổng hợp thêm từ nhiều nguồn khác nhau. Trong quá trình soạn bài viết này sẽ có những sai sót mong các bạn đóng góp, phản hồi đề tài liệu này được cập nhật phiên bản tốt hơn.

Cách tạo một đoạn văn bản trong HTML?

Thông thường trong HTML, văn bản(Paragraph HTML) thường được thể hiện dưới dạng từng đoạn. Mỗi đoạn văn bản sẽ có một khoảng cách lề phía trên và lề phía dưới (mặc định là 16 pixel) để tách biệt đoạn văn bản với các nội dung nằm ở phía trên và phía dưới của nó.

Ví dụ: Trang web bên dưới có 2 đoạn văn bản, nhìn kỹ thì các bạn sẽ thấy ba đoạn văn bản này được tách biệt rất rõ ràng, đó chính là nhờ vào khoảng cách lề 16 pixel nằm giữa chúng.

Chúng ta phân tích mã html của ví dụ trên nhé!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning HTML Basic</title>
</head>
<body>
    <h1>Học cấu trúc file html cơ bản tại: <b>Bbugsoft</b></h1>
    <p>Đừng dại mà quen bọn ai-ti (IT).
        Chúng nó khô khan, lãng mạn gì?
        Viết thư tán gái thì kinh dị.
        Chúng viết bằng gì? Ngôn ngữ C.
    </p>
    <p>
            Đừng dại mà yêu bọn IT.
            Chúng nó tài năng, mỗi tội kỳ.
            Bạn gái chúng đòi đi đăng ký
            “Bẻ khóa được rồi đăng ký chi?”.
    </p>

</body>
</html>

Phần <head> thì mình xin bỏ qua nhé vì đã giới thiệu cho các ở bài trước rồi ạ. Nhìn vào mã HTML trong phần <body> trên ta thấy: có các thẻ sau: h1, b, p thì h1 tạo tiêu đề cho web có thẻ b để nhấn mạnh văn bản Bbugsoft. Còn văn bản trong thẻ p cũng chính là bài mà chúng ta đọc đến đây. Chính bên trong cặp thẻ là văn bản chúng ta cần hiển thị lên. Ở trên thì có 2 cặp thẻ p bao quát từng văn bản, khi chèn thẻ và sau thẻ kèm văn bản thì trình duyệt hiểu đó là 1 đoạn văn bản để kết thúc 1 đoạn. Sau đó chúng ta có thêm thẻ và bao quanh văn bản thứ 2 khác nhau về mặt nội dung.Thì khi hiển thị lên trình duyệt đoạn văn bản chứa nó sẽ xuống dòng. Và khoảng cách mặc định lề trên, lề dưới là 16px nếu không định dạng css cho phần tử đó. Để check tại sao giữa chúng là 16px thì bật trình kiểm tra cho nhà phát triển để kiểm tra phần tử chúng ta cần xem nhé. Xem hình ảnh bên dưới để hiểu rõ nhé.

Vấn đề về khoảng trắng trong thẻ p của HTML?

Khi chúng ta soạn thảo một đoạn văn bản, nằm giữa mỗi hai ký tự chỉ được phép tồn tại tối đa một dấu khoảng trắng (&nbsp), nếu chúng ta sử dụng phím Space để nhập nhiều dấu khoảng trắng liên tiếp thì khi hiển thị lên màn hình, trình duyệt sẽ loại bỏ những dấu khoảng trắng dư thừa.

Kết quả sau khi chạy mã HTML của ảnh trên nó vẫn hiển thị như cũ. Không có khoảng trắng nào cả. Các bạn thử chạy ví dụ tương tự nhé.

Vấn đề ngắt xuống dòng trong thẻ p của HTML?

Trong ngôn ngữ HTML, chúng ta không thể sử dụng phím Enter với mục đích hiển thị dấu ngắt xuống dòng, nếu các bạn dùng phím Enter để nhập dấu ngắt xuống dòng thì khi hiển thị lên màn hình, trình duyệt cũng chỉ xem nó như một dấu khoảng trắng. Cùng xem hình ảnh này:

Kết quả đầu ra của mã HTML trên:

Qua ví dụ trên chúng ta có thể thấy rằng: Mặc dù đã dùng phím enter để cố tình cho nó xuống dòng đoạn văn cần xuống dòng mà kết quả đầu ra không như mong đợi. Thì để hiển thị dấu ngắt xuống dòng thì chúng ta phải sử dụng thẻ

– Lưu ý: Mỗi một thẻ sẽ tương ứng với một dấu ngắt xuống dòng. Nếu có 2 thẻ thì trình duyệt hiểu rằng bạn xuống dòng 2 lần.

Đây là kết quả đầu ra:

Căn lề cho đoạn văn bản trong thẻ p của HTML?

Sau khi các bạn hiểu được cách chèn đoạn văn bản và xuống dòng cho đoạn văn bản mong muốn thì liệu các bạn có đặt câu hỏi muốn căn lề trên, dưới, trái, phải, căn đều nhau cho chúng thì sử dụng gì?

Ồ. Vậy thì chúng ta cùng bắt đầu đi tìm câu trả lời nhé!

Để căn lề cho một đoạn văn bản thì chúng ta thêm thuộc tính align vào bên trong thẻ .

– Cú pháp:

Trong đó: align là thuộc tính căn chỉnh cho văn bản và value là giá trị chúng ta cần căn chỉnh.

value đó có thể là: “left, right, center, justify”

Ví dụ về căn trái cho văn bản:

Đây là văn bản được căn lề trái

Ví dụ về căn phải cho văn bản:

Đây là văn bản được căn lề phải

Ví dụ về căn giữa cho văn bản:

Đây là văn bản được căn lề giữa

Ví dụ về căn đều trái phải cho văn bản:

Đây là văn bản được căn đều trái và căn đều phải

Kết quả hiển thị sẽ như thế này:

Lưu ý: Mặc định thì văn bản được căn nằm phía bên trái. Cho nên việc căn lề cho văn bản nằm phía bên trái là điều không cần thiết các bạn nhé!

Kết luận: Qua bài học này bạn đã hiểu hơn về đoạn đoạn văn bản trong HTML và sử dụng 1 số thuộc tính của nó rồi đúng không nào. Chúc các bạn học tập tốt nhé.