Hogyan készítsünk hiperhivatkozást a HTML-ben egy másik oldalra

Hiperhivatkozások HTML-ben

A HTML-dokumentum fő jellemzője a jelenléte Hypersril (vagy csak linkek) más dokumentumokhoz, webhelyekhez, fájlokhoz, képekhez és t. D. Lehetőség van arra, hogy a linkeket az objektumokra helyezzük, és az internetet olyan népszerűvé tette, és kényelmes legyen. Ezért, amikor a webhely létrehozásakor mindig emlékszem a linkek “mágiájáról”.

Ebben a leckében beszélünk, A link létrehozása az oldalra, külön oldalra vagy fájlra. Meg fogja tanulni, hogyan kell megváltoztatni a linkszöveget, hogyan kell megnyitni egy új ablakban, hogyan lehet hivatkozni egy képre, milyen külső és belső kapcsolatokat és még sok más. Plusz, ha már van megtudni a referenciák is érintett az elmúlt órák (például hogyan lehet változtatni a színét a linkek, beszélgettünk egy előadást a Body tag).

Általában ez a lecke teszi az ötlete referenciák kitöltött és elegendő. Meg fogják érteni, hogyan lehet létrehozni egy hivatkozásra HTML és miért. És megtanulják kezelni a tulajdonságait.

feltételek

Anchor kapcsolat (angolról. „Horgony” – „Horgony”) – mi van a kód hiperhivatkozások címkék között < A> és < /A>. Például, lehet, hogy:

• Szöveg
  • Kód: < a href="hab">Anchor kapcsolat< /a>
  • Tekintse meg a böngészőben: horgonylinkek
• link címét

Stb.

1. §. Link a fájl, link az oldalon, az oldal linkje

Számos kérdést arról, hogy a link a fájl eltér a linket az oldal vagy annak külön lapon, arra kényszerített, hogy felfedje a választ, hogy a kezdet kezdetén a lecke. A válasz: semmi. Minden felsorolt ​​hivatkozások külső forrás oldalra, és létre ugyanúgy.

Annak érdekében, hogy ne terjesszék a gondolatot a fán, mindent megmutatom a példában.

így, Link kód a webhelyhez Úgy tűnik, hogy:

< a href="hab">Link< /a>

A böngészőben itt fogjuk látni, hogy:

Link

Link kód az oldalra Úgy tűnik, hogy:

< a href="hab">Link az oldalra< /a>

A böngészőben itt fogjuk látni, hogy:

Link az oldalra

File link kód Úgy tűnik, hogy:

< a href="hab">Link a fájlhoz< /a>

A böngészőben itt fogjuk látni, hogy:

Link a fájlhoz

Amint láthatja, mindenféle linket egyformán létrehozzák. A különbség csak be van kapcsolva Cím objektum, hogy hivatkozzon. És most forduljunk a lecke fő részéhez.

2. §. Külső referenciák létrehozása

A hivatkozások között eltérő külső és belső, valamint a Textikai és Grafikus. A külső linkek a HTML-oldalak, a belső részek korlátait eredményezik különböző részekre ugyanaz oldalak. A szöveges linkek szöveget képviselnek (alapértelmezés szerint kék és hangsúlyozva van kiemelve), és a grafika, mint olyan objektum, amelyre kattintani, hogy menjen, tartalmazzon bármilyen képet. Mindezek a linkek fajtáit HTML-ben hoznak létre egy címkével < A>< /A> (Az angol nyelvtől való csökkentés. Horgony – horgony). Tekintsük részletesebben.

Külső link létrehozása a webhelyhez, az oldal vagy a fájl a címke attribútum < A> – href. Értékként ez az attribútum elfogadja URL Webhely, oldalak vagy fájlok (fent beszéltünk). A címkék között < A> és < /A> A hivatkozás látható része (horgonyhivatkozások), t. E. Amit látunk a böngésző képernyőn. A horgonyhivatkozások lehetnek közös szöveg (szöveges link) és grafikus kép (link-picture). A Link-picture-t úgy hozták létre, hogy ismerkedjen meg nekünk a múlt lecke címkéjén < IMG> A címkék között < A> és < /A>. Általánosságban elmondható, hogy a link létrehozásának szintaxisa így néz ki:

< a href="URL-адрес или имя файла">Link szöveg (horgony)< /a>

Például egy szöveges link létrehozása az oldal főoldalához, meg kell írnia a következő HTML kódot:

< a href="hab">Kezdőlap Hab Site< /a>

A böngészőben így fog kinézni:

Kezdőlap Hab Site

Amint ezt a lecke kezdetén írtam, a linkszöveg (horgony) színe megváltoztatható a testcímke attribútumainak segítségével. Általánosságban elmondható, hogy ugyanazokat a formázási lehetőséget használhatja, mint az oldal fő szövege, t. E. Válassza a merész, dőlt betűket, használja a címsorokat és a t. D.

§ Grafikus linkek (linkek-képek)

Ahogy fent említettem, a link-kép létrehozásához a szöveg helyett a képet kell használnia. Egy ilyen link példája így néz ki:

< a href="hab">< img src="hab">< /a>

És a böngésző megmutatja:

Alapértelmezés szerint a böngésző körülvesz egy képet egy grafikus link keretben. Ha nem kívánatos, akkor az attribútum Határ Címke Img 0 értéket kell rendelnie:

< a href="hab">< img src="hab" border="0">< /a>

A szöveges és grafikai hivatkozások kombinálhatók. Ha írsz:

< a href="hab">< img src="hab"> Főoldal< /a>

, olyanok lesznek, mint egy kép és a “főoldal” szövege

3. §. Belső linkek

A sok tartalommal rendelkező oldalak kényelmes mozgatásához belső linkeket használnak. Ez a segítségükkel “lecke tartalmat” (lásd. Az oldal elején). A belső referenciákat ugyanazon elv hozták létre, mint a külső. Csak az attribútum értékében href Jelzett “horgony” linkek. A “horgony” az attribútum által készül Név:

< a name="имя якоря">szöveg< /a>

A “horgonyok” nevet önkényesen állítjuk be. Érdemes azt mondani, hogy nem minden böngésző megérti a “horgonyok” orosz nevét, így javaslom a latin használatával. Szöveg a címkék között < A>< /A> A horgony létrehozása nem feltétlenül és leggyakrabban nincs megadva.

A “horgony” az oldal azon helyeiben található, ahol a felhasználónak a linkre kattintva kell lennie.

Ahogy fent mondtam, az attribútumban href A cím helyett belső linkek, a kívánt “horgony” nevét egy kötelező rács szimbólummal (#) vele szemben. Például elemezzük.

Horgonyt hoztam létre a névvel Zagolovok És elhelyezte az oldalkódot a lecke címe mellett (“hyperlinks html”). A “horgony” kód a következő:

< a name="zagolovok">< /a>

A belső link HTML kódja így fog kinézni:

< a href="#zagolovok">A fejléchez< /a>

, És a böngészőben:

A fejléchez

A linkre kattintva a lecke fejlécébe esik.

Ha észrevette, a belső linkre való áttérés után a böngésző címsorában található URL megváltozott:

Az eredeti címre:

Hab

Hozzáadott egy belső linket:

Hab # Zagolovok

Ezzel a funkcióval az interneten található erőforrásból egy adott oldal helyére utalhat! T. E., Tegyük fel, hogy létrehozott egy oldalt egy terjedelmes cikket (vagy nagyszámú fényképet írt az oldalon), és kijelentette, hogy belső linkek. Míg a Vkontakte szociális hálózatban nem kellett egy cikkhez (vagy fényképekkel), hanem egy bizonyos helyen (vagy egy adott fotó). Egy belső linkkel rendelkező opció használatával könnyen elérheti a jogot.

§ 4. Abszolút és relatív linkek

Vannak linkek is vannak Abszolút és relatív. Az Absolute Link rendszeres link nézet:

< a href="hab">Főoldal< /a>

De a relatív hivatkozások egy kicsit bonyolultabbak. Az ilyen hivatkozásokban a cím sem jelenik meg viszonylag A webhely gyökér mappája (az, amelyben a főoldal fekszik), vagy a forrásoldalhoz viszonyítva. Ilyen linkek szükségesek például, ha a webhely az otthoni számítógépen található. Vagy nem weboldal, hanem egy mutató oldal más dokumentumokhoz.

Elemezni fogjuk az első linkek létrehozását A root mappához képest Webhely.

Tegyük fel, hogy az oldalra kell hivatkoznunk Hab, Amely hazudik Egy mappában A webhely főoldalán. Ezután a relatív hivatkozási kód az űrlapot veszi:

< a href="/hab">Ügyfelek< /a>

És most feltételezzük, hogy az egyik mappában a főoldalon fekszik Zakazy mappa és már NE Lies oldal Hab, majd a relatív link kódja lesz:

< a href="/zakazy/hab">Ügyfelek< /a>

T. E. A webhely gyökérmappájához viszonyított link kialakításakor elhagyjuk a cím kezdeti részét Hab és hagyjon mindent. A slash használatával “/” alapvetően szükségszerűen!

Most tekintse meg a hiperhivatkozások létrehozását A forrásoldalhoz viszonyítva. Tegyük fel, hogy van egy oldalunk Hab (forrásoldal), és az oldalra kell hivatkoznia Hab A következő tipikus lehetőségek vannak:

• 1. A Hab és a Hab oldalak találhatók Egy mappában.

  Ezután a linkkód így lesz:

  < a href="hab">Ügyfelek< /a>

• 2. A Hab oldal és a zakazy mappa található A webhely gyökérmappájában, Hab A zakazy mappában fekszik (T. E. Hab oldal az eredeti Hab oldalhoz viszonyítva egy szint felett).

  A kód:

  < a href="../hab">Ügyfelek< /a>

  Két pont azt mutatja, hogy ki kell lépnie az aktuális mappából a fenti szintre.

• 3. A Hab oldal és a zakazy mappa található A webhely gyökérmappájában, Mappa Mebel A zakazy mappában fekszik, Hab A Mebel mappában található (T. E. Hab oldal az eredeti Hab oldalhoz viszonyítva két fenti szint).

  A referenciakód az űrlapot veszi:

  < a href="../../hab">Ügyfelek< /a>

  T. E. Minden szintet két pont jelzi, és “/“.

• 4. Hab oldal (forrásoldal) és zakazy mappa található A webhely gyökérmappájában, Hab A zakazy mappában fekszik (T. E. Most a Hab oldal az eredeti Hab oldalra vonatkozik egy szint alatt).

  Most a linkkód:

  < a href="zakazy/hab">Ügyfelek< /a>

  Ebben az esetben a pontok és a keverékek nincsenek beállítva.

• 5. Hab oldal (forrásoldal) és zakazy mappa található A webhely gyökérmappájában, Mappa Mebel A zakazy mappában fekszik, Hab A Mebel mappában található (T. E. Most a Hab oldal az eredeti Hab oldalhoz viszonyítva Két szintre van).

  A Link kódja:

  < a href="zakazy/mebel/hab">Ügyfelek< /a>

• 6. A webhely gyökérmappájában Két mappa hazudik: Zakazy és oplata. Hab A zakazy mappában fekszik, Forrásoldal Hab Az oplata mappában található (T. E. Mindkét oldal hazudik különböző mappákban az alábbi szinten a webhely gyökérmappájából).

  A linkkód a következő:

  < a href="../zakazy/hab">Ügyfelek< /a>

  Analógia szerint a relatív hivatkozások jönnek létre, és ha az oldalak különböző szinteken vannak a root mappához képest. Csak a szintmutatók száma (két pont és lemezek) megváltozik, és az oldal címét, amelyre a kapcsolat be van állítva.

5. §. E-mail link

Nak nek E-mail link létrehozása, szükséglet helyett az URL-t az attribútum értékben href Írjon egy e-mail címet a protokollhoz (Mailo:). És akkor, amikor rákattint a linkre, megnyílik az e-mail cím. A HTML-kódban úgy néz ki, mint ez:

< a href="mailto:hab@hab">Levelem< /a>

, És a böngészőben:

Levelem

6. §. TAG attribútumok “A”

Taga < A>, Mint a HTML többi címkéhez, vannak attribútumok. Tekintsük néhányat.

§ Target attribútum

Alapértelmezés szerint a böngésző, ha a link megnyitja az oldalt ugyanabban az ablakban. A módosításhoz a címke attribútumot használjuk ACél. A következő értékekkel rendelkezik:

• _Üres – Megnyitja a linket egy új ablakban (a modern böngészők az új lapon).

  _Szülő – betölti a linket a szülőablakban.

  _Maga – Megnyit egy linket ugyanabban az ablakban. Ez az érték minden alapértelmezett linket ér (t. E. Ha egyáltalán nem adja meg a cél attribútumot, akkor ez az érték működik).

Ez nem minden attribútumérték Cél, De ezek a legalapvetőbbek. Példa az attribútum használatára:

< a href="hab" target="_blank">Főoldal< /a>

Főoldal

§ attribútum címe

Tegben < A> Az attribútumot is használhatja cím. Ezzel létrejött egy pop-up tipp jön létre, amely akkor jelenik meg, amikor az egeret a linken mozgatja.

< a href="hab" title="Menj a főoldalra">Főoldal< /a>

Főoldal

§ attribútum rel = “nofollow”

Az attribútumban Rel Számos érték van, de az érték az érték “Nincs követés“. Ez az érték azt jelzi, hogy a keresőmotor-robotokat, hogy ezt a linket nem kell használni a keresési rangsorban. Bővebben – a webhelyek előmozdításának szakaszában.

Forrás:

< a href="hab" rel="nofollow">Horgonyhivatal< /a>

A böngészőben:

Horgonyhivatal

7. §. Következtetés

Ezek az alapvető információk Linkek létrehozása HTML-re. Ezen a lecke elvégezhető. És ez a tény azt mondja, hogy a HTML alapjainak nagy része már elsajátította.

Azt javaslom, hogy ismét megszakítsa az előző szakaszokat, majd hozzon létre egy teljes körű HTML oldalt, amelyet a szeretettnek szentelt. A tervezéssel és a vágyaival összhangban. Ezt követően egy szabad tárhelyen (természetesen, ha fizetett tárhelyed van, akkor rajta), és már teljesen megcsodálja az első webhelyét.

Megmutathatja, hogy barátok vagy valaki más. Általában úgy érzi, mint egy helyek. Aztán, majd egy kis emelkedés után egy ilyen esemény alkalmával, menjen a következő részre, amelyben megmondom neked a táblázatok létrehozásáról HTML-ben.

És ez már az első lépés a személyes oldal átalakulása felé komoly erőforrásra.

Tartalom Messzebb

További anyagok ezen a témában:

⇓

Ossza meg egy linket a barátaival, ismerősekkel és interlocsiváival a közösségi hálózatokban és a fórumokon! És a webhely hozzáadja a könyvjelzőket! Így nyert.

Ossza meg az alábbi oldalt:

Tisztelettel, Alexey Vostros (Vkontakte, Twitter, Odnoklassniki, Facebook, Instagram, Telegram).