Leckék menü
HTML - basic - Lecke száma 6
Hivatkozások
Miről szól ez a lecke?

Ebben a leckében megtanuljuk, hogyan köthetünk össze több dokumentumot hivatkozásokkal (linkekkel). Egy weboldal általában egynél több HTML dokumentumból áll – a weboldal megtekintése az index fájltól indul, a többi dokumentumot, a dokumentumok részeit linkekkel érhetjük el. Megtanulunk hivatkozni más/külső weboldalakra, letölthető dokumentumokra, képekre. Ebben a leckében egyelőre csak szövegekre kattintva nyitunk meg más oldalakat.

Új címke ebben a leckében:
<a> </a> -egy olyan szövegrész (vagy kép stb.) megjelölése, amelyre kattintva megnyithatunk egy másik dokumentumot.
Az <a> címkének több tulajdonságát fogjuk használni:
href – ez a tulajdonság szükséges a megnyitandó dokumentum nevének és útvonalának megadásához.
target – ez a tulajdonság, ahhoz szükséges, hogy megadhassuk a megnyitandó weboldallal kapcsolatban, hogy ugyanabban vagy más ablakban akarjuk megnyitni.
download – ennek a tulajdonságnak, nem adhatunk értéket. Ezt a tulajdonságot megadva fejezzük ki, hogy a hivatkozás által megnyitott dokumentumot letöltésre szánjuk.

Példa:
A böngészőben a Read more! szöveg jelenik meg, az szerepel a címkék közé zárva a kódban.
A wikipedia.org oldal címe a href tulajdonság értékeként van megadva, ha kattintunk a linkre, ez nyílik meg egy új lapon a böngészőablakban. Az új lap a target tulajdonságnak átadott _blank érték miatt nyílik meg.


Kiegészítések:
  • Felismerhetjük a hivatkozásként megjelölt elemeket, ha fölé mozgatjuk a kurzort. Általában kéz formája lesz a kurzornak.
  • Ha a linket tartalmazó fájl gépéről nyitunk meg HTML vagy más fájlt, a fájl nevét és relatív útvonalát kell megadni a href tulajdonság után.
  • Ha egy böngésző nem tud egy dokumentumot megnyitni, amelyre hivatkozunk, automatikusan letölti. Ha azt szeretnénk, hogy egy hivatkozásra kattintva a megjelölt dokumentum letöltődjön a „látogató” számítógépére ezt külön a download tulajdonsággal meg kell adni.
  • Ha egy másik weboldalat nyitunk meg, a webcím teljes kell legyen (meg kell adni a protokollt is – pl. http://). A legegyszerűbb, ha megnyitjuk az oldalt böngészőben és átmásoljuk a teljes címet a href tulajdonsághoz.
  • Általában az ugyanahhoz az oldalhoz tartozó dokumentumokat, ugyanazon a lapon nyitjuk meg, ha más oldalra hivatkozunk, egy új lapot nyitunk meg.
  • Létrehozhatunk hosszabb dokumentumok esetén belső, tartalomjegyzékszerű hivatkozásokat. Először könyvjelzőket kell kialakítani a dokumentum azon elemeiből, amelyekre hivatkozni akarunk, majd a linkeket beszúrni az eddigiekhez hasonlóan.


Példa:
Könyvjelző létrehozása – bármilyen HTML címkéhez adhatunk könyvjelzőt, egy id tulajdonság beszúrásával elnevezhetjük az elemet.

Itt egy elsőszintű címet alakítottunk könyvjelzővé, az azonosítója bm. Ezután megoldható, hogy hivatkozzunk erre a címre, ebből vagy más dokumentumból.

Hivatkozás könyvjelzőre – az <a> címke href tulajdonságának a könyvjelző azonosítóját kell megadni egy # jellel ellátva.

Itt a bm azonosítóval ellátott címkére ugrunk a Jump to the browsers szövegre kattintva.

Feladatok
1. Nyisd meg a index.html fájlt, és adj hozzá négy < a >; címkék, amelyekben a következő linket tartalmazza: index.html, toplangs.html, aspect.html, tips.html . A megjelenő szöveg a következő:Home, Top, Website making, Tips. Állítson be minden egyes linket egy külön sorba.
Tekintsd meg az eredményt
2. A aspect.html fájlban egy olyan tábla található, amely három webcímet tartalmazó cellát tartalmaz. Konvertáld őket linkekké, hogy a megfelelő webhelyekre hivatkozhassanak. A cellában megjelenő szöveg nem változhat.
Tekintsd meg az eredményt
3. Helyezzen be a aspect.html , a táblázat után két új linket külön sorokban: "My reference work" és " More about this" . Az elsőnek meg kell nyitnia egy képet egy új lapon a referencia munkával, amely egy kép a képmappából, az úgynevezett webpage.jpg, és a második linknek egy új lapon kell megnyitnia egy pdf dokumentumot a Coders work.pdf .
Tekintsd meg az eredményt
4. A aspect.html elején adjon hozzá két könyvjelző linket: #bm1, #bm2, #bm3: ." Websites making aspects", "My reference work" és " My timetable" . Az elsőnek az alábbiakra kell ugornia: "The most important aspects to consider, while making a website" a második a My reference linkre, a harmadik pedig a tippeket.html, a" My timetable " Minden linknek egy másik sorban kell megjelennie.
Tekintsd meg az eredményt
Kérdőív
1. A <a> jelentése:
2. Mi történik, ha az alábbi linkre kattintunk?
<a href=" https://www.google.com" target="_blank">Search</a>
3. A következő kulcsszavak közül melyik HTML-tag:
4. Az alábbiak közül melyikre nem hivatkozhatunk egy HTML dokumentumban?
5. A következő linkek közül melyik nem fog működni, mert hiányos?
6. Melyik leírás felel meg az alábbi linknek?
<a href="index.html#bm">Bookmark</a>
Exclamation mark Ez az oldal sütiket használ. Ha folytatod böngészést, elfogadod azok használatát! Elfogadom