I. Lý thuyết trọng tâm

1. Chèn tệp ảnh vào trang web

Hình ảnh giúp cho các trang web trở nên sinh động và hấp dẫn hơn. Có thể chèn hình ảnh trực tiếp trong nội dung của trang hoặc dưới dạng hình nền. Trong bài này, chúng ta sẽ tìm hiểu cách chèn ảnh vào nội dung trang web bằng thẻ <img>.

1.1. Các định dạng tệp ảnh được hỗ trợ

Để có thể hiển thị trên web, các tệp ảnh cần được định dạng là một trong những loại được trình duyệt hỗ trợ:

1.2. Thẻ <img> – chèn ảnh vào trang web

Thẻ <img> là thẻ đơn (không có thẻ đóng), dùng để thêm ảnh vào trang web. Khi gặp thẻ <img>, trình duyệt hiểu là “cần đặt một hình ảnh vào đây”.

Đặc điểm quan trọng: Hình ảnh có thể được chèn ngay trong dòng văn bản mà không tạo ra ngắt dòng.

Cú pháp cơ bản:

<img src="đường dẫn tới tệp ảnh" alt="đoạn văn bản thay thế">

Ví dụ:

<p>Tôi muốn uống một cốc <img src="images/coffee.png"> ngay bây giờ.</p>

Lưu ý về dung lượng: Với thẻ <img>, trình duyệt sẽ phải tải ảnh lên trước khi hiển thị. Do vậy, khi chèn hình ảnh vào trang web, cần quan tâm tới dung lượng của tệp hình ảnh vì dung lượng lớn sẽ khiến việc hiển thị gặp khó khăn nếu tốc độ mạng chậm.

1.3. Các thuộc tính của thẻ <img>

a) Thuộc tính src (bắt buộc):

Thuộc tính src chỉ định đường dẫn tới tệp ảnh. Có thể sử dụng đường dẫn tuyệt đối hoặc tương đối.

Lưu ý: Nên dùng đường dẫn tương đối để tránh trường hợp xảy ra lỗi khi ảnh trên mạng bị thay đổi.

b) Thuộc tính alt (nên sử dụng):

Thuộc tính alt cung cấp văn bản thay thế khi việc hiển thị ảnh bị lỗi. Văn bản thay thế cần có tác dụng giúp người đọc hình dung ra nội dung bức ảnh.

Ví dụ: Tạo liên kết từ ảnh pdffiles.png tới tệp biểu mẫu:

<p>Tải biểu mẫu xin nhập học:
    <a href="tai_lieu/bieu_mau.pdf">
        <img src="images/pdffiles.png" alt="Biểu mẫu xin nhập học">
    </a>
</p>

• Khi có tệp ảnh: Hiển thị hình ảnh PDF
• Khi không có tệp ảnh: Hiển thị văn bản “Biểu mẫu xin nhập học”

c) Thuộc tính width và height:

Hai thuộc tính này cho biết kích thước hiển thị ảnh bằng pixel. Khi sử dụng, trình duyệt sẽ giữ đúng không gian trong bố cục khi hình ảnh đang tải, giúp hiển thị trang nhanh hơn.

Quy tắc quan trọng: Nếu chỉ sử dụng một trong hai thuộc tính (width hoặc height), chiều còn lại sẽ được tính toán tự động để hiển thị theo tỉ lệ của ảnh gốc.

Ví dụ: Ảnh trái tim heart.png có kích thước gốc 262 x 257 pixel:

<!-- Không thiết lập kích thước: hiển thị kích thước gốc 262x257 -->
<img src="images/heart.png" alt="Trái tim">

<!-- Chỉ thiết lập width=131: height tự động = 257 × (131/262) = 128 -->
<img src="images/heart.png" alt="Trái tim" width="131">

<!-- Thiết lập cả hai: hiển thị đúng 200x120 (có thể bị méo) -->
<img src="images/heart.png" alt="Trái tim" width="200" height="120">

2. Chèn âm thanh và video vào trang web

Để chèn video và âm thanh vào trang web, ta sử dụng thẻ <video> và <audio>. Hai thẻ này được hỗ trợ trong hầu hết các trình duyệt, tuy nhiên định dạng của các tệp tin đa phương tiện có thể sử dụng vẫn phụ thuộc vào trình duyệt.

2.1. Các định dạng tệp được hỗ trợ

2.2. Cú pháp thẻ <video> và <audio>

Cú pháp chung:

<video thuộc_tính="giá_trị">Nội dung thay thế</video>
<audio thuộc_tính="giá_trị">Nội dung thay thế</audio>

Ví dụ cơ bản:

<video src="videos/gioi_thieu.mp4" width="320" height="240" controls>
    Trình duyệt của bạn không hỗ trợ video HTML5
</video>

<audio src="audios/nhac_nen.mp3" controls>
    Trình duyệt của bạn không hỗ trợ audio HTML5
</audio>

2.3. Các thuộc tính của thẻ <video> và <audio>

