Ngày 1: Bắt đầu hành trình MERN Stack với HTML
Chào mừng bạn đến với hành trình MERN Stack của tôi! Ngày hôm nay, tôi đã chính thức bắt đầu từ những điều cơ bản nhất, và tôi chọn HTML làm nền tảng đầu tiên. Trong bài viết này, tôi sẽ chia sẻ với bạn những kiến thức mà tôi đã học được trong ngày đầu tiên này.
1. Giới thiệu về Mạng
Trước khi đi sâu vào HTML, tôi đã tìm hiểu cách mà mạng hoạt động. Khi chúng ta nhập một URL vào trình duyệt, các trang web sẽ được tải như thế nào? Việc hiểu rõ về mạng giúp tôi nắm bắt được cách thức mà các tài nguyên được truy cập và hiển thị trên trình duyệt.
2. Giới thiệu về HTML
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu chính để xây dựng các trang web. Tôi đã tìm hiểu về cấu trúc của một tài liệu HTML và cách mà nó tạo ra khung cho bất kỳ trang web nào.
Cấu trúc cơ bản của HTML
html
<!DOCTYPE html>
<html>
<head>
<title>Tựa đề của trang</title>
</head>
<body>
<h1>Chào mừng đến với trang web đầu tiên của tôi</h1>
</body>
</html>3. Thẻ Head
Trong phần <head> của tài liệu HTML, tôi đã tìm hiểu về các thành phần như metadata, tiêu đề trang và các liên kết đến các tệp stylesheet hoặc script. Điều này rất quan trọng để đảm bảo trang web hoạt động tốt và tối ưu cho SEO.
4. Định dạng văn bản
HTML cung cấp nhiều thẻ để định dạng văn bản. Tôi đã khám phá cách sử dụng các thẻ như <b>, <i>, <u>, <strong>, và <em> để làm nổi bật nội dung.
5. Hình ảnh trong HTML
Tôi đã thực hành việc nhúng hình ảnh vào trang web bằng cách sử dụng thẻ <img>. Dưới đây là một ví dụ:
html
<img src="link_to_image.jpg" alt="Mô tả hình ảnh">6. Danh sách trong HTML
Tôi đã làm việc với danh sách có thứ tự <ol> và danh sách không có thứ tự <ul>. Đây là một cách tuyệt vời để tổ chức thông tin.
Ví dụ về danh sách
html
<ul>
<li>Món ăn 1</li>
<li>Món ăn 2</li>
</ul>7. Bảng trong HTML
Tôi đã học cách tạo bảng bằng cách sử dụng các thẻ <table>, <tr>, <td>, và <th>. Bảng giúp trình bày dữ liệu một cách rõ ràng và có tổ chức.
Ví dụ về bảng
html
<table>
<tr>
<th>Tên</th>
<th>Tuổi</th>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>25</td>
</tr>
</table>8. Liên kết trong HTML
Tôi đã thực hành tạo các liên kết với thẻ <a>, giúp kết nối các trang khác nhau trong trang web. Đây là cách để người dùng có thể chuyển đổi qua lại giữa các trang.
Ví dụ về liên kết
html
<a href="https://www.example.com">Đi đến trang ví dụ</a>9. Biểu mẫu trong HTML
Tôi đã tìm hiểu về các phần tử biểu mẫu khác nhau như <input>, <textarea>, <select>, và cách mà chúng thu thập dữ liệu từ người dùng. Biểu mẫu rất quan trọng trong việc tương tác với người dùng.
Ví dụ về biểu mẫu
html
<form action="submit_form.php" method="post">
<label for="name">Tên:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Gửi">
</form>10. Thẻ ngữ nghĩa trong HTML
Tôi đã hiểu tầm quan trọng của các thẻ ngữ nghĩa như <header>, <footer>, <section>, và <article>. Những thẻ này giúp cải thiện cấu trúc và SEO của trang web.
11. Hosting
Cuối cùng, tôi đã khám phá cách để lưu trữ một trang tĩnh bằng cách sử dụng GitHub Pages và Netlify. Đây là một bước quan trọng để làm cho trang web của tôi có thể truy cập được trên Internet.
Thực hành
Sau khi học tất cả những khái niệm này, tôi quyết định kết hợp chúng lại và xây dựng trang web đầu tiên của mình chỉ với HTML. Tôi cũng đã triển khai nó trực tuyến để bất kỳ ai cũng có thể xem.
👉 Bạn có thể kiểm tra trang web của tôi tại đây: Liên kết 1
👉 Bạn có thể kiểm tra trang web của tôi tại đây: Liên kết 2
Thực hành tốt nhất
- Luôn sử dụng các thẻ ngữ nghĩa để cải thiện SEO.
- Kiểm tra tính tương thích với các trình duyệt khác nhau.
- Sử dụng thuộc tính
altcho hình ảnh để cải thiện khả năng truy cập.
Những cạm bẫy thường gặp
- Không sử dụng thẻ
<title>có nội dung rõ ràng. - Quên không thêm liên kết đến CSS hoặc JavaScript.
Mẹo hiệu suất
- Tối ưu hóa hình ảnh trước khi nhúng vào trang.
- Giảm thiểu số lượng thẻ
<div>không cần thiết trong cấu trúc.
Giải quyết sự cố
- Nếu trang không hiển thị đúng, hãy kiểm tra lỗi trong console của trình duyệt.
- Đảm bảo rằng các đường dẫn đến tài nguyên như CSS, JS và hình ảnh là chính xác.
Kết luận
Ngày đầu tiên trong hành trình MERN Stack của tôi đã diễn ra rất thú vị và bổ ích. Tôi đã học được nhiều điều mới mẻ về HTML và cách xây dựng một trang web cơ bản. Hãy theo dõi các bài viết tiếp theo của tôi để khám phá thêm về MERN Stack và các công nghệ web khác nhé! Chúc bạn thành công trong hành trình lập trình của mình!
