Hogyan lehet hiperhivatkozást beszúrni a HTML-be? Hiperhivatkozások létrehozása és használata HTML-ben. Hogyan lehet egy képet hivatkozássá tenni a HTML-ben, a Vkontakte-ban, a fórumon és a CSS-képet hiperhivatkozásként használni
Ebben a leckében arról fogunk beszélni, hogyan lehet hivatkozást létrehozni HTML-ben. A hivatkozásokat nagyon gyakran használják a webhelyeken; ezek lehetővé teszik, hogy a webhely egyik oldaláról a másikra léphessen. A hivatkozások sajátossága, hogy nem csak weboldalra vezethetnek, hanem fájlokhoz, képekhez stb.
A hivatkozások lehetnek belsőek és külsők. A belső hivatkozások egy webhelyen belüli oldalakra és fájlokra vezetnek. A külső hivatkozások harmadik felek webhelyeire, dokumentumokra és fájlokra vezetnek. Ugyanakkor az ilyen típusú hivatkozások szinte azonosak.
Hogyan készítsünk hivatkozást HTML-ben, példák1. HREF – felelős azért, hogy a linknek hova kell vezetnie. A szabványos hivatkozás a következőképpen van megadva: Hivatkozás szövege.
2. TARGET - felelős azért, hogy a dokumentum melyik ablakban nyílik meg. Alapértelmezett új dokumentumot az aktuális böngészőablakban nyílik meg. A „target” attribútum lehetővé teszi egy hivatkozás megnyitását egy új böngészőablakban. Ennek az attribútumnak a következő paraméterei vannak:
- _blank - új ablakban tölti be az oldalt;
- _self - betölti az oldalt az aktuális ablakban;
- _parent - betölti az oldalt a szülő keretbe;
- _top – törli az összes keretet, és új ablakban tölti be az oldalt.
3. NÉV – az oldalon belüli meghatározott területre való navigálásra szolgál. A hash szimbólum után a kulcsszó (könyvjelző vagy címke) idézőjelben jelenik meg. A címke eléréséhez használja azt a hivatkozást, amelybe ez a címke van írva.
Példa a külső hivatkozásraUgrás a weboldalra
Nyissa meg az Ingyenes WordPress leckék oldalt4. példa: Képek hivatkozásként.
Példakép referenciaként
Ugrás a szövegre
Az oldal szövege...
Ebben a példában az oldal a „név” attribútum használatával „lista” címkével van ellátva. A címkére való hivatkozással az oldal egy meghatározott területére jut.
Fájl letöltése Írjon leveletA hivatkozások színét a „body” címkében paraméterként megadott attribútumokkal állíthatja be. Vegye figyelembe ezeket az attribútumokat:
- link - nem látogatott hivatkozás, alapértelmezés szerint kék színnel jelenik meg;
- alink - aktív link, alapértelmezés szerint piros;
- vlink – meglátogatott link, alapértelmezés szerint lila.
Így kitaláltuk azt az elvet, amely alapján a hivatkozások létrejönnek HTML-ben. A hivatkozásoknak adott stílusokat lehet adni. A leckében a linket követve láthatsz róla.
Azt hiszem, már érted, mire gondolok majd beszélünk ebben a fejezetben.. és tudod mi az a link, ha nem, akkor kattints ide.. A hivatkozásoknak többféle típusa van, valamint a rájuk kattintás „mechanizmusa”. Ebben a fejezetben megpróbálok részletesen beszélni a linkek regisztrálásának módjáról, valamint a velük való munka bonyolultságáról.
Lírai kitérő:
Egyszer a hadseregben odajött hozzám a vezérkari főnök, és parancsot adott, idézem:
Hozd ide azt a dokumentumot, bár nem tudom hol van vagy mi az!! Miért állsz? Fussunk!! Elkéstem!!!
Tehát mit értek ez alatt, hogy a böngésző ne essen kábulatba, mint akkoriban, tudnia kell: a dokumentum pontos nevét, a dokumentum elérési útját és a behozatali helyet, vagy inkább hol kell kinyitni.
Tovább Ebben a pillanatban jegyzettömb segítségével egyetlen HTML dokumentumot készítettünk, nekem index.html néven van meg (miért választottál ilyen furcsa nevet index.html és miért van rá szükség, lásd) nem tudom melyiket, te jöttél saját névvel, de azt hiszem, hogy ezt használtad, emlékszel és tudod, hol van, kivéve persze, ha Ön a személyzeti főnököm :).. Ebben a dokumentumban megpróbálunk linket létrehozni egy másik dokumentumra, amely még nem rendelkezett .. Tehát mielőtt linkelné, létre kell hoznia, mivel Ön már tudja, hogyan kell ezt csinálni.
Most már tudom, hogy van két html dokumentuma az index.html és a primer.html, és most már megvan a minimális készlet a továbbképzéshez.
Szöveges hivatkozások.Találkozzunk címkével (horgonyból) szöveget vagy képet csatolhat bele, amely bizonyos dokumentumok hivatkozásává válik. Címke attribútum A href megadja annak a dokumentumnak a nevét és elérési útját, amelyre a hivatkozás mutat.
Mindez együtt így van leírva:
Itt vannak a képeim!!Amint valószínűleg megértette, a primer.html a második html-dokumentumunk neve, és a felirat: „Itt vannak a képeim!!” ez egy szövegrész az index.html fájlból.
A képek analógiájára a címke A megnyitott dokumentum hivatkozási útvonala ugyanazokkal a módszerekkel van megadva:
Itt vannak a képeim!! - Ez azt jelenti, hogy a primer.html fájl egy szinttel magasabban található a dokumentumtól
Itt vannak a képeim!! - a dokumentum a www.site.ru weboldalon található.
Nos, próbáljuk meg? Az alábbiakban egy példa látható két dokumentumra, amelyek egymásra mutató hivatkozásokat tartalmaznak.
Index.html fájl:
Hivatkozás készítése egy szövegrészhez
Mondd, kedves gyermekem: melyik fülben zúg?
Jobbra vagy balra?
Primer.html fájl:
Követve az itt található linket
De nem jól tippeltem! Zúgok mindkét fülemben.
Hát én nem játszom így...
A példából látható, hogy a linkek színnel vannak kiemelve, alapértelmezés szerint a kék egy hivatkozás, a piros pedig egy már meglátogatott link, ezek a színek a már jól ismert nyitó címkével módosíthatók< body >és annak tulajdonságait.
link - link színe.alink - a kattintott, aktív hivatkozás színe.
vlink - a meglátogatott link színe.
Így van írva:
Folytatva a szöveges hivatkozás színét, érdemes megemlíteni, hogy szükség esetén a teljes hivatkozást és annak egyes részeit (kifejezések, szavak, betűk) színes kiemelésre kényszerítheti egy ismerős címke és annak színe segítségével. tulajdonság. Ez azonban nem csak a színre vonatkozik, külön is beállíthatja a szöveg méretét, stílusát és betűtípusát. De ne feledje, hogy a színkezelést a címkén belül kell elvégezni ittés ne legyen túlzás, különben a link színe vagy alapértelmezés szerint, vagy a címkében meghatározott lesz
Index.html fájl:
Szivárvány
Nézd meg a kifejezést, amely segít emlékezni a szivárvány színeinek helyeire
R
A
D
U
G
A
Primer.html fájl:
Szivárvány
Minden
vadász
kívánságait
tud
Ahol
ül
fácán
Menjen vissza a főoldalra
A webhelyen található egyik oldalának index.html névnek kell lennie. A robotprogram az ilyen nevű fájlt fogja keresni a webhelyén, amikor valaki beírja a webhely nevét. Mivel az index.html oldal nyílik meg először, legyen főoldal. A többi oldalt hívhatod, ahogy akarod... nincs több árnyalat a névvel kapcsolatban.
A nyilvántartásról... A dokumentumok elérési útjának és nevének írásakor ne feledje, hogy pl.: Oldal.html, oldal.html és OLDAL.html különböző dokumentumok nevei! Ugyanez vonatkozik a könyvjelzők és képek nevére is. A kód írásakor mindig vegye figyelembe a kis- és nagybetűket; nagy a valószínűsége annak, hogy az ilyen neveket egyik vagy másik böngésző nem ismeri fel. Legyen szabály, hogy írj és nevezz mindent kicsinek latin betűkkel, akkor az emberi tényező és a programzavarok kockázata nullára csökken.
Három kattintás szabály...
Igyekezzen egy „hivatkozásfát” úgy kialakítani, hogy az oldal látogatója minden oldalról minimális kattintással eljuthasson az oldal tetszőleges helyére. Több mint három átmenet a kívánt helyre az oldalon már nem jó.Az ember számára felesleges oldalak vég nélküli betöltése idegösszeomláshoz és az oldal idő előtti bezárásához vezethet. Takarítson meg emberek idejét, pénzét és idegeit.
A HTML-dokumentumok fő jellemzője a hiperhivatkozások (vagy egyszerűen hivatkozások) jelenléte más dokumentumokra, webhelyekre, fájlokra, képekre stb. Ez az a képesség, hogy az oldalon kívüli objektumokra mutató hivatkozásokat illesszen be, ami miatt az Internet olyan népszerűvé vált. és kényelmes a használata. Ezért a webhely létrehozásakor mindig emlékezzen a linkek „varázslatára”.
Ebben a leckében arról fogunk beszélni, hogyan hozhatunk létre hivatkozást egy webhelyre, annak egyedi oldalára vagy fájljára. Megtanulja, hogyan módosíthatja a hivatkozás szövegét, hogyan nyithatja meg új ablakban, hogyan hozhat létre hivatkozást egy képre, mi a külső és belső hivatkozás, és még sok minden mást. Ráadásul már rendelkezik információval a hivatkozásokkal való munkavégzésről, amit az előző leckékben érintettünk (például beszéltünk arról, hogyan módosíthatja a hivatkozás színét).
Összességében ez az oktatóanyag teljessé és elégségessé teszi a hivatkozás létrehozásának megértését. Meg fogja érteni, hogyan lehet hiperhivatkozást létrehozni HTML-ben, és miért. És megtanulod ellenőrizni a tulajdonságait.
Feltételek § 1. Hivatkozás a fájlhoz, hivatkozás az oldalra, link az oldalra
Számos kérdés, hogy miben különbözik egy fájlra mutató hivatkozás a webhelyre vagy annak külön oldalára mutató hivatkozástól, arra késztetett, hogy a lecke legelején megadjam a választ. A válasz: semmi. Az összes felsorolt hivatkozás kívül esik az eredeti oldalon, és ugyanúgy jön létre.
Hogy ne hagyjam elszabadulni a gondolataimat, mindent egy példával mutatok meg.
A böngészőben ezt fogjuk látni:
A böngészőben ezt fogjuk látni:
Mint látható, minden típusú hivatkozás pontosan ugyanúgy jön létre. Az egyetlen különbség a hivatkozni kívánt objektum címe. Most térjünk át a lecke fő részére.
§ 2. Külső hivatkozások létrehozásaA hivatkozások különböznek egymástól külső és belső, valamint szöveges és grafikus formában. A külső hivatkozások a html oldalon kívülre vezetnek, a belső hivatkozások ugyanazon oldal különböző részeire vezetnek. A szöveges hivatkozások szövegek (alapértelmezés szerint kékkel van kiemelve és aláhúzva), a grafikus hivatkozások pedig egy képet tartalmaznak objektumként, amelyre rá kell kattintani. Az összes ilyen típusú hivatkozást HTML-ben hozzák létre egy tag (a horgony rövidítése) segítségével. Nézzük meg közelebbről.
Webhelyre, oldalra vagy fájlra mutató külső hivatkozás létrehozásához használja a href címke attribútumot. Ez az attribútum értéke egy webhely, oldal vagy fájl URL-címe (ezt fentebb tárgyaltuk). A címkék között található a link látható része (link anchor), vagyis amit a böngésző képernyőjén látunk. A hivatkozási horgony lehet egyszerű szöveges (szöveges hivatkozás) vagy grafikus kép(link-kép). A képhivatkozás úgy jön létre, hogy egy ismerős címkét szúr be a és a címkék közé. Általában a link létrehozásának szintaxisa így néz ki:
Például a webhely kezdőlapjára mutató szöveges hivatkozás létrehozásához meg kell írnia a következő HTML-kódot:
http://www.seoded.ru/">A webhely webhelyének főoldala
A böngészőben így fog kinézni:
Ahogy a lecke legelején írtam, a hivatkozás szövegének (horgonynak) színe a segítségével módosítható. Általánosságban elmondható, hogy a hivatkozások szövegére ugyanazokat a szabályokat alkalmazhatja, mint az oldal fő szövegére, azaz félkövéren, dőlt betűvel kiemelheti, címsorokat stb.
§ 2.1 Grafikus linkek (képhivatkozások)Ahogy fentebb mondtam, képhivatkozás létrehozásához a következőt kell használnia. Egy ilyen hivatkozásra egy példa így néz ki:
És a böngésző ezt mutatja:
Alapértelmezés szerint a böngésző kerettel grafikus hivatkozásban veszi körül a képet. Ha ez nem kívánatos, akkor az IMG címke border attribútumát 0-ra kell állítani:
border="0">
Kezdőlap
§ 3. Belső linkekA belső hivatkozások segítségével kényelmesen navigálhat a sok tartalmú oldalakon. Az ő segítségükkel készítettem el a „lecke tartalmát” (lásd az oldal elején). A belső hivatkozások ugyanazon az elven jönnek létre, mint a külső hivatkozások. Csak a href attribútum értéke határozza meg a hivatkozás „horgonyját”. A "horgony" a név attribútum által jön létre:
name="horgony neve">szöveg
A „horgony” neve pedig önkényesen van beállítva. Itt érdemes elmondani, hogy nem minden böngésző érti a „horgonyok” orosz nevét, ezért javaslom a latin ábécé használatát. A címkék közötti szöveg a „horgony” létrehozásához nem kötelező, és legtöbbször nincs megadva.
A „Kanyaró vagyok” az oldal azon helyein található, ahová a felhasználónak el kell jutnia, miután a linkre kattintott.
Ahogy fentebb is mondtam, egy belső hivatkozás href attribútumában a cím helyett a kívánt „horgony” nevét a kötelező hash szimbólummal (#) jelzi előtte. Nézzük meg egy példával.
Létrehoztam egy zagolovok nevű "horgonyt", és elhelyeztem az oldal kódjában a lecke címe mellett (Hiperhivatkozások HTML-ben). A horgonykód a következő:
name="zagolovok">
href="#zagolovok">Címhez
És a böngészőben így:
Ha észrevette, hogy miután a címre mutató belső hivatkozásra kattintott, megváltozott az URL a böngésző címsorában:
Az eredeti címre:
http://www..html
http://www..html#zagolovok
Ezzel a funkcióval pedig az internet bármely forrásából hivatkozhat egy adott helyre az oldalon! Vagyis tegyük fel, hogy létrehozott egy oldalt, amelyen hosszú cikk található valamiről (vagy sok fényképet tett közzé az oldalon), és megjelölte azt belső hivatkozásokkal. A webhelyen nem csak a cikket (vagy fényképeket) tartalmazó oldalra kellett hivatkoznia, hanem annak egy adott helyére (vagy egy adott fényképre). A címben található belső hivatkozással rendelkező opció használatával könnyedén elérheti, amire szüksége van.
4. § Abszolút és relatív hivatkozásokKezdőlap
De a relatív linkekkel ez egy kicsit bonyolultabb. Az ilyen hivatkozásokban a cím vagy a webhely gyökérmappájához (amelyben a főoldal található), vagy a forrásoldalhoz viszonyítva van feltüntetve. Ilyen hivatkozásokra van szükség például, ha az oldal a következő helyen található otthoni számítógép. Vagy ez nem egy webhely, hanem egy oldal, amely más dokumentumokra mutat.
Tegyük fel, hogy hivatkoznunk kell a klienty.html oldalra, amely ugyanabban a mappában van, mint kezdőlap webhely. Ekkor a relatív linkkód így fog kinézni:
/klienty.html">Ügyfelek
Most tegyük fel, hogy a főoldallal ugyanabban a mappában van egy zakazy mappa, és már benne van a klienty.html oldal, ekkor a relatív link kódja a következő lesz:
/zakazy/klienty.html">Ügyfelek
Most nézzük meg a forrásoldalhoz kapcsolódó hiperhivatkozások létrehozását. Tegyük fel, hogy van egy ár.html oldalunk (forrásoldal), és abból kell linkelni a klienty.html oldalra. A következő tipikus lehetőségek vannak:
1. A price.html és a klienty.html oldalak ugyanabban a mappában találhatók.
klienty.html">Ügyfelek
2. az oldal gyökérmappájában az ár.html oldal a zakazy mappában egy szinttel feljebb található).
A kód így fog kinézni:
../klienty.html">Ügyfelek
Két pont jelzi, hogy az aktuális mappából magasabb szintre kell lépnie.
3. A klienty.html oldal és a zakazy mappa az oldal gyökérmappájában, a mebel mappa a zakazy mappában, a price.html oldal a mebel mappában található (azaz a klienty.html oldal a webhelyhez viszonyítva) az eredeti ár.html oldal két szinttel magasabb ).
../../klienty.html">Ügyfelek
Azaz minden szintet két pont és egy perjel „/” jelöl.
4. a webhely gyökérmappájában a klienty.html oldal a zakazy mappában található (azaz most a klienty.html oldal az eredeti price.html oldalhoz képest egy szinttel lejjebb található).
zakazy/klienty.html">Ügyfelek
Ebben az esetben a pontok és a perjelek nem használatosak.
5. A price.html oldal (eredeti oldal) és a zakazy mappa az oldal gyökérmappájában található, a mebel mappa a zakazy mappában, a klienty.html oldal a mebel mappában (azaz most a klienty .html oldal az eredeti árhoz viszonyítva.html oldal két szinttel lejjebb található).
zakazy/mebel/klienty.html">Ügyfelek
6. A webhely gyökérmappájában két mappa található: zakazy és oplata. A klienty.html oldal a zakazy mappában, az eredeti price.html oldal az oplata mappában található (vagyis mindkét oldal különböző mappákban van egy szinttel a webhely gyökérmappája alatt).
../zakazy/klienty.html">Ügyfelek
Az e-mailre mutató hivatkozás létrehozásához le kell cserélnie a href attribútum értékében az URL-t a protokollt jelző e-mail címre (mailto:). És amikor erre a linkre kattint, megnyílik egy ablak levelező program a „Címzett” mezőben megadott e-mail címmel. HTML kódban ez így néz ki:
mailto: [e-mail védett]">Saját levelem
És a böngészőben ez így van.
Sziasztok a blogoldal kedves olvasói! Mint ismeretes, egy webhely sikeres népszerűsítéséhez és a keresési eredményekben elfoglalt pozíciójának növeléséhez szükséges a webhely magas színvonalú SEO optimalizálása. A „“ fogalma, amely viszont belsőre és külsőre oszlik, elválaszthatatlanul kapcsolódik az olyan fogalmakhoz, mint a „belső és külső webhelyhivatkozások”. Ezért nagyon fontos számunkra, hogy tudjuk, hány linknek kell lennie az oldalon, hogyan ellenőrizhető a számuk, hogyan távolítsuk el a felesleges linkeket az oldalról és blokkoljuk az indexelést, hogyan növeljük a linkek tömegét stb. A belső és külső hivatkozásokkal kapcsolatos mindezen és egyéb kérdések megválaszolásához először értsük meg, mi az a hivatkozás (vagy hiperhivatkozás) a HTML-ben.
Ebben a cikkben elmondom, mi az a hivatkozás, hogyan lehet hiperhivatkozást létrehozni HTML-ben egy webhelyen, hogyan lehet egy hivatkozást új ablakban megnyitni, hogyan hozhat létre hivatkozást egy e-mail címre (e-mail) és hogyan csinálj linket egy képhez. Kitérünk az olyan fogalmakra is, mint a html címkék és hiperhivatkozás-attribútumok, linkhorgony, html-horgony és hash-hivatkozások. Szóval, kezdjük.
Mi az a hivatkozás (hiperhivatkozás).Ha egy hiperhivatkozás olyan weboldalra vagy fájlra vezet, amely nem létezik (törölve, áthelyezve), vagy a címe helytelen, akkor az ilyen hivatkozást hibás hivatkozásnak nevezzük. Az oldalon nem lehetnek hibás hivatkozások, mivel ezek félrevezetik a látogatókat, és ha egy ilyen hivatkozásra kattintott, nem valószínű, hogy valaki visszatér az Ön webhelyére. Egy külön cikkben fogunk többet beszélni arról, hogy miért jelennek meg a hibás hivatkozások, hogyan találjuk meg és javítsuk ki őket. Most pedig folytassuk.
Hogyan készítsünk hivatkozást (hiperhivatkozást) HTML-ben egy webhelyen.Nagyon könnyen hivatkozhat egy másik oldalra az Ön vagy egy másik webhelyén. Hiperhivatkozás létrehozásához meg kell adnia a böngészőnek, hogy mi a hivatkozás, és meg kell adnia annak a dokumentumnak a címét, amelyre a hivatkozás vezet. Ez egy HTML tag használatával történik és a szükséges href attribútum:
Itt az URL annak a dokumentumnak a címe, ahová továbbítani kell. És a címkék között található hiperhivatkozás szövege És, az úgynevezett linkhorgony, és látható a weboldal látogatója számára. Amellett, hogy a linkszöveg (horgony) tájékoztatja az olvasót, hogy hol történik az átállás, a keresőoptimalizálásban (SEO) is nagyon fontos, hiszen ez az egyik meghatározó tényező az oldalad rangsorolásában. az ebben a horgonyban található kulcsszavakhoz. Általában ezt a fajta rangsorolást link rangsorolásnak nevezik.
Abszolút link
Arra használják, hogy egy másik webhelyen lévő dokumentumra mutassanak (a hivatkozás külső).
Egy oldalon belül is lehet abszolút linkeket létrehozni, de a belső hivatkozások létrehozásához helyesebb a rövidebbnek tűnő relatív címek használata. A különféle webhelyek elemzése során azonban észrevettem, hogy a webmesterek túlnyomó többsége abszolút címekkel hoz létre belső hivatkozásokat. Ennek megvan az előnye, mert ha az oldalát lemásolják, akkor így működő backlinkeket kap.
Mint látható, az abszolút hivatkozásokkal minden egyszerű. A relatívokkal nehezebb, mert ezek létrehozásánál meg kell érteni, hogy a href attribútum milyen értékét kell megadni, mivel ez a dokumentumok eredeti helyétől függ. Ahogy már mondtam, ezzel senki sem foglalkozik, és az oldalon található összes hivatkozást abszolútá teszi. Ha azonban többet szeretne megtudni arról, hogyan lehet helyesen létrehozni relatív hivatkozásokat egy webhelyhez, ajánlhatok egy cikket Dmitrijtől, a ktonanovenkogo.ru blog szerzőjétől. Ennél részletesebb és érthetőbb magyarázatot még nem láttam.
Például megmutatom, hogyan fog kinézni a webhely gyökeréhez viszonyított fájlhoz vezető hivatkozás (egy hasonló abszolút linkben egyszerűen levágunk mindent a harmadik perjeltől balra):
Relatív hivatkozás
Főre
Link szövege (horgony)
A felugró szöveg színei és kialakítása csak a beállításoktól függ operációs rendszerés böngésző.
Hogyan lehet megnyitni egy hivatkozást új ablakban.Alapértelmezés szerint egy hivatkozásra kattintva egy új dokumentum nyílik meg az aktuális ablakban. Weboldalak böngészése során azonban ez nekem személy szerint nem kényelmes. Egy cikk olvasásakor és egy hivatkozás követésekor számomra kényelmes, hogy az oldal új ablakban nyílik meg, és bármikor folytathatom az előző cikk olvasását. Egy másik ok a hivatkozás új ablakban való megnyitására az, hogy amikor valaki más webhelyére lép, nagy a valószínűsége annak, hogy az olvasó nem tér vissza. Főleg, ha többször is átáll, és egyszerűen nem emlékszik, hol volt néhány perce.
A címke target attribútuma segít a hivatkozás új ablakban történő megnyitásában . Alapértelmezés szerint a _self értéke van, ami általában nincs megadva. A dokumentum új ablakban való megnyitásához módosítsa a célattribútum értékét _blank értékre:
| 1 | Új ablak |
Új ablak
Mi a teendő, ha valaki más webhelyén, ahol a linkek az aktuális ablakban nyílnak meg, egy újban szeretné megnyitni őket? Csak nem gombbal kell rájuk kattintani, hanem az egér görgőjével. Ebben az esetben új oldalúj ablakban nyílik meg.
Hogyan készítsünk hivatkozást egy e-mailre (e-mail címre).Erre a hivatkozásra kattintva megnyílik a program a munkához emailben, alapértelmezés szerint telepítve, ahol a „Címzett” mező már ki lesz töltve. Ahhoz, hogy a levél tárgya automatikusan kitöltésre kerüljön, egy ilyen típusú e-mailre kell linkelnie:
Dmitry KtoNaNovenkogo egy másik módszert javasol a könyvjelzők beállítására a weboldal szövegében, html-horgonyok használata nélkül. Ehhez könyvjelzőt készítünk az oldalon elérhető bármely HTML címkéből, hozzárendelve az univerzális id attribútumot. Például tegyünk könyvjelzők közé egy h3 címcímkét:
Cím szövege
Fontos, hogy az id attribútumban egy latin betű szerepeljen a horgonynév első karaktereként, akkor bármilyen más engedélyezett karaktert használhat.
Térjünk vissza például a „ ” címsorhoz, majd folytassuk.
A hash-hivatkozások segítségével nemcsak az egyik oldalon, hanem a webhely másik oldalára is eljuthat a kívánt helyre. Ehhez a megfelelő oldalon a megfelelő helyre állítjuk be a html horgonyt, és magában a hash linkben a hash szimbólum elé írjuk ennek az oldalnak a címét. Például:
Szöveg hivatkozása a html horgonykönyvjelzőhöz
A hiperhivatkozások típusai és színei a HTML-ben.- A nem látogatott hivatkozás kék színű és aláhúzott.
- Aktív hivatkozás – pirosra vált a hivatkozásra való kattintás és az új oldal betöltésének megkezdése között eltelt idő alatt. Nyilvánvaló, hogy ebben az állapotban csak rövid ideig van.
- Látogatott link – a rákattintás után lilára változtatja a színét.
A HTML-dokumentumban lévő hiperhivatkozások színét egy címke és annak következő attribútumai segítségével módosíthatja:
- Link – a nem látogatott hivatkozások színe.
- Alink – az aktív hivatkozás színe.
- Vlink – a meglátogatott linkek színe.
A fenti attribútumok mindegyike kombinálható:
| 1 |
Remélem, most már világos, hogyan lehet hiperhivatkozást létrehozni egy HTML oldalra és egy e-mailre, hogyan lehet egy képet hivatkozássá tenni, mik azok a szöveghorgonyok, hash hivatkozások és html horgonyok, mik azok a html címkék és linkattribútumok. Megpróbáltam, amennyire csak tudtam, részletesen elmondani, hogy mik azok a hivatkozások a HTML-ben, és mik azok. Hadd emlékeztesselek arra, hogy a hiperhivatkozások szövegbe való beszúrása csak HTML módban történik.
Még soha nem írtam ilyen hosszú cikkeket, több mint 10 000 karaktert. De ezzel még nincs vége a linkek témának, folytatás következik.
Ha ez a cikk hasznos volt az Ön számára, kérjük, kattintson az alábbi közösségi média gombokra. Viszontlátásra az oldalakon!
Szép napot mindenkinek, kedves barátaim és olvasóim. Remélem, úgy döntöttél, hogy részt veszel a versenyemen, és már írsz a blogírásodról. Nos, szeretném folytatni a html nyelv tanulmányozását, és ma az egyik legfontosabb összetevőről, nevezetesen a hiperhivatkozásokról szeretnék beszélni.
Igen, ilyen hiperhivatkozások nélkül az internet nem lenne olyan kényelmes. Nem, hazudok. Egyáltalán nem lenne könnyű eligazodni. El tudod képzelni az internetet nélkülük? Én személy szerint nem.
És ma megtanuljuk, hogyan lehet hiperhivatkozást beszúrni a html-be. De először is szeretném megkérdezni: Tudod-e, hogy mi a hiperhivatkozás, és miben különbözik a normál hivatkozástól? Valójában itt minden egyszerű: a hivatkozás egy egyszerű információ, amely egy dokumentumra hivatkozik. Ugyanakkor nem kattinthat erre a szövegre (semmi sem fog történni), de tudja, hol keressen információt.
Példa: A //site/adobe-photoshop/kak-vydelit-volosy/ címen megtudhatja, hogyan lehet haj kiemelni a Photoshopban.
A hiperhivatkozás ugyanaz a szöveg, csak a lényege, hogy erre a szövegre kattintva eljuthat a kívánt oldalra, webhelyre vagy bármilyen más objektumra. Sőt, maga a szöveg bármi lehet, míg a cím külön belül van írva, és teljesen más is lehet. De bárhogy is legyen, a köznyelvben még mindig egyszerűen linkeknek hívják őket. Íme egy példa a hiperhivatkozásra:
Az egyik oktatóanyagomban olvashat arról, hogyan lehet megfelelően kiemelni a hajat a Photoshopban.
Akárhogyan is. Jó elmélet. Most folytassuk a gyakorlatot, és nézzük meg, kik a felelősek mindezért.
A párosított címke felelős a hiperhivatkozásért, de önmagában nem képvisel semmit. Mindig együtt jár egy tulajdonsággal. És ebben az esetben folyamatosan ugyanazt a href-et kell írnunk. Az attribútum értékében magára a kívánt erőforrásra mutató hivatkozást helyezzük el. Magába a tartalomba pedig magát a szöveget írjuk, aminek kattinthatóvá kell válnia (kattintva működik). Nézd meg a példát, és azt hiszem, mindent meg fogsz érteni.
Yandex kereső
Amint érti, ebben a példában azt írtam, hogy amikor rákattint egy „Yandex keresőmotor” szövegrészre, egy személy a href attribútum értékében írt címre kerül.
Azt hiszem, sokan tudják, hogy vannak belső és külső kapcsolatok. A belső hivatkozások egy könyvtáron belül, azaz a webhelyen belül valósulnak meg, a külső hivatkozások pedig valamilyen harmadik féltől származó forráshoz vezetnek. És most megmutatom, hogyan kell mindkettőt megtenni.
Belső átmenetek Fájl ugyanabban a mappában
De egy ilyen átmenet akkor működik, ha a fájl, amelyre hivatkozik, ugyanabban a mappában található, mint a fájl, amelybe a hivatkozást helyezi. Más lehetőségek esetében minden egy kicsit más.
Mit csináltunk most? És a következőket tettük: mivel a fotó elérési útja egy külön img mappában található, ami ugyanabban a mappában található, mint a pushkin.html fájl, ezért az attribútum értékébe először a mappa nevét kell beírni, és majd perjellel (/) írja be a dokumentum teljes nevét (esetünkben fényképeket).
Most mentse és futtassa a pushkin.html fájlt a böngészőjében. Látni fogja, hogy a „Photo” szó kékkel kiemelt és kattinthatóvá vált, ami azt jelenti, hogy erre a hivatkozásra kattintva a fofo.jpg fájlba kerülünk, amely az img mappában található.
Szóval hogyan? Minden tiszta? Ha bármi történik, ne habozzon kérdezni.
Külső átmenetekÉs természetesen nem hagyhatjuk figyelmen kívül a külső hivatkozásokat sem, amelyekre kattintva egy teljesen más oldalra kerülünk. De itt nincs semmi bonyolult. A lényeg az, hogy a webhely vagy weboldal teljes címét a href értékbe írja be. Fentebb mutattam egy példát a Yandex-szel. De itt van egy másik példa:
A szociális projektek mesterévé fogok tanulni.Itt egy adott webhely adott oldalára jutunk.
Alapértelmezés szerint egy hivatkozásra kattintva a dokumentum ugyanabban az ablakban nyílik meg, mint az Ön oldala, azaz. az oldalad bezárul. És ez nem jó. Különösen a promotált tartalomprojektek vagy blogok esetében javasolt, hogy amikor egy hivatkozásra kattint, a dokumentum új ablakban vagy lapon nyíljon meg az oldal bezárása nélkül.
Ebben segít nekünk a „_blank” értékű target attribútum. Nincs itt semmi bonyolult. Csak ezt kell beillesztenie a nyitó címkébe a href attribútum értéke után. Vegyük azt a kivonatot a lukomorye.html fájlból, ahol linket készítettünk a pushkin.html oldalra, de most éppen ezt az attribútumot írjuk le. Így kell kinéznie:
A Ruslan és Ljudmila című versből (Szerző - A.S. Puskin)
Nos, itt minden világos. Most, amikor a tartalomra kattint, a kívánt oldal új ablakban nyílik meg. Ez nagyon szükséges, mert ha nem regisztrálja, a felhasználó egyszerűen elhagyja az oldalt. És így mindenesetre rajta marad, csak ha kifejezetten nem zárja be. Próbálj meg mindent magad csinálni, csak csinálj mindent széppé a saját kezeddel. Nem kell másolni és beilleszteni.
Valahogy így. Úgy tűnik, a legfontosabb dolgokat elmondtam, de ha ebbe az irányba szeretnél elmozdulni, és el akarsz tanulni HTML-t és CSS-t professzionális weboldalak, blogok és akár online áruházak létrehozásához, akkor mindenképpen nézzen meg egy kiváló videó tanfolyamot erről a témáról. A leckék valóban kiválóak, és valóban azoknak szólnak, akik még keveset ismerik a webhelykészítést, vagy egyáltalán nem ismerik.
Nos, ezzel befejeztük a mai leckét. Remélem tetszett cikkem, és örülni fog, ha rendszeres olvasóm lesz. Szóval ne felejts el feliratkozni a blogom frissítéseire, hogy ne maradj le semmi érdekesről. Nos, sok sikert kívánok minden igyekezetéhez. Viszlát!
Üdvözlettel, Dmitrij Kostin.
