You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tạo một đoạn văn bản, định dạng văn bản bằng thẻ Section trong HTML

Tạo một đoạn văn bản, định dạng văn bản bằng thẻ Section trong HTML

Chúng ta sẽ tiếp tìm hiểu thẻ mới nhất trong HTML5. Thẻ Section sẽ là đối tượng tiếp theo để tìm hiểu.

Xem thêm bài viết

HTML5 vừa ra mắt đã bổ sung rất nhiều thẻ mới. Những thẻ mới có tác dụng rất đặc biệt trong HTML. Có một số thẻ còn bổ trợ thêm nhiều tính năng mới cho HTML. Chưa kể các thuộc tính mới của HTML5 rất nhiều và thật sự là bạn sẽ đếm không xuể. Lần trước mình đã giới thiệu đến bạn một thẻ mới trong HTML5. Hôm nay chúng ta se tiếp tục học về một thẻ mới nữa. Thẻ này sẽ giúp bạn giải quyết được kha khá vấn đề.

Nếu bạn có để ý thì bạn có thể nhìn thấy những trang tiểu thuyết đều có từng chương khác nhau. Trong một văn bản HTML thì cũng có đầu trang, chân trang hoặc là bất kỳ một khu vực nào trong trang HTML. Nếu bạn muốn chia một nội dung trong HTML thành từng phần. Mỗi phần là một khu vực khác nhau. Nhưng không phải là thẻ Div. Yên tâm bạn đã có một thẻ khác thay thế.

Thẻ Section chia văn bản trở nên dễ như ăn kẹo

Đây là thẻ mới cho lần ra mắt HTML5 này. Section sẽ giúp bạn chia nội dung của một đoạn văn bản ra làm nhiều phần khác nhau. Giống như cuốn tiểu thuyết có nhiều chương sách. Section dùng để xác định một cách rõ ràng các khu vực với nhau. Bạn hoàn toàn có thể  định dạng cho từng khu vực đó mà không ảnh hưởng đến sự phân cia trang. Đó chính là cái lợi đầu tiên dành cho bạn khi sử dụng thẻ này. Section cho phép bạn có thể định dạng dễ dàng một phần nội dung văn bản đã nằm trong thẻ Section.

Cú pháp thẻ Section

Cú pháp:

<section> Content </section>

Cú pháp quen thuộc với chúng ta. Section không có những thuộc tính riêng. Chúng sở hữu những thuộc tính chung và thuộc tính sự kiện.

Ví dụ:

Đoạn mã trang HTML (try.html)

<!doctype html>
<html>

<head>
    <title>Trang web giới thiệu ẩm thực sáng tạo</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay" />
    <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn" />
    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>
    <nav>
        <a href="try.html" class="main-menu">Trang chủ</a> |
        <a href="thuc-don.html" class="main-menu">Thực Đơn</a> |
        <a href="lien-he.html" class="main-menu">Liên Hệ</a>
    </nav>
    

    <h1>Ẩm thực 47 ngõ đường phố Sài Gòn</h1>
    <nav id="gola">
        <a href="#" class="main-top">Giới thiệu dự án</a> |
        <a href="#" class="main-top">Mục tiêu dự án</a> |
        <a href="#" class="main-top">Điểm nhấn dự án</a>
    </nav>
   
    
    <pre>
            Sài Gòn không giống với Hà Nội bởi thời tiết Sài Gòn luôn thất thường.
                Sài Gòn không có đặc sản của riêng mình vì Sài Gòn là nơi dung nạp mọi nền văn hoá.
                    Muốn ăn món Thái, 
                            Có ngay! 
                    Muốn ăn món Hàn, 
                            Hãy nhìn bên kia đường! 
                    Muốn ăn thịt nướng, 
                            Đi thêm vài bước nữa! 
                    Muốn ăn món Nhật, 
                            Ghé đối diện! 
                Sài Gòn tuy có vẻ đơn điệu về ẩm thực nhưng chính Sài Gòn cũng có một phong cách rất riêng mà chỉ có ở Sài Gòn
                    Những buổi tối không ngủ 
                        Ngắm nhìn đường phố nhộp nhịp
                            Bên cạnh những người mình yêu thương cùng ly cà phê hương vị đậm đà. 
                Sài Gòn là nơi của những ly cà phê đặc biệt. 
                Hiếm có nơi mà người ta có thể thưởng thức được ly cà phê hấp dẫn bằng nhiều hình thức khác nhau. 
                Có một Sài Gòn rất khác... 
            
            Chúng ta sẽ khám phá Sài Gòn bằng mọi cung bậc mà bạn có thể cảm nhận được. Thấm nhuần những giá trị tinh thần khác biệt. Đó mới là Sài Gòn. Một Sài Gòn diễm tình hoa lệ.
        </pre>
        
        <h1>Khám phá Sài Gòn ngay nào</h1>
        <center><a href="thuc-don.html"><button class="button1">Khám phá ngay</button></a></center>
        <div>
        <h2>Giới thiệu dự án</h2>
        <p>Dự án được thự chiện bởi một nhóm bạn trẻ có niềm đam mê với ẩm thực nơi họ sinh ra. Chúng tôi luôn phát triển dự án theo đúng tôn chỉ "Ngon-bổ-rẻ". Chúng tôi luôn muốn mang đến cho bạn những trải nghiệm ẩm thực chỉ có ở Sài Gòn không nơi đâu có được. </p>
        <h2>Mục tiêu dự án</h2>
        <p>Chúng tôi muốn hoàn thành trọn vẹn bộ bản đồ ẩm thực Sài Gòn theo từng quận huyện khác nhau. Hiện chúng tôi đã có bản đồ của hai huyện ngoại thành thành phố.</p>
        <h2>Điểm nhấn dự án</h2>
        <p>Món ăn đường phố thường bị gắn mác là kém vệ sinh. Nhưng chúng tôi muốn mang đến một trải nghiệm khác biệt hơn dành cho bạn. Một trải nghiệm thức ăn đường phố rẻ nhưng hợp vệ sinh.</p>
        </div>
        <section>
            <h2>Hình ảnh món ăn</h2>
            <p>Khám phá khu ẩm thực đặc sắc đến từ Hàn Quốc</p>
            <img src="images/korea.png" alt="Korea" title="Hàn Quốc" width="300" height="200" class="korea"/><br/>
            <img src="images/muc-khong-lo.jpg" alt="Mực Không Lồ" title="Mực Khổng Lồ" width="640" height="640" class="muckhonglo"/>
        </section>
