CHỦ ĐỀ 4. PHẦN MỀM HTML

HTML (Hypertext Markup Language):

Ngôn ngữ đánh dấu siêu văn bản, dùng để tạo cấu trúc trang web.

Thẻ HTML (Tag):

Viết trong cặp dấu < >. Ví dụ: <tên_thẻ>.

Phần tử HTML (Element):

Bao gồm thẻ bắt đầu, nội dung và thẻ kết thúc. (Ví dụ: <p>Nội dung</p>).

Lưu ý: Có thẻ đôi (gồm thẻ đóng và thẻ mở, ví dụ <p>đoạn văn </p>) và thẻ đơn (chỉ có mở, ví dụ <br>, <hr>, <img>).

Sơ đồ cây của một file HTML bao gồm:

• <!DOCTYPE html>: Khai báo kiểu tệp (không phải là thẻ HTML).

• <html>: Phần tử gốc, chứa toàn bộ trang web.

• <head>: Chứa thông tin khai báo (tiêu đề trang <title>, bảng mã <meta charset="utf-8">). Nội dung trong này KHÔNG hiển thị trực tiếp trên trang.

• <body>: Chứa nội dung hiển thị cho người xem (văn bản, ảnh, bảng...).

• Tiêu đề: <h1> (lớn nhất) đến <h6> (nhỏ nhất).
• Đoạn văn: <p>.

• Xuống dòng: <br> (thẻ đơn).
• Kẻ ngang: <hr> (thẻ đơn).

• Cú pháp: tên_thuộc_tính="giá trị".
• Vị trí: Luôn nằm trong thẻ bắt đầu.
• Thuộc tính style: Dùng để định dạng (CSS nội tuyến).

• In đậm: <b> hoặc <strong> (strong nhấn mạnh ý nghĩa hơn).
• In nghiêng: <i> hoặc <em>.
• Gạch chân: <u>.

• Đánh dấu (Highlight): <mark>.
• Chỉ số trên: <sup>.
• Chỉ số dưới: <sub>.

• Màu chữ: style="color: red" (tên màu hoặc mã màu RGB/Hex).
• Phông chữ: style="font-family: Arial".
• Cỡ chữ: style="font-size: 14px".

Danh sách có thứ tự:

Dùng thẻ <ol>, các mục con dùng <li>.

• Thuộc tính type: "1", "A", "a", "I", "i" (kiểu đánh số).
• Thuộc tính start: Giá trị bắt đầu.

Danh sách không thứ tự:

+ Thuộc tính list-style-type: disc (tròn đặc), circle (tròn rỗng), square (vuông).

Danh sách mô tả:

<dl> (danh sách), <dt> (thuật ngữ), <dd> (mô tả).

• Thẻ bao quanh: <table>.
• Tạo hàng: <tr>.
• Tạo ô tiêu đề (in đậm, canh giữa): <th>.
• Tạo ô dữ liệu thường: <td>.

Thuộc tính quan trọng:

• border: Tạo đường viền bảng.
• rowspan="n": Gộp n hàng (gộp dọc).
• colspan="n": Gộp n cột (gộp ngang).

Giải thích chi tiết:

1. <table border="1">: <table border="1">: <table> là thẻ bao quanh, border="1" tạo đường viền (nếu không có số 1, bảng sẽ không hiện khung).
2. <tr>: Khởi tạo một hàng ngang mới.
3. <th>: Dùng cho các ô như "Họ tên", "Lớp" < chữ sẽ in đậm và canh giữa tự động.
4. <td>: Dùng cho nội dung thường như "Lê Long Lanh", "9.5".
5. colspan="3": Gộp 3 ô theo chiều ngang.
6. rowspan="3": Gộp 3 ô theo chiều dọc.

• Thẻ sử dụng: <a>.
• Thuộc tính bắt buộc: href (địa chỉ đích).
• Cú pháp: <a href="địa_chỉ"> Nội dung hiển thị </a>.

Đầy đủ địa chỉ, dùng khi liên kết ra ngoài website.

Vị trí tương quan trong cùng thư mục.

• Bước 1: Đặt id="ten_muc" tại vị trí cần đến.
• Bước 2: Tạo link <a href="#ten_muc">...</a>.

• Thẻ: <img> (Thẻ đơn, không có thẻ đóng).
• Thuộc tính bắt buộc: src (đường dẫn ảnh).
• Thuộc tính hỗ trợ: alt (văn bản thay thế khi ảnh lỗi), width (chiều rộng), height (chiều cao).

Cú pháp:

<img src = "Đường dẫn" alt = "Văn bản thay thế" width = "..." hight = "...">

Ví dụ: Em muốn chèn một chú mèo, sử dụng đoạn code dưới đây:

<img src = "chu-meo.jpg" alt = "Chú mèo dễ thương" width = "300" height = "300">

Giải thích:

• src = "chu-meo.jpg": Đường dẫn tới file ảnh (bắt buộc).
• alt = "Chú mèo dễ thương": Nếu ảnh bị lỗi không hiện ra, dòng chữ "Chú mèo dễ thương" sẽ hiện lên thay thế.
• width = "300": Chiều rộng.
• height = "300": Chiều cao.

<audio src="đường dẫn" controls autoplay></audio>

Ví dụ: Chèn một bài nhạc nền, tự động phát (autoplay) và có nút điều khiển, sử dụng đoạn code sau:

<audio src = "nhac-nen.mp3" controls autoplay></audio>

Giải thích:

• controls: Hiển thị thanh điều khiển để người dùng bấm nghe.
• autoplay: Nhạc sẽ tự chạy ngay khi vào web (Lưu ý: một số trình duyệt hiện đại có thể chặn tính năng này nếu người dùng chưa tương tác).

<video src="đường dẫn" controls width="..."></video>

Ví dụ: Chèn một video giới thiệu, chiều rộng 500px.

<video src = "video-gioi-thieu.mp4" controls width = "500"></video>

Lưu ý: Thuộc tính controls là cần thiết để hiện nút Play/Pause.

• Thẻ: <iframe>.
• Tác dụng: Nhúng một trang web khác vào trong trang hiện tại (thường dùng để nhúng bản đồ, video YouTube).
• Thuộc tính: src (đường dẫn đến trang web cần nhúng).
• Cú pháp: <iframe src="đường dẫn" width="..." height="..."></iframe>

Ví dụ: Nhúng trang thaycai.net vào web của em với khung rộng 600px, cao 400px, sử dụng đoạn code dưới đây:

<iframe src = "https://www.thaycai.net/" width = "600" height = "400"></iframe>

• Dùng để thu thập dữ liệu người dùng (đăng ký, đăng nhập, khảo sát).
• Thẻ bao quanh: <form>.

• <label>: Nhãn dán (tên gọi của ô nhập liệu).
• <input>: Ô nhập liệu. Các kiểu type phổ biến:
  • type="text": Nhập văn bản ngắn (Tên).
  • type="password": Nhập mật khẩu (ẩn kí tự).
  • type="radio": Chọn một trong nhiều (Tròn). Lưu ý: Các ô radio cùng nhóm phải có cùng name.

• • type="checkbox": Chọn nhiều (Vuông).
  • type="submit": Nút gửi dữ liệu.
  • type="file": Chọn tệp để tải lên.
  • type="date": Chọn ngày tháng.
• <textarea>: Nhập văn bản nhiều dòng (Ghi chú).
• <select> và <option>: Tạo danh sách thả xuống (Combobox).

Xem ví dụ

Giải thích chi tiết từng phần:

1. <form>: Là cái vỏ bọc bên ngoài, chứa tất cả các ô nhập liệu.

2. <label>: Là cái nhãn để người dùng biết ô đó cần nhập gì (Ví dụ dòng chữ "Họ và tên:", "Mật khẩu:").

3. <input type="text">: Dùng cho Họ tên. Em gõ vào thấy chữ bình thường.

4. <input type="password">: Dùng cho Mật khẩu. Em gõ vào sẽ thấy các dấu chấm tròn hoặc sao ***** (ẩn ký tự).

5. <input type="radio">: Dùng cho Giới tính.
  - Đặc điểm: Hình tròn. Chỉ được chọn 1 (Nam hoặc Nữ).
  - Lưu ý quan trọng: Trong code để cả 2 ô đều có name="gioitinh". Nếu khác tên, người dùng sẽ chọn được cả 2 ô cùng lúc (sai logic).

6. <input type="checkbox">: Dùng cho Sở thích.
  - Đặc điểm: Hình vuông. Có thể tích chọn nhiều cái cùng lúc (Vừa thích đọc sách, vừa thích du lịch).

7. <input type="date">: Dùng cho Ngày sinh. Nó sẽ hiện ra một tờ lịch nhỏ để em chọn ngày.

8. <select> và <option>: Dùng cho Thành phố. Nó tạo ra một danh sách (Combobox), bấm vào sẽ xổ xuống các lựa chọn.

9. <input type="file">: Dùng để tải ảnh lên. Nó sẽ hiện nút "Choose File" (Chọn tệp).

10. <textarea>: Dùng cho Giới thiệu bản thân. Khác với ô text ngắn, ô này rộng hơn, cho phép xuống dòng để viết đoạn văn dài.

11. <input type="submit">: Là nút bấm "Đăng Ký Ngay". Khi bấm nút này, dữ liệu trong form sẽ được gửi đi.