Bài mở đầu - Nhập môn Lập trình Web (HTML/CSS)

Nền tảng web - Làm quen với các ngôn ngữ thiết kế web

Tóm tắt nội dung

Mục Nội dung
Môn học Nền tảng web
Chủ đề bài học Làm quen với các ngôn ngữ thiết kế web
Đối tượng Sinh viên năm thứ 2/3
Mục tiêu Mô tả được cách tạo một trang web với các thành phần cơ bản như thẻ văn bản, danh sách, bảng, liên kết, hình ảnh; đồng thời hiểu được HTML và CSS sẽ được dùng để định dạng các phần tử của trang web ở buổi sau.

Đây là môn học nhập môn giúp học viên làm quen với HTML và CSS - hai nền tảng cơ bản nhất của lập trình web. Sau khoá học, học viên có thể tự xây dựng một trang web hoàn chỉnh.

Mục tiêu môn học

Thuật ngữ trọng tâm của buổi 1
HTML
Ngôn ngữ đánh dấu để mô tả cấu trúc nội dung web.
CSS
Ngôn ngữ trình bày giao diện cho nội dung HTML.
Selector
Cách chọn phần tử để áp dụng định dạng như #id, .class, tag.

A - Yêu cầu nhiệm vụ

B - Đánh giá

Bối cảnh học tập

Học sinh chưa có tiếp cận gì với HTML/CSS. Cần phổ biến bối cảnh trước khi vào bài.

Hình ảnh minh họa Ý nghĩa trong bài học
Logo HTML5 minh họa ngôn ngữ đánh dấu HTML giúp tạo cấu trúc nội dung cho trang web như tiêu đề, đoạn văn, danh sách, bảng, hình ảnh và liên kết.
Logo CSS3 minh họa định dạng giao diện CSS giúp định dạng màu sắc, bố cục, khoảng cách và cách hiển thị để nội dung trở nên dễ đọc hơn (sẽ học ở Day 2-3).
Logo JavaScript minh họa lập trình web JavaScript giúp tạo các hiệu ứng tương tác, xử lý sự kiện và logic cho trang web (sẽ học ở Day 4-5).

Tiến trình bài học

  1. Khởi động: Chia sẻ một trang web để sinh viên tự khám phá, sau đó trả lời một form phản hồi về những nội dung sau:
    • Có những đối tượng nào trên website?
    • Các đối tượng có thể được hiển thị như thế nào?
    • Làm thế nào để gắn các đối tượng này lên khung hiển thị của web?
    • Thuộc tính nào điều chỉnh việc hiển thị của phần tử?
  2. Giảng dạy trực tiếp: Làm rõ quy tắc thẻ HTML.
    • Ví dụ thẻ mở <h1> và thẻ đóng </h1>.
    • Các đối tượng được hiển thị trên website thông qua các thẻ đánh dấu siêu văn bản.
    • Thẻ đóng có ký tự / đằng trước, cùng tên với thẻ mở tương ứng.
  3. Thực hành có hướng dẫn: Tạo file đuôi .html và luyện tập nhóm thẻ văn bản, link, ảnh, bảng.
  4. Kiểm tra nhanh: Ôn cấu trúc HTML, danh sách, chú thích, audio/video, id/class.
  5. Thực hành độc lập: Giao bài cá nhân và nhóm theo mã đề.
  6. Tổng kết:
    Đây là cơ hội để mở thảo luận nhóm: Sinh viên sẽ ứng dụng kiến thức HTML/CSS cơ bản vào bài toán thực tế như thế nào?

Nội dung môn học

Giai đoạn Chủ đề Loại nội dung Chi tiết
Nền tảng Chủ đề 1 (20%) Nội dung Giới thiệu HTML, các thẻ đánh dấu, cấu trúc trang web cơ bản
Kiến thức cơ bản What is HTML, cấu trúc HTML cơ bản, Heading/Paragraph/Title, Text Formatting
Kiến thức mở rộng Link, Image, List, HTML Comments, Audio/Video Tag, ID và Class, giới thiệu CSS cơ bản
Ứng dụng: dựng khung trang cá nhân đơn giản bằng thẻ văn bản, danh sách, liên kết và hình ảnh
Chủ đề 2 (30%) Nội dung 3 cách tạo CSS, selector, đơn vị, Box Model
Kiến thức cơ bản Cú pháp CSS (Selector, Property, Value), phân biệt Class và ID, thứ tự ưu tiên CSS, CSS kế thừa
Kiến thức mở rộng Kích thước tuyệt đối/tương đối, CSS Units, Box Model, Width/Height, Color, Font
Ứng dụng: áp style cho trang ở Chủ đề 1 bằng 3 cách nhúng CSS và các selector cơ bản
Nâng cao Chủ đề 3 (50%) Nội dung Table, iframe, Block/Inline, Display, Positioning, Flexbox
Kiến thức cơ bản table/tr/th/td, iframe, Block vs Inline (div, span), Display (block/inline/inline-block/none)
Kiến thức mở rộng Positioning (static/relative/absolute), Flexbox (Container/Items, justify-content, align-items, flex-grow/shrink/basis, align-self, order)
Ứng dụng: dựng layout hoàn chỉnh (header/nav/main/footer) bằng Flexbox kết hợp Positioning

Tài liệu & Kênh học tập

Kênh học tập chính thức
LMS Ngân hàng đề CST
LMS - Trang khoá học Đăng nhập - Trang ngân hàng đề CST

Học liệu mở rộng

Tham khảo thêm bài giảng mẫu trên Kênh YouTube của môn học.

Học liệu bổ trợ
Audio minh họa Video minh họa