Giới thiệu về GitHub Pages
Github Pages là một dịch vụ托管 trang web tĩnh miễn phí, cho phép người dùng sử dụng các kho (repository) để publishes và chia sẻ trang web của họ. Đây là một công cụ hiệu quả để hiển thị các dự án nguồn mở, cũng như các trang cá nhân hoặc blog.
1. Cấu trúc và chức năng của HTML
1.1 Thành phần của một tài liệu HTML
Mỗi trang web được tạo bằng HTML đều có một cấu trúc cơ bản:
<html>
<head>
<meta charset="UTF-8">
<title>Tên trang</title>
</head>
<body>
<h1>Tiêu đề</h1>
<p>Nội dung</p>
</body>
</html>1.2 Thẻ HTML và thuộc tính
Trong HTML, có một số loại thẻ phổ biến:
- Thẻ xác định nội dung: <p>, <h1> đến <h6>
- Thẻ liên kết: <a>
- Thẻ hiển thị hình ảnh: <img>
Thuộc tính của thẻ có dạng: thẻ thuộc_tính="giá_trị"
2. Cascading Style Sheets (CSS)
2.1 Ngữ pháp cơ bản của CSS
CSS được sử dụng để định dạng và tạo phong cách cho các trang web. Ví dụ:
h1 {
màu: #0066cc;
font_kích_cỡ: 2em;
}2.2 Các loại selector trong CSS
CSS có các loại selector sau:
- Selector phần tử:
p {} - Selector lớp (class):
.highlight {} - Selector id:
#main-heading {}
3. JavaScript để tạo chức năng tương tác
3.1 Cú pháp và cấu trúc dữ liệu
JavaScript sử dụng các biến và toán tử để xử lý dữ liệu:
let tên = 'Alice';
const tuổi = 30;
var lương = 50000;3.2 Xử lý sự kiện và thao tác DOM
JavaScript cho phép xử lý các sự kiện người dùng:
document.getElementById('myButton').addEventListener('click', function(event) {
console.log('Nút được nhấn');
});4. Tổ chức và quản lý thư mục của dự án
4.1 Cấu trúc thư mục cơ bản
Một dự án GitHub Pages thông thường sẽ có cấu trúc thư mục như sau:
/
├── index.html
├── README.md
├── CNAME
├── .gitignore
├── 404.html
└── assets/
├── css/
├── js/
└── images/
4.2 Quản lý và tối ưu hóa các file tĩnh
Các tips để tối ưu hóa hiệu suất trang web:
- Nén và nén các file hình ảnh
- Sử dụng CDN cho các thư viện phổ biến
- Trộn các file CSS và JavaScript
- Ảnh hưởng từ xa cho các file JavaScript không quan trọng
- Thiết kế đáp ứng cho các thiết bị khác nhau