Stvaranje jednostavne hiperveze u bilježnici. Što je link i kako napraviti hiperlink u HTML-u

<а href="http://www.mysite.com/doc2.htm/anch3">

To jest, kombiniramo korištenje punog URL-a dokumenta i istodobno ukazujemo na određeni njegov fragment, označen kao "anch3".

Riža. 1.16. Prozor preglednika koji prikazuje rezultat datoteke prikazane u ispisu 1.16

Treba imati na umu da ako je tekst s hipervezom već prikazan u okviru za prikaz, kao što je bio slučaj u našem posljednjem primjeru, neće doći do promjena. Ali sve što trebate učiniti je promijeniti veličinu prozora preglednika okomito tako da sakrijete zadnji redak sadržaja, na koji hiperveza upućuje, a rezultat njezine radnje može se jasno pokazati.

Naravno, svi nazivi takvih oznaka oznaka, koji se određuju korištenjem vrijednosti parametra imena, moraju biti jedinstveni. Imajte na umu da HTML ne pravi razliku između velikih i velikih slova. Stoga, ako naš HTML dokument definira dvije knjižne oznake koje će naknadno biti referirane hipervezama koje se razlikuju samo u velikim i velikim slovima, tada će se za HTML parser ugrađen u preglednik ti identifikatori smatrati istima i on neće obraditi nijedan od njih.

Međutim, već znamo da možete identificirati bilo koji element HTML dokumenta pomoću parametra id, koji se može koristiti kao dio bilo koje oznake. U isto vrijeme, hiperveze koje upućuju na fragmente dokumenta također mogu koristiti ove parametre, tj. da biste postavili oznaku knjižne oznake na bilo koju oznaku, nije potrebno koristiti oznaku<а>s parametrom imena, trebate samo koristiti parametar id.

Vrijednosti parametra name i parametra id jedinstveni su identifikatori elemenata u HTML dokumentu. Stoga, niti jedna vrijednost parametra name ne smije odgovarati niti jednoj vrijednosti parametra id.

Ali koju opciju odabrati za svoje web stranice, koji parametar koristiti? Ovdje je važno shvatiti da dok parametar id može poslužiti u nekoliko svrha, kao što je identificiranje oznake knjižne oznake, stvaranje jedinstvenih identifikatora za DHTML skripte koje se izvršavaju i stiliziranje, neki naslijeđeni preglednici možda neće prihvatiti ove identifikatore za ciljanje hiperveza.

Zajedno s oznakom<а>parametar naslova može se koristiti za pomoć u identificiranju hiperveze udaljenom korisniku. Vrijednost ovog parametra je tekstualni niz koji će biti prikazan kao mali savjet kada korisnik prijeđe pokazivačem miša preko tražene hiperveze. Oglas za takvu hipervezu izgleda otprilike ovako:

<а href="www.site.com" title="Vrlo lijepa stranica">

Pomoću parametra hreflang možemo odrediti jezik na kojem je napisan tekstualni sadržaj internetskog izvora na koji vodi ova hiperveza. Vrijednost parametra jedna je od notacija standardnog jezika koju smo pogledali malo ranije u ovom poglavlju.
Ali jednostavno označavanje jezika na kojem je napisan tekstualni sadržaj web stranice nije dovoljno. Također je potrebno navesti korišteno kodiranje. I tu nam može pomoći već poznati parametar skupa znakova, čija je vrijednost standardna oznaka kodiranja koje se koristi za prikaz tekstualnog sadržaja internetskog izvora na koji upućuje hiperveza koju tražimo.

Pomoću parametra gel možemo naznačiti namjenu dokumenta na koji upućuje hiperveza, odnosno vrijednost ovog parametra eksplicitno označava odnos između izvornog dokumenta i dokumenta na koji se povezujemo. Korištenje ovog parametra nema utjecaja na način na koji se hiperveza prikazuje ili kako se izvor dohvaća, ali može biti koristan. Ako su web-stranice namijenjene ne samo za pregledavanje pomoću preglednika, već i za obradu nekim specijaliziranim aplikacijama. Kao što su, primjerice, napredne tražilice koje su u stanju ispravno prepoznati i obraditi takve odnose između dokumenata, označene hipervezama.

Vrijednost parametra rel jedna je od unaprijed definiranih ključnih riječi koje ćemo sada pogledati.

• Naizmjence. Vrijednost označava da je dokument alternativni prikaz izvornog dokumenta. Ako hiperveza koristi lang parametar s vrijednošću koja se razlikuje od jezika izvornog dokumenta, tada se takva hiperveza obično smatra vezom na kopiju izvornog dokumenta na drugom jeziku.
• Stilska tablica. Označava da je dokument s hipervezom stilski list. Mehanizam za korištenje stilskih listova detaljno je opisan u drugom poglavlju.
• Početak. Koristi se za označavanje početnog, polaznog dokumenta određenog skupa dokumenata. Za web stranicu, ovo bi očito bila početna stranica.
• Sljedeći. Vrijednost se koristi ako su početni dokument i dokument s hipervezom dio nekog linearno uređenog niza dokumenata, a potonji je sljedeći u nizu u odnosu na izvornu web stranicu.
• Pret. Vrijednost se koristi u istom slučaju kao prethodna, ali sada označava da dokument u lancu nije sljedeći, već prethodni, u odnosu na početni dokument.
• indeks. Koristi se u hipervezama koje upućuju na dokument koji je indeksirani sadržaj izvorne web stranice.
• Glosar. Vrijednost označava da dokument sadrži rječnik pojmova korištenih u izvornom dokumentu.
• autorsko pravo. Koristi se ako dokument s hipervezom sadrži obavijest o autorskim pravima za sadržaj izvornog dokumenta.
• poglavlje. Koristi se u hipervezama koje upućuju na dokumente koji su zasebna poglavlja u određenom skupu dokumenata.
• odjeljak. Hiperveza s ovom vrijednošću parametra rel označava dokument koji je odjeljak u općem skupu dokumenata koji čine jednu cjelinu sadržaja.
• pododjeljak. Značenje je neki nastavak pojma naznačenog prethodnim značenjem koje smo razmatrali. Znači da je dokument već pododjeljak
• Dodatak. Vrijednost označava da je dokument s hipervezom privitak izvornom dokumentu.
• Pomozite. Koristi se za poveznicu na dokumente koji pružaju dodatne informacije o pozadini sadržaja izvornog dokumenta.
• Knjižna oznaka. Koristi se za veze na HTML dokumente koji sadrže veze na neke odabrane ključne fragmente izvornog dokumenta.

Kada koristite ove vrijednosti, imajte na umu da će HTML parseri biti osjetljivi na velika i mala slova, tako da se morate strogo pridržavati pravopisa navedenog na našem popisu.

Zapravo, u HTML-u postoji mogućnost stvaranja vlastitih vrijednosti za atribut koji razmatramo, ali za potpuno korištenje ovog parametra potrebno je koristiti specijalizirane alate za opisivanje tih novih vrijednosti i softver usmjeren na prepoznavanje tih tipova poveznica. Budući da nas zanimaju preglednici, ne moramo stvarati nove vrste poveznica.

Ova tehnologija zapravo je palijativ, koji je osmišljen kako bi pružio barem dio mogućnosti koje pruža novi jezik za opisivanje dokumenata na internetu - XML ​​​​(extensible Markup Language), za kojeg se predviđa da će biti nasljednik i "ubojica" HTML-a. Ali ne postoje rasprostranjeni XML preglednici i aplikacije koje obrađuju XML dokumente. A ova tehnologija još dugo neće postati općeprihvaćena, što znači da HTML tehnologija još uvijek ima puno pravo na život i još će se dugo koristiti kao osnova za web stranice.

Ali vratimo se na razmatranje atributa oznake<а>. Atribut rev je suprotan atributu rel. Dok rel atribut specificira vrstu dokumenta na koji hiperveza upućuje, rev atribut specificira vrstu izvornog dokumenta koji sadrži hipervezu. Isti skup ključnih riječi koji je korišten za atribut rel koristi se kao vrijednosti ovog atributa.

Pomoću parametra target odredimo u kojem okviru želimo prikazati dokument na koji upućuje hiperveza. Činjenica je da se obično jedan dokument prikazuje u jednom prozoru preglednika. Ali u HTML-u je moguće podijeliti okvir za prikaz u nekoliko područja, koja se nazivaju okviri, od kojih će svaki prikazati svoj vlastiti HTML dokument. Razmotrit ćemo tehnologiju korištenja okvira u jednom od sljedećih odjeljaka ovog poglavlja, ali za sada ćemo samo primijetiti da ciljni parametar omogućuje eksplicitno navođenje okvira u kojem će se web stranica prikazati. Postavljanje hiperveze pomoću ove opcije izgledalo bi otprilike ovako:

<а href="http://www.mysite.com/docl.html" target="_top">

Takva hiperveza će uzrokovati da preglednik učita web stranicu čiji je URL naveden kao vrijednost parametra href u gornji okvir čije je ime navedeno u parametru cilja. Vrijednost posljednjeg parametra su ključne riječi definirane u HTML specifikaciji. Pogledat ćemo ih u odjeljku o okvirima.

Neki organi za unos informacija i hiperveze omogućuju vam pomicanje fokusa unosa između njih pomoću tipke tab, tj. jednim pritiskom ove tipke aktivira se sljedeći organ unosa uključen u opći niz. Redoslijed kretanja između kontrola uključenih u opću sekvencu specificiran je pomoću parametra tabindex. Vrijednost ovog parametra je redoviti pozitivni cijeli broj, a što je taj broj veći za bilo koji organ za unos podataka ili hipervezu, to će kasnije biti na redu prilikom pomicanja fokusa unosa. Naravno, nijedan par elemenata dizajna web stranice ne bi trebao imati istu vrijednost za ovaj parametar, inače ih preglednik jednostavno neće uključiti u niz elemenata kada se fokus unosa pomakne.

Međutim, osim pristupa uzastopnim pritiskom na tipku tab, možemo koristiti parametar pristupne tipke čija je vrijednost znak. Kada korisnik pritisne tipku koja je zadužena za unos zadanog znaka, fokus unosa se automatski prebacuje na željenu hipervezu u čiju je deklaraciju ugrađen parametar pristupne tipke, a korisnik ga može aktivirati bez korištenja miša, samo pritiskom na tipku . Pogledajmo mali primjer:

<а href="http://www.mysite.com/docl.html" tabindex="2" accesskey="U">

Nositelj hiperveze može biti ne samo tekst, već i grafička slika. Da biste to učinili, trebate postaviti oznaku koja deklarira umetanje grafike u sadržaj web stranice između oznaka<а>I. Ali činjenica je da na grafičku sliku možemo “objesiti” ne jednu, već nekoliko hiperveza, odnosno unutar slike je označeno nekoliko aktivnih područja, a klikom na svako od njih aktivira se odgovarajuća hiperveza. Ova tehnologija se zove segmentirana grafika.

Specijalizirane oznake koriste se za stvaranje sličnih grafika povezanih s više hiperveza. Prvo se deklariraju aktivna područja crteža, koja se nazivaju i segmenti. Cijeli njihov skup čini mapu aktivnih segmenata slike kojoj se dodjeljuje određeno ime. Zatim se naziv ove kartice povezuje sa samom slikom, deklariranom pomoću oznake . Pogledajmo tipičan primjer.

Listing 1.17

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/htm!4/strict.dtd">




<р>Ovo je normalan tekst.

