A linkek két kategóriába sorolhatók:
hivatkozások külső forrásokhoz- címkével jönnek létre, és az aktuális dokumentum képességeinek bővítésére szolgálnak, amikor a böngésző feldolgozza;
hiperhivatkozások- hivatkozások más forrásokra, amelyeket a felhasználó meglátogathat vagy letölthet.
Hogyan készítsünk hiperhivatkozásokat az oldalon
1. Linkstruktúra
A hiperhivatkozások létrehozása a párosított címke... A szöveg a címke belsejébe kerül, amely megjelenik a weboldalon. A hivatkozás szövege aláhúzással jelenik meg a böngészőben, a betűszín kék, ha a hivatkozás fölé viszi az egérmutatót, az egérmutató megváltoztatja a megjelenését.
Kötelező címkeparaméter a href attribútum, amely a weboldal URL-jét határozza meg.
link mutatóA link két részből áll - mutatóés cím rész. Link mutató a felhasználó számára látható szöveg vagy kép. Cím rész a hivatkozás nem látható a felhasználó számára, annak az erőforrásnak a címét jelöli, ahová el kell jutni.
A link cím része az URL-ből áll. URL(Uniform Resource Locator) - egységes erőforrás-kereső. A szavak egymástól való elválasztására szolgáló címek létrehozásakor ajánlatos kötőjelet használni az aláhúzás helyett. Általában az URL formátuma a következő:
Elérési mód: // szerver neve: port / elérési út
Hozzáférés módja, vagy protokoll, adatokat cserél a különböző hálózatokon lévő munkaállomások között. A leggyakoribb adatátviteli protokollok a következők:
fájl beolvassa a fájlt a helyi lemezről:
Fájl: /gallery/pictures/summer.html
A http hozzáférést biztosít egy weboldalhoz a HTTP protokoll használatával:
http://site.ru/
A https a HTTP protokoll egy speciális megvalósítása, amely titkosítást (általában SSL vagy TLS) használ.
https://site.ru/
Az ftp kérést küld az FTP-kiszolgálónak egy fájlra:
Ftp: // pgu / könyvtár / könyvtár
A mailto levelezési munkamenetet indít a megadott címzettel és gazdagéppel:
Mailto: [e-mail védett]
Szerver név a hálózaton lévő gép teljes nevét írja le, például site.ru. Ha a szerver neve nincs megadva, akkor a hivatkozás helyinek minősül, pl. ugyanarra a gépre vonatkozik, mint a hivatkozást tartalmazó HTML dokumentum.
TCP portszám ahol a webszerver fut. Ez egy szám, amelyet meg kell adni, ha a metódus portszámot igényel ( külön szerverek saját megkülönböztető portszámmal rendelkezhetnek). Ha nincs megadva port, az alapértelmezett a 80-as port. A szabványos portok a következők:
21 - FTP
23 - Telnet
70 - Gopher
80 – HTTP
Út tartalmazza a mappa nevét, ahol a fájl található.
2. Abszolút és relatív út
Ha a hivatkozásban csak a fájlnév van megadva, a böngésző feltételezi, hogy a fájl ugyanabban a mappában található, mint a hivatkozást tartalmazó dokumentum. A gyakorlatban a webhelyek több száz dokumentumot tartalmaznak, amelyeket külön mappákba helyeznek el, hogy könnyebben kezelhetők legyenek. Ha az aktuális dokumentumot tartalmazó mappán kívüli fájlra szeretne hivatkozni, meg kell adnia a fájl helyét vagy elérési útját. A HTML kétféle útvonalat támogat: abszolút és relatív.
Rizs. 1. Példa egy mappaszerkezetre 2.1. Abszolút út
Abszolút út megadja a fájl pontos helyét a számítógép (szerver) teljes mappastruktúrájában. A fájl abszolút elérési útja hozzáférést biztosít a harmadik fél forrásaiból származó fájlhoz, és a következő összetevőket tartalmazza:
1) protokoll, például http (opcionális);
2) domain ( Domain név vagy a számítógép IP-címe);
3) mappa (a mappa neve, amely a fájl elérési útját jelzi);
4) fájl (fájlnév).
Az abszolút útvonal rögzítésének két típusa van – protokollal és anélkül:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Ha a fájl a gyökérmappában található, akkor a fájl elérési útja a következő lesz:
http://site.ru/index.html
Ha nincs fájlnév, akkor a weblap betöltődik, ami alapértelmezés szerint a webszerver beállításainál be van állítva (ún. index fájl).
http://site.ru/
Az indexfájl általában egy index.html nevű dokumentum. A záró perjel jelenléte azt jelenti, hogy a cím a mappába kerül, ha nincs - közvetlenül a fájlba.
2.2. Relatív út
Relatív út a megadott dokumentum elérési útját írja le az aktuálishoz képest. Az elérési út annak a weboldalnak a helye alapján kerül meghatározásra, amelyen a hivatkozás található. A relatív hivatkozásokat az ugyanazon a webhelyen található más dokumentumokra való hivatkozáskor használjuk. Ha a böngésző nem találja a http: // protokollt a hivatkozásban, akkor ugyanazon a szerveren keresi a megadott dokumentumot.
Egy relatív útvonal a következő összetevőket tartalmazza:
1) mappa (a mappa neve, amely a fájl elérési útját jelzi);
2) fájl (fájlnév).
A relatív link elérési útja három speciális konvencióval rendelkezik:
/ a gyökérkönyvtárra mutat, és azt mondja, hogy el kell indítania az elérési utat a dokumentumok gyökérkönyvtárából, és le kell lépnie a következő mappába
A ./ az aktuális mappát jelzi
../ feljebb egy mappát (könyvtárat)
A fő különbség a relatív elérési út és az abszolút elérési út között az, hogy a relatív elérési út nem tartalmazza a gyökérmappa és a szülőmappák nevét, ami rövidebbé teszi a címet, és ha egyik tartományból a másikba lép, nem kell új abszolút címet regisztrálni. De ha egy harmadik féltől származó forrás hivatkozik például az Ön képeire relatív címekkel, akkor azok nem jelennek meg egy másik webhelyen.
3. Horgonyok
Horgonyok, vagy belső hivatkozások, hivatkozásokat hozhat létre a különböző szakaszokhoz aktuális weboldal lehetővé teszi a gyors navigálást a szakaszok között. Ez nagyon hasznosnak bizonyul, ha túl sok szöveg van az oldalon. Belső hivatkozások is létrejönnek a címke használatával azzal a különbséggel, hogy a href attribútum tartalmazza a mutató nevét - az ún horgony, nem URL-cím. A # jel mindig a mutató neve elé kerül.
Úgy gondolom, hogy egyetlen HTML oldal sem létezhet legalább egy hiperhivatkozás (vagy csak egy hivatkozás) nélkül. A hivatkozások lehetnek más oldalakra vagy webhelyekre, vagy fájlokra, képekre stb.
A hivatkozások lehetnek külső és belső, szöveges és grafikusok. Külső linkek más webhelyekre vagy objektumokra mutató hivatkozásokat, az ezekre mutató objektumokat, míg a belsőket éppen ellenkezőleg, a webhely különböző részeire mutató hivatkozásokat. A szöveges hivatkozás olyan szöveg, amelyre kattintva egy másik objektumhoz jutunk, vagy megnyitjuk, a grafikus hivatkozás pedig egy bizonyos objektum (leggyakrabban kép), amely egyben egy másik oldalra, webhelyre vagy pl. , egy kép. A HTML-ben a hivatkozások a címkével jönnek létre (az angol anchor - anchor szóból). A következőkben a linkekről fogok többet mondani.
A címkének van egy fontos és fő href attribútuma. Értéke annak az objektumnak vagy webhelynek az elérési útja, amelyre hivatkozásunk URL formájában hivatkozik. Mind a szöveg (szöveghivatkozás), mind a kép (grafikus hivatkozás) horgonyként (link törzsként) működhet. Ha grafikus hivatkozást kell létrehoznia, az IMG címkét kell használnia a címkék között horgonyként. Íme egy egyszerű példa egy hivatkozás HTML-kódjára:
link szövege (horgony)
Hadd mondjak még egy példát, hogy jobban tanuljon. A webhelyemet veszem alapul:
A böngésző html oldalán ez így fog kinézni:
A hivatkozás szövegének színét a BODY címke attribútumai határozzák meg. Egyszerűbben fogalmazva, ugyanazok a szerkesztési attribútumok vonatkoznak a hivatkozásokra, mint az oldalon lévő szövegekre. Ezt félkövérrel és dőlt betűvel lehet kiemelni, és használhat címsorokat stb.
A következő jelenik meg a html oldalon:
Nézzük meg az eredményt keret nélkül:
Főoldal 1seo
Mint észrevette, az áttérés egy másik oldalra ugyanabban az ablakban történik. Ha azt szeretné, hogy a hivatkozás egy másik ablakban vagy szülőben nyíljon meg (alapértelmezés szerint ugyanabban az ablakban van), használhatja a következőket cél attribútum A címke:
- _blank - új ablakban nyitja meg az oldalt;
- _parent - letölti a hivatkozást a szülőablakban;
- _self az alapértelmezett. Megnyit egy hivatkozást ugyanabban az ablakban.
Az oldal kezdőlapja 1seo
Van egy title attribútum is, amellyel elemleírást hozhat létre egy hivatkozáshoz:
Az oldal kezdőlapja 1seo
Egyébként ha az URL címben megadod a postafiókodat, és megadod a mailto: protokollt, akkor a linkedre kattintva megnyílik levelező program, ahol a címe már be lesz írva a Címzett mezőbe postafiók... Például a HTML kód a következő lesz:
Írj üzenetet
Megpróbáltam HTML-ben leírni azokat az alapvető dolgokat, amelyek a hivatkozás létrehozásához szükségesek. Egyébként, ha elolvastad a HTML oktatóanyag korábbi cikkeit, akkor bátran kijelenthetem, hogy már tudod a minimumot az első teljes értékű html oldalad elkészítéséhez. Az oldal létrehozása után ingyenes tárhelyre helyezheti, és megláthatja munkája gyümölcsét. Hidd el, miután ezt megteszed, még nagyobb kreatív energiád lesz. Ezután megmutatom, hogyan hozhat létre táblázatot HTML-ben. Ez is nagyon fontos információ, próbálja meg teljesen felszívni és megemészteni.
Megjelenés időpontja: 2012. május 15A hiperhivatkozásokat arra találták ki, hogy a hálózaton lévő dokumentumokat összekapcsolják egymással, és ha webhelye nem egy, hanem több oldalból áll, akkor csak hiperhivatkozások létrehozásával kapcsolhatja össze őket. Vessünk egy pillantást közvetlenül egy példára, hogyan néz ki.
Egyszerű hiperhivatkozás létrehozása
Menjen egy másik oldalra
Hivatkozás megnyitása új oldalon
Van még egy érdekes tulajdonság, amelyet hasznosnak találhat:
Menjen egy másik oldalra
A _blank értékű target attribútum új ablakban nyitja meg a hivatkozást, ezt gyakran használják, ha nem szeretné, hogy egy személy elveszítse az oldalát, és egyúttal új lapon vagy ablakban kapja meg a számára szükséges információkat.
Kép linkek
Eredmény a böngészőben:
Alapvetően itt minden egyszerű, a hiperhivatkozás címke nyitó- és zárása közé egy image tag-et teszek , de megint nem csak két képet szúrtam be, hanem az img osztályt olyanhoz rendeltem, amiben a kép körüli szegélyt nulláztam, hiszen amikor hiperhivatkozás lesz, akkor megjelenik, de nem minden böngészőben pl IE lásd, de nem a Google Chrome-ban.
Aláhúzás a linkekben
Menjen egy másik oldalra
Menjen egy másik oldalra
Az érthetőség kedvéért két lehetőséget adtam a probléma megoldására, hozzárendeltem az osztályválasztóhoz, és ennek az osztálynak a megírásával eltávolítod a felesleges aláhúzásokat bizonyos helyeken. A probléma második megoldása az aláhúzás eltávolítása a címke összes hivatkozásáról<а>, amire persze ritkán van szükség, de a tudás mégsem felesleges.
Hivatkozások a dokumentumban
Nem ritka, hogy a dokumentum elég hosszú, és az oldal elején egy kis menüt készítenek az oldal alszakaszaira mutató hivatkozásokkal. Ezeket a hivatkozásokat a dokumentumon belüli hivatkozásoknak nevezzük, és mindezt meglehetősen egyszerű megvalósítani. Kezdetben horgonyokat helyeznek el a dokumentumban, ezek címkék, a dokumentumban vannak elhelyezve, ahol a belső hivatkozásra kattintva mozogni kell, általában ezek szakaszfejlécek, a címke így néz ki:
És az utolsó dolog, amit a hiperhivatkozásokról tudnunk kell, az e-mail fiókokra mutató hivatkozások, megvalósítása nagyon egyszerű, csak a href attribútumhoz add hozzá a mailto: űrlapot és a postafiók címét:
Levelem< /a>
Ezzel véget is ért a "Hiperhivatkozások létrehozása html-ben" lecke, amint azt észrevette, itt nem nélkülöztük a CSS-t, általában az anyag meglehetősen egyszerű, azt hiszem, minden egyszerű és világos lesz az Ön számára, írjon kérdéseket.
Megjelenés dátuma: 2014-04-23
Hogyan hozzunk létre hivatkozásokat HTML dokumentumban
(További példákat az oldal alján talál)
HTML-hiperhivatkozások (linkek)
Címke kétféleképpen használható:
- Hivatkozás másik dokumentumra - a href attribútum használatával
- Könyvjelző bevitele egy dokumentumon belül – a name attribútum használatával
HTML szintaxis hivatkozások
Példa
| Látogassa meg a webhelyet |
ezt így fogja megjeleníteni a böngésző:
HTML hivatkozások – Célattribútum
A target (destination) attribútum határozza meg, hogy hol kell megnyitni a hivatkozott dokumentumot (azt, amelyre a hivatkozás hivatkozik).
Az alábbi példa egy új böngészőablakban vagy lapon nyitja meg a hivatkozott dokumentumot:
HTML hivatkozások – névattribútum
A name attribútum egy könyvjelző ("horgony" / "horgony") létrehozására szolgál egy HTML-dokumentumban.
Megjegyzés:
A készülő HTML5 szabvány az id attribútum használatát javasolja a name attribútum helyett a hivatkozás nevének megadásához.
Az id attribútum használata valójában minden modern böngészőben működik HTML4-ben.
A könyvjelzők semmilyen különleges módon nem jelennek meg. Az olvasó számára nem láthatók.
Megjegyzés: Mindig adjon hozzá egy perjelet az alkönyvtár hivatkozásokhoz. Ha a következőhöz hasonló hivatkozást hoz létre: href = "http: // site / html", akkor a rendszer két kérést generál a szerver felé, először a szerver egy perjelet ír a címhez, majd létrehoz egy új kérést: href = "http : // webhely / html /" ...
Tanács: A nevesített hivatkozásokat gyakran használják "tartalomjegyzék" létrehozására egy nagy dokumentum elején. A dokumentumon belül minden fejezethez hozzá van rendelve egy elnevezett hivatkozás, és az egyes elnevezett horgonyokhoz mutató hivatkozások a dokumentum elejére kerülnek beszúrásra.
Tanács: Ha a böngésző nem találja a megadott elnevezett hivatkozást, akkor a dokumentum elejére lép. Nem történik hiba.
Tekintsük a hiperhivatkozások használatát az 1. példában.
Specifikáció megtekintése HTML 5 itt lehet.
Az oldal új ablakban nyílik meg.
Itt pedig letöltheti az elemek és attribútumok táblázatait.
1. példa. Hiperhivatkozások használata
Hiperhivatkozások használata horgonyok létrehozásához az oldalon
Az "a" elem hiperhivatkozásként is használható az oldalon belüli navigációhoz. Ehhez a dokumentum megfelelő helyén létre kell hozni horgony(angolból. horgony), azaz könyvjelzőt, és adja meg célként a hiperhivatkozásban. A horgony egy üres "a" elem használatával jön létre, amelynek attribútuma a nyitó címkéjében van megadva. A szükséges jelölőelemet horgonyként is használhatja, amelyhez a jövőben egy belső hiperhivatkozás vezet. Ehhez csak egy attribútumot kell megadnia benne. Továbbá magának a hiperhivatkozásnak a href attribútumában a "#" font szimbólum és az anchor attribútum értéke van megadva értékként. A világosabbá tétel érdekében nézzünk meg mindent a 2. példában.
Én vagyok az első bekezdés.
Attribútumtáblázat megtekintése HTML 5 tud
a hivatalos weboldalon itt.
Az oldal új ablakban nyílik meg, és megnyílik
görgetett egy attribútumokat tartalmazó táblázathoz.
Itt ugorhat az első bekezdésre.
2. példa. Belső hiperhivatkozások használata
Figyelje meg a horgony jelenlétét a példa második bekezdésében a href attribútum értékeként megadott abszolút címben. Ilyen hiperhivatkozás használatakor a böngésző először a megadott címre megy, majd görgeti az oldalt a megadott horgony helyére. Ha nincs horgony az oldalon, akkor az oldal az elejétől fogva megjelenik.
Relatív hiperhivatkozások és relatív címzés kialakítása
A bekezdés végén vegye figyelembe a felépítés elvét relatív címek... Tegyük fel, hogy a hiperhivatkozásunk egy dokumentumban található, amely a helyi szerveren található a címen http:// localhost / site / doc_1 / doc_2 / ... / doc_n / web_page.html, ahol a doc_n az n-edik beágyazási szintű mappa. Ebben az esetben automatikusan a doc_n mappát veszik alapul, amelyben a hiperhivatkozással ellátott dokumentumunk található, amelyre minden címzés épül. Így:
- Ha azt szeretné, hogy a hivatkozás a new_page.html céldokumentumra mutasson, amely ugyanabban a doc_n mappában található, mint az eredeti hiperhivatkozású dokumentumunk, akkor csak a céldokumentum nevét kell beállítania a link href attribútumának értékeként: href = "új_oldal.html".
- A mappában található new_page.html céldokumentumhoz navigáláshoz http: // localhost / site / doc_1 / doc_2 / ... / doc_n / doc_n_1 / ... doc_n_k /, a hivatkozás href attribútumának értéke csak a doc_n-be beágyazott mappákat tartalmazza, és természetesen a céldokumentum nevét: href = "doc_n_1 / ... doc_n_k / new_page.html"... Így azt mondjuk a böngészőnek, hogy menjen a doc_n_1 mappába, amely a doc_n mappában található azzal a forrásdokumentummal, amelyben a hiperhivatkozás regisztrálva van, majd a doc_n_2 mappába, és így tovább, amíg a doc_n_k mappába nem kerül. ott található céldokumentum, amelyet meg kell nyitni és meg kell nyitni.
- Az eredetinél egy szinttel magasabb mappába való bejutáshoz a „../” szimbólumok speciális kombinációját használjuk. Ha n szinttel feljebb szeretne lépni, írja be a "../" kombinációt n-szer egymás után. A mi esetünkben tehát a céldokumentumra mutató hivatkozást kell követni http:// localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_page.html a link href attribútuma "../../../new_page.html" kell, hogy legyen. Így tájékoztatjuk a böngészőt, hogy menjen fel a doc_n-1 mappába, majd a doc_n-2 és doc_n-3 mappába, majd nyissa meg az ott található new_page.html céldokumentumot.
- Ha nem csak több szintre kell felmenni, hanem egy mappába (vagy több almappába) kell menni, hogy hozzáférjen a céldokumentumhoz, akkor a hivatkozás href attribútumának értékében először írja be a szükséges számú emelési szintet a ". ./" szimbólumok segítségével, majd fűzze hozzá a kapott mappából a céldokumentum elérési útját. Például, ha a céldokumentum a new_doc mappában található, és a cím elérési útja így néz ki http: // localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_doc / new_page.html, akkor a hivatkozás href attribútuma kell, hogy legyen "../../../new_doc/new_page.html"... Azok. azt mondjuk a böngészőnek, hogy menjen három szinttel feljebb a hivatkozást tartalmazó dokumentumot tartalmazó doc_n forrás mappához képest, majd lépjen a new_doc mappába, és nyissa meg a céldokumentumot new_page.html
Példaként letölthet egy oktató miniwebhelyet, amely teljes egészében relatív címzésre épül. Böngészés után kísérletezzen a hivatkozások, mappák és oldalak módosításával és létrehozásával.
Relatív hiperhivatkozások nagyon kényelmes offline böngészőalkalmazások, például kézikönyvek fejlesztésekor. Ne feledje azonban, hogy amikor áthelyez egy dokumentumot az aktuális mappából egy másikba, a benne lévő összes relatív hivatkozás leáll. Ezért át kell írni őket. Ha a relatív hivatkozások olyan fájlokra mutatnak, amelyek az aktuális mappában vagy almappákban is találhatók, akkor a mappa másik helyre való áthelyezése után a dokumentumban lévő összes hivatkozás működni fog.
Ha a relatív elérési utat a webhely gyökerétől kell kezdenie, adjon hozzá egy perjelet "/" az elérési út elejére. Például a "link" itthon"olyan dokumentumot jelöl, amely a webhely gyökérmappájában található (és nem az aktuálisban!). Vegye figyelembe, hogy a webhely gyökérkönyvtárából való számlálás csak valódi webszerver felügyelete alatt működik. Helyi szerveren pl. Például Xampp, akkor a gyökérmappa nevétől kell kezdenie a számolást.
