TỰ HỌC HTML SIÊU TỐC

1. Internet là gì?

Internet là một mạng lưới toàn cầu, kết nối hàng tỷ máy tính và các thiết bị thông minh (điện thoại, máy tính bảng, thiết bị IoT) trên khắp thế giới. Chúng được kết nối với nhau thông qua hệ thống cáp quang, cáp đồng hay sóng vô tuyến, cho phép các thiết bị này trao đổi dữ liệu và liên lạc với nhau.

2. Máy chủ web (web server):

• Máy chủ web chứa toàn bộ thông tin của 1 hay nhiều website, thường có dung lượng lớn, băng thông lớn nhằm đảm bảo nhiều nguồn truy cập cùng lúc mà không bị tắt nghẽn, chạy 24/7 để đảm bảo không bị gián đoạn khi truy cập. Khi có máy khách truy cập vào 1 website, máy chủ web sẽ làm động tác gửi toàn bộ thông tin của website về cho từng máy khách để load lên màn hình.
• Mọi máy chủ web đều có 1 địa chỉ IP (giống như địa chỉ nhà) được hệ thống tên miền (DNS - Domain Name System) gán với tên miền để dễ nhớ.

VD: bạn có thể kiểm tra được địa chỉ IP của bất kỳ tên miền nào, chúng ta thử kiểm tra địa chỉ IP của tên miền google.com nhé. Trên cửa sổ tìm kiếm Chrome, hãy gõ "check ip domain" , chọn https://www.nslookup.io rồi nhập tên miền google.com, sau đó nó sẽ trả lại địa chỉ IP của tên miền goole.com, chẳng hạn là: 216.58.198.14. Bây giờ trên trình duyệt, để vào trang google thay vì nhập tên miền, bạn cũng có thể nhập trực tiếp địa chỉ IP, trình duyệt vẫn sẽ mở trang google.com bình thường.

Như vậy, địa chỉ IP và tên miền thực chất chỉ là một. Mục đích của tên miền (Google.com, Youtube.com, Facebook.com ...) chỉ là để dễ nhớ thay vì phải nhớ 1 dãy số dài khô khan vô nghĩa!.

3. Nguyên lý hoạt động của internet:

• Khi máy khách truy cập vào trang ThichVocVach.io.vn -> trình duyệt sẽ chuyển đến hệ thống máy chủ DNS để tìm xem địa chỉ IP là mấy. Sau khi có địa chỉ IP, trình duyệt sẽ đi trực tiếp đến máy chủ của ThichVocVach.io.vn và máy chủ có nhiệm vụ trả lại toàn bộ nội dung của trang web (gồm các file .html, .css, .js, .jpg, .png ...) cho máy khách. Tại đây, trình duyệt máy khách sẽ đọc thông tin các file đã nhận, xây dựng lại thành trang web rồi xuất ra màn hình cho người dùng.

4. Cách tạo 1 website:

• Các bạn hoàn toàn có thể tạo 1 website từ đầu cho đến khi hoàn chỉnh trên máy tính cá nhân của các bạn thông qua 1 trình soạn thảo mã nguồn gọi là code editors như: Visual Studio Code, Sublime Text, Notepad++. Lúc này website của các bạn đang ở trạng thái private – tức là chỉ có 1 mình bạn truy cập được để chỉnh sửa và phát triển thêm. Sau khi website đã được hoàn thiện, nếu muốn cho nhiều người truy cập, các bạn phải “đẩy” website đó lên máy chủ web. Lúc này website sẽ ở trạng thái public, sẵn sàng cho nhiều người truy cập. 

5. Tên miền (domain) và lưu trữ (hosting):

• Hai khái niệm này chỉ xuất hiện khi bạn muốn public website, còn ở private thì không có.
  - Tên miền (domain): giống như địa chỉ nhà vậy, muốn nhiều người biết và có thể truy cập vào được, các bạn phải đăng ký tên miền như: ThichVocVach.io.vn thông qua nhà cung cấp tên miền như: P.A Việt Nam, Mắt Bão, GoDaddy, Namecheap …
  - Lưu trữ (hosting): giống như diện tích đất của căn nhà. Muốn cất được nhà bạn phải có đất và lớn hay nhỏ là tùy nhu cầu mỗi người. Thường những nhà cung cấp tên miền cũng cung cấp luôn cả gói lưu trữ (hosting). 
  Như vậy để public được website lên web server, các bạn cần phải có domain và hosting.
  
  
• 

 ⬆ Về đầu Bài 1

1. Static website (web tĩnh):

• Là trang web có nội dung không thay đổi, về cơ bản chỉ mang những thông tin đơn giản cố định.

• Cách dễ nhận diện là chúng không có phần đăng nhập hoặc bình luận hay tương tác… chỉ đơn giản là để xem thôi. 

• Không có cơ sở dữ liệu, thường chỉ dùng công nghệ HTML, CSS và JavaScript thuần. Chính vì đơn giản nên có tốc độ load trang rất nhanh.

• Thường được ứng dụng cho các trang quảng cáo, giới thiệu doanh nghiệp, Blog cá nhân đơn giản, Landing Page cho chiến dịch marketing…

2. Dynamic website (web động):

• Là trang web có nội dung thay đổi, được cập nhật thường xuyên, như Facebook, vnexpress, shopee … 

• Cách dễ nhận diện là chúng thường có phần đăng nhập, bình luận, hay tương tác như: like, share, subscribe …

• Có cơ sở dữ liệu, ngoài dùng các công nghệ của web tĩnh, web động còn dùng thêm các công nghệ PHP, Node.js, mySQL … . thường có tốc độ load trang chậm do phải xử lý và truy vấn cơ sở dữ liệu.

• Thường được ứng dụng cho mạng xã hội, sàn thương mại điện tử, tin tức thời sự, ứng dụng web (web app) …

3. FrontEnd:

• Trong lập trình web, thường chia làm 2 khái niệm rõ rệt là frontend và backend.

• Chữ “end” trong frontend và backend có nghĩa là phía, frontend là phía trước, còn backend là phía sau.

• Frontend chủ yếu sẽ chịu trách nhiệm về phía client, tức là về phía người dùng gồm: thiết kế giao diện web, nhận thông tin, yêu cầu từ phía người dùng rồi gửi về phía backend.

• Thường những trang web tĩnh chỉ có phần frontend, không có phần backend.

   

4. BackEnd:

• Backend chủ yếu sẽ chịu trách nhiệm về phía server, tức là phần hậu kỳ gồm: tiếp nhận thông tin, yêu cầu từ phía frontend gửi tới, truy vấn dữ liệu, xử lý logic rồi trả kết quả về cho phía frontend.

• Thường những trang web động có cả frontend và backend.

• Lập trình viên website thường cũng chia làm 2 nhóm: frontend và backend, có phân công và nhiệm vụ rõ ràng. Còn những lập trình viên có khả năng làm cả 2 phía thì gọi là full-stack.
  
  

VD: Để dễ hình dung, chúng ta lấy 1 ví dụ trực quan là chiếc xe hơi: 

• Frontend sẽ giống như lớp vỏ bên ngoài của chiếc xe, những phần người dùng có thể thấy được, sờ được.

• Backend sẽ giống như hệ thống máy móc vận hành bên trong chiếc xe, những phần âm thầm hoạt động bên trong, người dùng không thấy được, không sờ được.
  
  

 ⬆ Về đầu Bài 2

Để học HTML, các bạn chỉ cần một chiếc máy tính có cấu hình văn phòng là đủ (tối thiểu 8G RAM).

• Một trình soạn thảo mã nguồn (Code Editor): mình khuyên dùng Visual Studio Code (VS Code). Nó hoàn toàn miễn phí, nhẹ nhàng và có kho tiện ích mở rộng (Extensions) cực đỉnh như Live Server (giúp bạn sửa code đến đâu, trình duyệt tự động F5 hiển thị kết quả đến đấy).

• Một trình duyệt web: Google Chrome, Microsoft Edge hoặc Firefox để chạy thử file .html do bạn viết ra.

1. Xem thông tin và hướng dẫn cài VS code:

• Xem thêm thông tin về VSCode:

📖 https://thichvocvach.io.vn/view.php?slug=thong-tin-visual-studio-code

• Tải từ trang chủ chính thức:

🏠  https://code.visualstudio.com/

• Sau khi tải xong, cài đặt bình thường

2. Bắt đầu HTML với VS Code:

1. Tạo thư mục dự án:

Một trang web hoàn chỉnh sẽ bao gồm rất nhiều file và thư mục con và thường được lưu trong 1 thư mục dự án. Hiện tại chúng ta chỉ mới bắt đầu, chưa thể tạo website hoàn chỉnh, nên để cho gọn, chúng ta thống nhất chỉ tạo 1 thư mục dự án (ví dụ: vocvach-html) và lưu tất cả các bài thực tập về html vào trong đó (ví dụ: bai-01.html, bai-02.html ...), không cần mỗi bài lại phải tạo 1 thư mục dự án.

• • Mở VS Code > File > Open folder > chọn ổ D > bấm phải chuột vào vùng trống chọn New > Folder > đặt tên thư mục dự án là vocvach-html (không nên tạo ở ổ C, hoặc đặt tên tiếng Việt hoặc có dấu cách dễ bị sai đường dẫn)

  • Sau đó bấm select folder > xuất hiện thông báo check vào ô trust the author > bấm nút yes, I trust

  • ⚠️ Lưu ý: tên tệp hoặc thư mục nên đặt không dấu và không có khoảng cách. Nếu cần cách ra thì dùng dấu gạch nối (VD: tự học html -> tu-hoc-html).

1. 

   
   
   
2. Cửa sổ VS Code:
   • Bên trái là Explorer: tắt / mở bằng cách bấm vào icon trang giấy (hoặc Ctrl - B)
   • Bên phải là Editor: trong đó mở được nhiều tab, mỗi tab là 1 file
   • Tạo file mới: bấm vào icon trang giấy có dấu cộng, hoặc vào menu File >  New file > đặt tên file
   • Tạo thư mục mới: bấm vào icon hồ sơ có dấu cộng, hoặc theo cách ở mục (2.a.)
     
     
   • 
3. Tạo file mới:
   • Tạo file đầu tiên: bấm vào icon tạo file > đặt tên bai-3.html > cửa sổ editor xuất hiện tab bai-3.html
   • Tạo cấu trúc chuẩn của html bằng gõ tắt: gõ ! (dấu chấm than) > bấm tab hoặc enter > xuất hiện cấu trúc chuẩn của html
     
     
   • 
4. Chỉnh kích thước font chữ & lưu:
   • Vào Manage (bánh răng góc dưới bên trái) > Setting > ở ô tìm kiếm gõ font size > ở ô font size gõ 18 (mặc định là 14) > đóng cửa sổ setting sẽ thấy cỡ chữ bên Editor tăng lên
   • File chưa lưu sẽ có chấm tròn trắng ở đầu tab. Để lưu bấm Ctrl-S, file đã được lưu sẽ mất chấm tròn trắng.
5. Chạy - xem thử file vừa tạo:
   • Chạy file: bấm phải vào file bai-3.html bên trái > chọn reveal in file explorer > sẽ hiện cửa sổ file explorer > bấm phải vào bai-3.html chọn open with > chọn Chrome hoặc Edge > sẽ xuất hiện trang trắng vì chưa có nội dung.
     
     
   •    
     
     
   • Thêm nội dung: trở về cửa sổ soạn thảo, nội dung hiển thi lên trang web thường sẽ nằm trong thẻ <body> ... nội dung ... </body>. Hãy thêm nội dung sau vào trong thẻ <body>

   • <body>
          <h1>Xin chao moi nguoi!</h1>
     </body>

   • Lưu và chạy lại: các bạn sẽ thấy trên trang web xuất hiện nội dung mới code
   • 
     
   •  

 ⬆ Về đầu Bài 3

VS Code có rất nhiều gói tiện ích mở rộng (extension) để hỗ trợ chúng ta trong quá trình viết code (coding) được dễ dàng hơn. Sau đây là những extension thật sự hữu ích cho quá trình coding của khóa học HTML này mà các bạn nên cài thêm vào VS Code.

1. Prettier:
   • Chức năng: tự động định dạng lại code trông đẹp và dễ đọc hơn
   • Cách chọn extention: bấm vào biểu tượng (icon) bốn hình vuông ở thanh dọc bên trái (activity bar) > gõ prettier vào ô tìm kiếm (search) > bấm chọn Prettier - Code formatter
   • Cài đặt: lúc này cửa sổ editor sẽ xuất hiện tab Prettier > bấm vào nút install > cài xong đóng tab Prettier
   • 
     
   • Thiết lập (setting): bấm vào icon bánh răng ở góc dưới bên phải > chọn setting (Ctrl-,) > ô search gõ: default format > mục đầu tiên (editor: Default Formatter) chọn Prettier - Code formatter. 
     Tiếp tục ở ô search gõ: format on save > tích chọn mục format on save 
   • 
     
     
2. Chỉnh tự động lưu: không cần phải bấm Ctrl-S để lưu nữa
   • Ở ô search của setting tiếp tục gõ: auto save > ở mục auto save chọn onFocusChange > đóng setting. Như vậy từ giờ mỗi lần chuyển qua tab khác thì VS Code sẽ tự động lưu 
3. Icon theme:
   • Chức năng: tạo biểu tượng nhìn trực quan hơn
   • Cài đặt: về lại phần cài extention > search: icon theme > bấm install > sau khi cài xong nhìn lên tab bai-3.html sẽ thấy icon thay đổi
   • Thiết lập: bấm vào nút Set File Icon Theme > chọn Material Icon Theme
     
     
4. Image preview:
   • Chức năng: khi dùng thẻ <img> sẽ thấy hình thumbnail 
     
     
5. Color highlight:
   • Chức năng: khi làm việc với màu sắc sẽ hiển thị màu 1 cách trực quan (khóa học CSS).
     
     
6. Auto rename tag:
   • Chức năng: tự động đổi tên đồng bộ cặp thẻ đóng + mở khi thay đổi 1 trong 2
     
     
     
     
7. Live server:
   • Chức năng: khi thay đổi code -> trang web sẽ tự thay đổi theo
   • Cách dùng:
     • Cài xong bấm vào Go Live / port:5500 ở góc dưới bên phải > bấm allow access (nếu có)
     • Hoặc bấm phải vào vùng trống, chọn Open with Live Server
       
       
       
8. Live server preview:
   • Chức năng: hiển thị kết quả real time ngay trong tab editor luôn rất tiện
   • Cách dùng: Sau khi cài xong > ở tab bai-3.html > bấm F1 > gõ: live, rồi chọn Show live server preview > xuất hiện tab kết quả
     
     
   • 
