BÀI 9: KIỂM TRA ĐỊNH KỲ (LẦN 1)

Tháng Một 8, 2026
 |  Không có bình luận

2.1. Ôn tập cấu trúc Layout (Bố cục)

  • Nhắc lại mô hình kinh điển: Header – Nav – Container (Content + Sidebar) – Footer.

  • Lưu ý quan trọng:

    • Dùng float: left hoặc display: flex để chia cột (Ví dụ: Cột nội dung 70%, Cột quảng cáo 30%).

    • Luôn nhớ margin: 0 auto để căn giữa trang web trên màn hình.

2.2. Ôn tập về Menu

  • Code mẫu “thần thánh” cho menu ngang:

    CSS
     
    /* Biến danh sách dọc thành ngang */
ul.menu li {
    display: inline-block; /* Hoặc float: left */
}
/* Xóa gạch chân liên kết */
ul.menu li a {
    text-decoration: none;
    padding: 10px 20px;
}

2.3. Ôn tập Form và CSS Form

  • Nhắc học viên cách làm đẹp cho ô nhập liệu:

    CSS
     
    input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    box-sizing: border-box; /* Quan trọng: Giữ ô không bị phình to quá khổ */
}

3. Đề bài kiểm tra (2 giờ sau)

Tình huống:

Bạn là nhân viên thiết kế web cho cửa hàng công nghệ “TechMaster”. Giám đốc yêu cầu bạn thiết kế giao diện trang chủ và trang liên hệ cho website bán hàng.

Yêu cầu kỹ thuật chung:

  1. Tạo thư mục dự án tên: KiemTra1_TenHocVien.

  2. Cấu trúc thư mục phải có: index.html, lienhe.html, thư mục css, thư mục images.

  3. Sử dụng file CSS riêng (style.css) và nhúng vào HTML.

  4. Toàn bộ hình ảnh, tài nguyên dùng đường dẫn tương đối.

PHẦN 1: TRANG CHỦ (index.html)

Thiết kế giao diện gồm các phần sau:

  • Header (Đầu trang):

    • Logo cửa hàng (bên trái).

    • Tên cửa hàng “TechMaster – Công nghệ đỉnh cao” (bên phải hoặc giữa).

  • Navigation (Menu):

    • Thanh menu ngang gồm: Trang chủ, Điện thoại, Laptop, Phụ kiện, Liên hệ.

    • Yêu cầu: Nền màu đen/xanh, chữ trắng. Khi di chuột vào đổi màu nền.

  • Banner:

    • Một hình ảnh lớn giới thiệu khuyến mãi (Chiều rộng 100%).

  • Main Content (Nội dung chính):

    • Hiển thị danh sách 4 sản phẩm (Điện thoại/Laptop).

    • Mỗi sản phẩm là một khối (Card) gồm: Hình ảnh, Tên sản phẩm (h3), Giá tiền (màu đỏ), Nút “Mua ngay” (có bo tròn góc).

    • Bố cục: Chia làm 4 cột hoặc 2 dòng 2 cột.

  • Footer (Chân trang):

    • Nền tối. Chứa thông tin: “Bản quyền thuộc về [Tên bạn] @ 2025”.

PHẦN 2: TRANG LIÊN HỆ (lienhe.html)

  • Giữ nguyên Header, Menu và Footer giống trang chủ.

  • Phần nội dung thay bằng Form Liên Hệ gồm:

    • Họ và tên (Bắt buộc nhập).

    • Email (Kiểu email).

    • Số điện thoại.

    • Chủ đề liên hệ (Dropdown: Báo giá, Hỗ trợ kỹ thuật, Khiếu nại).

    • Nội dung (Textarea).

    • Nút “Gửi đi”.

4. Thang điểm đánh giá (Tổng 10 điểm)

Tiêu chíNội dung chi tiếtĐiểm
1. Cấu trúc & Tổ chứcTạo đúng cây thư mục, đặt tên file chuẩn (không dấu). Code HTML có thụt dòng rõ ràng.1.0
2. Header & MenuHiển thị Logo, Tiêu đề. Menu nằm ngang, hoạt động đúng liên kết giữa 2 trang, có hiệu ứng Hover.2.0
3. Bố cục (Layout)Sử dụng div và CSS để chia bố cục hợp lý. Không bị vỡ khung khi thu nhỏ trình duyệt.2.0
4. Danh sách sản phẩmSản phẩm hiển thị đẹp (Box Model), ảnh không bị méo. Có giá tiền và nút mua hàng trang trí đẹp (border-radius, màu sắc).2.0
5. Form liên hệSử dụng đúng các thẻ Input, Select, Textarea. Form căn chỉnh đẹp, không bị xô lệch.2.0
6. Sáng tạo & Thẩm mỹPhối màu hài hòa, font chữ dễ đọc. Sử dụng thêm icon hoặc hiệu ứng bóng đổ (box-shadow).1.0