Trang chủ
Liên kết đến tập tin cục bộ
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ộ:
- Mở văn bản HTML của bạn , volc.htm, trong trình soạn thảo.
- Đầ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. - 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).
- Lưu và đóng tài liệu HTML của bạn
- Bây giờ mở một tài liệu Mới trong trình soạn thảo của bạn.
- 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> - 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).
- Reload Volc.htm trong web browser.
- 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:
- 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.
- Mở tập tin msh.htm trong trình soạn thảo.
- Đ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>. - Lưu lại tập tin msh.htm và Reload trong web browser của bạn.
- Bây giờ click vào liên kết mà bạn vừa tạo ra trong bước (3)
- 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:- 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.
- Chuyển tập tin msh.gif đến sub-directory/folder mới này.
- Mở tập tin msh.htm trong trình soạn thảo.
- Đ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."
- Lưu trữ tài liệu HTML và reload lại trong browser của bạn
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
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!
- Đầ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ỏ).
- Di chuyển hai tập tin HTML volc.htm và msh.htm vào trong directory/folder mới này.
- 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.
- 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 - 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?
- 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 - 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> - 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
- 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ộ?
- 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?
- 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?
- Ý nghĩa của tập tin có tên index.htm trên một WWW server là gì?
