ỦY BAN NHÂN DÂN TP.

HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC SÀI GÒN
KHOA: CÔNG NGHỆ THÔNG TIN

--------

Nội dung ôn tập WEB 1

HỌC KỲ I
(2022-2023)
 WEB 1
1. Nguyên tắc hoạt động website:
1.1 Khái niệm và thuật ngữ
Website là tập hợp những trang (page) con, mà mỗi trang con là một siêu văn bản (hypertext) bao
gồm văn bản, hình ảnh, video và có thể liên kết từ trang này sang trang khác
Hiện nay, để một website có thể vận hành trên môi trường Word Wide Web, cần bắt buộc có 3 phần
chính:
Tên miền (Domain): là tên riêng và duy nhất của website
Hosting (Hosting Share, máy chủ, vps...): là máy chủ chứa mã nguồn, và dữ liệu của trang web cũng
như các tập tin liên quan
Mã nguồn web (Source code): là các tệp tin html, xhtml, ... hoặc một bộ code được lập trình bằng các
ngôn ngữ asp.net, PHP, java, Ruby on Rails....

1.2 Nguyên tắc hoạt động website

- Từ máy client gõ địa chỉ URL của trang web vào thanh địa chỉ của web browser, khi đó web
browser sẽ dựa vào tên domain để tìm kiếm IP của web server (bằng cách dò trên DNS Server)
- Khi có IP, web browser sẽ gửi yêu cầu đến web server để lấy nội dung trang web
- Web server sẽ xử lý yêu cầu của client: lấy nội dung của website mà client yêu cầu để gửi client.
- Khi nhận được nội dung trang web thì web browser sẽ hiển thị lên cho người dùng.
- Trình duyệt web sẽ tách địa chỉ website ra làm ba phần:
+) Giao thức (http)
+) Máy chủ tên miền (www.webname.com)
+) Tên tệp (file.htm)
- Trình duyệt web liên hệ với máy chủ tên miền (DNS server) để phân giải tên miền
“www.webname.com” thành địa chỉ IP của web server
- Trình duyệt sẽ gửi tiếp 1 kết nối tới máy chủ địa chỉ IP tương ứng cổng 80.
- Dựa trên giao thức HTTP, trình duyệt gửi yêu cầu đến máy chủ, yêu cầu tệp:
http://webname.com/file.htm

2|Page
- Máy chủ sẽ gửi đoạn text dạng html đến trình duyệt của web client. Trình duyệt đọc các thẻ html,
định dạng trang web và kết xuất ra màn hình.

Data Driven Websites

Sơ đồ trên minh họa một máy tính cá nhân trên đó một trang web được xây dựng và máy chủ nơi
trang
web được lưu trữ.
Kết nối của cả hai là World Wide Web hoặc Internet: một chuỗi hàng trăm nghìn máy tính (được mô
tả
trong sơ đồ dưới dạng các vòng tròn)
Mỗi máy tính hoặc "nút" được kết nối với mạng toàn cầu (được mô tả bằng các mũi tên) và được xác
định duy nhất bởi một Địa chỉ IP.

Cơ chế hoạt động của DNS

1.3 Web hosting service:

+ Khái niệm về dịch vụ lưu trữ web, và cho thuê domain

