21 trang
4 lượt tải
Báo cáo Thiết kế Giao diện Web - Giới thiệu Thủ đô Hà Nội. Môn Ứng dụng Web | Đại học Trường Đại học Phenika.
7
CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1.1Giới thiệu tổng quan về Internet – Dịch vụ web
- Internet hay còn gọi là Mạng là một hệ thống thông tin toàn cầu có thể được truy nhập công cộng gồm các mạng máy tính được liên kết với nhau. Hệ thống này truyền thông tin theo kiểu nối chuyển gói dữ liệu (packet switching) dựa trên một giao thức liên mạng đã được chuẩn hóa (giao thức IP). Hệ thống này bao gồm hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các trường đại học, của người dùng cá nhân và các chính phủ trên toàn cầu, được liên kết bởi một loạt các công nghệ mạng điện tử, không dây và mạng quang. Internet mang theo một loạt các tài nguyên và dịch vụ thông tin, chẳng hạn như các tài liệu và ứng dụng siêu văn bản được liên kết với nhau của World Wide Web (WWW), thư điện tử, điện thoại và chia sẻ file.
Báo cáo Thiết kế Giao diện Web - Giới thiệu Thủ đô Hà Nội. Môn Ứng dụng Web | Đại học Trường Đại học Phenika.
Tài liệu gồm 21 trang giúp bạn tham khảo, củng cố kiến thức và ôn tập đạt kết quả cao trong kỳ thi sắp tới. Mời bạn đọc đón xem!
Môn: Ứng dụng Web 18 tài liệu
Trường: Đại học Phenika 1.2 K tài liệu
Tác giả:
Danh sách Quiz
lOMoARcPSD| 59735516
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC PHENIKAA
------------oOo-----------
HỌC PHẦN THIẾT KẾ GIAO DIỆN WEB
BÁO CÁO VỀ WEBSITE GIỚI THIỆU VỀ HÀ NỘI
Nhóm sinh viên thực hiện: 3 thành viên Bao
gồm:
1.Nguyễn Thị Thanh Huyền MSSV: 22013534
2. Lê Nguyễn Gia Huy MSSV: 22014366
3. Nguyễn Hoài Nam MSSV: 22013038
Giảng viên: Ths. Nguyễn Thị Hồng Hoa
Khoa: Công Nghệ Thông Tin
HÀ NỘI, 2/2024
lOMoARcPSD| 59735516
2
PHẦN THÔNG TIN CƠ BẢN
1.Thông tin cán bộ hỗ trợ, hướng dẫn:
1.1. Họ và tên: Ths. Nguyễn Thị Hồng Hoa
1.2. Đơn vị: Khoa Công Nghệ Thông Tin
2. Tên tập thể tác giả
Sinh viên tham gia
Mã Sinh Viên
Email
Nguyễn Thị Thanh Huyền
22013534
22013534@st.phenikaa-uni.edu.vn
Lê Nguyễn Gia Huy
22014366
22014366@st.phenikaa-uni.edu.vn
Nguyễn Hoài Nam
22013038
22013038@st.phenikaa-uni.edu.vn
3. Phân công nhiệm vụ
Nội dung công việc
Sinh viên thực hiện
Nav footer, Giao diện của home. Báo cáo
Nguyễn Hoài Nam
Tổng hợp code, giao diện du lịch
của website
Nguyễn Thị Thanh Huyền
Giao diện của Ẩm thực của Website
Lê Nguyễn Gia Huy
lOMoARcPSD| 59735516
3
LỜI MỞ ĐẦU
Nhng nm gn đy, Ngành Du lịch ngày càng ln mnh, việc quảng bá du
lịch ngày càng gi vai trò quan trọng trong các đời sống. Đc biệt vi sự xuất
hiện của Website du lịch ngày nay đã khin nhiều cá nhn, doanh nghiệp ln nhỏ
ngày càng ch hơn ti việc áp dng nó để cnh tranh, trưng bày sản phẩm và
to cơ hi cho mnh. Hiện nay, việc thit k mt trang website đã trở nên dễ dàng
hơn v có nhiều công c hỗ trợ tiện lợi, để thit k được mt trang web chng ta
cn phải hiểu rõ bản chất và cách hot đng của ngôn ng đánh dấu siêu vn bản
HTML (Hypertext Markup Language), kèm theo việc áp dng CSS (Cascading
Style Sheets) và JavaSript, nó to thành b ba công nghệ nền tảng cho World
Wide Web (WWW). Lợi ích của CSS mang li là rất ln, hỗ trợ các đon mã của
HTML được tối ưu hơn, dễ nhn hơn, dễ chỉnh sửa hơn. Riêng về ngôn ng
JavaSript đã làm cho trang web sinh đng hơn, bắt mắt và to được thiện cảm
vi người nhn. B ba này bù đắp cho nhau nhng thiu sót để thống nhất thành
mt thể hoàn chỉnh, từ đó to điều kiện cho nhiều cá nhn, doanh nghiệp dễ dàng
tip cận công nghệ web để to ra mt website phc v cho công việc, đời sống
của nhng người muốn khám phá về thủ đô Hà Ni nói chung và toàn b Việt
Nam nói riêng . V vậy, để nắm bắt được yêu cu trên nên nhóm bọn em đã quyt
định thit k mt website gii thiệu về Hà Ni vi cái tên TOP 10 HANOI ( TOP
10 HANOI là sẽ mt trang web gii thiệu về các địa điểm du lịch, giải trí, mua
sắm, ẩm thực và các dịch v uy tín ti thành phố Hà Ni. Trang web này cung
cấp thông tin khách quan gip người dùng có cái nhn tổng quan về nhng nơi
và dịch v đáng tin cậy, được đánh giá cao ti Hà
Ni ).
lOMoARcPSD| 59735516
4
MỤC LỤC
NỘI DUNG
LỜI MỞ ĐẦU..........................................................................................................
MỤC LỤC................................................................................................................
CHƯƠNG I: CƠ SỞ LÝ THUYẾT.........................................................................
1.1 Giới thiệu tổng quan về Internet.....................................................................
1.2 Ngôn ngữ: HTML – CSS – JavaScript............................................................
1.2.1 HTML..............................................................................................................
a. Giới thiệu về HTML.............................................................................................
b. Cấu trúc cơ bản và một số thẻ thông dụng của HTML........................................
1.2.2 CSS..................................................................................................................
a. Giới thiệu về CSS.................................................................................................
b. Công dụng của CSS............................................................................................
c. Sử dụng CSS:......................................................................................................
d. Phân nhóm định dạng CSS.................................................................................
e. Bảng màu CSS....................................................................................................
1.2.3
JavaScript:....................................................................................................
a. Giới thiệu về JavaSript.......................................................................................
b. Cách thức hoạt động của JavaScript.................................................................
c. Cách sử dụng JavaScript:..................................................................................
CHƯƠNG II: PHÂN TÍCH CẤU TRÚC & XÂY DỰNG WEBSITE.................
2.1 Cấu trúc lưu trữ............................................................................................
2.2 Cấu trúc trang:.............................................................................................
2.3 Phân tích cấu trúc mỗi site:..........................................................................
CHƯƠNG III: MÔ TẢ CÁC KỊCH BẢN SỬ DỤNG ĐỐI VỚI WEBSITE
ĐÃ XÂY DỰNG.....................................................................................................
3.1 Nhu cầu người dùng:........................................................................................
3.2 Hướng dẫn sử dụng website:...........................................................................
CHƯƠNG IV: KẾT LUẬN……………………………………………….......22
lOMoARcPSD| 59735516
5
4.1 Kết quả đạt được..............................................................................................
4.2 Hạn chế............................................................................................................
4.3 Hướng phát triển..............................................................................................
TÀI LIỆU THAM KHẢO…………………………………………………...23
lOMoARcPSD| 59735516
6
CHƯƠNG I: CƠ SỞ LÝ THUYẾT
1.1Giới thiệu tổng quan về Internet – Dịch vụ web
- Internet hay còn gọi là Mng là mt hệ thống thông tin toàn cu có thể
được truy nhập công cng gồm các mng máy tính được liên kt vi nhau.
Hệ thống này truyền thông tin theo kiểu nối chuyển gói d liệu (packet
switching) dựa trên mt giao thức liên mng đã được chuẩn hóa (giao thức
IP). Hệ thống này bao gồm hàng ngàn mng máy tính nhỏ hơn của các
doanh nghiệp, của các viện nghiên cứu và các trường đi học, của người
dùng cá nhn và các chính phủ trên toàn cu, được liên kt bởi mt lot
các công nghệ mng điện tử, không dy và mng quang. Internet mang
theo mt lot các tài nguyên và dịch v thông tin, chẳng hn như các tài
liệu và ứng dng siêu vn bản được liên kt vi nhau của World Wide Web
(WWW), thư điện tử, điện thoi và chia sẻ file.
- Internet mang nhiều ứng dng và dịch v, nổi bật nhất là World Wide Web,
bao gồm phương tiện truyền thông xã hi, thư điện tử, ứng dng di đng,
trò chơi trực tuyn.
- Hu ht các máy chủ cung cấp các dịch v ngày nay được lưu tr trong
các trung tm d liệu và ni dung thường được truy cập thông qua các
mng phn phối ni dung hiệu xuất cao.
Minh họa Internet
lOMoARcPSD| 59735516
7
1.2.Ngôn ngữ: HTML – CSS – JavaScript
1.2.1.HTML
a. Giới thiệu về HTML
- HTML (vit tắt của từ Hypertext Markup Language, hay là "Ngôn ng
Đánh dấu Siêu vn bản") là mt ngôn ng đánh dấu được thit k ra để to
nên các trang web trên World Wide Web. Cùng vi CSS và JavaScript,
HTML là mt trong nhng ngôn ng quan trọng trong lĩnh vực thit k
website. HTML được định nghĩa như là mt ứng dng đơn giản của SGML
và được sử dng trong các tổ chức cn đn các yêu cu xuất bản phức tp.
HTML đã trở thành mt chuẩn mực của Internet do tổ chức World Wide
Web Consortium (W3C) duy tr. Phiên bản chính thức mi nhất của HTML
là HTML 4.01 (1999). Sau đó, các nhà phát triển đã thay th nó bằng
XHTML. Hiện nay, phiên bản mi nhất của ngôn ng này là HTML5.
- Bằng cách dùng HTML đng hoc Ajax, lập trnh viên có thể được to ra
và xử l bởi số lượng ln các công c, từ mt chương trnh son thảo vn
bản đơn giản – có thể gõ vào ngay từ nhng dòng đu tiên – cho đn nhng
công c xuất bản WYSIWYG phức tp. Hypertext là cách mà các trang
Web (được thit k bằng HTML) được kt nối vi nhau. Và như th, đường
link có trên trang Web được gọi là Hypertext. Như tên gọi đã nói, HTML
là ngôn ng đánh dấu bằng thẻ (Markup Language), nghĩa là bn sử dng
HTML để đánh dấu mt tài liệu text bằng các thẻ (tag) để nói cho trnh
duyệt Web cách để cấu trc nó để hiển thị.
b. Cấu trúc cơ bản và một số thẻ thông dụng của HTML
- Cấu trc cơ bản của HTML:
lOMoARcPSD| 59735516
8
<html>
<head>
<title>TIÊU ĐỀ CỦA TRANG WEB</title>
CÁC THẺ KHAI BÁO THÔNG TIN TRANG WEB
</head>
<body>
NHỮNG NỘI DUNG MÀ CHUNG TA MUỐN HIỂN THỊ
TRÊN TRANG WEB
</body>
</html>
1
2
3
4
5
6
7
8
9
- Các thẻ HTML thông dng:
STT
Thẻ HTML
Miêu tả
Kiểu
Tag
1
<html>
Thẻ mở đu của trang HTML
none
2
<head></head>
Thẻ chứa các thẻ trong phn đu trang
HTML
none
3
<title></title>
Tiêu đề trang web
none
4
<meta>
Mô tả tổng quát về ni dung trang web
none
5
<link>
Dùng để nhng mt tập tin nào đó vào
trang web
none
6
<script></
script>
Dùng để nhng các tập tin JavaScript
none
7
<style></style>
Dùng để bao bọc mt ni dung về CSS
none
8
<body></body>
Thẻ chứa ni dung chính của website
block
level
9
<h1></h1>
Thẻ để thể hiện tiêu đề của mt vấn đề nào
đó
block
level
10
<div></div>
Thẻ này là thẻ thường dùng để chứa ni
dung
block
level
11
<span></span>
Thẻ chứa ni dung
inline
12
<p></p>
Thẻ chứa ni dung (đon vn)
block
level
13
<a></a>
Thẻ to link
inline
14
<ul></ul>
Kt hợp vi thẻ <li> để mô tả liệt kê theo
dng danh sách
block
level
15
<img>
Thẻ dùng để hiển thị mt hnh ảnh nào đó
Inline
lOMoARcPSD| 59735516
9
18
<br>
Thẻ xuống hàng
block
level
19
<hr>
Thẻ to đường kẻ ngang
block
level
20
<table></table>
To bảng
block
level
22
<b></b>
To ch đậm
inline
23
<i></i>
To ch nghiêng
inline
24
<u></u>
To ch gch chn
inline
25
<s></s>
To ch gch cắt ngang
inline
27
<button>
</button>
To nt bấm hiển thị thêm thông tin
block
level
29
<pre></pre>
Định dng ni dung
block
level
Và còn nhiều mt số thẻ khác như <nav>, <option>,v.v… -
Entities:
Result
Description
Entity Name
Entity Number
non-breaking space
 
<
less than
<
<
>
greater than
>
>
&
ampersand
&
&
1.2.2.CSS
a. Giới thiệu về CSS
- CSS (vit tắt của từ Cascading Style Sheets) được dùng để miêu tả cách
trnh bày các tài liệu vit bằng ngôn ng HTML và XHTML. Ngoài ra
ngôn ng định kiểu theo tng cũng có thể dùng cho XML, SVG, XUL. Các
đc điểm kỹ thuật của CSS được duy tr bởi World Wide Web Consortium
(W3C). Thay v đt các thẻ quy định kiểu dáng cho vn bản HTML (hoc
XHTML) ngay trong ni dung của nó, bn nên sử dng CSS.
b. Công dụng của CSS
- Hn ch tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy
định kiểu dáng (ch đậm, ch in nghiêng, ch có gch chn, ch màu),
lOMoARcPSD| 59735516
10
khin mã nguồn của trang Web được gọn gàng hơn, tách ni dung của trang
Web và định dng hiển thị, dễ dàng cho việc cập nhật ni dung.
- To ra các kiểu dáng có thể áp dng cho nhiều trang Web, gip tránh phải
lp li việc định dng cho các trang Web giống nhau.
c. Sử dụng CSS:
Có 3 cách sử dng CSS:
• "Inline CSS": Áp dng trực tip trên mt đối tượng nhất định bằng thuc
tính style:
<span style="font-weight:bold; text-decoration:underline;
color:#FF0000;">Đon text cn in đậm, gch chn, màu đỏ</span>
• "Internal CSS": Đt CSS ở đu trang Web để áp dng kiểu dáng cho toàn
b trang ấy, khi đó chỉ cn đt đon CSS vào trong cp thẻ <style> rồi đt
vào trong phn header của Web (gia <head> và </head>):
<style type="text/css">
body {font-family:verdana; color:#0000FF;} /* Kiểu chữ trong trang
Web là "Verdana", màu chữ thông thường là màu xanh dương */ </style>
• "External CSS": Đt các thuc tính CSS vào mt tệp tin riêng biệt (*.css),
khi đó có thể tham chiu đn từ nhiều trang Web khác nhau:
• Ví d về ni dung tệp style.css:
body {font-family:verdana; color:#0000FF;}
• Tham chiu ti tệp tin CSS trên từ trang Web bằng đon mã (mã có thể
nằm ngoài thẻ <head>):
<link rel="stylesheet" type="text/css" href="style.css"/>
lOMoARcPSD| 59735516
11
d. Phân nhóm định dạng CSS
Có thể chia các thuc tính CSS thành 7 nhóm định dng cơ bản
Type Group: định dng cho vn bản.
STT
Nhóm thuộc tính
Miêu tả
1
font-family
Nhóm font được sử dng cho mt đối
tượng HTML
2
font-size
Kích thưc của vn bản
3
font-style
Định kiểu cho font ch nghiêng hay thẳng
4
font-variant
Định kiểu cho font ch thường hoc ch
hoa
5
font-weight
Kiểu của ch
6
line-height
Chiều cao gia các dòng của vn bản
7
text-transform
Định dng hiển thị của font ch trong vn
bản như ch hoa, ch thường, ch cái đu
vit hoa
8
text-decoration
Định dng các trang trí thêm cho vn bản
9
color
Màu sắc của vn bản
• Background Group: định dng hnh ảnh nền cho đối tượng nào đó.
STT
Nhóm thuộc tính
Miêu tả
1
Background-color
Màu nền của đối tượng HTML
2
Background-image
Sử dng nền là hnh ảnh
3
Background-repeat
kiểu sử dng hnh nền nu sử dng hnh
ảnh làm nền cho đối tượng
4
Background-position
Vị trí bắt đu hiển thị của hnh nền
5
Backgroundattachment
Ch đ cố định hnh nền
• Block Group: định dng cho vn bản.
STT
Nhóm thuộc tính
Miêu tả
1
letter-spacing
Khoảng cách gia các k tự
2
word-spacing
Tng hoc giảm khoảng cách gia các từ
trong đon vn bản
3
text-align
Sắp xp các ni dung theo chiều ngang
4
text-indent
Khoảng cách thuc vào đu dòng của mt
đon vn bản
5
white-space
Định dng cho khoảng trắng trong đon
vn bản
6
display
Các kiểu hiển thị của mt phn tử HTML
lOMoARcPSD| 59735516
12
7
vertical-alignn
Vị trí của mt phn tử
• Border Group: định dng đường viền cho mt đối tượng nào đó.
STT
Nhóm thuộc tính
Miêu tả
1
border-width border-top-width,
border-right-width border-bottom-
width, border-leftwidth
Đ rng của đường viền
2
border-style border-top-style, border-
right-style border-bottom-style,
border-left-style
Kiểu hiển thị của đường
viền
3
border-color border-top-color, border-
right-color border-bottom-color,
border-left-color
Màu sắc của đường viền
• Box Group: định dng kích thưc, trị trí cho khối.
STT
Nhóm thuộc tính
Miêu tả
1
width
min-width, max-width
Chiều rng của đối
tượng
2
height
min-height, max-height
Chiều dài của đối
tượng
3
margin
margin-top, margin-right, marginbottom,
margin-left
Khoảng cách đối vi
phn tử bên ngoài
4
padding
padding-top, padding-right,
paddingbottom, padding-left
Khoảng cách đối vi
phn tử bên
5
float
Lệch khối về bên trái
hoc phải
6
clear
Xoá các thuc tính
float của các phn tử
phía trên
• List Group: định dng cho các danh sách.
STT
Nhóm thuộc tính
Miêu tả
1
list-style-position
Vị trí của icon <li>,
giá trị mc định là
outsite
2
list-style-type
Kiểu icon của <li>
3
list-style-image
Hnh ảnh icon của <li>
• Position Group: định dng tọa đ của mt phn tử HTML nào đó.
lOMoARcPSD| 59735516
13
STT
Nhóm thuộc tính
Miêu tả
1
position
Kiểu hiển thị của mt
đối tượng
2
top
Khoảng cách từ đối
tượng đn vị trí top
3
right
Khoảng cách từ đối
tượng đn vị trí right
4
left
Khoảng cách từ đối
tượng đn vị trí left
5
bottom
Khoảng cách từ đối
tượng đn vị trí
bottom
6
z-index
Vị trí của đối tượng
7
overflow, overflow-x, overflow-y
Ch đ hiển thị thanh
cun
e. Bảng màu CSS
Hình minh họa các # màu cơ
bản CSS
1.2.3.JavaScript:
a. Giới thiệu về
JavaSript
- JavaScript, theo phiên bản hiện hành, là mt ngôn ng lập trnh thông dịch
được phát triển từ các niệm nguyên mẫu. Ngôn ng này được dùng rng
rãi cho các trang web (phía người dùng) cũng như phía máy chủ (vi
Nodejs). Nó vốn được phát triển bởi Brendan Eich ti Hãng truyền thông
Netscape vi cái tên đu tiên Mocha, rồi sau đó đổi tên thành LiveScript,
và cuối cùng thành JavaScript. Giống Java, JavaScript có c pháp tương
tự C, nhưng nó gn vi Self hơn Java. .js là phn mở rng thường được
dùng cho tập tin mã nguồn JavaScript.
- JavaScript là ngôn ng phức tp hơn HTML hoc CSS và nó không được
phát hành ở dng beta cho đn nm 1995. Ngày nay, JavaScript được hỗ
lOMoARcPSD| 59735516
14
trợ bởi tất cả các trnh duyệt web hiện đi và được sử dng trên hu ht
mọi trang web để có chức nng mnh mẽ và phức tp hơn.
b. Cách thức hoạt động của JavaScript
JavaScript là ngôn ng lập trnh dựa trên logic, có thể được sử dng để sửa
đổi ni dung trang web và khin nó hot đng theo nhiều cách khác nhau
để đáp ứng vi hành đng của người dùng. Các cách sử dng phổ bin cho
JavaScript bao gồm confirmation boxes, calls-to-action, và thêm thông tin
mi vào thông tin hiện có.
- Nói tóm li, JavaScript là ngôn ng lập trnh cho phép các nhà phát triển
web thit k các trang web tương tác. Hu ht các hot đng mà bn sẽ
thấy trên mt trang web là nhờ JavaScript, gip tng cường các kiểm soát
và hành vi mc định của tr nh
duyệt.
c. Cách sử dụng JavaScript:
- Sử dng thẻ <script> đon mã JavaScript…. </script>
- Tham chiu dưi dng thư viện : sử dng tag link theo c pháp
<script type =”text/javascript” src=”url_trỏ_đn _file_js”></script>
Tm hiểu thêm về JQuery ti đy: https://www.w3schools.com/jquery Theo dõi
Youtube BODUA Group để tm hiểu về JavaScript nói riêng và Thit k Web
nói chung:
https://www.youtube.com/channel/UCf3vstUYEnFWVjWumM3Ij3g
lOMoARcPSD| 59735516
15
CHƯƠNG II: PHÂN TÍCH CẤU TRÚC & XÂY DỰNG
WEBSITE
2.1Cấu trúc lưu trữ
- To 1 thư mc theo yêu cu vi tiêu đề: “Nhóm”
- Chứa website giao diện trang chủ (index.html), các được gii thiệu vào,
mở bán và trưng bày c thể như và cuối cùng là thư mc hnh ảnh (images)
và tệp định dng (style.css).
2.2Cấu trúc trang:
- Giao diện trực quan, đơn giản nhưng không kém phn bắt mắt, gip người
dùng có thể tm kim nhng sản phẩm được trưng bày mt cách dễ dàng
v các website đã được liên kt cht chẽ.
- Hiện ti, trang web đang chứa ni dung thuc thể loi trưng bày, mô tả và
gii thiệu về các địa điểm ẩm thực và du lịch ti Thủ đô Hà Ni.
2.3Phân tích cấu trúc mỗi site: -
Trang chủ gồm 3 phn:
• Thanh điều hưng: dùng thẻ <nav> , được to ra tỉ mỉ trong quá trnh
thit k size, font, color, và là cu nối trong việc liên kt các site khác
vi nhau.
lOMoARcPSD| 59735516
16
• Phn ni dung:
+ Đu tiên là gii thiệu về dùng các tag <nav> để bao quát <img>, tiêu đề và tag
<a>, định dng các tag trên để trông được hài hòa về góc nhn.
<nav>
<div class="nav-bar">
<div class="logo">
<a href="index.html">
<img
src="https://hanoitop10.com/wp-content/uploads/2022/05/top10Hanoi01.png"
alt="">
</a>
</div>
<div class="menu-item">
<ul>
<li>
<a href="#">
<h4>Ẩ(m Thực</h4>
</a>
</li>
// Tương tự với các thư mục khác
</ul>
</div>
</div> </nav>
Kt quả :
+ Phn thứ hai, to ra thư mc chính cho home của web , gồm các thẻ <span> ,
<p> và < button> để gii thiệu lược về trang web này.
<div class="main">
<div class="content-box">
<h2>
<span>TOP 10 Hà Nội</span> - TOP CÁC ĐỊA ĐIỂ(M, DỊCH VỤ
UY TÍN TẠI HÀ NỘI
</h2>
<div class="main-img">
<img src alt="">
</div>
</div>
+ Nt <button> ( Xem thêm ) khi ta nhấp chut vào dòng lệnh <script>
<script>
var loadMoreBtn = document.getElementById('loadMoreBtn');
loadMoreBtn.addEventListener('click', function () { alert('Button
clicked! You can add your logic here.');
lOMoARcPSD| 59735516
17
});
</script>
+ Kt quả:
+ Phn tip theo, dùng thẻ < div > to ra tiêu đề thư mc “ Khám phá danh
mc“ và dùng các thẻ < span >,<a>,< to ra danh sach ni dung “ Ẩm thực , Du
Lịch ,…”
<div class="content-menu">
<div class="content-menu-title">
<h2>KHÁM PHÁ DANH MỤC</h2>
</div>
<div class="content-menu-item">
<span>
<a href="#amthuc"> <img
src="https://hanoitop10.com/wp-content/uploads/2022/04/quan-nuongnhat-4-
min-jpg.webp" alt="">
<h3>Ẩ(m Thực</h3>
</a>
</span>
// Tương tự với các danh mục khác
Kt quả :
lOMoARcPSD| 59735516
18
Phn cuối trang: to ra mt trang web vi hai phn chính: "Ẩm Thực" và
"Du Lịch" ti Hà Ni, trong đó phn "Ẩm Thực" hiển thị danh sách các địa
điểm ẩm thực và liên quan, còn phn "Du Lịch" hiển thị mt địa điểm chính và
danh sách các địa điểm du lịch ph, mỗi địa điểm kèm theo mt hp chứa thông
tin "DU LỊCH".
<div class="food">
<div class="title">
<span>___________________________________________________________
______________ </span>
<h2>Ẩ(M THỰC</h2>
<span>___________________________________________________________
______________ </span>
</div>
<div class="food-content">
<span>
<div class="food-main-content">
<img
src="https://hanoitop10.com/wp-content/uploads/2022/02/pizza-
hanoi-450x253.webp" alt="">
lOMoARcPSD| 59735516
19
<p>
<span ><a href="" style="color:
orangered;">Ẩ(m Thực</a></span> - By
<span><a href="">Hoài Nam</a></span>
</p>
<h3>
<a href="">
Top 10 Địa Chỉ( Ăn Pizza Hà Nội Ngon
Và Nổ(i Tiế_ng Nhấ_t
</a>
</h3>
</div> // Tương tự với các mục khác
Kt quả :
lOMoARcPSD| 59735516
20
CHƯƠNG III: MÔ TẢ CÁC KỊCH BẢN SỬ DỤNG ĐỐI VỚI
WEBSITE ĐÃ XÂY DỰNG
3.1.Nhu cầu người dùng:
- Ngày nay, nhiều người mong muốn bit về các địa điểm ti Hà Ni, nhưng họ
có thể không bit đn địa điểm nào để thm. Có thể ghé xem ngay hôm nay ti
website TOP 10 HANOI này.
3.2.Hướng dẫn sử dụng website:
- Để xem ni dung của trang web, bn có thể mở thư mc chứa các file HTML
bằng cách sử dng trnh duyệt web hoc trnh son thảo mã nguồn. Hoc truy
cập vào đường link:
“file:///C:/Users/Admin/Downloads/demo%20web/index.html”
+ Tuy nhiên, đy chỉ là bản demo, v vậy nó có thể không đy đủ chức nng và
không sử dng được. Mc tiêu chính của trang web là trưng bày và gii thiệu về
các địa điểm ti thủ đô Hà Ni, nhằm cung cấp thông tin chi tit và hấp dẫn cho
du khách.
+ Ngoài ra, thanh điều hưng ở phía trên vẫn hiển thị liên tc khi cun xuống,
nhằm hỗ trợ việc chuyển đổi gia các thư mc mt cách thuận tiện.
CHƯƠNG IV: KẾT LUẬN
4.1 Kết quả đạt được
- Giao diện website thn thiện.
Hiển thị được danh sách các loi đồ dùng công nghệ.
- Hoàn thành mc tiêu gii thiệu, trưng bày, so sánh các sản phẩm. -
Liên kt các site cht chẽ, dễ dàng tm kim.
4.2 Hạn chế
- Chưa hoàn thiện 100%.
- Chưa có tính nng mua sản phẩm.
- Chưa có tính nng tm kim sản phẩm qua thanh search.
4.3 Hướng phát triển
- Bổ sung nhng thiu sót, trao dồi các kĩ nng để phát triển thành 1 trang
web kinh doanh các sản phẩm công nghệ thật sự.
Bấm Tải xuống để xem toàn bộ.