CHƯƠNG 1 Tổng Quan 1.1: Giới thiệu Trang web này nhằm giới thiệu về thành phố Hà Nội, với các thông tin về văn hóa, địa lý, và các điểm nổi bật khác của thành phố. Trang web được thiết kế đơn giản và dễ sử dụng. Giao diện trang web có header chứa tiêu đề "Website Hà Nội" và một menu điều hướng cho phép người dùng chọn các trang khác nhau để xem thông tin cụ thể. Các trang chính trên trang web bao gồm: 1.
Trang chủ: Hiển thị chào mừng và thông báo tổng quan về trang web. Giới thiệu: Cung cấp thông tin về Hà Nội, bao gồm cả di sản văn hóa và địa lý của thành phố. Trang này có chứa video về Hà Nội để tạo sự hấp dẫn. Văn hóa: Trình bày về di sản văn hóa lâu đời và phong phú của Hà Nội.
Có hiển thị hình ảnh về các điểm du lịch nổi tiếng như Hồ Hoàn Kiếm và Chùa Một Cột. Địa lý: Cung cấp thông tin về vị trí địa lý của Hà Nội và những cảnh quan tự nhiên đẹp của thành phố. Trang này có hiển thị hình ảnh về Hồ Tây và Bảo Đại Đài Yến. Trang web được tối ưu hóa để hiển thị trên các thiết bị khác nhau, từ máy tính để bàn đến điện thoại di động.
Ngoài ra, trang web cũng sử dụng các hiệu ứng chuyển động nhẹ để làm cho nội dung trang web sống động hơn. Mục tiêu của trang web này là giới thiệu và quảng bá thành phố Hà Nội, từ đó thúc đẩy du lịch và tăng cường nhận thức về di sản và văn hóa của thành phố. HTML: - HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản. Người ta thường sử dụng HTML trong việc phân chia các đoạn văn, heading, links, blockquotes,… - HTML thường được dùng để: +Định dạng nội dung của trang web +Thêm ảnh hoặc video vào trang web +Kết hợp với css B.
CSS: - CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần tử HTML dựa trên các cặp thuộc tính : giá trị thuộc tính. Bootstrap: -Bootstrap là một khung công tác mặt trước miễn phí để phát triển web nhanh hơn và dễ dàng hơn. -Bootstrap cũng cung cấp cho bạn khả năng dễ dàng tạo ra các thiết kế đáp ứng. JavaScript: - JavaScript là ngôn ngữ lập trình phổ biến dùng để tạo ra các trang web tương tác.
Được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trò như một phần của trang web, thực thi cho phép Client-Side Script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động. Công cụ thực hiện đồ án: Visual Studio code, FastStone Editer,. 8 CHƯƠNG 2 THIẾT KẾ WEBSITE 2.1: Thiết Kế TrangChu.html(trang chủ) B1: Khai báo các css, bootstrap sử dụng, tạo box outer và header <!DOCTYPE html> <html lang="en"> <head> <title>Trang Chủ</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.net/npm/bootstrap@5.1/dist/css/bootstrap.css" rel="stylesheet"> <script src="https://cdn.net/npm/bootstrap@5.1/dist/js/bootstrap.
js"></script> <style> B2: Tạo css cho box outer và header body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f2f2f2; } .outer { 9 background-color: #f2f2f2; padding: 20px; margin-bottom: 20px; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } -B3: Ở trong header tạo thêm box top_menu <header> <h1>Trang Chủ</h1> </header> <div id="header"> <div id="top_menu"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="gioithieu.html">Giới Thiệu</a> </li> <li class="nav-item"> 10 <a class="nav-link" href="dialy.html">Địa Lý</a> </li> <li class="nav-item"> <a class="nav-link" href="lichsu.html">Lịch Sử</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs- toggle="dropdown">Chi Tiết</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="vanhoa.html">Văn Hóa</a></li> <li><a class="dropdown-item" href="amthuc.html">Ẩm Thực</a></li> <li><a class="dropdown-item" href="thamquan.html">Tham Quan</a></li> <li><a class="dropdown-item" href="kientruc.html">Kiến Trúc</a></li> </ul> </li> </ul> </div> </div> </nav> </div> </div> B4: Viết css cho top_menu .top-menu { width: 1175px; 11 height: 35px; margin-top: -171px; float: left; background-color: #f2f2f2; } .top-menu ul{ margin-top: 10px; text-align: center; } .top-menu li { display: inline;; } .top-menu a { text-decoration: none; color: #333; font-weight: bold; font-size: 16px; } .top-menu a:link{ color: #ccc; padding-left: 20px; padding-right: 50px; text-decoration: none; } .top-menu a:visited{ color: rgb(238,221,221); padding-left: 20px; padding-right: 50px; 12 text-decoration: none; } .top-menu a:hover { color:rgb(199,179,179); padding-left: 20px; padding-right: 50px; text-decoration: none; } nav { background-color: #f2f2f2; padding: 10px; text-align: center; } nav a { text-decoration: none; margin: 10px; color: #333; } Kết quả của B1,B2,B3,B4 Hình 2.1 : Giao diện phần content (Trang Chủ) 13 2.html (Giới Thiệu) -Trình bày theo Layout 1 -Các bước tạo box hay css của Outer, header, top_menu đều trình bày giống Trang Chủ. Chỉ khác content nên em xin trình bày mỗi content B1: Tạo box content <div class="box_content"> <h1>Giới thiệu về Hà Nội</h1> <img src="./img/gioi-thieu-ve-ha-noi.jpg" alt="Giới Thiệu Hà Nội"> <p> Hà Nội, thủ đô của Việt Nam, là một thành phố lịch sử và văn hóa với hơn 1000 năm tuổi. Được thành lập vào năm 1010, Hà Nội đã trở thành trung tâm chính trị, kinh tế và văn hóa của đất nước. </p> <p> Hà Nội là nơi gắn liền với nhiều di tích lịch sử quan trọng như Khu phố cổ Hà Nội, Hoàng thành Thăng Long, Chùa Một Cột và Văn Miếu - Quốc Tử Giám.
Thành phố cũng có nhiều bảo tàng và điểm tham quan khác để khám phá lịch sử và văn hóa của Việt Nam. </p> <p> Không chỉ nổi tiếng với di sản lịch sử, Hà Nội còn được biết đến với kiến trúc Pháp thuộc địa từ thời kỳ thuộc địa Pháp. Những con phố rộng lớn, các công trình kiến trúc hoàng gia và các khu vườn rực rỡ mang lại cho thành phố một vẻ đẹp độc đáo và quyến rũ. </p> <p> Hà Nội không chỉ là trung tâm văn hóa mà còn là trung tâm giáo dục và nghiên cứu.
Thành phố này có nhiều trường đại học danh tiếng và các viện nghiên cứu hàng đầu trong khu vực. </p> 14 </div> B2: Khai báo css cho box content #content-box { width: 80%; margin: auto; margin-top: 20px; padding: 20px; background-color: #f2f2f2; } #content{ width: 1175px; margin-top: 200px; margin-left: 5px; float: left; } #content .article{ width: 1100px; height: 200px; float: left; margin-top: 10px; border: 2px solid black; margin: 20px; padding: 20px; overflow-x: scroll; } #content img{ 15 margin: 0; } #content p{ width: auto; font-size: 32px; color: #212121; padding: 0; margin: 0px 0 0 5px; } #content a{ color:black; text-decoration: none; background-color: transparent; } #contenr a:link{ color:black; text-decoration: none; padding-left: 10px; padding-right: 10px; } #content a:visited{ color:black; padding-left: 10px; padding-right: 10px; text-decoration: none; } #content a:hover{ color:black; padding-left: 10px; padding-right: 10px; text-decoration: none; 16 } #content .row{ border-width: 1px; border-style: solid; } #content .col-sm-3{ border-width: 1px; border-style: solid; } Kết quả B1 và B2 Hình 2.2 : Giao diện phần content (trang Giới Thiệu) 17 2.html (Văn Hóa) -Trình bày theo Layout 1 -Các bước tạo box hay css của Outer, header, top_menu đều trình bày giống Trang Chủ. Chỉ khác content nên em xin trình bày mỗi content B1: Tạo box content <div class="box_content"> <h1>Văn Hóa Về Hà Nội</h1> <img src=".jpg " alt="Văn hóa Hà Nội"> <p> Hà Nội có một văn hóa đa dạng và phong phú, được hình thành từ sự giao thoa của nhiều dân tộc và tầng lớp xã hội. Văn hóa Hà Nội có sự ảnh hưởng từ văn hóa dân tộc Kinh, văn hóa Chăm và văn hóa các dân tộc thiểu số khác.
</p> <p> Văn hóa Hà Nội thể hiện qua nghệ thuật truyền thống như ca trù, hát xẩm, chèo, quan họ và múa rối nước. Những hình thức nghệ thuật này được truyền bá qua các đời người và trở thành biểu tượng của văn hóa Hà Nội. </p> <p> Hà Nội cũng là nơi có nhiều lễ hội truyền thống diễn ra trong suốt năm. Lễ hội Đông Cổ, lễ hội Thăng Long - Hà Nội, lễ hội hoa Sắc Màu Tuổi Trẻ và lễ hội Âm tiết Tây bắc là một số lễ hội nổi tiếng thu hút đông đảo du khách và người dân tham gia.
</p> <p> 18 Ngoài ra, Hà Nội còn có nhiều nhà hát, phòng trưng bày nghệ thuật, địa điểm biểu diễn âm nhạc và sân khấu nghệ thuật. Các sự kiện văn hóa, triển lãm và biểu diễn nghệ thuật thường xuyên được tổ chức tại đây, tạo điểm nhấn cho văn hóa Hà Nội. </p> </div> B2: Khai báo css cho box content #content-box { width: 80%; margin: auto; margin-top: 20px; padding: 20px; background-color: #f2f2f2; } #content{ width: 1175px; margin-top: 200px; margin-left: 5px; float: left; } #content .article{ width: 1100px; height: 200px; float: left; margin-top: 10px; border: 2px solid black; margin: 20px; padding: 20px; overflow-x: scroll; } #content img{ margin: 0; } 19 #content p{ width: auto; font-size: 32px; color: #212121; padding: 0; margin: 0px 0 0 5px; } #content a{ color:black; text-decoration: none; background-color: transparent; } #contenr a:link{ color:black; text-decoration: none; padding-left: 10px; padding-right: 10px; } #content a:visited{ color:black; padding-left: 10px; padding-right: 10px; text-decoration: none; } #content a:hover{ color:black; padding-left: 10px; padding-right: 10px; text-decoration: none; } #content .row{ 20 border-width: 1px; border-style: solid; } #content .col-sm-3{ border-width: 1px; border-style: solid; } Kết quả B1 và B2 Hình 2.3 : Giao diện phần content (trang Văn Hóa) 21 2.html (Địa Lý) -Trình bày theo Layout 1 -Các bước tạo box hay css của Outer, header, top_menu đều trình bày giống Trang Chủ. Chỉ khác content nên em xin trình bày mỗi content B1: Tạo box content <div class="box_content"> <h1 style="color:red; font-size: 34px; font-weight: 700;" Địa Lý Về Hà Nội</h1> <img src ="./img/ban-do-ha-noi.jpg"alt="Địa Lý Hà Nội"> <p> Hà Nội nằm ở phía Bắc Việt Nam, có tọa độ địa lý 21°01' - 21°18' Vĩ Bắc và 105°42' - 106°03' Kinh Đông.
Thành phố nằm bên bờ sông Hồng, một trong những con sông quan trọng nhất của Việt Nam. </p> <p> Hà Nội có diện tích khoảng 3.328,9 km² và được chia thành 12 quận và 17 huyện. Quận Hoàn Kiếm là trung tâm của thành phố và nơi có nhiều công trình lịch sử và văn hóa đáng chú ý như hồ Gươm, chùa Ngọc Sơn và ngôi nhà cổ Hà Nội. </p> <p> Thành phố có khí hậu nhiệt đới ẩm, với mùa hè nóng ẩm và mùa đông lạnh.
Nhiệt độ trung bình hàng năm là khoảng 23°C. Hà Nội có hai mùa rõ rệt: mùa mưa (từ tháng 5 đến tháng 10) và mùa khô (từ tháng 11 đến tháng 4). </p> <p> 22 Hà Nội cũng có nhiều hồ, ao và suối. Hồ Tây là hồ lớn nhất thành phố và cung cấp không gian xanh thoáng đãng cho người dân và du khách.
Các hệ thống kênh đào và cầu trên sông Hồng cũng tạo nên một phần cảnh quan đẹp và có giá trị lịch sử của thành phố. </p> </div> B2: Khai báo css cho box content #content-box { width: 80%; margin: auto; margin-top: 20px; padding: 20px; background-color: #f2f2f2; } #content{ width: 1175px; margin-top: 200px; margin-left: 5px; float: left; } #content .article{ width: 1100px; height: 200px; float: left; margin-top: 10px; border: 2px solid black; margin: 20px; padding: 20px; overflow-x: scroll; } #content img{ 23 margin: 0; } #content p{ width: auto; font-size: 32px; color: #212121; padding: 0; margin: 0px 0 0 5px; } #content a{ color:black; text-decoration: none; background-color: transparent; } #contenr a:link{ color:black; text-decoration: none; padding-left: 10px; padding-right: 10px; } #content a:visited{ color:black; padding-left: 10px; padding-right: 10px; text-decoration: none; } #content a:hover{ color:black; padding-left: 10px; padding-right: 10px; text-decoration: none; 24 } #content .row{ border-width: 1px; border-style: solid; } #content .