Kreiranje jednostavne hiperveze u notepadu. Šta je link i kako napraviti hipervezu u HTML-u

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

Odnosno, kombinujemo upotrebu punog URL-a dokumenta i istovremeno ukazujemo na određeni njegov fragment, označen kao “anch3”.

Rice. 1.16. Prozor pretraživača koji prikazuje rezultat datoteke prikazan na Listingu 1.16

Treba napomenuti da ako je tekst sa hipervezom već prikazan u prozoru za prikaz, kao što je bio slučaj u našem posljednjem primjeru, onda neće doći do promjena. Ali sve što treba da uradite je da promenite veličinu prozora pregledača okomito kako biste sakrili poslednju liniju sadržaja, na šta hiperveza upućuje, a rezultat njene akcije može biti jasno prikazan.

Naravno, svi nazivi takvih markera, koji se određuju pomoću vrijednosti parametra name, moraju biti jedinstveni. Imajte na umu da HTML ne pravi razliku između velikih i velikih znakova. Stoga, ako naš HTML dokument definira dvije oznake koje će naknadno biti referencirane hipervezama koje se razlikuju samo u malim i velikim slovima, tada će se za HTML parser ugrađen u pretraživač, ovi identifikatori smatrati istim i 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. za postavljanje markera na bilo koju oznaku, nije potrebno koristiti oznaku<а>sa parametrom name, samo trebate koristiti parametar id.

Vrijednosti parametra name i parametra id su jedinstveni identifikatori elemenata u HTML dokumentu. Stoga, nijedna vrijednost parametra name ne smije odgovarati bilo kojoj vrijednosti parametra id.

Ali koju opciju biste trebali odabrati za svoje web stranice, koji parametar biste trebali koristiti? Ovdje je važno shvatiti da, iako parametar id može služiti u nekoliko namjena, kao što je identifikacija markera, kreiranje jedinstvenih identifikatora za izvršavanje DHTML skripti i stiliziranje, neki stari pretraživači možda neće prihvatiti ove identifikatore za ciljanje hiperveza.

Zajedno sa etiketom<а>parametar naslova se može koristiti za identifikaciju hiperveze do udaljenog korisnika. Vrijednost ovog parametra je tekstualni niz koji će se prikazati kao mali savjet kada korisnik pređe kursorom miša preko tražene hiperveze. Oglas za takvu hipervezu izgleda otprilike ovako:

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

Koristeći parametar hreflang, možemo odrediti jezik na kojem je napisan tekstualni sadržaj internetskog izvora na koji upućuje ova hiperveza. Vrijednost parametra je jedna od notacija standardnog jezika koju smo malo ranije pogledali u ovom poglavlju.
Ali jednostavno navođenje 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 charset-a, čija je vrijednost standardna oznaka kodiranja koji se koristi za prikaz tekstualnog sadržaja internetskog resursa na koji ukazuje hiperveza koju tražimo.

Koristeći parametar gel, možemo naznačiti svrhu dokumenta na koju hiperveza upućuje, odnosno vrijednost ovog parametra eksplicitno označava odnos između izvornog dokumenta i dokumenta na koji povezujemo. Korištenje ovog parametra nema utjecaja na to kako se hiperveza prikazuje ili kako se resurs preuzima, ali može biti korisno. Ako su web stranice namijenjene ne samo za pregled pomoću pretraživača, već i za obradu od strane nekih specijalizovanih aplikacija. Kao, na primjer, napredni pretraživači koji su u stanju da ispravno prepoznaju i obrađuju takve odnose između dokumenata, naznačene hiperlinkovima.

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

• Alternativni. Vrijednost označava da je dokument alternativni prikaz originalnog dokumenta. Ako hiperveza koristi lang parametar s vrijednošću koja se razlikuje od jezika izvornog dokumenta, tada se takva hiperveza obično smatra vezom do kopije izvornog dokumenta na drugom jeziku.
• Stylesheet. Označava da je dokument sa hipervezom lista stilova. Mehanizam za korištenje stilskih tablica detaljno je opisan u drugom poglavlju.
• Počni. Koristi se za označavanje početnog, početnog dokumenta određenog skupa dokumenata. Za web stranicu, ovo bi očigledno bila početna stranica.
• Sljedeći. Vrijednost se koristi ako su početni dokument i dokument s hiperlinkom dio nekog linearno uređenog niza dokumenata, a ovaj drugi je sljedeći po redu u odnosu na izvornu web stranicu.
• Prev. Vrijednost se koristi u istom slučaju kao i prethodna, ali sada označava da dokument u lancu nije sljedeći, već prethodni, u odnosu na početni dokument.
• index. Koristi se u hipervezama koje upućuju na dokument koji je indeksirani sadržaj originalne web stranice.
• Glossary. Vrijednost označava da dokument sadrži rječnik pojmova korištenih u izvornom dokumentu.
• autorsko pravo. Koristi se ako dokument sa hipervezom sadrži napomenu o autorskim pravima za sadržaj originalnog dokumenta.
• poglavlje. Koristi se u hipervezama koje upućuju na dokumente koji su odvojena poglavlja u određenom skupu dokumenata.
• odjeljak. Hiperveza s ovom vrijednošću parametra rel označava dokument koji je dio u općem skupu dokumenata koji čine jedinstvenu cjelinu sadržaja.
• pododjeljak. Značenje je neki nastavak koncepta na koji ukazuje prethodno značenje koje smo razmatrali. To znači da je dokument već pododjeljak
• Dodatak. Vrijednost označava da je dokument sa hipervezom prilog originalnom dokumentu.
• Upomoć. Koristi se za povezivanje sa dokumentima koji pružaju dodatne pozadinske informacije o sadržaju originalnog dokumenta.
• Bookmark. Koristi se za veze do HTML dokumenata koji sadrže veze do nekih odabranih ključnih fragmenata izvornog dokumenta.

Kada koristite ove vrijednosti, imajte na umu da će HTML parseri biti osjetljivi na velika i mala slova, tako da se morate striktno pridržavati pravopisa koji je dat na našoj listi.

Zapravo, u HTML-u postoji mogućnost kreiranja vlastitih vrijednosti za atribut koji razmatramo, ali da biste u potpunosti iskoristili ovaj parametar potrebno je koristiti specijalizirane alate za opisivanje ovih novih vrijednosti i softver koji ima za cilj prepoznavanje ovih tipova. od linkova. Pošto smo zainteresovani za pretraživače, ne moramo da kreiramo nove tipove linkova.

Ova tehnologija je zapravo palijativna, koja je osmišljena da pruži barem dio mogućnosti koje pruža novi jezik za opisivanje dokumenata na Internetu - XML ​​(extensible Markup Language), za koji se predviđa da će biti nasljednik i "ubica" Ali ne postoje rasprostranjeni XML pretraživači i aplikacije koje obrađuju XML dokumente. I ova tehnologija još dugo neće postati opšteprihvaćena, što znači da HTML tehnologija i dalje ima sva prava na život i da će se još dugo koristiti kao osnova za web stranice.

No, vratimo se na razmatranje atributa oznaka<а>. Atribut rev je suprotan atributu rel. Dok atribut rel specificira tip dokumenta na koji hiperveza upućuje, rev atribut specificira tip 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.

Koristeći ciljni parametar, specificiramo u kojem okviru želimo prikazati dokument na koji upućuje hiperveza. Činjenica je da se obično jedan dokument prikazuje u jednom prozoru pregledača. Ali u HTML-u je moguće podijeliti okvir za prikaz na nekoliko područja, nazvanih okviri, od kojih će svaki prikazati svoj vlastiti HTML dokument. Tehnologiju korišćenja okvira razmotrićemo u jednom od sledećih odeljaka ovog poglavlja, ali za sada ćemo samo primetiti da parametar target omogućava da eksplicitno navedete u kom okviru treba da se prikaže Web stranica. Postavljanje hiperveze pomoću ove opcije bi izgledalo otprilike ovako:

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

Takva hiperveza će uzrokovati da pretraživač učita web stranicu čiji je URL naveden kao vrijednost href parametra u gornji okvir čije je ime navedeno u ciljnom parametru. 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 vam omogućavaju da pomerate fokus za unos između njih pomoću tastera tab, tj. jednim pritiskom na ovaj taster aktivira se sledeći organ za unos koji je uključen u opštu sekvencu. A redoslijed kretanja između kontrola uključenih u opći niz specificira se pomoću parametra tabindex. Vrijednost ovog parametra je običan pozitivan cijeli broj, a što je veći ovaj broj za bilo koji organ za unos podataka ili hipervezu, to će kasnije biti pri pomicanju fokusa unosa. Naravno, nijedan par elemenata dizajna web stranice ne bi trebao imati istu vrijednost za ovaj parametar, inače ih pretraživač jednostavno neće uključiti u niz elemenata kada se fokus ulaza pomjeri.

Međutim, osim pristupa uzastopnim pritiskom na tipku tab, možemo koristiti parametar pristupnog ključa čija je vrijednost znak. Kada korisnik pritisne tipku koja je zaslužna za unos zadatog znaka, ulazni fokus se automatski prenosi na željenu hipervezu, u čiju deklaraciju je ugrađen parametar pristupnog ključa, 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">

Nosač 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 "okačiti" ne jednu, već nekoliko hiperveza, odnosno nekoliko aktivnih područja je istaknuto unutar slike, a klikom na svaku od njih aktivira se odgovarajuća hiperveza. Ova tehnologija se zove segmentirana grafika.

Specijalizirane oznake se koriste za kreiranje slične grafike povezane s više hiperveza. Prvo se deklarišu aktivne oblasti crteža, koje se nazivaju i segmenti. Cijeli njihov skup čini mapu aktivnih segmenata slike kojoj je dodijeljeno određeno ime. I tada je ovo ime kartice povezano 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 to možete vidjeti kada deklarirate sliku, u oznaci ubacujemo parametar usemap, čija je vrijednost naziv mape aktivnih segmenata slike povezanih s hipervezama. Hash simbol se umeće ispred imena mape aktivnog segmenta koja se koristi. Opis ove mape se nalazi 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: pravokutnici, krugovi i poligoni. Oblik je specificiran pomoću potrebnog parametra oblika. Kao vrijednost ovog parametra možemo koristiti jednu od tri unaprijed postavljene vrijednosti.

• Značenje rect koristi se za kreiranje pravougaonih vrućih tačaka.
• Značenje krug koristi se za kreiranje kružnog segmenta.
• Značenje poli omogućava kreiranje aktivnih segmenata u obliku konveksnih poligona.

Nakon što smo odredili vrstu forme, moramo precizno odrediti njihovu veličinu i lokaciju na našoj grafičkoj slici. Da biste to učinili, koristite parametar coords, čija je vrijednost lista koordinata koje definiraju aktivni segment. U Listingu 1.17 možemo vidjeti da su koordinate u dijeljenoj listi odvojene redovnim zarezom. Koordinate se računaju od gornjeg lijevog ugla slike, koji ima koordinate (0;0).

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

To tag<а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 se kreira segment, ali ga ne treba povezati na hipervezu, treba koristiti parametar nohref, koji nema značenje.
Ali obavezan parametar za oznaku<аrеа>sve je jednostavno tako. Ovo je alt parametar čija je vrijednost tekstualni niz koji predstavlja alternativni prikaz crteža. Kao što znamo, ova linija se prikazuje kao hint kada korisnik pređe kursorom miša preko objekta. U našem slučaju, takav objekt je aktivni segment ugrađen u grafičku sliku.

Takođe u oznaci<агеа>, kao i obične oznake hiperveze, koriste se parametri tabindex i pristupni ključ, koji vam omogućavaju da aktivirate hipervezu bez upotrebe miša, koristeći samo tastaturu. Pogledali smo strukturu vrijednosti ovih parametara malo ranije. Kopajući malo po temi, treba napomenuti da svaki pravi Webmaster svakako mora koristiti ove parametre, jer samo njihovo korištenje 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 vezama. HTML specifikacija definira oznaku , koji stvara ne uobičajenu hipervezu, već neku vrstu veze između prikazanog dokumenta i neke dodatne datoteke. Oznake može se postaviti samo u zaglavlje 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 veze do web stranica koje sadrže sadržaj, kao i prethodno i sljedeće poglavlje. Tip dokumenta na koji link upućuje se određuje pomoću poznatog parametra rel. Običan pretraživač, naravno, neće moći da obradi i prikaže takve veze ni na koji način. Oni su uvedeni u HTML za kreiranje dokumenata koji bi se obrađivali pomoću određenih specijalizovanih aplikacija koje su omogućile kreiranje sistema za upravljanje dokumentima zasnovanih na ovom formatu. Ali oskudne ugrađene mogućnosti HTML-a za kreiranje punopravnih sistema za upravljanje dokumentima očigledno nisu bile dovoljne, a kada je razvijen XML standard, programeri su srećno promenili svoje omiljene.

Dakle, ispada da na običnim web stranicama oznaka apsolutno beskorisno? Ne baš. Samo uz pomoć ove oznake možemo povezati web stranice sa eksternim stilovima, moćnim sredstvom za kontrolu prikaza dokumenta u pretraživaču. Ali o stilovima ćemo naučiti nešto kasnije, u drugom poglavlju. Tamo ćemo također pogledati primjer korištenja oznake . Za sada, sve što treba da uradimo je da navedemo parametre ove oznake. Svi ovi parametri se primjenjuju u tagovima<а>sa istim mogućim vrijednostima, tako da nećemo detaljno razmatrati svaki parametar, već ćemo ih jednostavno ukratko navesti:

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