3|Page
Web hosting được gọi chung là hosting, nó là một dịch vụ lưu trữ và chia sẻ dữ liệu trực tuyến, nó là
không gian trên máy tính. Nếu máy chủ đã cài đặt các dịch vụ Internet như World Wide Web (www),
File Transfer, FTP và Mail…, Trong khu vực này, bạn có thể lưu nội dung web hoặc dữ liệu.
Các tính năng của Web Hosting:
Tên Miền (Domain): trong mối tương quan với Web Hosting thì Tên Miền nhằm giúp Website dễ
dàng hiển thị trên internet hơn là thông qua giao thức mã hóa IP (Internet Protocol) truyền thống đồng
thời Tên Miền cũng là tên gọi đại diện cho IP.
2. Dung lượng lưu trữ (Disk Page): là một trong các thông số kỹ thuật quan trọng đối với Web
Hosting mà mọi người cần phải biết. Nó đại diện cho khả năng lưu trữ dữ liệu trên Website, nếu dung
lượng lưu trữ đã dùng hết, Website sẽ vận hành chậm chạp thậm chí không thể vận hành. Nếu rơi vào
trường hợp này tốt hơn hết là người dùng nâng cấp dung lượng lưu trữ.
3. Băng thông (Bandwith): băng thông Website là một khái niệm mô tả lượng dữ liệu thông qua
Website được phép truyền tải trong một thời gian nhất định (tải lên khi chỉnh sửa, thiết kế mới và đưa
dữ liệu vào Web; tải xuống khi người dùng lướt Web và thực hiện các hành vi liên quan đến đọc dữ
liệu). Nếu băng thông Web đã gần hết hoặc đã hết thì tốc độ truy cập Website từ người dùng sẽ rất
chậm hoặc gần như không thể.
4. Cơ chế bảo mật, sao lưu và phục hồi dữ liệu: cơ chế bảo mật của server như thế nào (loại máy chủ
sử dụng, công nghệ bảo mật đang dùng, cơ chế bảo mật là cứng (thiết bị) hay mềm (soft)…, bên cạnh
đó cơ chế sao lưu và phục hồi dữ liệu khi xảy ra sự cố (đối với các máy chủ share Hosting vật lý
truyền thống thì vấn đề này là tối quan trọng). Thông dụng và tốt nhất hiện nay là sao lưu 1 tuần/lần
được áp dụng tại DIGISTAR, Mắt Bão, PA, Nhân Hòa… cần lưu ý nếu một ngày một lần sao lưu dữ
liệu thì vừa tốn kém chi phí mà vừa không bảo mật (một nghịch lý trong ngành lưu trữ máy chủ
Hosting)
5. Phần mềm hỗ trợ kèm theo: thường là các phần mềm quản lý việc tải lên (upload) hoặc tải dữ liệu
xuống máy tính người dùng (download), thông dụng là Direct Admin, cPanel, Kloxo nếu là máy chủ
Hosting linux còn đối với máy chủ Hosting window là Plesk, Ecompak…
6. Tương thích mã nguồn thông dụng: các mã nguồn phổ biến có được hỗ trợ không (joomla các phiên
bản, wordpress các phiên bản, magento, nukeviet, vbb, xenforo… Tuyệt vời nếu hỗ trợ thêm các
phiên bản mã nguồn mới xuất hiện hiện nay như Drupal, Python, Perl…
7. Tương thích phiên bản lập trình: gói dịch vụ Hosting của nhà cung cấp tương thích với phiên bản
lập trình nào (ASP, ASP.NET, PHP 5.1, PHP 5.2, …), cũ hay mới (ví dụ PHP 4x hay 5x, ASP hay
ASP.NET…). Và sẽ thật tuyệt vời nếu nhà cung cấp cho phép tùy biến phiên bản lập trình như
DIGISTAR.

+ Giải thích các thông số: dung lượng lưu trữ (disk space), băng thông (bandwidth), tên miền
con (sub-domain), email (có domain riêng), ngôn ngữ lập trình web và cơ sở dữ liệu được web
server hỗ trợ.

2. Khái niệm và sử dụng HTML + CSS

4|Page
2.1 Kiến thức về sử dụng HTML. Vd: hiểu rõ cú pháp, cấu trúc file HTML, các thẻ
HTML thông dụng...
 Cú pháp
Cú pháp đơn giản DOCTYPE trong HTML5 như sau:
<!DOCTYPE html>

 Cấu trúc
Cấu trúc cơ bản của trang HTML
Cấu trúc cơ bản của trang HTML có dạng như sau, thường gồm 3 phần:

<!Doctype>: Phần khai báo chuẩn của html hay xhtml.

<head></head>: Phần khai báo ban đầu, khai báo về meta, title, css, javascript…
<body></body>: Phần chứa nội dung của trang web, nơi hiển thị nội dung.
Cấu trúc cơ bản

<!DOCTYPEhtml>
<html>
<head>
<title>Tiêuđềtrangweb</title>
</head>

<body>
...Phầnthânviếtởđây...
</body>
</html>
Cấu trúc cơ bản của trang web
Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang
chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout.
Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn
flash, hoặc các form ngắn như form tìm kiếm, ...
Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong
toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).
Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ
(sidebar).
Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.
Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local navigation), hoặc
các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo, ...
Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện
thoại, mail liên hệ, ... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên
kết, ...

5|Page
  Các thẻ thông dụng
STTThẻ 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 phần đầu của trang HTML None
3 <title></title> Tiêu đề trang web none
4 <meta> Mô tả tổng quát về nội dung trang web None
5 <link> Dùng để nhúng một tập tin nào đó vào trang web None
6 <script></script> Dùng để nhúng các tệp tin javascript None
7 <style></style> Dùng để bao bọc một nội dung về CSS none
8 <body></body> Thẻ chứa nội dung chính của website Block level
9 <h1></h1> Thẻ thể hiện tiêu đề của một vấn đề nào đó Block level
10 <div></div> Thẻ này là thẻ thường dùng để chứa nội dung Block level
11 <span></span> Thẻ chứa nội dung Inline
12 <p></p> Thẻ chứa nội dung (đoạn văn) Block level
13 <center></center> Thẻ căn giữa các đối tượng nằm bên trong Block level
14 <a></a> Thẻ tạo link Inline
Kết hợp với thẻ <li> để mô tả liệt kê theo dạng danh
15 <ul></ul> Block level
sách
16 <img> Thẻ dùng để hiển thị một hình ảnh nào đó Inline
17 <form></form> Thẻ hiển thị những phần tử trong form nhập liệu Block level
18 <br> Thẻ xuống dòng Block level
19 <hr> Thẻ tạo đường kẻ ngang Block level
20 <table></table> Tạo bảng   Block level
  <tr></tr> Tạo dòng trong bảng  
  <td></td> Tạo cột trong dòng của bảng  
  <th></th> Tạo dòng đầu tiên của bảng  
21 <iframe></iframe> Tạo frame Block level
22 <b></b>, <strong></strong>Tạo chữ đậm Inline
23 <i></i>, <em></em> Tạo chữ nghiêng Inline
24 <u></u>,<ins></ins> Tạo chữ gạch dưới Inline
25 <s></s> Tạo chữ gạch cắt ngang Inline
26   Tạo kiểu chữ (mũ trên, mũ dưới) Inline
27 <blockquote></blockquote> Mô tả một phần của trích dẫn Block level
28 <tt></tt> <code></code> Tạo kiểu chữ cho phần tử mô tả mã nguồn Block level
29 <pre></pre> Định dạng nội dung Block level
Phân loại thẻ HTML

6|Page
None: Khối này không hiển thị nội dung
Block level: Khối này hiển thị nội dung bên trong và chiều ngang tràn hết trình duyệt
Inline: Khối này hiển thị nội dung bên trong và chiều ngang tùy thuộc độ dài của các đối tượng bên
trong khối. Và nó sẽ nằm trên một dòng.
=> Các thẻ HTML trong cặp thẻ <body></body> thường là thẻ block và inline
Ghi nhớ: + Chuyển block thành inline dùng float: left; hoặc display: inline;
+ Chuyển inline thành block dùng display: block;

2.2 HTML form fields: khái niệm về form, control nhập liệu, sử dụng các thẻ HTML
form fields.
Biểu mẫu - web form - được tạo ra trong HTML là khu vực hình thành nên sự tương tác giữa người
dùng và ứng dụng web. Các form cho phép người dùng nhập dữ liệu vào, sau đó gửi dữ liệu đó cho
web server, hoặc nhập dữ liệu vào sử lý dữ liệu ngay tại client side.
form trong HTML được tạo ra bằng thẻ <form>, bên trong form đó nó chứa một hoặc nhiều phần tử
để nhập liệu gọi là các điều khiển (control), có nhiều loại điều khiển như:

Các thẻ input HTML

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">(giá trị mặc định)
 <input type="time">
 <input type="url">
 <input type="week">

7|Page
2.3 Kiến thức về sử dụng CSS. Vd: mục đích CSS, phân loại, cú pháp CSS, các thuộc
tính CSS thông dụng...
 Mục đích
CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng với mục đích tìm và định dạng các phần tử
được tạo ra bởi ngôn ngữ đánh dấu như HTML. CSS có thể làm cho các phần tử đó trở nên phong phú
và nổi bật bằng cách trang trí thêm màu sắc, thay đổi màu chữ hoặc bố cục, cấu trúc của trang.
Ngoài ra, CSS còn giúp tiết kiệm thời gian và công sức cho những nhà thiết kế website bởi khả năng
điều khiển định dạng của nhiều trang web và phân biệt cách hiển thị của website đó.
Dựa trên lý thuyết thì CSS là một yếu tố không cần thiết phải có. Nhưng nếu thiếu đi CSS thì trang
web sẽ chỉ là một trang chứa văn bản và thiếu đi sự chuyên nghiệp, thu hút và hấp dẫn khách hàng.

 Phân loại
