HTML và Git Tổng quan về HTML
[Thực hành] Phát triển Module điều hướng an toàn
Mục tiêu
Sau khi hoàn thành bài thực hành này, học viên có khả năng:
Trình bày được sự khác biệt giữa <ul> (Unordered List) và <ol> (Ordered List); giải thích được tại sao tính năng mới phải được phát triển trên một "Branch" (nhánh) riêng biệt thay vì làm trực tiếp trên nhánh main.
Sử dụng thành thạo cặp thẻ <ul>, <li> và <a> để xây dựng cấu trúc menu điều hướng (Navigation Menu). Vận dụng đúng chuỗi lệnh Git để tạo nhánh (git branch), chuyển nhánh (git checkout hoặc git switch), và hợp nhất (git merge).
Phân tích và giải quyết được Xung đột (Merge Conflict) nếu có 2 luồng thay đổi cùng diễn ra trên một file HTML.
Mô tả
Bối cảnh dự án:
Công ty đang chạy một chiến dịch Marketing lớn, trang chủ (index.html) hiện tại đang hoạt động ổn định và đón hàng ngàn lượt truy cập (nằm trên nhánh main). Tuy nhiên, Giám đốc yêu cầu phải bổ sung gấp một Menu Điều Hướng (Navigation Bar) để khách hàng dễ tìm kiếm sản phẩm. Nếu bạn code thẳng lên nhánh main và xảy ra lỗi hỏng giao diện, toàn bộ chiến dịch sẽ đổ vỡ. Yêu cầu bắt buộc: Phải tạo một môi trường an toàn (nhánh mới) để xây dựng Menu bằng cấu trúc danh sách <ul>, sau khi test kỹ lưỡng mới được "ghép" (Merge) vào trang chính.
Mã nguồn index.html ban đầu (Chưa có menu):
Vai trò trong dự án:
Vai trò Học viên: Frontend Developer (Người nhận nhiệm vụ phát triển tính năng Menu mới).
Vai trò Giảng viên: Tech Lead (Người rà soát nhánh main xem có bị lỗi sau khi hợp nhất hay không).
Vai trò AI: Git Guru (Chuyên gia gỡ lỗi Git) & HTML Mentor (Tư vấn viên cấu trúc Web).
Quy tắc sử dụng AI:
Được phép sử dụng AI giải thích khái niệm (Ví dụ: Fast-forward merge là gì?).
Sử dụng AI đọc các log lỗi Git và chỉ ra nguyên nhân (Không xin lệnh gõ trực tiếp).
Sử dụng AI tạo giúp các đường link mồi (dummy links) để điền vào thuộc tính href của thẻ <a>.
Không được phép yêu cầu AI viết toàn bộ luồng lệnh Terminal từ lúc tạo nhánh đến lúc merge.
Yêu cầu AI viết sẵn đoạn code HTML <ul> <li> lồng nhau.
Học viên phải tự tay xử lý file nếu xảy ra Merge Conflict và giải thích được quyết định giữ lại/xóa bỏ dòng code nào.
Hướng dẫn triển khai
Bước 1: Xây dựng ý tưởng
Thời gian: 5 phút.
Nhiệm vụ của Học viên: Xác định các mục cần có trong Menu (Ví dụ: Trang chủ, Sản phẩm, Dịch vụ, Giới thiệu, Liên hệ). Tìm hiểu lý do chuẩn W3C yêu cầu sử dụng danh sách <ul>/<li> cho menu thay vì chỉ viết các thẻ <a> nằm ngang.
Vai trò của AI (Đối tác Brainstorm): Tư vấn ngữ nghĩa HTML. (Ví dụ: Học viên prompt: "Tại sao các trang web lớn lại bọc thẻ <a> bên trong thẻ <li> để làm menu? Làm thế có lợi ích gì cho người khiếm thị dùng Screen Reader không?").
Sản phẩm đầu ra: Danh sách các Hạng mục menu (Sitemap cơ bản) và tên của nhánh Git dự kiến khởi tạo.
Bước 2: Thiết kế
Thời gian: 5 phút
Nhiệm vụ của Học viên: Phác thảo cấu trúc cây HTML trên giấy (Ví dụ: <nav> chứa <ul>, <ul> chứa nhiều <li>). Thiết kế luồng đi của Git: Tạo nhánh tên là feature/nav-menu, lên kế hoạch commit.
Vai trò của AI (Người phản biện Logic): So sánh phương án Branching. (Ví dụ: "Tôi định đặt tên nhánh là 'nhanh-cua-toi', AI hãy đánh giá xem tên này đã chuẩn quy ước đặt tên nhánh trong làm việc nhóm chưa?").
Sản phẩm đầu ra: Sơ đồ cấu trúc HTML thẻ lồng thẻ và Git Workflow Plan.
Bước 3: Triển khai
Thời gian: 10 phút
Nhiệm vụ của Học viên:
Thiết lập dự án gốc (Tạo nhánh main):
Tạo thư mục dự án mới, tạo file index.html và dán đoạn mã nguồn được cung cấp sẵn vào.
Mở Terminal, khởi tạo Git (git init).
Đổi tên nhánh mặc định thành main nếu cần (git branch -M main).
Lưu lại phiên bản gốc này (git add . và git commit -m "Khởi tạo trang chủ chiến dịch"). Lúc này, nhánh main chính thức được hình thành.
Phát triển tính năng (Tạo nhánh phụ):
Gõ lệnh tạo và chuyển sang nhánh mới (Ví dụ: git checkout -b feature/nav-menu).
Quay lại file index.html, code cấu trúc <nav>, <ul>, <li>, <a> vào đúng vị trí được yêu cầu.
Thực hiện git add và git commit lưu lại phiên bản menu vừa hoàn thành trên nhánh feature/nav-menu.
Vai trò của AI (Mentor / Pair-Programming): Hỗ trợ lệnh Git. (Ví dụ: "Tôi đang ở nhánh main, làm sao để tạo nhánh mới và di chuyển sang đó chỉ bằng 1 dòng lệnh duy nhất?").
Sản phẩm đầu ra: Kho lưu trữ Git có 2 nhánh. Nhánh main chứa code gốc, nhánh feature/nav-menu chứa code đã có thêm Menu điều hướng, chạy đúng yêu cầu W3C.
Bước 4: Vận hành
Thời gian: 5 phút
Nhiệm vụ của Học viên: Chuyển về lại nhánh main (git checkout main). Thực hiện lệnh git merge feature/nav-menu để gộp code mới vào nhánh chính. Xử lý các dòng code bị xung đột (nếu có). Xóa nhánh tính năng sau khi merge thành công.
Vai trò của AI (Kiểm thử - QA): Đóng vai Git Debugger. (Ví dụ: "Terminal của tôi hiện thông báo 'Merge conflict in index.html'. Khái niệm Xung đột này là gì và tôi phải đọc các ký hiệu <<<<<<< HEAD như thế nào để sửa?").
Sản phẩm đầu ra: Nhánh main đã được cập nhật HTML mới, Repository sạch sẽ.
Cơ chế đánh giá
Chấm điểm sản phẩm (50%):
Mã HTML (25%): Menu sử dụng đúng cấu trúc <nav> > <ul> > <li> > <a>. Không lạm dụng <div> sai mục đích.
Lịch sử Git (25%): Đồ thị Git (Git graph) hiển thị rõ một nhánh tách ra khỏi main, có commit riêng, và hội tụ lại (merge) vào main một cách gọn gàng.
Bảo vệ mã nguồn (30%): Giảng viên (Tech Lead) sẽ chất vấn:
"Tại sao em dùng <ul> (danh sách không thứ tự) mà không dùng <ol> (danh sách có thứ tự) cho Menu trang web?"
"Điều gì sẽ xảy ra nếu em đang ở nhánh feature/nav-menu, em chỉnh sửa file nhưng quên commit, rồi em checkout thẳng sang nhánh main?"
Nhật ký Prompt (20%): Chấm điểm khả năng khai thác AI. Nếu học viên dùng AI để tạo ra các tình huống Merge Conflict giả định nhằm thực hành gỡ lỗi sẽ được điểm thưởng tuyệt đối.
Hướng dẫn nộp bài:
Sản phẩm giao nộp: Đường link GitHub Repository chứa mã nguồn HTML với cấu trúc menu chuẩn xác.
Lịch sử Git (Network graph/Git log) chứng minh có sự tách nhánh (Branching) và hợp nhất (Merging) trở lại nhánh chính.
Tệp Prompt_Log.pdf (Nhật ký tương tác với AI).