Dokumenti koji su trenutno podržani prikazuju se na redovnim monitorima, na Brajevim monitorima dizajniranim za osobe sa oštećenim vidom, za uređaje za štampanje i za govorne uređaje. I, naravno, pored ovih parametara, koristi se skup dodatnih identifikacionih parametara zajedničkih za sve oznake.

Ostaje nam da razmotrimo samo jedan tag koji služi za posluživanje hiperlinkova. Kao što znamo, možda nećemo dati punu URL adresu za dokumente sa hiperlinkovima sve dok se dokument nalazi na istoj web stranici kao i originalna web stranica. Ali ispostavilo se da istu stvar možemo učiniti i sa hiperlinkovima ka web stranicama koje su dio drugih stranica.

Korištenje oznake postavljamo osnovu za hiperveze sa skraćenim vrijednostima href parametara. Pokušajmo demonstrirati rad ovog mehanizma koristeći jednostavan i jasan primjer:

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



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

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

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

Treba pojasniti da je oznaka postavljeno u zaglavlje dokumenta između oznaka I .

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

Glavna karakteristika HTML dokumenta je prisustvo u njemu hiperveze(ili samo veze) na druge dokumente, stranice, datoteke, slike itd. Upravo je mogućnost umetanja linkova na stranice do objekata izvan nje učinila internet tako popularnim i lakim za korištenje. Stoga, kada kreirate svoju web stranicu, uvijek imajte na umu „magiju“ veza.

U ovoj lekciji ćemo govoriti o kako kreirati link na web lokaciju, na posebnu stranicu ili datoteku. Naučićete kako da promenite tekst linka, kako da ga otvorite u novom prozoru, kako da napravite link do slike, šta su spoljni i unutrašnji linkovi i još mnogo toga. Osim toga, već imate informacije o radu sa vezama, koje smo dotakli u prethodnim lekcijama (na primjer, razgovarali smo o tome kako možete promijeniti boju veze u).

Sve u svemu, ovaj vodič će učiniti vaše razumijevanje kreiranja linkova potpunim i dovoljnim. Razumjet ćete kako napraviti hipervezu u HTML-u i zašto. I naučićete da kontrolišete njegova svojstva.

§ 1. Veza do datoteke, veza do web stranice, veza do stranice

Brojna pitanja o tome kako se link ka fajlu razlikuje od linka do sajta ili njegove pojedinačne stranice naterala su me da odgovorim na njega na samom početku ove lekcije. Odgovor je: ništa. Svi navedeni linkovi su eksterni original stranica i kreiraju se na isti način.

Kako ne bih pustio misli na volju, sve ću vam pokazati na primjeru.

U pretraživaču ćemo vidjeti ovo:

U pretraživaču ćemo vidjeti ovo:

Kao što vidite, sve vrste veza kreirane su potpuno isto. Jedina razlika je adresa objekt na koji se treba referencirati. Sada pređimo na glavni dio lekcije.

§ 2. Kreiranje eksternih veza

Linkovi se međusobno razlikuju vanjski I interni, kao i na tekst I grafički. Eksterne veze vode izvan html stranice, interne veze vode do različitih dijelova isto stranice. Tekstualne veze su tekst (podrazumevano, on je istaknut plavom bojom i podvučen), a grafičke veze sadrže sliku kao objekat na koji treba da kliknete da biste otišli. Sve ove vrste veza kreiraju se u HTML-u pomoću oznake (skraćeno od sidro). Pogledajmo to izbliza.

Za kreiranje eksterne veze na web lokaciju, stranicu ili datoteku koristite atribut oznake - href. Vrijednost ovog atributa je URL stranica, stranica ili datoteka (o tome smo razgovarali gore). Između oznaka nalazi se vidljivi dio linka (link anchor), odnosno ono što vidimo na ekranu pretraživača. Sidro veze može biti ili običan tekst (tekstualni link) ili grafička slika (link za sliku). Veza za sliku se kreira umetanjem poznate oznake između oznaka i. Općenito, sintaksa za kreiranje veze izgleda ovako:

Na primjer, da biste kreirali tekstualnu vezu do početne stranice ove stranice, trebate napisati sljedeći HTML kod:

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

U pretraživaču će izgledati ovako:

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

§ 2.1 Grafičke veze (linkovi sa slikama)

Kao što sam rekao gore, da biste kreirali vezu sa slikom, morate koristiti . Primjer takve veze izgleda ovako:

I pretraživač će pokazati:

Podrazumevano, pretraživač okružuje sliku u grafičku vezu sa okvirom. Ako je to nepoželjno, onda atribut granica tag IMG trebate dodijeliti vrijednost 0:

border="0">

Početna stranica

§ 3. Interne veze

