BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN MÔN HỌC
ĐỀ TÀI: XÂY DỰNG WEBSITE
DENISECHANDLER

Giảng viên hướng dẫn : NGUYỄN MAI HUY

Sinh viên thực hiện : NGUYỄN HOÀI THƯƠ NG
MSSV : 2100010223
Khóa : 2021-2025
Chuyên ngành : TRÍ TUỆ NHÂN TẠO

Tp.HCM, tháng 8 năm 2022

 1

2 LỜI MỞ ĐẦU

4 Công nghệ ngày nay luôn biến đổi không ngừng, cứ mỗi giây, mỗi phút lại có
5 sự thay đổi, bởi vậy các nhà thiết kế & lập trình web cần học hỏi, sáng tạo, cập nhật
6 liên tục, kịp thời các công nghệ làm website tiên tiến trên thế giới để phát triển/ tự tạo
7 ra xu hướng làm web mới, qua đó tạo sự khác biệt và lợi thế cạnh tranh với các đối thủ
8 khác.

10 Xu hướng web cần đảm bảo tính thẩm mỹ: Điều này thể hiện qua việc trình bày
11 bố cục giao diện web, sắp xếp hình ảnh, nội dung... sao cho hợp lý nhất nhằm thỏa
12 mãn ánh nhìn của người dùng ngay từ lần đầu tiên "ghé thăm" web. Tạo ra xu hướng
13 làm web mới mẻ, độc đáo nhưng không xa rời nhu cầu thực tế người dùng, phải chú
14 trọng trải nghiệm của người sử dụng.

15

16 Vì thế tôi đã chọn https://denisechandler.com làm đề tài đồ án cho môn học

17 Thiết kế Web . Đây là trang của Denise - một nhà thiết kế tự do (web & font
18 Designer ) sống ở bang Utah (Mỹ). Để diễn đạt những thông điệp về sản phẩm, dịch
19 vụ trên trang chủ của website, ảnh chụp thực tế không phải là lựa chọn tốt nhất.
20 Denise đã chọn phong cách minh họa (illustration) để thiết kế giao diện webs.

21
22

23 LỜI CẢM ƠN

25 Lời đầu tiên, xin trân trọng cảm ơn thầy Nguyễn Mai Huy đã tận tình hướng dẫn tôi
26 trong quá trình học tập cũng như trong việc hoàn thành luận văn.

27

28 Xin cảm ơn lãnh đạo, ban giám hiện cùng toàn thể các thầy cô giáo trường Đại học
29 Nguyễn Tất Thành , khoa Công nghệ Thông tin đã tạo điều kiện cho tôi hoàn thành tốt
30 công việc nghiên cứu , học tập của mình.

31

32 Xin chân thành cảm ơn các thầy , cô đã tận tình giảng dạy cho tôi trong thời gian học
33 tập vừa qua. Cảm ơn các bạn sinh viên trong và ngoài lớp đã góp ý , hoàn thiện bài
34 làm của mình .

35

36 Cuối cùng, tôi xin cảm ơn gia đình, người thân, bạn bè đã luôn bên cạnh, ủng hộ, động
37 viên.

38

39 Do giới hạn kiến thức và khả năng lý luận của bản thân còn nhiều thiếu sót và hạn
40 chế, kính mong sự chỉ dẫn và đóng góp của các Thầy, Cô để bài luận văn của tôi được
41 hoàn thiện hơn. Xin chân thành cảm ơn!

42
43 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
44

45

46

47

48

49

50

52

53

54

55

56 Điểm đồ án:

57

58

59

61 TPHCM, Ngày …… tháng …… năm 2019

62 Giáo viên hướng dẫn
63 (Ký tên, đóng dấu)

64 MỤC LỤC

65
66 LỜI MỞ ĐẦU..........................................................................................................................................1
67 LỜI CẢM ƠN..........................................................................................................................................2
68 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN............................................................................................3
69 MỤC LỤC...............................................................................................................................................4
70 DANH MỤC CÁC BẢNG HÌNH.................................................................................................................6
71 CHƯƠNG 1: NHỮNG KIẾN THỨC ĐÃ HỌC..............................................................................................9
72 1. HTML – CSS – JAVASCRIPT.............................................................................................................9
73 1.1 HTML...............................................................................................................................................9
74 1.1.1 HTML là gì?...................................................................................................................................9
75 1.1.2 CẤU TRÚC HTML...........................................................................................................................9
76 1.1.3 Các phiên bản của HTML qua từng giai đoạn..............................................................................10
77 1.1.4 HTML Tags..................................................................................................................................10
78 1.1.5 Các nguyên tắc cơ bản:...............................................................................................................10
79 1.1.6 Một số tag đã được học:.............................................................................................................11
80 1.2: CSS................................................................................................................................................13
81 1.2.1: CSS là gì?....................................................................................................................................13
82 1.2.2: Tác dụng của CSS.......................................................................................................................14
83 1.2.3: Mức độ ưu tiên..........................................................................................................................14
84 1.2.4: Sử dụng CSS...............................................................................................................................14
85 1.2.5 Selector:......................................................................................................................................14
86 1.2.6: Đơn vị đo thường gặp................................................................................................................15
87 1.2.7: Các dạng CSS phổ biến...............................................................................................................15
88 1.3: JavaScript......................................................................................................................................16
89 1.3.1: JavaScript là gì?..........................................................................................................................16
90 2 . Bootstrap........................................................................................................................................17
91 2.1. Bootstrap là gì?.............................................................................................................................17
92 2.2 . Tác dụng của Bootstrap :.............................................................................................................17
93 2.3 . Ưu điểm của Bootstrap:...............................................................................................................18
94 Chương 2: Phân tích cấu trúc & xây dựng Website.............................................................................20
95 1 . Phân tích cấu trúc :.........................................................................................................................20
96 1.1 . Nơi lưu trữ các file:......................................................................................................................20
97 1.2 . Cấu trúc trang web:.....................................................................................................................20
98 2 . Xây dựng website :.........................................................................................................................21
99 2.1 . Header :.......................................................................................................................................21
100 2.2 . Content1 :....................................................................................................................................23
101 2.3 . Content2 :....................................................................................................................................25
102 2.4 . List1 :...........................................................................................................................................25
103 2.5. List2 :............................................................................................................................................26
104 2.6 . Contact :......................................................................................................................................28
105 2.7 . Footer và Menu :.........................................................................................................................29
106 2.7.1 . Footer :.....................................................................................................................................29
107 2.7.2 . Menu :......................................................................................................................................30
108 CHƯƠNG 3 : TỔNG KẾT.......................................................................................................................34
109 1. Về kiến thức :...................................................................................................................................34
110 2. Về sản phẩm :..................................................................................................................................34
111 3. Tồn tại và hướng phát truyển của trang web :................................................................................34
112 DANH MỤC TÀI LIỆU THAM KHẢO.......................................................................................................35
113
114 DANH MỤC CÁC BẢNG HÌNH
115
116 Hình 1: Cấu trúc HTML.................................................................................................................12
117 Hình 2: Các phiên bản HTML........................................................................................................13
118 Hình 3: HTML Tags.......................................................................................................................13
119 Hình 4 ,5 : Tags heading...............................................................................................................14
120 Hình 6 , 7: Tags p , br...................................................................................................................14
121 Hình 8 , 9: Lồng tag......................................................................................................................14
122 Hình 10 , 11: Tag danh sách.........................................................................................................13
123 Hình 12: Một số loại input...........................................................................................................14
124 Hình 13: Placeholder....................................................................................................................14
125 Hình 14: Kết quả Placeholder......................................................................................................14
126 Hình 15 , 16: Tags select và option..............................................................................................14
127 Hình 17: Iframe............................................................................................................................15
128 Hình 18: Kết quả iframe...............................................................................................................15
129 Hình 19: Symbol và entity............................................................................................................15
130 Hình 20: Symbol và entity............................................................................................................12
131 Hình 21: Comemt.........................................................................................................................12
132 Hình 22: Inline CSS.......................................................................................................................13
133 Hình 23: Kết quả inline CSS..........................................................................................................13
134 Hình 24: External CSS...................................................................................................................13
135 Hình 25: Đơn vị đo thường gặp...................................................................................................14
136 Hình 26: Javascript.......................................................................................................................16
137 Hình 27: Bootstrap.......................................................................................................................17
138 Hình 28 : Kết quả Bootstrap........................................................................................................17
139 Hình 29 :Nơi lưu trữ các file.........................................................................................................18
140 Hình 30 : Header..........................................................................................................................19
141 Hình 31 : Hình ảnh kim đồng hồ..................................................................................................19
142 Hình 32 : HTML kim đồng hồ.......................................................................................................20
143 Hình 33 : CSS vị trí kim đồng hồ...................................................................................................20
144 Hình 34 : CSS animation kim đồng hồ..........................................................................................20
145 Hình 35 : Content1.......................................................................................................................21
146 Hình 36: CSS animation cho phần đầu lắc lư...............................................................................21
147 Hình 37 : HTML cho phương thức liên lạc....................................................................................22
148 Hình 38: CSS cho phương thức liên lạc........................................................................................22
149 Hình 39 ,40: Kết quả cho phương thức liên lạc............................................................................22
150 Hình 41: Content2........................................................................................................................23
151 Hình 42 , 43 : Send me an email..................................................................................................23
152 Hình 44: List1...............................................................................................................................24
153 Hình 45 , 46: Di con trỏ vào sản phầm.........................................................................................24
154 Hình 47: List2...............................................................................................................................25
155 Hình 48: CSS cho phần mái hiên..................................................................................................25
156 Hình 49: Di con trỏ vào font chữ..................................................................................................26
157 Hình 50 : Contact.........................................................................................................................26
158 Hình 51: Các thành phần của trang web ( đã được thu gọn).......................................................27
159 Hình 52: HTML Footer..................................................................................................................28
160 Hình 53: Footer............................................................................................................................28
161 Hình 54: Menu khi đóng..............................................................................................................28
162 Hình 55: Menu khi mở.................................................................................................................29
163 Hình 56: Css Menu.......................................................................................................................29
164 Hình 57: JavaScript Menu............................................................................................................30
165 Hình 58: Ba thanh ngang trong menu..........................................................................................30
166 Hình 59: CSS menu.......................................................................................................................31
167
168
169
170 DANH MỤC CÁC TỪ VIẾT TẮT

171

172 - HTML : HyperText Markup Language.

173 - CSS : Cascading Style Sheets.

174 - Url : Uniform Resource Locator.

175 - WWW : World Wide Web.

176
177 CHƯƠNG 1: NHỮNG KIẾN THỨC ĐÃ HỌC

178 1. HTML – CSS – JAVASCRIPT

179 1.1 HTML

180 1.1.1 HTML là gì?

181 HTML viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh
182 dấu Siêu văn bản" là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang
183 web trên World Wide Web ( Www ). Nó có thể được trợ giúp bởi các công nghệ
184 như CSS và các ngôn ngữ kịch bản giống như JavaScript.
185 Ngôn ngữ đánh dấu này sẽ là cầu nối của sự giao tiếp giữa người dùng và trình
186 duyệt, giúp trình duyệt hiểu được cách thức hiển thị trang web. Khi trình duyệt đọc
187 thấy 1 kí tự A, nó chỉ đơn thuần hiển thị A, chứ không thể biết bạn muốn tô đậm, in
188 nghiêng, hay màu mè hoa lá thế nào cả. Chính lúc đấy, bạn cần HTML, thông qua
189 việc sử dụng các thẻ HTML.
190 Thẻ HTML được định nghĩa bằng một cặp từ khóa nằm giữa dấu < và dấu >, và
191 báo cho trình duyệt biết cách thức hiển thị đoạn kí tự bên trong thẻ HTML đó.
192

193 1.1.2 CẤU TRÚC HTML

194

195
196 Hình 1: Cấu trúc HTML

198 Cấu trúc của HTML rất đơn giản và logic, với bố cục từ trên xuống dưới, từ trái qua
199 phải, với 2 phần chính là HEAD và BODY. Các website viết bằng HTML đều tuân
200 theo cấu trúc cơ bản như sau:
201 Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa chuẩn văn bản) ngay từ
202 dòng đầu tiên.
203 Thẻ <html> cho trình duyệt biết mở đầu và kết thúc của trang HTML.
204 Thẻ <head> chứa tiêu đề và các thông tin khai báo, các thông tin ẩn khác.
205 Thẻ <body> sẽ hiển thị nội dung của trang web. Đây là phần thông tin mà người dùng
206 sẽ nhìn thấy khi trình duyệt đọc các mã HTML.

207 1.1.3 Các phiên bản của HTML qua từng giai đoạn
208

209
210 Hình 2: Các phiên bản HTML

211 1.1.4 HTML Tags

212 Các tag khác nhau sẽ có công dụng khác nhau và được giới hạn bởi dấu mở đầu “<”
213 và kết thúc “>” . Ví dụ : <img> , <lable> , <input> ,…
214 Đa số các tag tồn tại theo từng cặp, bắt đầu bởi thẻ mở (Start tag) và kết thúc (End
215 tag) . Ví dụ : <h1> </h1> , <p> </p> , <b> </b> ,…
216 Một số thẻ không có thẻ đóng, như thẻ <br>, thẻ <img>, <input>,…..
217 Các thẻ đều có thể lồng vào nhau tùy vào nhu cầu của mỗi người.Ví dụ : <h3> <a
218 href="#"> Cảm ơn thầy Nguyễn Mai Huy </a> </h3>

219
220 Hình 3: HTML Tags

221 1.1.5 Các nguyên tắc cơ bản:

222 Luôn đóng thẻ sau khi đã mở. Điều này giúp hạn chế lỗi bất ngờ khi hiển thị trên trình
223 duyệt. Hiện nay có một số trình biên tập lập trình có hổ trợ đóng tags giúp người dùng
224 có trải nghiệm tốt hơn, đỡ lỗi hơn. dụ: Visual Studio Code,...
225 Nên sử dụng chữ thường ghi đặt tên tag (custom tag), không nên sử dụng chữ in hoa.
226 Không nên sử dụng tiếng việt để đặt tên.

227 1.1.6 Một số tag đã được học:

