Cách tạo một trang web cực đơn giản!

Bạn đã bao giờ nhìn vào một trang web và tự hỏi: “Ủa, cái này làm sao mà ra được ta?” =)) Nếu có, thì chào mừng bạn đến với hành trình khám phá lập trình web! Trong bài viết này, mình sẽ hướng dẫn cách tạo một trang web dễ như ăn bánh trưng. Chỉ cần tập trung vào ba ngôn ngữ chạy trên trình duyệt: HTML, CSS và JavaScript, là bạn đã có thể tạo ra một trang web đơn giản đến phức tạp. Cứ làm từ từ, hiểu từng thành phần một, rồi sau này ngon hơn thì cứ từ từ nâng cấp sau he.

Đôi điều cơ bản về lập trình web

Hãy coi việc lập trình web như miêu tả về hình mẫu lý tưởng ngoan xinh iuu của mình.

Đầu tiên là: Cao 2 mét, người tốt, chắc chắn phải là người tốt từ 2 hướng. Mắt to, tóc dài đến mắt cá chân, giọng nói nhẹ nhàng, yêu chồng thương con, bờ la bờ la.

Okey phân tích như sau:

• Với HTML giúp bạn xây dựng nên khung xương cao 2 mét, đủ các bộ phận mà bạn cần. Dễ ràng mở rộng =)))
• Tiếp theo đến CSS giúp bạn trang điểm, tô son, người tốt, mắt to lên, tóc dài ra,…

Thực ra tới đây là cũng tốt lắm rồi. Nhưng thiếu đoạn nhỏ nhẹ và yêu chồng thương con,… Các phần liên quan đến script này thì sẽ là của javascript nhá :v

HTML – Xây dựng khung trang web

HTML chính là bộ xương của một trang web, giúp nó có cấu trúc rõ ràng. Và nếu bạn nghĩ: “Chỉ cần quăng vài cái <div> là xong!”, thì xin đừng plss! =))) Việc sử dụng HTML đúng cách không chỉ giúp trang web dễ đọc, dễ code mà còn giúp mấy con bot hiểu được nội dung để SEO tốt hơn.

Nguyên tắc quan trọng của HTML

Một trang web chuẩn chỉ nên có một thẻ <h1> duy nhất, vì đó là tiêu đề chính. Cũng đừng nhảy cóc từ <h1> sang <h3> hay <h4> plss, thứ tự phải đúng như đi cầu thang: <h1> → <h2> → <h3>… Ngoài ra, khi thêm ảnh, nhớ điền alt vào đầy đủ không thì mấy con bot nó gần như bó tay khi không biết ảnh của bạn nói về cái gì. Đi phỏng vấn mà hỏi mấy câu này quay quay là về luôn :v

Ngoài ra, đừng dùng <div> và <span> vô tội vạ! Chúng không có ý nghĩa gì cả (thẻ non-semantics). Thay vào đó, hãy dùng các thẻ HTML5 như <section>, <article>, <header>, <footer> để giúp trang web có cấu trúc rõ ràng, rành mạch, dễ hiểu hơn.

Các nhóm thẻ quan trọng trong HTML

Với HTML, bạn không cần biết hết tất cả các thẻ, chỉ cần hiểu sâu về các nhóm thẻ quan trọng là đủ:

• Nhóm thẻ Block: Bao gồm <h1>-<h6>, <p>, <ul>, <ol>, <li>, <hr>, <pre>, <div>. Đây là những thẻ tạo ra các khối nội dung riêng biệt, rất quan trọng trong việc xây dựng layout.
• Nhóm thẻ Inline: Bao gồm <a>, <button>, <input>, <i>, <em>, <select>, <strong>, <b>, <span>. Chúng thường được dùng trong các đoạn văn hoặc bên trong các phần tử block.

Cái khó nhất trong HTML không phải là nhớ tên thẻ, mà là sử dụng đúng ngữ nghĩa của nó. Bạn không cần nhớ quá nhiều thẻ vì cũng không dùng hết, nhưng hãy chắc chắn rằng bạn hiểu cách dùng các thẻ thường dùng và thuộc tính của chúng.

<article>
  <header>
    <h1>Tiêu đề bài viết</h1>
    <p>Tác giả: Nguyễn Văn A</p>
  </header>

  <section>
    <h2>Giới thiệu</h2>
    <p>Đây là nội dung giới thiệu về bài viết.</p>
  </section>

  <footer>
    <p>Ngày đăng: 25/02/2025</p>
  </footer>
</article>

CSS – Trang trí giao diện và tối ưu UI/UX

CSS không chỉ giúp trang web đẹp hơn mà còn có ảnh hưởng lớn đến trải nghiệm người dùng (UI/UX). Nếu làm đúng, trang web của bạn sẽ trông chuyên nghiệp và dễ sử dụng hơn rất nhiều.

Các thuộc tính CSS quan trọng

Không cần nhớ hết mọi thuộc tính CSS, nhưng bạn nhất định phải hiểu rõ những thứ quan trọng sau:

• color và background: Giúp kiểm soát màu sắc tổng thể.
• display: Hiểu về block, inline, flex, grid để sắp xếp bố cục hợp lý.
• box-sizing: Sử dụng border-box để tránh lỗi kích thước không mong muốn.
• flexbox và grid-box: Cách hiện đại để căn chỉnh layout một cách linh hoạt.
• animation và border-radius: Dùng để tạo hiệu ứng mềm mại, nhưng đừng lạm dụng.

Nguyên tắc UI/UX quan trọng trong CSS

• Sử dụng màu sắc nhất quán: Hạn chế số lượng màu chính để giao diện không bị rối.
• Không dùng quá nhiều font chữ: Dùng tối đa 2-3 font để giữ sự chuyên nghiệp.
• Khoảng cách hợp lý: Dùng margin, padding để tạo sự thoải mái cho mắt người dùng.
• Tránh hiệu ứng quá lố: Animation cần tinh tế, tránh gây khó chịu nếu bạn không muốn trông trang web như một đống rác

<style>
  div {
    color: #333;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
  }
</style>
<div>
  <span>Đây là một thẻ span cuteee :v</span>
</div>

Tham khảo thêm các nguyên tắc UI/UX:

• Laws of UX
• NN Group

JavaScript – Tạo sự kiện và tương tác

HTML có khung, CSS có áo quần, nhưng trang web mà không có JavaScript thì chả khác gì búp bê… JavaScript giúp trang web có tương tác, phản hồi với người dùng, như khi bạn bấm nút, nhập dữ liệu hay thay đổi nội dung, gọi data từ server,…

Ví dụ về JavaScript đơn giản

Dưới đây là một ví dụ đơn giản giúp bạn tạo một sự kiện khi người dùng nhấn vào nút:

<button id="myButton">Cái nút bé xíu</button>
<script>
  document.getElementById("myButton").addEventListener("click", function () {
    alert("Bạn đã bấm vào nút! :))");
  });
</script>

JavaScript giúp trang web thú vị hơn rất nhiều. Nhưng đây chỉ là bề nổi của tảng băng trôi thôi. Nếu muốn làm những thứ hoành troáng hơn, như game online hay web app xịn xò con bò, thì nhớ theo dõi bài viết tiếp theo nhé! <3

Nói chung là…

Tạo một trang web không khó, chỉ cần đi đúng hướng. HTML giúp bạn tạo khung, CSS giúp trang web lung linh, và JavaScript làm cho nó có sức sống. Bạn không cần nhớ hết tất cả thẻ hay thuộc tính, mà chỉ cần hiểu cách dùng những cái quan trọng nhất. Khi đã quen tay rồi, bạn có thể tự tin xây dựng một trang web theo phong cách của riêng mình.