Interne veze se koriste za udobnu navigaciju kroz stranice sa puno sadržaja. Uz njihovu pomoć sam napravio “Sadržaj lekcije” (vidi na početku ove stranice). Interne veze se kreiraju po istom principu kao i eksterne veze. Samo u vrijednosti atributa href naznačeno je sidro veze. Sidro kreira atribut ime:

name="anchor name">tekst

I ime sidra se postavlja proizvoljno. Ovdje je vrijedno reći da svi pretraživači ne razumiju ruska imena sidra, pa preporučujem korištenje latiničnog pisma. Tekst između tagova za kreiranje sidra nije potreban i najčešće nije naveden.

Ospice se nalaze na onim mjestima na stranici na koja korisnik treba otići nakon klika na link.

Kao što sam rekao gore, u atributu href internog linka, umjesto adrese, naziv željenog sidra je naznačen obaveznim hash simbolom ( # ) ispred njega. Pogledajmo to na primjeru.

Napravio sam sidro s imenom zagolovok i stavio je pored naslova ove lekcije (“Hiperveze u HTML-u”). Sidreni kod je sljedeći:

name="zagolovok">

href="#zagolovok">Do naslova

I u pretraživaču ovako:

Ako ste primijetili da se nakon klika na interni link do naslova URL u adresnoj traci pretraživača promijenio:

Na originalnu adresu:

http://www..html

http://www..html#zagolovok

A koristeći ovu funkciju, možete se povezati na određenu lokaciju na stranici s bilo kojeg izvora na Internetu! Odnosno, recimo da ste napravili stranicu sa dugačkim člankom o nečemu (ili postavili veliki broj fotografija na stranicu) i označili je internim linkovima. Dok ste bili u , trebali ste povezati ne samo stranicu sa člankom (ili fotografijama), već i određeno mjesto na njoj (ili određenu fotografiju). Koristeći opciju sa internim linkom u adresi, lako možete postići ono što vam je potrebno.

§ 4. Apsolutne i relativne reference

Početna stranica

Ali s relativnim vezama je malo složenije. U takvim vezama je naznačena i adresa relativno korijenski direktorij stranice (onaj u kojem se nalazi glavna stranica) ili u odnosu na izvornu stranicu. Takve veze su potrebne, na primjer, ako se stranica nalazi na vašem kućnom računaru. Ili ovo nije stranica, već stranica koja je pokazivač na druge dokumente.

Hajde da to izostavimo, moramo se povezati na stranicu clienty.html koja laže u jednom folderu sa glavnom stranicom sajta. Tada će kod relativnog linka izgledati ovako:

/klienty.html">Klijenti

Sada pretpostavimo da se u istom folderu kao i glavna stranica nalazi zakazy folder i već u tome nalazi se stranica klienty.html Tada će kod za relativnu vezu izgledati ovako:

/zakazy/klienty.html">Klijenti

Pogledajmo sada kreiranje hiperveza u odnosu na originalnu stranicu. Recimo da imamo stranicu cijena.html(izvorna stranica) i sa nje se trebate povezati na stranicu clienty.html Postoje sljedeće tipične opcije:

1. Stranice price.html i clienty.html se nalaze u jednom folderu.

klienty.html">Klijenti




2. u root folderu stranice, stranica cijena.html nalazi se u fascikli zakazy jedan nivo više).

Kod će izgledati ovako:

../klienty.html">Klijenti

Dvije tačke označavaju da morate preći iz trenutnog foldera na viši nivo.




3. Stranica klienty.html i folder zakazy se nalaze u root folderu stranice, mebel folder nalazi se u fascikli zakazy, stranica cijena.html je u folderu mebel(tj. stranica klienty.html u odnosu na originalnu stranicu price.html laže dva nivoa više).

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

Odnosno, svaki nivo je označen sa dve tačke i kosom crtom “ / ».




4. u root folderu stranice, stranica clienty.html nalazi se u fascikli zakazy(tj. sada stranica klienty.html u odnosu na originalnu stranicu price.html leži jedan nivo niže).

zakazy/klienty.html">Klijenti

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




5. Stranica price.html (originalna stranica) i folder zakazy se nalaze u root folderu stranice, mebel folder nalazi se u fascikli zakazy, stranica clienty.html je u folderu mebel(tj. stranica klienty.html je sada relativna u odnosu na originalnu stranicu price.html leži dva nivoa ispod).

zakazy/mebel/klienty.html">Klijenti




6. U korijenskom folderu stranice postoje dva foldera: zakazy i oplata. Stranica clienty.html nalazi se u fascikli zakazy, originalna stranica cijena.html nalazi se u folderu oplata(tj. obje stranice lažu u različitim folderima jedan nivo niže iz korijenske mape stranice).