228 -Tag định dạng cho heading có 6 cấp độ: <h1> </h1>, <h2> </h2> , ,… , <h6></h6>

230 Hình 4 ,5 : Tags heading

231 -Tag ngắt xuống hàng của 1 văn bản: <br>

232 -Tag văn bản: <p> </p>
233
234

235

236 Hình 6 , 7: Tags p , br

237
238 -Các tag có thể lòng vào nhau:

239
240 Hình 8 , 9: Lồng tag
241 - Phối hợp làm danh sách bằng tag <ul><li> </li></ul> hoặc <ol><li> </li></ol> tùy
242 vào nhu cầu sử dụng:
243
244

245

246
247 Hình 10 , 11: Tag danh sách

248

249

250 - Tag <div></div> và <span></span>

251 + Tag <div></div> là 1 khối khi dùng nó sẽ xuống hàng.
252 + Tag <span></span> cũng là 1 khối nhưng khi dùng nó sẽ không xuống hàng.
253 - Tag <a> xác định siêu liên kết, được sử dụng để liên kết từ trang này sang trang
254 khác. Phụ thuộc vào link được đưa vào href=” ”.
255 - Tag <img> được sử dụng để nhúng hình ảnh vào trang HTML. Phụ thuộc vào nguồn
256 ảnh đưa vào scr=”
257 - Tag tạo bảng<table></table> <tr></tr> là chia dòng và tag <td></td> là chia số cột.
258 - Tag <form> được sử dụng để tạo một biểu mẫu HTML cho đầu vào của người dùng
259 + Thuộc tính action chỉ định nơi gửi dữ liệu biểu mẫu khi biểu mẫu được gửi.
260 + method: Thuộc tính này dùng để quy định phương thức truyền thông tin từ máy
261 người dùng về cho máy chủ. Chúng ta chỉ có thể lựa chọn một trong 2 giá trị là get
262 hoặc post . Get được sử dụng để yêu cầu dữ liệu từ một tài nguyên cụ thể. Post được
263 sử dụng để gửi dữ liệu đến máy chủ để tạo / cập nhật tài nguyên.
264 - Tag <label> xác định nhãn cho một số phần tử
265 - Tag <input> chỉ định trường đầu vào nơi người dùng có thể nhập dữ liệu và có thể
266 được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính type.
267
268
269 Hình 12: Một số loại input

270

271 +Thuộc tính placeholder chỉ định một gợi ý ngắn mô tả giá trị mong đợi của trường
272 đầu vào (ví dụ: giá trị mẫu hoặc mô tả ngắn về định dạng mong đợi).
273

274
275 Hình 13: Placeholder

276
277
278 Hình 14: Kết quả Placeholder

279

280 -Tag <select> được sử dụng để tạo danh sách thả xuống.

281
282
283 Hình 15 , 16: Tags select và option

284 - Iframe là thành phần hay thẻ tag của một HTML element giúp nhúng HTML, hình
285 ảnh, video hay trang web khác vào website của mình. Iframe viết tắt của cụm từ Inline
286 Frame và tạm dịch là khung nội tuyến.
287

288
289
290 Hình 17: Iframe

291 Hình 18: Kết quả iframe

292 - Symbol được sử dụng thay cho nhiều ký hiệu toán học, kỹ thuật và tiền tệ, không có
293 trên bàn phím thông thường.
294 +Entity: nếu ta sử dụng các dấu nhỏ hơn (<) hoặc lớn hơn (>) trong đoạn code của
295 mình, trình duyệt có thể lộn chúng với các thẻ.
296 Hình 19: Symbol và entity
297

298
299 Hình 20: Symbol và entity

300
301 - Comemt: Nhận xét HTML không được hiển thị trong trình duyệt, nhưng chúng có
302 thể giúp ta ghi chú lại những thứ cần thiết để khi ta có sửa chữa code dễ dàng hơn, biết
303 đoạn code đó dùng làm gì hoặc khi người khác xem code của mình biết đoạn code đó
304 có tác dụng gì.

305
306 Hình 21: Comemt

307 1.2: CSS

308 1.2.1: CSS là gì?

309 CSS là từ viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu được các
310 thiết lập định dạng và bố cục cho trang web. CSS cho phép bạn điều khiển thiết kế của
311 nhiều thành phần HTML chỉ với duy nhất 1 vùng chọn CSS. Điều này giúp giảm thiểu
312 thời gian thiết kế và chỉnh sửa, khi bạn có thể tách biệt được cấu trúc (HTML) và định
313 dạng (CSS).
314 CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác
315 nhau. Style có thể được quy định ở trong chỉ một thẻ HTML, được quy định trong 1
316 trang web hoặc ở trong một file CSS bên ngoài.

317 1.2.2: Tác dụng của CSS