External CSS: Nhập css ở một folder .css, liên kết tới trang html <link rel="stylesheet" href="">
Internal CSS: Nhập css ở phần head (vd: <head> <style>p{color: brown;} </style> </head>)
Inline CSS: Nhập css ngay trong thẻ html (vd: <p style= “color: red; fon-size:20px;”>abcde</p>

 Cú pháp
 Các thuộc tính thông dụng
Các thuộc tính css định dạng box
 box-sizing: Xác định cách tính width và height cho thành phần. Giá trị: (border-box, content-
box)
 display: Xác định cách mà thành phần sẽ hiển thị. Giá trị: (inline, block, inline-block, 
flex, table, inline-table, table-row, table-cell, list-item, none.)
 width: Xác định kích thước ngang của thành phần. Giá trị: đơn vị kích thước (px, pt, em, rem,
%, vw, vh)
 max-width: Xác định kích thước ngang tối đa của thành phần. Giá trị: đơn vị kích thước. max-
width sẽ được ưu tiên hơn width. Ví dụ, khi đặt width là 5px và max-width là 2px, thì khi này
thành phần sẽ hiển thị với chiều dài là 2px.
 min-width: Tương tự max-width, nhưng áp dụng cho chiều ngang tối thiểu.
 height: Tương tự width, nhưng áp dụng cho chiều dọc.
 max-height: Tương tự như max-width, nhưng áp dụng cho chiều dọc.
 min-height: Tương tự min-width, nhưng áp dụng cho chiều dọc.
 outline: Xác định dường viền bao ngoài của thành phần. Giá trị: (width, style, color).
 border: Xác định dường viền của thành phần. Nằm ngay trong outline. Giá trị giống định dạng
của outline.
 border-radius: Xác định độ cong các góc của thành phần. Giá trị: đơn vị kích thước.
 padding: Khoảng đệm xung quanh nội dung của thành phần. Nằm giữa phần content và
border. Giá trị: đơn vị kích thước

8|Page
  margin: Khoảng cách tính từ đường biên của thành phần hiện tại với các thành phần khác
xung quanh. Giá trị: đơn vị kích thước.
 background-color: Màu nền của thành phần. Giá trị: đơn vị màu
 overflow: Xác định điều gì xảy ra khi phần content bị tràn so với box chứa chính nó. Giá trị:
(visible, hidden, scroll, auto).
 box-shadow: Xác định một đổ bóng cho thành phần.
 position:Xác định cách định vị cho thành phần.
Giátrị: (static, relative, absolute, fixed, sticky).
 top: Khoảng cách từ biên bên trên của thành phần hiện tại so với biên bên trên của thành phần
được định vị NS.
 left: Tương tự như top, nhưng áp dụng cho biên bên trái.
 right: Tương tự như top, nhưng áp dụng cho biên bên phải.
 bottom: Tương tự như top, nhưng áp dụng cho biên bên dưới.
 z-index: Xác định thứ tự ngăn xếp của thành phần xét theo chiều sâu, giống như layer trong
photoshop vậy. 
 visibility: Xác định thành phần có được nhìn thấy hay không.
 opacity: Xác định độ trong suốt cho thành phần. Giá trị: số thực từ 0 đến 1. 0
 float: Xác định thành phần có trôi nổi hay không. Giá trị: left, right
 clear: Xác định phía trái hoặc phải hoặc cả trái và phải của thành phần, mà tại đó các thành
phần float không được phép xuất hiện. Giá trị: left, right, both
 resize: Xác định người dùng có thể thay đổi kích thước của thành phần.
 vertical-align: Xác định cách căn chỉnh theo chiều dọc của thành phần. Giá trị: baseline,
length, sub, super, top, text-top, middle, bottom, text-bottom
Các thuộc tính css định dạng văn bản
 color: Xác định màu chữ. Giá trị: giá trị màu.
 font-family: Xác định font chữ. Giá trị: font1, font2, font3 ... Font có thể là font cụ thể hoặc
họ font. Chúng ta có các họ font như sans-serif (không có chân), hay serif (có chân)... Các
font / họ font cách nhau bởi dấu phẩy. Trình duyệt sẽ load từ trái qua phải cho đến khi tìm
được font như khai báo.
 font-size: Xác định độ nhỏ hay lớn của chữ. Giá trị: giá trị kích thước.
 font-weight: Xác định độ đậm nhạt của nét chữ. Giá trị: số nguyên hàng trăm, từ 100 - 900.
100 là nét chữ nhạt nhất, 900 là nét chữ đậm nhất.
 font-style: Xác định kiểu của chữ có nghiêng hay không. Giá trị: normal, italic, oblique
 text-align: Căn chỉnh chữ theo chiều ngang. Giá trị: left, right, center, justify
 text-transform: Xác định có viết hoa văn bản hay không. Giá trị: none, capitalize, uppercase,
lowercase

9|Page
  text-indent: Xác định thụt dòng đầu tiên của văn bản. Giá trị: giá trị độ dài
 text-decoration: Xác định một gạch ngang của văn bản. Giá trị: line color style. Trong đó:
 text-shadow: Xác định đổ bóng đi kèm chữ. Giá trị: h v blur color hoặc none. Trong đó:
 letter-spacing: Khoảng cách giữa các ký tự trong văn bản với nhau. Giá tri: đơn vị kích thước.
 word-spacing: Khoảng cách giữa các từ trong văn bản với nhau. Giá tri: đơn vị kích thước.
 line-height: Chiều cao của các dòng trong văn bản. Giá trị: đơn vị kích thước
 white-space: Xác định cách xử lí ký tự khoảng trắng trong thành phần. Giá trị: normal,
nowrap, pre, pre-line, pre-wrap
 word-break: Xác định các từ sẽ được ngắt ra sao khi đến cuối mỗi dòng. Giá trị:  normal,
break-all, keep-all, break-word
 word-wrap: Xác định các từ dài có bị ngắt và chuyển xuống dòng tiếp theo hay không. Giá
trị: normal, break-word

3. Giao diện website

3.1 Các khái niệm về website:
+ Phân loại website
Phân loại website theo cấu trúc website
Website được phân loại theo dạng cấu trúc có thể hiểu là dạng dữ liệu và cách vận hành của trang
web. Chúng gồm 2 loại như sau:

 Website tĩnh (static website)

Website tĩnh là dữ liệu web không được thay đổi thường xuyên. Website tĩnh được lập trình trên nền
tảng HTML, CSS và Javascript. Nếu bạn muốn thay đổi nội dung trên web quản trị viên phải thực
hiện sửa đổi trực tiếp trên mã lệnh và phải am hiểu về ngôn ngữ lập trình. Vì thế nên website tĩnh
không được sử dụng phổ biến nữa.

 Website động (dynamic website)

Hầu hết các website hiện nay đều là website động. Đây là loại web dùng nền tảng HTML, CSS,
Javascript, PHP hoặc ASP.NET. Quản trị viên của web khi muốn cập nhật thông tin hoăc thêm bớt
module sẽ thao tác đơn giản, nhanh chóng hơn.
+ Các thành phần của website
Các thành phần cơ bản của website bao gồm: tên miền, web hosting, source code. Một website được
xây dựng cũng giống như một ngôi nhà vậy. Để biết được vị trí nhà bạn ở đâu thì cần phải có địa chỉ
nhà, ngôi nhà sẽ được đặt trên một mảnh đất, và cuối cùng là các loại vật liệu cấu tạo như gạch, cát,
ximăng, thép, … để xây dựng nên ngôi nhà.
+ Sitemap
Sitemap (sơ đồ website) là một file liệt kê các trang và tệp tin trên website. Danh sách liệt kê được sắp
xếp theo dạng sơ đồ phân tầng (giảm dần sự quan trọng) giúp các công cụ tìm kiếm: Thu thập dữ liệu
trên trang web của bạn hiệu quả hơnBiết những URL nào bạn muốn ưu tiên xuất hiệnHiển thị kết quả
trên trang tìm kiếm thông minh hơn.

10 | P a g e
 ví dụ về sitemap

Các loại sitemap:

 HTML Sitemap
HTML Sitemap là sơ đồ website xây dựng bằng mã HTML giúp cho người dùng dễ tiếp cận
mục họ đang tìm hơn
HTML Sitemap nên được đặt ở phần Footer để người dùng dễ tìm thấy nhất.
 XML Sitemap
XML Sitemap được tạo nên với mục đích giúp bot của các công cụ tìm kiếm định hướng và
thu nhập thông tin trên website dễ dàng, nhanh chóng hơn.
 Các loại Sitemap khác
Sitemap Index: Tập hợp các Sitemap được đính kèm và được dùng để đặt trong file robots.txt
Sitemap-category.xml: Tập hợp cấu trúc của các danh mục trên website.
Sitemap-products.xml: Sitemap dành cho các link chi tiết về các sản phẩm trên trang.
Sitemap-articles.xml: Sitemap dành cho các link chi tiết của từng bài viết trên website.
Sitemap-tags.xml: Sitemap dành cho các thẻ trên website.
Sitemap-video.xml: Sitemap dành riêng cho video trên các page, website.
Sitemap-image.xml: Sitemap dành cho các link về hình ảnh.
+ Trang chủ
• Toàn bộ website đều được thiết lập quanh trang chủ.
• Trang chủ xác định rõ chủ đề website
• Trang chủ xác định phong cách thiết kế của website
• Lưu ý khi sử dụng đồ hoạ
+ Hệ thống liên kết
Link là một liên kết nối trang web này với một trang kia, các kết nối này có thể trên cùng một trang
web (một domain, gọi là internal) hoặc liên kết với một tranh khác bên ngoài (khác domain, gọi là
external).
Hệ thống link là một mạng lưới gồm tất cả các internal và external link đan xem lại với nhau một cách
logic nhằm mục đích nâng cao giá trị cung cấp thông tin cho người đọc cũng như là tương thích với
các thuật toán của Google, nâng trang web lên những thứ hạng cao khi có người dùng tìm kiếm.

 External Links là gì?

Liên kết ngoài (External Link) được chia thành Inbound Link và Outbound Link.Trong đó Inbound
Link các liên kết trỏ đến trang web của bạn từ các trang web khác (còn được gọi là backlink). Còn
Outbound Link là các liên kết trỏ đến các trang web khác từ trang web của bạn.

11 | P a g e
  Internal Links là gì?
Internal Link (Liên kết nội bộ) là một liên kết từ trang này sang trang khác của cùng 1 tên miền
(Domain). Tất nhiên, điều hướng trang web, menu website (Website navigation) của bạn là một ví dụ
về liên kết nội bộ. Nhưng Internal Link thường chỉ các liên kết trong nội dung trên các trang.

 Backlinks là gì?
Backlink là những liên kết trả về từ các blog, diễn đàn, mạng xã hội, website khác tới website của
bạn.
Backlink được xem là một trong những ưu tiên hàng đầu khi đánh giá xếp hạng của công cụ tìm kiếm.
Một website có càng nhiều backlink chất lượng thì khả năng cạnh tranh thứ hạng càng cao.
+ Phân biệt giao diện cho người dùng cuối và giao diện cho người quản trị web

3.2 Giao diện website:

+ Quan điểm khi thiết kế giao diện website
+ Thiết kế hướng người sử dụng
+ Các giúp đỡ định hướng rõ ràng
+ Không có trang cuối (dead-end)
+ Băng thông và các yếu tố phần cứng
+ Đơn giản, nhất quán và tính ổn định
+ Phản hổi đối thoại
+ Tính tương thích trên các trình duyệt
+ TK cho quản trị và cập nhật nội dung
+ Nguyên tắc C.R.A.P.

 Contrast (sự tương phản)

 Repetition (sự lặp lại)
 Alignment (sự sắp hàng)
 Proximity (khoảng cách gần)
+ Tính tiện dụng trong thiết kế giao diện: một số nguyên tắc thiết kế tiện dụng, một số sai lầm
thường gặp khi thiết kế giao diện website
Nguyên tắc thiết kế tiện dụng

 Tổ chức website chặt chẽ và dễ sử dụng.

 Sử dụng từ ngữ dễ hiểu.
 Dễ dàng khám phá các đường link.
 Thời gian tải về nhanh.
 Nội dung không có hình ảnh.
 Dễ theo dõi "quá trình bán hàng".
 Tương thích với đa số trình duyệt web.
 Một số vấn đề khác

12 | P a g e
 Tránh các lỗi chính tả
Tránh những lời mời chào thái quá
Sử dụng những trạng thái thông báo
Một số sai lầm thường gặp khi thiết kế giao diện website

 Kích cỡ website quá lớn

 Màu sắc và độ tương phản
 Không biết mua hàng thế nào
 Điều hướng kém, bố cục rối rắm
 Không phân loại nội dung
 Không tương tác với người truy cập
 Website có thiết kế quá mức cần thiết
 Nhồi nhét quá nhiều thứ vào 1 website

4. Quá trình xây dựng website

4.1 Tổng quan quá trình xây dựng website
Tiếp nhận yêu cầu nguồn thông tin từ khách hàng
Lập kế hoạch
Lựa chọn tên miền website và hosting
Thiết kế giao diện
Xây dựng tính năng website
Kiểm tra và chỉnh sửa
Đào tạo
Bảo trì
4.2 Chi tiết mỗi giai đoạn trong quá trình này

4.3 Vai trò của mỗi nhóm người (người thiết kế, người lập trình, khách hàng) trong quá trinh
xây dựng website. Nhấn mạnh, phân biệt công việc thiết kế và lập trình web.

13 | P a g e
 5. Khái niệm client-script và sử dụng NNLT Javascript
5.1 Kiến thức về NNLT thông dịch client-script Javascript
 JavaScript là gì?
JavaScript (JS) là một ngôn ngữ lập trình thông dịch (được dịch lúc chạy), JavaScript ngày nay được
ứng dụng rộng rãi trên nhiều môi trường khác nhau, nó tạo ra các ứng dụng chạy phía Server (xem
như NodeJS), các ứng dụng di động (xem React) ... Javascript được sử dụng rất phổ biến để tích hợp
vào các trang web, chạy ngay trong trình duyệt phía client giúp cho Website có được cách tương tác
linh hoạt hơn với người dùng.
Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt. Nó có thể can thiệp với các
hành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễ dàng. Hay nói cách
khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phía client. Tuy nhiên, hiện nay với sự
xuất hiện của NodeJS đã giúp cho Javascript có thể làm việc ở backend.
 Javascript dùng để làm gì?
Bên cạnh việc tìm hiểu javascript là ngôn ngữ gì thì chúng được sử dụng để làm gì cũng rất quan
trọng. Việc nắm bắt được mục đích của ngôn ngữ đặc biệt này sẽ giúp bạn dễ dàng sử dụng chúng hơn
trong công việc. Cụ thể như sau:
+) Thay đổi nội dung HTML: Một trong số nhiều phương thức HTML JavaScript chính là
getElementById (). Chúng được sử dụng để tìm một phần tử của HTML với id =”demo” và dùng để
thay đổi nội dung của phần từ (Internal HTML) sang thành “Hello JavaScript”
+) Thay đổi giá trị thuộc tính HTML: Tổng quan về javascript còn có thể sử dụng để thay đổi các giá
trị của thuộc tính. Ví dụ: thay đổi thuộc tính src (source) của tag<img>.
+) Thay đổi kiểu HTML: Đây chính là một hoạt động biến thể của việc thay đổi thuộc tính của HTML
ở trên. Ví dụ: document.getElementById(‘demo’).style.fontSize = ’35px;
+) Ẩn các phần tử HTML: Một hoạt động tiếp theo là Javascript có thể ẩn được các phần tử HTML.
Chúng có thể được thực hiện thông qua hoạt động thay đổi kiểu hiển thị các phần tử HTML.
+) Hiển thị các phần tử HTML: Một điểm đặc biệt là JavaScript có thể hiển thị được các yếu tố
HTML ẩn. Đồng thời, cũng có thể thực hiện được thông qua cách thay đổi kiểu hiển thị phần tử.
 Ưu điểm
+) Chương trình rất dễ học.
+) Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanh chóng hơn.
+) Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đến một compiler.
+) JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau.
+) Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn nhiều so với các
ngôn ngữ lập trình khác.
+) JS còn có thể được gắn trên một số các element hoặc những events của các trang web.
+) Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng
thêm nhiều trải nghiệm mới cho người dùng.
+) Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra những input thay vì cách kiểm tra
thủ công thông qua hoạt động truy xuất database.

14 | P a g e
+) Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop, Slider để cung cấp
đến cho người dùng một Rich Interface (giao diện giàu tính năng).
+) Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau.
 Nhược điểm
+) JS Code Snippet khá lớn.
+) JS dễ bị các hacker và scammer khai thác hơn.
+) JS cũng không có khả năng đa luồng hoặc đa dạng xử lý.
+) Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng.
+) Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến sự không đồng nhất.
+) Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phép đọc hoặc ghi các file.
+) JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết nối mạng.
5.2 Kiến thức về sử dụng Javascript. Vd: cú pháp, kiểu dữ liệu, biến, hàm...

 Cú pháp
Cú pháp JavaScript là tập hợp các quy tắc, các chương trình JavaScript được xây dựng:

var x, y, z; // khai báo biến

x = 5;
y = 6; // gán giá trị cho biến
z = x + y; // tính toán lại giá trị
Comment trong Javascript

var x = 5; // Khai báo biến x và cung cấp giá trị cho nó là 5

// Khai báo biến y và cung cấp giá trị cho nó là x+ 2

var y = x + 2;

/* Đây là ví dụ về comment trên nhiều dòng trong JavaScript

code */

document.getElementById("test_el").innerHTML = "Some text";

document.getElementById("test_el2").innerHTML = "More text";

 Biến
1. Biến là gì?
Giống như nhiều ngôn ngữ lập trình khác, JavaScript có các biến. Các biến có thể được coi là các
thùng chứa có tên. Bạn có thể đặt dữ liệu vào các vùng chứa này và sau đó tham khảo dữ liệu chỉ bằng
cách đặt tên vùng chứa.

2. Biến JavaScrip được lưu ở đâu.

Các biến JavaScript được lưu trữ trong bộ nhớ của browser process ( tiến trình trình duyệt) hiểu nôm
na 1 cách đơn giản là biến được lưu trong phần Ram mà trình duyệt đang sử dụng.

15 | P a g e
 3.Cách khai báo biến
Javascript hỗ trợ 3 cách để khai báo một biến, đó là sử dụng các từ khóa: let, var và const trong đó:
 Const: được dùng để khai báo hằng số, giá trị của nó không thay đổi trong suốt chương trình.
Nó giống với từ khóa final của Java vậy.
 var: biến được khai báo với từ khóa var sẽ được truy cập ở bất kể đâu trong chương trình.
 let: từ khóa này giúp cho biến chỉ có thể được truy xuất bên trong phạm vi block quanh nó
(block được định nghĩa bởi dấu ngoặc nhọn {}).
4. Cách đặt tên biến, hàm
Trong Javascript, định danh (identifiers) được sử dụng để đặt tên biến, từ khóa, hàm và labels.
Việc định danh nói chung là theo quy tắc sau:
Ký tự đầu tiên của định danh phải là chữ cái (a-z, A-Z) hoặc ký tự $ hoặc dấu gạch dưới (_)
Không được sử dụng chữ số làm ký tự đầu tiên của định danh.

var person; // Đúng

var _person; // Đúng
var __person; // Đúng
var person1; // Đúng

var 10persion; // Sai

Ngoài ra, các định danh có phân biệt chữ hoa với chữ thường nhé.

// Đây là 2 biến hoàn toàn khác nhau.

var Name = "Joe";
var name = "John";
 Kiểu dữ liệu của biến
Khi bạn đọc đến phần khai báo biến, bạn sẽ thấy ngạc nhiên rằng: Không thấy định nghĩa kiểu dữ liệu
của biến khi khai báo, vậy sao biết biến đó có kiểu dữ liệu là gì? Về vấn đề này thì Javascript không
có chặt chẽ như Java.
Với Javascript, kiểu dữ liệu sẽ được xác định một cách tự động khi chương trình thực thi. Điều này có
nghĩa là một biến có thể có nhiều kiểu dữ liệu ở những thời điểm khác nhau.

var myTest = 123 ; // myTest là một số

var myTest = "Xin chào các bạn độc giả VNTALKING "; //myTest là một string/text

var myTest = false; // myTest là một boolean

Theo tiêu chuẩn ES7, có 7 kiểu dữ liệu:

 Kiểu boolean
 Kiểu null
 Kiểu undefined
 Kiểu số (int)
 Kiểu chuỗi (String)
 Kiểu Symbol (mới trong ECMAScript 6)
 Kiểu đối tượng (Object)

 Hàm

16 | P a g e
Function(Hàm) là gì?
Hàm trong JavaScript là một chương trình con giúp thực thi một công việc cụ thể. Để định nghĩa hàm
trong JavaScript, bạn sử dụng từ khoá function với cú pháp là:
function functionName([parameter1], [parameter2],...) {
statement1;
statement2;
...
}
1. Khai báo hàm
Để khai báo hàm, chúng ta dùng từ khóa function, theo sau nó là:
 Tên hàm
 Danh sách các tham số truyền vào hàm, được đặt trong ngoặc đơn và cách nhau bởi dấu phẩy.
 Các câu lệnh của JavaScript để tạo ra một hàm, được đặt trong ngoặc nhọn {...}.
Ví dụ, để định nghĩa một hàm in ra chữ "Hello World" ở console:

function sayHello () {
console.log("Hello World");
}
2. Biểu thức hàm (Hàm trong biến)
Trong khi việc khai báo hàm ở trên là một câu lệnh về mặt cú pháp, các hàm cũng có thể tạo ra bằng
một biểu thức hàm (function expression). Một hàm như vậy có thể nặc danh; nó không cần phải có
tên. Ví dụ, hàm sayHello ở trên có thể được khai báo như sau:

5.3 Khái niệm cơ bản về XSS. Từ khóa: “cross-site scripting”

XSS (Cross site scripting) là một lỗ hổng ứng dụng web trong đó một người dùng cuối có thể tấn công
bằng cách chèn vào các website động (ASP, PHP, CGI, JSP ...) những thẻ HTML hay những đoạn mã
script nguy hiểm có thể gây nguy hại cho những người sử dụng khác. Lỗ hổng XSS đã tồn tại từ lâu
nhưng kịch bản hiện nay vẫn có thể thực hiện với những kiểu tấn công mới trong tương lai. Bài viết
này trình bày một nghiên cứu chuyên sâu trong sự nguy hiểm của lỗ hổng XSS và cách khai thác lỗ
hổng, nó cũng giới thiệu các biện pháp khắc phục các cuộc tấn công XSS.

6. Khái niệm & sử dụng mô hình Javascript + HTML DOM, xử lý sự kiện

6.1 Kiến thức về sự kiện và xử lý sự kiện

 Sự kiện là gì?
Một trang web với các thao tác như click chuột, hay di chuột,… Đây được xem là các sự kiện và
JavaScript có thể bắt các sự kiện này thông qua HTML DOM.
Các sự kiện này được cụ thể bằng các thuộc tính HMTL như: onclick (click chuột), onmouseover (di
chuột qua), ….
Và bằng cách lắng nghe các sự kiện và người dùng tương tác, ta gửi trả phản hồi lại tương ứng đó gọi
là xử lý sự kiện.

17 | P a g e
Bạn có thể thêm sự kiện bằng cách thêm thuộc tính sự kiện vào phần tử HTML
Ví dụ một phản ứng với sự kiện click chuột của người dùng:
<button id="btn" onclick="myFunction()">Click vào đây</button>
<script>
    function myFunction() {
        alert("Bạn đã click vào một phần tử trong HTML DOM");
    }
</script>

 Các sự kiện phổ biến thường gặp

Dưới đây mô tả các sự kiện phổ biến thường gặp:

 Xử lý sự kiện

6.2 Ứng dụng xử lý một số sự kiện thông dụng (đã giới thiệu trên lớp)

18 | P a g e
19 | P a g e
20 | P a g e