Lessons XV : Liên kết Các phần của một Trang

8d. 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:

  1. Mở tập tin index.htm trong trình soạn thảo văn bản
  2. 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”

  3. 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> 
  4. 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ó:

  1. Nếu chưa mở, hãy mở tập tin index.htm trong trình soạn thảo.
  2. Bên dưới câu đầu tiên trong tiêu đề Volcano Webthê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.

  3. LưuReload trong web browser của bạn.

Cuối cùng , chúng ta muốn làm cho mỗi mục của danh sách hoạt động như một liên kết siêu văn bản tới một phần khác của tài liệu. Ðể làm điều này, chúng ta sẽ sử dụng một biến thể của liên kết anchor cơ bản trong bài 8a. Thay vì liên kết tới một tập tin khác, chúng ta liên kết tới một trong những anchor được đặt tên (các dấu ẩn bạn đã tạo ra ở trên) bên trong cùng một tập tin HTML. Chúng ta chỉ định một anchor được đặt tên bằng cách đặt kí hiệu “#” trước tên của dấu tham khảo:

  1. Mở tập tin index.htm trong trình soạn thảo
  2. Ðến mục đầu tiên trong phần mục lục. Thay đổi nó từ:
     <li>Introduction

    thành:

     <li><A HREF="#intro">Introduction</A>
  3. 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>
  4. LưuReload 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.

  1. Mở tập tin msh.htm trong trình soạn thảo
  2. 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ưuReload 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.

Trong trường hợp đang xét liên kết chỉ là tên của một tập tin HTML khác, index.htm, trong cùng thư mục với tập tin msh.htm. Tuy nhiên, bạn có thể sử dụng một URL đầy đủ (xem bài 7) để liên kết tới một anchor được đặt tên trong một tập tin HTML có trên một máy khác ở xa. Ví dụ như, để tạo một liên kết đến phần “Introduction” của tập tin HTML cất trong MCLI WWW server, cách viết nên là:

 <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

  1. Làm thế nào nhận dạng một anchor được đặt tên?
  2. 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?
  3. 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?
  4. Làm thế nào tạo một bảng mục lục cho một trang web?
  5. Sự khác nhau giữa tag <a href="...> và tag <a name="...> là gì?

Thực tập tự do

Tạo các anchors được đặt tên cho các tiêu đề trong trang web và xây dựng một mục lục để liên kết đến những mục con này.


Ði đến phần tiếp theo ….

Trong bài kế tiếp bạn sẽ học cách làm một hình ảnh như là một liên kết siêu văn bản.

ÐẾN…. | Mục Lục | Bài trước: “Liên kết đến Internet” | Bài kế: “Liên kết Siêu Hình ảnh” |

 


Soạn thảo HTML Bài 8d: Liên kết đến Các phần của một Trang

?1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine –}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut8d.html

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: