Học phần thiết kế web tên Đề tài tạo website trình bày về văn hóa – Địa lý của thành phố hà nội

LỜI MỞ ĐẦUTrong lòng Việt Nam, tồn tại một thành phố đầy màu sắc và sự phong phú về văn hóa - Hà Nội.. Với hàng ngàn năm lịch sử và sự kết hợp giữa các dân tộc, Hà Nội trở thành điểm đến

Tổng Quan

Cơ sở lý thuyết

- 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

- 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 là một khung công tác miễn phí giúp phát triển web nhanh chóng và dễ dàng Nó cho phép người dùng tạo ra các thiết kế đáp ứng một cách thuận tiện.

JavaScript là ngôn ngữ lập trình phổ biến, được sử dụng để tạo ra các trang web tương tác và sống động Ngôn ngữ này được tích hợp vào HTML, cho phép thực thi Client-Side Script từ phía người dùng và máy chủ (Node.js), góp phần tạo ra các trang web động.

Công cụ thực hiện đồ án: Visual Studio code, FastStone Editer,

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

B2: Tạo css cho box outer và header body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f2f2f2;

outer { 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

Giới Thiệu

Địa Lý

Lịch Sử

Chi Tiết

Văn

Ẩm

Tham

Kiến

B4: Viết css cho top_menu

top-menu { width: 1175px; 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; 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;

Hình 2.1 : Giao diện phần content (Trang Chủ)

2.2 Trang GioiThieu.html (Giới Thiệu)

-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

Giới thiệu về Hà Nội

Hà Nội, thủ đô của Việt Nam, là một thành phố có bề dày lịch sử và văn hóa với hơn 1000 năm hình thành và phát triển Từ khi được thành lập vào năm 1010, Hà Nội đã khẳng định vị thế là trung tâm chính trị, kinh tế và văn hóa quan trọng của đất nước.

Hà Nội, với những di tích lịch sử quan trọng như Khu phố cổ, Hoàng thành Thăng Long, Chùa Một Cột và Văn Miếu - Quốc Tử Giám, là điểm đến hấp dẫn cho những ai muốn khám phá văn hóa và lịch sử Việt Nam Thành phố còn sở hữu nhiều bảo tàng và điểm tham quan thú vị khác, mang đến trải nghiệm phong phú cho du khách.

Hà Nội không chỉ nổi bật với di sản lịch sử phong phú mà còn thu hút du khách bởi kiến trúc Pháp thuộc địa đặc sắc từ thời kỳ thuộc Pháp Những con phố rộng rãi, công trình kiến trúc hoàng gia và các khu vườn rực rỡ tạo nên vẻ đẹp độc đáo và quyến rũ cho thành phố.

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 hàng đầu Thành phố này nổi bật với 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, góp phần quan trọng vào sự phát triển tri thức và nhân lực chất lượng cao.

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 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{ border-width: 1px; border-style: solid;

#content row col-sm-3{ border-width: 1px; border-style: solid; }

Hình 2.2 : Giao diện phần content (trang Giới Thiệu)

2.3 Trang vanhoa.html (Văn Hóa)

Văn Hóa Về Hà Nội

Hà Nội sở hữu một nền văn hóa đa dạng và phong phú, được hình thành từ sự giao thoa giữa nhiều dân tộc và tầng lớp xã hội Nền văn hóa này chịu ảnh hưởng mạnh mẽ từ văn hóa dân tộc Kinh, văn hóa Chăm và các dân tộc thiểu số khác, tạo nên một bức tranh văn hóa độc đáo và phong phú cho thủ đô.

Văn hóa Hà Nội được thể hiện rõ nét qua các loại hình 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 nghệ thuật này không chỉ được truyền bá qua nhiều thế hệ mà còn trở thành biểu tượng đặc trưng của văn hóa thủ đô.

Hà Nội là trung tâm của nhiều lễ hội truyền thống diễn ra quanh năm, trong đó nổi bật là 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 Những lễ hội này thu hút đông đảo du khách và người dân tham gia, tạo nên không khí sôi động và phong phú cho thành phố.

Hà Nội là trung tâm văn hóa sôi động với nhiều nhà hát, phòng trưng bày nghệ thuật và địa điểm biểu diễn âm nhạc Thành phố thường xuyên tổ chức các sự kiện văn hóa, triển lãm và biểu diễn nghệ thuật, góp phần làm nổi bật bản sắc văn hóa độc đáo của Hà Nội.