318 Hạn 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
319 dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến mã nguồn của
320 trang Web được gọn gàng hơn, tách nội dung của trang Web và định dạng hiển thị, dễ
321 dàng cho việc cập nhật nội dung.
322 Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải lặp lại việc
323 định dạng cho các trang Web giống nhau.

324 1.2.3: Mức độ ưu tiên

325 Inline CSS > Internal CSS > External CSS

326 1.2.4: Sử dụng CSS

327 Inline CSS: Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style

328
329 Hình 22: Inline CSS

330
331 Hình 23: Kết quả inline CSS

332 Internal CSS: Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn bộ trang ấy,
333 khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header
334 của Web (giữa <head> và </head>):
335 External CSS: Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css), khi đó có thể
336 tham chiếu đến từ nhiều trang Web khác nhau:
337 Tham chiếu tới tệp tin CSS trên từ trang Web bằng cách tạo file CSS riêng và dùng
338 tag link để link file CSS vào trong file HTML

339
340 Hình 24: External CSS

341 1.2.5 Selector:

342 Nếu HTML là khung xương của một trang web thì CSS sẽ quyết định giao diện và bố
343 cục của trang web đó. Từ kiểu chữ, kích thước chữ, tới vị trí ảnh, màu background,...
344 tất cả đều cần tới CSS.
345 Để làm được điều đó, CSS sử dụng các mẫu quy tắc lựa chọn (pattern matching rule)
346 để quyết định xem style nào sẽ áp dụng cho thành phần HTML nào trong trang web.
347 Mỗi mẫu quy tắc lựa chọn này được gọi là một Selector.
348 - Element selector (hay type selector) giúp lựa chọn và định dạng tất cả các element
349 cùng loại trên trang.
350 - Class và ID có thể tái sử dụng và gợp chung các class khác nhau bằng dấu “,”
351 - Class selector lựa chọn và định dạng tất cả các thẻ HTML có chứa class được chỉ
352 định. Class selector sử dụng cấu trúc với dấu (.) đứng trước class cần định dạng.
353 - ID selector giúp lựa chọn và định dạng cho duy nhất một nguyên tố HTML có chứa
354 ID nhất định. ID selector sử dụng cấu trúc với dấu (#) đứng trước ID cần định dạng
355 - Pseudo-element:
356 + Định kiểu chữ cái hoặc dòng đầu tiên của một phần tử
357 + Chèn nội dung trước hoặc sau nội dung của một phần tử
358 +Pseudo-class: sử dụng để xác định trạng thái đặc biệt của một phần tử.
359 +Tạo kiểu cho một phần tử khi người dùng di chuột qua nó.
360 +Tạo kiểu cho các liên kết đã truy cập và không truy cập khác nhau.
361 + Tạo kiểu cho một phần tử khi nó được lấy tiêu điểm.
362 +Selector : chọn tất cả các phần tử có trong trang HTML

363 1.2.6: Đơn vị đo thường gặp

364
365 Hình 25: Đơn vị đo thường gặp

366 Trong đó đơn vị px, rem và % là thường hay sử dụng nhất

367 1.2.7: Các dạng CSS phổ biến

368 - Tác động cả văn bản: Line-height , Text-align ,Text-indent, …
369 - Tác động tới chữ viết: Font-size ,Font-style ,Text-transform ,Text-
370 decoration ,@font-face, Font-family, Font-style, Font-weight, Text-shadow ,….
371 - Tác động tới phạm vi, vùng chứa: Width, min-width, max-width ,Height, min-
372 height, max-height ,Overflow , Background, Background-img, Border, Padding,
373 Margin, Box-shadow , Display , Position, Left, top, bottom, right, Z-index

374 1.3: JavaScript

375 1.3.1: JavaScript là gì?

376 JavaScript là một ngôn ngữ lập trình của HTML và WEB. Nó là nhẹ và được
377 sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng
378 cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động.
379 Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng.
380 JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript,
381 nhưng công ty Netscape đã đổi tên của nó thành JavaScript, bởi vì sự phổ biến như là
382 một hiện tượng của Java lúc bấy giờ. JavaScript xuất hiện lần đầu trong Netscape 2.0
383 năm 1995 với tên LiveScript. Core đa năng của ngôn ngữ này đã được nhúng vào
384 Netscape, IE, và các trình duyệt khác.
385 JavaScript dựa trên ngôn ngữ C, thực tế nó được phát triển dựa trên ngôn ngữ
386 C và mục tiêu thiết kế của nó lại mang hơi hướng của lập trình hướng đối tượng tựa
387 như ngôn ngữ Java).
388 1.3.2: Các ưu điểm của JavaScript
389 Sự tương tác Server ít hơn: Ta có thể xác nhận đầu vào (input) người sử dụng
390 trước khi gửi trang tới Server. Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa là
391 Server của bạn tải ít hơn.
392 Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho một trang
393 web tải lại để thấy xem nếu họ đã quên nhập cái gì đó.
394 Khả năng tương tác tăng lên: Ta có thể tạo các giao diện mà phản ứng lại khi
395 người sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím.
396 Giao diện phong phú hơn: Ta có thể sử dụng JavaScript để bao gồm những
397 mục như các thành phần Drag và Drop (DnD) và các con trượt (Slider) để cung cấp
398 một Rich Interface (Giao diện giàu tính năng) tới site khách truy cập của bạn.
399 1.3.3: Cách sử dụng:
400 - Thêm, xóa các thành phần HTML trên web
401 - Chỉnh sửa các thuộc tính của một thành phần HTML
402 Để viết mã JavaScript ta chỉ việc viết đoạn mã như bình thường và giới hạn chúng
403 trong cặp tag <script > </script>

