Egy másik oldalra mutató html hiperhivatkozás. Hogyan lehet hiperhivatkozást beszúrni a HTML-be? Hiperhivatkozások létrehozása és használata HTML-ben
Olvassa el is
A „Hiperhivatkozások a HTML-ben” a HTML oktatóanyag ötödik leckéje. Ez a lecke a hipertext hivatkozások használatára összpontosít. A hiperszöveges hivatkozások bármelyiken alapulnak webes dokumentum, tehát minden webmesternek képesnek kell lennie a hivatkozásokkal dolgozni.
A hipertext hivatkozások használatának szabályai.
Hiperhivatkozások HTML-ben különböző dokumentumok összekapcsolásához szükségesek, mind ugyanazon az oldalon, mind a teljes Interneten belül. Hipertext hivatkozások (hiperhivatkozások) létrehozásához leírót használnak :
A href attribútum annak a dokumentumnak a címét adja át, amelyre a hivatkozás mutat.
Sokféle objektum működhet hiperhivatkozásként, beleértve a képeket is:
– metacímkék HTML-ben.
Nemcsak a különböző dokumentumokra hivatkozhat, hanem ezeknek a dokumentumoknak különböző részeire is. Ehhez a dokumentum bizonyos részében el kell helyezni az úgynevezett horgonyt - az űrlap konstrukcióját, majd hivatkozni kell rá a következő kód megadásával a href attribútumban:
href="http://www.webhely.#horgonynév"
Ha a böngésző nem találja a megadott nevű horgonyt a hívott oldalon, akkor az átmenet egyszerűen a dokumentum elejére megy, és nem történik hiba.
A hipertext hivatkozások számos protokollon keresztül megvalósíthatók. A leggyakrabban használtak az alábbiak:
- HTTP– protokoll – szabványos protokoll hipertext hivatkozásokhoz, információblokkok egyszeri továbbítására.
- FTP– protokoll – univerzális fájlátviteli protokoll. Engedélyt igényel.
- MAILTO– szabványos levélátviteli protokoll.
Hiperhivatkozások beállítása HTML-ben.
A címke célattribútuma meghatározza, hogyan nyíljon meg egy új oldal, és a következő értékeket veszi fel:
- _self - a dokumentum az aktuális ablakban nyílik meg
- _parent - a keretben - az aktuális keret szülője
- _top - a teljes keretszerkezet főablakában
- _blank - a dokumentum új ablakban nyílik meg
Például egy névjegyeket tartalmazó oldal új ablakban való megnyitásához a következő kódot kell használnia:
- Link – meghatározza a nem látogatott hivatkozások megjelenését.
- Alink – meghatározza a már meglátogatott hivatkozások megjelenését.
- Vlink - meghatározza a kiválasztott hivatkozások megjelenését.
A következő leckében a HTML grafikával való munkáról lesz szó: megtanuljuk, hogyan lehet képeket beszúrni, testre szabni kinézet stb.
Sziasztok kedves látogatók!
Ebben a cikkben megmutatom, hogyan adhat hozzá hivatkozást az oldalra egyszerű hiperhivatkozás, kép, valamint egy gomb formájában, amellyel beállíthatja saját designját. CSS használatával stílusok. Mind a 3 opciót nagyon gyakran használják, és elég jó hatást fejtenek ki a látogatók által.
Kezdjük a legegyszerűbbel, és folytassuk a bonyolultabbakkal.
Normál hivatkozás és hiperhivatkozás
http://site/poleznoe/kak-sdelat-ssylku-na-sait.html
http : //site/poleznoe/kak-sdelat-ssylku-na-sait.html |
Ennek az opciónak van helye, de van egy jelentős hátránya, ha egy ilyen hivatkozás hatékonyságáról beszélünk. Nem kattintható, vagyis egy egyszerű egérkattintással nem lehet rálépni. Ezt a lehetőséget a látogatók meglehetősen nehezen veszik észre.
Egy másik dolog a hiperhivatkozás, amely kattintásra átirányít egy másik dokumentumra az interneten, mind belső (ugyanazon a webhelyen belül) és külső (egy másik webhelyen) lévő dokumentumra. Az alábbiakban látható egy példa egy ilyen hivatkozásra. Próbálj meg a linkre kattintani.
Az erőforrásom főoldalának új lapon kell megnyílnia. Ennek az opciónak a megvalósításához vagy a motorja eszközeit kell használnia, vagy be kell írnia a következő sort a HTML-kódba.
Kattints ide
A link egy egyszerű címkével jön létre , amelyen belül van maga a cím, ahová a felhasználót át kell irányítani, valamint a hivatkozás horgonyja (a fenti példában a horgony a "kattints ide" kifejezés), amely megadja a link szövegét, amely elmagyarázza, hogy mit kell megkapja, ha erre a címre megy.
Ha van egy egyszerű HTML-ben készült weboldalad, akkor írj egy ilyen kódot az oldalszerkesztőbe, módosítsd a címemet a sajátodra, és add meg a horgonyt. Így fog kinézni.
A linkcímke belsejében van egy attribútum is az oldal új lapon történő megnyitásához.
target="_blank" |
Ez is nagyon fontos, ezért célszerű nem eldobni a látogatót az erőforrástól, hanem elhagyni. Ezzel az attribútummal biztosíthatja, hogy egy oldalon sok hivatkozásra kattintó látogató ne hagyja el az aktuálisat, hanem egyidejűleg sok más oldalt is megnyíljon. Ez fontos, ha webhelyet reklámoz.
A linkhez hozzáadhatja a title attribútumot, amely egy title címke, és tudatja a keresőmotorokkal, hogy hová vezet a link. Ez a címke akkor is megjelenik (ha regisztrálva van), amikor az egérmutatót a hivatkozásra helyezzük egy eszköztipp formájában.
Célszerű egy title címkét hozzáadni, hogy a látogatók lássák ezt az eszközleírást az egérrel, és megértsék, merre tartanak. Ez egyszerűen, a nyitó címkén belül történik , mint az alábbi példában.
Ha olyan motort használ, mint például a WordPress, a webhelyre mutató hivatkozás hozzáadása nagyon egyszerű HTML módban történő szerkesztés nélkül. A felvételszerkesztőnek van egy speciális ikonja egy kapcsolati ikonnal.
A képen bemutattam a szöveg és egy másik oldal közötti hivatkozás hozzáadásának teljes folyamatát.
- Először válassza ki a hivatkozást létrehozni kívánt kifejezést;
- Kattintson a link hozzáadása ikonra.
- Beállítjuk a hivatkozás paramétereit (annak az oldalnak a címét, ahová át akarjuk vinni a felhasználót, valamint a hivatkozás címét, vagyis a horgony, ha szükséges).
A hivatkozás címe elhagyható, mivel az lesz az első szakaszban kiválasztott szöveg. A képen megmutattam, hogy linkeket adtam hozzá a webhely meglévő oldalairól. Ezt megteheti, majd az URL-ek listájában az egyik bejegyzésre kattintva a cím automatikusan beírásra kerül.
Az URL külső webhelyen is megadható. Ha ez a helyzet, akkor adja meg az oldal teljes (abszolút) címét. Ha új lapon szeretne megnyitni egy oldalt, nem kell kézzel írni az attribútumot. A motor ezt a lehetőséget egyetlen jelölőnégyzet segítségével biztosítja (lásd a fenti képet).
Kicsit feljebb mondtam az abszolút címet. Ez azt jelenti, hogy annak az oldalnak a teljes címe, amelyre át szeretne irányítani, a hivatkozáson belülre kerül, függetlenül attól, hogy az a mi forrásunk, vagy más.
Van relatív cím is, amikor nem szükséges a teljes címet beírni. Elég csak regisztrálni az elérési utat a webhely valamely könyvtárához vagy oldalához, a domain név megadása nélkül. Az ilyen hivatkozások csak az ugyanazon az erőforráson belüli oldalra vonatkoznak. Ilyen módon nem hivatkozhat külső projektre.
Ha mélyebben szeretne belemenni a relatív címek létrehozásának folyamatába, akkor nagyon ajánlom olvassa el ezt a cikket egy másik erőforráson. Ott nagyon klassz minden.
Link kép
A kép formájú hivatkozásokat is széles körben használják, bár azokat csak a rendeltetésükre szabad használni. Ha egyszerű linkek vagyunk az oldalunkon belül más oldalakra, akkor jobb, ha nem készítjük azokat képekkel, mert nem mindig egyértelmű, hogy a képre kell kattintani, hogy egy oldalra juthasson.
Ez akkor hasznos, ha valakit szeretne reklámozni, például valakinek a videó tanfolyamát. Ebben az esetben egy normál hiperhivatkozást adsz meg, amelyet azonnal egy link-image követ. Ebben az esetben egyértelműbb lesz, hogy a kép a tanfolyam weboldalára vezet, ahol megvásárolható.
Ha a html módot vesszük, akkor a linkstruktúra felépítésének elve teljesen megegyezik az összes attribútummal együtt. Az egyetlen különbség a hivatkozási horgony, amely úgy néz ki, mint magának a képnek a kódja. Az előző esetben sima szöveg volt.
A gyakorlatban ez így fog kinézni.
Amint látható, a nyitó és záró linkcímkéken belül egy képkód található, aminek szintén megvannak a maga sajátosságai. Ugyanazt a címcímkét kell beleírnia, meg kell adnia a kép elérési útját a tárhelyen vagy egy másik erőforráson. Érdemes megadni a kép méreteit is (szélesség - szélesség, magasság - magasság). És feltétlenül adja meg az alt attribútumot, amely a kép leírásaként szolgál. Ha mindent leírsz, akkor a képoptimalizálás szinten lesz.
Így néz ki html módban. A kódot 3 részre osztottam, hogy érthetőbb legyen a linkszerkezet (a kép kattintható).
Itt csak a horgonyként használt képkód helyes előírása a nehézség.
Link gomb CSS-stílusokkal
Ha valamit másképp szeretne csinálni, akkor ez a lehetőség is a megfelelő hely. Ezenkívül lehetővé teszi a stílusok megváltoztatását, így ha a gomb fölé viszi az egeret, maga a gomb és a benne lévő felirat színe is megváltozik. Ha képet készítesz, akkor ezt nem mindig lehet megvalósítani. Stílussal minden lehetséges.
Szintén nagyon jó előnye, hogy a gombot szigorúan középre tudjuk helyezni, és csak a gomb területén lesz kattintható. Ha képet készítünk, akkor középre helyezve a kép körüli tartalmi rész teljes területe szélességben kattintható lesz. Néha egy ilyen hiba véletlen kattintáshoz vezet a képre, és őszintén szólva bosszantó.
Például létrehoztam egy ilyen egyszerű gombot, amely az oldal főoldalára vezet. Ellenőrizheti, hogy működik-e.
Ha megnézi a gomb forráskódját, akkor minden nagyon egyszerű. Az egyetlen különbség a normál hiperhivatkozástól az azonosító jelenléte, amely a nyitó címkébe kerül és ehhez viszont a style.css fájlba írják a stílusokat.
Itt van magának a gombnak a felépítése.
Ezt azonnal látjuk a link tag megnyitása után id="button" van megadva, amelyhez saját tervezési stílusok vannak hozzárendelve. A szerkezet többi része megegyezik a hiperhivatkozással.
Az elv egyértelmű, ezért megadom a stílusokat, amelyeket ehhez a linkgombhoz adtam.
/* gombstílusok normál módban */ #button ( kijelző: blokk; szélesség: 550 képpont; /* gomb szélessége */ magasság: 60 képpont; /* magasság */ háttérszín: #ff4343; /* háttérszín */ szöveg - árnyék: 1px 1px #800909; /* szöveg árnyéka */ szín: #fff; /* szöveg színe */ szegély stílusa: tömör; /* gomb szegélyvonal típusa */ szegély szélessége: 1px; /* vastagság gombszegély (keret) vonalak */ szegélyszín: #db3a3a; /* gombszegély (keret) vonalszín */ betűméret: 18 képpont; /* szövegméret */ vonalmagasság: 60 képpont; /* szöveg lineáris magassága * / betűtípus -súly: normál; /* szöveg súlya */ font-family: arial; /* betűtípus */ text-align: center; /* szövegigazítás */ szöveg-dekoráció: nincs; /* szöveg aláhúzás */ margó: 40 képpont auto; /* a gomb kitöltése az oldal egyéb elemei közül */ text-transform: nagybetű; /*, hogy minden betű nagybetű legyen. Ha nem, távolítsa el a sort */ ) /* gombstílusok az egérmutatón */ # gomb: lebeg (háttérszín: #f23333; betűméret: 19px; )
Sziasztok a blogoldal kedves olvasói. Ma arról fogunk beszélni hogyan lehet hiperhivatkozásokat létrehozni html-ben, tanulja meg a címke használatát és annak href és target attribútumait, tanuljuk meg, hogyan lehet egy képet hivatkozássá tenni.
A hiperhivatkozások a weboldal kulcselemei. Különféle html-oldalakat kapcsolnak össze egy teljes webhelyté. A hivatkozások általában aláhúzott szövegként jelennek meg, ha fölé viszi az egérmutatót, az egérmutató mutatóujjává válik. Ezenkívül a hiperhivatkozás grafikus kép vagy annak töredéke is lehet. Amikor egy hivatkozásra kattint, a böngésző betölti a hivatkozás attribútumaiban megadott weboldalt. A hiperhivatkozások lehetővé teszik, hogy webhelye belső oldalaira, valamint az internet bármely más forrására hivatkozzon.
Szöveges hiperhivatkozások létrehozása
Kezdjük egyszerűen, és nézzük meg a rendszeres létrehozást szöveg linkeket. Szöveges hiperhivatkozás létrehozásához elegendő minden olyan szövegrészt mellékelni, amelybe hivatkozásként kell válnia pár címke . És be href attribútum Ehhez a címkéhez meg kell adnia a cél weboldal címét az interneten:
15. oldal
Ez a html-kód egy hivatkozást tartalmazó bekezdést hoz létre. A hivatkozás a page15.html weboldalra mutat, amely a www.site.ru webhely gyökérmappájában található katalógusmappában található.
oldalon 15
Ha az oldal nem használja css stílusokés nem alkalmaznak további attribútumokat, akkor az oldalon lévő hiperhivatkozások alapértelmezés szerint a következők szerint jelennek meg:
- a normál hivatkozások kék színnel jelennek meg;
- a meglátogatott hivatkozások lilával vannak kiemelve;
- aktív hiperhivatkozás (amire kattintottak Ebben a pillanatban) piros színnel jelenik meg, de mivel a hivatkozásra kattintás és az új dokumentum betöltésének megkezdése között meglehetősen rövid idő telik el, a hivatkozás ilyen állapota nagyon rövid életű;
- A link szövege alá van húzva.
Internet címek
A teljes cím tartalmazza a webszerver internetcímét és a lekérendő fájl elérési útját. Például:
http://www.site.ru/catalog/page15.html
Itt a www.site.ru a webszerver címe, a /catalog/page15.html pedig a fájl elérési útja ezen a szerveren. Általában a teljes internetcímeket általában csak akkor használják, ha egy másik webhelyen található erőforrásokra mutató hiperhivatkozást kell létrehozni.
Ha olyan hivatkozásokat hoz létre, amelyek olyan fájlokra mutatnak, amelyek ugyanannak a webhelynek a részét képezik, mint az aktuális weboldal, a legjobb, ha rövidített internetcímeket használ. A rövidített cím csak a kiszolgálón lévő fájl elérési útját tartalmazza, mert A webszerver címét már ismeri a böngésző.
A rövidített internetcímek abszolútÉs relatív. Az abszolút cím megadja a célfájl elérési útját a webhely gyökérmappájához viszonyítva. Egy ilyen cím / (perjel) karakterrel kezdődik, ami azt jelenti gyökérkönyvtár. Például a "/page15.html" cím a page15.html fájlra mutat, amely a webhely gyökérmappájában van tárolva. Vagy a "/katalógus/oldal.html" cím a page.html fájlra mutat, amely a katalógus mappájában van elhelyezve, a webhely gyökérmappájába ágyazva.
A relatív cím egy fájl elérési útja az aktuális weboldal fájljához képest. A relatív címek nem tartalmaznak perjelet. Nézzünk néhány példát.
Például az "oldal.html" cím egy olyan fájlra mutat, amely ugyanabban a mappában van, mint az aktuális weboldal fájlja. A "katalógus/oldal.html" cím pedig megnyitja a katalógus mappájában tárolt page.html fájlt, amely abba a mappába van beágyazva, ahol az aktuális oldal található. A cím elején található két pont segítségével megadhatja az előző beágyazási szint mappáit. Így például a ".../oldal.html" cím az oldal.html lapra mutat, amely abban a mappában van tárolva, amelybe az aktuális weboldalt tartalmazó mappa be van ágyazva.
Link a levélhez
A html nyelv használatával létrehozhat mail hiperhivatkozások, amelyre kattintva elindul a program levelező kliens. Cím megadásakor egy attribútumban href tegye az e-mail elé "mailto:", azaz valami ilyesmi: href="mailto: [e-mail védett]". És előtte a vastagbél után postázási cím ne legyenek szóközök.
levelet írni
Hogyan lehet egy képet hivatkozássá tenni
Itt fejezem be a hiperhivatkozások létrehozásáról szóló szót, csak a főbb pontokra emlékeztetem:
- Hivatkozások létrehozására szolgál pár címke kötelező href attribútummal, melynek értéke tartalmazza a céloldal címét: Szöveg;
- Amikor a href attribútumban levélre mutató hivatkozást hoz létre, a mailto cím elé kell tennie a „mailto:” kifejezést: írjon levelet;
- Ha létre kell hozni link kép, majd csak helyezze be az img címkét a címkébe :
.
Utasítás
A hiperszöveg hivatkozások célja, hogy szöveget, képeket vagy más oldalelemeket más hipertext dokumentumokhoz kapcsoljanak. A webhely oldalának minden elemét, beleértve a hivatkozásokat is, a böngésző hozza létre, amely fogadja részletes utasításokat a szerver által neki küldött oldalkódból. Ez a kód ehhez HTML nyelv(HyperText Markup Language – „hiperszöveg jelölőnyelv”) olyan „címkékből” áll, amelyek leírják a weboldal összes elemének típusát, megjelenését és helyét. Szabványos hiperhivatkozást a böngésző akkor hoz létre, ha az oldalkódban például a következő címkével találkozik: Szöveg linkHere - a nyitó hivatkozás címke, - a záró. A nyitó címke tartalmazhat További információ- "tulajdonságok". Ebben az egyszerű hivatkozásban a href attribútum annak az oldalnak vagy dokumentumnak a címét tartalmazza, amelyet a rendszer kérni fog, ha a látogató a hivatkozásra kattint. Néha nem szükséges megadni teljes cím- ha a kért dokumentum a szerveren ugyanabban a mappában (vagy almappában) található, akkor elég csak a nevét vagy az almappa elérési útját megadni. Ezeket "relatívnak" nevezzük, például így kell lenniük: Szöveg hivatkozás Ha erre a hivatkozásra kattint, a moreText.html dokumentum ugyanabból a mappából töltődik be. Az abszolút hivatkozási címek pedig a protokollal kezdődnek, például: Szöveges hivatkozás Itt a "http" (HyperText Transfer Protocol – "hiperszöveg átviteli protokoll") a dokumentum szokásos címe a weben. És ha megadja a "mailto" protokollt, akkor a hiperhivatkozás elindítja az Önt levelező program, ahelyett, hogy a következő címre menne: email-linkAz FTP-kiszolgálón lévő fájlokra mutató hivatkozások az FTP protokollt (File Transfer Protocol – „fájlátviteli protokoll”) jelzik: Link az archívumhoz
Egy másik hiperhivatkozás-attribútum, amely meghatározza, hogy melyik ablak töltse be ezt új dokumentumot, mint a "célpont". Ha a href attribútumban bármilyen helyes címet adunk meg, akkor a targetnek csak négy értéke lehet: _self - az oldalt ugyanabba az ablakba vagy keretbe kell betölteni. A "keretek" egy ablak több részre osztott részére utalnak; _parent - ha maga az aktuális oldal egy másik ablakból (vagy keretből) lett betöltve, akkor van egy "szülő" ablaka. A _parent érték pedig megköveteli, hogy a hivatkozás által mutatott oldal ebbe a szülőablakba legyen betöltve; _top - az új oldalt ugyanabba az ablakba kell betölteni. Ha ezt az ablakot keretekre osztják, akkor azok betöltéskor megsemmisülnek, és új oldal ez lesz az egyetlen keret ebben az ablakban; _blank - egy külön ablak nyílik meg a hivatkozás követéséhez; Például:
A link új ablakban nyílik meg
Lehetőség van hiperhivatkozás létrehozására, amely nem egy másik oldalra, hanem ugyanannak a dokumentumnak egy adott szakaszára mutat. Egy ilyen „cél” jelzésére a dokumentum html kódjában egy horgonyhivatkozást használunk: A dokumentumot ehhez a horgonyhoz görgető hivatkozás pedig így néz ki: Hivatkozás az oldal első horgonyáhozTermészetesen a html kódban egy másik dokumentumban kell lennie egy ilyen horgonyhivatkozásnak name="Anchor1" attribútummal.
A hiperhivatkozás nem csak szöveg lehet, hanem más oldalelemek is - például képek. A képet rajzoló legegyszerűbb címke így néz ki: 
És ahhoz, hogy a kép hiperhivatkozássá váljon, a link nyitó és záró címkéje közé kell zárni:
A hiperhivatkozás hivatkozhat ugyanazon a webhelyen lévő oldalakra, vagy az internet bármely oldalára mutathat. Amikor mások oldalaira mutató hivatkozást készít, mindig az oldal abszolút címét (http://www.site.com/page.html) kell használnia. Ha egy webhelyen belül egy oldalra mutató hivatkozás jön létre, célszerű relatív URL-t használni (oldal.html, katalógus/oldal.html). Grafikus hiperhivatkozás létrehozásakor ne feledje, hogy a grafika nem biztos, hogy néhány felhasználó számára elérhető, ezért ügyeljen arra, hogy megfelelő szöveges elemeket tartalmazzon.
Példa:
Hiperhivatkozás a html oldalon belül
Néha szükség van hiperhivatkozás létrehozására ugyanazon az oldalon. Például ezen az oldalon ezek a lecke elején található hiperhivatkozások, amelyek lehetővé teszik, hogy egy adott kérdésre lépjenek, és az oldal alján találhatók, amelyek lehetővé teszik az oldal tetejére ugrást.
Példa:
E-mail hiperhivatkozás
Példa:
|
HTML kód: [e-mail védett] |
Megjelenítés a böngészőben: |
Html oldalak megnyitása új ablakban
A TARGET attribútum használatával új böngészőablakban töltheti be az oldalt. Ez az attribútum az ablak nevének beállítására szolgál. Az ablak nevét szolgáltatási célokra használjuk. Egy oldal új ablakban való megnyitásához használja a _blank állandót.
Példa:
Hiperhivatkozás szövegének színe
A LINK, ALINK, VLINK attribútumok állítják be a hiperhivatkozások betűszínét.
A LINK attribútum a felhasználó által még nem látogatott hiperhivatkozások kiemelésére szolgál.
Hiperhivatkozás rendelés
Egyes böngészők támogathatják a hiperhivatkozások Tab billentyűvel történő követését. Ebben az esetben az alapértelmezett böngésző a hiperhivatkozásokat abban a sorrendben emeli ki, ahogyan azok az oldal szövegében megjelennek. Az átmenet sorrendjét a címke TABINDEX attribútumával módosíthatja . Ha egy hiperhivatkozást szeretne felvenni a listába, amely leírja az új navigációs sorrendet, állítsa a TABINDEX attribútumot valamilyen pozitív egészre az 1 és 32767 közötti tartományban. A hiperhivatkozás listából való kizárásához állítsa az attribútumot bármilyen negatív számra. Amikor a felhasználó megnyomja a TAB billentyűt, a kurzor a legalacsonyabb pozitív indexértékű hiperhivatkozásra lép. Ha több hiperhivatkozáshoz ugyanaz az indexérték van hozzárendelve, akkor az elsőként azt választjuk ki, amelyik magasabban van az oldal szövegében.
Megjegyzendő, hogy a TABINDEX attribútum más objektumok, például grafikák kiválasztására is használható.