Title 1. Tạo trang chủ (Home).docx ✅

1. Tạo header cho trang web gồm 2 phần a. phần 1 là logo và form tìm kiếm b. phần 2 là thanh điều hướng navbar <div> <header> <div> <a href="index.html"> <img src="..." alt="logo"> </a> </div> <div> <form> <input type="search" name="s"...> <input type="submit" value=">"> </form> </div> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Services</a> <ul> <li>...</li> ... </ul> </li> <li><a href="">Products</a></li> <li><a href="">Contact</a></li> </ul> </nav> ... </header> 2. Tạo section chứa 2 hình ảnh để thực hiện cuộn/trượt hình ảnh <section class="banner cycle-slideshow"> <img src="images/class1.jpg" alt="banner 1"> <img src="images/class2.jpg" alt="banner 2"> </section>
3. Tiếp tục tạo banner sau header gồm 2 phần là <article> và <aside> để chứa nội dung và sidebar <section> <article> ... </article> <aside> ... </aside> </section> 4. Tiếp tục là footer cho trang như sau <footer>   <div>     <h3>Footer Menu</h3>     <ul>       <li><a href="">Home</a></li>       <li><a href="">About</a></li>       <li><a href="">Services</a></li>       <li><a href="">Products</a></li>       <li><a href="">Contact</a></li>     </ul>   </div>   ...   <div>     <address>       <p>#100, Someplace, Somewhere far, 54654</p>       <p><a href="mailto:[email protected]"> [email protected] </a></p>       <p><a href="tel:1234567890"> 1234567890 </a></p>     </address>   </div> </footer> 5. Thêm bản quyền vào cuối trang <div><p> <small>       Copyright &copy; 2024. All Rights Reserved.
</small></p> </div> Kết quả có được như sau 6. Xây dựng bộ chứa (Container) Ta tạo style cho trang web có viền là 0 và màu nền xám cho body như sau body {   margin: 0 auto;   background-color: gainsboro; } Sau đó tạo class tên là container cho thẻ <div> lớn bao bọc toàn bộ web, và chỉ định style cho class như sau .container {   width: 1000px;   height: auto;   background-color: white;   margin: auto; /* nội dung bên trong được canh giữa */ }