You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. Gom các thẻ lại với nhau để định dạng trong cùng một lúc với thẻ Div

Gom các thẻ lại với nhau để định dạng trong cùng một lúc với thẻ Div

Chúng ta sẽ học thêm một thẻ để phân chia trang web thành nhiều phần nhưng lần này là phân chia theo kiểu khác hẳn.

Xem thêm bài viết

Bạn đã từng cảm thấy cái sự vi diệu khi nhìn thấy những trang web có thiết bắt mắt. Chắc chắn rồi. Ai mà lại cưỡng được cái đẹp cơ chứ. Đa số các trang hiện nay đều có chân trang và phần đầu trang khá đẹp. Thu hút được sự chú ý của nhiều người dùng. Phần đầu trang và chân trang thường chứa những thông tin mà người dùng thường quan tâm. Bên cạnh đó là các chứng nhận có liên quan đến tác quyền, phiên bản của trang web,…Ngày nay các trang web có chân trang nhiều không kể xiết. Thậm chí bạn còn nhìn thấy những trang web có giao diện được chia thành nhiều phần khác nhau.

HTML có thể giúp bạn chia giao diện của trang web thành nhiều phần khác nhau. HTML rất lợi hại nhé! Chỉ cần một thẻ thôi là bạn có thể giải quyết vấn đề phân chia cho trang web. Oh Yeah! Quá tuyệt.

Div giúp bạn phân chia trang dễ dàng hơn

Thẻ có khả năng giải quyết vấn đề nan giải của bạn chỉ có thể là thẻ Div mà thôi. Nếu bạn đã từng nhìn thấy những code lập trình của các trang web thì bạn có thể nhìn thấy các trang web ngày nay sử dụng khá nhiều thẻ Div. Công dụng thật sự của thẻ này ra sao?

Bạn hãy thử tưởng tượng một chút nhé! Bạn muốn tạo ra phần đầu trang web với logo, tên trang web, thanh menu. Muốn tạo được những thứ này không quá khó đối với bạn. Sau khi tạo xong những thứ bạn cần cho phần đầu trang. Bạn muốn gom các thẻ này lại để tránh không nhầm lẫn với phần thân. Lúc này thẻ Div sẽ được sử dụng. Thẻ Div trong HTML dùng để gom các thành phần bạn vừa tạo được như hình ảnh logo, tên website, thanh menu vào cùng một khu vực với nhau.

Cú pháp thẻ Div

Cú pháp:

<div>Content</div>

Content trong thẻ Div chứa những thẻ khác mà bạn cần gom chúng vào một khu vực nhất định. Thẻ Dive nằm trong thẻ Body. 

Chúng ta cùng xem thử ví dụ về thẻ Div nhé!

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"/>
        <style>
            body{
                background-color: aqua;
            }
            h1{
                color: crimson;
            }
            .intro {
                background-color:peachpuff;
                
            }
        </style>
        
    </head>
    <body>
        
        
            <h1>Tổng hợp tin tức</h1>
            <p class="intro">
                    Zinedine Zidane một lần nữa cho thấy tài nghệ điều binh khiển tướng của mình trong chuyến hành quân đến El Molinon. Tại một trận chiến mà hầu hết quân tinh nhuệ đều vắng mặt, vị tướng trẻ người Pháp vẫn giúp đoàn quân áo trắng ca khúc khải hoàn trở về thánh địa Santiago Bernabeu.<br/>

                    Hãy nhìn vào con số thống kê để thấy màn trình diễn của Real ấn tượng như thế nào. Các học trò của Zidane <em>kiểm soát bóng 70%</em>, thực hiện <em>604 đường chuyền với độ chính xác lên tới 90%</em> và tung ra tổng cộng <span style="color: #ff1aff">17 pha dứt điểm</span>, tức trung bình trên 5 phút lại tung ra 1 pha dứt điểm. <br/>
            
                    <img src="images/zidane.jpg"  width="500" height="300" alt="Huấn luyện viên Zinedine Zidane"/> 
                    </br>
    
                    Những số liệu như vậy, trước đây chỉ được chứng kiến ở binh đoàn Barcelona dưới thời Pep Guardiola, những người đã thiết lập nên đế chế tiqui-taca mà chuyền bóng tới đâu cỏ không mọc nổi tới đấy. Chưa hết, chiến thắng của Real được ấn định chỉ 1 phút sau khi Zidane thực hiện thay đổi người chiến thuật. Thật là bậc kỳ tài. <br/>
                </p>
            
            <div style="color:#ff6600">
                <p>
                    Phần 8 của Fast and Furious (The Fate of the Furious) vừa có màn ra mắt hoành tráng tại phòng vé Hàn với 1.428.225 khán giả trong 5 ngày đầu tiên công chiếu, thu về 10,58 triệu USD. Với kết quả này, Fast 8 đã hoàn toàn thống trị bảng xếp hạng doanh thu tuần vừa qua. Thế nhưng, nó vẫn còn kém những gì Beauty and the Beast từng làm được trong tuần đầu tiên ra mắt. "Quái Vật" nhà Disney thu hút tới 1.569.525 khán giả và thu về 11,7 triệu USD (khoảng 266 triệu VND), đáng chủ ý là bộ phim đã đạt được kết quả này chỉ sau 4 ngày.
                </p>
            </div>
            <p class="intro">
                Càng cận ngày công chiếu, phim điện ảnh lần thứ 21 của loạt anime trinh thám nổi tiếng với tên gọi Detective Conan: Crimson Love Letter (tạm dịch Thám Tử Lừng Danh Conan: Bức thư tình đỏ thắm) lại càng siêng năng tung hoả mù thông tin khiến khán giả đứng ngồi không yên.

                Cụ thể, sau hai trailer đầu tiên tiết lộ chủ đề chính của phim sẽ xoay quanh hai nhân vật Kazuha và Heiji, vừa qua nhà phát hành lại tiếp tục tung ra hai đoạn quảng cáo ngắn để quảng bá phim trên sóng truyền hình Nhật Bản. Điều đáng nói là cách đặt tên hai đoạn phim này lại tiếp tục gợi nên nghi vấn: Liệu có phải Heiji đã thầm thương cô bạn thân của mình từ lâu?
            </p>


        
    
    </body>
</html>

Ở thẻ Div chúng ta cũng sẽ sử dụng thuộc tính style để trang trí cho HTML.

Kết quả ví dụ

Trên đây là ví dụ về cách mà thẻ Div hoạt động. Chắc chắn có nhiều bạn sẽ bị nhầm lẫn giữa thẻ Div và thẻ Span. Mọi thắc mắc ủa bạn sẽ được giải quyết trong bài viết sau. Còn bây giờ là thơi gian để bạn luyện tập cách sử dụng thẻ Div.

Bài tập

Hãy trang trí cho hai đoạn văn này với hai màu khác nhau bằng thẻ Div

Sau mùa đầu tiên của "The Face Vietnam", Lan Khuê đã phần nào chứng tỏ được bản thân không thua kém bất kỳ ai khi thể hiện được kinh nghiệm chuyên môn, sự quan tâm chăm sóc các thí sinh và cả sức hút về mặt truyền thông thông qua sự góp mặt của mình.

Tuy nhiên, khác với sự e dè khi là "em út" trong dàn HLV mùa 1, "The Face Vietnam" mùa 2 sẽ mang đến cho khán giả một Lan Khuê trưởng thành hơn trong cả tuổi đời và kinh nghiệm chinh chiến của mình trước hai gương mặt Hoàng Thùy và Minh Tú.



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