- Đơn chưa đặt hàng: 1,

8d. Liên kết Các phần của một Trang

(1938 Từ tổng cộng trong nội dung này)
(3024 lần đọc)   Trang In


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 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.
  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.





  • 0. Tiêu chuẩn của HTML (2918 lần đọc) Trang In
  • Soạn thảo HTML (4671 lần đọc) Trang In
  • 1. Tạo tài liệu HTML đầu tiên (10499 lần đọc) Trang In
  • 2. Điều chỉnh một tài liệu HTML (2416 lần đọc) Trang In
  • 3. Sáu mức tiêu đề (2037 lần đọc) Trang In
  • 5. Làm việc với các kiểu mẫu (2059 lần đọc) Trang In
  • 4. Chia văn bản ra thành nhiều đoạn (3007 lần đọc) Trang In
  • 6. Danh sách, Danh sách, và Danh sách (1891 lần đọc) Trang In
  • 7. Thêm hình ảnh vào trang Web (3636 lần đọc) Trang In
  • 7a. Hình ảnh Inline (4509 lần đọc) Trang In
  • 8. Tạo Liên kết bằng Anchors (2620 lần đọc) Trang In
  • 8a. Liên kết đến tập tin cục bộ (6184 lần đọc) Trang In
  • 8b. URLs - Con trỏ đến Internet (1912 lần đọc) Trang In
  • 8c. Liên kết đến các site Internet bên ngoài (2410 lần đọc) Trang In
  • 8d. Liên kết Các phần của một Trang (3025 lần đọc) Trang In
  • 8e. Liên kết Siêu Hình ảnh (8041 lần đọc) Trang In
  • 9. Preformatted Text (1877 lần đọc) Trang In
  • 10. Các kí tự đặc biệt (24221 lần đọc) Trang In
  • 11. Danh sách mô tả (1837 lần đọc) Trang In
  • 12. Danh thiếp Địa chỉ và Liên kết E-Mail (2238 lần đọc) Trang In
  • 13. Blockquote ! (2806 lần đọc) Trang In
  • 14. Gộp lại (Lumping) hay Phân mảnh (Splitting) (18338 lần đọc) Trang In
  • 15. HTML "tiêu chuẩn" và "nâng cao" (2813 lần đọc) Trang In
  • 16. Màu sắc và Cấu trúc cho Nền (3471 lần đọc) Trang In
  • 17. Đừng làm cho chữ nhấp nháy! (3428 lần đọc) Trang In
  • 19. Easy Hard Rules (1810 lần đọc) Trang In
  • 20. Xét thêm về Sự Chỉnh lề (7552 lần đọc) Trang In
  • 21. Bảng (Table) (3235 lần đọc) Trang In
  • 22. Xét thêm về Hình ảnh và Danh sách (14737 lần đọc) Trang In
  • 23. Bản đồ Hình ảnh Liên kết (3862 lần đọc) Trang In
  • [ Mục lục chuyên mục ]

    Tìm kiếm
     Tìm theo từ: