Trang chủ
Liên kết Các phần của một Trang
Bạn đã biết làm thế nào để liên kết tới những trang web khác là những trang do bạn tạo ra hay là những trang có trên Internet. Nếu bạn muốn kết nối tới một phần dược chỉ định bên trong một tài liệu thì sao? BẠN CÓ THỂ LÀM ĐƯỢC ĐIỀU NÀY!
Mục đích
Sau bài này bạn có thể:- Tạo một dấu hiệu tham khảo ẩn cho một phần riêng biệt bên trong một tập tin HTML.
- Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML.
- Xây dựng một liên kết siêu văn bản để nối đến một phần riêng biệt bên trong tập tin HTML khác.
- Tạo một bảng mục lục siêu văn bản cho một trang web.
Bài học
Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ.Anchor được đặt tên
Một anchor được đặt tên (named anchor) là một dấu hiệu tham khảo ẩn cho một phần đặc biệt nào đó của tập tin HTML của bạn. Nó được sử dụng để tạo liên kết tới một phần khác của cùng trang khi trang đó dài, hoặc để đánh dấu mục của một trang khác. Lấy ví dụ, trong trang bạn đang xem, tôi có thể tạo ra một dấu ẩn gọi là "check" để đánh dấu tiêu đề "Kiểm tra lại công việc của bạn" bên dưới. Sau đó, tôi viết một liên kết anchor để kết nối tới mục này trong tài liệu này. Một khi bạn click trên một liên kết đến anchor được đặt tên này, web browser của bạn sẽ chuyển đến chỗ để dòng này nằm trên đỉnh của màn hình. Sau đây là một ví dụ để bạn có thể thử ngay bây giờ. Đi đến Kiểm tra lại công việc của bạn. Khi đến đó, bạn sẽ thấy một liên kết để trở lại mục này.Dạng HTML cho việc tạo anchor được đặt tên là:
<a name="NAME">Text to Link To</a>
hay với liên kết bạn vừa thử ở trên:
<a name="check">Kiem tra lai cong viec cua ban</a>
Chú ý sự khác biệt với liên kết anchor <a href=... chúng ta đã xét trong
bài 8a.
Viết một liên kết tới một Anchor được đặt tên
Khi bạn muốn tạo một liên kết siêu văn bản (hay một "liên kết anchor", xem bài 8a) tới một anchor được đặt tên, sử dụng dạng HTML sau: <a href="#xxxxx">Text to act as hypertext</a>
hay liên kết bạn vừa thử để đến phần dưới của tài liệu này:
Di den <a href="#check">Kiem tra lai cong viec cua ban</a>
Kí hiệu "#" chỉ cho web browser của bạn tìm trong tài liệu HTML một
anchor được đặt tên là "xxxxxx" hay trong ví dụ của chúng ta là
"check". Khi bạn chọn hay click trên siêu văn bản, nó mang phần
của tài liệu có chứa anchor được đặt tên lên đỉnh của màn hình.
Thêm Anchor được đặt tên vào bài Volcano Web
Bây giờ chúng ta sẽ xây dựng một bảng mục lục cho bài của chúng ta để nó sẽ xuất hiện ở đầu trang Volcano web. Các phần tử trong bảng mục lục sẽ là các tiêu đề mà chúng ta đã tạo ra và sẽ hoạt động như một liên kết siêu văn bản đến một phần riêng biệt trong bài chúng ta. Bước đầu tiên là tạo một anchor được đặt tên cho mỗi mục tiêu đề trong bài Volcano Web:- Mở tập tin index.htm trong trình soạn thảo văn bản
- Tìm tiêu đề Introduction. Chuyển đổi nó từ:
<h2>Introduction</h2>thành:<h2><a name="intro">Introduction</a></h2>Chú ý: Bạn vừa đánh dấu dòng chứa mục tiêu đề "Introduction" với một dấu tham khảo ẩn có anchor được đặt tên là "intro"
- Theo cách tương tự, thay đổi tất cả các tags <h2> cho các phần khác:
<h2><A NAME="term">Volcano Terminology</A></h2> <h2><A NAME="usa">Volcanic Places in the USA</A></h2> <h2><A NAME="mars">Volcanic Places on Mars</A></h2> <h2><A NAME="project">Research Project</A></h2> - Nếu bạn Reload liền trong web browser của bạn, bạn sẽ không nhìn thấy bất kỳ sự thay đổi nào; các tag anchor được đặt tên thêm vào đều được dấu khi người sử dụng xem trang.
Thêm liên kết tới một Anchor Được đặt tên trong Cùng một Tài liệu
Bây giờ chúng ta sẽ xây dựng một bảng mục lục sẽ xuất hiện trên đầu màn hình. Chúng ta sử dụng một danh sách không có thứ tự (xem lại bài 6 về danh sách) để tạo nó:- Nếu chưa mở, hãy mở tập tin index.htm trong trình soạn thảo.
- Bên dưới câu đầu tiên trong tiêu đề Volcano Web thêm những dòng sau:
<hr> <B>In this Lesson...</B> <ul><i> <li>Introduction <li>Volcano Terminology <li>Volcanic Places in the USA <li>Volcanic Places on Mars <li>Research Project</i> </ul>Chú ý: Bảng mục lục này được đánh dấu trên và dưới bằng tag <hr>. Kiểu chữ Nghiêng được dùng cho các mục. Ở đây chúng ta chỉ mới đánh vào tên các mục. Sau này chúng ta sẽ thêm vào để các liên kết hoạt động được.
- Lưu và Reload trong web browser của bạn.
- Mở tập tin index.htm trong trình soạn thảo
- Đến mục đầu tiên trong phần mục lục. Thay đổi nó từ:
<li>Introductionthành:<li><A HREF="#intro">Introduction</A> - Bây giờ bạn nên điền các liên kết khác để đoạn văn này trông giống như sau:
<hr> <B>In this Lesson...</B> <ul><i> <li><A HREF="#intro">Introduction</A> <li><A HREF="#term">Volcano Terminology</A> <li><A HREF="#usa">Volcanic Places in the USA</A> <li><A HREF="#mars">Volcanic Places on Mars</A> <li><A HREF="#project">Research Project</A></i> </ul> - Lưu và Reload vào trong web browser của bạn. Khi bạn click trên một mục của bản mục lục, phần tương ứng sẽ hiện ra trên đỉnh của màn hình.
Thêm Liên kết tới Anchor Được đặt tên trong Tài liệu Khác
Bạn có thể tạo một liên kết nhảy đến một phần được đánh dấu bởi một anchor được đặt tên của một tài liệu HTML khác. HTML xây dựng một liên kết tới một anchor được đặt tên trong một tài liệu HTML cục bộ khác có dạng: <a href="file.htm#NAME">Text to activate link</a>
và nếu là tài liệu trên web site khác thì có dạng:
<a href="http://www.cheese.org/pub/recipe.htm#colby">
Colby Cheese</a>
Trong bài 8a chúng ta đã tạo ra một liên kết siêu văn bản từ Mount St. Helens đến msh.htm là một tập tin riêng biệt. Bây giờ, chúng ta sẽ thêm một liên kết trong tài liệu thứ hai để trở lại phần nguyên thủy trong trang Volcano chính.
- Mở tập tin msh.htm trong trình soạn thảo
- Gần cuối trang HTML (nhưng phải trên </body>) thêm như sau:
<hr> <a href="index.htm#usa">Return to <i>Volcano Web</i></a>Chú ý: Chúng ta có sử dụng kiểu chữ Nghiêng với tag <i>...</i> bên trong văn bản được đánh dấu bởi anchor được đặt tên là "usa".
Lưu và Reload vào web browser của bạn. Khi click vào một vị trí của siêu văn bản ở cuối trang msh.htm, bạn sẽ phải thấy qua trở lại mục "Volcanic Plases in the USA" của bài Volcano Web.
<a href=
http://www.mcli.dist.maricopa.edu/tut/final/index.htm#intro>
Introduction to Volcano Web</a>
Dấu tham khảo "#anchor_name" được gắn thêm vào cuối của URL.
Kiểm tra lại công việc của bạn
So sánh công việc của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu hay các liên kết anchor được đặt tên không hoạt động đúng, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Ví dụ sử dụng liên kết để trở lại phần mô tả anchor được đặt tên...Xem lại
- Làm thế nào nhận dạng một anchor được đặt tên?
- Những bước nào tạo một liên kết tới một phần khác trong cùng một tài liệu?
- Làm thế nào hiệu chỉnh một liên kết anchor để nối đến một anchor được đặt tên trong một tài liệu HTML khác?
- Làm thế nào tạo một bảng mục lục cho một trang web?
- Sự khác nhau giữa tag <a href="...> và tag <a name="...> là gì?
