Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó
Câu hỏi mở đầu trang 57
Đề bài: Em hãy nêu những điểm khác biệt khi em đọc thông tin trên các trang web với việc em đọc sách, báo giấy. Theo em, điểm khác biệt nào là quan trọng nhất?
Lời giải:
Một số điểm khác biệt:
- Nội dung: Trang web có thể chứa nhiều dạng dữ liệu như văn bản, hình ảnh, âm thanh, video; sách báo giấy chủ yếu là văn bản và hình ảnh tĩnh.
- Cách đọc: Trên trang web, người đọc có thể nhấp vào siêu liên kết để chuyển nhanh đến nội dung liên quan mà không cần đọc tuần tự; sách báo giấy phải đọc theo thứ tự từ đầu đến cuối.
- Cập nhật: Trang web có thể được cập nhật liên tục; sách báo giấy đã in thì không thể thay đổi.
Điểm khác biệt quan trọng nhất: khả năng truy cập nhanh đến nội dung khác qua siêu liên kết, giúp người đọc chủ động chọn nội dung muốn xem.
1. Siêu văn bản và đường dẫn
Hoạt động 1 trang 57
Đề bài: Các tệp có phần mở rộng .docx được tạo bởi Microsoft Word có thể là một siêu văn bản còn tệp có phần mở rộng .txt tạo bởi Notepad thì không. Theo em, siêu văn bản có những đặc điểm gì?
Lời giải:
Đặc điểm của siêu văn bản (hypertext):
- Nội dung không chỉ chứa văn bản mà còn có thể chứa nhiều dạng dữ liệu khác như âm thanh, hình ảnh, video…
- Đặc biệt có chứa các siêu liên kết (hyperlink) tới siêu văn bản khác.
- Khi xem, không cần đọc tuần tự từ đầu đến cuối, có thể truy cập nội dung tùy ý qua các liên kết.
Vì sao .docx là siêu văn bản còn .txt thì không?
- Tệp .docx có thể chèn hình ảnh, tạo liên kết, chèn video → có đặc điểm của siêu văn bản.
- Tệp .txt chỉ chứa văn bản thuần túy, không hỗ trợ liên kết hay đa phương tiện → không phải siêu văn bản.
Câu hỏi củng cố mục 1 trang 58
Đề bài: Trong các đường dẫn sau, đường dẫn nào là tuyệt đối, đường dẫn nào là tương đối?
- a)
html/cach_tao_lien_ket.html - b)
http://google.com - c)
mail.google.com/mail/u/0/#inbox/FMfcgzGMpKDHQFWcdfxcmMtxvZ
Lời giải:
- a) Đường dẫn tương đối. Chỉ có tên thư mục và tên tệp, không có giao thức (
http://hoặchttps://) và tên miền. - b) Đường dẫn tuyệt đối. Có đầy đủ giao thức
http://và tên miềngoogle.com. - c) Đường dẫn tương đối. Tuy có tên miền nhưng thiếu giao thức
http://hoặchttps://, nên theo định nghĩa trong sách chưa được coi là đường dẫn tuyệt đối.
2. Các cách tạo liên kết tới một trang web
Hoạt động 2 trang 58
Đề bài: Hãy kể tên các kiểu liên kết mà em đã gặp khi duyệt web hoặc khi đọc văn bản.
Lời giải:
Một số kiểu liên kết thường gặp:
- Liên kết tới một trang web khác trên Internet.
- Liên kết đến một vị trí khác trong cùng website (ví dụ: từ trang chủ đến trang bài tập).
- Liên kết đến một vị trí khác trong cùng trang web (ví dụ: từ mục lục đến chương tương ứng, từ cuối trang về đầu trang).
- Liên kết tới hình ảnh, video, âm thanh hoặc các tệp tài liệu khác.
Câu hỏi củng cố mục 2 trang 60
Đề bài: Viết một đoạn mã HTML để hiển thị một danh sách không có thứ tự trong tệp index.html. Danh sách gồm ba mục: bài tập 1, bài tập 2 và ôn tập. Ba mục này liên kết tới ba trang tương ứng với ba tệp bai_tap_1.html, bai_tap_2.html và bai_tap_on_tap.html.
Lời giải:
Giả sử ba tệp bai_tap_1.html, bai_tap_2.html, bai_tap_on_tap.html nằm cùng thư mục với index.html, ta dùng đường dẫn tương đối:
<ul>
<li><a href="bai_tap_1.html">Bài tập 1</a></li>
<li><a href="bai_tap_2.html">Bài tập 2</a></li>
<li><a href="bai_tap_on_tap.html">Ôn tập</a></li>
</ul>
Giải thích:
- Thẻ
<ul>tạo danh sách không có thứ tự. - Mỗi mục danh sách dùng thẻ
<li>. - Bên trong
<li>, thẻ<a>với thuộc tínhhreftạo liên kết đến trang tương ứng.
Luyện tập
Luyện tập trang 61
Đề bài:
1. Viết đoạn mã để tạo liên kết quay về trang chủ CLB.html trong trang thong_tin.html.
Lời giải:
Vì CLB.html và thong_tin.html nằm cùng thư mục, ta dùng đường dẫn tương đối:
<a href="CLB.html">Quay về trang chủ</a>
Khi nhấp vào dòng chữ “Quay về trang chủ” trong trang thong_tin.html, trình duyệt sẽ mở lại tệp CLB.html.
2. Viết một trang web giới thiệu bản thân, trong đó để ít nhất ba liên kết tới trang web (có thể là Facebook) của ba bạn cùng lớp.
Lời giải:
Vì liên kết đến các trang bên ngoài (Facebook), ta phải dùng đường dẫn tuyệt đối:
<!DOCTYPE html>
<html>
<head>
<title>Giới thiệu bản thân</title>
</head>
<body>
<h1>Xin chào, mình là Nguyễn Văn A</h1>
<p>Mình là học sinh lớp 12A trường THPT XYZ.
Sở thích của mình là đọc sách và chơi bóng đá.</p>
<h2>Các bạn thân của mình</h2>
<ul>
<li><a href="https://facebook.com/ban.a">Facebook bạn A</a></li>
<li><a href="https://facebook.com/ban.b">Facebook bạn B</a></li>
<li><a href="https://facebook.com/ban.c">Facebook bạn C</a></li>
</ul>
</body>
</html>
Vận dụng
Vận dụng trang 61
Đề bài: Viết thêm các đoạn giới thiệu (địa điểm, số thành viên, thành tích, phí hội viên, điện thoại liên hệ) cho từng câu lạc bộ ở dưới bảng “Lịch hoạt động các CLB Thể thao” rồi đặt liên kết từ tên câu lạc bộ trong bảng đến đoạn giới thiệu tương ứng.
Lời giải:
Ý tưởng:
- Bước 1: Thêm thuộc tính
idcho từng đoạn giới thiệu ở dưới bảng. - Bước 2: Đặt liên kết
href="#id"cho tên câu lạc bộ trong bảng.
Đoạn mã tham khảo:
<!-- Bảng Lịch hoạt động các CLB Thể thao -->
<table id="CLBTT" border="1">
<caption>Lịch hoạt động các CLB Thể thao</caption>
<tr>
<th>Câu lạc bộ</th>
<th>Lịch hoạt động</th>
</tr>
<tr>
<td><a href="#boi_loi">Bơi lội</a></td>
<td>Thứ 3, 5, 7</td>
</tr>
<tr>
<td><a href="#bong_da">Bóng đá</a></td>
<td>Thứ 2, 4, 6</td>
</tr>
<tr>
<td><a href="#vo_thuat">Võ thuật</a></td>
<td>Thứ 7, Chủ nhật</td>
</tr>
</table>
<!-- Các đoạn giới thiệu -->
<h3 id="boi_loi">CLB Bơi lội</h3>
<p>
Địa điểm: Bể bơi nhà trường. <br>
Số thành viên: 30. <br>
Thành tích: 03 HCV cấp thành phố. <br>
Phí hội viên: 200.000đ/tháng. <br>
Điện thoại liên hệ: 0912 345 678.
</p>
<h3 id="bong_da">CLB Bóng đá</h3>
<p>
Địa điểm: Sân trường. <br>
Số thành viên: 25. <br>
Thành tích: 01 giải ba cấp thành phố. <br>
Phí hội viên: 150.000đ/tháng. <br>
Điện thoại liên hệ: 0912 345 679.
</p>
<h3 id="vo_thuat">CLB Võ thuật</h3>
<p>
Địa điểm: Nhà đa năng. <br>
Số thành viên: 20. <br>
Thành tích: 02 HCV, 06 HCB, 05 HCĐ cấp thành phố. <br>
Phí hội viên: 180.000đ/tháng. <br>
Điện thoại liên hệ: 0912 345 680.
</p>
Giải thích:
- Mỗi đoạn giới thiệu có một thuộc tính
idduy nhất (boi_loi,bong_da,vo_thuat). - Trong bảng, mỗi tên CLB là một liên kết với
href="#id"để chuyển đến đoạn tương ứng. - Khi nhấp vào tên CLB, trang web tự động cuộn xuống đúng đoạn giới thiệu.
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