</body>

</html>

Đoạn mã CSS (style.css)

.button1{
    color: white;
    background-color: firebrick;
    border: none;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    
}
h1 {
    color: darkblue;
    text-align: center;
    font-size: 50px;
    
}
h2 {
    color:darkred;
    text-align: center;
    font-size: 40px;
    
}
nav{
    text-align: center;
    font-size: 25px;
    text-decoration: none;
    
}
a {
    text-decoration: none;   
}
div h2 {
    color: coral;
}
img.korea {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
img.muckhonglo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
section p {
    color: blueviolet;
    font-size: 25px;
    text-align: center;
    
}

Kết quả ví dụ

Thẻ này rất dễ nắm bắt. Sử dụng lại đơn giản và hiệu quả. Bạn có thể trang trí một chút bằng thẻ Style. Khá dễ dàng. Thẻ Section trong HTML bạn muốn chứa bao nhiêu thẻ P, thẻ H cũng được.

Cuối cùng thì bạn cũng đã chia được những nội dung trong phần Body ra làm nhiều phần khác nhau. Thẻ Section giúp ích cho bạn rất nhiều. Hãy tận dụng thẻ Section để bạn có thể trình bày những đoạn mã của bạn trở nên gọn gàng hơn. Bài tập của bạn nằm bên dưới. Chúc các bạn học vui!

Bài tập

Tạo Section với đoạn văn bản sau.

Để nấu súp cua bạn cần chuẩn bị những nguyên liệu sau:

- 1 con cua biển

- 1 hộp măng tây hoặc 1 bó măng tây tươi (nếu bạn mua được măng tươi thì nấu bát súp sẽ rất thơm)

- 1 quả trứng gà

- Bột bắp

- 1 củ hành tím

- Dầu mè, ngò rí (rau mùi), tiêu

- Nước dùng

Với các món súp nói chung và món súp cua nói riêng, để súp ngon bạn cần nấu nước dùng cho ngọt. Dùng bộ xương gà để nấu nước dùng cho ngọt nước. Nấu cho bao nhiêu người ăn thì bạn đong bấy nhiêu bát nước dùng nhé! Cua hấp chín, gỡ lấy thịt, càng cua để riêng. Củ hành tím cắt khoanh mỏng, phi vàng xong cho thịt của vào xào sơ. Bước này rất quan trọng vì giúp cho thịt cua dậy mùi thơm. Măng hộp vớt ra rửa sơ, cắt khúc, nếu cọng nào dày quá thì chẻ đôi. Măng tây cắt khúc - phần gần gốc bào vỏ cho khỏi bị xơ. Trứng gà đánh tan. Pha bột bắp với chút nước lọc. Nấu sôi nước dùng, cho măng tây vào, nêm nếm vừa ăn. Trút hỗn hợp bột bắp với nước vào khuấy nhẹ cho đến khi thấy nước súp sền sệt là được. Độ sánh của nước súp tuỳ vào ý thích của từng gia đình, tuy nhiên bạn lưu ý nên cho bột hơi nhiều một chút để trừ hao khi múc súp ra bát ăn thì súp sẽ hơi loãng ra. Đổ trứng gà qua một cái rây đặt bên trên nồi súp để tạo các vân trứng cho đẹp. Cho thịt cua vào khuấy đều. Nêm nếm lại vừa ăn rồi cho vài giọt dầu mè cho thơm và tắt bếp, múc súp ra tô, trang trí ngò rí, tiêu xay. Món ăn dùng nóng rất ngon.




Đặt câu hỏi cho bài viết này ?