Web hoạt động thế nào và trang đầu tiên của bạn

Tìm hiểu chuyện gì xảy ra khi bạn gõ địa chỉ vào trình duyệt, và xây nền tảng cho website của bạn.

Chuyện gì xảy ra khi bạn mở một website

Khi bạn gõ thứ gì đó như www.myschool.com vào trình duyệt, đây là những gì xảy ra:

Trình duyệt gửi tin nhắn qua internet đến máy chủ – máy tính nơi website sống: “Này, gửi trang cho tôi!”
Máy chủ trả lời và gửi lại các file – văn bản, hình ảnh, code.
Trình duyệt vẽ trang trên màn hình bạn bằng những file đó.

Các file máy chủ gửi được viết bằng ngôn ngữ gọi là HTML. Và đó chính xác là thứ bạn sắp học. Hiện tại website của bạn chưa ở trên máy chủ – nó sẽ sống trên máy tính của bạn, và chúng ta sẽ đưa lên mạng ở bài học cuối cùng.

Chọn dự án của bạn

Trước khi viết một dòng, hãy quyết định bạn thực sự đang xây cái gì. Bạn sẽ làm một trong các dự án này suốt cả cấp:

🏫 Website trường học – thời khóa biểu, thực đơn bữa trưa, sự kiện, giáo viên
🙋 Website cá nhân – về tôi, sở thích, sáng tạo của tôi
🌍 Nhật ký du lịch – chuyến đi, ảnh, kỷ niệm
⚽ Website câu lạc bộ thể thao – đội, trận đấu, tập luyện

Đã chọn? Tuyệt. Mỗi bài học đều có nhiệm vụ cho cả bốn dự án – hãy tìm cái của bạn.

Xem này: bộ khung mọi trang trên Trái Đất đều bắt đầu từ đây

Mọi trang web – từ của bạn đến YouTube – đều bắt đầu bằng cùng một bộ khung:

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

Hãy dịch sang ngôn ngữ đơn giản:

Code	Nó báo trình duyệt điều gì
`<!doctype html>`	”Chú ý, trang HTML bắt đầu rồi!”
`<html lang="vi">`	”Mọi thứ bên trong là một trang, và bằng tiếng Việt.”
`<head>` … `</head>`	”Đây là thông tin về trang.” Khách không nhìn thấy.
`<meta charset="UTF-8">`	”Có thể có ký tự đặc biệt, hãy sẵn sàng.”
`<title>` … `</title>`	Tên trang – hiện trên tab trình duyệt.
`<body>` … `</body>`	”Mọi thứ khách thực sự nhìn thấy bắt đầu từ đây.” Toàn bộ nội dung ở đây.

Chú ý cách thẻ hoạt động: <h1> mở cái gì đó và </h1> (có dấu gạch chéo) đóng lại. Mọi thứ giữa chúng thuộc về thẻ đó. Giống dấu ngoặc.

Lượt của bạn 💪

Mở thư mục my-website (từ Cấp Chuẩn bị) trong VS Code, và mở file index.html bên trong. Xóa hết nội dung cũ và gõ bộ khung trang từ ví dụ trên.
Đổi <title> và <h1> cho khớp dự án của bạn, và thêm đoạn <p> dưới tiêu đề với một câu về website của bạn.
Lưu (Ctrl+S) và mở index.html trong trình duyệt (hoặc làm mới trang bằng F5).

Không chắc làm thế nào? Đây là giải pháp cho từng dự án:

🏫 Giải pháp: Website trường học

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 Giải pháp: Website cá nhân

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 Giải pháp: Nhật ký du lịch

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ Giải pháp: Website câu lạc bộ

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

Tự kiểm tra: Tab trình duyệt hiện tên website, và trang hiện tiêu đề cùng câu của bạn. Nếu vậy – viên gạch nền tảng đã được đặt!

Điều cần nhớ từ bài này

Website = các file máy chủ gửi đến trình duyệt. Trình duyệt vẽ trang từ chúng.
Mọi trang có cùng bộ khung: <head> (thông tin về trang) và <body> (nội dung hiển thị).
Thẻ mở như <this> và đóng như </this>.