U ovom primjeru možete vidjeti da prilikom deklariranja slike, u oznaci umećemo parametar usemap, čija je vrijednost naziv mape aktivnih segmenata slike povezanih s hipervezama. Ispred naziva mape aktivnog segmenta koji se koristi umeće se simbol hash. Opis ove karte nalazi se između oznaka . U isto vrijeme, početna oznaka

Karta se sastoji od opisa segmenata. Svaki segment je opisan pomoću jedne oznake<агеа>. Aktivne segmente možemo primijeniti u tri različita oblika: pravokutnike, krugove i poligone. Oblik se specificira pomoću traženog parametra oblika. Kao vrijednost ovog parametra možemo koristiti jednu od tri unaprijed postavljene vrijednosti.

• Značenje ispravan koristi se za stvaranje pravokutnih vrućih točaka.
• Značenje krug koristi se za stvaranje kružnog segmenta.
• Značenje poli omogućuje stvaranje aktivnih segmenata u obliku konveksnih poligona.

Nakon što smo odredili vrstu forme, potrebno je točno odrediti njihovu veličinu i položaj na našoj grafičkoj slici. Da biste to učinili, upotrijebite parametar coords, čija je vrijednost popis koordinata koje definiraju aktivni segment. U ispisu 1.17 možemo vidjeti da su koordinate u zajedničkom popisu odvojene pravilnim zarezom. Koordinate se broje od gornjeg lijevog kuta slike koji ima koordinate (0;0).

Za pravokutne segmente navedene su koordinate gornjeg lijevog i donjeg desnog kuta. A za poligone, koordinate svih točaka navedene su redom, redoslijedom kojim su povezane linijama. Naravno, prvi i zadnji par koordinata moraju se podudarati, inače će poligon biti otvoren i aktivni segment neće biti obrađen.

Označiti<аrеа>Uključen je i parametar href čija je vrijednost URL resursa na koji upućuje hiperveza ovog segmenta.
Ali ovaj parametar, iznenađujuće, nije potreban. U slučaju kada je segment kreiran, ali ne bi trebao biti povezan s hipervezom, trebao bi se koristiti nohref parametar, koji nema nikakvog značaja.
Ali potreban parametar za oznaku<аrеа>sve je jednostavno tako. Ovo je alt parametar čija je vrijednost tekstualni niz koji je alternativni prikaz crteža. Kao što znamo, ova se linija prikazuje kao savjet kada korisnik prijeđe pokazivačem miša iznad objekta. U našem slučaju takav objekt je aktivni segment ugrađen u grafičku sliku.

Također u oznaci<агеа>, kao i obične oznake hiperveze, koriste se tabindex i parametri pristupne tipke, koji vam omogućuju da aktivirate hipervezu bez korištenja miša, koristeći samo tipkovnicu. Pogledali smo strukturu vrijednosti ovih parametara malo ranije. Kopajući malo od teme, treba napomenuti da svaki pravi Webmaster svakako mora koristiti ove parametre, jer samo njihova upotreba može jamčiti aktivaciju hiperlinkova bez korištenja miša.

Dakle, shvatili smo korištenje tehnologije segmentirane grafike. Ali nismo naučili sve o poveznicama. HTML specifikacija definira oznaku , što ne stvara uobičajenu hipervezu, već neku vrstu veze između prikazanog dokumenta i neke dodatne datoteke. Oznake može se postaviti samo u odjeljak glave HTML dokumenta, između oznaka I Kao primjer korištenja oznake koju razmatramo Može se dati sljedeći fragment koda:

Listing 1.18

"http://www.w3.org/TR/html4/strict.dtd">

Ovim fragmentom ukazujemo da ova web stranica sadrži drugo poglavlje nekog opsežnog dokumenta, a uz pomoć oznaka Označavamo poveznice na web stranice koje sadrže sadržaj, kao i prethodno i sljedeće poglavlje. Tip dokumenta na koji vodi poveznica određuje se pomoću poznatog parametra rel. Obični preglednik, naravno, neće moći obraditi i prikazati takve poveznice na bilo koji način. Uvedeni su u HTML kako bi se kreirali dokumenti koji bi se obrađivali pomoću određenih specijaliziranih aplikacija koje su omogućile izradu sustava za upravljanje dokumentima na temelju ovog formata. Ali oskudne ugrađene mogućnosti HTML-a za stvaranje cjelovitih sustava za upravljanje dokumentima očito nisu bile dovoljne, a kada je razvijen XML standard, programeri su sretno promijenili svog favorita.

Dakle, ispada da na običnim web stranicama oznaka apsolutno beskorisno? Ne baš. Samo uz pomoć ove oznake možemo povezati web-stranice s vanjskim listovima stilova, moćnim sredstvom za kontrolu prikaza dokumenta u pregledniku. No, o listovima stilova naučit ćemo nešto kasnije, u drugom poglavlju. Tamo ćemo pogledati i primjer korištenja oznake . Za sada, sve što trebamo učiniti je navesti parametre ove oznake. Svi ovi parametri primjenjuju se u oznakama<а>s istim mogućim vrijednostima, pa nećemo detaljno razmatrati svaki parametar, već ćemo ih samo ukratko navesti:

• skup znakova- označava kodiranje dokumenta na koji vodi poveznica;
• href- kao vrijednost se koristi URL dokumenta na koji vodi poveznica;
• hreflang- vrijednost je kodna oznaka jezika na kojem je napisan povezani dokument;
• tip- postavlja vrstu dokumenta na koji vodi poveznica;
• rel- postavlja status dokumenta na koji upućuje poveznica u odnosu na izvorni dokument;
• rev- postavlja status izvornog dokumenta u odnosu na onaj na koji ova poveznica upućuje;
• medijima- označava vrstu uređaja na kojem će se prikazati dokument na koji vodi poveznica.

Trenutno podržani dokumenti prikazuju se na običnim monitorima, na brajevim monitorima dizajniranim za osobe s oštećenjem vida, za uređaje za ispis i za govorne uređaje. I, naravno, uz ove parametre, koristi se skup dodatnih identifikacijskih parametara zajedničkih svim oznakama.

Ostaje nam da razmotrimo samo jednu oznaku koja služi za posluživanje hiperveza. Kao što znamo, možda nećemo pružiti puni URL za dokumente s hipervezama sve dok se dokument nalazi na istoj web stranici kao i izvorna web stranica. Ali pokazalo se da možemo učiniti istu stvar s hipervezama na web stranice koje su dio drugih stranica.

Korištenje oznake postavili smo osnovu za hiperveze sa skraćenim vrijednostima parametra href. Pokušajmo demonstrirati rad ovog mehanizma na jednostavnom i jasnom primjeru:

"http://www.w3.org/TR/html4/strict.dtd">



<Р>Tekst<А href="/pages/birds.gif">Veza

Kao vrijednost potrebnog parametra oznake href definiramo dokument koji je osnova za sadržaj web stranica naše stranice. I sada, ako u tijelu našeg HTML dokumenta koristimo hipervezu sa skraćenim URL-om, tada naziv domene za ovaj URL neće biti naziv izvorne web-lokacije, već onaj naveden u oznaci . Dakle, u primjeru hiperveza upućuje na dokument

s URL-a www.mysite.com/pages/birds.gif.

Treba pojasniti da oznaka smješten u zaglavlju dokumenta između oznaka I .

I to je sve što vam možemo reći o korištenju hiperveza u HTML-u.

Glavna značajka HTML dokumenta je prisutnost u njemu hiperveze(ili samo veze) na druge dokumente, stranice, datoteke, slike itd. Upravo je mogućnost umetanja poveznica na stranice na objekte izvan nje učinila Internet tako popularnim i lakim za korištenje. Stoga, kada kreirate svoju web stranicu, uvijek se sjetite "čarolije" poveznica.

U ovoj lekciji ćemo govoriti o kako stvoriti vezu na web mjesto, na njegovu zasebnu stranicu ili datoteku. Naučit ćete kako promijeniti tekst linka, kako ga otvoriti u novom prozoru, kako napraviti link na sliku, što su vanjski i interni linkovi i još mnogo toga. Osim toga, već imate informacije o radu s vezama, koje smo dotakli u prethodnim lekcijama (na primjer, razgovarali smo o tome kako možete promijeniti boju veze).

Sve u svemu, ovaj će vodič učiniti vaše razumijevanje stvaranja poveznica potpunim i dovoljnim. Shvatit ćete kako stvoriti hipervezu u HTML-u i zašto. I naučit ćete kontrolirati njegova svojstva.

§ 1. Link na datoteku, link na web stranicu, link na stranicu

Brojna pitanja o tome kako se poveznica na datoteku razlikuje od poveznice na web mjesto ili njegovu pojedinačnu stranicu natjerala su me da odgovor stavim na sam početak ove lekcije. Odgovor je: ništa. Sve navedene veze su vanjske izvornik stranici i nastaju na isti način.

Kako mi misli ne bi divljale, sve ću vam pokazati na primjeru.

U pregledniku ćemo vidjeti ovo:

U pregledniku ćemo vidjeti ovo:

Kao što možete vidjeti, sve vrste poveznica kreirane su na isti način. Jedina je razlika adresa objekt na koji se upućuje. Sada prijeđimo na glavni dio lekcije.

§ 2. Stvaranje vanjskih poveznica

Veze se međusobno razlikuju po vanjski I unutarnje, kao i na tekst I grafički. Vanjski linkovi vode izvan html stranice, interni linkovi vode na različite dijelove isto stranice. Tekstualni linkovi su tekst (standardno je označen plavom bojom i podcrtan), a grafički linkovi sadrže sliku kao objekt na koji je potrebno kliknuti da biste otišli. Sve ove vrste poveznica stvorene su u HTML-u pomoću oznake (skraćenica za sidro). Pogledajmo ga pobliže.

Za izradu vanjske poveznice na mjesto, stranicu ili datoteku upotrijebite atribut oznake - href. Vrijednost ovog atributa je URL mjesto, stranicu ili datoteku (o tome smo govorili gore). Između oznaka nalazi se vidljivi dio poveznice (link anchor), odnosno ono što vidimo na ekranu preglednika. Sidro veze može biti običan tekst (tekstualna poveznica) ili grafička slika (slika poveznica). Veza za sliku stvara se umetanjem poznate oznake između oznaka i . Općenito, sintaksa za stvaranje veze izgleda ovako:

Na primjer, da biste stvorili tekstualnu vezu na početnu stranicu ove stranice, morate napisati sljedeći HTML kod:

http://www.seoded.ru/"> Početna stranica web stranice

U pregledniku će izgledati ovako:

Kao što sam napisao na samom početku ove lekcije, boja teksta veze (anchor) može se promijeniti pomoću . Općenito, na tekst veza možete primijeniti ista pravila kao i na glavni tekst stranice, tj. istaknuti ga podebljano, kurzivom, koristiti naslove itd.

§ 2.1 Grafičke veze (veze na slike)

Kao što sam rekao gore, da biste stvorili vezu za sliku, morate koristiti . Primjer takve veze izgleda ovako:

I preglednik će prikazati:

Prema zadanim postavkama, preglednik okružuje sliku u okviru grafičke veze. Ako je to nepoželjno, onda atribut granica označiti IMG morate dodijeliti vrijednost 0:

border="0">

Početna stranica

§ 3. Interne poveznice

Interne veze koriste se za ugodno kretanje kroz stranice s puno sadržaja. Uz njihovu sam pomoć napravio “Sadržaj lekcije” (vidi na početku ove stranice). Interne poveznice kreiraju se na isti način kao i vanjske poveznice. Samo u vrijednosti atributa href naznačeno je sidro veze. Sidro se stvara atributom Ime:

name="anchor name">tekst

A naziv sidra postavlja se proizvoljno. Ovdje vrijedi reći da svi preglednici ne razumiju ruske nazive sidra, stoga preporučujem korištenje latinice. Tekst između oznaka za stvaranje sidra nije potreban i najčešće nije naveden.

I ospice se nalaze na onim mjestima na stranici gdje bi korisnik trebao otići nakon klika na link.

Kao što sam rekao gore, u atributu href internog linka umjesto adrese navodi se naziv željenog sidra uz obavezan hash simbol ( # ) ispred njega. Pogledajmo to na primjeru.

Napravio sam sidro s imenom zagolovok i stavio ga uz naslov ove lekcije (“Hiperveze u HTML-u”). Kod sidra je sljedeći:

name="zagolovok">

href="#zagolovok">Na naslov

A u pregledniku ovako:

Ako ste primijetili da se URL u adresnoj traci preglednika promijenio nakon klika na internu poveznicu na naslov:

Na originalnu adresu:

http://www..html

http://www..html#zagolovok

Pomoću ove značajke možete se povezati s određenom lokacijom na stranici s bilo kojeg izvora na Internetu! Odnosno, recimo da ste napravili stranicu s podužim člankom o nečemu (ili objavili veliki broj fotografija na stranici) i označili je internim poveznicama. Dok ste bili u , morali ste se povezati ne samo na stranicu sa člankom (ili fotografijama), već i na određeno mjesto na njoj (ili određenu fotografiju). Koristeći opciju s internom poveznicom u adresi, lako možete postići ono što trebate.

§ 4. Apsolutne i relativne reference

Početna stranica

Ali s relativnim vezama malo je kompliciranije. U takvim poveznicama navedena je i adresa relativno korijensku mapu stranice (onu u kojoj se nalazi glavna stranica), ili u odnosu na izvornu stranicu. Takve poveznice su potrebne, na primjer, ako se stranica nalazi na vašem kućnom računalu. Ili ovo nije stranica, već stranica koja je pokazivač na druge dokumente.

Izostavimo to, moramo se povezati na stranicu clienty.html koji leži u jednoj mapi s glavnom stranicom stranice. Tada će relativni kod veze izgledati ovako:

/klienty.html">Klijenti

Sada pretpostavimo da se u istoj mapi kao i glavna stranica nalazi mapa zakazy i već u tome nalazi se stranica klienty.html Tada će kôd za relativnu vezu izgledati ovako:

/zakazy/klienty.html">Klijenti

Sada pogledajmo stvaranje hiperveza u odnosu na izvornu stranicu. Recimo da imamo stranicu cijena.html(izvorna stranica) i s nje se trebate povezati na stranicu clienty.html Postoje sljedeće tipične opcije:

1. Nalaze se stranice price.html i clienty.html u jednoj mapi.

klijenty.html">Klijenti




2. u korijenskoj mapi stranice, stranica cijena.html nalazi se u mapi zakazy jednu razinu više).

Kod će izgledati ovako:

../klienty.html">Klijenti

Dvije točke označavaju da se morate pomaknuti iz trenutne mape na višu razinu.




3. Stranica klienty.html i mapa zakazy nalaze se u korijenskoj mapi stranice, mebel folder nalazi se u mapi zakazy, stranica cijena.html nalazi se u mapi mebel(tj. stranica klienty.html u odnosu na originalnu stranicu price.html leži dvije razine više).

../../klienty.html">Klijenti

Odnosno, svaka je razina označena s dvije točke i kosom crtom " / ».




4. u korijenskoj mapi stranice, stranica clienty.html nalazi se u mapi zakazy(tj. sada stranica klienty.html u odnosu na originalnu stranicu price.html leži jednu razinu niže).

zakazy/klienty.html">Klijenti

U ovom slučaju ne koriste se točke i kose crte.




5. Stranica price.html (originalna stranica) i mapa zakazy nalaze se u korijenskoj mapi stranice, mebel folder nalazi se u mapi zakazy, stranica clienty.html nalazi se u mapi mebel(tj. stranica klienty.html sada je u odnosu na originalnu stranicu price.html nalazi se dva nivoa ispod).

zakazy/mebel/klienty.html">Klijenti




6. U korijenskoj mapi stranice postoje dvije mape: zakazy i oplata. Stranica clienty.html nalazi se u mapi zakazy, izvorna stranica cijena.html nalazi se u mapi oplata(tj. obje stranice lažu u različitim mapama jednu razinu niže iz korijenske mape stranice).

../zakazy/klienty.html">Klijenti

§ 5. Link na e-mail

Da bi stvoriti poveznicu na e-poštu, potreban umjesto URL-a u vrijednosti atributa href napišite adresu e-pošte koja označava protokol ( mailto:). A onda kada kliknete na takvu vezu, otvorit će se prozor programa za e-poštu s adresom e-pošte unesenom u polje "Prima". U HTML kodu to izgleda ovako:

mailto: [e-mail zaštićen]">Moja pošta

A u pregledniku ovako:

title="Idite na glavnu stranicu">!} Početna stranica

§ 7. Zaključak

Ovo su osnovne informacije o stvaranje poveznica u HTML-u. Ovo zaključuje ovu lekciju. A ova činjenica sugerira da ste već savladali većinu osnova HTML-a.

Preporučujem da sada ponovno prođete kroz prethodne odjeljke, a zatim izradite potpunu HTML stranicu posvećenu, na primjer, vašoj voljenoj osobi. Po Vašem dizajnu i Vašim željama. Zatim to objavite na nekoj web stranici (naravno, ako je imate, onda na njoj) i u potpunosti se divite svojoj prvoj web stranici.

Možete ga pokazati svojim prijateljima ili bilo kome drugom. Općenito, osjećajte se kao vlasnik web stranice. A onda, nakon malo veselja povodom takvog događaja, prijeđite na sljedeći odjeljak, u kojem ću vam reći o stvaranju tablica u HTML-u.

A ovo će već biti prvi korak ka pretvaranju vaše osobne stranice u ozbiljan resurs.

Pozdrav, dragi čitatelji bloga. Danas želim detaljnije razgovarati o tome što je hiperveza u HTML-u, kako ih možete postaviti u tekst na web stranici, kako napraviti vezu na sliku, kako pravilno koristiti oznaku "A" i njene atribute " Href” i “Target blank” (otvori u novom prozoru).

Općenito, hiperveza je ključni element. Osim toga, poveznice su danas jedan od tri glavna čimbenika koji utječu na uspješnu promociju web stranice. Njihova ispravna upotreba i razumijevanje, na primjer, kako na njih utječu tražilice, može značajno utjecati na promet vašeg resursa.

Što su hiperveze i sidra?

Dakle, već smo se upoznali sa zastarjelim oznakama koje se ne preporučuju za svakodnevnu upotrebu. Nastavimo naše daljnje upoznavanje.

Da bismo napravili hipervezu u Html kodu, trebat ćemo koristiti i oznaku A. Za nju možemo koristiti razne atribute, postaviti npr. URL adresu cilja za kretanje po ovoj vezi (href) ili uputiti da se otvori u novom prozoru (target= _blank). Ali razgovarajmo o svemu redom.

Kao što smo maloprije spomenuli, hiperveze su ključni element Html jezika i omogućuju vam povezivanje na unutarnje stranice vlastite stranice i na druge internetske resurse. Reći ću banalnost - praćenje poveznice vrši se klikom na nju (što ste mislili?).

Osim što se mogu podijeliti na unutarnje i vanjske također može biti službeno i koristiti isključivo za potrebe preglednika s kojim će se otvarati stranice Vaše stranice.

U tom slučaju neće biti vidljivi na stranici jer napisani su u području Head izvornog koda dokumenta, čiji sadržaj nije prikazan na stranici (spomenuo sam strukturu koda jezika za označavanje hiperteksta u članku o tome).

Hiperveze usluga ne stvaraju se pomoću oznake "A" (kao obične), već pomoću oznake "Veza". Ima dosta zadataka koje obavljaju, na primjer, uz njihovu pomoć, vanjske datoteke s CSS kaskadnim listovima stilova ili, na primjer, .

Ali danas nećemo razmatrati kako se mogu stvoriti (vrijeme će još doći do njih), ali ćemo se detaljno zadržati na vidljive veze, koji se mogu kreirati unutar Body područja i sukladno tome će biti prikazani na web stranici.

Ipak, sve hiperveze (i vidljive i servisne) imaju jednu zajedničku stvar - sve sadrže obavezni atribut Href. U njemu se kao njegova vrijednost upisuje određeno mjesto u dokumentu (ako je prethodno označeno sidrom) ili adresa samog dokumenta na Internetu (u Hrefu ili, drugim riječima, put do stranice ili je zapisana neka druga datoteka).

Hiperveze su navigacijski elementi koji su dizajnirani da vas prebace na druge dokumente na mreži ili za navigaciju kroz sadržaj web stranice koju već gledate koristeći oznake unaprijed napravljene u tijelu dokumenta, koje se također nazivaju Html sidra(sidro).

Ovdje može biti zabune, jer... u SEO-u riječ je , ali u Html-u "anchor" znači sidro (prijevod riječi anchor) ili oznaku u tekstu, na koju se onda može referencirati.

Zašto se sidra koriste u HTML-u? Ovo je vrlo zgodno kada kreirate navigaciju na prilično dugačkoj web stranici. Vjerojatno ste ga vidjeli na Internetu kada se na stranici koju otvorite odmah ispod naslova nalaze nazivi dijelova članka objavljenog na ovoj stranici.

Na taj način čitatelj će moći odmah otići do mjesta na stranici gdje se nalazi informacija koja ga zanima, a ne mučiti se listanjem teksta i vizualnim traženjem pravog mjesta. Praktično i poboljšava.

Kako se stvaraju sidra i hashovi veza

Dakle, naš će zadatak u ovom slučaju biti instalirati sidra na pravim mjestima na stranici (dokumentu), što će općenito izgledati ovako:

Oni. da biste napravili sidro, potrebno je u praznu oznaku hiperveze “A” unijeti jedan atribut “Ime” za čiju vrijednost koristite jedinstvenu oznaku koja ne smije sadržavati razmake i u kojoj možete koristiti latinična slova, brojeve , crtice i podvlake (u potpunoj analogiji s pravilima po kojima možete kreirati URL-ove - ,,,[_],[-]).

U tom slučaju sidro neće biti vidljivo na samoj stranici jer Nismo napisali nikakav tekst unutar "A" elemenata. Međutim, sidra stvorena na ovaj način zagadit će Html kod, pa se sada koriste puno češće od sidara drugi način za stvaranje oznake.

U ovom slučaju ne morate stvoriti praznu oznaku "A", već možete koristiti bilo koji element koji je već dostupan na pravom mjestu u tekstu. Na primjer, to mogu biti .

Oni. za stvaranje analoga sidra, dovoljno je dodijeliti univerzalni ID atribut bilo kojoj oznaci (može se koristiti za sve oznake, i, usput, rade na temelju njega), na primjer, ovako:

Tekst naslova

Dakle, sada, umjesto stvaranja potrebnog broja sidara koji zagađuju kod i trenutno nisu valjani (ne preporučuje W3C konzorcij, koji razvija Html jezik), jednostavno dodajemo Id.

Ispostavilo se da ćete za to morati, kao i obično, umetnuti traženi atribut "Href" unutar hiperveze "A", ali čija će vrijednost biti formirana od naziva željene oznake (sidra) ispred kojeg hash znak "#", koji se također naziva hash (otuda, usput, noge često korištenog naziva rastu: link hash):

će se pomaknuti na mjesto stranice označeno sidrom

Imajte na umu da kada kliknete na takvu hipervezu, neće se otvoriti novi dokument. Preglednik će skrolati već otvorenu stranicu do te pozicije da mjesto u tekstu gdje ste umetnuli anchor zauzme poziciju na samom vrhu ekrana. Bilo bi logično pretpostaviti da bi vrijednosti svih oznaka (sidra) na jednoj stranici trebale biti jedinstvene kako bi se izbjegla zabuna za preglednik.

Ako za to napravite sidro pomoću ID atributa u prikladno smještenoj oznaci, tada trebate uzeti u obzir da uz ograničenje vrste korištenih simbola (,,,[_],[-]), ID vrijednost je obavezna mora započeti latiničnim slovom.

Tada se svi važeći znakovi mogu staviti u bilo kojoj količini, ali prvi znak oznake sidra u vrijednosti ID atributa mora biti slovo (latinica, naravno). Inače, takvo sidro umetnuto u Html kod neće raditi (u većini preglednika).

Ako ne napišete nikakav naziv oznake sidra (href="#") nakon simbola hash “#”, tada takva hiperveza pomiče stranicu na vrh. Ovako možete stvoriti jednostavan gumb "Natrag na vrh" tako da napravite vezu od slike (o tome ćemo malo kasnije) i umetnete je u predložak svoje web stranice, na primjer, ovako:

Href je obavezni atribut oznake svake hiperveze

Prijeđimo sada s navigacije unutar dokumenta (koristeći sidra) na vanjsku navigaciju, tj. morat ćemo napraviti poveznice koje vode do drugih dokumenata na našoj ili drugoj stranici. Sada u atributu Href više ne moramo specificirati oznake sidra, već putanju do datoteke koju treba otvoriti (stranica je, prema dizajnu, datoteka učitana u preglednik za kasniji prikaz).

sidro

O tome bismo trebali dalje govoriti, ali o njima sam već detaljnije pisao u spomenutom materijalu, pa vjerojatno nema smisla ponavljati se. Ali morate znati kako postaviti stazu do datoteke u Href atributu hiperveze koju ste napravili. Stoga se ne pokušavajte upoznati s priloženim materijalom.

Međutim, dopustite mi da vas podsjetim da je pri izradi URL-ova poželjno koristiti samo sljedeći znakovi: (,,,[_],[-]) i nemojte koristiti razmake. Ako uzmemo u obzir sadržaj atributa Href za apsolutne veze, tada se on može shematski prikazati na sljedeći način:

Ako odbacimo ono što ćete rijetko koristiti, onda to isto možete predstaviti u nešto pojednostavljenom obliku:

Protokol (obično http)://domain_name (na primjer, web stranica)/path_to_file (web stranice)

Osim jednostavnog http protokola, na internetu se mogu pronaći poveznice s https protokolom koji se razlikuje po tome što koristi enkripciju. Potonji se koristi na stranicama gdje postoji potreba za zaštitom kanala razmjene podataka između poslužitelja i klijentovog preglednika. Na primjer, koristi se u uslugama elektroničkog novca Web Money.

Na internetu možete pronaći različite verzije Href sadržaja, primjerice ovu:

https://site/videokursy

Ili ovo (s ekstenzijom datoteke):

Https://site/seo/kak-raskrutit-sajt.html

To ne mijenja bit, ali ako na kraju sadržaja atributa Href unutar hiperveze stoji kosa crta, to znači da se više ne pristupa datoteci, već mapi u kojoj će se nalaziti odgovarajući indeksni objekt pretraživati ​​(za više detalja pročitajte gore navedeni članak o url adresama).

Skinite nešto s linka

Kao što vidite, ova se hiperveza ne razlikuje od obične, preglednik samo razumije da treba preuzeti datoteku s ekstenzijom zip, a ne pokušati je otvoriti za pregled, kao što su, na primjer, datoteke dokumenata s html proširenje. Iako, sve to možete prilagoditi čisto pojedinačno u svom pregledniku kako bi odgovaralo vašim osobnim potrebama.

Preuzmite s Ftp poslužitelja

Također možete, na primjer, stvoriti (poštu) dodavanjem odgovarajućeg URL-a u Href:

Napisati pismo

Kada kliknete na takav link, na vašem računalu će se otvoriti zadani mail program koji koristite (možete konfigurirati preglednik tako da se linkovi s mailto u Hrefu otvaraju u Gmailu itd.) i pojavit će se dijalog za kreiranje novog pisma, u kojem će se u polje “Prima” » unijeti poštanska adresa navedena u Href.

Zapravo, možete napraviti prilično složene e-mail veze, uz pomoć kojih će se popuniti ostala polja u dijaloškom okviru za slanje e-pošte, ali to se koristi dosta rijetko.

I općenito, webmasteri su nedavno praktički prestali koristiti hiperveze s mailto u Hrefu zbog činjenice da ih spameri analiziraju sa svim posljedicama. Bolje ga je izraditi na web stranici, iako još uvijek imam sve prikazano u klasičnom obliku na kontakt stranici. Trebao bih ga promijeniti u slobodno vrijeme (ili ne... razmislit ću o tome).

Kako otvoriti vezu u novom prozoru (cilj je prazan)

Prilikom kreiranja poveznica u Html kodu često se susrećemo s pitanjem – u kojem prozoru preglednika otvoriti dokument na koji vodi? Prema zadanim postavkama, otvorit će se u postojećem prozoru, preklapajući stranicu s koje je ova hiperveza postavljena.

Osobno, veliki sam navijač Ciljni atribut s praznom vrijednošću, koji vam omogućuje da otvorite stranicu u novom prozoru, ostavljajući otvorenim dokument na kojem je postavljena ova poveznica. Ne znam kako to utječe na upotrebljivost mog bloga, ali ova mi se opcija više sviđa i koristim je u gotovo svim slučajevima.

Također volim konfigurirati otvaranje poveznica u tražilicama. u novom prozoru tako da je problem uvijek pri ruci i da mu se uvijek možete vratiti. U ove svrhe, kao što je već spomenuto, Html koristi poseban atribut Target, koji prema zadanim postavkama ima vrijednost Self:

Otvara dokument u istom prozoru

Iako, naravno, nitko ne piše target="_self" u oznaci "A", jer se ova vrijednost koristi prema zadanim postavkama, ali ako trebate otvoriti stranicu u novom prozoru, morat ćete napisati target="_blank ":

Otvara se u novom prozoru

Imajte na umu da su vrijednosti atributa Target zapisane s podvlakom na početku(_blank), jer je to navedeno u Wc3 validatoru, koji sadrži rupe u jeziku za označavanje hiperteksta. Ono što je vrijedno pažnje je da Html pruža mogućnost promjene zadane opcije otvaranja poveznice.

Na primjer, ako želite da se sve hiperveze na vašem web-mjestu otvore u novom prozoru, tada ćete morati pisati u području Head predloška koji koristite oznaka Baza s atributom target="_blank":

ima tu još nešto

A sada, ako želite otvoriti neku od poveznica u istom prozoru, tada ćete morati dodati target="_self" u njenu oznaku "A", jer prema zadanim postavkama sada koristite _blank. Oh, kako.

Inače, element Base sam upotrijebio na gore opisani način, ali sam u njega ugradio i područje koda s nekoliko hiperlinkova koje je trebalo otvoriti u novom prozoru. Oni. Također sam upotrijebio završnu oznaku Base unutar područja tijela i uspjelo je. Iako se takav kod, naravno, ispostavlja nevažećim.

Boje hiperveze lebdite i kliknite - kako ih promijeniti

Html jezik dizajniran je tako da se korisnik može lako kretati koji je link već otvorio, a koji je ostao nedirnut.

U tu svrhu koristi se boja koja će se promijeniti kada korisnik klikne na hipervezu i dokument povezan s njom bude uspješno otvoren. Vraćajući se na izvornu stranicu, korisnik će vidjeti da je poveznica koju je posjetio promijenila boju. Svi preglednici mogu izvesti ovaj trik.

Prema zadanim postavkama, u čistom Html-u (bez korištenja CSS svojstava), veze su podvučene i mogu imati tri opcije boja:

1. Plava je boja za nepraćene poveznice na koje korisnik još nije kliknuo
2. Crveno - prihvaća ga hiperveza odmah nakon klika na nju i sve dok se traženi dokument ne preuzme u preglednik korisnika preko mreže (u modernim uvjetima nije nimalo lako uhvatiti ovaj trenutak i sve je krivo na svakom koraku)
3. Ljubičasta je boja za potrošene poveznice koje je korisnik već slijedio

U Html 4.01 ove su boje zadane za veze, ali mogu se mijenjati pomoću posebnih atributa koji su upisani u oznaku Body, a koju možete pronaći u jednoj od datoteka predloška koji koristite. Za promjenu sve tri boje koriste se tri atributa:

1. Veza—postavlja boju neposjećene veze
2. Alink - boja trenutno aktivne, koju obrađuje preglednik
3. Vlink - boja hiperveze koju je korisnik već posjetio

Zapamtite, već sam pisao o tome kako . Sukladno tome, navedeni atributi mogu izgledati ovako:

Naravno, ovdje se mislilo na čistu Html opciju, kada iz nekog razloga nije zgodno ili moguće koristiti stil, inače se sve te boje mogu lako postaviti i promijeniti pomoću .

Kako od slike napraviti poveznicu - dva načina

Pa, ovdje je sve vrlo jednostavno. Jer element malim slovima, onda se uglavnom svaka slika može smatrati samo slovom, možda samo veće veličine.

U slučaju čistog HTML-a oko slike koju ste napravili poveznicu, imat ćete okvir širok tri piksela. Štoviše, boja ovog okvira u potpunosti će odgovarati bojama veza koje su prihvaćene za vašu stranicu (o njima smo govorili malo više u tekstu).

Da biste uklonili dodavanje obruba na sliku koju ste hipervezom povezali, trebate dodati atribut Obrub s vrijednošću nula u oznaku slike:

Ovo je vrlo jednostavan način da slika postane poveznica, ali postoji i složenija opcija tzv slikovna karta. U ovom slučaju, zahvaljujući korištenju prilično velikog broja HTML oznaka i atributa, od jedne slike možete napraviti cijelu kartu veza s aktivnim područjima (na koje se može kliknuti i imaju različite oblike - pravokutnik, krug, poligon).

Na primjer, možete postaviti veliku fotografiju na svoju stranicu i imati je tako da kada kliknete na različite njezine dijelove, otvaraju se različite stranice s različitim hipervezama. Zapravo, trebalo bi dosta vremena da se opiše slikovna mapa i malo je vjerojatno da će je itko koristiti, pa to neću učiniti jer "igra nije vrijedna svijeća."

Sretno ti! Vidimo se uskoro na stranicama bloga

Više videa možete pogledati ako odete na

Moglo bi vas zanimati

Select, Option, Textarea, Label, Fieldset, Legend - Html oznake za oblik padajućih popisa i tekstualnih polja
Kako ubaciti link i sliku (fotografiju) u HTML - IMG i A tagovi
Iframe i Frame - što su i kako najbolje koristiti okvire u Html-u
Razmaci i njihovo oblikovanje koda u Html-u, kao i posebni neprekinuti razmaci i druga mnemotehnika
Kako su postavljene boje u Html i CSS kodu, izbor RGB nijansi u tablicama, Yandex izlaz i drugi programi

(Više primjera pronaći ćete na dnu ove stranice)

HTML hiperveze (veze)

Označiti može se koristiti na dva načina: