Linkovi se mogu podijeliti u dvije kategorije:
linkovi na eksterne resurse- kreiraju se pomoću oznake i koriste se za proširenje mogućnosti trenutnog dokumenta kada ih obrađuje pretraživač;
hiperveze- veze ka drugim resursima koje korisnik može posjetiti ili preuzeti.
Kako napraviti hiperveze na sajtu
1. Struktura veze
Hiperveze se kreiraju pomoću uparena oznaka... Unutar oznake je tekst koji će biti prikazan na web stranici. Tekst linka se u pretraživaču prikazuje podvučenom linijom, boja fonta je plava; kada pređete mišem preko veze, kursor miša menja izgled.
Obavezni parametar oznake je href atribut koji specificira URL web stranice.
pokazivač vezeLink ima dva dela - pokazivač i adresni dio. Pokazivač veze je dio teksta ili slika vidljiva korisniku. Adresni dio link nije vidljiv korisniku, on predstavlja adresu resursa na koji treba ići.
Adresni dio veze sastoji se od URL-a. URL(Uniform Resource Locator) - uniformni lokator resursa. Prilikom kreiranja adresa za razdvajanje riječi jedne od drugih, preporučuje se korištenje crtice umjesto donje crte. Općenito, URL ima sljedeći format:
Metoda pristupa: // ime servera: port / staza
Način pristupa, ili protokol, razmjenjuje podatke između radnih stanica na različitim mrežama. Najčešći protokoli za prijenos podataka:
file čita datoteku s lokalnog diska:
Fajl: /gallery/pictures/summer.html
http omogućava pristup web stranici koristeći HTTP protokol:
http://site.ru/
https je posebna implementacija HTTP protokola koji koristi enkripciju (obično SSL ili TLS)
https://site.ru/
ftp šalje zahtjev FTP serveru za datoteku:
Ftp: // pgu / direktorij / biblioteka
mailto započinje mail sesiju sa navedenim primaocem i domaćinom:
mailto: [email protected]
Ime servera opisuje puno ime mašine na mreži, na primjer, site.ru. Ako ime servera nije navedeno, onda se veza smatra lokalnom, tj. odnosi se na istu mašinu kao i HTML dokument koji sadrži vezu.
Broj TCP porta gdje radi web server. To je broj koji se mora specificirati ako metoda zahtijeva broj porta ( odvojeni serveri mogu imati svoj poseban broj porta). Ako port nije naveden, podrazumevani je port 80. Standardni portovi su:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP
Way sadrži naziv fascikle u kojoj se datoteka nalazi.
2. Apsolutni i relativni put
Kada je u vezi navedeno samo ime datoteke, pretraživač pretpostavlja da se datoteka nalazi u istoj fascikli kao i dokument koji sadrži hipervezu. U praksi, web stranice sadrže stotine dokumenata koji su smješteni u zasebne mape kako bi se njima lakše upravljalo. Da biste se povezali na datoteku izvan mape koja sadrži trenutni dokument, morate navesti lokaciju ili putanju datoteke. HTML podržava dvije vrste putanja: apsolutne i relativne.
Rice. 1. Primjer strukture foldera 2.1. Apsolutni put
Apsolutni put specificira tačnu lokaciju datoteke unutar cijele strukture foldera na računaru (serveru). Apsolutna putanja do datoteke daje pristup datoteci iz resursa trećih strana i sadrži sljedeće komponente:
1) protokol, na primer http (opciono);
2) domena ( Ime domena ili IP adresa računara);
3) folder (naziv foldera koji označava putanju do datoteke);
4) fajl (ime fajla).
Postoje dvije vrste zapisa apsolutne putanje - sa i bez protokola:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Ako se datoteka nalazi u korijenskom folderu, tada će putanja datoteke biti sljedeća:
Http://site.ru/index.html
Ako ne postoji naziv datoteke, web stranica će se učitati, što je standardno postavljeno u postavkama web servera (tzv. index fajl).
http://site.ru/
Tipično, datoteka indeksa je dokument pod nazivom index.html. Prisustvo završne kose crte / znači da adresa ide u fasciklu, ako je nema - direktno u datoteku.
2.2. Relativni put
Relativni put opisuje putanju do navedenog dokumenta u odnosu na trenutni. Putanja se određuje na osnovu lokacije web stranice na kojoj se nalazi link. Relativne veze se koriste za kreiranje veza ka drugim dokumentima na istoj stranici. Kada pretraživač ne pronađe http: // protokol u linku, on traži navedeni dokument na istom serveru.
Relativna staza sadrži sljedeće komponente:
1) folder (ime foldera koji označava putanju do datoteke);
2) fajl (ime fajla).
Put relativne veze ima tri posebne konvencije:
/ pokazuje na korijenski direktorij i kaže da trebate započeti stazu iz korijenskog direktorija dokumenata i spustiti se do sljedećeg foldera
./ označava trenutni folder
../ idi gore jedan folder (direktorij)
Glavna razlika između relativne i apsolutne putanje je u tome što relativna putanja ne sadrži naziv korijenske mape i roditeljske mape, što adresu čini kraćom, a ako prelazite s jedne domene na drugu, ne morate registrirati novu apsolutnu adresu. Ali ako resurs treće strane povezuje, na primjer, na vaše slike s relativnim adresama, one se neće prikazivati na drugoj stranici.
3. Sidra
Sidra, ili interne veze, kreiraju veze ka različitim sekcijama trenutnu web stranicu omogućavajući vam brzu navigaciju između sekcija. Ovo je vrlo zgodno kada na stranici ima previše teksta. Interne veze se također kreiraju pomoću oznake s tom razlikom što href atribut sadrži naziv pokazivača - tzv sidro, a ne URL adresa. Znak # se uvijek stavlja ispred imena pokazivača.
Vjerujem da nijedna HTML stranica ne može postojati bez barem jedne hiperveze (ili samo veze). Veze mogu biti ili ka drugim stranicama ili web lokacijama, ili ka datotekama, slikama itd.
Linkovi mogu biti eksterni i interni, tekstualni i grafički. Eksterne veze link na druge sajtove ili objekte, objekte na njih, dok interne, naprotiv, na različite delove vašeg sajta. Tekstualni link je tekst, klikom na koji dolazite do drugog objekta ili ga otvarate, a grafički link je objekat (najčešće slika) koji služi i za odlazak na drugu stranicu, stranicu ili npr. slika. Linkovi u HTML-u se kreiraju pomoću oznake (od engleskog anchor - sidro). Zatim ću vam reći više o linkovima.
Oznaka ima važan i glavni href atribut. Njegova vrijednost je put do objekta ili stranice na koju se naša veza odnosi u obliku URL-a. I tekst (tekstualni link) i slika (grafička veza) mogu biti sidro (telo veze). Ako trebate kreirati grafičku vezu, trebate koristiti IMG tag između oznaka kao sidro. Evo jednostavnog primjera HTML koda za vezu:
tekst linka (sidro)
Daću vam još jedan primjer da bolje naučite. Uzeću svoju stranicu kao osnovu:
Na html stranici u pretraživaču to će izgledati ovako:
Boja teksta linka je postavljena atributima u oznaci BODY. Jednostavnije rečeno, isti atributi za uređivanje važe za veze kao i za tekst na stranici. Ovo se može istaknuti podebljanim i kurzivom, te koristiti naslove itd.
Na html stranici se pojavljuje sljedeće:
Dobijmo rezultat bez okvira:
Glavna stranica 1seo
Kao što ste primijetili, prijelaz na drugu stranicu se vrši u istom prozoru. Ako želite da se veza otvori u drugom prozoru ili nadređenom (podrazumevano je u istom prozoru), možete koristiti sljedeće ciljni atribut oznaka A:
- _blank - otvara stranicu u novom prozoru;
- _parent - preuzima vezu u nadređenom prozoru;
- _self je zadana vrijednost. Otvara vezu u istom prozoru.
Početna stranica stranice 1seo
Postoji i atribut title za kreiranje opisa za vezu:
Početna stranica stranice 1seo
Usput, ako navedete svoje poštansko sanduče u URL adresi i navedete mailto: protokol, onda kada kliknete na vaš link, on će se otvoriti mail program, gdje će vaša adresa već biti upisana u polje Za poštansko sanduče... Na primjer, HTML kod će biti ovakav:
Napiši mi poruku
Pokušao sam napisati osnovne stvari koje su vam potrebne za kreiranje veze u HTML-u. Usput, ako ste pročitali prethodne članke u HTML Tutorialu, onda mogu sa sigurnošću reći da već znate minimum za kreiranje svoje prve punopravne html stranice. Nakon što kreirate stranicu, možete je staviti na besplatni hosting i vidjeti plodove svog rada. Vjerujte, nakon što ovo učinite, imat ćete još veći nalet kreativne energije. Zatim ću vam pokazati kako da kreirate tabelu u HTML-u. Ovo je takođe veoma važna informacija, pokušajte da ga u potpunosti apsorbirate i probavite.
Datum objave: 15. maj 2012Hiperveze su izmišljene da bi se međusobno povezivali dokumenti na mreži, a ako se vaša stranica ne sastoji od jedne stranice, već od nekoliko, onda ih možete povezati samo stvaranjem hiperlinkova. Pogledajmo direktno na primjeru kako to izgleda.
Kreiranje jednostavne hiperveze
Idi na drugu stranicu
Otvaranje linka na novoj stranici
Postoji još jedan zanimljiv atribut koji bi vam mogao biti od koristi:
Idi na drugu stranicu
Ciljni atribut sa vrijednošću _blank otvara link u novom prozoru, ovo se često koristi ako ne želite da osoba izgubi vašu stranicu i da u isto vrijeme dobije informacije koje su mu potrebne samo u novoj kartici ili prozoru.
Linkovi slika
Rezultat u pretraživaču:
Ovdje je u osnovi sve jednostavno, stavio sam tag slike između otvaranja i zatvaranja oznake hiperlinka , ali opet nisam samo ubacio dvije slike, klasu img sam dodijelio jednoj u kojoj sam nulirao granicu oko slike, jer kada postane hiperlink ona se pojavljuje, ali je nećete vidjeti u svim pretraživačima, npr. IE , ali ne u Google Chromeu.
Podvlačenje u linkovima
Idi na drugu stranicu
Idi na drugu stranicu
Radi jasnoće, dao sam dvije opcije za rješavanje ovog problema, dodijelio ga selektoru klasa, a pisanjem ove klase uklonit ćete nepotrebno podvlačenje na određenim mjestima. Drugo rješenje problema je uklanjanje podvlačenja sa svih veza u oznaci<а>, što je naravno rijetko potrebno, ali znanje ipak nije suvišno.
Veze unutar dokumenta
Nije neuobičajeno kada je dokument dovoljno dugačak i na početku stranice naprave mali meni sa linkovima na podsekcije ove stranice. Ove veze se nazivaju linkovi unutar dokumenta i sve je prilično jednostavno implementirati. Za početak, sidra se postavljaju u dokument, to su oznake, postavljaju se u dokument gdje će biti potrebno pomaknuti kada kliknete na interni link, u pravilu su to naslovi odjeljaka, oznaka izgleda ovako:
I posljednja stvar koju trebamo znati o hiperlinkovima su veze do e-mail sandučića, vrlo je jednostavno implementirati, samo dodajte unos obrasca mailto: i adresu poštanskog sandučeta u href atribut:
Moja pošta< /a>
Ovdje završavam lekciju "Kreiranje hiperlinkova u html-u", kao što ste možda primijetili, ovdje nismo prošli bez CSS-a, generalno materijal je prilično jednostavan, mislim da će vam sve biti jednostavno i jasno, molim vas pišite pitanja .
Datum objave: 2014-04-23
Kako kreirati veze u HTML dokumentu
(Više primjera ćete naći na dnu ove stranice)
HTML hiperveze (linkovi)
Tag može se koristiti na dva načina:
- Za povezivanje sa drugim dokumentom - korištenjem atributa href
- Za označavanje unutar dokumenta - koristeći atribut name
HTML sintakse veze
Primjer
| Posjetite stranicu |
ovo će biti prikazano od strane pretraživača ovako:
HTML veze - ciljni atribut
Ciljni (odredište) atribut specificira gdje da se otvori povezani dokument (onaj na koji se veza odnosi).
Primjer ispod će otvoriti povezani dokument u novom prozoru ili kartici preglednika:
HTML veze - atribut imena
Atribut name se koristi za kreiranje obeleživača ("anchor" / "anchor") unutar HTML dokumenta.
komentar:
Nadolazeći HTML5 standard predlaže korištenje atributa id umjesto atributa name za određivanje naziva veze.
Korištenje id atributa zapravo funkcionira u HTML4 iu svim modernim pretraživačima.
Oznake se ne prikazuju na poseban način. Oni nisu vidljivi čitaocu.
komentar: Uvijek dodajte zadnju kosu crtu vezama poddirektorija. Ako kreirate link ovako: href = "http: // site / html", tada se serveru generiraju dva zahtjeva, prvo server dodaje kosu crtu adresi, a zatim kreira novi zahtjev: href = "http : // site / html /" ...
savjet: Imenovane veze se često koriste za kreiranje "sadržaja" na početku velikog dokumenta. Svakom poglavlju u dokumentu je dodijeljena imenovana referenca, a reference na svako od ovih imenovanih sidrišta se ubacuju na početak dokumenta.
savjet: Ako pretraživač ne pronađe navedenu imenovanu vezu, ide na početak dokumenta. Nema grešaka.
Razmotrimo upotrebu hiperveza u primjeru #1.
Pogledajte specifikaciju HTML 5 može biti ovdje.
Stranica će se otvoriti u novom prozoru.
A tabele elemenata i atributa možete preuzeti ovdje.
Primjer br. 1. Korištenje hiperlinkova
Korištenje hiperlinkova za kreiranje sidrišta na stranici
Element "a" se također može koristiti kao hiperveza za navigaciju unutar stranice. Da biste to učinili, na pravom mjestu u dokumentu morate kreirati sidro(sa engleskog. sidro), tj. bookmark i navedite ga kao cilj u hipervezi. Sidro se kreira pomoću praznog "a" elementa sa atributom navedenim u njegovoj početnoj oznaci. Potrebni markupni element se može koristiti i kao sidro, do kojeg će u budućnosti voditi interna hiperveza. Da biste to učinili, samo trebate navesti atribut u njemu. Nadalje, u href atributu same hiperveze, simbol funte "#" i vrijednost atributa sidra su specificirani kao vrijednost. Da bi bilo jasnije, pogledajmo sve koristeći primjer #2.
Ja sam prvi paragraf.
Pogledajte tabelu atributa HTML 5 mogu
na službenoj web stranici ovdje.
Stranica će se otvoriti u novom prozoru i otvoriće se
skrolovao do tabele sa atributima.
Ovdje možete prijeći na prvi pasus.
Primjer br. 2. Korištenje internih hiperlinkova
Obratite pažnju na prisustvo sidra u apsolutnoj adresi navedenoj kao vrijednost za atribut href u drugom paragrafu primjera. Kada koristite takvu hipervezu, pretraživač će prvo otići na navedenu adresu, a zatim će skrolovati stranicu do lokacije navedenog sidra. Ako na stranici nema sidra, stranica će biti prikazana od samog početka.
Relativne hiperveze i izgradnja relativnog adresiranja
Na kraju pasusa razmotrite princip konstrukcije relativne adrese... Neka naša hiperveza bude u dokumentu koji se nalazi na lokalnom serveru na adresi http: // localhost / site / doc_1 / doc_2 / ... / doc_n / web_page.html, gdje je doc_n folder n-tog nivoa. U ovom slučaju, fascikla doc_n, u kojoj se nalazi naš dokument sa hipervezom, automatski se uzima kao osnova na kojoj se gradi svo adresiranje. dakle:
- Ako želite da veza ukazuje na ciljni dokument new_page.html koji se nalazi u istoj fascikli doc_n kao i naš originalni dokument sa hipervezom, tada samo trebate postaviti ime ciljnog dokumenta kao vrijednost href atributa veze: href = "nova_stranica.html".
- Za navigaciju do ciljnog dokumenta new_page.html koji se nalazi u folderu http: // localhost / site / doc_1 / doc_2 / ... / doc_n / doc_n_1 / ... doc_n_k /, vrijednost href atributa veze treba uključivati samo foldere ugniježđene u doc_n i naravno ime ciljnog dokumenta: href = "doc_n_1 / ... doc_n_k / new_page.html"... Dakle, mi kažemo pretraživaču da treba da ide u fasciklu doc_n_1, koja se nalazi u fascikli doc_n sa izvornim dokumentom u kojem je hiperveza registrovana, zatim u fasciklu doc_n_2, i tako dalje, sve dok ne uđe u fasciklu doc_n_k sa ciljni dokument koji se nalazi tamo, koji je i mora se otvoriti.
- Da biste ušli u folder jedan nivo viši od originalnog, koristi se posebna kombinacija simbola "../". Da biste se popeli na n nivoa, napišite kombinaciju "../" n puta zaredom. Dakle, u našem slučaju, da pratimo vezu do ciljanog dokumenta http: // localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_page.html href atribut linka mora biti "../../../new_page.html". Dakle, obaveštavamo pretraživač da treba da ide do fascikle doc_n-1, zatim do doc_n-2 i doc_n-3, a zatim da otvori ciljni dokument new_page.html koji se tamo nalazi.
- Ako je potrebno ne samo popeti se nekoliko nivoa gore, već i otići u mapu (ili nekoliko podmapa) tamo da biste dobili pristup ciljnom dokumentu, tada u vrijednosti href atributa veze prvo morate napišite potreban broj nivoa podizanja koristeći simbole ". ./", a zatim dodajte putanju iz rezultirajuće mape u ciljni dokument. Na primjer, ako se ciljni dokument nalazi u folderu new_doc i put adrese do njega izgleda ovako http: // localhost / site / doc_1 / doc_2 / ... / doc_n-3 / new_doc / new_page.html, tada atribut href linka mora biti "../../../new_doc/new_page.html"... One. kažemo pretraživaču da ide gore tri nivoa u odnosu na izvorni doc_n folder, koji sadrži dokument sa hipervezom, a zatim idemo u folder new_doc i otvorimo ciljni dokument new_page.html
Kao primjer, možete preuzeti mini-sajt sa uputstvom koji je u potpunosti izgrađen na osnovu relativnog adresiranja. Nakon pregledavanja, eksperimentirajte mijenjajući i kreirajući nove veze, mape i stranice.
Relativne hiperveze vrlo zgodno kada se razvijaju offline aplikacije pretraživača, na primjer, referentni priručnici. Međutim, zapamtite da kada premjestite dokument iz trenutne mape u drugu, sve relativne veze u njemu će prestati raditi. Stoga će se morati ponovo napisati. Ako relativne veze upućuju na datoteke koje se takođe nalaze unutar trenutnog foldera ili u podmapama, onda će nakon premještanja ove mape na drugu lokaciju sve veze u dokumentu ostati da rade.
Ako trebate početi računati relativnu putanju od korijena stranice, dodajte kosu crtu "/" na početak putanje. Na primjer, veza " Dom"označava dokument koji se nalazi u korijenskom folderu stranice (a ne u trenutnom!). Imajte na umu da odbrojavanje od korijena stranice radi samo pod kontrolom stvarnog web servera. Na lokalnom serveru, za na primjer, Xampp, morate početi računati od imena korijenskog foldera.