9. Code spell checker:
   • Chức năng: tự động kiểm tra chính tả (tiếng Anh + tiếng Việt)
   • Thiết lập: vào setting > Open setting (JSON) ở icon góc trên bên phải > thêm dòng "cSpell.language": "en,vi" vào cuối json > lưu và đóng. Bây giờ nếu gõ sai chính tả tiếng Anh và tiếng Việt sẽ bị gạch chân 
     
     
     
     
10. HTML tag wrap:
    • Chức năng: bao bọc 1 khối bằng 1 thẻ mới
    • Thiết lập: vào setting, search: word wrap, ở mục word wrap bật on, ở mục word wrap column gõ 100
    • Cách dùng: đánh dấu khối cần bao, bấm Alt-W
      
      
11. HTML to CSS autocompletion:
    • Chức năng: tự động gợi ý tên class, id trong CSS (khóa CSS)
      
      

 ⬆ Về đầu Bài 4

1. HTML thực chất là gì?

Rất nhiều bạn mới bắt đầu thường nhầm HTML là một ngôn ngữ lập trình. Nhưng thực chất, HTML (HyperText Markup Language) chỉ là Ngôn ngữ đánh dấu siêu văn bản, nó không phải là ngôn ngữ lập trình vì không chứa các logic phức tạp như câu lệnh điều kiện if/else, vòng lặp hay thuật toán....

1. Để dễ hình dung các bạn hãy tưởng tượng về một ngôi nhà:

• HTML chính là phần khung xương, gạch thô và cột bê tông để định hình form nhà (đâu là phòng khách, đâu là cửa sổ, đâu là cột trụ).

• CSS là trang trí nội thất như sơn tường, rèm cửa, gạch men để làm ngôi nhà đẹp lên. (sẽ học sau)

• JavaScript là hệ thống điện thông minh, cửa tự động, máy móc thiết bị giúp ngôi nhà hoạt động. (sẽ học sau)

• 

2. Thêm 1 ví dụ nữa để các bạn dễ hình dung đó là ngôn ngữ:

• HTML giống như danh từ (để giới thiệu).

• CSS giống như tính từ (để mô tả, làm đẹp).

• JavaScript giống như động từ (để hành động).

• 

Nhiệm vụ của HTML rất đơn giản: Nói cho trình duyệt web (Chrome, Edge, Safari) biết đâu là khối dòng tiêu đề (Heading), đâu là khối đoạn văn (Paragraph), đâu là khối hình ảnh và đâu là khối bảng dữ liệu. Những khối này được HTML bọc trong những thẻ khác nhau <tag>...khối...</tag>

2. Sơ lược về ngôn ngữ HTML: 

HTML hoạt động chủ yếu dựa trên các thẻ <tag>, có hơn 100 thẻ, nhưng những thẻ thông dụng thường dùng chỉ khoảng 30 thẻ thôi. Có 1 lưu ý nhỏ là các bạn đừng cố học vẹt toàn bộ hàng trăm thẻ (tags) của HTML, các bạn cứ yên tâm, làm nhiều tự khắc sẽ hiểu và nhớ thôi. Chỉ nên nhớ những thẻ thông dụng, còn những thẻ khác thì khi cần có thể xem lại tài liệu. 

1. Cấu trúc thẻ (tag):
   • Đa số các thẻ của HTML đều có cấu trúc thẻ mở (opening tag) - nội dung (content) - thẻ đóng (closing tag), có cú pháp như sau: 
     <tag> content </tag>
     thẻ đóng giống y như thẻ mở nhưng có thêm dấu xuyệt.
   • Một số thể đặc biệt chỉ có thẻ mở <tag>, không có nội dung content và không có thẻ đóng </tag>.
2. Một số thẻ thông dụng:
   • Các thẻ định dạng văn bản gồm: Thẻ tiêu đề <h1> đến <h6>, thẻ đoạn văn <p>, thẻ tạo liên kết <a>, thẻ xuống dòng <br>, và thẻ gạch ngang <hr>.
   • Các thẻ hiển thị đa phương tiện gồm: thẻ hình ảnh <img>, thẻ video <iframe>.
   • Các thẻ danh sách và bảng gồm: Thẻ danh sách <ul>, <ol>, <li>, thẻ bảng dữ liệu <table>, <tr>, <td>.
   • Các thẻ có ngữ nghĩa gồm: thẻ khối đầu <header>, thẻ khối điều hướng <nav>, thẻ khối chính <main>, thẻ khối phần<section>, thẻ khối bên <aside>, thẻ khối mục <article>, thẻ khối chân <footer>.
3. Các thuộc tính (attribute) của thẻ: Một số thẻ đặc biệt, có thêm 1 hay nhiều thuộc tính ở bên trong thẻ mở.
   • Thẻ hình ảnh: <img src="..."> có thêm thuộc tính src bên trong thẻ mở
   • Thẻ liên kết: <a href="..."> có thêm thuộc tính href bên trong thẻ mở
     
     

Tóm lại: bài này chủ yếu chúng ta nắm rõ cấu trúc thẻ gồm: <thẻ mở> nội dung </thẻ đóng> và thuộc tính (nếu có) sẽ nằm trong thẻ mở. Còn chức năng cụ thể của từng thuộc tính thì chúng ta sẽ học ở những bài sau nhé.

 ⬆ Về đầu Bài 5

1. Các thẻ chính và chức năng trong cấu trúc HTML:
   • Tạo bài mới bai-6.html, gõ !, bấm tab hoặc enter, sẽ xuất hiện cấu trúc HTML, nhìn vào cấu trúc ta thấy bao gồm các thẻ:
     • <!DOCTYPE html> : khai báo sử dụng HTML 5 - Phiên bản mới nhất hiện tại của html
     • <html> ... </html>: chứa thẻ head và thẻ body, là toàn bộ trang web
     • <head> ... </head>: tiêu đề trang, mô tả trang, từ khóa ...
     • <body> ... </body>: nội dung chính của trang web
       
       
   • Các thẻ chính như là khung sườn của 1 trang web, chúng bắt buộc phải có và duy nhất (không được trùng)
2. Các thẻ phụ và chức năng:
   • Các thẻ phụ có thể có hoặc không, có thể ít hoặc nhiều tùy mục đích
   • <meta ... />: là thẻ tự đóng nên không có thẻ đóng </meta>  , khai báo đa phương tiện
   • <title> ... </title>: Tiêu đề của trang web trên trình duyệt
   • <h1> ... </h1> đến <h6> ... </h6> : Các tiêu đề của nội dung, bài viết. h1 quan trọng nhất, chữ lớn nhất. h6 ít quan trọng nhất, chữ nhỏ nhất
   • <p> ... </p>: đoạn văn bản (paragraph)
   •  
3. Cấu trúc Emmet:
   • Thay vì phải gõ từng lệnh, chúng ta có thể dùng cấu trúc Emmet để gõ tắt (giống tốc ký) rồi bấm tab hoặc enter để bung ra. Có rất nhiều emmet, các bạn không cần phải học thuộc, làm nhiều tự nhiên sẽ nhớ. Một số emmet thông dụng như:
     • !: cấu trúc html (đã làm ở các bài trước)
     • h1 : <h1>...</h1>, tương tự đến h6
     • p: <p> ... </p>
     • {nội dung}: để viết nội dung bên trong các thẻ
   • ⚠️ Lưu ý: phải có gợi ý thì cấu trúc emmet mới hoạt động. Nếu mất gợi ý bấm Ctrl-space để hiện lại
4. 🎯 Thực hành:
   • Vào Bai-6.html, các bạn hãy sửa tiêu đề trang thành Bài 6
   • Thêm thẻ h1 có nội dung: CẤU TRÚC TỆP HTML vào trong thẻ body bằng cấu trúc emmet (h1{CẤU TRÚC TỆP HTML}. Nếu mất gợi ý emmet bấm Ctrl-space)
   • Tiếp thêm thẻ p có nội dung: Tôi đang học html cũng bằng emmet (p{Tôi đang học html})
   • Xong bấm phải chuột vào vùng trống > chọn Open with live server (hoặc bấm vào Go Live / Port 5500 ở góc dưới bên phải) để xem kết quả
   • 
     

 ⬆ Về đầu Bài 6

1. Thẻ body: <body> ... </body>
   • Là 1 phần tử (element) thuộc thẻ HTML, được sử dụng để chứa nội dung chính của trang web, bên trong thẻ body có thể chứa các thẻ con (phần tử - element) như: văn bản, hình ảnh, định dạng .... để dễ hình dung hãy xem thẻ body là 1 bức tranh, còn các phần tử con là những chi tiết thể hiện bên trong bức tranh đó.
   • 
2. Các thẻ con thông dụng bên trong thẻ body:
   1. Thẻ h (h1..h6): để định nghĩa tiêu đề của trang web. Chỉ nên dùng 1 tiêu đề chính h1 cho 1 trang web, còn h2 trở đi có thể dùng nhiều. không nên dùng nhảy cóc từ h1 xuống h4 mà không có h2, h3.
   2. Thẻ p (paragraph): để chứa đoạn văn bản
   3. Thẻ b (bold): để in đậm (hoặc dùng thẻ <strong> ... </strong>)
   4. Thẻ i (italic): để in nghiêng (hoặc dùng thẻ <em> ... <em>)
   5. Thẻ u (underline): để gạch chân
   6. Thẻ a (anchor): để link, gắn kèm đường liên kết
   7. Thẻ ul (un-ordered list): để liệt kê danh sách không có thứ tự
   8. Thẻ ol (ordered list): để liệt kê danh sách có thứ tự
   9. Thẻ li (list item): là thẻ con của thẻ ul hoặc thẻ ol, chính là các mục trong danh sách
3. Phân biệt giữa thẻ (tag) và phần tử (element):
   1. Thẻ: chỉ bao gồm thẻ mở (opening tag) và thẻ đóng (closing tag), không bao gồm nội dung ở giữa
   2. Phần tử: bao gồm cả thẻ và nội dung
      
      
      
      
4. Tài liệu tham khảo:
   • Còn rất nhiều thẻ, các bạn có thể tham khảo thêm tại MDN (thẻ nào có biểu tượng thùng rác là không còn được dùng nữa).
   • 
      
5. 🎯 Thực hành:
   1. Bài thực hành 1:
      
      • Tạo file bai-7a.html
      • Dùng emmet ! để tạo cấu trúc html
      • đổi tiêu đề: Bài 7a
      • dùng cấu trúc emmet h${Tiêu đề}*6 để bung ra từ h1..h6, giải thích: 
        • $: chỉ số đếm
        • {...}: nội dung trong thẻ
        • *n: số lượng phần tử
        • Lưu ý: quá trình viết phải luôn có gợi ý của emmet thì mới hoạt động, nếu mất gợi ý bấm Ctrl-space để hiện lại
      • Tiếp đến thêm "lớn nhất" vào nội dung h1, "lớn vừa" cho h2, "vừa" cho h3, "nhỏ" cho h4, "nhỏ hơn" cho h5 và "nhỏ nhất" cho h6
      • Xong, xem kết quả
      • 
        
        
        
   2. Bài thực hành 2:
      • Tạo file bai-7b.html
      • Dùng emmet ! để tạo cấu trúc html (lần sau các bạn tự động làm bước này, mình sẽ không nhắc lại)
      • Đổi tiêu đề thành Bài 7b: Tìm hiểu thẻ body và các thẻ con (lần sau tự làm)
      • trong thẻ html, đổi thuộc tính (attribute) lang="vi" dùng ngôn ngữ tiếng Việt (lần sau tự làm)
        
        
      • Dùng emmet lorem để tạo 1 dòng (1 dòng = 30 từ) văn bản ngẩu nhiên
      • Dùng emmet lorem7 để tạo 7 từ ngẩu nhiên
      • Dùng emmet lorem*3 để tạo 3 dòng văn bản ngẩu nhiên
      • Tiếp, hãy bao 3 nội dung trên với 3 thẻ p bằng cách đánh dấu khối từng nội dung, bấm Alt-W để bao lại (do có cài extention HTMLTagWrap ở bài 4)
      • Xong, xem kết quả
        
        
        
        

 ⬆ Về đầu Bài 7

Thẻ tự đóng là những thẻ đặc biệt, chỉ có phần thẻ mở (opening tag), mà không có phần thẻ đóng (closing tag) và không có phần nội dung (content)

1. 1. Thẻ <br> hoặc <br /> - break: ngắt dòng, xuống dòng
   • Trong đoạn văn, HTML không xem enter là xuống dòng nên muốn xuống dòng bắt buộc phải dùng thẻ tự đóng <br>. Xem ví dụ sau các bạn sẽ thấy rõ sự khác nhau khi không có / có <br>
     • Khi không dùng thẻ <br> các dòng sẽ bị dồn lên 1 dòng.
       

       <p>
          Cô em má đỏ hồng hồng
          Cho anh xin hỏi có chồng hay chưa?
          Anh hỏi thì em xin thưa 
          Con em bốn đứa nhưng chưa có chồng. 
       </p>

       

     • Khi dùng thẻ <br> để xuống dòng. Nếu muốn xuống nhiều dòng thì dùng nhiều thẻ <br> liên tiếp

       <p>
          Cô em má đỏ hồng hồng <br>
          Cho anh xin hỏi có chồng hay chưa? <br>
          Anh hỏi thì em xin thưa <br>
          Con em bốn đứa nhưng chưa có chồng. <br>
       </p>

       

2. Thẻ <hr> hoặc <hr /> - horizontal rule: tạo đường kẻ ngang ngăn cách 2 phần trên và dưới
   • • Xem ví du:
       

       <p>Đây là phần trên</p>
       <hr>
       <p>Đây là phần dưới</p>

       
       
       
3. Thẻ bình luận <!-- comment -->: phím tắt là Ctrl - /
   • Thẻ bình luận chỉ thấy khi viết code, còn ở trang web sẽ không hiển thị
   • Dùng để chú thích 1 đoạn code bên dưới hoặc dùng để vô hiệu hóa 1 dòng hoặc 1 đoạn code
     • Xem ví dụ:
       

       <!-- Bình luận 1 -->
       <p>Đoạn văn 1</p>
       <!-- Bình luận 2 -->
       <p>Đoạn văn 2</p>

       
       
       
4. 🎯 Thực hành:
   • Copy 2 bài thơ sau vào bai-8.html:
     
     Cô em má đỏ hồng hồng
     Cho anh xin hỏi có chồng hay chưa?
     Anh hỏi thì em xin thưa 
     Con em bốn đứa nhưng chưa có chồng. 
     
     Cậu ơi thương lấy tớ cùng
     Tuy rằng khác lớp nhưng chung một đề
     Cậu cho tớ chép tý nha
     Kẻo không tớ rớt về nhà mẹ la.
     
     
   • Đánh dấu khối từng bài thơ, dùng tagwrap Alt-W để bao từng bài thơ với thẻ p
   • Đưa con trỏ về cuối dòng đầu của bài thơ 1, bấm giữ phím Alt rồi bấm tuần tự vào cuối các dòng 2,3,4 => con trỏ sẽ xuất hiện đồng thời 4 vị trí
   • Gõ <br>, lập tức 4 dòng đều có. Làm tương tự với bài thơ 2
   • Thêm bình luận <!-- Đây là bài thơ x --> vào đầu bài thơ 1 và 2 (dùng phím tắt Ctrl-/)
   • Giữa 2 bài thơ thêm <hr> bằng emmet hr
   • Xong, xem kết quả
     

     <!doctype html>
     <html lang="vi">
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Bài 8: Tìm hiểu các thẻ tự đóng</title>
       </head>
       <body>
         <!-- Đây là bài thơ 1 -->
         <p>
           Cô em má đỏ hồng hồng<br />
           Cho anh xin hỏi có chồng hay chưa?<br />
           Anh hỏi thì em xin thưa <br />
           Con em bốn đứa nhưng chưa có chồng. <br />
         </p>
         <hr />
         <!-- Đây là bài thơ 2 -->
         <p>
           Cậu ơi thương lấy tớ cùng<br />
           Tuy rằng khác lớp nhưng chung một đề<br />
           Cậu cho tớ chép tý nha<br />
           Kẻo không tớ rớt về nhà mẹ la.<br />
         </p>
       </body>
     </html>

     

 ⬆ Về đầu Bài 8

1. Phân biệt giữa thẻ <b> và thẻ <strong>:
   • Thẻ b (bold): in đậm, không có ngữ nghĩa, trang web chỉ xem đây là đoạn văn bình thường.
   • Thẻ strong: in đậm, nhưng có ngữ nghĩa, trang web biết đây là nội dung quan trọng.

   • <p>Đây là: <b>đoạn văn in đậm</b></p>
     <p>Đây là: <strong>đoạn văn quan trọng</strong></p>

   • 
2. Phân biệt giữa thẻ <i> và thẻ <em>:
   • Thẻ i (italic): in nghiêng, không có ngữ nghĩa, trang web chỉ xem đây là đoạn văn bình thường.
   • Thẻ em (emphasis): in nghiêng, nhưng có ngữ nghĩa, trang web biết đây là nội dung nhấn mạnh.

   • <p>Đây là: <i>đoạn văn in nghiêng</i></p>
     <p>Đây là: <em>đoạn văn nhấn mạnh</em></p>

   • 
3. Thẻ <u> (underline): gạch chân

   • <p>Đây là: <u>đoạn văn gạch chân</u></p>

   • 
4. Các thẻ b, i, u có thể lồng với nhau:

   • <p>Đây là: <b><i>đoạn văn vừa in đậm vừa in nghiêng</i></b></p>

   • 
5. 🎯 Thực hành:
   • Tạo bai-9.html, rồi copy nội dung sau vào trong
     
     Họ tên: Trần Như Nhộng
     Ngành: Công nghệ thông tin
     Chức vụ: Chuyên viên IT
     Làm việc tại: ThichVocVach.io.vn
     
     
   • Đánh dấu khối từng dòng, dùng tag wrap Alt-W bọc bằng thẻ p
   • Đánh dấu khối thông tin họ tên, dùng tag wrap Alt-W bọc bằng thẻ b. Tương tự dòng 2 thẻ i, dòng 3 thẻ u và dòng 4 thẻ b và i
   • Xong, xem kết quả
     

     <p>Họ tên: <b>Trần Như Nhộng</b></p>
     <p>Ngành: <i>Công nghệ thông tin</i></p>
     <p>Chức vụ: <u>Chuyên viên IT</u></p>
     <p>Làm việc tại: <b><i>ThichVocVach.io.vn</i></b></p>

     

 ⬆ Về đầu Bài 9

1. Thẻ ul (unordered list): danh sách không có thứ tự
   • Thường dùng cho danh sách không quan trọng trước sau như: menu điều hướng, danh sách sản phẩm, điểm du lịch ...
   • 
2. Thẻ ol (ordered list): danh sách có thứ tự
   • Thường dùng cho danh sách ưu tiên trước sau không thể đảo ngược như: mục lục, bảng xếp hạng ...
   • 
3. Thẻ li (list item): thẻ con trực tiếp của ul hoặc ol, chính là các mục trong danh sách
4. 🎯 Thực hành:
   1. Bài thực hành 1:
      
      • Tạo bai-10a.html
      • Dùng emmet ul>li{Item $}*5 để tạo danh sách không thứ tự có 5 mục
      • Dùng emmet ol>li{Item $}*5 để tạo danh sách có thứ tự có 5 mục
      • Giải thích cú pháp emmet:
        • ul>li: thẻ li là con của thẻ ul
        • {Item $}: Item là nội dung và $ là chỉ số đếm
        • *5: số lượng phần tử
        • Nếu mất gợi ý emmet: bấm Ctrl-space
      • Xong, xem kết quả
      • 
   2. Bài thực hành 2:
      • Tạo bai-10b.html
      • Hãy dùng emmet để tạo cấu trúc sau:
        h1
        h2
        ul có 4 li (ul>li*4)
        
        h2
        ol có 4 li (ol>li*4)
      • Copy từng dòng của nội dung bên dưới vào từng thẻ tương ứng
        
        

        CÁCH LÀM BÁNH MÌ ỐP LA

        Nguyên liệu
        trứng gà
        muối tiêu
        nước tương
        dầu ăn

        Cách chế biến
        cho dầu vào chảo, bật bếp
        dầu sôi, đập trứng cho vào chảo
        trứng vàng, tắt bếp
        rắt muối tiêu và xịt nước tương.
         

      • Xong, xem kết quả
      • 

 ⬆ Về đầu Bài 10

1. khái niệm về thuộc tính (attribute)
   • Ở bài 7.3 chúng ta đã phân biệt được sự khác nhau giữa thẻ (tag) và phần tử (element). Bạn nào chưa nắm chắc thì xem lại nhé. Cấu trúc cơ bản của phần tử gồm: thẻ mở, nội dung, thẻ đóng.
   • Thuộc tính (attribute): là những thông tin bổ sung, được đặt bên trong thẻ mở, nó thường được dùng để xác định vị trí, hành vi hoặc giá trị của thẻ đó.
   • Cấu trúc cơ bản của thuộc tính:
      <tên_thẻ tên_thuộc_tính="giá_trị"> Nội dung </tên_thẻ>
2. Thẻ a (anchor - neo): là một trong những thẻ rất quan trong trong HTML. Nó được dùng để tạo liên kết (hyperlink)
   
   
   1. <a>... nội dung ... </a> : gồm thẻ mở, nội dung và thẻ đóng
   2. href="url": ngoài ra trong thẻ mở a còn có thuộc tính href (hypertext reference ) để khai báo địa chỉ (URL) của trang web sẽ được chuyển đến.
      • href="https://thichvocvach.io.vn": khi bấm vào sẽ chuyển đến trang
      • href="": để trống, khi bấm vào sẽ tải lại trang
      • href="#": khi bấm vào sẽ trở về đầu trang
      • href="#?": khi bấm vào sẽ không làm gì cả
   3. target="giá_trị": thuộc tính target được chỉ định cách mở liên kết
      • target="_self": Mở tại trang hiện tại, là thuộc tính mặc định của thẻ a.
      • target="_blank": Mở trong tab mới
      • Nếu không có target: thẻ a sẽ dùng thuộc tính mặc định target="_self", tức là mở tại trang hiện tại
3. Thẻ img (image): là thẻ tự đóng (self closing tag) để hiển thị hành ảnh trên website
   
   
   1. src="url": (source - nguồn) thuộc tính bắt buộc, được dùng để chỉ định đường dẫn tới tệp hình ảnh.
      • URL có thể là đường dẫn tuyệt đối (Absolute URL): là đường dẫn bao gồm toàn bộ địa chỉ web của hình ảnh.
        

        <img src="https://example.com/images/anh.jpg" alt="Mô tả ảnh">

      • URL có thể là đường dẫn tương đối (Relative URL): là đường dẫn cục bộ dựa vào file HTML đang chạy hiện tại.
        

        <img src="images/anh.jpg" alt="Mô tả ảnh">

      • URL có thể là đường dẫn gốc (root path): là đường dẫn bắt đầu từ thư mục gốc của website, thường bắt đầu bằng /.
        

        <img src="/images/anh.jpg" alt="Mô tả ảnh">

      • Chỉ nên dùng dấu / (slash) cho URL, không nên dùng dấu \ (backslash) dễ bị sai
   2. alt="tên ảnh": (alternative - thay thế)
      • Hiển thị text khi link ảnh bị lỗi
      • Hỗ trợ trình đọc màn hình (screen reader) cho người khiếm thị
      • Công cụ tìm kiếm, thu thập dữ liệu trên trang
        
   3. width="độ rộng": định độ rộng của ảnh, tính bằng px (pixel)
   4. height="độ cao": định độ cao của ảnh, tính bằng px
   5. Một số lưu ý:
      • Nếu không có thuộc tính width và height thì thẻ img sẽ lấy theo đúng kích thước thật của ảnh.
      • Nếu định cả 2 thuộc tính width và height dễ bị sai tỷ lệ làm méo ảnh.
      • Nên chỉ định 1 trong 2 thuộc tính width hoặc height thì thuộc tính còn lại sẽ được tự động tính theo tỷ lệ ảnh. Đây là cách được khuyến nghị nên dùng để định kích thước ảnh. 
      • Các thuộc tính có thể để trước, sau tùy ý, không bắt buộc phải theo thứ tự.
      • Chỉ nên dùng dấu / (slash) cho URL, không nên dùng dấu \ (backslash) dễ bị sai.
        
        

   6. <img src="https://thichvocvach.io.vn/photos/coffee1.png" alt="coffee" width="100" height="200" />
      <!-- chỉ nên định 1 trong 2 width hoặc height -->
      <img src="https://thichvocvach.io.vn/photos/coffee1.png" alt="coffee" width="100" />

      
4. 🎯 Thực hành:
   1. Bài thực hành 1: width / height
      • Tạo bai-11a.html
      • Dùng emmet tạo tiêu đề h1: Hoa sen Việt Nam (h1{Hoa sen Việt Nam})
      • Dùng emmet tạo 3 thẻ img (img*3)
      • Thẻ img đầu tiên chỉ gán url của thuộc tính (attribute) src="https://thichvocvach.io.vn/photos/hoasen6.jpg" và alt="hoa sen"
      • Thẻ img thứ 2 gán src và alt như trên và thêm thuộc tính width="200" height="400"
      • Thẻ img thứ 3 gán src và alt như trên và chỉ thêm thuộc tính width="200"
      • Xong, xem kết quả để thấy sự khác biệt
        
        
        
   2. Bài thực hành 2: url
      • Tạo bai-11b.html
      • Dùng emmet tạo tiêu đề h1: CHỢ BẾN THÀNH (h1{CHỢ BẾN THÀNH})
      • Tạo thư mục img (xem bài 4.2.b)
      • Tìm trên google hình ảnh chợ Bến Thành rồi lưu file (*.jpg hoặc *.png) vào thư mục img, đổi tên file thành ChoBenThanh (Bấm phải vào thư mục img, chọn Reveal in ... )
      • Dùng emmet tạo 3 thẻ img có width="200" (img[width="200"]*3)
      • Thẻ img đầu tiên, gán url = đường dẫn tuyệt đối (bấm vào ảnh đã lưu trên trình duyệt để hiện website chứa ảnh, bấm phải vào ảnh chọn copy image address rồi dán vào url )
      • Thẻ img thứ 2, gán url = đường dẫn tương đối (image/ChoBenThanh.jpg)
      • Thẻ img thứ 3, gán url = đường dẫn gốc (/image/ChoBenThanh.jpg)
      • Xong, chạy GoLive (xem bài 5.7) để xem kết quả
      • 
      • 
   3. Bài thực hành 3:
      • Tạo bai-11c.html
      • Vận dụng những kiến thức đã học, Hãy tạo thiệp sinh nhật cho riêng bạn theo mẫu sao:
        
        Mừng sinh nhật Nguyễn Thị B  (h1)
        ---------------------------------------  (hr)
        hình sinh nhật (tìm ở trang web bất kỳ lấy đường dẫn tuyệt đối) (img)
        Lời chúc (p)
        
        
      • Làm xong, các bạn có thể gửi code qua phần bình luận bên dưới. Nếu có sai hay thắc mắc gì mình sẽ trả lời nhé.
        
        
5. 🔗 Tham khảo thêm các website tải hình ảnh free:
   • Hình jpg: https://unsplash.com
   • Hình png xóa nền: https://www.pngegg.com

 ⬆ Về đầu Bài 11

1. Khái niệm về multi page:
   • Một trang web thường có nhiều trang như: Trang chủ, Giới thiệu, Sản phẩm, Liên hệ .v.v. Có nhiều cách làm, để đơn giản và dễ hiểu, xin giới thiệu với các bạn 2 cách làm chính và chỉ vận dụng những kiến thức cũ mà chúng ta đã được học ở những bài trước.
   • Cách 1:
     • Mỗi trang là 1 file html riêng biệt,  rồi dùng thẻ a (đã học ở bài 11.2) để mở những trang khác.
     • Cách này thường dùng cho những trang web đơn giản, có ít file.
   • Cách 2:
     • Mỗi trang là 1 thư mục có file html bên trong, rồi cũng dùng thẻ a để mở những trang khác.
     • Cách này thường dùng cho những trang web phức tạp có nhiều file.
2. Tìm hiểu về file index.html:
   • index.html là file rất đặc biệt của 1 trang web, nó là file mặc định bắt buộc phải có và được đọc đầu tiên của trang web. Để dễ hình dung hãy tưởng tượng nó là "cánh cửa chính" của 1 trang web, muốn vào là phải đi qua nó trước tiên.
   • Khi chạy file index.html => Trang chủ sẽ được load, nên Trang chủ thường được gắn với file index.html.
3. Tìm hiểu về đường dẫn đặc biệt . và .. :
   • Chỉ dùng cho đường dẫn tương đối (bài 11.3.a), . và .. là hai đường dẫn đặc biệt, dùng để định vị vị trí trong cây thư mục.
   • . là Thư mục hiện tại (current directory) - Thư mục chứa file html đang xem xét (đang code).
   • .. là Thư mục cha (parent directory) - Thư mục chứa thư mục hiện tại
   • VD: bạn có cây thư mục sau:
     BAI12B
         └─ GIOITHIEU / gioithieu.html
         └─ LIENHE / lienhe.html
         └─ IMG / me-1.jpg ; me-2.jpg ; me-3.jpg
         index.html
     
     - Nếu bạn đang code trong file index.html mà muốn lấy hình me-1.jpg trong thư mục IMG thì trong thẻ img có phần thuộc tính src phải viết như sau:
       src="./IMG/me-1.jpg" hoặc src="IMG/me-1.jpg" => vì index.html đang xét ở trong thư mục BAI12B nên (.) sẽ trả về thư mục hiện tại là BAI12B.
     - Nếu bạn đang code trong file gioithieu.html mà muốn lấy hình me-2.jpg trong thư mục IMG thì trong thẻ img có phần thuộc tính src phải viết như sau:
       src="../IMG/me-1.jpg" => vì gioithieu.html đang xét ở trong thư mục GIOITHIEU, nên bạn phải dùng (..) để trả về thư mục cấp cha là BAI12B. 
     
     
4. 🎯 Thực hành:
   1. Bài thực hành 1: theo cách 1
      • Tạo thu mục BAI12A
      • Tạo file index.html
      • Tạo 4 thẻ a bằng emmet
      • Thẻ a đầu tiên có href="index.html", có nội dung: Trang chủ
      • Thẻ a thứ 2 có href="gioithieu.html", có nội dung: Giới thiệu
      • Thẻ a thứ 3 có href="sanpham.html", có nội dung: Sản phẩm
      • Thẻ a thứ 4 có href="lienhe.html", có nội dung: Liên hệ
      • Tạo thẻ h1 có nội dung ĐÂY LÀ TRANG CHỦ
        
        
      • Tạo file gioithieu.html, tạo 4 thẻ a tương tự file index.html, tạo thẻ h1 có nội dung ĐÂY LÀ TRANG GIỚI THIỆU
      • Tạo file sanpham.html, tạo 4 thẻ a tương tự file index.html, tạo thẻ h1 có nội dung ĐÂY LÀ TRANG SẢN PHẨM
      • Tạo file lienhe.html, tạo 4 thẻ a tương tự file index.html, tạo thẻ h1 có nội dung ĐÂY LÀ TRANG LIÊN HỆ
      • Xong, xem kết quả, bấm vào menu ở trên để chuyển trang
        
        
        
   2. Bài thực hành 2: theo cách 2
      • Xây dựng 1 website blog cho riêng bạn
      • Tạo tư mục BAI12B
      • Tạo thư mục img để chứa tất cả hình ảnh liên quan
      • Tạo file index.html cho Trang chủ , có cấu trúc sau:
        Điều hướng: Trang chủ | Giới thiệu | Liên hệ (a*3)
        Tiêu đề: Chào mừng đến với blog của tôi (h1{...}) 
        Gạch ngang (hr)
        Tên bạn (h2{...})
        Chức vụ hoặc chuyên môn (h3{...})
        Hình của bạn (img)
        
        
      • Tạo 2 thư mục con: GIOITHIEU, LIENHE
      • Dựa theo cấu trúc trên, hãy tự làm trang gioithieu.html và lienhe.html theo ý bạn
      • Xong, xem kết quả và gửi bài của bạn xuống phần bình luận.
      • 

 ⬆ Về đầu Bài 12

1. HTML Entities là gì?
   • HTML Entities là các ký tự đặc biệt, được sử dụng để hiển thị các ký tự mà HTML thường dùng làm cú pháp như dấu nhỏ hơn (<), dấu lơn hơn (>), dấu và (&), dấu nháy đôi ("), .v.v. hoặc các ký tự không có trên bàn phím như ký tự copy right (©), ký tự trade mark (™), ký tự euro (€), .v.v. Mục đích là để tránh xung đột với cú pháp của HTML.
   • Cú pháp: là 1 chuỗi nằm trong cặp dấu và và dấu chấm phẩy (& … ;)
   • VD: Bạn muốn hiển thị dòng chữ "b = 4 => 3<b và 5>b" trên website
     • Cách viết SAI: <p>b = 4 => 3<b và 5>b</p>
     • Cách viết ĐÚNG: <p> b = 4 => 3 &lt; b và 5 &gt; b</p>
2. Danh sách các ký tự đặc biệt thường dùng:

   • Ký tự	Entity	Mô tả
     <	&lt;	Less than (nhỏ hơn)
     >	&gt;	Greater than (lớn hơn)
     &	&amp;	Ampersand (dấu và)
     "	&quot;	Double quote (dấu nháy kép)
     '	&apos;	Single quote, apostrophe (dấu nháy đơn)
     ©	&copy;	Copyright (bản quyền)
     ®	&reg;	Registered (đăng ký)
     ™	&trade;	Trademark (nhãn hiệu)
     €	&euro;	Euro (đồng Euro)
     ¥	&yen;	Yen (đồng Yên)
     	&nbsp;	Non-breaking space (khoảng trắng)
     –	&ndash;	En dash (gạch ngang ngắn)
     —	&mdash;	Em dash (gạch ngang dài)

     
     
     
   • VD: muốn xuất chuỗi: "thẻ <h1> là tiêu đề lớn nhất, thẻ <h6> là tiêu đề nhỏ nhất". Vì chuỗi <h1> và <h6> trùng với cú pháp của HTML, nên bạn không thể viết bình thường mà phải dùng cú pháp HTML entities như sau:
     <p>thẻ <h1> là tiêu đề lớn nhất, thẻ <h6> là tiêu đề nhỏ nhất</p>
3. Các ký tự biểu tượng (icon):
   • Các ký tự biểu tượng như: ©, ®, ™, ... . Các bạn có thể dùng cú pháp entities hoặc có thể dùng trực tiếp (copy, paste) vào nội dung (nếu website đang dùng font unicode - UTF8).
   • VD:<p>&copy; Copyright ThichVocVach.io.vn</p> hoặc <p>© Copyright ThichVocVach.io.vn</p>
     
     
4. 🎯 Thực Hành:
   • Tạo file bai13.html
   • Tạo tiêu đề: Hiển thị các ký tự đặc biệt
   • Tạo danh sách có 5 mục thứ tự
   • Dùng cú pháp entities, tạo mục thứ nhất có nội dung: Ký tự nhỏ hơn (less than): ???
   • Mục thứ 2: Ký tự lớn hơn (greater than): ???
   • Mục thứ 3: Ký tự và (ampersand): ???
   • Mục thứ 4: Dấu nháy kép (double quote): ???
   • Mục thứ 5: Dấu nháy đơn (single quote): ???
   • Xong, xem kết quả
   • 

🏠 Website tham khảo thêm:   https://www.w3schools.com

 ⬆ Về đầu Bài 13

1. Thẻ <pre> (preformatted text): giữ nguyên định dạng văn bản
   • Trong HTML, mặc định chỉ nhận 1 khoảng trắng và không nhận ký tự xuống dòng trong nội dung văn bản
     VD: khi các bạn viết các từ cách nhau nhiều khoảng trắng
     

     <h1>Đây            là       tiêu       đề</h1>
     <p>           
            Đây là               nội dung
            văn bản              bình thường
     </p>

     => kết quả vẫn là 1 khoảng trắng và không xuống dòng:
     Đây là tiêu đề
     Đây là nội dung văn bản bình thường
   • Do đó để giữ nguyên định dạng văn bản, các bạn phải dùng thẻ <pre>
     

     <pre>
        Hôm nay      trời đẹp       quá!
        Cho anh      hôn vào        má
     </pre>

2. Thẻ <code>:
   • Thẻ <code> là 1 thẻ có ngữ nghĩa, báo cho trình duyệt biết đây là đoạn code và thường được hiển thị bằng font monospace để dễ đọc.
   • Các ký tự đặc biệt của đoạn code phải dùng cú pháp entities. Nếu đoạn code dài và có nhiều ký tự đặc biệt các bạn có thể dùng công cụ hỗ trợ sau:
     https://codebeautify.org/html-escape-unescape 
     
     
   • Nếu muốn giữ nguyên định dạng (khoảng trắng + xuống dòng) phải dùng thêm thẻ <pre> bao ở ngoài
     VD: Xuất đoạn code trên ra trình duyệt
     
     

     <pre><code>
         &lt;h2&gt;Đây là chợ Bến Thành&lt;/h2&gt;
         &lt;img src=&quot;https://thichvocvach.io.vn/photos/chobenthanh1.jpg&quot; alt=&quot;Chợ Bến Thành&quot;/&gt;
     </code></pre>

3. 🎯 Thực hành:
   1. Bài thực hành 1:
      • Tạo file bai-14a.html
      • Tiêu đề h1: VẼ HÌNH BẰNG ASCII ART
      • Tiêu đề h2: Cây thông Noel
      • Tiêu đề h2: Chú mèo dễ thương
      • Dùng thẻ pre để chèn 2 hình mã asscii vào 2 tiêu đề trên
        

                * 
               ***
              *****
             *******
            ***|||***

           /\_/\
          ( o.o )
           > ^ <
        
        

   2. Bài thực hành 2:
      • Tạo file bai-14b.html
      • Tiêu đề: ĐÂY LÀ CODE HTML
      • Copy khối code của thẻ <head>, dán vào công cụ hỗ trợ codebeauty để chuyển mã entities
      • Dùng thẻ pre và thẻ code, xuất đoạn code trên ra trình duyệt
      • 

 ⬆ Về đầu Bài 14

1. thẻ khối cha <table> và các thẻ khối con <thead>, <tbody>, <tfoot>:
   • là thẻ HTML dùng để tạo bảng (table) nhằm hiển thị dữ liệu dạng hàng (row) và cột (column). Đây là cách tổ chức dữ liệu có cấu trúc, giúp người đọc dễ so sánh và phân tích thông tin. Trong thẻ chính <table>, thường được chia làm 3 phần phụ: đầu bảng (<thead>) ; thân bảng (<tbody>) ; chân bảng (<tfoot>)
   • 
   • Thẻ <thead>: là phần đầu bảng thường chứa 1 dòng dữ liệu tiêu đề.
   • Thẻ <tbody>: là phần thân bảng thường chứa nhiều dòng dữ liệu nội dung.
   • Thẻ <tfoot>: là phần chân bảng thường chứa 1 dòng dữ liệu tổng hợp 
     
     
2. Thẻ dòng <tr> (table row) :
   • Là 1 dòng dữ liệu (1 row / 1 record - 1 mẫu tin). Đây là 1 đơn vị của 1 bảng (table).
   • Để dễ hình dung, các bạn hãy xem bảng (<table>) là do từng dòng dữ liệu (<tr>) gộp lại mà thành.
   • Nắm chắc được <tr> bạn sẽ dễ hình dung và không bị rối khi thiết kế bảng
3. Thẻ dữ liệu <th>, <td>:
   • Trong 1 dòng dữ liệu (<tr>) có nhiều ô thông tin. Mỗi ô thông tin là 1 thẻ <th> hoặc 1 thẻ <td>.
   • Thẻ <th> viết tắt của từ table header, nghĩa là tiêu đề bảng.
   • Thẻ <th> là 1 ô tiêu đề, mặc định hiển thị chữ đậm, căn giữa.
     
     
   • Thẻ <td> viết tắt của từ table data, nghĩa là dữ liệu bảng.
   • Thẻ <td> là 1 ô dữ liệu, mặc định hiển thị chữ thường, căn trái.
   • Cấu trúc cơ bản của bảng:
     
     

   • <table>
                 <!-- Phần đầu bảng / Tiêu đề  -->
                 <thead>
                     <tr>
                         <th>...</th>
                         ...
                         <th>...</th>
                     </tr>
                 </thead>
                 
                 <!-- Phần thân bảng / Nội dung -->
                 <tbody>
                     <tr>
                         <td>...</td>
                         ...
                         <td>...</td>
                     </tr>
                     <tr>
                         <td>...</td>
                         ...
                         <td>...</td>
                     </tr>
                 </tbody>
                 
                 <!-- Phần chân bảng / Tổng hợp -->
                 <tfoot>
                     <tr>
                         <td>...</td>
                         ...
                         <td>...</td>
                     </tr>
                 </tfoot>
     </table>

   • Qua cấu trúc table cơ bản trên chúng ta thấy 3 phần <thead>, <tbody>, <tfoot> đều có ít nhất 1 dòng dữ liệu <tr> tạo nên, và bên trong <tr> lại có <th> hoặc <td>
   • 3 phần <thead>, <tbody>, <tfoot>: chỉ phân chia code table có cấu trúc rõ ràng để dễ quản lý và sửa chữa code, chứ không ảnh hưởng đến quá trình hiển thị trên trang web.
   • Để trang trí làm đẹp cho table, chúng ta sẽ học khóa CSS ở khóa sau.
4. Thuộc tính colspan và rowspan:
   • Trong table có 2 thuộc tính quan trọng là colspan và rowspan, 2 thuộc tính này chỉ dùng cho ô dữ liệu là thẻ <th> và thẻ <td>.
   • - Thuộc tính colspan: Mở rộng một ô (cell) trải dài qua nhiều cột.
      cú pháp: colspan = “số_cột”.
   • Thuộc tính rowspan: Mở rộng một ô (cell) trải dài qua nhiều hàng.
      cú pháp: rowspan = “số_dòng”
   • 
     
     
5. 🎯 Thực hành:
   1. Bài thực hành 1:
      • Tạo file bai-15a.html
      • Tiêu đề: BẢNG DANH SÁCH NHÂN VIÊN
      • Hãy tạo bảng có 5 cột có các tiêu đề:
        STT, Họ và tên , Năm sinh, Địa chỉ, Số ĐT
      • Chỉ dùng phần thead, tbody, không có tfood
      • Phần nội dung bên trong tbody khoảng 5-10 dòng, các bạn tự điền dữ liệu vào sao cho tương ứng với các cột
      • Xong, xem kết quả
        
   2. Bài thực hành 2:
      • Tạo file bai-15b.html
      • Tiêu đề: PHIẾU MUA HÀNG
      • Dùng cấu trúc emmet tạo bảng có 5 cột và 5 dòng, có chân bảng theo cấu trúc sau: STT, Tên hàng , Số lượng, Đơn giá, Thành tiền
        (table>(thead>tr>th*5)+(tbody>(tr>td*5)*5)+(tfoot>tr>td*5). Tạo thẻ cùng cấp dùng dấu +)
      • Phần chân bảng tfood có cấu trúc sau: TỔNG CỘNG viết ở cột Tên hàng, giá trị tổng tiền viết ở cột Thành tiền. Các cột khác không có nội dung thì để thẻ td rỗng (<td></td>)
      • Xong, xem kết quả
      • 
   3. Bài thực hành 3:
      • Copy bài-15b.html để tạo thành bài mới, rồi đổi tên thành bài-15c.html
      • Thêm thuộc tính: border="1" cellspacing="0" cho thẻ table để kẻ khung
      • Hãy áp dụng thuộc tính colspan chiếm 4 cột cho ô dữ liệu tổng cộng
      • Xong, xem kết quả
      • 

 ⬆ Về đầu Bài 15