404
405 Hình 26: Javascript

406 2 . Bootstrap

407 2.1. Bootstrap là gì?

408 Bootstrap là một nền tảng framework hoàn toàn miễn phí, là một trong những
409 mã nguồn mở có chứa các ngôn ngữ lập trình như HTML, CSS và Javascript.
410 Bootstrap giúp bạn tiết kiệm được nhiều thời gian, công sức hơn. Đặc biệt là khi bạn
411 xây dựng hai template cho giao diện PC và mobile đã lỗi thời, thay vào đó thì
412 responsive sẽ giúp bạn hiển thị tốt nhất, tương thích với mọi kích thước màn hình
413 khác nhau.

414 2.2 . Tác dụng của Bootstrap :

415 Hiện nay, Bootstrap đang dần trở nên phổ biến và xứng đáng được lựa chọn
416 nhất, bởi các nhà lập trình đã bổ sung thêm tính năng tùy chỉnh. Tính năng này giúp
417 cho các nhà thiết kế linh hoạt hơn trong việc lựa chọn những thuộc tính, phần tử phù
418 hợp với dự án mà họ đang theo đuổi. Đồng thời cho phép bạn không cần phải tải toàn
419 bộ mã nguồn về máy.
420 Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để
421 tạo ra một mẫu webiste hoàn chỉnh. Với các thuộc tính về giao diện được quy định sẵn
422 như kích thước, màu sắc, độ cao, độ rộng… các designer có thể sáng tạo nhiều sản
423 phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong
424 quá trình thiết kế giao diện website.
425 2.3 . Ưu điểm của Bootstrap:
426 +Với Bootstrap bạn sẽ tiết kiệm được rất nhiều thời gian để tự viết code cho giao diện
427 website của mình.
428 +Nền tảng Bootstrap giúp việc phát triển giao diện website tương thích với mọi thiết
429 bị trở nên dễ dàng hơn và đây cũng là xu thế thiết kế website hiện nay.
430 +Cho phép người dùng truy cập vào thư viện khổng lồ chứa các thành tố dùng để tạo
431 nên giao diện của một website hoàn chỉnh như font, typography, form, table, grid…
432 +Cho phép tùy chỉnh framework của website trước khi tải xuống và sử dụng nó tại
433 khung của trang web.
434 +Tái sử dụng các thành phần lặp đi lặp lại trên trang web.
435 +Bootstrap tương thích với tất cả các trình duyệt hiện đại như Chrome, Internet
436 Explorer, Cốc Cốc, Safari và Opera.
437 +Bootstrap hoạt động theo xu hướng mã nguồn mở nên có thể vào mã nguồn thay đổi
438 chỉnh sửa tùy ý.
439 +Để có thể sử dụng Boostrap ta có thể lên website: để lựa những đoạn code phù hợp
440 với nhu cầu sử dụng của mỗi người.

441
442 Hình 27: Bootstrap

443
444 Hình 28 : Kết quả Bootstrap

445
446

447 Chương 2: Phân tích cấu trúc & xây dựng Website

448 1 . Phân tích cấu trúc :

449 1.1 . Nơi lưu trữ các file:

450
451 Hình 29 :Nơi lưu trữ các file

452 Hệ thống folder :

453 - Study : chứa tất cả quá trình học .
454 - webDesign : chứa những gì học được trong môn Thiết kế Web
455 - deniserchandler : chứa những folder , file cần thiết để xây dựng nên trang web
456 + img : tất cả các hình ảnh sẽ xuất hiện trên trang web
457 + index.html : file HTML - khung xương cho trang web .
458 + main.js : file javascript
459 + style.css : file css

460 1.2 . Cấu trúc trang web:

461 Trang mẫu denisechandler.com bao gồm 6 phần :
462 - Header : phần đầu của trang web , gồm những hình ảnh và hiệu ứng động , gây ấn
463 tượng cho người mới lần đầu vào web .
464 - Content : nội dung
465 + content 1: giới thiệu chung về tác giả và cách thức liên lạc .
466 + content 2 : giới thiệu về công việc và đôi lời muốn nói của tác giả .
467 - List 1 ( trang web) : liệt kê những sản phẩm mà tác giả đã hợp tác cùng các doanh
468 nghiệp nhỏ để hoàn thiện và đưa vào sử dụng . Sản phẩm ở đây cụ thể là những trang
469 web mà Denise đã thiết kế . Ở đây ,khách hàng và doanh nghiệp có thể tham khảo về
470 phong cách thiết kế của cô , từ đó quyết định có nên hợp tác cùng cô hay không.
471 - List 2 ( font chữ ) : những font chữ mà Denise đã và đang bán trên internet .
472 - Contact : phần liên lạc với tác giả thông qua email .
473 - Footer , Menu : điều hướng trang web .

474 2 . Xây dựng website :

475 2.1 . Header :

476
477 Hình 30 : Header

478 - Backgroud là một hình ảnh lớn , rõ nét . Với màu chủ đạo là màu hồng phấn
479 ( #f0ced9 ) .Thêm một vài điểm nhấn là các hình ảnh được chuyển động nhờ
480 animation.
481 Ví dụ : Đồng hồ có thể xoay :
482 - Tách 2 kim đồng hồ thành 2 hình ảnh khách nhau

483
484 Hình 31 : Hình ảnh kim đồng hồ

485 - Thêm thẻ img vào trong thẻ div

486
487 Hình 32 : HTML kim đồng hồ

488
489 - Xác định vị trí của đồng hồ

490
491 Hình 33 : CSS vị trí kim đồng hồ

492
493 - Css animation cho 2 kim đồng hồ :

494
495 Hình 34 : CSS animation kim đồng hồ

496
497 Tương tự như vậy với các hình ảnh khác , tạo nên 1 phần header thật bắt mắt , tạo cảm
498 giác thích thú cho người nhìn . Ví dụ : cây xanh có thể phóng to phóng nhỏ , hình ảnh
499 có thể chuyển động lên xuống , khung ảnh có thể co dãn , …
500
501 2.2 . Content1 :

502 Hình 35 : Content1

503 - Phần này được chia thành 2 nửa , với một bên là hình ảnh cô gái có thể lắc lư đầu
504 ( nhờ CSS animation như ở phần header ) và một bên là văn bản ( dùng thẻ h1 và thẻ
505 p).

506
507 Hình 36: CSS animation cho phần đầu lắc lư

508
509 - Ngoài ra còn có 3 phương thức liên lạc là twitter , pinterest , instagram . Khi di chuột
510 vào 3 hình này , thấy có dịch chuyển lên 10px . Sau đây là cách tạo nên điểm nhấn
511 này:
512 + Lồng thẻ img vào thẻ div , rồi cho vào thẻ a , gắn link cho thẻ a , gắn tên class :

513 Hình 37 : HTML cho phương thức liên lạc

514 + CSS và tạo một Pseudo-class cho class của chúng :

515 Hình 38: CSS cho phương thức liên lạc

516
517 + Kết quả :
518
519 Hình 39 ,40: Kết quả cho phương thức liên lạc

520

521 2.3 . Content2 :

522
523 Hình 41: Content2

524
525 - Cũng như phần content1 , phần content 2 cũng có 2 phần là hình ảnh và văn bản .
526 Điểm nhấn ở đây là trái tim có nhịp đập ( CSS animation ) , và dòng chữ “ send me an
527 email ” có thể đổi màu ( Pseudo-class :hover ) .

528 Hình 42 , 43 : Send me an email

529

530 2.4 . List1 :

531
532 Hình 44: List1

533 - Phần trình bày sản phẩm , khác với các phần còn lại , phần này có backgroud là màu
534 trắng (#fff) . Sử dụng những hình ảnh mô phỏng thú vị để trình bày trang web.
535 - Di con trỏ vào hình ảnh , nó sẽ nghiêng và to hơn một chút (sử dụng Pseudo-
536 class :hover)

537

538 Hình 45 ,
539 46: Di con trỏ vào sản phầm

540 2.5. List2 :

541
542 Hình 47: List2

543
544 - Phần list2 bao gồm những font chữ mà tác giả đã và đang rao bán trên internet , sử
545 dụng những hình ảnh minh họa sặc sỡ để miêu tả font chữ . Dùng backgroud màu
546 hồng nhạt (#EEEEF0) .
547 - Phía trên là mái hiên được sử dụng CSS Animation , khiến chữ shop co ra giãn vào .
548

550
551 Hình 48: CSS cho phần mái hiên

552
553 - Khi di chuột vào font chữ ta sẽ thấy hình ảnh bị thu bé lại , giúp người dùng có
554 những trải nghiệm thú vị khi sử dụng web .

556 Hình 49: Di con trỏ vào font chữ

557
558 - Cũng dùng Pseudo-class :hover như vậy để đổi màu dòng chữ See All Fonts ( thẻ a ,
559 đưa người dùng tới trang bán font chữ ) . Giúp trang web trở nên đỡ nhàm chán hơn .
560

561 2.6 . Contact :

562
563 Hình 50 : Contact
564 - Cũng như 2 phần content , phần contact được chia thành 2 nửa , một bên là hình
565 ảnh , một bên là form để liên lạc cho tác giả . Sử dụng thẻ p , input[type=’email’] và
566 nút subscribe ( thẻ input[type=’submit’] ) .
567 - Và nút subscribe cũng được CSS Pseudo-class :hover từ màu xanh sang màu hồng .

568 2.7 . Footer và Menu :

569 - Cả 2 đều đóng vai trò điều hướng cho người dùng tới những nơi khác nhau trên
570 trang web .
571 + Mỗi thành phần trên trang web đều được đặt bằng một id riêng biệt .
572 + Khi bấm vào thẻ a sẽ đưa người dùng tới thành phần trên trang web mà người dùng
573 cần tìm .

574
575 Hình 51: Các thành phần của trang web ( đã được thu gọn)

576

577 2.7.1 . Footer :

578
579 Hình 52: HTML Footer

580

581
582 Hình 53: Footer

583 - Có thêm một thẻ script , để thêm năm hiện tại vào cuối trang web , thể hiện mốc thời
584 gian mà người dùng đang truy cập .

585 2.7.2 . Menu :

586
587 Hình 54: Menu khi đóng

588
589
590 Hình 55: Menu khi mở

591 - Ta thấy menu luôn ở vị trí góc trên cùng của trang web , nhờ vào CSS position: fixed
592 , giúp menu luôn ở 1 vị trí dù người dùng có kéo lên hay kéo xuống hay đang ở 1
593 thành phần khác trên trang web .
594 - Và thêm một chút javascript để giúp menu đóng mở theo ý muốn của người dùng và
595 từ làm 3 thanh ngang chuyển sang dấu X .

596
 597 Hình 56: Css Menu

599 Hình 57: JavaScript Menu

600 - Khi người dùng click vào ‘Ba thanh ngang’ thì phần Menu sẽ hiện ra . (từ bên ngoài
601 chạy vào , cụ thể là translate(500px,-500px) => translate(0,0 ) , đồng thời ba thanh
602 ngang cũng chuyển thành dấu X ( một thanh biến mất , 2 thanh còn lại xoay 45 độ và -
603 45 độ). (Phần này được tham khảo trên các video youtube , với từ khóa Hamburger
604 Menu CSS )

605
606 Hình 58: Ba thanh ngang trong menu
607
608
609 Hình 59: CSS menu

610
 611

612 CHƯƠNG 3 : TỔNG KẾT

613

614 1. Về kiến thức :

615 - Nắm chắc về HTML , CSS .
616 - Sử dụng thành thạo phần mềm Visual Studio Code .
617 - Tuy nhiên , kiến thức còn nhiều hạn chế , cần phải học hỏi nhiều hơn nữa.
618 - Hạn chế lớn nhất là còn mông lung về phần bootstrap , chưa đưa vào sử dụng được .
619 - Chưa nắm chắc khái niệm về javascript .

620 2. Về sản phẩm :

621 - Vì còn hạn chế về kiến thức nên chưa làm được nhiều tính năng cho trang web .
622 - Code còn nhiều chỗ dài dòng , thiếu sót .
623 - Nhưng trang web rõ ràng , đẹp mắt , gần giống với trang gốc .
624 - Đã có thể áp dụng javascript vào bài , cụ thể là phần menu .
625 - Bài làm đã được đưa vào github , website đã được đưa lên internet với địa chỉ là
626 https://zaden81.github.io/WebDesign/

627 3. Tồn tại và hướng phát truyển của trang web :

628 - Cần thêm nhiều tính năng hơn .
629 - Có thể responsive để người dùng có thể trải nhiệm trang web trên mọi thiết bị một
630 cách dễ dàng nhất .
631
632

633 DANH MỤC TÀI LIỆU THAM KHẢO

634
635 [1] Nguyễn Mai Huy, Slide bài giảng môn Thiết kế Web, Khoa CNTT, Trường Đại
636 học Nguyễn Tất Thành.

637 [2] Nguyễn Mai Huy , các video trên kênh youtube Huy Nguyen Mai .

638 [3] Trang Web W3Schools Online Web Tutorials: https://www.w3schools.com/

639 [4] Trang mục tiêu: https://denisechandler.com/

640 [5] Trang học lập trình cho người đi làm : https://fullstack.edu.vn/

641 [6] Bách khoa toàn thư mở trực tuyến - Wikipedia

642 [7] Các video trên youtube .
643 [8] Các nguồn thông tin từ các mạng xã hội : Facebook , stackoverflow , tiktok
644

645