Trước tiên mình lưu ý nhỏ: số trang in trên ảnh là 66 và 67 (không phải 68–69), nên mình ghi đúng theo ảnh nhé.

Tóm tắt lý thuyết

Trang 66 nằm cuối Bài 11 (chèn tài nguyên đa phương tiện), trang 67 mở đầu Bài 12 (Tạo biểu mẫu).

Nội dung chính:

• Chèn tệp âm thanh/video: chuẩn bị tệp (mp4 cho video, mp3 cho audio), chèn bằng thẻ phù hợp và có thể để chế độ autoplay. Lưu ý chỉ dùng tài nguyên không vướng bản quyền.
• Khung nội tuyến iframe: dùng để hiển thị nội dung của một trang web khác ngay bên trong trang hiện tại.
• Tạo iframe có id để làm đích liên kết:

```html

```

• Đặt liên kết bằng thẻ với thuộc tính target trỏ tới id của iframe:

```html
Câu lạc bộ Thể thao
Câu lạc bộ Nghệ thuật
```

• Thứ tự hiển thị trên trang phụ thuộc thứ tự viết mã. Muốn liên kết hiện phía trên thì viết Bước 3 trước Bước 2.
• Biểu mẫu web (form): công cụ thu thập dữ liệu người dùng, gồm hai thành phần:
• Biểu mẫu hiển thị trên web (mã HTML).
• Ứng dụng/script xử lí dữ liệu (thường ở máy chủ, không thuộc HTML).
• Cấu trúc form:

```html

các phần tử của biểu mẫu

```

• Các phần tử thường dùng: input, label, select, textarea; ngoài ra có fieldset, legend, datalist.
• label định nghĩa nhãn, dùng thuộc tính for để liên kết với input.
• input xác định vùng nhập dữ liệu, là thẻ đơn (không cần thẻ đóng).

---

Bài 1: Tính kích thước ảnh hiển thị

Đề bài:

Cho ảnh có kích thước gốc là 720 × 450 pixel. Chèn ảnh vào trang web bằng câu lệnh: ``html `` Hỏi ảnh trong trang web có kích thước bao nhiêu?

Lời giải:

Khi chỉ khai báo width mà không khai báo height, trình duyệt sẽ tự động co giãn chiều cao theo đúng tỉ lệ gốc của ảnh để hình không bị méo.

Bước 1. Tính tỉ lệ co giãn:

$$k = \frac{600}{720} = \frac{5}{6} \approx 0{,}833$$

Bước 2. Tính chiều cao mới theo tỉ lệ đó:

$$height = 450 \times \frac{5}{6} = 375 \text{ pixel}$$

Đáp án: Ảnh hiển thị có kích thước 600 × 375 pixel.

Giải thích lý do: Vì HTML giữ nguyên tỉ lệ khung hình khi ta chỉ đặt một chiều, nên chiều cao được suy ra từ chiều rộng. Nếu khai báo cả width="600" và height="375" thì kết quả vẫn vậy; nhưng nếu đặt sai tỉ lệ thì ảnh sẽ bị biến dạng.

---

Bài 2: Chèn ảnh vào trang giới thiệu bản thân

Đề bài:

Chèn thêm một số ảnh của mình vào trang web giới thiệu bản thân (em đã tạo ở phần Luyện tập, Bài 10).

Hướng dẫn thực hiện:

Đây là bài thực hành nên không có một đáp án cố định. Em mở lại tệp HTML giới thiệu bản thân và thêm các thẻ vào vị trí mong muốn. Ví dụ:

Giới thiệu bản thân

Đây là ảnh chân dung của tôi:


Một vài ảnh hoạt động yêu thích:

Một số lưu ý để làm tốt:

• Đặt ảnh trong thư mục con (ví dụ images/) để dễ quản lý.
• Luôn ghi thuộc tính alt mô tả ảnh (hỗ trợ người khiếm thị và hiển thị khi ảnh lỗi).
• Dùng width hợp lý để ảnh không quá to, giữ tỉ lệ tự nhiên.
• Chỉ dùng ảnh của chính mình hoặc ảnh không vướng bản quyền.

---

Vận dụng: Chèn khung nội tuyến liên kết bài hát

Đề bài:

Tạo một khung nội tuyến và liên kết đến bài hát em yêu thích (ví dụ trên YouTube) vào trang web giới thiệu bản thân.

Hướng dẫn thực hiện:

Em có hai cách phổ biến để nhúng video/bài hát YouTube bằng iframe.

Cách 1 – Dùng đường nhúng (embed) của YouTube (khuyến nghị):

Trên YouTube, vào video → Chia sẻ (Share) → Nhúng (Embed) sẽ thấy đường dạng https://www.youtube.com/embed/MÃ_VIDEO. Dán vào src:

Bài hát tôi yêu thích

Cách 2 – Theo đúng kiểu bài học (iframe + liên kết bằng thẻ ):

Âm nhạc

[Nghe bài hát yêu thích]

Khi nháy vào liên kết, bài hát sẽ hiện ngay trong khung iframe có id="iframe".

Lưu ý: nhớ thay MÃ_VIDEO bằng mã thật của video (phần đứng sau watch?v= trong đường dẫn YouTube).

---

Phần lý thuyết Bài 12 (trang 67) – ghi nhớ nhanh

Hai cấu trúc quan trọng cần thuộc:

Một lưu ý nhỏ trong sách: cú pháp label viết là Tên_nhãn, nhưng đúng chuẩn thẻ đóng phải là (có dấu /). Em nên viết đầy đủ thẻ đóng khi thực hành.

Đây là phần mở đầu lý thuyết Bài 12 nên chưa có bài tập kèm theo, mình tóm tắt để em nắm trước khi sang các phần thực hành tiếp theo nhé.