Hãy hình dung bạn mở trình duyệt, gõ địa chỉ của một cửa hàng sách trực tuyến rồi nhấn Enter. Chỉ sau chưa đầy một giây, trang chủ xuất hiện với logo, thanh menu, danh sách sách mới và nút "Thêm vào giỏ". Phía sau khoảnh khắc ngắn ngủi đó là cả một chuỗi sự kiện: trình duyệt tìm máy chủ, gửi yêu cầu, nhận phản hồi, dựng trang. Và trước đó nữa là cả một quy trình làm việc của nhóm phát triển: hỏi khách hàng cần gì, vẽ sơ đồ, thiết kế, viết nội dung, lập trình, kiểm thử, triển khai. Buổi học đầu tiên của khóa Thiết kế Web giúp bạn nhìn toàn cảnh bức tranh ấy: Website là gì, hoạt động ra sao, được tạo ra theo quy trình nào và khi thiết kế cần nghĩ tới những vấn đề gì. Các buổi sau sẽ đi sâu vào từng công cụ (HTML, CSS, JavaScript); hôm nay ta xây "bản đồ" để không bị lạc.

Mục tiêu buổi học

Sau buổi này bạn có thể định nghĩa Website, trang Web, URL, máy khách (Client), máy chủ (Server) và giải thích cách trình duyệt gửi HTTP Request, nhận HTTP Response để hiển thị trang.
Sau buổi này bạn có thể phân biệt mạng LAN, WAN, Internet, Web tĩnh với Web động và nêu được ba thành phần chính tạo nên một Website.
Sau buổi này bạn có thể đọc và tách một đường dẫn Web thành scheme, authority (địa chỉ và cổng), path, parameters và anchor; biết cổng mặc định của HTTP và HTTPS.
Sau buổi này bạn có thể kể tên và mô tả đầu ra của 7 bước trong quy trình phát triển Web, phân biệt sitemap với wireframe, UI với UX, Frontend với Backend.
Sau buổi này bạn có thể nêu và áp dụng các vấn đề cần quan tâm khi thiết kế: tính khả dụng, khả năng tương thích, khả năng tiếp cận, SEO và thiết kế Web đáp ứng (RWD).

Bản đồ buổi học

Phần	Nội dung	Thời lượng gợi ý
1. Các khái niệm cơ bản	Website, mạng máy tính, Web tĩnh/động, đường dẫn Web, trình duyệt, kèm bài nhóm 1.1–1.4	80 phút
2. Quy trình phát triển Web	7 bước từ thu thập thông tin đến triển khai và bảo trì	35 phút
3. Các vấn đề cần quan tâm khi thiết kế Web	Tính khả dụng, tương thích, tiếp cận, SEO, RWD	40 phút
Thực hành nhanh, ôn tập, tổng kết	Khám phá một Website thật, câu hỏi ôn tập, tóm tắt	25 phút

Tổng cộng 180 phút, trong đó thực hành (chạy thử ví dụ, tự gõ mã, làm bài tập trên hệ thống chấm) chiếm khoảng một nửa. Buổi này chủ yếu là kiến thức nền, nhưng bài tập vẫn là lập trình: bạn sẽ tự viết chương trình xử lý URL, mã trạng thái HTTP, tham số truy vấn — đúng những thứ trình duyệt và máy chủ làm mỗi ngày.

1. Các khái niệm cơ bản

Giáo trình: Chương 1 — mục "Các khái niệm cơ bản" (Khái niệm về Website; Mạng máy tính; Phân loại Website; Đường dẫn Web; Trình duyệt Web).

1.1. Khái niệm về Website

Trước hết là một cái tên: W3C (World Wide Web Consortium) là tổ chức phi lợi nhuận quốc tế được thành lập năm 1994 bởi Tim Berners-Lee — người sáng lập ra World Wide Web. Mục đích của W3C là xây dựng và định hướng các tiêu chuẩn, hướng dẫn về công nghệ Web, nhằm đảm bảo tính tương thích và tiên tiến của các ứng dụng Web. W3C hoạt động dựa trên sự hợp tác của các thành viên (các công ty công nghệ hàng đầu, tổ chức học thuật, cá nhân khắp thế giới); quy trình phát triển tiêu chuẩn mang tính mở, minh bạch và dựa trên sự đồng thuận. Chính tổ chức này đã đưa ra định nghĩa:

Website là một tập hợp các trang Web được liên kết với nhau và được truy cập qua một tên miền chung hoặc một địa chỉ Web (URL).

Như vậy, Website là tập hợp các trang Web (trang thông tin) được tạo ra để hiển thị nội dung trên mạng Internet. Một trang Web có thể chứa văn bản, hình ảnh, video, âm thanh và các liên kết đến trang Web khác. Mỗi trang Web được định danh bằng một địa chỉ duy nhất gọi là URL (Uniform Resource Locator); người dùng truy cập nội dung của trang thông qua trình duyệt Web (Web browser). Đôi khi một Website chỉ chứa một trang Web duy nhất. Website thường được gọi tắt là Web; trong giáo trình và trong khóa học này, hai khái niệm có ý nghĩa tương đương.

Website được tạo ra với nhiều mục đích khác nhau:

Loại	Mục đích	Ví dụ nội dung
Cá nhân	Phục vụ cá nhân	Blog, portfolio, trang chia sẻ sở thích
Doanh nghiệp	Giới thiệu sản phẩm, dịch vụ; kênh giao tiếp với khách hàng	Trang công ty, cửa hàng trực tuyến
Giáo dục	Học tập, tài liệu	Nền tảng học trực tuyến, thư viện tài liệu, trang của trường học
Giải trí	Giải trí	Video, trò chơi, âm nhạc, sự kiện trực tuyến

Website sau khi tạo ra được đặt trên máy chủ (Server) và được truy cập từ máy khách (Client) thông qua trình duyệt. Máy khách là các thiết bị dùng để truy cập Website: máy tính, máy tính bảng, điện thoại thông minh… Máy chủ chứa thông tin, dữ liệu của Website. Người dùng gửi yêu cầu tới máy chủ và nhận về dữ liệu tương ứng. Quá trình này diễn ra qua các giao thức HTTP hoặc HTTPS, bảo đảm việc truyền tải dữ liệu hiệu quả và (với HTTPS) an toàn. Khi nhận yêu cầu, máy chủ Web xử lý và trả về phản hồi — có thể là nội dung trang Web, hình ảnh, hoặc dữ liệu lấy từ cơ sở dữ liệu.

🌐 Mô hình máy khách – máy chủ của Web

💻 Máy khách (Client)

https://www.example.com

Trình duyệt Web (Chrome, Safari, Edge, Firefox…) gửi yêu cầu và hiển thị trang nhận về.

① Yêu cầu HTTP (Request)

GET /index.html HTTP/1.1
Host: www.example.com

🌐 qua mạng: LAN → WAN (ISP) → Internet

② Phản hồi HTTP (Response)

HTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE html> …

🖥️ Máy chủ Web (Server)

📁 Thư mục gốc của Website

📄 index.html

📄 style.css

📄 app.js

📄 logo.png

🗄️ Cơ sở dữ liệu (nếu có)

Nhận yêu cầu, đọc tệp hoặc truy vấn dữ liệu, rồi trả phản hồi.

Mạng máy tính nối máy khách với máy chủ

LAN: mạng cục bộWAN: do ISP quản lýInternet: nối qua IXP

Mã trạng thái trong phản hồi

200 thành công (OK)301 chuyển hướng404 không tìm thấy500 lỗi ở máy chủ

Trên một máy tính đơn (localhost), cùng một máy vừa là máy khách vừa là máy chủ.

Trình duyệt (máy khách) gửi yêu cầu HTTP; máy chủ Web xử lý rồi trả phản hồi HTTP chứa tài liệu HTML để trình duyệt hiển thị.

Sơ đồ trên (Hình 1-1 trong giáo trình) cho thấy kết nối giữa máy khách và máy chủ thông qua mạng Internet: nhiều thiết bị khác nhau ở phía trái cùng gửi yêu cầu qua mạng, máy chủ ở phía phải trả phản hồi. Hãy nhớ mô hình hai đầu này, vì mọi thứ trong khóa học đều xoay quanh nó: HTML, CSS, JavaScript chạy ở phía máy khách (trong trình duyệt); còn PHP, ASP.NET, Node.js … chạy ở phía máy chủ.

Ví dụ dưới đây mô phỏng cực kỳ đơn giản mô hình này bằng JavaScript: một "máy chủ" là một hàm nhận đường dẫn và trả về phản hồi gồm mã trạng thái và nội dung; "máy khách" là đoạn mã gửi yêu cầu rồi in phản hồi.

JavaScript · chạy thử được

// "Máy chủ": kho trang và hàm xử lý yêu cầu
const kho = {
  "/": "<h1>Cửa hàng sách</h1>",
  "/gioi-thieu.html": "<h1>Về chúng tôi</h1>"
};

function mayChu(request) {
  if (request.method === "GET" && kho[request.path]) {
    return { status: 200, reason: "OK", body: kho[request.path] };
  }
  return { status: 404, reason: "Not Found", body: "Không tìm thấy" };
}

// "Máy khách" gửi hai yêu cầu
for (const path of ["/", "/khong-co.html"]) {
  const response = mayChu({ method: "GET", path });
  console.log("GET " + path + " -> " + response.status + " " + response.reason);
  console.log("   nội dung:", response.body);
}

Chạy thử và để ý: yêu cầu thứ nhất thành công (200 OK), yêu cầu thứ hai không có trong kho nên nhận 404 Not Found. Đây chính là hai mã trạng thái bạn sẽ gặp nhiều nhất khi duyệt Web.

Lưu ý: Trong giáo trình, "Web" và "Website" được dùng với nghĩa tương đương. Còn "Internet" là hạ tầng mạng toàn cầu, "World Wide Web" là dịch vụ chạy trên hạ tầng ấy. Email, truyền tệp… cũng chạy trên Internet nhưng không phải là Web.

Mở rộng: Tim Berners-Lee tạo ra Web ở CERN vào cuối thập niên 1980; W3C ra đời năm 1994 để các hãng không "mỗi nhà một kiểu". Ngày nay chuẩn HTML do WHATWG và W3C cùng duy trì, nhưng với người học, cứ nhớ rằng W3C là nơi đặt ra "luật chơi" cho Web.

1.2. Mạng máy tính

Mạng máy tính là tập hợp các thiết bị kết nối với nhau nhằm trao đổi dữ liệu và tài nguyên thông qua các giao thức và phương tiện truyền thông khác nhau. Một kết nối mạng là điều kiện bắt buộc để Website hoạt động. Hầu hết Website được truy cập qua mạng Internet (mạng toàn cầu), nhưng cũng có thể triển khai trong mạng cục bộ khi máy chủ và máy khách cùng nằm trên một mạng nội bộ — ví dụ trang thông báo nội bộ của một doanh nghiệp. Một số loại mạng phổ biến:

Mạng cục bộ (LAN – Local Area Network) kết nối các máy tính trong phạm vi gần, thường là mạng nội bộ trong một tổ chức.
Mạng diện rộng (WAN – Wide Area Network) gồm nhiều mạng LAN kết nối với nhau thành mạng quy mô lớn hơn, có thể là một thành phố hay một quốc gia. Một ISP (Internet Service Provider) là đơn vị sở hữu, quản lý một mạng WAN, đồng thời cung cấp dịch vụ truy cập Internet.
Internet gồm các mạng WAN kết nối với nhau và trao đổi thông tin qua các điểm trao đổi Internet (IXP – Internet eXchange Point); ước tính thế giới có khoảng 600 IXP (số liệu năm 2022).

Mạng	Phạm vi	Ai quản lý	Ví dụ
LAN	Gần: một phòng, một tòa nhà	Một tổ chức	Mạng của phòng máy trường học
WAN	Rộng: thành phố, quốc gia	ISP	Mạng của nhà cung cấp dịch vụ Internet
Internet	Toàn cầu	Nhiều WAN nối nhau qua IXP	Mạng mà bạn dùng để vào Website

Để Website khả dụng và hiệu quả, máy chủ Web phải được kết nối tới máy khách qua mạng máy tính. Để Website an toàn, mạng cũng cần được cấu hình và bảo vệ chặt chẽ nhằm tránh tấn công mạng và thất thoát thông tin. Ngược lại, cũng có trường hợp Website chạy trên một máy tính đơn — khi đó máy tính ấy vừa là máy khách, vừa là máy chủ. Đây chính là cách bạn sẽ làm trong cả khóa học: mở tệp HTML ngay trên máy của mình.

Mẹo: Giáo trình có công cụ minh họa "Hành trình một yêu cầu Web" (fit.neu.edu.vn/smartdoc/congcu/web-hanh-trinh-yeu-cau.html). Ngay sau đây bạn sẽ có mô phỏng tương tự để tự bấm từng bước.

Hành trình một yêu cầu Web: DNS → TCP → HTTP

chọn kịch bản rồi bấm Bước tiếp

bước 0/7

Trình duyệt

máy khách

Máy chủ DNS

8.8.8.8

Máy chủ Web

203.0.113.25:443

0. Nhập địa chỉ. Bạn gõ URL (hoặc bấm một liên kết). Trình duyệt tách URL: scheme cho biết dùng giao thức HTTPS, host cho biết hỏi máy chủ nào, path cho biết cần tài nguyên nào.

thông điệp bước này

URL https://fit.neu.edu.vn/index.html

scheme https → cổng mặc định 443

host fit.neu.edu.vn

path /index.html

🔒 https://fit.neu.edu.vn/index.html

Gõ địa chỉ rồi nhấn Enter ⏎|

Mô phỏng này cho bạn đi từng bước: tên miền được đổi thành địa chỉ IP (DNS), trình duyệt kết nối TCP, gửi HTTP Request, máy chủ trả HTTP Response, rồi trình duyệt hiển thị. Hãy bấm từng bước và đọc phần giải thích; bạn sẽ gặp lại chính các khái niệm này ở các phần sau.

1.3. Phân loại Website

Ba thành phần chính tạo nên một Website là:

Máy khách — nơi có trình duyệt;
Máy chủ — nơi cung cấp dịch vụ;
Hệ thống mạng — kết nối hai thành phần trên với nhau.

Website được chia làm hai loại: Web tĩnh (static) và Web động (dynamic).

Web tĩnh

Một trang Web tĩnh là trang có nội dung chỉ thay đổi khi lập trình viên sửa đổi nó. Trang được đặt trên máy chủ, thường dưới dạng tệp HTML (HyperText Markup Language — ngôn ngữ đánh dấu siêu văn bản, ngôn ngữ được thiết kế để tạo nên các trang Web). Nói gọn: một trang Web tĩnh là một tệp HTML lưu trên máy chủ. Cách làm việc gồm ba bước:

Người dùng gửi yêu cầu (request) bằng trình duyệt thông qua giao thức HTTP.
Máy chủ gửi trả phản hồi (response) chứa tài liệu HTML.
Trình duyệt thực hiện kết xuất (render) và hiển thị nội dung tài liệu HTML.

Khi người dùng gõ địa chỉ đầy đủ của trang HTML (ví dụ một tài liệu hướng dẫn trên Website của CRAN), yêu cầu gửi tới máy chủ chứa địa chỉ đó; máy chủ tìm tệp HTML tương ứng rồi gửi trả về; trình duyệt hiển thị. Các yêu cầu gửi tới máy chủ gọi là HTTP Request — được định dạng theo giao thức HTTP (HyperText Transfer Protocol, giao thức truyền tải siêu văn bản). Dữ liệu máy chủ gửi về là HTTP Response, trong đó chứa nội dung trang HTML. Nếu người dùng bấm một liên kết trên trang vừa nhận để xem trang khác, một HTTP Request mới lại được tạo ra và gửi đi — quá trình lặp đi lặp lại như vậy.

Ví dụ dưới đây là một trang Web tĩnh nhỏ. Dù mở lúc nào, bao nhiêu lần, nội dung cũng y hệt nhau, vì nó chỉ là các thẻ HTML viết sẵn.

HTML · chạy thử được

<h2>Cửa hàng sách Lamda</h2>
<p>Giờ mở cửa: 8h – 21h mỗi ngày.</p>
<p>Địa chỉ: 207 Giải Phóng, Hà Nội.</p>
<a href="#gioi-thieu">Giới thiệu</a>
<script>
console.log("Trang tĩnh: nội dung viết sẵn trong tệp HTML");
console.log("Số phần tử trong body:", document.body.children.length);
</script>

Web động

Web động (dynamic Web) là loại trang Web có khả năng tạo ra và hiển thị nội dung động cho người dùng. Khác với Web tĩnh (nội dung không đổi theo thời gian), Web động cho phép tương tác và cung cấp nội dung được tạo ra hoặc thay đổi dựa trên yêu cầu của người dùng hoặc các sự kiện xảy ra trên trang. Các đặc điểm khác biệt:

Được tạo bởi một chương trình (program) hoặc kịch bản (script) trên máy chủ Web;
Chương trình/kịch bản được vận hành bởi một máy chủ ứng dụng;
Dữ liệu có thể được cung cấp bởi một máy chủ dữ liệu.

Một trang Web động được tạo ra khi người dùng yêu cầu chứ không có sẵn từ trước; thông tin trả về phụ thuộc vào HTTP Request. Khi nhận yêu cầu, máy chủ Web chọn máy chủ ứng dụng phù hợp để xử lý; máy chủ ứng dụng chạy mã lệnh hoặc kịch bản để sinh ra trang HTML, có thể truy vấn máy chủ dữ liệu để lấy dữ liệu cho trang. Xong, trang HTML được gửi lại qua HTTP Response. Cần ghi nhớ một điều quan trọng: trình duyệt hoàn toàn không quan tâm đây là Web tĩnh hay động — nó chỉ gửi yêu cầu và hiển thị trang HTML nhận được. Một Website động giúp người dùng tương tác để thực hiện một công việc, vì vậy còn được gọi là ứng dụng Web.

Tiêu chí	Web tĩnh	Web động
Nội dung	Có sẵn, chỉ đổi khi lập trình viên sửa	Sinh ra khi có yêu cầu, phụ thuộc yêu cầu/dữ liệu
Máy chủ làm gì	Lấy tệp HTML và gửi trả	Chạy chương trình/kịch bản (qua máy chủ ứng dụng), có thể truy vấn máy chủ dữ liệu
Ví dụ	Trang giới thiệu, tài liệu hướng dẫn	Cửa hàng trực tuyến, mạng xã hội, hệ thống quản lý học tập
Trình duyệt nhận được	Tài liệu HTML	Tài liệu HTML (vẫn là HTML!)

Các máy chủ Web phổ biến gồm IIS, Apache, Nginx… Các công nghệ xây dựng Web động được gọi là công nghệ phía máy chủ: JSP, ASP.NET, PHP, Node.js… (đi kèm tạo ra máy chủ ứng dụng làm nhiệm vụ sinh trang HTML). Các máy chủ dữ liệu phổ biến: MySQL, PostgreSQL, SQL Server, MongoDB…

Ví dụ sau mô phỏng điểm khác biệt cốt lõi: với cùng một yêu cầu /sach?the-loai=…, máy chủ động sinh trang HTML từ dữ liệu (mô phỏng máy chủ dữ liệu), còn trang tĩnh thì trả nguyên văn.

JavaScript · chạy thử được

// "Máy chủ dữ liệu"
const csdl = [
  { ten: "Lập trình Web", theLoai: "cntt", gia: 120000 },
  { ten: "Cơ sở dữ liệu", theLoai: "cntt", gia: 95000 },
  { ten: "Truyện ngắn chọn lọc", theLoai: "van-hoc", gia: 60000 }
];

// Trang tĩnh: luôn trả đúng chuỗi viết sẵn
const trangTinh = "<ul><li>Lập trình Web</li><li>Cơ sở dữ liệu</li></ul>";

// "Máy chủ ứng dụng": sinh HTML theo yêu cầu
function trangDong(theLoai) {
  const dong = csdl
    .filter((s) => s.theLoai === theLoai)
    .map((s) => "<li>" + s.ten + " - " + s.gia + "đ</li>");
  return "<ul>" + dong.join("") + "</ul>";
}

console.log("Tĩnh      :", trangTinh);
console.log("Động cntt :", trangDong("cntt"));
console.log("Động văn  :", trangDong("van-hoc"));
console.log("Động trống:", trangDong("khong-co"));

Ví dụ thực tế: Trang tin tức của trường: trang "Giới thiệu khoa" có thể là Web tĩnh (hiếm khi đổi), nhưng trang "Tin mới nhất" là Web động — mỗi khi biên tập viên đăng bài, máy chủ truy vấn cơ sở dữ liệu và sinh ra danh sách mới mà không ai phải sửa tệp HTML thủ công.

🌐 Mô hình máy khách – máy chủ của Web

💻 Máy khách (Client)

https://www.example.com

Trình duyệt Web (Chrome, Safari, Edge, Firefox…) gửi yêu cầu và hiển thị trang nhận về.

① Yêu cầu HTTP (Request)

GET /index.html HTTP/1.1
Host: www.example.com

🌐 qua mạng: LAN → WAN (ISP) → Internet

② Phản hồi HTTP (Response)

HTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE html> …

🖥️ Máy chủ Web (Server)

📁 Thư mục gốc của Website

📄 index.html

📄 style.css

📄 app.js

📄 logo.png

🗄️ Cơ sở dữ liệu (nếu có)

Nhận yêu cầu, đọc tệp hoặc truy vấn dữ liệu, rồi trả phản hồi.

Mạng máy tính nối máy khách với máy chủ

LAN: mạng cục bộWAN: do ISP quản lýInternet: nối qua IXP

Mã trạng thái trong phản hồi

200 thành công (OK)301 chuyển hướng404 không tìm thấy500 lỗi ở máy chủ

Trên một máy tính đơn (localhost), cùng một máy vừa là máy khách vừa là máy chủ.

Trình duyệt (máy khách) gửi yêu cầu HTTP; máy chủ Web xử lý rồi trả phản hồi HTTP chứa tài liệu HTML để trình duyệt hiển thị.

Hình trên một lần nữa giúp bạn hình dung: ở Web tĩnh, máy chủ chỉ "lấy tệp ra"; ở Web động, giữa máy chủ Web và phản hồi có thêm máy chủ ứng dụng và máy chủ dữ liệu. Hãy dùng mô phỏng đã học để ôn lại chuỗi DNS → TCP → yêu cầu → phản hồi → hiển thị.

Vừa học xong cách máy khách và máy chủ trao đổi bằng HTTP, hãy làm các bài của nhóm 1.1: phân loại tệp thành tĩnh/động theo phần mở rộng, đọc dòng trạng thái của HTTP Response và phân loại mã trạng thái (2xx, 3xx, 4xx, 5xx).

1.4. Đường dẫn Web

Đường dẫn Web, hay URL (Uniform Resource Locator), là chuỗi ký tự chỉ định vị trí cụ thể của một tài nguyên trên World Wide Web. Mỗi URL là duy nhất và xác định một tài nguyên cụ thể — có thể là trang HTML, tài liệu CSS, hình ảnh hay loại tài nguyên khác. Một URL cũng có thể trỏ tới tài nguyên đã không còn tồn tại hoặc đã bị chuyển đi — đây là tình huống thường gặp (bạn gặp mỗi khi thấy lỗi 404). Nhờ URL, người dùng dễ dàng truy cập tài nguyên qua trình duyệt, đồng thời có thể theo dõi, quản lý những thay đổi về vị trí tài nguyên.

Ví dụ về các URL:

text

https://developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL

🔗 Cấu tạo của một đường dẫn Web (URL)

Schemehttps

://

Authority

Địa chỉwww.example.com

Cổng443

Path/docs/web/index.html

Parametersq=html&page=2

Anchorintro

Scheme

https

Giao thức mà trình duyệt phải dùng để yêu cầu tài nguyên: thường là HTTP hoặc HTTPS.

Authority

www.example.com:443

Địa chỉ máy chủ (tên miền hoặc IP như 102.39.23.201) và cổng (số 16 bit, 1–65535): HTTP dùng cổng 80, HTTPS dùng cổng 443.

Path

/docs/web/index.html

Đường dẫn tới tài nguyên trên máy chủ. Ngày nay nội dung thường được tạo động nên không còn gắn với thư mục vật lý.

Parameters

?q=html&page=2

Danh sách cặp khóa=giá trị gửi kèm yêu cầu để máy chủ xử lý dữ liệu, nối nhau bằng &.

Anchor

#intro

Dấu # (hash) là mỏ neo đánh dấu một thành phần trong tài liệu HTML, giúp điều hướng trong trang.

Các URL ví dụ trong giáo trình

https://developer.mozilla.org

https://developer.mozilla.org/en-US/docs/Learn/

https://developer.mozilla.org/en-US/search?q=URL

URL chỉ định vị trí của một tài nguyên trên Web: scheme://authority/path?parameters#anchor.

Hình trên (Hình 1-6 trong giáo trình) tách một URL thành các thành phần. Hãy đọc từ trái sang phải:

Scheme cho biết giao thức mà trình duyệt phải dùng để yêu cầu tài nguyên (giao thức là phương thức thiết lập để trao đổi hoặc truyền dữ liệu trong mạng máy tính). Với trang Web thường là HTTPS hoặc HTTP.
Authority gồm địa chỉ và cổng. Địa chỉ xác định máy chủ nào xử lý yêu cầu; có thể là tên miền như www.example.com hoặc địa chỉ IP như 102.39.23.201. Cổng (port) là số nguyên không dấu 16 bit nên nằm trong khoảng 1 đến 65535 (cổng 0 được dành riêng, không sử dụng). Nhờ số hiệu cổng, máy chủ chuyển yêu cầu đến đúng dịch vụ đang chạy trên nó. Dịch vụ Web với HTTP dùng cổng 80; với HTTPS dùng cổng 443.
Path là đường dẫn tới tài nguyên trên máy chủ Web. Thời kỳ đầu, path thường gắn với đường dẫn vật lý (thư mục) trên máy chủ; nay điều đó không còn đúng vì hầu hết nội dung Web được tạo động bởi các kịch bản khi người dùng yêu cầu.
Parameters là các tham số gửi tới máy chủ Web: một danh sách cặp khóa/giá trị, thường là dữ liệu gửi kèm để yêu cầu máy chủ thực hiện việc khác nhau với dữ liệu đó.
Anchor đi kèm dấu # (còn gọi là hash) hoạt động như mỏ neo đánh dấu một thành phần trong tài liệu HTML, giúp người dùng điều hướng dễ hơn khi xem trang.

Để tự tay tách URL, hãy thử mô phỏng sau: gõ một URL bất kỳ và quan sát từng phần được tô màu.

Phân tích đường dẫn Web (URL)

gõ URL hoặc chọn mẫu, rê chuột vào từng phần

Scheme://Địa chỉ (host)PathAnchor (#)

Scheme

Giao thức mà trình duyệt phải dùng để yêu cầu tài nguyên. HTTPS = HTTP có mã hóa, cổng mặc định 443.

Địa chỉ (host)

Xác định máy chủ nào sẽ xử lý yêu cầu. Tên miền — DNS sẽ đổi sang địa chỉ IP.fit · tên miền conneu · tên miềnedu.vn · đuôi (TLD)

Cổng (port) (ngầm định)

Không ghi cổng → trình duyệt tự dùng cổng mặc định của https: 443.

Path

Đường dẫn tới tài nguyên trên máy chủ. Tài liệu HTML./codelab/huong-dan.html

Anchor (#)

Mỏ neo (anchor): cuộn tới phần tử có id="bat-dau" trong trang. Chỉ trình duyệt dùng — không được gửi lên máy chủ.

trình duyệt gửi gì tới máy chủ?

GET /codelab/huong-dan.html HTTP/1.1
Host: fit.neu.edu.vn

# #bat-dau ở lại trình duyệt, không nằm trong yêu cầu

Trong JavaScript, lớp có sẵn URL làm đúng việc đó. Hãy chạy ví dụ và đối chiếu từng dòng in ra với sơ đồ ở trên:

JavaScript · chạy thử được

const url = new URL("https://www.example.com:8080/sach/lap-trinh-web?the-loai=cntt&trang=2#muc-luc");

console.log("Scheme   :", url.protocol);   // https:
console.log("Host     :", url.hostname);   // www.example.com
console.log("Cổng     :", url.port);       // 8080
console.log("Path     :", url.pathname);   // /sach/lap-trinh-web
console.log("Query    :", url.search);     // ?the-loai=cntt&trang=2
console.log("Anchor   :", url.hash);       // #muc-luc

// Các tham số (Parameters) là danh sách cặp khóa/giá trị
for (const [khoa, giaTri] of url.searchParams) {
  console.log("  tham số:", khoa, "=", giaTri);
}

Chú ý rằng khi URL không ghi cổng, trình duyệt dùng cổng mặc định của giao thức. Ví dụ dưới kiểm chứng điều đó (thuộc tính port rỗng khi là cổng mặc định):

JavaScript · chạy thử được

const danhSach = [
  "http://example.com/",
  "https://example.com/",
  "https://example.com:8443/admin",
  "http://localhost:3000/"
];
const macDinh = { "http:": 80, "https:": 443 };
for (const s of danhSach) {
  const u = new URL(s);
  const cong = u.port ? Number(u.port) : macDinh[u.protocol];
  console.log(s, "=> cổng", cong);
}

Cảnh báo: #anchor (fragment) không được gửi lên máy chủ — nó chỉ dùng ở phía trình duyệt để cuộn tới đúng vị trí trong tài liệu. Ngược lại, phần ?khóa=giá_trị (query string) được gửi trong HTTP Request. Đừng đặt thông tin nhạy cảm như mật khẩu vào query string.

Vừa học xong các thành phần của URL, hãy làm các bài nhóm 1.2 để tự viết bộ phân tích URL: cổng mặc định, fragment, tách đầy đủ các thành phần và kiểm tra một chuỗi có đúng cú pháp URL hay không.

Phần Parameters là nơi máy chủ nhận dữ liệu từ bạn: khi tìm kiếm, lọc, phân trang, mọi thứ đều đi qua query string. Hãy làm nhóm 1.3 để đọc giá trị một tham số, sắp xếp các tham số và dựng chuỗi truy vấn từ dữ liệu JSON.

1.5. Trình duyệt Web

Trình duyệt Web là ứng dụng phần mềm dùng để truy cập thông tin trên Internet: nó đọc các tài liệu HTML được máy chủ Web trả về và hiển thị chúng. Vì mỗi trình duyệt có thể hiển thị hơi khác nhau, khi thiết kế, trang Web cần được kiểm tra trên nhiều trình duyệt. Bảng sau tổng kết thị phần các trình duyệt phổ biến trên thế giới tính đến tháng 2 năm 2023 (theo statcounter.com):

Trình duyệt	Thị phần (%)
Google Chrome	65,74%
Apple Safari	18,84%
Microsoft Edge	4,27%
Mozilla Firefox	2,92%
Samsung Internet	2,6%
Opera	2,27%
Các trình duyệt khác	0,29%

Đọc bảng này, bạn thấy Chrome và Safari chiếm trên 84% thị phần, nhưng hơn 15% người dùng còn lại vẫn là con số rất lớn trên toàn thế giới. Ví dụ sau tính tổng thị phần bằng JavaScript và xếp hạng các trình duyệt:

JavaScript · chạy thử được

const thiPhan = [
  ["Google Chrome", 65.74],
  ["Apple Safari", 18.84],
  ["Microsoft Edge", 4.27],
  ["Mozilla Firefox", 2.92],
  ["Samsung Internet", 2.6],
  ["Opera", 2.27],
  ["Các trình duyệt khác", 0.29]
];

const tong = thiPhan.reduce((t, [, v]) => t + v, 0);
console.log("Tổng thị phần:", tong.toFixed(2) + "%");

const haiDau = thiPhan[0][1] + thiPhan[1][1];
console.log("Chrome + Safari:", haiDau.toFixed(2) + "%");
console.log("Phần còn lại cần được kiểm tra:", (100 - haiDau).toFixed(2) + "%");

thiPhan.forEach(([ten, v], i) => console.log((i + 1) + ". " + ten + " — " + v + "%"));

Lưu ý: Trình duyệt không phân biệt Web tĩnh hay động; nó chỉ làm ba việc: gửi HTTP Request, nhận HTTP Response, kết xuất (render) HTML/CSS/JavaScript thành giao diện. Khi cùng một mã chạy khác nhau giữa các trình duyệt, đó là bài toán tương thích mà phần 3 sẽ bàn.

Mở rộng: Số liệu thị phần thay đổi theo thời gian; bảng trên là số liệu giáo trình công bố. Hãy tự tra statcounter để xem số liệu mới nhất tại Việt Nam — rất hữu ích khi quyết định cần kiểm thử trên trình duyệt nào.

Trình duyệt còn áp một quy tắc an toàn rất quan trọng liên quan tới URL: origin — bộ ba scheme + host + cổng. Hai URL cùng origin khi cả ba trùng nhau. Bạn sẽ gặp lại khái niệm này khi làm việc với JavaScript và máy chủ (buổi 13); bây giờ hãy thử viết hàm so sánh origin bằng JavaScript:

JavaScript · chạy thử được

function origin(s) {
  const u = new URL(s);
  return u.protocol + "//" + u.hostname + ":" + (u.port || (u.protocol === "https:" ? 443 : 80));
}
function cungOrigin(a, b) {
  return origin(a) === origin(b);
}
console.log(origin("https://example.com/a/b?x=1"));
console.log(cungOrigin("https://example.com/a", "https://example.com/b#top"));  // true
console.log(cungOrigin("https://example.com", "http://example.com"));           // false (khác scheme)
console.log(cungOrigin("https://example.com", "https://example.com:8443"));     // false (khác cổng)
console.log(cungOrigin("https://example.com", "https://api.example.com"));      // false (khác host)

Vừa học xong về trình duyệt và origin, hãy làm các bài nhóm 1.4: so sánh origin của hai URL, chuẩn hóa và phân giải đường dẫn tương đối, rồi so khớp route động — những việc mà trình duyệt và máy chủ Web làm hàng triệu lần mỗi ngày.

2. Quy trình phát triển Web

Giáo trình: Chương 1 — mục "Quy trình phát triển Web" (Bước 1: Thu thập thông tin; Bước 2: Lập kế hoạch; Bước 3: Thiết kế giao diện, trải nghiệm người dùng; Bước 4: Sáng tạo nội dung; Bước 5: Lập trình; Bước 6: Kiểm thử, đánh giá; Bước 7: Triển khai và bảo trì).

Để phát triển một Website, các công nghệ HTML, CSS và JavaScript quyết định hình thức và cách người dùng tương tác với thông tin. Tuy nhiên, những công việc thường ẩn phía sau — thu thập thông tin từ khách hàng, lập kế hoạch chi tiết, bảo trì sau khi ra mắt — vẫn là phần quan trọng trong vòng đời phát triển Website. Quy trình gồm 7 bước chính:

🧭 Quy trình phát triển Web gồm 7 bước

1Thu thập thông tin🔎

Mục đích trang Web, đối tượng sử dụng
Tính năng chính, giao diện và công nghệ mong muốn
Ngân sách, cơ chế thanh toán/tạm ứng

Kết quả: Yêu cầu của khách hàng

2Lập kế hoạch🗺️

Kế hoạch: nguồn lực, tiến độ, chi phí
Sơ đồ Website (sitemap)
Phác thảo giao diện (wireframe)

Kết quả: Kế hoạch được khách hàng duyệt

3Thiết kế giao diện, trải nghiệm người dùng🎨

UI: nút bấm, biểu tượng, ô nhập
UX: cách người dùng tương tác
Bố cục, màu sắc, logo; nhận phản hồi rồi chỉnh sửa lặp lại

Kết quả: Bản thiết kế bố cục

4Sáng tạo nội dung✍️

"Content is king": nội dung là vua
Viết tiêu đề, văn bản hấp dẫn
Tối ưu SEO, đa phương tiện, liên kết nội bộ

Kết quả: Nội dung các trang

5Lập trình💻

Frontend: HTML, CSS, JavaScript
Backend: xử lý, cơ sở dữ liệu, cung cấp dữ liệu
Làm trang chủ trước, rồi các trang phụ

Kết quả: Website chạy được

6Kiểm thử, đánh giá🧪

Liên kết, biểu mẫu, tập lệnh, chính tả
Trình xác thực mã theo chuẩn Web
Chức năng, giao diện, hiệu suất, bảo mật

Kết quả: Lỗi được phát hiện và sửa

7Triển khai và bảo trì🚀

Cài đặt, cấu hình trên máy chủ (production)
Giám sát, cập nhật nội dung và bảo mật
Khắc phục lỗi để duy trì trải nghiệm tốt

Kết quả: Website vận hành thực tế

↺ Vòng lặp bảo trì

Bước 1–2 Lập kế hoạch thay đổi
Bước 3–4 Thiết kế thay đổi
Bước 5–6 Lập trình, kiểm thử, chạy thay đổi

Bước 7 không phải điểm dừng: mỗi thay đổi sau khi vận hành lại đi qua các bước 1 đến 6; kiểm thử diễn ra thường xuyên suốt quá trình.

Sơ đồ trên (Hình 1-7 trong giáo trình) xếp bảy bước theo thứ tự thực hiện. Hãy nhớ nó như một dây chuyền: đầu ra của bước này là đầu vào của bước sau; còn bước 7 (bảo trì) lại quay về bước 1 và 2 mỗi khi có thay đổi mới. Ví dụ dưới đây ghi lại bảy bước kèm sản phẩm đầu ra chính của từng bước — bạn sẽ dùng bảng này như "kim chỉ nam" xuyên suốt phần 2:

JavaScript · chạy thử được

const quyTrinh = [
  { buoc: 1, ten: "Thu thập thông tin",              sanPham: "Yêu cầu: mục đích, đối tượng, tính năng, ngân sách" },
  { buoc: 2, ten: "Lập kế hoạch",                    sanPham: "Kế hoạch, sơ đồ Website (sitemap), phác thảo (wireframe)" },
  { buoc: 3, ten: "Thiết kế giao diện, trải nghiệm", sanPham: "Bố cục UI/UX: màu sắc, logo, hình ảnh" },
  { buoc: 4, ten: "Sáng tạo nội dung",               sanPham: "Văn bản, tiêu đề, đa phương tiện" },
  { buoc: 5, ten: "Lập trình",                       sanPham: "Frontend (HTML, CSS, JS) và Backend" },
  { buoc: 6, ten: "Kiểm thử, đánh giá",              sanPham: "Báo cáo lỗi, bản sửa lỗi" },
  { buoc: 7, ten: "Triển khai và bảo trì",           sanPham: "Website chạy thật (production) và được duy trì" }
];
for (const b of quyTrinh) {
  console.log("Bước " + b.buoc + ": " + b.ten + "  =>  " + b.sanPham);
}
console.log("Tổng số bước:", quyTrinh.length);

2.1. Bước 1: Thu thập thông tin

Quá trình bắt đầu bằng thu thập thông tin. Thông tin có thể lấy từ người đặt hàng xây dựng Website, người sử dụng trong tương lai, hoặc qua các nghiên cứu, khảo sát. Đây là nhiệm vụ rất quan trọng vì nhằm hiểu rõ mục đích trang Web, mục tiêu muốn đạt được và đối tượng người dùng. Các thông tin cần thu thập thường gồm:

Mục đích của trang Web;
Đối tượng sử dụng;
Các tính năng chính của trang Web;
Giao diện đồ họa, công nghệ… mong muốn sử dụng;
Ngân sách, cơ chế thanh toán/tạm ứng…

Ví dụ thực tế: Chủ cửa hàng sách nói: "Tôi muốn có Website để bán sách". Chưa đủ! Bạn phải hỏi: bán cho ai (sinh viên? phụ huynh?), cần những tính năng gì (giỏ hàng, thanh toán, tìm kiếm?), thích phong cách nào, ngân sách bao nhiêu, thanh toán/tạm ứng ra sao. Càng hỏi kỹ ở bước 1, càng ít phải làm lại ở các bước sau.

2.2. Bước 2: Lập kế hoạch

Sau khi thu thập thông tin và đánh giá tính khả thi, bước tiếp theo là đưa ra kế hoạch đề xuất chi tiết giúp khách hàng nắm rõ bài toán, nguồn lực, tiến độ thời gian và chi phí của dự án. Ở giai đoạn này, chuyên viên phân tích nghiệp vụ (Business Analyst – BA) cùng khách hàng hình dung toàn bộ trang Web sẽ trông như thế nào.

Dựa trên thông tin đã thu thập, nhóm phát triển xây dựng sơ đồ Website (sitemap). Sơ đồ rất quan trọng: nó giúp khách hàng, người tham gia phát triển và vận hành hình dung được các trang/chức năng chính của hệ thống. Sơ đồ mô tả mối quan hệ giữa các khu vực chính trên trang Web, cho thấy người dùng cuối tìm được thông tin hoặc dịch vụ cần thiết dễ đến mức nào khi bắt đầu từ trang chủ. Mục đích chính của sitemap là xây dựng một trang Web thân thiện với người dùng và dễ điều hướng. Cần nhớ: sơ đồ Website cho biết cấu trúc bên trong nhưng không mô tả giao diện người dùng.

Ví dụ sau biểu diễn sitemap của cửa hàng sách bằng một cây (đối tượng lồng nhau) rồi in ra dạng thụt lề. Hãy thêm hoặc bớt một mục và chạy lại để thấy sơ đồ thay đổi:

JavaScript · chạy thử được

const sitemap = {
  "Trang chủ": {
    "Sách": { "Công nghệ thông tin": {}, "Văn học": {}, "Kinh tế": {} },
    "Giỏ hàng": {},
    "Tin tức": {},
    "Liên hệ": {}
  }
};

let tong = 0;
function ve(nut, mucSau) {
  for (const ten of Object.keys(nut)) {
    console.log("  ".repeat(mucSau) + "- " + ten);
    tong++;
    ve(nut[ten], mucSau + 1);
  }
}
ve(sitemap, 0);
console.log("Tổng số trang:", tong);

Trước khi bắt đầu thiết kế hoặc lập trình, cần được khách hàng chấp thuận rằng mọi thứ đều ổn để chuyển sang giai đoạn sau. Vì vậy cần tạo một bản phác thảo (wireframe): hình dung trực quan về giao diện sẽ xây dựng, thông thường không chứa yếu tố thiết kế như màu sắc, logo… Giáo trình giới thiệu công cụ Moqups — ứng dụng trực tuyến cho phép thiết kế mockup (mẫu thiết kế) các sản phẩm số như Website, ứng dụng di động, giao diện người dùng một cách nhanh chóng; thường dùng bởi nhà thiết kế UX/UI, nhà phát triển sản phẩm để thể hiện ý tưởng, phác thảo và kiểm tra sự tương tác trước khi triển khai thực tế.

Ví dụ dưới đây là một "wireframe" vẽ bằng HTML và CSS: chỉ có khung xám, không màu sắc, không logo — đúng tinh thần phác thảo. Bạn chưa cần hiểu từng dòng CSS, chỉ cần nhận ra rằng wireframe cho biết vị trí và vai trò của từng khối, không phải "trông đẹp thế nào":

HTML · chạy thử được

<style>
  .wf { font-family: sans-serif; width: 340px; border: 2px solid #555; }
  .wf div { border: 1px dashed #777; background: #eee; padding: 8px; margin: 6px; text-align: center; color: #444; }
  .wf .cot { display: flex; }
  .wf .cot div { flex: 1; }
</style>
<div class="wf">
  <div>[ Logo ] [ Thanh điều hướng ]</div>
  <div style="height:50px">[ Ảnh/Banner ]</div>
  <div class="cot">
    <div>Sách 1</div><div>Sách 2</div><div>Sách 3</div>
  </div>
  <div>[ Chân trang ]</div>
</div>
<script>console.log("Số khối của wireframe:", document.querySelectorAll(".wf div").length);</script>

Lưu ý: Phân biệt: sitemap = cấu trúc trang/chức năng (cây các trang, không có giao diện); wireframe = phác thảo giao diện từng trang (chưa có màu sắc, logo); mockup = mẫu thiết kế gần giống sản phẩm thật. Đi theo thứ tự này, khách hàng duyệt từng lớp trước khi tốn công sức lập trình.

2.3. Bước 3: Thiết kế giao diện, trải nghiệm người dùng

Khi đã thống nhất mọi khía cạnh trong kế hoạch, bước tiếp theo là thiết kế, gồm thiết kế giao diện người dùng (User Interface – UI) và trải nghiệm người dùng (User Experience – UX):

	UI	UX
Là gì	Giao diện: các thành phần người dùng trực tiếp tương tác	Trải nghiệm: cách thức người dùng tương tác với các thành phần UI
Ví dụ	Nút bấm, biểu tượng, ô nhập	Bấm "Mua ngay" mất mấy bước, dễ hay khó tìm giỏ hàng

Tất cả nội dung trực quan — hình ảnh, đồ họa, video — được tạo ở bước này. Thông tin thu thập ở bước 1 vẫn rất quan trọng: yêu cầu khách hàng và đặc điểm đối tượng mục tiêu phải luôn được lưu ý. Bố cục các trang thể hiện cấu trúc thông tin, trực quan hóa nội dung và thể hiện chức năng cơ bản; chứa màu sắc, logo, hình ảnh và có thể cung cấp thông tin chung về sản phẩm tương lai.

Sau khi hoàn thành bố cục ban đầu, việc thu thập phản hồi từ khách hàng và người dùng là cực kỳ quan trọng để đánh giá hiệu quả bố cục và nhận diện điểm cần cải thiện. Nếu khách hàng hoặc người dùng góp ý, nhóm phát triển điều chỉnh bố cục rồi gửi lại để xem xét. Vòng "điều chỉnh – phản hồi" lặp lại cho đến khi khách hàng hoàn toàn hài lòng với bố cục và trải nghiệm chung.

Với ví dụ dưới đây, hãy xem cùng một wireframe ở trên "khoác" thêm màu sắc, logo, kiểu chữ — đó là bước thiết kế giao diện. Cấu trúc không đổi, chỉ có hình thức thay đổi:

HTML · chạy thử được

<style>
  .ui { font-family: sans-serif; width: 340px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px #0003; }
  .ui .dau { background: #1d4ed8; color: #fff; padding: 10px; font-weight: bold; }
  .ui .banner { background: linear-gradient(90deg, #f59e0b, #ef4444); color: #fff; padding: 22px 10px; text-align: center; font-size: 18px; }
  .ui .luoi { display: flex; gap: 6px; padding: 8px; background: #f8fafc; }
  .ui .luoi div { flex: 1; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 12px 4px; text-align: center; }
  .ui .chan { background: #0f172a; color: #cbd5e1; padding: 8px; text-align: center; font-size: 13px; }
</style>
<div class="ui">
  <div class="dau">📚 Lamda Books</div>
  <div class="banner">Giảm 20% sách CNTT</div>
  <div class="luoi"><div>Sách 1</div><div>Sách 2</div><div>Sách 3</div></div>
  <div class="chan">© Lamda Books</div>
</div>
<script>console.log("Cùng cấu trúc, khác hình thức:", document.querySelectorAll(".luoi div").length, "thẻ sách");</script>

2.4. Bước 4: Sáng tạo nội dung

Trong phát triển Website có nguyên tắc phổ biến: "content is king" (nội dung là vua). Nếu Website không giao tiếp được với người dùng bằng nội dung hấp dẫn và mới mẻ, thiết kế bắt mắt và tính năng tiên tiến cũng mang lại rất ít hiệu quả (lưu lượng truy cập, lượt đăng ký, tương tác, doanh số, lợi nhuận…). Ở bước này cần viết ra những điều cốt lõi muốn truyền đạt tới người xem: tạo tiêu đề hấp dẫn, chỉnh sửa văn bản, viết văn bản mới, biên dịch văn bản hiện có…

Việc sáng tạo nội dung đòi hỏi quá trình lập kế hoạch và thực hiện có tổ chức. Các hoạt động có thể thực hiện:

Xác định mục tiêu và đối tượng;
Nghiên cứu và phân tích người đọc;
Lập kế hoạch nội dung;
Tạo nội dung chất lượng cao;
Tối ưu hóa cho SEO;
Tích hợp đa phương tiện;
Tạo tiêu đề hấp dẫn;
Tạo liên kết nội bộ.

Nội dung có thể là trang giới thiệu, trang mô tả sản phẩm, trang chính sách, nhãn nút và mọi thứ khác có bản chất chủ yếu là văn bản. Website cũng nên hướng khách hàng vào việc cung cấp nội dung, và tốt nhất là toàn bộ nội dung được cung cấp trước hoặc trong quá trình lập trình. Hiện nay nhiều bên phát triển hệ thống không đưa bước này vào vòng đời; tuy nhiên các công ty thiết kế và phát triển Website hàng đầu luôn quan tâm khía cạnh này.

Mẹo: Một tiêu đề tốt trả lời được câu hỏi "trang này giúp tôi điều gì?" trong vài từ. Hãy so sánh "Trang 1" với "Danh mục sách Công nghệ thông tin mới nhất" — tiêu đề thứ hai tốt cho cả người đọc lẫn SEO (mục 3.4).

2.5. Bước 5: Lập trình

Việc lập trình thường chia thành hai nhánh:

Lập trình phía giao diện người dùng (Frontend): tạo ra và tối ưu giao diện mà người dùng tương tác khi dùng ứng dụng Web hoặc di động; thường dùng HTML, CSS và JavaScript.
Lập trình xử lý phía máy chủ (Backend): viết mã và phát triển các phần của ứng dụng Web hoặc dịch vụ chạy trên máy chủ; chịu trách nhiệm xử lý thông tin, tương tác với cơ sở dữ liệu và cung cấp dữ liệu, chức năng cho Frontend và các phần khác của hệ thống.

Công việc thiết kế và nội dung đã xong ở bước 3 và 4. Giai đoạn này nhà phát triển bắt đầu tạo từng trang Web: thường tạo trang chủ trước, sau đó thêm tất cả các trang phụ theo hệ thống phân cấp đã vẽ trong sơ đồ Website. Mọi phần tử trang Web tĩnh đã thiết kế phải được rà soát và kiểm tra; rồi các tính năng đặc biệt và tính tương tác được thêm vào. Điều quan trọng là hiểu rõ mọi công nghệ phát triển Web được dùng. Nếu trang phức tạp và xây dựng từ đầu (không dùng nền tảng, giải pháp có sẵn), giai đoạn này tiêu tốn khá nhiều thời gian — và càng kéo dài, chi phí tổng thể càng lớn.

Ví dụ sau cho thấy Frontend và Backend phối hợp thế nào: "Backend" (một hàm trả dữ liệu JSON) và "Frontend" (mã dựng giao diện từ dữ liệu đó):

HTML · chạy thử được

<h3>Sách mới</h3>
<ul id="ds"></ul>
<script>
// "Backend": cung cấp dữ liệu (thực tế nằm trên máy chủ, đọc từ cơ sở dữ liệu)
function backendLaySach() {
  return [
    { ten: "Lập trình Web", gia: 120000 },
    { ten: "Cơ sở dữ liệu", gia: 95000 }
  ];
}

// "Frontend": dựng giao diện từ dữ liệu
const ul = document.getElementById("ds");
for (const s of backendLaySach()) {
  const li = document.createElement("li");
  li.textContent = s.ten + " — " + s.gia.toLocaleString("en-US") + "đ";
  ul.appendChild(li);
}
console.log("Frontend đã dựng", ul.children.length, "mục từ dữ liệu của backend");
</script>

2.6. Bước 6: Kiểm thử, đánh giá

Kiểm thử được thực hiện thường xuyên suốt quá trình phát triển. Một số việc cần làm:

Kiểm tra tất cả liên kết để không có liên kết hỏng;
Kiểm tra mọi biểu mẫu, mọi tập lệnh;
Chạy phần mềm kiểm tra chính tả;
Dùng trình xác thực mã để kiểm tra mã có tuân theo các tiêu chuẩn Web hiện tại hay không.

Qua việc kiểm tra từng khía cạnh — chức năng, giao diện, hiệu suất, bảo mật, khả năng sử dụng — kiểm thử không chỉ phát hiện và khắc phục lỗi mà còn cải thiện trải nghiệm người dùng và độ tin cậy của hệ thống. Đầu tư vào kiểm thử giúp tiết kiệm thời gian và chi phí sửa lỗi sau này, và bảo đảm thành công, phát triển bền vững của dự án Web trong dài hạn.

Ví dụ sau là một "bộ kiểm tra liên kết" mini: đối chiếu mọi liên kết trong trang với danh sách các trang thật sự tồn tại và báo liên kết hỏng.

HTML · chạy thử được

<nav>
  <a href="index.html">Trang chủ</a>
  <a href="sach.html">Sách</a>
  <a href="tin-tuc.html">Tin tức</a>
  <a href="lien-he.html">Liên hệ</a>
</nav>
<script>
const trangTonTai = ["index.html", "sach.html", "lien-he.htm"];   // lưu ý: lien-he.htm khác lien-he.html
const hong = [];
document.querySelectorAll("nav a").forEach((a) => {
  const href = a.getAttribute("href");
  if (!trangTonTai.includes(href)) hong.push(href);
});
console.log("Số liên kết:", document.querySelectorAll("nav a").length);
console.log("Liên kết hỏng:", hong.join(", "));
</script>

2.7. Bước 7: Triển khai và bảo trì

Triển khai đánh dấu bước đầu tiên của việc đưa sản phẩm từ môi trường phát triển sang môi trường vận hành thực tế (production): cài đặt, cấu hình hệ thống trên các máy chủ, kiểm tra lại tính năng và hiệu suất trước khi công bố chính thức cho người dùng.

Bảo trì là hoạt động duy trì và cải tiến liên tục sau khi triển khai: giám sát và điều chỉnh hệ thống để hoạt động ổn định, hiệu quả; cập nhật nội dung, bảo mật và khắc phục lỗi thường xuyên để giữ trải nghiệm người dùng tốt nhất. Mỗi thay đổi trong giai đoạn bảo trì lại đi qua một vòng nhỏ của quy trình:

Lập kế hoạch thay đổi (Bước 1, Bước 2);
Thiết kế thay đổi (Bước 3, Bước 4);
Lập trình, kiểm thử và chạy thay đổi (Bước 5, Bước 6).

Ví dụ thực tế: Cửa hàng sách muốn thêm "mã giảm giá". Đó là một thay đổi nhỏ: hỏi chủ cửa hàng quy tắc giảm giá (bước 1–2), thiết kế ô nhập mã và thông báo (bước 3–4), lập trình rồi kiểm thử tính đúng của số tiền (bước 5–6), cuối cùng đưa lên máy chủ thật.

Khóa học này đi theo đúng thứ tự đó: các buổi đầu học công cụ cho bước 3 và 5 (HTML, CSS, JavaScript), buổi cuối dành cho bước 6–7 (kiểm thử, tối ưu, triển khai).

3. Các vấn đề cần quan tâm khi thiết kế Web

Giáo trình: Chương 1 — mục "Các vấn đề cần quan tâm khi thiết kế Web" (Người dùng và tính khả dụng; Khả năng tương thích; Khả năng tiếp cận mọi đối tượng người dùng; Tối ưu hóa công cụ tìm kiếm; Thiết kế Web đáp ứng).

Biết quy trình là chưa đủ; một Website có "đúng quy trình" vẫn có thể thất bại nếu người dùng không tìm được thứ họ cần, nếu nó hỏng trên điện thoại, hoặc nếu không ai tìm thấy nó trên Google. Năm vấn đề sau đây cần được cân nhắc ngay từ lúc thiết kế, không phải đợi đến khi sửa lỗi.

3.1. Người dùng và tính khả dụng

Trước khi thiết kế, hãy suy nghĩ người dùng là ai và họ mong đợi điều gì. Chính người dùng quyết định sự thành công của trang Web. Trang cần dễ sử dụng để người dùng tìm được thứ họ cần ngay trong những lần truy cập đầu tiên. Có một số nguyên tắc thiết kế cơ bản mà mọi nhà phát triển cần tuân theo:

Trình bày càng nhiều thông tin quan trọng càng tốt "trong màn hình đầu tiên" (above the fold) để người dùng phải cuộn ít hơn.
Nhóm các mục liên quan và giới hạn số lượng nhóm trên mỗi trang.
Luôn có tiêu đề xác định nội dung trang Web, cung cấp thanh điều hướng và liên kết đến các tiện ích.
Sử dụng các quy ước điều hướng: bấm logo trên cùng để về trang chủ, bấm biểu tượng giỏ hàng để tới trang các sản phẩm đang chọn mua.

Ví dụ sau là một trang áp dụng đủ bốn nguyên tắc: có tiêu đề, thanh điều hướng, logo bấm để về trang chủ, biểu tượng giỏ hàng, các mục liên quan được nhóm và thông tin quan trọng (khuyến mãi, nút mua) nằm ngay màn hình đầu tiên:

HTML · chạy thử được

<style>
  body { font-family: sans-serif; margin: 0; }
  header { display: flex; align-items: center; justify-content: space-between; background: #1d4ed8; color: #fff; padding: 8px 12px; }
  header a { color: #fff; text-decoration: none; margin-left: 12px; }
  main { padding: 12px; }
  .nhom { border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px; margin-bottom: 8px; }
</style>
<header>
  <a href="/" id="logo" title="Về trang chủ">📚 Lamda Books</a>
  <nav><a href="/sach">Sách</a><a href="/tin-tuc">Tin tức</a><a href="/gio-hang" id="gio">🛒 Giỏ hàng (0)</a></nav>
</header>
<main>
  <h1 style="font-size:20px">Sách công nghệ thông tin</h1>
  <div class="nhom"><strong>Khuyến mãi tuần này:</strong> giảm 20% — <button>Mua ngay</button></div>
  <div class="nhom"><strong>Bán chạy:</strong> Lập trình Web, Cơ sở dữ liệu</div>
</main>
<script>
console.log("Logo dẫn về:", document.getElementById("logo").getAttribute("href"));
console.log("Giỏ hàng dẫn tới:", document.getElementById("gio").getAttribute("href"));
console.log("Có tiêu đề h1:", !!document.querySelector("h1"), "| có thanh điều hướng:", !!document.querySelector("nav"));
</script>

Lưu ý: "Tính khả dụng" (usability) là mức độ người dùng hoàn thành được việc họ muốn một cách dễ dàng. Hãy thử nhờ một người chưa từng thấy trang của bạn tìm "giỏ hàng" — nếu họ mất hơn vài giây, bố cục cần xem lại.

3.2. Khả năng tương thích

Để Website tương thích trên nhiều môi trường, cần kiểm tra:

Website hoạt động trên nhiều loại trình duyệt khác nhau;
Website hoạt động trên nhiều loại hệ điều hành khác nhau;
Website hoạt động trên nhiều loại thiết bị khác nhau;
Website hoạt động trên nhiều phiên bản hệ điều hành, trình duyệt khác nhau.

Có nhiều công cụ hỗ trợ kiểm tra tương thích. Ví dụ, giáo trình dùng công cụ trên Website comparium.app để xem hiển thị của một trang (ví dụ vncodelab.com) trên nhiều phiên bản trình duyệt khác nhau (Hình 1-13). Bốn mục kiểm tra trên tạo thành một ma trận kiểm thử: mỗi ô là một tổ hợp (trình duyệt × hệ điều hành × thiết bị). Đoạn mã sau liệt kê ma trận rút gọn và tính số lượt kiểm tra cần làm:

JavaScript · chạy thử được

const trinhDuyet = ["Chrome", "Safari", "Edge", "Firefox"];
const heDieuHanh = ["Windows", "macOS", "Android", "iOS"];
// Safari chỉ chạy trên macOS/iOS; Edge, Firefox không có trên iOS gốc: bỏ các tổ hợp không có thật
const khongCo = new Set(["Safari|Windows", "Safari|Android", "Edge|iOS", "Firefox|iOS"]);

let dem = 0;
for (const t of trinhDuyet) {
  for (const h of heDieuHanh) {
    if (khongCo.has(t + "|" + h)) continue;
    dem++;
    console.log(dem + ". " + t + " trên " + h);
  }
}
console.log("Số tổ hợp cần kiểm tra:", dem);

Mẹo: Bạn không thể kiểm thử mọi tổ hợp. Hãy ưu tiên theo thị phần (xem bảng ở mục 1.5) và theo đối tượng người dùng đã xác định ở bước 1 (sinh viên dùng điện thoại nhiều hay máy tính nhiều?).

3.3. Khả năng tiếp cận mọi đối tượng người dùng

Khi thiết kế Website cần chú ý để tiếp cận mọi đối tượng người dùng, kể cả người khuyết tật, như:

Người có vấn đề về thị lực;
Người có vấn đề về thính lực;
Người có vấn đề về vận động;
Người có vấn đề về trí nhớ, nhận thức;
Người sử dụng thiết bị đặc biệt để truy cập.

Giáo trình nêu một số ví dụ:

Bố trí thông tin quan trọng để người dùng thấy ngay mà không cần cuộn trang giúp người thị lực kém giảm thao tác kéo cuộn, phóng to; cũng giúp người khuyết tật nhận thức như người bị mất trí nhớ tạm thời. Đặt các yếu tố quan trọng trước khi cuộn còn giúp các yếu tố nội dung nằm ở vị trí nhất quán.
Với thành phần cần xác thực, nên đưa nhiều lựa chọn: xác thực bằng hình ảnh, âm thanh hoặc trả lời câu hỏi.
Với thao tác đòi hỏi sự khéo léo như thao tác trên màn hình cảm ứng, bấm tổ hợp phím, giữ – kéo – thả, cần được xem xét khi thiết kế.

Một thực hành tiêu biểu mà bạn sẽ gặp ở buổi HTML: mọi hình ảnh có ý nghĩa cần kèm văn bản thay thế để trình đọc màn hình đọc cho người khiếm thị. Đoạn mã sau là một "bộ kiểm tra tiếp cận" nhỏ tìm các ảnh thiếu văn bản thay thế (thuộc tính alt):

HTML · chạy thử được

<img src="bia-sach-1.png" alt="Bìa sách Lập trình Web, nền xanh">
<img src="bia-sach-2.png">
<img src="trang-tri.png" alt="">
<script>
document.querySelectorAll("img").forEach((img) => {
  const alt = img.getAttribute("alt");
  let ketQua;
  if (alt === null) ketQua = "THIẾU alt  -> trình đọc màn hình không biết ảnh nói gì";
  else if (alt === "") ketQua = "alt rỗng  -> ảnh trang trí, bị bỏ qua (chấp nhận được)";
  else ketQua = "ổn: " + alt;
  console.log(img.getAttribute("src") + ": " + ketQua);
});
</script>

Cảnh báo: Thiết kế tiếp cận không chỉ dành cho "người khuyết tật mãi mãi". Người bị gãy tay, người dùng điện thoại giữa trời nắng, người xem video ở nơi ồn ào… đều hưởng lợi từ phụ đề, cỡ chữ đủ lớn và nút bấm đủ to.

3.4. Tối ưu hóa công cụ tìm kiếm

Tối ưu hóa công cụ tìm kiếm (Search Engine Optimization – SEO) là việc điều chỉnh các khai báo, nội dung và cách trình bày Web để tăng thứ hạng khi tìm kiếm Web bởi các công cụ như Google, Bing, Yahoo. SEO là yếu tố quan trọng quyết định thành công của một Website. Mặc dù các công cụ tìm kiếm thay đổi giải thuật và cách xếp hạng khá thường xuyên, vẫn có những kỹ thuật chung để cải thiện kết quả. Cần lưu ý rằng: thẻ title, thẻ mô tả (meta description), cấu trúc tiêu đề theo ngữ nghĩa và tốc độ tải trang ảnh hưởng rất nhiều đến SEO (riêng thẻ keywords đã không còn được Google sử dụng từ năm 2009).

Yếu tố	Ảnh hưởng đến SEO	Ghi chú
Thẻ `title`	Rất nhiều	Tiêu đề hiện trên kết quả tìm kiếm và thẻ trình duyệt
Thẻ `meta description`	Rất nhiều	Đoạn mô tả hiện dưới tiêu đề kết quả
Cấu trúc tiêu đề theo ngữ nghĩa	Rất nhiều	Dùng `h1`, `h2`… đúng vai trò
Tốc độ tải trang	Rất nhiều	Ảnh nhẹ, mã gọn
Thẻ `meta keywords`	Không còn	Google bỏ từ 2009

Ví dụ sau là một "bộ kiểm tra SEO" nhỏ cho phần đầu (head) và tiêu đề của một trang. Hãy thử xóa thẻ meta description hoặc thêm h1 thứ hai rồi chạy lại để xem kết quả thay đổi:

HTML · chạy thử được

<head>
  <title>Sách công nghệ thông tin mới nhất | Lamda Books</title>
  <meta name="description" content="Mua sách lập trình Web, cơ sở dữ liệu, trí tuệ nhân tạo với giá tốt, giao hàng toàn quốc.">
  <meta name="keywords" content="sách, lập trình">
</head>
<body>
  <h1>Sách công nghệ thông tin</h1>
  <h2>Lập trình Web</h2>
</body>
<script>
const title = document.title;
const mota = document.querySelector('meta[name="description"]');
const soH1 = document.querySelectorAll("h1").length;
console.log("title (" + title.length + " ký tự):", title);
console.log("meta description:", mota ? "có (" + mota.content.length + " ký tự)" : "THIẾU");
console.log("Số thẻ h1:", soH1, soH1 === 1 ? "-> tốt" : "-> nên có đúng một h1");
console.log("meta keywords:", document.querySelector('meta[name="keywords"]') ? "có nhưng Google đã bỏ qua" : "không có");
</script>

Mở rộng: SEO còn gắn với RWD (mục 3.5): Google ưu tiên xếp hạng các Website thân thiện trên thiết bị di động. Và nội dung chất lượng (mục 2.4) luôn là nền tảng của SEO bền vững.

3.5. Thiết kế Web đáp ứng

Thiết kế Web đáp ứng (Responsive Web Design – RWD) là việc thiết kế để Website hiển thị dễ nhìn trên nhiều loại thiết bị khác nhau. Mỗi thiết bị có kích thước màn hình khác nhau, nên RWD đã trở thành chuẩn trong thiết kế Web. RWD cũng giảm chi phí vì không phải thiết kế nhiều phiên bản Web riêng cho từng thiết bị. Ngoài ra RWD đóng vai trò quan trọng trong SEO: Google và các công cụ tìm kiếm khác đánh giá cao các trang đáp ứng tốt, thân thiện với người dùng trên nhiều thiết bị, nhờ đó cải thiện vị trí trong kết quả tìm kiếm và thu hút thêm lượt truy cập.

📱 Cùng một trang Web trên nhiều thiết bị

1) Điện thoại, máy tính bảng, máy tính: cùng nội dung, khác bố cục

◆ NEU WebTrang chủKhóa họcBlogLiên hệ

Học thiết kế Web

Bắt đầu

Điện thoại

1 cột · menu ☰

◆ NEU WebTrang chủKhóa họcBlogLiên hệ

Học thiết kế Web

Bắt đầu

Máy tính bảng

2 cột

◆ NEU WebTrang chủKhóa họcBlogLiên hệ

Học thiết kế Web

Bắt đầu

Máy tính

3 cột · menu ngang

2) Co giãn khung trình duyệt: bố cục tự sắp xếp lại

◆ NEU WebTrang chủKhóa họcBlogLiên hệ

Học thiết kế Web

Bắt đầu

📱 Điện thoại: 1 cột, menu ☰📲 Máy tính bảng: 2 cột🖥️ Máy tính: 3 cột, menu ngang

3) Vì sao phải đáp ứng? (số liệu 2021 trong giáo trình)

> 1/2dân số thế giới sở hữu điện thoại thông minh

60%lượt truy cập mạng đến từ thiết bị di động

80%người dùng smartphone mua sắm trên di động ít nhất 1 lần/tháng

40%người dùng rời sang trang khác nếu thiết kế hiển thị không hợp lý

🔍 Google ưu tiên xếp hạng Web đáp ứng tốt (SEO)Cần kiểm tra trên:iPhoneSamsung GalaxyiPadAndroid khác1366×7681920×1080

Thiết kế Web đáp ứng (RWD): một mã nguồn nhưng bố cục tự thích nghi với kích thước màn hình, thay vì làm riêng từng phiên bản.

Hình trên (Hình 1-14) cho thấy một trang cùng nội dung nhưng bố cục thay đổi khi hiển thị trên điện thoại, máy tính bảng và máy tính để bàn: điện thoại xếp các khối thành một cột, máy tính để bàn xếp nhiều cột. Lý do cần RWD, theo thống kê gần đây trong giáo trình (năm 2021):

Hơn 1/2 dân số thế giới đã sở hữu điện thoại thông minh.
Trên 1/3 khách hàng sử dụng điện thoại thông minh.
60% truy cập mạng là từ thiết bị di động.
80% người dùng điện thoại thông minh truy cập các Website mua sắm trên thiết bị di động ít nhất một lần mỗi tháng.
40% người dùng sẽ rời đi và chuyển sang trang khác nếu thiết kế không hiển thị hợp lý trên thiết bị của họ.
Các công cụ tìm kiếm như Google ưu tiên xếp hạng Website có thiết kế đáp ứng tốt trên thiết bị di động.

Kiểm tra hoạt động của trang trên nhiều kích thước màn hình là một phần quan trọng của quy trình phát triển và bảo trì Website ngày nay (Hình 1-15). Trước hết là thiết bị di động (điện thoại thông minh, máy tính bảng): kiểm tra trên các kích thước màn hình phổ biến của iPhone, Samsung Galaxy, iPad và các thiết bị Android khác để giao diện và chức năng không bị sai lệch, vẫn nhất quán. Tiếp theo là màn hình máy tính để bàn, với các độ phân giải phổ biến như 1366×768 và 1920×1080, để trang vẫn hiển thị hợp lý và không bị biến dạng.

Ví dụ sau là một trang đáp ứng đơn giản: CSS có hai "kịch bản" — khối chia thành một cột khi màn hình hẹp và ba cột khi đủ rộng. (Bạn sẽ học cú pháp @media ở buổi 9; bây giờ chỉ cần quan sát.) Khung xem trước bên dưới có chiều rộng cố định, nên ta in ra số cột đang áp dụng để kiểm chứng:

HTML · chạy thử được

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .luoi { display: grid; grid-template-columns: 1fr; gap: 8px; font-family: sans-serif; }
  .luoi div { background: #dbeafe; border: 1px solid #1d4ed8; padding: 14px; text-align: center; }
  @media (min-width: 700px) {
    .luoi { grid-template-columns: repeat(3, 1fr); }
  }
</style>
<div class="luoi"><div>Sách 1</div><div>Sách 2</div><div>Sách 3</div></div>
<script>
const rong = 1024;  // giả lập độ rộng cửa sổ máy tính để bàn
const soCot = rong >= 700 ? 3 : 1;
console.log("Độ rộng", rong + "px ->", soCot, "cột");
console.log("Độ rộng 375px (điện thoại) ->", 375 >= 700 ? 3 : 1, "cột");
</script>

Lưu ý: Dòng meta viewport là "giấy phép" để trình duyệt di động hiển thị trang theo đúng chiều rộng màn hình; thiếu nó, điện thoại sẽ thu nhỏ cả trang desktop. Ta sẽ gặp lại ở buổi 3 (thẻ meta) và buổi 9 (breakpoints).

Thực hành nhanh trên lớp

Mở rộng: Phần này không có trong giáo trình; đây là hoạt động ngắn để kết nối lý thuyết với một Website thật. Phần "Thực hành" của chương 1 (Figma) và công cụ trên trình duyệt (DevTools) sẽ học ở buổi 2.

Hãy chọn một Website quen thuộc (trang của trường, một cửa hàng trực tuyến) rồi làm lần lượt:

Tách URL: chép địa chỉ của một trang con vào mô phỏng url-parser ở mục 1.4, chỉ ra scheme, host, cổng (có thể ẩn), path, query và anchor.
Tĩnh hay động? Trang đó là Web tĩnh hay Web động? Căn cứ vào đâu (có ô tìm kiếm, giỏ hàng, đăng nhập, nội dung thay đổi theo thời gian)?
Sitemap: vẽ nhanh sơ đồ Website của trang đó gồm tối thiểu 6 trang.
Năm vấn đề của mục 3: thu nhỏ cửa sổ trình duyệt để xem trang có "đáp ứng" không; xem tiêu đề thẻ (title) và thử tìm trang trên Google; nhận xét tính khả dụng (logo về trang chủ? có thanh điều hướng?).

Câu hỏi ôn tập

Giáo trình: Chương 1 — "Câu hỏi ôn tập lý thuyết" (các câu 1.2, 1.4, 1.5, 1.7, 1.10 thuộc nội dung buổi này; các câu 1.1, 1.3, 1.6, 1.8, 1.9 về HTML, CSS, DOM sẽ làm ở buổi 2). Đáp án đối chiếu với phụ lục của giáo trình.

1.2. Các chuẩn HTML được phát triển bởi tổ chức nào? A. Microsoft; B. Google; C. Mozilla; D. World Wide Web Consortium (W3C).

Đáp án: D. W3C (do Tim Berners-Lee thành lập năm 1994) xây dựng và định hướng các tiêu chuẩn Web.

1.4. URL là viết tắt của thuật ngữ nào? A. Uniform Resource Locator; B. Uniform Resource Location; C. Unique Resource Locator; D. Unique Resource Location.

Đáp án: A. Uniform Resource Locator — bộ định vị tài nguyên thống nhất.

1.5. Đâu KHÔNG phải là thành phần chính để tạo nên một Website? A. Máy khách; B. Máy chủ; C. Hệ thống mạng; D. Đường dẫn Web.

Đáp án: D. Ba thành phần chính là máy khách, máy chủ và hệ thống mạng; đường dẫn Web (URL) chỉ là địa chỉ của tài nguyên.

1.7. Thiết kế Web đáp ứng là gì? A. Thiết kế để Website hiển thị dễ nhìn trên nhiều loại thiết bị khác nhau; B. chỉ trên một loại thiết bị cụ thể; C. chỉ trên một loại trình duyệt cụ thể; D. chỉ trên một loại hệ điều hành cụ thể.

Đáp án: A.

1.10. Đâu KHÔNG phải là điểm khác biệt của trang Web động so với trang Web tĩnh? A. Được tạo bởi chương trình hoặc kịch bản trên máy chủ Web; B. Chương trình/kịch bản được vận hành bởi máy chủ ứng dụng; C. Dữ liệu có thể do máy chủ dữ liệu cung cấp; D. Được tạo bởi một tài liệu HTML.

Đáp án: D. Cả trang tĩnh lẫn trang động cuối cùng đều trả về HTML cho trình duyệt; khác biệt nằm ở chỗ trang động được sinh ra bởi chương trình/kịch bản khi có yêu cầu.

Các câu bổ sung (tự luyện, đáp án suy ra từ nội dung giáo trình):

B1. Cổng mặc định của HTTP và HTTPS là bao nhiêu?

Đáp án: HTTP dùng cổng 80, HTTPS dùng cổng 443.

B2. Phần nào của URL không được gửi lên máy chủ: query string hay anchor (#…)?

Đáp án: Anchor (fragment). Anchor chỉ dùng ở trình duyệt để cuộn tới vị trí trong tài liệu; query string được gửi trong yêu cầu.

B3. Sitemap khác wireframe ở điểm nào?

Đáp án: Sitemap mô tả cấu trúc các trang/chức năng và quan hệ giữa chúng (không mô tả giao diện); wireframe là phác thảo giao diện từng trang, thường chưa có màu sắc, logo.

B4. Vì sao thẻ meta keywords không nên là trọng tâm của SEO?

Đáp án: Google đã không còn dùng thẻ keywords từ năm 2009; nên tập trung vào title, meta description, cấu trúc tiêu đề ngữ nghĩa và tốc độ tải trang.

B5. Bước nào trong quy trình 7 bước có thể "quay lại" các bước đầu, và vì sao?

Đáp án: Bước 7 (bảo trì): mỗi thay đổi sau khi triển khai lại bắt đầu từ lập kế hoạch (bước 1–2), thiết kế (3–4), rồi lập trình và kiểm thử (5–6).

Sai lầm thường gặp

Sai lầm	Hậu quả	Cách đúng
Nghĩ trình duyệt "biết" trang là tĩnh hay động	Hiểu sai luồng xử lý, khó gỡ lỗi	Trình duyệt chỉ gửi HTTP Request và hiển thị HTML nhận về; việc sinh trang động do máy chủ làm
Nhầm "Internet" với "Web"	Lẫn lộn hạ tầng với dịch vụ	Internet là mạng toàn cầu; Web là dịch vụ chạy trên đó (cùng với email, truyền tệp…)
Bỏ qua cổng, tưởng URL nào cũng có cổng 80	Không hiểu vì sao `https` mà vẫn chạy, hay vì sao `:3000` lại cần	HTTP mặc định cổng 80, HTTPS mặc định 443; cổng khác phải ghi rõ trong URL
Đặt dữ liệu nhạy cảm (mật khẩu) trong query string	Lộ thông tin qua lịch sử, nhật ký máy chủ	Chỉ để tham số lọc/tìm kiếm trong query string; dữ liệu nhạy cảm gửi bằng cách khác, qua HTTPS
Nhảy vào lập trình ngay, bỏ bước thu thập thông tin và lập kế hoạch	Làm sai yêu cầu, sửa đi sửa lại, tăng chi phí	Hỏi kỹ nhu cầu (bước 1), vẽ sitemap và wireframe, được khách hàng chấp thuận rồi mới code
Nhầm sitemap với wireframe (hoặc UI với UX)	Trao đổi với khách hàng thiếu chính xác	Sitemap = cấu trúc trang; wireframe = phác thảo giao diện; UI = thành phần tương tác; UX = cách tương tác
Chỉ kiểm tra trên một trình duyệt hoặc một máy	Trang hỏng với người dùng khác	Kiểm tra trên nhiều trình duyệt, hệ điều hành, thiết bị, kích thước màn hình
Thiết kế riêng một bản cho điện thoại, một bản cho máy tính	Tốn chi phí, khó bảo trì, thua kém về SEO	Dùng thiết kế Web đáp ứng (RWD) — một Website thích nghi mọi màn hình
Dùng thẻ `meta keywords` làm trọng tâm SEO	Mất công mà không có tác dụng với Google	Chú trọng `title`, `meta description`, tiêu đề ngữ nghĩa, tốc độ tải

Tóm tắt

Website là tập hợp trang Web liên kết với nhau, truy cập qua tên miền hoặc URL (định nghĩa của W3C); đặt trên máy chủ, truy cập từ máy khách bằng trình duyệt qua HTTP/HTTPS.
Ba thành phần chính của một Website: máy khách, máy chủ, hệ thống mạng; mạng gồm LAN, WAN (do ISP quản lý) và Internet (các WAN nối nhau qua IXP).
Web tĩnh: tệp HTML lưu sẵn trên máy chủ. Web động: sinh ra khi có yêu cầu, nhờ chương trình/kịch bản trên máy chủ ứng dụng, có thể dùng máy chủ dữ liệu; còn gọi là ứng dụng Web. Trình duyệt luôn chỉ nhận HTML.
URL gồm scheme, authority (địa chỉ + cổng), path, parameters, anchor (#); cổng HTTP = 80, HTTPS = 443, phạm vi cổng 1–65535.
Quy trình 7 bước: thu thập thông tin → lập kế hoạch (sitemap, wireframe) → thiết kế giao diện/UX → sáng tạo nội dung ("content is king") → lập trình (Frontend/Backend) → kiểm thử, đánh giá → triển khai và bảo trì.
Năm vấn đề cần quan tâm: tính khả dụng, tương thích, tiếp cận, SEO, thiết kế Web đáp ứng (RWD); thẻ title, meta description, tiêu đề ngữ nghĩa, tốc độ tải ảnh hưởng nhiều đến SEO, còn meta keywords đã không được Google dùng từ 2009.

Buổi tiếp theo (buổi 2) sẽ giới thiệu vai trò của HTML, CSS, JavaScript trong thiết kế Web cùng các công cụ làm việc: Figma, VS Code, CodePen, DevTools…

Tổng quan về thiết kế Website

Buổi 1: Tổng quan về thiết kế Website

Mục tiêu buổi học

Bản đồ buổi học

1. Các khái niệm cơ bản

1.1. Khái niệm về Website

1.2. Mạng máy tính

Hành trình một yêu cầu Web: DNS → TCP → HTTP

1.3. Phân loại Website

Web tĩnh

Web động

1.4. Đường dẫn Web

Phân tích đường dẫn Web (URL)

1.5. Trình duyệt Web

2. Quy trình phát triển Web

2.1. Bước 1: Thu thập thông tin

2.2. Bước 2: Lập kế hoạch

2.3. Bước 3: Thiết kế giao diện, trải nghiệm người dùng

2.4. Bước 4: Sáng tạo nội dung

2.5. Bước 5: Lập trình

2.6. Bước 6: Kiểm thử, đánh giá

2.7. Bước 7: Triển khai và bảo trì

3. Các vấn đề cần quan tâm khi thiết kế Web

3.1. Người dùng và tính khả dụng

3.2. Khả năng tương thích

3.3. Khả năng tiếp cận mọi đối tượng người dùng

3.4. Tối ưu hóa công cụ tìm kiếm

3.5. Thiết kế Web đáp ứng

Thực hành nhanh trên lớp

Câu hỏi ôn tập

Sai lầm thường gặp

Tóm tắt

Bài tập thực hành của buổi

Buổi 1: Tổng quan về thiết kế Website

Mục tiêu buổi học

Bản đồ buổi học

1. Các khái niệm cơ bản

1.1. Khái niệm về Website

1.2. Mạng máy tính

🎛️ Hành trình một yêu cầu Web: DNS → TCP → HTTP

1.3. Phân loại Website

Web tĩnh

Web động

1.4. Đường dẫn Web

🎛️ Phân tích đường dẫn Web (URL)

1.5. Trình duyệt Web

2. Quy trình phát triển Web

2.1. Bước 1: Thu thập thông tin

2.2. Bước 2: Lập kế hoạch

2.3. Bước 3: Thiết kế giao diện, trải nghiệm người dùng

2.4. Bước 4: Sáng tạo nội dung

2.5. Bước 5: Lập trình

2.6. Bước 6: Kiểm thử, đánh giá

2.7. Bước 7: Triển khai và bảo trì

3. Các vấn đề cần quan tâm khi thiết kế Web

3.1. Người dùng và tính khả dụng

3.2. Khả năng tương thích

3.3. Khả năng tiếp cận mọi đối tượng người dùng

3.4. Tối ưu hóa công cụ tìm kiếm

3.5. Thiết kế Web đáp ứng

Thực hành nhanh trên lớp

Câu hỏi ôn tập

Sai lầm thường gặp

Tóm tắt

Bài tập thực hành của buổi

Hành trình một yêu cầu Web: DNS → TCP → HTTP

Phân tích đường dẫn Web (URL)