Bài 18. Thực hành tổng hợp thiết kế trang web

1. Quy trình tổng hợp và cấu trúc sản phẩm

Một trang web tĩnh hoàn chỉnh thường gồm nhiều tệp liên kết với nhau. Bài thực hành này yêu cầu vận dụng đồng thời các kĩ năng đã học: dùng thẻ HTML5 để tạo khối nội dung, dùng CSS để tạo kiểu, tổ chức thư mục rõ ràng và kiểm tra bố cục trên nhiều thiết bị.

1.1 Khung trang với thẻ ngữ nghĩa HTML5

Thẻ ngữ nghĩa giúp người dùng và công cụ xử lí hiểu được vai trò từng vùng nội dung. Ta thường chia trang thành các khối sau.

2. Ví dụ minh hoạ: Trang hai cột

2.1 Cấu trúc thư mục dự án

mywebsite/
|-- index.html
|-- about.html
|-- contact.html
|-- css/
|   |-- style.css
|-- images/
    |-- banner.jpg
    |-- avatar.png

Nếu đặt toàn bộ ảnh trong thư mục images/ và toàn bộ định dạng trong thư mục css/, ta chỉ ghi đường dẫn tương đối một lần, đồng thời dễ nâng cấp và bảo trì sau này.

2.2 Nội dung HTML cho index.html

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Khám phá thế giới số</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Khám phá thế giới số</h1>
    <p>Trang Tin học 12 - Chủ đề 4</p>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">Trang chủ</a></li>
      <li><a href="about.html">Giới thiệu</a></li>
      <li><a href="contact.html">Liên hệ</a></li>
    </ul>
  </nav>

  <main>
    <section>
      <h2>Chào mừng bạn đến với website</h2>
      <p>Đây là sản phẩm tổng hợp môn Tin học 12.</p>
    </section>

    <aside>
      <h3>Tin nổi bật</h3>
      <p>Cách bố trí thư mục tài nguyên đúng chuẩn.</p>
    </aside>
  </main>

  <footer>
    <p>Thực hiện bởi học sinh lớp 12 - Năm học 2026 - 2027</p>
  </footer>
</body>
</html>

Trong <head> phải có hai thẻ meta. Thẻ charset="UTF-8" giúp hiển thị đúng dấu tiếng Việt. Thẻ name="viewport" đặt chiều rộng vùng hiển thị bằng chiều rộng màn hình thiết bị, để trang không bị thu nhỏ như bản máy tính khi xem trên điện thoại.

2.3 Tạo kiểu CSS trong css/style.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: #2c3e50;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #34495e;
}

nav li {
  float: left;
}

nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav a:hover {
  background-color: #95a5a6;
}

main {
  display: flex;
  flex-wrap: wrap;
}

section {
  flex: 70%;
  padding: 15px;
}

aside {
  flex: 30%;
  background-color: #f2f2f2;
  padding: 15px;
}

footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 10px;
}

@media screen and (max-width: 700px) {
  section, aside {
    flex: 100%;
  }
}

Giải thích: box-sizing: border-box làm cho chiều rộng của mỗi khối đã tính cả padding và khung; nếu thiếu dòng này, $70\% + 30\%$ cộng thêm phần đệm sẽ vượt quá 100% và cột aside bị đẩy xuống dòng dưới. display: flex trên main đặt hai cột nằm cạnh nhau; flex: 70% và flex: 30% chia bề rộng. Khi màn hình hẹp hơn 700px, truy vấn @media đặt flex: 100% để hai khối xếp chồng lên nhau, tránh thanh cuộn ngang.

3. Lưu ý và lỗi thường gặp

4. Câu hỏi ôn tập