Mục đích của bài này chỉ cung cấp cho ta những thông tin bổ sung... Vì thế bài này nhanh và khá dễ hiểu!
Thế nào làURL?
Sức mạnh thật sự của web là khả năng tạo ra những liên kết siêu văn bản (hypertext link) đến các thông tin liên quan. Những thông tin này có thể là những trang web khác, những hình ảnh, âm thanh, đoạn phim, animation, các chương trình, nội dung của Gopher server, một trình log-in vào máy tính ở xa (remote computer), hay một tập hợp các phần mềm, hay một "ftp" site.
WWW sử dụng một cách định địa chỉ gọi là URL, hay Uniform Resource Locator (đôi khi còn gọi là "Universal Resource Locator"), để chỉ ra vị trí của những mục như vậy. Những liên kết này thường được biểu diễn bằng những chữ màu xanh có gạch dưới và được gọi là anchor. Trong những bài học tiếp theo chúng ta sẽ:
• Xem lại khái niệm của URL
• Tìm và chép URL từ web browser vào tài liệu văn bản HTML của bạn.
• Viết một anchor HTML để liên kết đến tài liệu trong cùng thư mục với tài liệu đầu tiên. • Viết một anchor HTML để liên kết đến tài liệu khác thư mục với tài liệu đầu tiên. • Viết một anchor HTML để liên kết đến một trang web khác trên Internet.
• Viết một anchor HTML để liên kết đến Gopher Server.
• Viết một anchor HTML để liên kết đến một phần khác của cùng một tài liệu. • Liên kết với một hình ảnh như một "hyperlink" đến tài liệu khác.
Ồ! Nghe như có nhiều việc phải làm! Đừng lo lắng, mọi thứ điều không phức tạp như bạn nghĩ. Sau cùng, nếu không có hypertext thì chúng ta không thể gọi tài liệu này là Soạn thảo HTML mà phải gọi là Soạn thảo TML
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 đí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.
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 ả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. 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.
8. 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:
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ạ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
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.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. 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
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
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ữ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.
8b. URLs - Con trỏđến Internet
URL? Earl? Yurl? hurl? gyrl?
Đến lúc để liên kết đến Big Wide Web sử dụng sơ đồ định địa chỉ của web.
Mục đích
Sau khi hoàn tất bài này bạn có thể:
• Nhận dạng chức năng của Uniform Resource Locators (URLs). • Nhân biết cấu trúc của một URL.
• Kiểm tra URL trong liên kết siêu văn bản của bất kỳ trang web nào.
Bài học
Chú ý: Trong bài này, bạn sẽ không cần tập tin văn bản HTML của bạn. Một bài học
không cần gắng sức!
URL là gì?
WWW sử dụng Uniform Resource Locator (URL) để tìm vị trí của những tập tin và tài liệu của các máy tính trên Internet. Trên màn hình browser của bạn, URL cho tài liệu này được