Giải Tin học 12 - Định hướng khoa học máy tính trang 62
Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 62–63
Tóm tắt lý thuyết
Hai trang này thuộc Bài 10 – chủ đề tạo liên kết (link) trong HTML. Các ý chính:
Liên kết tới trang khác bằng đường dẫn tương đối
../nghĩa là lùi ra thư mục mẹ. Ví dụ từbai_tap/bai_tap_1.htmlquay vềweb/index.html:
Quay lại trang chủLiên kết tới vị trí khác trong cùng trang web (2 bước)
- Bước 1: gắn thuộc tính
idcho phần tử đích (gọi là mã định danh đoạn, phải duy nhất). - Bước 2: tạo liên kết bằng
href="#mã_định_danh_đoạn".
…
Thông tin chi tiếtTạo liên kết cho hình ảnh
Ghi nhớ: từ một vị trí trong trang web, ta có thể liên kết tới bất kì trang nào trên Internet, tới các trang cùng máy chủ, hoặc tới vị trí khác trong cùng trang.
Bài 1: Hoạt động – Tạo danh sách liên kết trong index.html
Đề 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 là các tệp bai_tap_1.html, bai_tap_2.html và bai_tap_on_tap.html.
Phân tích:
- "Danh sách không có thứ tự" → dùng thẻ
. - Mỗi mục cần một liên kết → đặt thẻ
bên trong từng.
Lời giải:
Giải thích: dùng đường dẫn tương đối vì các tệp nằm cùng thư mục với index.html. Thẻ chứa một liên kết bấm vào sẽ chuyển sang trang tương ứng.
Bài 2: Nhiệm vụ 1 – Tạo liên kết trong cùng trang
Yêu cầu: Tạo liên kết trong cùng trang web tới bảng thời gian hoạt động. Thêm phần giới thiệu lên đầu trang và đặt liên kết từ dòng "Theo dõi lịch hoạt động các CLB Thể thao" tới bảng "Lịch hoạt động các CLB Thể thao" bên dưới.
Lời giải theo hướng dẫn của sách (3 bước):
Bước 1 – Mở tệp CLB.html, thêm phần giới thiệu như Hình 10.2:
Giới thiệu các hoạt động ngoại khoá
Trường THPT Nguyễn Bỉnh Khiêm có bề dày thành tích về học tập và
các hoạt động thể thao, văn nghệ của thành phố...
- 03 HCV cấp thành phố môn Bơi lội
- 02 HCV, 06 HCB và 05 HCĐ cấp thành phố các môn Võ thuật
- 01 giải ba môn Bóng đá nam cấp thành phố
- 01 giải nhì, 02 giải ba Hội thi biểu diễn âm nhạc quận
Bước 2 – Thêm mã định danh id cho bảng đã tạo ở bài trước:
Lịch hoạt động các CLB Thể thao
Bước 3 – Tạo liên kết cho dòng "Theo dõi lịch hoạt động các CLB Thể thao":
Theo dõi lịch hoạt động các CLB Thể thao
Giải thích: id="CLBTT" đóng vai trò "cắm cờ" tại bảng. Khi bấm vào liên kết href="#CLBTT", trình duyệt cuộn trang đến đúng vị trí bảng có id đó. Dấu # báo cho trình duyệt biết đây là liên kết nội bộ trong cùng trang.
Bài 3: Nhiệm vụ 2 – Tạo liên kết sang trang khác
Yêu cầu: Bổ sung vào tệp thong_tin.html những thông tin về các câu lạc bộ và đặt đường liên kết từ trang chủ đến trang thông tin này.
Lời giải:
Bước 1 – Trong cùng thư mục với CLB.html, tạo tệp thong_tin.html và thêm nội dung giới thiệu:
Thông tin các CLB
Thông tin của các câu lạc bộ
CLB Bơi lội: sinh hoạt thứ 3 và thứ 5 hằng tuần...
CLB Võ thuật: sinh hoạt thứ 2, thứ 4, thứ 6...
CLB Bóng đá: sinh hoạt chiều thứ 7...
Bước 2 – Trong tệp CLB.html, tạo liên kết bằng đường dẫn tương đối tới tệp này:
Thông tin của các CLB
Giải thích: vì hai tệp cùng thư mục nên chỉ cần ghi tên tệp thong_tin.html (đường dẫn tương đối), không cần đường dẫn đầy đủ.
Bài 4: Luyện tập
Câu 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:
Quay về trang chủ
Giải thích: đây là liên kết ngược lại của Bài 3. Hai tệp cùng thư mục nên dùng tên tệp trực tiếp.
Câu 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 (mẫu):
Giới thiệu bản thân
Xin chào, mình là Nguyễn Văn A
Mình học lớp 12A1, yêu thích lập trình và bóng đá.
Kết nối với bạn bè của mình
Giải thích: liên kết tới trang ngoài Internet phải ghi đường dẫn tuyệt đối (bắt đầu bằng https://). Thuộc tính target="_blank" để mở liên kết trong tab mới, tiện cho người xem.
Bài 5: Vận dụng
Đề 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 (kết hợp cả hai kĩ thuật id + href="#id"):
Lịch hoạt động các CLB Thể thao
Tên CLB Lịch sinh hoạt
CLB Bơi lội
Thứ 3, Thứ 5
CLB Võ thuật
Thứ 2, Thứ 4, Thứ 6
CLB Bóng đá
Chiều Thứ 7
CLB Bơi lội
Địa điểm: Bể bơi nhà trường. Số thành viên: 30.
Thành tích: 03 HCV cấp thành phố. Phí hội viên: 50.000đ/tháng.
Điện thoại: 0901 234 567.
CLB Võ thuật
Địa điểm: Nhà đa năng. Số thành viên: 25.
Thành tích: 02 HCV, 06 HCB. Phí hội viên: 60.000đ/tháng.
Điện thoại: 0902 345 678.
CLB Bóng đá
Địa điểm: Sân trường. Số thành viên: 22.
Thành tích: giải ba cấp thành phố. Phí hội viên: 40.000đ/tháng.
Điện thoại: 0903 456 789.
Giải thích: mỗi đoạn giới thiệu được gắn một id riêng (boiloi, vothuat, bongda). Trong bảng, tên CLB được bọc trong thẻ
Em đã có đầy đủ lời giải cho cả phần Hoạt động, Thực hành, Luyện tập và Vận dụng. Nếu em muốn cô viết hoàn chỉnh toàn bộ tệp CLB.html thành một file chạy được, cứ nói nhé.
Chế độ đọc sách →