SaigonTech Vault
Loại: knowledge-doc 2026-09-29 active #wiki-import

Tìm hiểu về HTML

1. Khái niệm

  • HTML (HyperText Markup Language) là "Ngôn ngữ Đánh dấu Siêu văn bản" được thiết kế ra để tạo nên các trang web trên World Wide Web.
  • Định dạng file HTML là .html. VD: quang.html, index.html,...
  • File HTML có thể kết hợp thêm CSS và Javascript để giúp trang web linh hoạt và đẹp hơn.

2. Danh sách thẻ trong HTML

Refer: https://www.w3schools.com/tags/tag_comment.asp

  • Link: sử dụng tag <a></a>
  • Hiển thị danh sách (list) sử dụng tag:
  • <li> : một dòng trong một list
  • <ol> : dùng cho các list có đánh đầu là số thứ tự cụ thể từ 1~

  • <ul> : dùng cho các list có đánh đầu không phải là số

  • Hiển thị bảng sử dụng tag:

  • <table> : tạo 1 bảng mới
  • <tr> : 1 dòng trong bảng, nội dùng từng ô đi theo chiều ngang từ trái sang phải
  • <th> : 1 ô trong bảng, dùng cho header của mỗi cột
  • <td> : 1 ô trong bảng

Edited:

<thead></thead>: dòng tiêu đề ở đầu bảng
<tfoot></tfoot>: dòng tiêu đề ở cuối bảng (required: one or more <tr> inside)

Ví dụ về header nằm ngang (????)

Ví dụ về header nằm dọc (????)

  • Menu sử dụng tag:
  • <menu> : tạo 1 menu mới
  • <li> : 1 dòng trong menu
  • Form sử dụng tag:
  • <form> : tạo 1 form mới
  • <input> : 1 dòng trong form
  • &lt;label&gt; : 1 dòng trong form, dùng ngay dưới input với type là checkbox và radio </form>
  • Danh sách các thẻ thường dùng trong form:
  • &lt;input type="text" /&gt;: để nhập chữ số trên 1 dòng
    • &lt;input type="number"&gt; : tạo 1 dòng để điền số
    • &lt;input type="radio"&gt; : 1 dòng trong radio list. Trong radio list chỉ có thể chọn một
    • &lt;input type="checkbox"&gt; : 1 dòng trong checkbox list. Có thể có nhiều lựa chọn
    • &lt;input type="button"&gt; : 1 nút bấm
    • &lt;input type="submit"&gt; : cũng là nút bấm nhưng có chức năng submit
    • &lt;input type="date"&gt; : dùng để chọn ngày tháng từ lịch các ngày trong tháng
    • &lt;input type="month"&gt; : dùng để chọn 1 trong 12 tháng
    • &lt;input type="email"&gt; : dùng để điền email. Nếu thiếu định dạng @ sẽ báo lỗi
    • &lt;input type="password"&gt; : dùng để điền password. Sẽ ẩn thông tin được điền vào bằng ký tự dấu chấm to
    • &lt;input type="file"&gt; : dùng để tải file lên
    • &lt;input type="image"&gt; : dùng để tải ảnh lên
    • &lt;input type="url"&gt; : dùng để điền thông tin dạng url
  • Nút bấm: sử dụng tag button có ... loại (Submit,reset, ...)
  • Xuống dòng: sử dụng &lt;br&gt;
  • Hiển thị ảnh: sử dụng &lt;img src="ảnh.jpg" alt="Mô tả ảnh"&gt;
  • Hiển thị 1 dòng gạch ngang: sử dụng &lt;hr&gt;
  • Hiển thị một khối, một vùng, một section: sử dụng tag &lt;div&gt;&lt;/div&gt;

3. Demo

&lt;html&gt;
    &lt;header&gt;
        &lt;meta&gt;&lt;/meta&gt;
        &lt;meta&gt;&lt;/meta&gt;
        &lt;meta&gt;&lt;/meta&gt;

        &lt;style&gt;
          &lt;!-- Embed CSS or SCSS code --&gt;
        &lt;style&gt;
    &lt;/header&gt;

    &lt;body&gt;
        &lt;div&gt;
            &lt;p&gt;Who are you?&lt;/p&gt;
            &lt;span&gt;Anwer:&lt;span&gt; &lt;a href="..."&gt;Here&lt;/a&gt;
        &lt;/div&gt;
    &lt;/body&gt;

    &lt;footer&gt;&lt;/footer&gt;
&lt;/html&gt;

4. Exercise

Viết 1 đoạn HTML: - Định nghĩa mã hóa UTF-8 cho trang web (gợi ý: tag &lt;meta&gt;) - Hiển thị chữ "Tham khảo" với đường dẫn đến https://www.w3schools.com/ - Tạo 1 biểu mẫu (form) gồm: + Họ và tên. + Giới tính (gồm "Nam", "Nữ", "Khác"). + Năm sinh (sử dụng type "date"). + Nghề nghiệp (theo thứ tự gồm: bác sĩ, kỹ sư (chọn mặc định), họa sĩ, thợ điện). + Nơi sinh sống (gồm 63 tỉnh thành Việt Nam) + Ảnh đại diện (upload image) + Số điện thoại + Email + Ghi chú (sử dụng textarea) + Tôi đồng ý với các điều khoản trên (checkbox - auto checked) + Nút submit form

- Tạo 1 bảng như hình bên dưới: