Kako napraviti sliku kao vezu u HTML-u, VKontakteu, na forumu i koristeći CSS. Kako umetnuti hipervezu u HTML? Kreiranje i korištenje hiperveza u HTML-u Hiperveza do html slike

24.08.2023

Dobar dan svima, dragi moji prijatelji i čitaoci. Nadam se da ste odlučili da učestvujete u mom takmičenju i da već pišete o svom blogerskom putu. Pa, želio bih da nastavimo naše proučavanje html jezika i danas bih vam želio reći o jednoj od najvažnijih komponenti, a to su hiperveze.

Da, bez takvih hiperlinkova Internet ne bi bio tako zgodan. Ne, lažem. Uopšte ne bi bilo lako navigirati. Možete li zamisliti internet bez njih? Ja lično ne znam.

A danas ćemo naučiti kako umetnuti hipervezu u html. Ali prvo bih vas pitao: da li znate šta je uopće hiperveza i po čemu se razlikuje od obične veze? Ovdje je sve zapravo jednostavno: link je jednostavna informacija koja se odnosi na dokument. Istovremeno, ne možete kliknuti na ovaj tekst (ništa se neće dogoditi), ali znate gdje tražiti informacije.

Primjer: Možete saznati kako istaknuti kosu u Photoshopu na //site/adobe-photoshop/kak-vydelit-volosy/

Hiperveza je isti tekst, samo što je njegova suština u tome što možete kliknuti na ovaj tekst i doći do željene stranice, stranice ili bilo kojeg drugog objekta. Štaviše, sam tekst može biti bilo koji, dok je adresa napisana odvojeno unutra i može biti potpuno različita. Ali kako god bilo, u kolokvijalnom govoru se i dalje nazivaju jednostavno vezama. Evo primjera hiperveze:

O tome kako pravilno istaknuti kosu u Photoshopu možete pročitati u jednom od mojih tutorijala.

Oh dobro. Dobra teorija. Pređimo sada na praksu i vidimo koji su odgovorni za sve ove stvari.

Upareni tag je odgovoran za hipervezu, ali sam po sebi ne predstavlja ništa. Uvijek ide u sprezi sa atributom. I u ovom slučaju, moramo stalno pisati isti href. U vrijednost atributa stavljamo vezu do samog željenog resursa. A u samom sadržaju upisujemo sam tekst koji bi trebao postati klikabilan (raditi kada se klikne). Pogledajte primjer i mislim da ćete sve razumjeti.

Yandex pretraživač

Kao što razumijete, u ovom primjeru sam napisao da kada kliknete na dio teksta "Yandex pretraživač", osoba će biti usmjerena na adresu upisanu u vrijednosti atributa href.

Mislim da mnogi od vas znaju da postoje interne i eksterne veze. Interne veze se izvode unutar jednog direktorija, odnosno stranice, a eksterne veze vode do nekog resursa treće strane. A sada ću vam pokazati kako da uradite oboje.

Unutrašnje tranzicije

Fajl u istom folderu


Ali takav prijelaz će funkcionirati pod uvjetom da se datoteka na koju povezujete nalazi u istoj mapi kao i datoteka u koju postavljate vezu. Za ostale opcije, sve je malo drugačije.

Fajl u drugom folderu

  1. Otvorite datoteku pushkin.html u Notepad++
  2. Sada pronađite riječ fotografija i umotajte je u oznake<a href> .
  3. Sada pažnja! U vrijednosti atributa navodimo putanju u odnosu na datoteku koja se uređuje, odnosno sam pushkin.html. Trebalo bi da završite sa nečim poput ovoga:
Fotografija

Šta smo sada uradili? I uradili smo sledeće: budući da je put ka fotografiji unutra poseban folder img, koji se nalazi u istoj fascikli kao i datoteka pushkin.html, zatim u vrijednost atributa prvo moramo upisati naziv mape, a zatim kroz kosu crtu (/) puni naziv dokumenta (u naš slučaj, fotografije).

Sada sačuvajte i pokrenite datoteku pushkin.html u vašem pretraživaču. Videćete da je reč “Fotografija” označena plavom bojom i postala je kliktava, što znači da ćemo klikom na ovaj link biti prebačeni na fajl fofo.jpg koji se nalazi u folderu img.

Pa kako? Je li sve jasno? Ako se nešto desi, ne ustručavajte se pitati.

Eksterni prelazi

I naravno, ne možemo ne spomenuti vanjske linkove, nakon klika na koje ćemo biti odvedeni na potpuno drugu stranicu. Ali tu nema ništa komplikovano. Čitava poenta je da stavite punu adresu stranice ili web stranice u vrijednost href. Gore sam pokazao primjer sa Yandexom. Ali evo još jednog primjera:

Studiraću za magistra društvenih projekata.

Ovdje dolazimo do određene stranice određene stranice.

Otvara se u novom prozoru

Podrazumevano, kada kliknete na link, dokument se otvara u istom prozoru kao i vaša stranica, tj. vaša stranica će se zatvoriti. A ovo nije dobro. Konkretno, za projekte promoviranog sadržaja ili blogove, preporučuje se da kada kliknete na vezu, dokument se otvori u novom prozoru ili kartici bez zatvaranja vaše stranice.

Ciljni atribut sa vrijednošću “_blank” će nam pomoći u tome. Nema tu ništa komplikovano. Ovo ćete samo trebati umetnuti unutar uvodne oznake nakon vrijednosti atributa href. Uzmimo taj izvod iz datoteke lukomorye.html, gdje smo napravili link na stranicu pushkin.html, samo što ćemo sada napisati upravo ovaj atribut. Trebalo bi izgledati ovako:

Iz pjesme Ruslan i Ljudmila (Autor - A.S. Puškin)

Pa, ovde je sve jasno. Sada, kada kliknete na sadržaj, željena stranica će se otvoriti u novom prozoru. Ova stvar je veoma neophodna, jer ako je ne registrujete, korisnik će jednostavno napustiti vašu stranicu. I tako će, u svakom slučaju, ostati na njemu, samo ako ga posebno ne zatvori. Pokušajte sve učiniti sami, samo napravite sve lijepo svojim rukama. Nema potrebe za kopiranjem i lijepljenjem.

Pa, ovako nešto. Čini se kao da sam vam rekao sve najvažnije stvari, ali ako želite krenuti u ovom smjeru i naučiti HTML i CSS kako biste kreirali profesionalne web stranice, blogove, pa čak i online trgovine, svakako pogledajte odličan video kurs na ovu temu. Lekcije su zaista odlične i zaista su ispričane za ljude koji su još malo ili nisu upoznati sa izradom web stranica.

Pa, ovim je naša današnja lekcija završena. Nadam se da vam se dopao moj članak i da će vam biti drago ako postanete moj redovni čitalac. Zato ne zaboravite da se pretplatite na ažuriranja mog bloga kako ne biste propustili ništa zanimljivo. Pa, želim ti uspjeh u svim tvojim nastojanjima. Bye bye!

Srdačan pozdrav, Dmitry Kostin.

U ovoj lekciji ćemo govoriti o kako napraviti link u HTML-u. Veze se vrlo često koriste na web stranicama, omogućavaju vam da prelazite s jedne stranice na drugu. Posebnost linkova je u tome što mogu voditi ne samo do web stranice, već i do datoteka, slika itd.

Linkovi mogu biti interni i eksterni. Interne veze vode do stranica i datoteka unutar jedne stranice. Vanjske veze vode do web lokacija, dokumenata i datoteka trećih strana. U isto vrijeme, ove vrste veza su postavljene gotovo identično.

Kako napraviti link u HTML-u, primjeri

1. HREF— odgovoran je za to kuda veza treba da vodi. Standardni link je postavljen na sljedeći način: Tekst linka.

2. TARGET— odgovoran je za prozor u kojem će se dokument otvoriti. Podrazumevano, novi dokument se otvara u trenutnom prozoru pretraživača. Atribut “target” vam omogućava da otvorite vezu u novom prozoru pretraživača. Ovaj atribut ima sljedeće parametre:

  • _blank - učitava stranicu u novom prozoru;
  • _self - učitava stranicu u trenutnom prozoru;
  • _parent - učitava stranicu u roditeljski okvir;
  • _top - poništava sve okvire i učitava stranicu u novom prozoru.

3. NAME- koristi se za navigaciju do određenog područja unutar stranice. Nakon heš simbola, ključna riječ (bookmark ili tag) je označena pod navodnicima. Da biste otišli na ovu oznaku, koristite vezu na kojoj je napisana ova oznaka.

Primjer eksterne veze

Idite na web stranicu



Idite na web stranicu
Besplatne lekcije o WordPressu

Primjer 4: Slike kao veze.

Primjer slike kao referenca



Primjer veze do određene lokacije na stranici

Idi na tekst

Tekst stranice...



IN u ovom primjeru stranica je označena kao “list” koristeći atribut “name”. Link do ove oznake će vas odvesti do specifično područje stranice.

Preuzmite datoteku
Napiši pismo

Možete postaviti boju veza koristeći atribute koji su navedeni u oznaci “body” kao parametri. Uzmite u obzir ove atribute:

  • link - neposjećena veza, podrazumevano je prikazana plavom bojom;
  • alink - aktivni link, crvena po defaultu;
  • vlink - posjećena veza, po defaultu ljubičasta.
Primjer postavljanja boje za veze ...

Tako smo shvatili princip po kojem se veze kreiraju u HTML-u. Linkovima se mogu dati određeni stilovi. O tome možete vidjeti u lekciji slijedeći link.

Pozdrav, dragi čitaoci blog stranice. U sljedećem članku iz ovog odjeljka nastavit ćemo gledati oznake. Ranije smo saznali ), govorili smo o oblikovanju komentara i ), a dotakli smo se i teme razmaknih znakova u HTML kod i . Da, razgovarali smo i o mogućnostima.

Danas se želim detaljnije zadržati na onim elementima jezika za označavanje hiperteksta s kojima ćete se najčešće susresti kada radite na svom web projektu. govorim o tome umetanje slika i hiperlinkova u kod web stranica. Bez znanja o tome, biće vrlo teško produktivno raditi na dizajnu web stranice. Ove oznake se aktivno koriste kako prilikom pisanja i dizajniranja članaka, tako i u dizajniranju predloška koji se proteže preko okvira motora.

Kako umetnuti sliku - html Img oznake

Recimo da za pisanje članaka koristite vizuelni uređivač, koji vam omogućava da ne razmišljate o tome kako su tačno oznake za slike i hiperveze napisane u kodu. Ali činjenica je da nijedan uređivač nije idealan, a često da biste ispravili još jednu grešku u dizajnu teksta članka, jednostavno ćete morati da se prebacite u režim html uređivača i direktno promenite oznake slika i same veze.

Ako znate kako da umetnete slike i veze u HTML dokument, to vam može uvelike pojednostaviti život i uštedjeti vrijeme. Štaviše, proučavanje deset najčešćih elemenata nije teško. U stvarnosti, nije ostalo toliko oznaka, a naravno, današnji heroji su među najčešćim i najčešće korištenim.

S druge strane, isti elementi se aktivno koriste i u dizajnu šablona koji koristite - umetanje linkova, slika, kontejnera, lista (mi o njima), raznih itd.

I, stoga, da bismo razumjeli strukturu predloška (govori o Joomla predlošcima i o WordPress teme) i, ako je potrebno, izvršite izmjene u njemu, opet morate znati barem mali broj elemenata koda. Vjerujte, vrijeme utrošeno na ovo će se više nego isplatiti u budućnosti. Pa, pretpostavimo da sam vas uvjerio u potrebu da se upoznate sa jezikom za označavanje i da je vrijeme da prijeđemo direktno na junake naše današnje publikacije.

Za umetanje slika Na stranici se koristi oznaka HTML Img. Slika ispod je umetnuta pomoću nje:

Src atribut vam omogućava da odredite ime i lokaciju za skladištenje slikovne datoteke (drugim riječima, putanju do nje). U ovom slučaju, može se pokazati na datoteku sa slikom. Putanja se specificira pomoću znaka "/", koji služi kao separator između imena poddirektorija u kojima se pohranjuju datoteke slika.

Apsolutni put do Src-a će početi od http://vash_sait.ru (za moj blog -). Zatim, korištenjem “/” za razdvajanje naziva podmapa, upisuje se puna putanja do datoteke slike, koja se završava na kraju imenom i ekstenzijom same datoteke. na primjer,

Relativna putanja u Src-u se postavlja definisanjem relativne putanje od izvorne fascikle, koja sadrži datoteku samog HTML dokumenta i iz koje pokušavate da otvorite sliku, do grafičke datoteke. Ako se ova datoteka nalazi na serveru u istoj fascikli kao i dokument iz kojeg joj se pristupa, onda ne morate specificirati putanju do nje - samo trebate navesti naziv grafičke datoteke (sa očuvanjem velikih i malih slova ).

Ako se ova datoteka nalazi na istom serveru, ali u drugom direktoriju, potrebno je navesti putanju do nje iz direktorija u kojem se nalazi dokument iz kojeg se pristupa (u primjeru prikazanom iznad koristi se relativna putanja - image/finik.jpg) .

Postavite širinu i visinu slike pomoću atributa Width i Height

Html atributi Width i Height vam omogućavaju da podesite veličinu oblasti (širinu i visinu, respektivno) koja će biti dodeljena na stranici za ovu sliku. Oni se ubacuju unutar oznake Img, na primjer ovako:

Ako se ovo područje ne podudara stvarna veličina sliku koju želite da umetnete, slika će se rastegnuti ili suziti u skladu sa navedenom veličinom. Međutim, ne biste trebali koristiti ovu metodu, recimo, da smanjite veličinu slike umetnute u dokument. Uostalom, njegova težina će i dalje ostati velika, a to će usporiti učitavanje web stranice.

Bolje je prvo promijeniti veličinu slike grafički editor(možete to čak i u ), a tek onda ubacite u dokument. Takođe, kada snimate grafičku datoteku, treba obratiti pažnju na njenu konačnu težinu. Ne bi trebao biti prevelik. Ponekad je bolje žrtvovati malo kvalitete slike (srećom, s malim veličinama to će biti praktički neprimjetno) kako biste smanjili konačnu težinu.

Prilikom spremanja crteža koristite kompaktne tipove GIF (za umetanje šematskih slika) ili JPG (za umetanje fotografija). Širina i visina, za razliku od atributa Src (jedinog obaveznog u Img oznaci), nisu obavezni. Mnogi ih jednostavno ne ukazuju, ali ipak malo dopuštaju ubrzati učitavanje dokumenata.

Činjenica je da ako pretraživač ne pronađe širinu i visinu unutar oznake html Img, trebat će vremena da sazna veličinu slike, učita je i tek onda nastavi s preuzimanjem ostatka sadržaja dokumenta . U slučaju kada ste naveli visinu i širinu, pretraživač automatski rezerviše prostor za sliku veličina navedenih u ovim atributima i nastavlja dalje učitavati web stranicu.

Ako grafičke datoteke izlaze na ovu stranicu su veoma teški i ima ih puno, tada će umetanje visine i širine omogućiti korisnicima da počnu čitati tekst stranice, dok se grafika još uvijek učitava.

Također, ako ne navedete širinu i visinu unutar Img-a, može doći do situacije u kojoj će, s malom slikom i vrlo dugim alternativnim tekstom (podešenim atributom Alt u oznaci Img, o čemu se govori u nastavku), doći do privremenog pomaka prije nego što se učita grafika dizajn web stranice, jer dugačak alt tekst će zauzeti onoliko prostora koliko mu je potrebno.

Ako se koriste širina i visina, prostor za prikaz alternativnog teksta bit će ograničen na veličine navedene u njima. Uglavnom, to je razlog zašto pokušavam da zapišem ove atribute u Img tag.

Alt i Title u html Img oznaci

Veoma korisno sa unutrašnje tačke gledišta optimizacija za pretraživače site su atributi Alt i Title. Čitajte i promovirajte stranicu sami ili u publikaciji “”.

Prvi od njih postavlja takozvani alternativni tekst za sliku. Ovaj tekst možete vidjeti ako onemogućite grafiku u vašem pretraživaču. Alt je dizajniran za ovo - recite tražilice o tome kakav bi crtež trebao biti. Naslov je namijenjen informiranju korisnika o sadržaju slike.

Sadržaj naslova iz oznake Img prikazuje se u iskačućoj liniji ako korisnik pređe mišem preko slike. Oba ova atributa (ako ste ih naveli) omogućavaju vam da uključite slike vašeg web projekta u . Stoga ne biste trebali zanemariti ovu priliku i obavezno registrirajte barem Alt. Format vaših slika trebao bi biti otprilike ovako:

U stvari, postoji dosta atributa koji mogu biti, a sve ih možete vidjeti barem koristeći priloženu vezu. Ali u praksi ćete najvjerovatnije koristiti samo one koje sam naveo u ovom članku.

Dozvolite mi da vas još jednom podsjetim na pravila za pisanje oznaka. Iza početne trouglaste zagrade, uvijek bez razmaka, upisuje se njeno ime, a zatim se, odvojeno razmakom, upisuje naziv dozvoljenog atributa. Nakon naziva atributa, bez razmaka, stavlja se znak jednakosti i njegov parametar se piše u navodnicima (na primjer, širina u pikselima za širinu).

Sljedeći atribut unutar html oznake je odvojen od prethodnog razmakom. Na kraju se nalazi trokutasta zagrada za zatvaranje. Imajte na umu da Img nije uparen, tj. nema završnu oznaku.

U idealnom slučaju, ovako bi trebale biti dizajnirane sve slike koje se koriste u vašem web projektu. Ovaj izgled se može postići bez ručnog uređivanja HTML koda za svaku sliku. Vizuelni uređivači raznih CMS-a (Joomla, WordPress, itd.) omogućavaju vam da postavite sve ovo bogatstvo na način koji je prilagođen korisniku grafički interfejs, ali nakon probnog podešavanja, obavezno provjerite kod (u bilo kojem vizuelni urednik možete se prebaciti na prikaz html koda članka).

Kreirajte hiperveze koristeći html tag link "A"

Veza je jedan od glavnih elemenata organizacije dokumenata u HTML-u. Bez njih, web stranica bi bila samo stranica. Kreiraju se pomoću oznake "A". Jedini potrebni atribut je Href. On određuje URL (put) na koji korisnik treba da ide klikom na ovu hipervezu.

Link može voditi ili na internu stranicu vašeg vlastitog resursa (veoma važna tačka u internoj optimizaciji vezana je upravo za) ili na stranicu drugog projekta. HTML tag A je uparen i, shodno tome, ima element za zatvaranje. Tekst hiperlinka (sidro - o njemu se detaljno piše u smislu promocije SEO promocija) se postavlja između otvaranja i zatvaranja "A" oznake.

Pretraživači analiziraju ne samo sidro, već i riječi koje ga okružuju. Ovo treba uzeti u obzir prilikom postavljanja linkova do vaše stranice na druge resurse. Da bi izgledalo prirodnije, možete premjestiti dio teksta izvan sidra, na primjer:

Otvara se u novom prozoru i link sa slike (slika)

Pa, dobro, opet smo se omeli optimizacijom za pretraživače. Vratimo se na oznake. Za html tag “A” postoji jedan vrlo potreban atribut koji će vam omogućiti da otvorite stranicu na koju vodi ovaj link u novom prozoru. Ovo može biti potrebno ako se povezujete na mnogo vanjskih dokumenata s jedne stranice. U ovom slučaju, posjetitelju bi bilo zgodnije da vaša stranica uvijek bude otvorena.

Target ima opciju za ovu svrhu koja vam omogućava da otvorite stranicu u novom prozoru pod nazivom _BLANK. Ako Target nije naveden u tagu A, onda će se veza otvoriti u istom prozoru. Primjer upotrebe Ciljni atribut:

Sidro (ako se link koristi za interno povezivanje, onda ovaj tekst treba da sadrži ključne riječi kojima želite promovirati članak do kojeg vodi ova hiperveza)

Napominjemo da redoslijed atributa unutar oznaka nije reguliran ni na koji način. Sa istim uspjehom možete napisati:

Postoji mišljenje da pretraživači više cijene linkove sa slika, ali prema nekim podacima je suprotno. Ali kada koristite ovu vrstu linkova, ne postoji sidro u koje biste mogli ubaciti ono što je potrebno ključne riječi. U ovom slučaju, možete koristiti atribut Title za oznaku A.

Ru/image/finik.jpg" Width="200" Height="150">

Naslov se također može koristiti u slučaju običnog sidra teksta. U tom slučaju, informacije upisane u njemu bit će vidljive ako pomaknete kursor miša na hipervezu. Zapravo, ovaj atribut se može koristiti u gotovo svim oznakama HTML jezik, ali to neće donijeti mnogo koristi.

Ovdje trebate zapisati ključne riječi kojima želite promovirati članak do kojeg vodi ova hiperveza

Kreiranje sidra i hash veza

Još jedan interesantan atribut je NAME, koji se dosta koristio za kreiranje takozvanih sidrišta veza, kojima se moglo pristupiti pomoću takozvanih hash veza. Malo je zbunjujuće, ali sada ću pokušati da razjasnim. Recimo da ti treba odnose se na određeno mjesto u tekstu dokumenta(ne na njegovom početku), gdje se raspravlja o određenom pitanju.

Ako stavite jednostavnu hipervezu na ovaj članak, onda će se nakon klika na nju članak otvoriti na samom početku i korisnik će u njemu morati pronaći mjesto na koje ste željeli usmjeriti pažnju. Dakle, uz pomoć sidra i hash linkova možete osigurati da se članak otvori baš tamo gdje ste namjeravali i da korisnik ne mora kopati po nepotrebnom materijalu.

Za implementaciju opisane metode kreiranja hiperlinkova u HTML dokumentu, prethodno je bilo potrebno prvo umetnuti sidro u članak do kojeg bi vodio hash link. Sidro je bilo konstrukcija koja je podsjećala na običnu kariku, ali je istovremeno ostala nevidljiva posjetiocu. Izgledao je ovako:

One. ispostavilo se da se sidro sastojalo samo od otvaranja i zatvaranja oznake “A”, dok nije sadržavalo sidro i imalo je jedan jedini traženi atribut NAME. Parametar ovog atributa je bila oznaka, čije ime ste morali sami odrediti. Ova oznaka je kasnije korištena za kreiranje hash veze.

Ovo je način umetanja ankera smatra zastarjelim a validator HTML koda će se smatrati greška. Molimo obratite pažnju na ovo. Sidra se sada postavljaju dodavanjem na najbližu oznaku.

Recimo da bi za naslov u članku mogao izgledati ovako:

Naslov

Dakle, nakon što smo postavili sva potrebna sidra u tekst članka, možemo početi kreirati hash linkove koji će se odnositi na mjesta u tekstu članka koja su prethodno označena na gore opisani način (pomoću ID selektora) .

Hiperlink se kreira na standardan način, osim što se na kraju URL-a, koji je upisan u Href-u, stavlja hash znak (oštar znak ili heš simbol), a iza njega dolazi naziv oznake sidra. koji se nalazi na traženom mestu u tekstu članka.

Sidro

Ako je sidro u istom Html dokumentu kao i heš veza, tada se može specificirati samo sidro.

Sidro

Sretno vam bilo! Vidimo se uskoro na stranicama blog stranice

Možda ste zainteresovani

Liste u HTML kodu - UL, OL, LI i DL oznake
Kako se boje postavljaju u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex izlaz i drugi programi
HTML forme za sajt - oznake Forma, Input i Select, Option, Textarea, Label i drugi za kreiranje elemenata web obrasca
Img - Html oznaka za umetanje slike (Src), poravnavanje i premotavanje teksta oko nje (align), kao i postavljanje pozadine (background)
Kako napraviti hipervezu (A, Href, Target blank), kako je otvoriti u novom prozoru na sajtu, a takođe napraviti sliku kao link u HTML kodu
Iframe i Frame - šta su to i kako najbolje koristiti okvire u HTML-u
MailTo - šta je to i kako napraviti link u HTML-u za slanje e-pošte Odaberite, Option, Textarea, Label, Fieldset, Legend - Html oznake za oblik padajućih lista i tekstualnih polja
Ugradi i objekt - HTML oznake za prikazivanje medijskog sadržaja (video, flash, audio) na web stranicama
Direktive komentara i Doctype u HTML kodu, kao i koncept blok i inline elemenata (tagova)

Hiperveze su izmišljene kako bi se međusobno povezivali dokumenti na mreži, a ako se vaša stranica sastoji od nekoliko stranica, a ne od jedne, onda ih možete povezati samo stvaranjem hiperlinkova. Pogledajmo direktno na primjeru kako ovo izgleda.

Kreiranje jednostavne hiperveze








Idi na drugu stranicu




Ovdje je sve jednostavno, za kreiranje hiperveze koristimo tag gdje je href=”” adresa stranice na koju će se izvršiti prijelaz, u našem slučaju ova stranica se nalazi u istom direktoriju. Ovdje također možete umetnuti adresu kao što je href=”http://site.ru/page.html“ ili to može biti link na arhivu koja se nalazi u drugom folderu na vašoj web-lokaciji href=”arj/arhiv.zip” ili na bilo koji drugi dokument, koji zapravo nema nikakve razlike. Također, obavezan atribut bilo koje hiperveze je naslov, ovo je opis linka, ovo je vrlo važan element u optimizaciji pretraživača i ovdje pišete ključne riječi stranice ili dokumenta na koji povezujete. Tekst koji se nalazi između oznake naziva se sidro, a takođe je veoma važan.

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 vezu 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 jednostavno u novoj kartici ili prozoru.

Linkovi slika





Koristimo hiperlinkove na sajtu









Rezultat u pretraživaču:

Ovdje je u suštini sve jednostavno, postavio sam oznaku slike između uvodne i završne oznake hiperveze , ali opet nisam samo ubacio dvije slike, jednoj sam dodijelio img klasu u kojoj sam resetirao okvir oko slike, pošto kada postane hiperlink pojavljuje se, ali ne u svim pretraživačima, vidjet ćete ga npr. u IE, ali ne i u Google Chromeu.

Podvlačenje u linkovima





Koristimo hiperlinkove na sajtu



Idi na drugu stranicu
Idi na drugu stranicu




Radi jasnoće, dao sam dvije opcije za rješavanje ovog problema, dodijelio ih selektoru klasa, a registracijom 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 naravno rijetko izaziva potrebu, ali znanje ipak nije suvišno.

Veze unutar dokumenta

Nije neuobičajeno kada je dokument prilično dugačak i na početku stranice se nalazi mali meni sa linkovima ka pododeljcima ove stranice. Ove veze se nazivaju linkovi unutar dokumenta, a sve se to vrlo jednostavno implementira. Za početak, sidra se postavljaju u dokument, to su oznake, postavljaju se u dokument gdje će ih trebati premjestiti kada kliknete na interni link, po pravilu su to naslovi odjeljaka, oznaka izgleda ovako:

< /a>

Poglavlje….< /a>

I posljednja stvar koju trebamo znati o hiperlinkovima su veze do elektronskih poštanskih sandučića, to se može implementirati vrlo jednostavno, samo dodajte unos kao što je mailto: i adresu poštanskog sandučića u href atribut:

Moja pošta< /a>

Ovdje završavam lekciju “Kreiranje hiperlinkova u html-u”, kao što ste možda primijetili, ovdje ne bismo mogli bez CSS-a, općenito je materijal prilično jednostavan, mislim da će vam sve biti jednostavno i jasno ako imate pitanja, pišite.

Datum objave: 2014-04-23