Tạo trang web HTML đơn giản
1. Tại sao chúng ta cần một trang web bằng HTML?
Chào mừng bạn đến với thế giới thú vị của lập trình web! Hôm nay, chúng ta sẽ tạo một trang web HTML tĩnh đơn giản và đưa nó lên một web server mà bạn đã cấu hình trong các bài giảng trước. Dù bạn chưa từng viết mã HTML trước đây, đừng lo lắng – mọi thứ sẽ siêu dễ hiểu. Nhiệm vụ của chúng ta không chỉ là hiểu các nền tảng HTML, mà còn học cách làm cho trang web của mình truy cập được trên toàn thế giới thông qua web server.
Và bây giờ chúng ta sẽ tiến thêm một bước – tạo một trang web của riêng mình bằng HTML và cấu hình nó hiển thị thông qua web server của bạn. Sẵn sàng chinh phục không gian web chưa? Hãy bắt đầu nào!
HTML (HyperText Markup Language) – chính là nền tảng của mọi trang web. Nó đảm nhiệm việc cấu trúc và nội dung của trang web. Trong HTML tiêu chuẩn, bạn có thể mô tả tiêu đề, văn bản, hình ảnh, liên kết và thậm chí cả bảng. Nó dễ học nhưng đủ mạnh mẽ để trở thành cơ sở cho bất kỳ trang web nào.
Trong thế giới thực, kỹ năng làm việc với các trang HTML tĩnh hữu ích trong rất nhiều tình huống:
- Tạo nhanh các prototype ứng dụng web.
- Viết và kiểm tra các trang tĩnh để làm tài liệu.
- Chuẩn bị giao diện cơ bản cho các ứng dụng server.
À, thêm nữa, HTML là một cách tuyệt vời để tạo CV dưới dạng một trang web (vâng, các nhà tuyển dụng đôi khi rất thích điều này). Và đối với chúng ta, những lập trình viên, việc biết cơ bản về HTML là một điều không thể thiếu.
2. Bước 1. Cơ bản về HTML: Tạo trang đầu tiên của bạn
Lập trình giống như LEGO: sở thích dành cho mọi lứa tuổi. Hãy bắt đầu với một "viên gạch" nhỏ — trang web đầu tiên của chúng ta.
Ví dụ tối thiểu của tài liệu HTML
Tạo một file có tên index.html trong bất kỳ text editor nào (ví dụ như nano, vim hay thậm chí là gedit, nếu bạn muốn một chút đồ họa) và viết đoạn code sau:
<!DOCTYPE html>
<html>
<head>
<title>Trang web đầu tiên của tôi</title>
</head>
<body>
<h1>Xin chào, thế giới!</h1>
<p>Đây là trang web HTML đầu tiên của tôi.</p>
</body>
</html>Giải thích code
<!DOCTYPE html>– thông báo cho trình duyệt biết rằng chúng ta đang sử dụng HTML5.<html>– mở tài liệu HTML. Toàn bộ nội dung của trang sẽ nằm trong thẻ này.<head>– phần dành cho meta thông tin của website (ví dụ: tiêu đề trang, liên kết stylesheets hoặc scripts).<title>– tên của trang, hiển thị trên tab trình duyệt.<body>– phần chính, nơi chứa tất cả nội dung hiển thị.<h1>– tiêu đề cấp 1 (số càng nhỏ, tiêu đề càng lớn).<p>– đoạn văn bản.
Đúng vậy, chỉ có bảy dòng thôi, nhưng chính chúng sẽ trở thành nền tảng cho website của bạn!
3. Bước 2. Đưa website HTML lên server
Bây giờ, khi trang web của chúng ta đã sẵn sàng, đã đến lúc mang nó ra thế giới. Để làm điều này, chúng ta sẽ sử dụng web server của mình.
Chuẩn bị thư mục website
Tạo một thư mục để lưu trữ các file của website của bạn. Ví dụ, nếu bạn muốn đưa website lên virtual host với domain example.com, hãy thực hiện:
sudo mkdir -p /var/www/example.com
Sau đó, chuyển file index.html của bạn vào thư mục này:
sudo cp index.html /var/www/example.com/
Phép màu thực sự bắt đầu – file đã sẵn sàng hoạt động.
4. Bước 3. Cấu hình web server để phục vụ trang web
Cấu hình cho Nginx
Mở file cấu hình của virtual host:
sudo nano /etc/nginx/sites-available/example.comThêm cấu hình sau đây:
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }Kích hoạt virtual host và khởi động lại server:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Cấu hình cho Apache
Mở file cấu hình của virtual host:
sudo nano /etc/apache2/sites-available/example.com.confThêm cấu hình sau đây:
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>Kích hoạt virtual host và khởi động lại server:
sudo a2ensite example.com.conf sudo systemctl restart apache2
Kiểm tra trang web
Bây giờ mở trình duyệt của bạn, nhập http://example.com (hoặc địa chỉ IP của server của bạn) và tận hưởng thành quả. Nếu bạn thấy dòng chữ "Xin chào, thế giới!" – xin chúc mừng, mọi thứ hoạt động rồi đấy!
5. Bước 4. Làm đẹp trang web của chúng ta
Trang tĩnh thì ok đó, nhưng thêm chút CSS thì ai mà không thích. Nào, thêm một chút style nhé.
Thêm file mới style.css vào cùng thư mục /var/www/example.com/:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}Bây giờ cập nhật file index.html, thêm liên kết đến file CSS:
<!DOCTYPE html>
<html>
<head>
<title>Trang web đầu tiên của tôi</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Xin chào, thế giới!</h1>
<p>Đây là trang web HTML đầu tiên của tôi.</p>
</body>
</html>Sau khi tải lại trang, bạn sẽ thấy một vài thay đổi nhỏ trong style. Giờ đây trang web của bạn đã đẹp hơn một chút rồi!
6. Các vấn đề thường gặp và cách giải quyết
Khi làm việc với các trang web, bạn có thể gặp một số vấn đề, nhưng đừng lo lắng, tụi mình đã chuẩn bị trước rồi:
Lỗi "403 Forbidden". Kiểm tra quyền trên thư mục website. Sử dụng lệnh sau:
sudo chmod -R 755 /var/www/example.comLỗi "404 Not Found". Đảm bảo rằng các file của website nằm trong thư mục đúng và được đặt tên chính xác.
Website không hiển thị. Kiểm tra rằng dịch vụ web server của bạn đang chạy:
sudo systemctl status nginx sudo systemctl status apache2
Bây giờ website của bạn đã sẵn sàng cho mọi người biết địa chỉ của nó. Thật truyền cảm hứng, phải không nào? Trong các bài giảng tiếp theo, bạn sẽ học thêm nhiều điều thú vị nữa: thêm HTTPS để bảo mật và quản lý các cấu hình trên server.
GO TO FULL VERSION