You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tạo mẫu tin nhanh cho trang web bằng thẻ Article trong HTML

Tạo mẫu tin nhanh cho trang web bằng thẻ Article trong HTML

Bạn đã quen với mấy dạng tin hot trong ngày của các bài báo. Bạn muốn tìm hiểu xem làm sao có thể làm được như thế. Dễ dàng thôi mà.

Xem thêm bài viết

Các bạn thường xuyên đọc báo mạng hàng ngày. Bạn thường sẽ được nhìn thấy những dòng tiêu đề và một vài câu mô tả trong bài báo. Nếu bạn cảm thấy hứng thú. Bạn sẽ nhấn vào đọc ngay. Đôi khi cũng vì một chút tiêu đề đang hot, đang là trào lưu bạn không cần suy nghĩ mà vẫn bấm vào. Trang web của bạn cũng không thể nào mà không có bài viết được. Bạn muốn cập nhật những bài viết mới nhất dành cho người dùng. Giống như những gì mà bạn đang nhìn thấy ngoài trang chủ của Huỳnh Tòng. Bạn muốn thực hiện những dạng bảng tin giống như thế cho trang HTML của bạn.

Thật may mắn là trong HTML phiên bản mới nhất đã có thẻ giúp bạn tạo được những dạng tin tức giống như các trang báo vẫn làm.

Thẻ tạo tin tức độc lập đến độc đáo

HTML5 đã cung cấp cho các nhà phát triển một lượng lớn các thẻ mới.  Thẻ giúp bạn tạo ra những dạng tin tức là thẻ Article. Thẻ Article trong HTML giúp bạn xác định bài viết hoặc nội dung riêng biệt. Điều đặc biệt nhất trong thẻ Article là chúng hoạt động độc lập với phần còn lại của trang web. Bạn sẽ thường nhìn thấy các thẻ này trong bài viết blog, bài viết diễn đàn, tin tức mới và bình luận.

Cú pháp thẻ Article

Cú pháp:

<article>Content</article>

Content của thẻ Article có thể chứa thẻ P, thẻ H. Bạn có thể thêm bất kỳ thẻ nào vào thẻ Article.

Ví dụ

<!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>
        <article>
            <h1>Khám phá ẩm thực tuyệt ngon ở Quận 1</h1>
            <p>Tiêu chí ở cái nơi sang chảnh như quận 1 chỉ có thể là ngon nhưng phải rẻ. Nếu không rẻ thì quả là gây khó cho nhiều người rồi.</p>
            <img src="images/muc-khong-lo.jpg" alt="Mực khổng lồ" title="Mực khổng lồ" width="400" height="400" class="muc1"/>
        </article>
</body>

</html>

Kết quả ví dụ

 

Bạn sẽ nhìn thấy là các thẻ này đều hoạt động độc lập với những phần còn lại của trang web. Vì thế mà bạn có thể thoải mái sử dụng thẻ này. Tạo ra bao nhiêu chủ đề đều được. Cách hoạt động của thẻ Article đơn giản. Bạn có thể áp dụng được ngay. Sau này khi “vũ khí” đã được đầy đủ hơn thì bạn có thể sử dụng  một kĩ thuật của JavaScript để thực hiện.  Bài tập của các bạn ở phía dưới. Chúc bạn học vui!

Bài tập

Hãy sử dụng đoạn văn ở phần Section. Sau đó bạn hãy tạo ra một Article trong HTML.

Bạn chưa thẻ thực hiện bằng CSS cũng không sao vì bạn sẽ học phần này sau.

 




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