Chào mừng bạn đến với Ngày 1 của Thách thức Lập trình Full-Stack
Chào bạn, nhà phát triển Full-Stack tương lai,
Chúng ta bắt đầu hành trình 365 ngày đầy thú vị này cùng nhau. Tôi là Dhanian, một lập trình viên và sẽ là người hướng dẫn bạn từ những dòng mã đầu tiên đến việc xây dựng các ứng dụng full-stack hoàn chỉnh.
Hôm nay, chúng ta sẽ khám phá nền tảng của phát triển web: HTML (Ngôn ngữ Đánh dấu Siêu văn bản). Nếu việc xây dựng một trang web giống như xây dựng một ngôi nhà, thì HTML chính là khung thép và nền móng bê tông. Nó không lo lắng về màu sơn hay cách bố trí nội thất; nhiệm vụ của nó là xác định cấu trúc—nơi mà các bức tường, phòng và cửa sổ sẽ được đặt.
Ba Trụ Cột Của Mỗi Trang Web
Một tài liệu HTML được xây dựng dựa trên ba trụ cột chính. Hiểu rõ chúng là điều không thể thiếu và chúng sẽ trở thành bản năng của bạn. Chúng bao gồm:
<!DOCTYPE html>- Phần
<head> - Phần
<body>
Chúng ta hãy khám phá từng phần một cách chi tiết.
1. Khai Báo <!DOCTYPE html>
Nó là gì: Đoạn mã này là dòng đầu tiên trong tài liệu HTML của bạn. Đây không phải là một thẻ HTML; nó là một hướng dẫn đặc biệt gọi là "khai báo loại tài liệu."
Chức năng: Nhiệm vụ của nó đơn giản nhưng rất quan trọng: cho trình duyệt web biết, "Này! Hãy diễn giải tài liệu này như HTML5 hiện đại." Điều này đảm bảo rằng trang của bạn sẽ được hiển thị đúng và đồng nhất trên các trình duyệt khác nhau (như Chrome, Firefox, hoặc Edge).
Tại sao điều này quan trọng: Trong quá khứ, đã có nhiều phiên bản của HTML (như HTML 4.01) và XHTML, với các khai báo doctype phức tạp và dài dòng. HTML5 đã đơn giản hóa điều này chỉ còn <!DOCTYPE html>. Bằng cách bao gồm nó, bạn ngăn trình duyệt chuyển sang các "chế độ tương thích" lỗi thời và kỳ quặc.
Đoạn mã mẫu:
html
<!DOCTYPE html>
<html lang="vi">
<!-- Phần còn lại của mã của bạn sẽ ở đây -->
</html>Luôn bắt đầu tệp HTML của bạn với dòng này. Nó giống như công bố các quy tắc của trò chơi trước khi bạn bắt đầu chơi.
2. Phần <head>: Bộ não của hoạt động
Nó là gì: Phần <head> là một container cho tất cả các metadata "hậu trường" về trang web của bạn. Nó được đặt ngay sau thẻ mở <html>.
Chức năng: Nội dung bên trong <head> không hiển thị cho người dùng trên trang web. Thay vào đó, nó cung cấp thông tin quan trọng cho trình duyệt và các công cụ tìm kiếm. Hãy nghĩ nó như thẻ ID và hướng dẫn sử dụng cho trang của bạn.
Các yếu tố chính bên trong <head>:
<title>: Thiết lập tiêu đề cho trang web của bạn, sẽ xuất hiện trên tab trình duyệt. Nó cũng là tiêu đề được sử dụng khi ai đó đánh dấu trang của bạn và vô cùng quan trọng cho SEO (Tối ưu hóa Công cụ Tìm kiếm).<meta charset="UTF-8">: Định nghĩa mã hóa ký tự cho tài liệu của bạn. Sử dụngUTF-8là rất quan trọng vì nó bao gồm hầu như tất cả các ký tự từ mọi ngôn ngữ của con người. Nếu không, trang của bạn có thể không hiển thị các ký tự hoặc biểu tượng đặc biệt đúng cách.- Các thẻ
<meta>khác: Cung cấp mô tả, từ khóa và thông tin tác giả cho các công cụ tìm kiếm. <link>: Dùng để liên kết các tài nguyên bên ngoài, quan trọng nhất là các tệp CSS của bạn, mà chúng ta sẽ sử dụng sau này để định dạng trang.<style>: Dùng để viết mã CSS trực tiếp bên trong tài liệu HTML.
Đoạn mã mẫu & Ví dụ:
html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Web Đầu Tiên Của Tôi | Thách Thức 365 Ngày</title>
<meta name="description" content="Đây là trang web đầu tiên của tôi cho thách thức lập trình viên full-stack 365 ngày.">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Nội dung hiển thị sẽ ở đây -->
</body>
</html>Giải thích: Phần <head> chứa tiêu đề của trang, đảm bảo mã hóa văn bản đúng, hỗ trợ khả năng phản hồi di động (viewport meta tag), cung cấp mô tả cho SEO và liên kết đến một tệp stylesheet.
3. Phần <body>: Bề Mặt Hiển Thị
Nó là gì: Phần <body> chứa tất cả nội dung mà người dùng thấy trong cửa sổ trình duyệt chính. Đây là nơi bạn sẽ dành 90% thời gian của mình với tư cách là lập trình viên front-end.
Chức năng: Tất cả những gì bạn thấy trên một trang web—văn bản, hình ảnh, video, nút, biểu mẫu—đều nằm trong thẻ <body>. Đây là nơi bạn cấu trúc nội dung của mình bằng nhiều thẻ HTML khác nhau như <h1>, <p>, <img>, <a>, và nhiều hơn nữa.
Đoạn mã mẫu & Ví dụ:
html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Trang Hiển Thị Đầu Tiên Của Tôi</title>
</head>
<body>
<!-- Đây là phần hiển thị của trang web -->
<h1>Đây là Tiêu Đề Chính</h1>
<p>Đây là một đoạn văn bản. Đây là nơi bạn sẽ viết nội dung chính cho khách truy cập của bạn.</p>
<img src="image.jpg" alt="Mô tả về hình ảnh" width="400">
<a href="https://www.example.com">Đây là một liên kết đến một trang web khác</a>
</body>
</html>Giải thích: Nội dung bên trong thẻ <body>—tiêu đề, đoạn văn, hình ảnh và liên kết—là những gì người dùng thực sự thấy và tương tác.
Kết Hợp Tất Cả: Bức Tranh Hoàn Chỉnh
Hãy kết hợp cả ba trụ cột thành một mẫu HTML5 tiêu chuẩn duy nhất. Đây là bức tranh trắng mà bạn sẽ bắt đầu với mọi dự án.
html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mẫu HTML Tiêu Chuẩn Của Tôi</title>
<!-- Bạn có thể thêm nhiều thẻ meta, liên kết đến CSS hoặc script ở đây -->
</head>
<body>
<!-- Bạn sẽ viết tất cả nội dung hiển thị của bạn ở đây -->
<h1>Xin Chào, Thế Giới!</h1>
<p>Chào mừng bạn đến với Ngày 1. Hành trình của bạn đã chính thức bắt đầu.</p>
<!-- Bạn có thể thêm script trước thẻ đóng body -->
</body>
</html>Thách thức Ngày 1 của bạn:
- Tạo một thư mục mới trên máy tính của bạn cho thử thách này.
- Mở một trình soạn thảo văn bản (như VS Code, Notepad++, hoặc thậm chí Notepad).
- Gõ mẫu mã ở trên bằng chính tay của bạn. Đừng sao chép dán. Gõ nó giúp xây dựng trí nhớ cơ bắp.
- Lưu tệp với tên
index.htmltrong thư mục mới của bạn. - Mở tệp trong trình duyệt web của bạn (bạn có thể chỉ cần nhấp đúp vào tệp). Bạn sẽ thấy "Xin Chào, Thế Giới!" và đoạn văn của bạn.
Chúc mừng bạn! Bạn vừa tạo ra trang web đầu tiên của mình. Hẹn gặp lại bạn vào Ngày 2.
Bạn muốn có một hướng dẫn toàn diện để đồng hành cùng bạn trong suốt hành trình này? Tải ebook của tôi, "Cẩm Nang Lập Trình Viên Full-Stack Toàn Diện," để có các bài học có cấu trúc, dự án và khám phá sâu vào mọi khái niệm mà chúng ta sẽ đề cập.
— Dhanian
