2007410121116 tut8a

421 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
421
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2007410121116 tut8a

  1. 1. Soạn thảo HTML | Giới thiệu | FAQ | Alumni | Các Tag | Mục Lục | Bài trước | Bài kế |8a. 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 đíchSau 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ọcBâ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ănbả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ầnphả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".
  2. 2. 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ênkế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. 3. 4. Listed below are two places in the United States that 5. are considered "active" volcanic areas. 6. Bên dưới tiêu đề "Mount St. Helens", đánh: 7. 8. On May 18, 1980, after a long period of rest, this quiet 9. mountain in Washington provided <a href="msh.htm"> 10. 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). 11. Lưu và đóng tài liệu HTML của bạn 12. Bây giờ mở một tài liệu Mới trong trình soạn thảo của bạn. 13. Nhập các dòng sau trong màn hình mới: 14. <html> 15. <head> 16. <title>Mount St Helens</title> 17. </head> 18. <body> 19. <h1>Mount St Helens</h1> 20. The towering pine trees of this once-quiet mountain 21. were toppled over like toys. 22. </body> 23. </html> 24. 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). 25. Reload Volc.htm trong web browser. 26. 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 ảnhTrong bài 7a, chúng ta đã xét cách trình bày một hình ảnh "inline" trong trang Web. Vớitag 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ọnmột liên kết anchor , hình ảnh sẽ được download và trình bày riêng trong một trangtrố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.
  3. 3. 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/foldervớ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ênkế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ệucủ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. 4. The towering pine trees of this once-quiet mountain 5. were <a href="msh.gif">toppled over like toys</a>. 6. Lưu lại tập tin msh.htm và Reload trong web browser của bạn. 7. Bây giờ click vào liên kết mà bạn vừa tạo ra trong bước (3) 8. Một bức ảnh cây cối bị thổi ngã sẽ được thể hiệnNhững liên kết đến các thư mục khácTag 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 trongmột directory/folder khác có liên quan tới tài liệu mà có chứa anchor. Ví dụ như, trongbà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ộtdirectory/folder riêng gọi là pictures. Khi bạn tạo ngày càng nhiều tập tin HTML, sẽ tốthơ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: 5. The towering pine trees of this once-quiet mountain 6. 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." 7. Lưu trữ tài liệu HTML và reload lại trong browser của bạnNế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.
  4. 4. 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 tinliê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àomộ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) đếnmộ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ằngbạ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ụngHTML 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 đếnmộ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ấpTrong 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ụccon:<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 caohơ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ớitậ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 trongdirectory/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ềunà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
  5. 5. đọ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âunữ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.htm và msh.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): 5. + workarea (directory) 6. 7. + pictures (directory) 8. msh.gif 9. volc.gif 10. 11. + volcano (directory) 12. volc.htm 13. msh.htm 14. 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: 15. <h3>Mount St Helens</h3> 16. On May 18, 1980, after a long period of rest, this quiet 17. mountain in Washington provided <a href="msh.htm">detailed 18. observations</a> on the mechanics of highly explosive 19. 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? 20. 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: 21. The towering pine trees of this once-quiet mountain 22. 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
  6. 6. 23. 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>: 24. <img alt="A Lesson on:" src="../pictures/lava.gif" width=300 height=259> 25. 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ữaBướ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ảithí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.htmthành index.htmTạ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àoWorld 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 /geologynhư 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 serverbạ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óabớ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ếubạ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.htmkhi để 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ạnSo 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ạnsẽ thấy trang Volcano Web. Khi bạn click vào siêu văn bản tại detailed observations,
  7. 7. 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 toppledover 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ạnkhá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ự doTạ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ạnnà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ênkết đến những tài nguyên "ở đâu đó" trong Internet.ĐẾN.... | Mục Lục | Bài trước: "Tạo Liên kết với Anchors" | Bài kế: "URLs-Con trỏ đến Internet" |Writing HTML Bài 8b: Liên kết đến tập tin cục bộ©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)Maricopa County Community College District, ArizonaThe Internet Connection at MCLI is Alan Levine --}Comments to levine@maricopa.eduURL: http://www.mcli.dist.maricopa.edu/tut/tut8a.html

×