../zakazy/klienty.html">Klijenti

§ 5. Link do e-pošte

Da bi kreirajte link za email, potrebno umjesto URL-a u vrijednosti atributa href napišite email adresu sa naznakom protokola ( 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 „Za“. U HTML kodu to izgleda ovako:

mailto: [email protected]">Moja pošta

I u pretraživaču ovako:

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

§ 7. Zaključak

Ovo su osnovne informacije o kreiranje linkova u HTML-u. Ovim je ova lekcija završena. A ova činjenica sugerira da ste već savladali većinu osnova HTML-a.

Preporučujem da sada ponovo prođete kroz prethodne odjeljke, a zatim kreirate potpunu HTML stranicu posvećenu, na primjer, vašoj voljenoj osobi. Po Vašem dizajnu i Vašim željama. Zatim ga 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ćate se kao vlasnik web stranice. A onda, nakon malog veselja povodom takvog događaja, pređite na sljedeći odjeljak, u kojem ću vam reći o kreiranju tabela u HTML-u.

I ovo će već biti prvi korak ka pretvaranju vaše lične stranice u ozbiljan resurs.

Pozdrav, dragi čitaoci blog stranice. Danas želim detaljnije govoriti o tome šta je hiperveza u Html-u, kako ih možete postaviti u tekst na web stranici, kako napraviti link do slike, kako pravilno koristiti oznaku "A" i njene atribute " Href” i “Target blank” (otvoreno u novom prozoru).

Općenito, hiperveza je ključni element. Osim toga, linkovi su sada jedan od tri glavna faktora koji utječu na uspješnu promociju web stranice. Ispravno korištenje i razumijevanje, na primjer, kako na njih utječu tražilice, može značajno utjecati na promet na vašem resursu.

Šta su hiperveze i sidra?

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

Da bismo napravili hipervezu u Html kodu, trebat ćemo koristiti i oznaku A. Za nju možemo koristiti različite atribute, postavljanje npr. URL adrese cilja za kretanje duž ovog linka (href) ili instrukcije da se otvori u novom prozoru (target= _blank). Ali hajde da pričamo o svemu po redu.

Kao što smo maloprije spomenuli, hiperveze su ključni element HTML jezika i omogućavaju vam povezivanje i na interne stranice vašeg sajta i na druge Internet resurse. Reći ću banalnost - praćenje veze se vrši klikom na nju (šta ste mislili?).

Osim što se mogu podijeliti na unutrašnje i vanjske, oni također može biti službena i koristiti isključivo za potrebe pretraživača kojim će se otvarati stranice Vašeg sajta.

U tom slučaju neće biti vidljivi na stranici, jer su napisani 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).

Servisne hiperveze se ne kreiraju pomoću oznake “A” (kao obične), već pomoću oznake "Veza". Ima dosta zadataka koje obavljaju, na primjer, uz njihovu pomoć, eksterne datoteke sa CSS kaskadnim stilovima ili, na primjer, .

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

Ali, ipak, sve hiperveze (i vidljive i servisne) imaju jednu zajedničku stvar - sve sadrže traženi atribut Href. U njemu je kao njegova vrijednost upisano određeno mjesto u dokumentu (ako je prethodno bilo označeno sidrom) ili adresa samog dokumenta na Internetu (u Href-u, odnosno, drugim riječima, putanja do stranice ili je napisan neki drugi fajl).

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

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

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

Tako će čitalac moći odmah da ode do mesta na stranici gde se nalazi informacija koja ga zanima, a ne da se muči skrolovanjem po tekstu i vizuelnim traženjem pravog mesta. Pogodno i poboljšava.

Kako se kreiraju sidra i heševi linkova

Dakle, naš će zadatak u ovom slučaju biti da instaliramo sidra na prava mjesta na stranici (dokumentu), koja će općenito izgledati ovako:

One. da biste napravili sidro potrebno je da u praznu hiperveznu oznaku "A" unesete jedan atribut "Name" kao čiju vrijednost koristite jedinstvenu oznaku koja ne bi trebala sadržavati razmake i u kojoj možete koristiti latinične znakove, brojeve , crtice i donje crte (u potpunoj analogiji sa 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 kreirana na ovaj način će zagaditi HTML kod, pa se sada koriste mnogo češće od sidra drugi način za kreiranje etikete.

U ovom slučaju, ne morate kreirati praznu „A“ oznaku, ali možete koristiti bilo koji od elemenata koji su već dostupni na pravom mjestu u tekstu. Na primjer, ovo bi moglo biti .

One. da biste kreirali analog sidra, dovoljno je bilo kojoj oznaci dodijeliti univerzalni ID atribut (može se koristiti za sve oznake i, usput rečeno, rade na osnovu njega), na primjer, ovako:

Naslov teksta

Dakle, sada, umjesto da kreiramo potreban broj sidrišta koja zagađuju kod i trenutno nisu važeća (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) kojoj prethodi hash znak "#", koji se također naziva hash (dakle, 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, novi dokument se neće otvoriti. Pretraživač će skrolovati već otvorenu stranicu do takve pozicije da mjesto u tekstu gdje ste umetnuli sidro zauzme poziciju na samom vrhu ekrana. Logično bi bilo pretpostaviti da vrijednosti svih tagova (sidrišta) na jednoj stranici trebaju biti jedinstvene kako bi se izbjegla zabuna za pretraživač.

Ako napravite sidro koristeći ID atribut u prikladno smještenoj oznaci za ovo, tada morate uzeti u obzir da pored ograničenja na vrstu simbola koji se koriste (,,,[_],[-]), ID vrijednost je obavezna mora početi sa latiničnim slovom.

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

Ako ne napišete nijedno ime sidrene oznake (href="#") iza heš simbola "#", onda takva hiperveza skroluje stranicu do vrha. Ovako možete kreirati jednostavno dugme "Nazad na vrh" tako što ćete napraviti link od slike (o tome ćemo malo kasnije) i umetnuti ga u predložak vaše web stranice, na primjer, ovako:

Href je obavezan atribut oznake bilo koje hiperveze

Sada pređimo sa navigacije unutar dokumenta (koristeći sidra) na vanjsku navigaciju, tj. morat ćemo napraviti linkove koji vode do drugih dokumenata na našoj ili drugoj stranici. Sada u atributu Href više ne trebamo specificirati oznake sidra, već putanju do datoteke koja se otvara (stranica je po dizajnu datoteka koja se učitava u pretraživač za naknadni prikaz).

sidro

Ovde bi trebalo dalje da pričamo, ali o njima sam već pisao detaljnije u pomenutom materijalu, tako da verovatno nema smisla da se ponavljam. Ali morate znati kako postaviti putanju do datoteke u atributu Href hiperveze koju ste napravili. Stoga ne pokušavajte da se upoznate sa materijalom koji ste dobili.

Međutim, da vas podsjetim da je pri kreiranju URL-ova poželjno koristiti samo sledeće znakove: (,,,[_],[-]) i ne koristite razmake. Ako uzmemo u obzir sadržaj atributa Href za apsolutne veze, on se može shematski predstaviti na sljedeći način:

Ako odbacimo ono što ćete rijetko koristiti, onda istu stvar možete predstaviti u donekle pojednostavljenom obliku:

Protokol (obično http)://ime_domena (na primjer, web stranica)/puta_do_datoteke (web stranice)

Osim jednostavnog http protokola, na Internetu možete pronaći linkove sa https protokolom, koji se razlikuje po tome što koristi enkripciju. Potonji se koristi na stranicama gdje postoji potreba da se zaštiti kanal razmjene podataka između servera i klijentovog pretraživača. Na primjer, koristi se u uslugama elektronskog novca Web Money.

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

Https://site/videokursy

Ili ovo (sa ekstenzijom datoteke):

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

Ovo ne mijenja suštinu, ali ako postoji kosa crta na kraju sadržaja atributa Href unutar hiperveze, to znači da se više ne pristupa datoteci, već mapi u kojoj će odgovarajući indeksni objekt biti pretraživan (za više detalja pročitajte članak o gore navedenim URL adresama).

Preuzmite nešto sa linka

Kao što vidite, ova hiperveza se ne razlikuje od obične, pretraživač samo razumije da treba preuzeti datoteku s ekstenzijom zip, a ne pokušavati je otvoriti za pregled, kao, na primjer, datoteke dokumenata sa html proširenje. Mada, sve ovo možete individualno prilagoditi u svom pretraživaču da odgovara vašim ličnim potrebama.

Preuzmite sa Ftp servera

Također možete, na primjer, kreirati (mail) tako što ćete dodati odgovarajući URL u Href:

Napisati pismo

Kada kliknete na takav link, na vašem računaru će se otvoriti podrazumevani mail program koji koristite (možete konfigurisati pretraživač tako da se u Gmail-u otvaraju linkovi sa mailto u Href-u itd.) i pojaviće se dijalog za kreiranje novog pisma, u koje će se u polje “Za” upisati poštanska adresa navedena u Href.

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

I općenito, webmasteri su u posljednje vrijeme praktično prestali koristiti hiperveze sa mailto u Href-u zbog činjenice da ih spameri analiziraju sa svim posljedicama koje iz toga proizlaze. Bolje ga je kreirati na web stranici, iako još uvijek imam sve predstavljeno u klasičnom obliku na stranici za kontakt. Trebao bih ga promijeniti u slobodno vrijeme (ili ne... razmislit ću o tome).

Kako otvoriti link u novom prozoru (cilj prazno)

Prilikom kreiranja linkova u HTML kodu, često se suočavamo sa pitanjem - u kojem prozoru pretraživača da otvorimo dokument do kojeg vodi? Podrazumevano će se otvoriti u postojećem prozoru, preklapajući stranicu sa koje je postavljena ova hiperveza.

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

Takođe volim da konfigurišem otvaranje linkova u pretraživačima. u novom prozoru tako da je problem uvijek pri ruci i da mu se uvijek možete vratiti. Za ove svrhe, kao što je već spomenuto, HTML koristi poseban Target atribut, koji po defaultu ima vrijednost Self:

Otvara dokument u istom prozoru

Iako, naravno, niko ne upisuje target="_self" u oznaku "A", jer se ova vrijednost koristi po defaultu, 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 sa donjom crtom na početku(_blank), jer je to propisano u validatoru Wc3, 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 veze.

Na primjer, ako želite da se sve hiperveze na vašoj web stranici otvore u novom prozoru, morat ćete napisati u području Head šablona koji koristite tag Base sa atributom target="_blank":

tu je još nešto

A sada, ako želite da otvorite jednu od veza u istom prozoru, onda ćete morati da dodate target="_self" u njenu oznaku "A", jer sada podrazumevano koristite _blank. Oh, kako.

Inače, koristio sam element Base na gore opisani način, ali sam u njega ugradio i kodno područje sa nekoliko hiperlinkova koje je trebalo otvoriti u novom prozoru. One. Koristio sam i zatvarajuću osnovnu oznaku unutar područja tijela i uspjelo je. Iako se takav kod, naravno, ispostavlja nevažećim.

Boje hiperveze lebdeći mišem i klikom - kako ih promijeniti

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

U tu svrhu koristi se boja koja će se promijeniti kada korisnik klikne na hipervezu i dokument koji je povezan s njom bude uspješno otvoren. Vrativši se na originalnu stranicu, korisnik će otkriti da je link koji je posjetio promijenio boju. Svi pretraživači 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 linkove na koje korisnik još nije kliknuo
2. Crveno - prihvaća ga hiperveza odmah nakon klika na nju i dok se traženi dokument ne preuzme u pretraživač korisnika preko mreže (u modernim uvjetima nije nimalo lako uhvatiti ovaj trenutak i svuda je krivo)
3. Ljubičasta je boja za potrošene linkove koje je korisnik već pratio

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

1. Link—postavlja boju neposjećene veze
2. Alink - boja trenutno aktivne boje koju pretraživač obrađuje
3. Vlink - boja hiperveze koju je korisnik već posjetio

Zapamtite, već sam pisao o tome kako . Shodno tome, navedeni atributi bi mogli izgledati ovako:

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

Kako napraviti vezu od slike - dva načina

Pa, ovdje je sve prilično jednostavno. Jer je element malim slovima, onda se u velikoj mjeri 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 vezu, imat ćete okvir širine tri piksela. Štaviše, boja ovog okvira će u potpunosti odgovarati bojama linkova prihvaćenim za vašu stranicu (o njima smo govorili malo više u tekstu).

Da biste uklonili dodavanje obruba na sliku koju ste povezali, morate dodati atribut Border sa vrijednošću nula u oznaku Img:

Ovo je vrlo jednostavan način da sliku učinite vezom, ali postoji i složenija opcija koja se zove mapa slike. U ovom slučaju, zahvaljujući korištenju prilično velikog broja HTML oznaka i atributa, od jedne slike možete napraviti cijelu mapu veza s aktivnim područjima (koja se mogu kliknuti i imaju različite oblike - pravougaonik, krug, poligon).

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

Sretno ti! Vidimo se uskoro na stranicama blog stranice

Više videa možete pogledati ako odete na

Možda ste zainteresovani

Odaberite, Option, Textarea, Label, Fieldset, Legend - Html oznake za oblik padajućih lista i tekstualnih polja
Kako umetnuti link i sliku (fotografiju) u HTML - IMG i A tagove
Iframe i Frame - šta su to i kako najbolje koristiti okvire u HTML-u
Znakovi razmaka i njihovo oblikovanje koda u HTML-u, kao i posebni znakovi razmaka i druge mnemonike
Kako se boje postavljaju u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex izlaz i drugi programi

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

HTML hiperveze (linkovi)

Tag može se koristiti na dva načina: