Học lập trình web, nên bắt đầu từ đâu?

DSCF5909.jpg
Phuong Vo
Đăng ngày 03 tháng 5, 2022

Khi bạn muốn học một điều gì đó mới và không biết bắt đầu từ đâu, thì bạn nên bắt đầu ở bất cứ đâu. Nếu bạn vẫn chưa có một khái niệm nào để tiếp cận lập trình web, thì mình sẽ gợi ý cho bạn một keyword là HTML.

HTML là gì?
Cấu Trúc Của File HTML
Thẻ `div` trong HTML
Tránh lạm dụng thẻ `div`
Kết
lập trình web

Khi bạn muốn học một điều gì đó mới và không biết bắt đầu từ đâu, thì bạn nên bắt đầu ở bất cứ đâu. Nếu bạn vẫn chưa có một khái niệm nào để tiếp cận lập trình web, thì mình sẽ gợi ý cho bạn một keyword là HTML.

HTML là gì?

HTML (viết tắt của từ HyperText Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript.

(Nguồn Wikipedia)

Nếu bạn search Google thì bạn sẽ được một khái niệm như vậy, thật sự nó hơi nhàm chán. Mình sẽ lấy cho bạn một ví dụ: nếu mình muốn nói chuyện với người Nhật mà họ hiểu mình thì mình phải sử dụng ngôn ngữ tiếng Nhật, nói chuyện với người Pháp thì dùng tiếng Pháp. Tương tự như vậy muốn trình duyệt như Chrome hiểu được thì mình sử dụng ngôn ngữ HTML. Vậy giờ mình sẽ học lập trình web, bắt đầu từ HTML nhé!


Đoạn mã HTML đơn giản

Ở trên là một đoạn mã HTML, các thẻ html được bọc bởi cặp dấu , thường có mở thẻ là sẽ có đóng thẻ. Ví dụ: . Bạn hãy copy đoạn mã trên vào trình soạn thảo bất kỳ (notepad, texteditor) sau đó lưu file dưới dạng . Chỉ như vậy là bạn đã lập trình một đoạn HTML đơn giản rồi. Thử mở file lên nhé!

Cấu trúc của file HTML

Phân tính nhẹ đoạn source ở trên:

  • Thẻ : cặp thẻ bắt buộc. Để gói nội dung HTML.
  • Thẻ : cặp thẻ chứa các meta, còn meta là gì thì mình từ từ tìm hiểu sau, phần này còn liên quan tới SEO nữa.
  • Thẻ : cặp thẻ chứa nội dung chính của website của bạn, phần lớn thời gian bạn sẽ làm việc trong này.
  • Các thẻ còn lại trong body sẽ chứa các thuộc tính riêng, ví dụ heading thì ta có các thẻ từ đến , đoạn văn thì mình sử dụng thẻ . HTML sẽ còn rất nhiều thẻ, kể ra nữa thì mình ngủ luôn mất, bạn có thể tham khảo thêm ở w3schools.

Lời khuyên của mình là bạn cứ xem qua hết một lượt các thẻ HTML có tồn tại, khi lập trình không chắc rằng bạn sẽ sử dụng hết, nhưng lướt qua để biết nó tồn tại sẽ dễ cho việc tìm kiếm sau này.

Thẻ trong HTML

Như bạn đã thấy 1 file HTML nó hình thành rất nhiều thẻ khác nhau, vì vậy để phân khu vực nhóm các phần tử này lại với nhau thì người ta sẽ sử dụng thẻ . Bạn có thể bỏ bất cứ thẻ nào khác bên trong thẻ này.

Ví dụ:


Vì tính chất quyền lực của thẻ bạn có thể bỏ nhiều thứ vào, vì vậy khi kếp hợp với CSS (thứ dùng để canh chỉnh, màu sắc, font chữ,.. cho các phần tử HTML) thẻ có thể thay thế hầu hết các thẻ chứa các thuộc tính định dạng của HTML. Vậy câu hỏi đặt ra là: "Thế tại sao không dùng thẻ mà lại có nhiều thẻ với định dạng khác nhau làm chi?".

Tránh lạm dụng thẻ

Như đã nói ở trên thẻ có thể thay thế hầu hết mọi phần tử HTML chứa thuộc tính định dạng. Tuy nhiên hãy thử tưởng tượng nếu website của bạn đang bị lạm dụng thẻ , khi ấy đoạn mã HTML của bạn sẽ có một rừng các thẻ lồng nhau nó sẽ dẫn đến các hậu quả như sau:

  • Khó trong việc quản lý mã và bảo trì.
  • Độ sâu của HTML càng lớn thì tốc độ website càng chậm.
  • Nếu sử dụng thẻ thay thế cho các thẻ như heading cũng làm giảm SEO của trang (website tuột hạng khi tiềm kiếm bằng google).

Nên nhớ rằng rất tiện nhưng hãy dùng nó đúng cách, hãy dùng để nhóm những phần tử mà các thẻ HTML khác không thể đảm nhiệm được. Thay vì sử dụng thẻ bạn có thể sử dụng cá thẻ có ngữ nghĩa của HTML ví dụ như:

  • : cho phần đầu trang.
  • : cho phần cuối trang.
  • : cho nội dung chính.
  • : một phần của trang trong nội dung chính.
  • : bài viết của trang.
  • : dùng để làm các nút điều hướng cho trang.
  • ...

Việc sử dụng càng nhiều các thẻ có ngữ nghĩa này sẽ giúp cho các search engine (ví dụ search engine của google) sẽ dễ dàng "thấu hiểu" được website của bạn đang cung cấp nội dung gì, để khi search từ khóa sẽ dễ dàng ra kết quả của website của bạn hơn.

Kết

Nhìn chung HTML tương đối dễ tiếp cận và dễ để tạo ra một đoạn code HTML mà không cần phải cài đặt môi trường gì phức tạp, bạn cũng không cần nhớ hết các thẻ của HTML nhưng cần đọc qua hết để biết có bao nhiêu thẻ tồn tại lúc cần thì chỉ cần search thôi. Hãy viết một đoạn HTML có ngữ nghĩa sẽ giúp bạn tăng hiệu năng, tăng SEO và quan trọng là bạn dễ đọc lại nó để bảo trì.

button right
HTML là gì?
Cấu Trúc Của File HTML
Thẻ `div` trong HTML
Tránh lạm dụng thẻ `div`
Kết