Giải thích thuộc tính boolean: Thuộc tính boolean không cần có giá trị, chỉ cần khai báo tên thuộc tính là đủ.

a) Thuộc tính controls:

Thuộc tính này giúp trình duyệt hiển thị các thành phần điều khiển như nút phát/tạm dừng, thanh tiến trình, điều khiển âm lượng… Thuộc tính này nên được sử dụng để người dùng có thể điều khiển trong quá trình phát tệp tin đa phương tiện.

<video src="video.mp4" controls></video>

b) Thuộc tính autoplay:

Cho phép trình duyệt chạy video/audio ngay khi hiển thị trang.

Lưu ý quan trọng: Một số trình duyệt như Google Chrome thường không cho video chạy ngay khi hiển thị, hoặc chỉ cho phép chạy ngay nếu có thêm thuộc tính muted (không phát tiếng).

<!-- Có thể không hoạt động trên một số trình duyệt -->
<video src="video.mp4" autoplay></video>

<!-- Hoạt động được vì có muted -->
<video src="video.mp4" autoplay muted></video>

c) Thuộc tính poster (chỉ cho video):

Cung cấp đường dẫn đến tệp ảnh, dùng để hiển thị khi chưa chạy video (ảnh đại diện).

<video src="video.mp4" poster="images/thumbnail.jpg" controls></video>

Lưu ý: Thẻ <audio> không có các thuộc tính width, height và poster.

2.4. Sử dụng thẻ <source> cho nhiều định dạng

Trong trường hợp có nhiều video hoặc nhiều tệp âm thanh tương ứng với các định dạng khác nhau, ta có thể sử dụng thẻ <source> bên trong cặp thẻ <video> hay <audio> để chỉ định các loại định dạng khác nhau. Trình duyệt sẽ tự động tìm và hiển thị tệp tin với định dạng mà nó hỗ trợ.

Ví dụ:

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    Trình duyệt của bạn không hỗ trợ HTML video
</video>

Giải thích:

• Trình duyệt sẽ thử tải movie.mp4 trước
• Nếu không hỗ trợ mp4, sẽ thử movie.webm
• Nếu vẫn không hỗ trợ, sẽ thử movie.ogg
• Nếu không hỗ trợ bất kỳ định dạng nào, hiển thị dòng chữ thay thế

3. Tạo khung nội tuyến trong trang web

3.1. Khái niệm khung nội tuyến

Khung nội tuyến là một khung nhìn chứa tài nguyên web khác trong trang web hiện tại. Để tạo khung nội tuyến, ta sử dụng thẻ <iframe> (viết tắt của inline frame – khung nội tuyến).

Ứng dụng phổ biến của iframe:

• Chèn video từ YouTube vào trang web
• Chèn bản đồ từ Google Maps
• Hiển thị nội dung quảng cáo
• Nhúng nội dung từ các trang web khác

Đặc điểm: Khi thực hiện các thao tác bên trong khung iframe, giao diện của cả trang bên ngoài không bị ảnh hưởng.

3.2. Cú pháp thẻ <iframe>

<iframe src="đường_dẫn" width="chiều_rộng" height="chiều_cao"></iframe>

Ví dụ: Tạo trang web iframe.html và chèn vào một khung nội tuyến có kích thước 600 x 400 pixel, hiển thị nội dung của trang CLB.html:

<iframe src="CLB.html" width="600" height="400"></iframe>

3.3. Các thuộc tính của thẻ <iframe>

3.4. Kết hợp iframe với thẻ <a> để điều khiển nội dung

Các phần tử iframe thường dùng kết hợp với thẻ <a> để tạo liên kết và hiển thị nội dung. Cách thực hiện là thêm thuộc tính target cho thẻ <a> để chỉ định nơi mở tài liệu được liên kết.

Cách thực hiện:

Bước 1: Tạo iframe với thuộc tính id (mã định danh)

<iframe id="khung_hien_thi" width="60%" height="500"></iframe>

Bước 2: Tạo các liên kết với thuộc tính target trỏ đến id của iframe

<a href="trang1.html" target="khung_hien_thi">Xem trang 1</a>
<a href="trang2.html" target="khung_hien_thi">Xem trang 2</a>

Ví dụ hoàn chỉnh:

<!DOCTYPE html>
<html>
<head>
    <title>Trang sử dụng iframe</title>
</head>
<body>
    <h2>Câu lạc bộ ngoại khóa Trường Nguyễn Bỉnh Khiêm</h2>
    
    <!-- Các liên kết điều khiển nội dung iframe -->
    [<a href="the_thao.html" target="iframe">Câu lạc bộ Thể thao</a>]
    [<a href="nghe_thuat.html" target="iframe">Câu lạc bộ Nghệ thuật</a>]
    
    <!-- Khung iframe hiển thị nội dung -->
    <iframe id="iframe" width="60%" height="700"></iframe>
</body>
</html>

Lưu ý: Thứ tự hiển thị là thứ tự các đoạn mã lệnh. Để các lựa chọn hiển thị phía trên khung iframe, cần viết các thẻ <a> trước thẻ <iframe>.

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa