Học HTML & CSS cơ bản cho người mới bắt đầu

Chào mừng bạn đến với khóa học HTML & CSS!

1. HTML & CSS là gì?

• HTML (HyperText Markup Language - Ngôn ngữ Đánh dấu Siêu văn bản): Hãy tưởng tượng HTML như là bộ xương của một trang web. Nó xác định cấu trúc và nội dung của trang, ví dụ như đâu là tiêu đề, đâu là đoạn văn, đâu là hình ảnh. Nó sử dụng các "thẻ" (tags) để đánh dấu các phần tử khác nhau.
• CSS (Cascading Style Sheets - Bảng kiểu theo tầng): Nếu HTML là bộ xương, thì CSS chính là lớp da, quần áo, và phong cách của trang web. Nó chịu trách nhiệm về mặt trình bày và thẩm mỹ, như màu sắc, phông chữ, bố cục, khoảng cách...

Mối quan hệ: HTML tạo ra cấu trúc, CSS trang trí cho cấu trúc đó. Chúng luôn đi đôi với nhau để tạo nên một trang web hoàn chỉnh.

2. Công cụ cần thiết:

• Trình duyệt web: Chrome, Firefox, Edge... (bạn đã có sẵn).
• Trình soạn thảo mã (Code Editor): Đây là nơi chúng ta sẽ viết code. Chúng tôi khuyên dùng Visual Studio Code (VS Code) vì nó miễn phí, mạnh mẽ và có nhiều tiện ích mở rộng hữu ích.

3. Bài tập thực hành:

• Bước 1: Tải và cài đặt VS Code từ trang chủ: https://code.visualstudio.com/
• Bước 2: Mở VS Code, vào mục Extensions (biểu tượng ô vuông bên trái) và cài đặt tiện ích có tên Live Server. Tiện ích này giúp bạn xem trang web của mình cập nhật trực tiếp mà không cần tải lại trang.
• Bước 3: Tạo một thư mục mới trên máy tính của bạn, ví dụ: hoc-html-css.
• Bước 4: Trong VS Code, chọn File > Open Folder... và mở thư mục vừa tạo.
• Bước 5: Tạo file đầu tiên bằng cách nhấn vào biểu tượng tệp mới và đặt tên là index.html.
• Bước 6: Gõ ! (dấu chấm than) vào file index.html và nhấn Enter. VS Code sẽ tự động tạo ra cấu trúc HTML cơ bản. Chúng ta sẽ tìm hiểu chi tiết về cấu trúc này vào ngày mai.
• Bước 7: Nhấp chuột phải vào file index.html và chọn Open with Live Server để xem trang web đầu tiên của bạn!

Nắm vững kiến thức nền tảng về HTML và CSS để xây dựng các trang web tĩnh đơn giản.