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

8a. Liên kết đến tập tin cục bộ

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


Tài liệu của tôi có thể nói chuyện với tài liệu của tôi được không? Được chứ, ít nhất là chúng có thể liên kết với nhau được!

Mục đích

Sau bài học này, bạn có thể:

  • Tạo liên kết đến tài liệu HTML trong cùng directory/folder với tài lệu chính của bạn.
  • Tạo liên kết để hiển thị một hình ảnh.
  • Tạo liên kết đến một tập tin trong một directory/folder khác với tài liệu chính của bạn.
  • Tổ chức lại cấu trúc web của bạn.

Bài học

Bây giờ, bạn sẽ đi bước đầu tiên của "anchoring" bằng cách tạo ra một liên kết siêu văn bản đến một trang web thứ hai. Những liên kết này được gọi là "cục bộ" (local) bởi vì chúng cùng ở trên một máy tính và là tài liệu đang làm việc của bạn (chúng không cần phải thám hiểm trên Internet). Bạn sẽ thay đổi một chút về sự phát triển web site của bạn (bạn có thấy rằng điều này tạo ra một cái gì đó hơi khác một chút với từ "home gape" không?).

Lưu ý : Nếu bạn chưa có tài liệu từ bài trước, hãy download một bản sao.

Liên kết đến Tập tin cục bộ

Liên kết anchor đơn giản nhất là liên kết để mở tập tin HTML khác trong cùng một thư mục với trang web đang được thể hiện. Dạng HTML để làm việc này là:

     <a href="filename.htm">text that responds to link</a>

Hãy xem chữ "a" là anchor còn "href" là "hypertext reference.

Tên tập tin phải là một tập tin HTML khác. Bất cứ văn bản nào xuất hiện sau ký hiệu > và trước ký hiệu </a> sẽ là "siêu văn bản", nó được hiển thị bằng gạch dưới và "hyper".

Hãy theo những bước sau để xây dựng một Anchor trong tài liệu HTML của bạn để liên kết đến một tập tin cục bộ:

  1. Mở văn bản HTML của bạn , volc.htm, trong trình soạn thảo.
  2. Đầu tiên, dưới tiêu đề Volcanic Places in the USA đánh vào đoạn văn để giới thiệu về hai núi lửa để sử dụng cho các phần kế tiếp.
    
    Listed below are two places in the United States that
    are considered "active" volcanic areas.
    
  3. Bên dưới tiêu đề "Mount St. Helens", đánh:
    
    On May 18, 1980, after a long period of rest, this quiet
    mountain in Washington provided <a href="msh.htm">
    detailed observations</a> on the mechanics
    of highly explosive eruptions.
    Đoạn văn "detailed observations" sẽ tạo liên kết cho người xem đến một tài liệu HTML thứ hai gọi là msh.htm. Tập tin HTML chưa có; chúng ta sẽ tạo ra nó trong các bước (5) và (6).
  4. Lưu và đóng tài liệu HTML của bạn
  5. Bây giờ mở một tài liệu Mới trong trình soạn thảo của bạn.
  6. Nhập các dòng sau trong màn hình mới:
         <html>
    <head>
    <title>Mount St Helens</title>
    </head>
    <body>
    <h1>Mount St Helens</h1>
    The towering pine trees of this once-quiet mountain 
    were toppled over like toys.
    </body>
    </html>
    
  7. Lưu tập tin này với tên msh.htm trong cùng một directory/folder với tài liệu HTML của bạn (Volc.htm).
  8. Reload Volc.htm trong web browser.
  9. Kiểm tra liên kết siêu văn bản tại các từ "detailed observations". Khi được chọn, nó phải kết nối đến trang mới về Mount St. Helens.

Liên kết Anchor đến một hình ảnh

Trong bài 7a, chúng ta đã xét cách trình bày một hình ảnh "inline" trong trang Web. Với tag anchor, bạn cũng có thể tạo ra một liên kết để hiển thị một tập tin hình ảnh. Khi chọn một liên kết anchor , hình ảnh sẽ được download và trình bày riêng trong một trang trống hoặc cũng có thể web browser của bạn tự động gọi một trình ứng dụng để hiển thị hình ảnh.

Liên kết anchor đơn giản nhất là liên kết đến một tập tin trong cùng một directory/folder với tài liệu gọi nó. Dạng để tạo một liên kết siêu văn bản đến một hình ảnh giống như liên kết đến một tài liệu HTML khác ở trên

  <a href="filename.gif">text that responds to link</a>
trong đó filename.gif là tên của tập tin hình ảnh GIF.

Bây giờ theo những bước sau để thêm một liên kết với một tập tin hình ảnh trong tài liệu của bạn:

 

  1. Trước hết, bạn cần chép một bản sao tập tin hình ảnh GIF từ Trung tâm Download Hình ảnh Bài 8a.
  2. Mở tập tin msh.htm trong trình soạn thảo.
  3. Điều chỉnh đoạn văn bản để tạo liên kết tới hình ảnh Mount St. Helens.
         The towering pine trees of this once-quiet mountain 
    were <a href="msh.gif">toppled over like toys</a>.
    
  4. Lưu lại tập tin msh.htmReload trong web browser của bạn.
  5. Bây giờ click vào liên kết mà bạn vừa tạo ra trong bước (3)
  6. Một bức ảnh cây cối bị thổi ngã sẽ được thể hiện

Những liên kết đến các thư mục khác

Tag Anchor cũng có thể tạo liên kết đến một tài liệu HTML hoặc tập tin hình ảnh trong một directory/folder khác có liên quan tới tài liệu mà có chứa anchor. Ví dụ như, trong bài của chúng ta , chúng ta có thể lưu trữ tất cả các tập tin hình ảnh trong một directory/folder riêng gọi là pictures. Khi bạn tạo ngày càng nhiều tập tin HTML, sẽ tốt hơn khi giữ các tập tin hình ảnh trong một vùng riêng biệt. Hãy làm điều sau:
  1. Trong hệ thống của bạn tạo một sub-directory/folder pictures trong cùng vị trí lưu trữ tập tin Volc.htm.
  2. Chuyển tập tin msh.gif đến sub-directory/folder mới này.
  3. Mở tập tin msh.htm trong trình soạn thảo.
  4. Điều chỉnh tag anchor cho hình ảnh cần đọc:
         The towering pine trees of this once-quiet mountain 
    were <a href="pictures/msh.gif">toppled over 
    like toys</a>.
    Chú ý: Với HTML bạn có thể hướng dẫn web browser của bạn mở mọi tài liệu/hình ảnh tại thư mục cấp thấp hơn tài liệu hiện tại bằng cách sử dụng ký tự "/" để chỉ ra thư mục con gọi là "pictures."
  5. Lưu trữ tài liệu HTML và reload lại trong browser của bạn

Nếu tất cả đều tốt, việc liên kết trong câu mô tả các cây bị thổi ngã sẽ gọi đến tập tin hình ảnh đang có trong directory/folder pictures.

Liên kết Anchor đến thư mục cấp cao hơn

Loại liên kết chúng ta vừa thực hiện được gọi là các liên kết "tương đối" (relative link), nghĩa là một Web browser có thể xây dựng lại đầy đủ URL dựa trên vị trí hiện hành của trang HTML và những thông tin liên kết trong các tag <a href=...>. Điều này rất tốt bởi vì bạn có thể xây dựng tất cả các trang web của bạn trên cùng một máy tính, kiểm tra chúng, và di chuyển chúng vào một máy khác, tất cả các liên kết tương đối vẫn giữ nguyên hiệu ứng.

Trong bài học chúng ta đã biết làm thế nào để xây dựng một siêu liên kết (hyperlink) đến một tài liệu lưu trữ trong một thư mục thấp hơn trang HTML đang làm việc. Lưu ý rằng bạn cũng có thể xây dựng một liên kết đến một thư mục cao hơn bằng cách sử dụng HTML sau:

  <a href="../../home.htm">return to home</a>

Mỗi một lần xuất hiện của "../", URL của liên kết anchor báo cho web browser đi đến một directory/folder cao hơn một cấp tương ứng với trang hiện tại; trong trường hợp cụ thể này có nghĩa là lên hai cấp thư mục và tìm tập tin home.htm.

Trong ví dụ của chúng ta, hãy xét trường hợp khi thư mục con pictures không cùng ở trong directory/folder với tập tin volc.htm mà ở cao hơn một cấp

directory diagram Trong phần trước chúng ta đã tạo liên kết từ volc.htm tới tập tin msh.gif trong thư mục con:

<img src=
"pictures/msh.gif">

Bây giờ, chúng ta muốn tổ chức lại cấu trúc web để thư mục pictures ở một mức cao hơn. Liên kết sẽ được viết như sau:

<img src=
"../pictures/msh.gif">

Vì vậy web browser tìm kiếm thư mục pictures được lưu trữ cao hơn một mức so với tập tin volc.htm.

Sự tiện lợi của cấu trúc này là dễ dàng lưu lại một số lượng lớn hình ảnh trong directory/folder cao hơn để có thể dùng chung trong những trang web khác. Chúng ta có thể thực hiện một bài học khác về địa mạo (điểm đặc trưng tự nhiên của bề mặt quả đất) và sử dụng những hình ảnh được lưu trữ trong directory/folder này.

Bây giờ đã đến lúc tổ chức lại các tập tin HTML của chúng ta. Để thực hiện được điều này bạn cần làm quen với việc di chuyển tập tin và thư mục trên máy tính của bạn. Hãy đọc một cách cẩn thận! Bạn có thể cảm thấy khá phức tạp, nhưng chẳng bao lâu nữa tất cả đều rõ ràng thôi!

 

  1. Đầu tiên, tạo directory/folder mới có tên là volcano (một lời khuyên là nên giữ các tên tập tin ở dạng chữ nhỏ).
  2. Di chuyển hai tập tin HTML volc.htmmsh.htm vào trong directory/folder mới này.
  3. Di chuyển directory/folder pictures (cùng với tập tin msh.gif bên trong) đến cùng cấp với directory/folder mới volcano. Tương tự, di chuyển tập tin lava.gif mà chúng ta tạo ra trong bài 7a vào thư mục các hình này.
  4. Như vậy toàn bộ thư mục (workarea) bây giờ gồmhai thư mục con - một để giữ các tập tin HTML (volcano) và một giữ các hình ảnh (pictures):
             + workarea (directory)
              
    + pictures (directory)
                        msh.gif
    volc.gif
    + volcano (directory)
                        volc.htm
    msh.htm
    
  5. Chúng ta đã di chuyển một số thứ do vậy bây giờ chúng ta phải cập nhật lại các liên kết anchor trong các tập tin HTML. Trước hết, hãy xem lại liên kết cục bộ trong tập tin volc.htm:
      <h3>Mount St Helens</h3>
    On May 18, 1980, after a long period of rest, this quiet
    mountain in Washington provided <a href="msh.htm">detailed
    observations</a> on the mechanics of highly explosive
    eruptions.
    
    Chú ý: Vì tập tin msh.htm vẫn ở cùng thư mục với volc.htm, chúng ta không cần thay đổi gì cả trong tập tin HTML này! Bạn có thấy sự liên kết tương đối là một tính chất rất hay của HTML không?
  6. Nhưng bây giờ hãy xem lại liên kết đến hình Mt. St Helens đã tạo ra trong tập tin msh.htm:
      The towering pine trees of this once-quiet mountain 
    were <a href="pictures/msh.gif">toppled over 
    like toys</a>.

    Mở tập tin này trong trình soạn thảo văn bản và điều chỉnh liên kết như sau:

      The towering pine trees of this once-quiet mountain 
    were <a href="../pictures/msh.gif">toppled over 
    like toys</a>.
    Liên kết tương đối này báo cho web browser xét lên một cấp so với directory/folder hiện hành (volcano) rồi tìm directory/folder có tên (pictures) mà ở đó có chứa ảnh msh.gif

     

  7. Cuối cùng, bạn cần điều chỉnh lại tag <img...> tag để hiển thị hình ảnh tiêu đề. Mở tập tin volc.htm trong trình soạn thảo và sửa đổi dòng ngay sau tag <body>:
      <img alt="A Lesson on:" src="../pictures/lava.gif"
    width=300 height=259>
  8. Lưu lại tập tin của bạn. Bạn nên Mở lại tập tin volc.htm trong web browser của bạn và thử lại liên kết đến msh.htm và liên kết đến hình Mount St Helens.

Thêm một sự thay đổi nhỏ nữa

Bước thay đổi nhỏ cuối cùng này có thể không rõ ràng, ngưng chúng tôi sẽ cố gắng giải thích ngắn gọn. Điều cuối cùng bạn nên làm trong bài này là đổi tên tập tin từ volc.htm thành index.htm

Tại sao vậy? Hãy xem như bạn đã kết thúc bài này và sẵn sàng đưa web site của bạn vào World Wide Web server để mọi người cùng xem. Và chúng ta hãy giả thiết rằng địa chỉ Internet của server này tại Big University là:

    http://www.bigu.edu/
Và tập tin của bạn được cất vào thư mục sau:

--= top level of server: www.bigu.edu
/courses
/science
/geology
như vậy URL cho Volcano Web có thể là:
    http://www.bigu.edu/courses/science/geology/volcano/volc.htm
Ồ, khá dài nhỉ? Bây giờ là những lời giải thích như đã hứa -- trên nhiều WWW server bạn có thể chỉ định một tên chuẩn gọi là trang web "mặc nhiên" (default) cho một thư mục và trên nhiều hệ thống tên đó là .... index.htm. Điều này có nghĩa rằng địa chỉ Internet:
    http://www.bigu.edu/courses/science/geology/volcano/
tương đương với
    http://www.bigu.edu/courses/science/geology/volcano/index.htm
Điều này có thể làm cho bạn nghĩ là đã tiết kiệm được nhiệu năng lượng trong việc xóa bớt 20 ký tự từ URL! Thực tế, nó làm cho URL của bạn có vẻ chuyên nghiệp hơn. Nếu bạn nói có một Home page là Longhorn Cheese,
    http://www.cheese.com/longhorn/
có vẻ ít rườm ra hơn là
    http://www.cheese.com/longhorn/longhorn.htm
khi để cho mọi người đọc URL của bạn và thử đánh vào browser của họ.

Kiểm tra lại công việc của bạn

So sánh trang web với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Trước hết bạn sẽ thấy trang Volcano Web. Khi bạn click vào siêu văn bản tại detailed observations, web browser của bạn sẽ hiển thị một trang mới. Cuối cùng, khi bạn click vào toppled over like toys, web browser của bạn sẽ hiển thị trong một cửa sổ một tập tin hình ảnh được cất trong một sub-directory/folder.

Sử dụng button back của browser hai lần để quay về trang này. Nếu trang web của bạn khác với mẫu, xem lại văn bản bạn đánh vào trong trình soạn thảo văn bản.

Xem lại

  1. Các bước nào được sử dụng để tạo một liên kết trong tài liệu của bạn đến một tập tin cục bộ?
  2. Những bước nào được sử dụng để tạo một liên kết khi muốn hiển thị hình ảnh trong cửa sổ riêng biệt?
  3. Làm thế nào để tạo một liên kết đến một tập tin trong một directory/folder thấp hơn tài liệu chính của bạn? cao hơn?
  4. Ý nghĩa của tập tin có tên index.htm trên một WWW server là gì?

Thực tập tự do

Tạo một tài liệu HTML sử dụng các định dạng HTML mà bạn đã quen biết đến giai đoạn này. Trở về trang đầu tiên và tạo một anchor để liên kết đến trang mới này.

Đi đến phần tiếp theo....

Wow! Làm việc nhiều quá! Trong bài học tiếp theo bạn sẽ xét làm thế nào để HTML liên kết đến những tài nguyên "ở đâu đó" trong Internet.





  • 0. Tiêu chuẩn của HTML (2919 lần đọc) Trang In
  • Soạn thảo HTML (4672 lần đọc) Trang In
  • 1. Tạo tài liệu HTML đầu tiên (10501 lần đọc) Trang In
  • 2. Điều chỉnh một tài liệu HTML (2417 lần đọc) Trang In
  • 3. Sáu mức tiêu đề (2038 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 (4511 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ộ (6185 lần đọc) Trang In
  • 8b. URLs - Con trỏ đến Internet (1913 lần đọc) Trang In
  • 8c. Liên kết đến các site Internet bên ngoài (2412 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 (8042 lần đọc) Trang In
  • 9. Preformatted Text (1878 lần đọc) Trang In
  • 10. Các kí tự đặc biệt (24225 lần đọc) Trang In
  • 11. Danh sách mô tả (1838 lần đọc) Trang In
  • 12. Danh thiếp Địa chỉ và Liên kết E-Mail (2239 lần đọc) Trang In
  • 13. Blockquote ! (2807 lần đọc) Trang In
  • 14. Gộp lại (Lumping) hay Phân mảnh (Splitting) (18344 lần đọc) Trang In
  • 15. HTML "tiêu chuẩn" và "nâng cao" (2815 lần đọc) Trang In
  • 16. Màu sắc và Cấu trúc cho Nền (3472 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 (1811 lần đọc) Trang In
  • 20. Xét thêm về Sự Chỉnh lề (7553 lần đọc) Trang In
  • 21. Bảng (Table) (3236 lần đọc) Trang In
  • 22. Xét thêm về Hình ảnh và Danh sách (14739 lần đọc) Trang In
  • 23. Bản đồ Hình ảnh Liên kết (3864 lần đọc) Trang In
  • [ Mục lục chuyên mục ]

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