Soaïn thaûo HTML | Giôùi thieäu | FAQ | Alumni | Caùc Tag | Muïc Luïc | Baøi tröôùc | Baøi keá |

8a. Lieân keát ñeán taäp tin cuïc boä

Taøi lieäu cuûa toâi coù theå noùi chuyeän vôùi taøi lieäu cuûa toâi ñöôïc khoâng? Ñöôïc chöù, ít nhaát laø chuùng coù theå lieân keát vôùi nhau ñöôïc!

Muïc ñích

Sau baøi hoïc naøy, baïn coù theå:

Baøi hoïc

Baây giôø, baïn seõ ñi böôùc ñaàu tieân cuûa "anchoring" baèng caùch taïo ra moät lieân keát sieâu vaên baûn ñeán moät trang web thöù hai. Nhöõng lieân keát naøy ñöôïc goïi laø "cuïc boä" (local) bôûi vì chuùng cuøng ôû treân moät maùy tính vaø laø taøi lieäu ñang laøm vieäc cuûa baïn (chuùng khoâng caàn phaûi thaùm hieåm treân Internet). Baïn seõ thay ñoåi moät chuùt veà söï phaùt trieån web site cuûa baïn (baïn coù thaáy raèng ñieàu naøy taïo ra moät caùi gì ñoù hôi khaùc moät chuùt vôùi töø "home gape" khoâng?).

Löu yù : Neáu baïn chöa coù taøi lieäu töø baøi tröôùc, haõy download moät baûn sao.

Lieân keát ñeán Taäp tin cuïc boä

Lieân keát anchor ñôn giaûn nhaát laø lieân keát ñeå môû taäp tin HTML khaùc trong cuøng moät thö muïc vôùi trang web ñang ñöôïc theå hieän. Daïng HTML ñeå laøm vieäc naøy laø: 

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

Haõy xem chöõ "a" laø anchor coøn "href" laø "hypertext reference.

Teân taäp tin phaûi laø moät taäp tin HTML khaùc. Baát cöù vaên baûn naøo xuaát hieän sau kyù hieäu > vaø tröôùc kyù hieäu </a> seõ laø "sieâu vaên baûn", noù ñöôïc hieån thò baèng gaïch döôùi vaø "hyper".

Haõy theo nhöõng böôùc sau ñeå xaây döïng moät Anchor trong taøi lieäu HTML cuûa baïn ñeå lieân keát ñeán moät taäp tin cuïc boä:

  1. Môû vaên baûn HTML cuûa baïn , volc.htm, trong trình soaïn thaûo.
  2. Ñaàu tieân, döôùi tieâu ñeà Volcanic Places in the USA ñaùnh vaøo ñoaïn vaên ñeå giôùi thieäu veà hai nuùi löûa ñeå söû duïng cho caùc phaàn keá tieáp. 
    
     Listed below are two places in the United States that
     are considered "active" volcanic areas.
  3. Beân döôùi tieâu ñeà "Mount St. Helens", ñaù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.
    Ñoaïn vaên "detailed observations" seõ taïo lieân keát cho ngöôøi xem ñeán moät taøi lieäu HTML thöù hai goïi laø msh.htm. Taäp tin HTML chöa coù; chuùng ta seõ taïo ra noù trong caùc böôùc (5) vaø (6).
  4. Löu vaø ñoùng taøi lieäu HTML cuûa baïn
  5. Baây giôø môû moät taøi lieäu Môùi trong trình soaïn thaûo cuûa baïn.
  6. Nhaäp caùc doøng sau trong maø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 taäp tin naøy vôùi teân msh.htm trong cuøng moät directory/folder vôùi taøi lieäu HTML cuûa baïn (Volc.htm).
  8. Reload Volc.htm trong web browser.
  9. Kieåm tra lieân keát sieâu vaên baûn taïi caùc töø "detailed observations". Khi ñöôïc choïn, noù phaûi keát noái ñeán trang môùi veà Mount St. Helens.

Lieân keát Anchor ñeán moät hình aûnh

Trong baøi 7a, chuùng ta ñaõ xeùt caùch trình baøy moät hình aûnh "inline" trong trang Web. Vôùi tag anchor, baïn cuõng coù theå taïo ra moät lieân keát ñeå hieån thò moät taäp tin hình aûnh. Khi choïn moät lieân keát anchor , hình aûnh seõ ñöôïc download vaø trình baøy rieâng trong moät trang troáng hoaëc cuõng coù theå web browser cuûa baïn töï ñoäng goïi moät trình öùng duïng ñeå hieån thò hình aûnh.

