![[HỌC HTML 01] GIỚI THIỆU KHOÁ HỌC](https://lenhatthanh.com/wp-content/uploads/2019/01/Lê-Nhật-Thanh-dot-Com-770x300.png "[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>và</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
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à head và body.
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.
| Version | Year |
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2014 |
#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.
![[HỌC JAVASCRIPT 01] GIỚI THIỆU JAVASCRIPT](https://lenhatthanh.com/wp-content/uploads/2019/02/learn-javascript-lenhatthanhdotcom-70x70.png "[HỌC JAVASCRIPT 01] GIỚI THIỆU JAVASCRIPT")
Currently it sounds like Movable Type is the preferred
blogging platform out there right now. (from what I’ve read) Is that
what you’re using on your blog?
I use WordPress.