Bài 5. Liên kết trang và thanh điều hướng (menu)
Trang chủ đã đẹp, nhưng một website thật sự phải gồm nhiều trang nối với nhau. Bài này em học cách dùng thẻ a để đi từ trang này sang trang kia và dựng một thanh điều hướng (menu) để người xem chuyển trang chỉ bằng một cú nhấn.
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài E2. Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướngtr. 57
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề E(ICT) · Bài 3. Tạo thanh điều hướng cho trang webtr. 134
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 26. Liên kết và thanh điều hướngtr. 144
Bắt đầu bằng một hình dung
Lớp em làm một trang web giới thiệu câu lạc bộ Guitar. Đến giờ dự án đã có bốn tệp riêng: trang chủ, trang giới thiệu thành viên, trang lịch sinh hoạt và trang liên hệ. Mỗi trang mở ra đều gọn gàng, đúng ý.
Nhưng khi bạn Minh thử xem, bạn kêu lên: mở trang chủ xong thì mắc kẹt, không có nút nào để sang trang thành viên, muốn xem trang khác phải nhờ em mở tệp giúp. Bốn trang đẹp mà rời rạc như bốn tờ giấy nằm riêng, người xem chẳng biết đường đi.
Điều còn thiếu là những đường nối giữa các trang, và một dải các nút đặt trên đầu mọi trang để bấm vào là nhảy sang trang tương ứng. Dải nút đó gọi là thanh điều hướng, còn đường nối chính là các liên kết. Bài này ta sẽ dựng chúng.
Nội dung bài học
- 1) Thẻ liên kết a và thuộc tính href
- 2) Liên kết tương đối giữa các tệp trong dự án
- 3) Thanh điều hướng (menu) là gì
- 4) Đặt menu giống nhau trên mọi trang
- 5) Đánh dấu mục đang mở
Tóm tắt lý thuyết cần nhớ
- Thẻ
avới thuộc tínhhreftạo liên kết: chữ giữa hai thẻ là phần bấm,hrefghi tên tệp trang đích. - Trang trong cùng dự án dùng liên kết tương đối (chỉ ghi tên tệp), giúp website vẫn chạy khi chép hoặc tải lên mạng.
- Thanh điều hướng (menu) là nhóm thẻ
abọc trongnav, phải giống nhau và đặt cùng chỗ trên mọi trang. - Nên đánh dấu mục đang mở (ví dụ bằng class riêng rồi tô CSS) để người xem biết mình đang ở trang nào.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| href | hờ-rép | địa chỉ liên kết Là chỗ ghi địa chỉ trang web mà liên kết sẽ dẫn tới khi bấm vào. |
| URL | u-a-lờ | địa chỉ trang web Dòng chữ em gõ vào trình duyệt để đến đúng một trang web - giống địa chỉ nhà, mỗi trang chỉ có một, không trùng ai. |
| a (anchor) | ây, đọc đủ là ANG-cơ | thẻ liên kết Thẻ tạo liên kết: chữ nằm giữa hai thẻ là phần bấm được, còn href ghi tên trang đích. |
| nav (navigation) | náp, đọc đủ là na-vi-GÂY-sần | thanh điều hướng Thẻ bọc nhóm liên kết chuyển trang, tức cái menu của website. |
| relative link | RE-lơ-típ linh | liên kết tương đối Liên kết chỉ ghi tên tệp trong cùng dự án chứ không ghi địa chỉ đầy đủ. |
| class | clát | tên nhóm để gắn CSS Thuộc tính đặt tên cho một hay nhiều thẻ để CSS tô riêng nhóm đó. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 23 câu, chấm điểm tự động và giải thích từng câu sai.
- Thẻ
a - Thẻ
img - Thẻ
nav - Thẻ
head
a (anchor) tạo liên kết, với địa chỉ đích ghi trong thuộc tính href. Thẻ img chèn ảnh, thẻ nav chỉ để bọc khu điều hướng chứ tự nó không tạo liên kết, còn head là phần khai báo thông tin của trang.<a href="lienhe.html">Liên hệ</a>, phần nào là địa chỉ trang mà trình duyệt sẽ mở khi người xem nhấn vào?- Chữ Liên hệ hiển thị giữa hai thẻ
- Giá trị
lienhe.htmltrong href - Tên thẻ
amở đầu liên kết - Dấu ngoặc nhọn bao quanh thẻ
href, ở đây là lienhe.html. Chữ Liên hệ chỉ là phần hiển thị để người xem bấm; tên thẻ và dấu ngoặc là cú pháp HTML, không phải địa chỉ trang.- Vì liên kết tương đối làm trang tải nhanh hơn nhiều lần do địa chỉ ngắn, trình duyệt đọc nhanh hơn
- Vì trình duyệt chỉ hiểu được tên tệp ngắn, gặp địa chỉ đầy đủ thì sẽ báo lỗi không mở được
- Vì khi chép hay tải cả thư mục lên mạng, các liên kết vẫn chạy đúng do các tệp vẫn nằm cạnh nhau
- Vì liên kết tương đối tự động tạo ra thanh điều hướng cho mọi trang trong cùng thư mục
- a)Phần chữ nằm giữa cặp thẻ
<a>và</a>là phần người xem nhìn thấy và bấm vào.Đúng - b)Thuộc tính
hrefghi địa chỉ trang mà liên kết sẽ mở.Đúng - c)Một liên kết bắt buộc chữ hiển thị phải trùng đúng tên tệp đích.Sai
- d)Thẻ
achỉ có thể liên kết tới trang, không thể liên kết tới tệp ảnh.Sai
- (a) Đúng - đó là phần hiển thị của liên kết.
- (b) Đúng - href chứa địa chỉ đích.
- (c) Sai - chữ hiển thị đặt tuỳ ý, chỉ href mới phải trỏ đúng tên tệp.
- (d) Sai - href có thể trỏ tới nhiều loại tệp, không riêng gì trang.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 23 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.