Lieân keát anchor ñôn giaûn nhaát laø lieân keát ñeán moät taäp tin trong cuøng moät directory/folder vôùi taøi lieäu goïi noù. Daïng ñeå taïo moät lieân keát sieâu vaên baûn ñeán moät hình aûnh gioáng nhö lieân keát ñeán moät taøi lieäu HTML khaùc ôû treân 

  <a href="filename.gif">text that responds to link</a>
trong ñoù filename.gif laø teân cuûa taäp tin hình aûnh GIF.

Baây giôø theo nhöõng böôùc sau ñeå theâm moät lieân keát vôùi moät taäp tin hình aûnh trong taøi lieäu cuûa baïn:

  1. Tröôùc heát, baïn caàn cheùp moät baûn sao taäp tin hình aûnh GIF töø Trung taâm Download Hình aûnh Baøi 8a.
  2. Môû taäp tin msh.htm trong trình soaïn thaûo.
  3. Ñieàu chænh ñoaïn vaên baûn ñeå taïo lieân keát tôùi hình aû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 laïi taäp tin msh.htm vaø Reload trong web browser cuûa baïn.
  5. Baây giôø click vaøo lieân keát maø baïn vöøa taïo ra trong böôùc (3)
  6. Moät böùc aûnh caây coái bò thoåi ngaõ seõ ñöôïc theå hieän

Nhöõng lieân keát ñeán caùc thö muïc khaùc

Tag Anchor cuõng coù theå taïo lieân keát ñeán moät taøi lieäu HTML hoaëc taäp tin hình aûnh trong moät directory/folder khaùc coù lieân quan tôùi taøi lieäu maø coù chöùa anchor. Ví duï nhö, trong baøi cuûa chuùng ta , chuùng ta coù theå löu tröõ taát caû caùc taäp tin hình aûnh trong moät directory/folder rieâng goïi laø pictures. Khi baïn taïo ngaøy caøng nhieàu taäp tin HTML, seõ toát hôn khi giöõ caùc taäp tin hình aûnh trong moät vuøng rieâng bieät. Haõy laøm ñieàu sau:
  1. Trong heä thoáng cuûa baïn taïo moät sub-directory/folder pictures trong cuøng vò trí löu tröõ taäp tin Volc.htm.
  2. Chuyeån taäp tin msh.gif ñeán sub-directory/folder môùi naøy.
  3. Môû taäp tin msh.htm trong trình soaïn thaûo.
  4. Ñieàu chænh tag anchor cho hình aûnh caàn ñoïc: 
         The towering pine trees of this once-quiet mountain 
     were <a href="pictures/msh.gif">toppled over 
     like toys</a>.
    Chuù yù: Vôùi HTML baïn coù theå höôùng daãn web browser cuûa baïn môû moïi taøi lieäu/hình aûnh taïi thö muïc caáp thaáp hôn taøi lieäu hieän taïi baèng caùch söû duïng kyù töï "/" ñeå chæ ra thö muïc con goïi laø "pictures."
  5. Löu tröõ taøi lieäu HTML vaø reload laïi trong browser cuûa baïn

Neáu taát caû ñeàu toát, vieäc lieân keát trong caâu moâ taû caùc caây bò thoåi ngaõ seõ goïi ñeán taäp tin hình aûnh ñang coù trong directory/folder pictures.

Lieân keát Anchor ñeán thö muïc caáp cao hôn

Loaïi lieân keát chuùng ta vöøa thöïc hieän ñöôïc goïi laø caùc lieân keát "töông ñoái" (relative link), nghóa laø moät Web browser coù theå xaây döïng laïi ñaày ñuû URL döïa treân vò trí hieän haønh cuûa trang HTML vaø nhöõng thoâng tin lieân keát trong caùc tag <a href=...>. Ñieàu naøy raát toát bôûi vì baïn coù theå xaây döïng taát caû caùc trang web cuûa baïn treân cuøng moät maùy tính, kieåm tra chuùng, vaø di chuyeån chuùng vaøo moät maùy khaùc, taát caû caùc lieân keát töông ñoái vaãn giöõ nguyeân hieäu öùng.

Trong baøi hoïc chuùng ta ñaõ bieát laøm theá naøo ñeå xaây döïng moät sieâu lieân keát (hyperlink) ñeán moät taøi lieäu löu tröõ trong moät thö muïc thaáp hôn trang HTML ñang laøm vieäc. Löu yù raèng baïn cuõng coù theå xaây döïng moät lieân keát ñeán moät thö muïc cao hôn baèng caùch söû duïng HTML sau: 

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

Moãi moät laàn xuaát hieän cuûa "../", URL cuûa lieân keát anchor baùo cho web browser ñi ñeán moät directory/folder cao hôn moät caáp töông öùng vôùi trang hieän taïi; trong tröôøng hôïp cuï theå naøy coù nghóa laø leân hai caáp thö muïc vaø tìm taäp tin home.htm.

Trong ví duï cuûa chuùng ta, haõy xeùt tröôøng hôïp khi thö muïc con pictures khoâng cuøng ôû trong directory/folder vôùi taäp tin volc.htm maø ôû cao hôn moät caáp

directory diagram Trong phaàn tröôùc chuùng ta ñaõ taïo lieân keát töø volc.htm tôùi taäp tin msh.gif trong thö muïc con: 

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

Baây giôø, chuùng ta muoán toå chöùc laïi caáu truùc web ñeå thö muïc pictures ôû moät möùc cao hôn. Lieân keát seõ ñöôïc vieát nhö sau: 

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

Vì vaäy web browser tìm kieám thö muïc pictures ñöôïc löu tröõ cao hôn moät möùc so vôùi taäp tin volc.htm.

Söï tieän lôïi cuûa caáu truùc naøy laø deã daøng löu laïi moät soá löôïng lôùn hình aûnh trong directory/folder cao hôn ñeå coù theå duøng chung trong nhöõng trang web khaùc. Chuùng ta coù theå thöïc hieän moät baøi hoïc khaùc veà ñòa maïo (ñieåm ñaëc tröng töï nhieân cuûa beà maët quaû ñaát) vaø söû duïng nhöõng hình aûnh ñöôïc löu tröõ trong directory/folder naøy.

Baây giôø ñaõ ñeán luùc toå chöùc laïi caùc taäp tin HTML cuûa chuùng ta. Ñeå thöïc hieän ñöôïc ñieàu naøy baïn caàn laøm quen vôùi vieäc di chuyeån taäp tin vaø thö muïc treân maùy tính cuûa baïn. Haõy ñoïc moät caùch caån thaän! Baïn coù theå caûm thaáy khaù phöùc taïp, nhöng chaúng bao laâu nöõa taát caû ñeàu roõ raøng thoâi!

  1. Ñaàu tieân, taïo directory/folder môùi coù teân laø volcano (moät lôøi khuyeân laø neân giöõ caùc teân taäp tin ôû daïng chöõ nhoû).
  2. Di chuyeån hai taäp tin HTML volc.htm vaø msh.htm vaøo trong directory/folder môùi naøy.
  3. Di chuyeån directory/folder pictures (cuøng vôùi taäp tin msh.gif beân trong) ñeán cuøng caáp vôùi directory/folder môùi volcano. Töông töï, di chuyeån taäp tin lava.gif maø chuùng ta taïo ra trong baøi 7a vaøo thö muïc caùc hình naøy.
  4. Nhö vaäy toaøn boä thö muïc (workarea) baây giôø goàmhai thö muïc con - moät ñeå giöõ caùc taäp tin HTML (volcano) vaø moät giöõ caùc hình aûnh (pictures): 
             + workarea (directory)
          
               + pictures (directory)
                    msh.gif
                    volc.gif
               
               + volcano (directory)
                    volc.htm
                    msh.htm
  5. Chuùng ta ñaõ di chuyeån moät soá thöù do vaäy baây giôø chuùng ta phaûi caäp nhaät laïi caùc lieân keát anchor trong caùc taäp tin HTML. Tröôùc heát, haõy xem laïi lieân keát cuïc boä trong taä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.
    Chuù yù: Vì taäp tin msh.htm vaãn ôû cuøng thö muïc vôùi volc.htm, chuùng ta khoâng caàn thay ñoåi gì caû trong taäp tin HTML naøy! Baïn coù thaáy söï lieân keát töông ñoái laø moät tính chaát raát hay cuûa HTML khoâng?
  6. Nhöng baây giôø haõy xem laïi lieân keát ñeán hình Mt. St Helens ñaõ taïo ra trong taä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ôû taäp tin naøy trong trình soaïn thaûo vaên baûn vaø ñieàu chænh lieân keát nhö sau: 

      The towering pine trees of this once-quiet mountain 
  were <a href="../pictures/msh.gif">toppled over 
  like toys</a>.
    Lieân keát töông ñoái naøy baùo cho web browser xeùt leân moät caáp so vôùi directory/folder hieän haønh (volcano) roài tìm directory/folder coù teân (pictures) maø ôû ñoù coù chöùa aûnh msh.gif

  7. Cuoái cuøng, baïn caàn ñieàu chænh laïi tag <img...> tag ñeå hieån thò hình aûnh tieâu ñeà. Môû taäp tin volc.htm trong trình soaïn thaûo vaø söûa ñoåi doøng ngay sau tag <body>: 
      <img alt="A Lesson on:" src="../pictures/lava.gif"
                                 width=300 height=259>
  8. Löu laïi taäp tin cuûa baïn. Baïn neân Môû laïi taäp tin volc.htm trong web browser cuûa baïn vaø thöû laïi lieân keát ñeán msh.htm vaø lieân keát ñeán hình Mount St Helens.

Theâm moät söï thay ñoåi nhoû nöõa

Böôùc thay ñoåi nhoû cuoái cuøng naøy coù theå khoâng roõ raøng, ngöng chuùng toâi seõ coá gaéng giaûi thích ngaén goïn. Ñieàu cuoái cuøng baïn neân laøm trong baøi naøy laø ñoåi teân taäp tin töø volc.htm thaønh index.htm

Taïi sao vaäy? Haõy xem nhö baïn ñaõ keát thuùc baøi naøy vaø saün saøng ñöa web site cuûa baïn vaøo World Wide Web server ñeå moïi ngöôøi cuøng xem. Vaø chuùng ta haõy giaû thieát raèng ñòa chæ Internet cuûa server naøy taïi Big University laø: 

    http://www.bigu.edu/
Vaø taäp tin cuûa baïn ñöôïc caát vaøo thö muïc sau: 

--= top level of server: www.bigu.edu
   /courses
        /science
            /geology
nhö vaäy URL cho Volcano Web coù theå laø: 
    http://www.bigu.edu/courses/science/geology/volcano/volc.htm
OÀ, khaù daøi nhæ? Baây giôø laø nhöõng lôøi giaûi thích nhö ñaõ höùa -- treân nhieàu WWW server baïn coù theå chæ ñònh moät teân chuaån goïi laø trang web "maëc nhieân" (default) cho moät thö muïc vaø treân nhieàu heä thoáng teân ñoù laø .... index.htm. Ñieàu naøy coù nghóa raè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
Ñieàu naøy coù theå laøm cho baïn nghó laø ñaõ tieát kieäm ñöôïc nhieäu naêng löôïng trong vieäc xoùa bôùt 20 kyù töï töø URL! Thöïc teá, noù laøm cho URL cuûa baïn coù veû chuyeân nghieäp hôn. Neáu baïn noùi coù moät Home page laø Longhorn Cheese, 
    http://www.cheese.com/longhorn/
coù veû ít röôøm ra hôn laø 
    http://www.cheese.com/longhorn/longhorn.htm
khi ñeå cho moïi ngöôøi ñoïc URL cuûa baïn vaø thöû ñaùnh vaøo browser cuûa hoï.

Kieåm tra laïi coâng vieäc cuûa baïn

So saùnh trang web vôùi ví duï maãu ñeå bieát taøi lieäu neân xuaát hieän nhö theá naøo. Tröôùc heát baïn seõ thaáy trang Volcano Web. Khi baïn click vaøo sieâu vaên baûn taïi detailed observations, web browser cuûa baïn seõ hieån thò moät trang môùi. Cuoái cuøng, khi baïn click vaøo toppled over like toys, web browser cuûa baïn seõ hieån thò trong moät cöûa soå moät taäp tin hình aûnh ñöôïc caát trong moät sub-directory/folder.

Söû duïng button back cuûa browser hai laàn ñeå quay veà trang naøy. Neáu trang web cuûa baïn khaùc vôùi maãu, xem laïi vaên baûn baïn ñaùnh vaøo trong trình soaïn thaûo vaên baûn.

Xem laïi

  1. Caùc böôùc naøo ñöôïc söû duïng ñeå taïo moät lieân keát trong taøi lieäu cuûa baïn ñeán moät taäp tin cuïc boä?
  2. Nhöõng böôùc naøo ñöôïc söû duïng ñeå taïo moät lieân keát khi muoán hieån thò hình aûnh trong cöûa soå rieâng bieät?
  3. Laøm theá naøo ñeå taïo moät lieân keát ñeán moät taäp tin trong moät directory/folder thaáp hôn taøi lieäu chính cuûa baïn? cao hôn?
  4. YÙ nghóa cuûa taäp tin coù teân index.htm treân moät WWW server laø gì?

Thöïc taäp töï do

Taïo moät taøi lieäu HTML söû duïng caùc ñònh daïng HTML maø baïn ñaõ quen bieát ñeán giai ñoaïn naøy. Trôû veà trang ñaàu tieân vaø taïo moät anchor ñeå lieân keát ñeán trang môùi naøy.

Ñi ñeán phaàn tieáp theo....

Wow! Laøm vieäc nhieàu quaù! Trong baøi hoïc tieáp theo baïn seõ xeùt laøm theá naøo ñeå HTML lieân keát ñeán nhöõng taøi nguyeân "ôû ñaâu ñoù" trong Internet.
ÑEÁN.... | Muïc Luïc | Baøi tröôùc: "Taïo Lieân keát vôùi Anchors" | Baøi keá: "URLs-Con troû ñeán Internet" |

Writing HTML Baøi 8b: Lieân keát ñeán taäp tin cuïc boä
©1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut8a.html