[HỌC HTML 01] GIỚI THIỆU KHOÁ HỌC

Chào mừng bạn đến với blog Lê Nhật Thanh dot Com, và đây là series khóa học HTML và HTML 5 cơ bản. HTML và CSS là sự khởi của mọi lập trình viên web, cả hai đều không phải là ngôn ngữ lập trình, nên việc học HTML là cực kì đơn giản cho người mới (ngoài ra, JavaScript cũng là một ngôn ngữ nên tảng quan trọng trong web).

HTML là ngôn ngữ đáng dấu văn bản (Hypertext Markup Language), vì vậy nó không có biến, vòng lặp hay kiểu dữ liệu như những ngôn ngữ lập trình khác. Nếu bạn hoàn toàn chưa biết gì về HTML, bạn có thể hiểu một cách đơn giản, khi bạn nhìn thấy một trang web trên trình duyệt (bảo gồm chữ, hình ảnh, video, âm thanh, …) thì HTML chính là phần “xương” của website, còn CSS làm cho các thành phần HTML trở nên đẹp hơn.

Và hiện tại bạn đang muốn đi theo con đường lập trình web, hay bạn đang thực hiện một dự án nào đó mà cần tới HTML để làm một trang web đơn giản thì series khóa học HTML này là dành cho bạn.

#1 MỘT VÍ DỤ VỀ HTML

Bạn hãy xem ví dụ sau, đây là một ví dụ đơn giản nhất về HTML.

See the Pen zeNaGO by lenhatthanh20 (@lenhatthanh20) on CodePen.


Khi bạn đọc xong ví dụ trên, chắc bạn có thể đoán được phần nào về HTML. Mình sẽ giải thích một số thẻ trong ví dụ trên. Thẻ (tag) là gì thì bạn sẽ được tìm hiểu ngay sau phần này.

  • <!DOCTYPE html> định nghĩa rằng tài liệu (document) này chính là HTML5. Người ta hay dùng từ document để định nghĩa cho một trang HTML, bạn hãy lưu ý điều này khi đọc các hướng dẫn bằng tiếng Anh.
  • <html> là thẻ ngoài cùng của một trang HTML, hay còn gọi là thẻ root, dùng để bao bọc tất cả các thẻ HTML khác trong đó.
  • <head> chứa các thể mô tả meta. Bạn sẽ hiểu kĩ hơn trong phần structure (cấu trúc HTML).
  • <title> mô tả tiêu đề của trang HTML.
  • <body> chứa các thành phần mà bạn nhìn thấy trên website.
  • <h1> đây là một thẻ tiêu đề lớn (kích thước lớn).
  • <p> mô tả một đoạn văn bản.

#2 TÌM HIỂU VỀ THẺ (TAG)

HTML được hình thành từ các thẻ (tag), như bạn thấy trong ví dụ trên, tất cả đều là thẻ. Và một thẻ trong HTML được cấu tạo như thế nào?

<tên thẻ> Nội dung ở đây... </tên thẻ>
  • Các thẻ HTML thường là cặp như cấu trúc trên. Ví dụ <p></p>.
  • Thẻ bắt đầu chúng ta thường gọi là opening tag (thẻ mở) và thẻ kết thúc thường được gọi là closing tag (thẻ đóng).
  • Thẻ đóng sẽ có thêm dấu forward slash /.

#3 TÌM HIỂU VỀ WEB BROWSER

Các trình duyệt web bạn hay dùng (Chrome, IE, Firefox, Safari ) chính là những web browser. Web browser sẽ đọc HTML document và hiển thị chúng ra màn hình cho chúng ta thấy.
Bạn hãy tạo một file index.html với nội dung là ví dụ trên. Sau đó mở file đó với trình duyệt của bạn. Bạn sẽ thấy kết quả tương vụ như phần result của ví dụ.

#4 CẤU TRÚC MỘT TRANG HTML

Cấu trúc trang HTML
Hình 1 – Cấu trúc trang HTML

Trên hình 1, là cấu trúc của một trang HTML. Một trang HTML sẽ được bao bởi thẻ <html>, bên trong thẻ này gồm 2 thành phần chính là headbody.

Bạn hãy để ý, chỉ có phần màu trắng (bên trong thẻ <body>) là được hiển thị ra ngoài web browser.

#5 TÌM HIỂU VỀ <!DOCTYPE>

<!DOCTYPE> là một khai báo giúp cho trình duyệt biết rằng đây là tài liệu (document) gì và trình duyệt sẽ hiển thị chính xác. Ở trong ví dụ của mình là <!DOCTYPE html> đã được giải thích ở trên.

<!DOCTYPE> được thêm vào đầu trang HTML, trước tất cả các thẻ HTML (bạn hãy nhìn lại ví dụ).

#6 CÁC PHIÊN BẢN CỦA HTML (TÌM HIỂU THÊM)

Công nghệ web ra đời rất sớm, và bảng sau đây thống kê về các phiên bản của HTML.

VersionYear
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

#7 KẾT

Vậy là trong bài đầu tiên của series khóa học HTML này, chúng ta đã tìm hiểu một chút về khái niệm HTML, cấu trúc và các thẻ đầu tiên trong HTML. Chúng ta sẽ tiếp tục trong các bài sau về HTML trong khóa học HTML cơ bản này.



2 Bình luận

Bạn thắc mắc điều gì?