Pozdrav, dragi čitatelji bloga. U sljedećem članku iz ovog odjeljka nastavit ćemo promatrati oznake. Ranije smo naučili), razgovarali o oblikovanju komentara i ), a dotakli smo se i teme razmaka u Html kodu i . Da, također smo razgovarali o mogućnostima.
Danas se želim detaljnije osvrnuti na one elemente jezika za označavanje hiperteksta s kojima ćete se najčešće susresti kada radite na svom web projektu. govorim o umetanje slika i hiperveza u kod web stranica. Bez znanja o tome, bit će vrlo teško produktivno raditi na dizajnu web stranice. Ove se oznake aktivno koriste i pri pisanju i dizajniranju članaka, i pri dizajniranju predloška koji se proteže preko okvira motora.
Kako umetnuti sliku - html Img oznake
Recimo da za pisanje članaka koristite vizualni uređivač koji vam omogućuje da ne razmišljate o tome kako su točno oznake slika i hiperveza napisane u kodu. No, činjenica je da niti jedan urednik nije idealan, a često ćete se jednostavno morati prebaciti na način kako biste popravili sljedeću grešku u dizajnu teksta članka html urednik i mijenjati izravno oznake slika i samih poveznica.
Ako znate kako umetnuti slike i poveznice u HTML dokument, to vam može uvelike pojednostaviti život i uštedjeti vrijeme. Štoviš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 također aktivno koriste u dizajnu predloška koji koristite - umetanje poveznica, slika, spremnika, popisa (o njima pričamo), raznih itd.
I, stoga, kako bismo razumjeli strukturu predloška (govori o Joomla predlošcima i o WordPress teme) i po potrebi ga mijenjati, opet morate znati barem mali broj elemenata koda. Vjerujte mi, vrijeme potrošeno na ovo više će se nego isplatiti u budućnosti. Pa, pretpostavimo da sam vas uvjerio u potrebu da se upoznate s označnim jezikom i vrijeme je da prijeđemo izravno na heroje naše današnje publikacije.
Za umetanje slika Na stranici se koristi HTML Img oznaka. Slika u nastavku umetnuta je pomoću njega:
Atribut Src omogućuje vam da odredite naziv i mjesto pohrane slikovne datoteke (drugim riječima, put do nje). U ovom slučaju, može se ukazati na datoteku sa slikom. Staze su navedene pomoću znaka "/" koji služi kao razdjelnik između imena poddirektorija u kojima su pohranjene slikovne datoteke.
Apsolutni put do Srca počet će od http://vash_sait.ru (za moj blog -). Zatim, koristeći “/” za odvajanje naziva podmapa, piše se puna staza do slikovne datoteke, koja na kraju završava s nazivom i ekstenzijom same datoteke. Na primjer,
Relativni put u Src-u postavlja se definiranjem relativnog puta od izvorne mape, koja sadrži datoteku samog HTML dokumenta i iz koje pokušavate otvoriti sliku, do grafičke datoteke. Ako se ova datoteka nalazi na poslužitelju u istoj mapi kao i dokument iz kojeg joj se pristupa, tada ne morate navesti put do nje - trebate samo navesti naziv grafičke datoteke (čuvajući mala i mala slova ).
Ako se ova datoteka nalazi na istom poslužitelju, ali u drugom direktoriju, morate navesti put do nje iz direktorija u kojem se nalazi dokument iz kojeg se pristupa (u gornjem primjeru koristi se relativni put - slika/finik.jpg) .
Postavite širinu i visinu slike pomoću atributa Širina i Visina
Html atributi Width i Height omogućuju vam postavljanje veličine područja (širine i visine) koje će biti dodijeljeno na stranici pod ova slika. Umeću se unutar oznake Img, na primjer ovako:
Ako ovo područje ne odgovara stvarnoj veličini slike koju želite umetnuti, tada će se slika razvući ili suziti prema navedenoj veličini. Međutim, ovu metodu ne biste trebali koristiti, recimo, za smanjenje veličine slike umetnute u dokument. Uostalom, njegova će težina i dalje ostati velika, a to će usporiti učitavanje web stranice.
Bolje je prvo promijeniti veličinu slike grafički urednik(možete čak i u ), i tek onda ga umetnite u dokument. Također, prilikom spremanja grafičke datoteke treba obratiti pozornost na njenu konačnu težinu. Ne smije biti prevelik. Ponekad je bolje malo žrtvovati kvalitetu slike (srećom, s malim veličinama to će biti praktički neprimjetno) kako bi se smanjila konačna težina.
Prilikom spremanja crteža koristite kompaktne vrste GIF (za umetanje shematskih slika) ili JPG (za umetanje fotografija). Width i Height, za razliku od Src atributa (jedinog obaveznog u Img tagu), nisu obavezni. Mnogi ih jednostavno ne ukazuju, ali oni, ipak, malo dopuštaju ubrzati učitavanje dokumenata.
Činjenica je da ako preglednik ne pronađe Width i Height unutar html Img oznake, tada će trebati 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, preglednik automatski rezervira prostor za sliku veličina navedenih u ovim atributima i nastavlja učitavati web stranicu dalje.
Ako su grafičke datoteke prikazane na određenoj stranici vrlo teške i ima ih puno, tada će umetanje Visine i Širina omogućiti korisnicima da počnu čitati tekst stranice dok se grafika još učitava.
Također, ako ne navedete širinu i visinu unutar slike, može doći do situacije u kojoj će, s malom slikom i vrlo dugim alternativnim tekstom (postavljenim atributom Alt u oznaci slike, o čemu se raspravlja u nastavku), doći do privremenog pomaka prije nego što se grafika učita dizajn web stranice, jer dugačak alternativni tekst zauzet će prostora koliko god treba.
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 napisati ove atribute u oznaci Img.
Alt i Title u HTML Img oznaci
Vrlo korisni, sa stajališta interne optimizacije web stranice za tražilice, su atributi Alt i Title. Proč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 svom pregledniku. Alt je dizajniran za to - da govori tražilicama kakva bi slika trebala biti. Naslov ima za cilj informirati korisnika o sadržaju slike.
Sadržaj naslova iz oznake Img prikazuje se u skočnom retku ako korisnik prijeđe mišem preko slike. Oba ova atributa (ako ste ih naveli) omogućuju vam uključivanje slika vašeg web projekta u . Stoga ne smijete zanemariti ovu priliku i svakako se registrirajte barem Alt. Raspored vaših slika trebao bi biti otprilike ovakav:
Zapravo, postoji dosta atributa koji mogu biti i sve ih možete vidjeti barem pomoću navedene veze. Ali u praksi ćete najvjerojatnije koristiti samo one koje sam naveo u ovom članku.
Dopustite mi da vas još jednom podsjetim na pravila za pisanje oznaka. Iza početne trokutaste zagrade, uvijek bez razmaka, ispisuje se njegov naziv, a zatim, odvojen razmakom, ispisuje se naziv atributa koji mu je dopušten. Nakon naziva atributa, bez razmaka, stavlja se znak jednakosti i njegov parametar se piše pod navodnicima (npr. širina u pikselima za širinu).
Sljedeći atribut unutar html oznake odvojen je od prethodnog razmakom. Na kraju se nalazi zatvarajuća trokutasta zagrada. 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 može se postići bez ručnog uređivanja HTML koda za svaku sliku. Vizualni uređivači različitih CMS-ova (Joomla, WordPress, itd.) omogućuju vam da sve to bogatstvo postavite na jednostavan način grafičko sučelje, ali nakon probnog postavljanja svakako provjerite kod (u bilo kojem vizualnom uređivaču možete se prebaciti na prikazivanje html koda članka).
Stvorite hiperveze koristeći html oznaku veze “A”
Veza je jedan od glavnih elemenata organizacije dokumenta u HTML-u. Bez njih bi web stranica bila samo stranica. Izrađuju se pomoću oznake "A". Jedini potreban atribut je Href. Određuje URL (put) na koji bi korisnik trebao otići klikom na ovu hipervezu.
Veza može voditi do interne stranice vašeg vlastitog resursa (vrlo važna točka interna optimizacija posebno povezan na ), i na stranicu drugog projekta. HTML oznaka A je uparena i, prema tome, ima zatvarajući element. Tekst hiperveze (anchor - o njemu se detaljno piše u smislu promocije SEO promocija) nalazi se između početne i završne oznake "A".
Tražilice analiziraju ne samo sidro, već i riječi koje ga okružuju. To treba uzeti u obzir kada postavljate veze na svoju stranicu na druge resurse. Da bi izgledalo prirodnije, možete premjestiti dio teksta izvan sidra, na primjer:
Otvara se u novom prozoru i poveznica sa slike (slika)
Pa dobro, opet smo ometeni optimizacija pretraživača. Vratimo se na oznake. Za html oznaku “A” postoji jedan vrlo potreban atribut koji će vam omogućiti da otvorite stranicu na koju ovaj link vodi u novom prozoru. Ovo može biti potrebno ako se s jedne stranice povezujete na mnogo vanjskih dokumenata. Posjetitelju bi u tom slučaju bilo zgodnije da vaša stranica uvijek bude otvorena.
Target za tu svrhu ima opciju koja vam omogućuje otvaranje stranice u novom prozoru tzv _PRAZAN. Ako cilj nije naveden u oznaci A, poveznica će se otvoriti u istom prozoru. Primjer korištenja atributa Target:
Anchor (ukoliko se link koristi za interno linkanje, onda ovaj tekst treba sadržavati ključne riječi kojima želite promovirati članak na koji ova hiperlink vodi)
Imajte na umu da redoslijed atributa unutar oznaka nije reguliran ni na koji način. S istim uspjehom možete napisati:
Postoji mišljenje da tražilice više cijene linkove sa slika, ali prema nekim podacima je upravo suprotno. Ali kada koristite ovu vrstu poveznica, ne postoji sidro u koje biste mogli umetnuti 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 će slučaju informacije zapisane u njemu biti vidljive ako kursor miša pomaknete na hipervezu. Zapravo, ovaj atribut se može koristiti u gotovo svim tagovima Html jezika, ali neće biti od velike koristi.
Ovdje je potrebno upisati ključne riječi kojima želite promovirati članak na koji ova hiperlink vodi
Stvaranje sidara i hash veza
Još jedan zanimljiv atribut je NAME, koji se dosta često koristio za stvaranje takozvanih sidrišta veza, kojima se moglo pristupiti pomoću takozvanih hash veza. Malo je zbunjujuće, ali sada ću pokušati razjasniti. Recimo da trebate uputiti na određeno mjesto u tekstu dokumenta(ne na početku), gdje se raspravlja o određenom pitanju.
Ako stavite jednostavnu hipervezu na ovaj članak, nakon klika na nju, članak će se otvoriti na samom početku i korisnik će u njemu morati pronaći mjesto na koje ste htjeli koncentrirati pozornost. Dakle, uz pomoć sidara i hash linkova možete osigurati da se članak otvara točno tamo gdje ste namjeravali i da korisnik ne mora kopati po nepotrebnom materijalu.
Za implementaciju opisanog načina kreiranja hiperlinkova u Html dokumentu prethodno je bilo potrebno prvo umetnuti anchor u članak na koji bi vodio hash link. Sidro je bila struktura koja je podsjećala na običnu poveznicu, ali je u isto vrijeme ostala nevidljiva posjetitelju. Izgledao je ovako:
Oni. pokazalo se da se sidro sastojalo samo od početne i završne oznake “A”, dok nije sadržavalo sidro i imalo je jedan jedini traženi atribut NAME. Parametar ovog atributa bila je oznaka čiji ste naziv morali sami odrediti. Ova je oznaka kasnije korištena za izradu hash veze.
Ovo je način na koji se umeću sidra smatrati zastarjelim a validator HTML koda smatrat će se kao greška. Molimo obratite pozornost na ovo. Sidra se sada postavljaju dodavanjem na najbližu oznaku.
Recimo da naslov u članku može izgledati ovako:
Naslov
Dakle, nakon što smo postavili sva potrebna sidra u tekstu članka, možemo krenuti u izradu hash linkova koji će upućivati 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, s tim što se na kraju URL-a koji je napisan u Href-u stavlja hash (oštro ili hash symbol), a iza njega dolazi naziv oznake sidra. koji se nalazi na traženom mjestu u tekstu članka.
Sidro
Ako je sidro u istom Html dokumentu kao hash veza, tada se može navesti samo sidro.
Sidro
Sretno ti! Vidimo se uskoro na stranicama bloga
Moglo bi vas zanimati
Popisi u Html kodu - UL, OL, LI i DL oznake 
Kako su postavljene boje u Html i CSS kodu, izbor RGB nijansi u tablicama, Yandex izlaz i drugi programi 
HTML obrasci za web mjesto - oznake Form, Input and Select, Option, Textarea, Label i druge za izradu elemenata web obrasca 
Img - Html tag za umetanje slike (Src), poravnavanje i omatanje teksta oko nje (align), kao i postavljanje pozadine (background) 
Kako napraviti hipervezu (A, Href, Target blank), kako je otvoriti u novom prozoru na stranici, a također napraviti sliku poveznicom u Html kodu 
Iframe i Frame - što su i kako najbolje koristiti okvire u Html-u 
MailTo - što je to i kako napraviti link u HTML-u za slanje e-pošte Select, Option, Textarea, Label, Fieldset, Legend - Html oznake za oblik padajućih popisa i tekstualnih polja 
Embed and object - Html oznake za prikaz medijskog sadržaja (video, flash, audio) na web stranicama 
Naredbe komentara i Doctype u Html kodu, kao i koncept bloka i inline elemenata (tagova)
Glavna značajka HTML dokumenta je prisutnost u njemu hiperveze(ili jednostavno veze) na druge dokumente, stranice, datoteke, slike, itd. Mogućnost umetanja poveznica na stranice na objekte izvan nje učinila je Internet tako popularnim i praktičnim za korištenje. Stoga, kada kreirate svoju web stranicu, uvijek se sjetite "čarolije" poveznica.
U ovoj lekciji ćemo govoriti o kako stvoriti vezu na mjesto, na svoje zasebna stranica 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.
Pojmovi
§ 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. Veze sidra mogu biti poput u običnom tekstu(tekstualni link) i grafički prikaz(link-slika). 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 poveznica možete primijeniti ista pravila kao i na glavni tekst stranice, tj. istaknuti ga podebljanim slovima, 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
Za udobnu navigaciju kroz stranice sa veliki iznos sadržaj koristi interne veze. 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
I naziv "sidra" postavlja se proizvoljno. Ovdje je vrijedno 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.
“Ja sam ospice” nalazi se na onim mjestima na stranici gdje korisnik treba otići nakon klika na link.
Kao što sam rekao gore, u atributu href internog linka umjesto adrese navodi se naziv željenog “sidra” uz obavezni hash simbol ( # ) ispred njega. Pogledajmo to na primjeru.
Napravio sam "sidro" s imenom zagolovok i smjestio ga u kod stranice pored naslova ove lekcije (“Hiperveze u HTML-u”). Kod sidra je sljedeći:
name="zagolovok">
href="#zagolovok">Na naslov
A u pregledniku ovako:
Ako ste primijetili, nakon što ste pratili internu poveznicu do naslova, URL u adresna traka preglednik:
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! To jest, recimo da ste izradili stranicu s dugačkim člankom o nečemu (ili ste ga objavili na stranici veliki broj fotografije) i označili ga 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 korijenska mapa web mjesta (ona u kojoj je početna stranica), ili u odnosu na izvornu stranicu. Takve veze su potrebne, na primjer, ako se stranica nalazi na kućno računalo. 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
I u pregledniku je tako.
Hipertekst je tekst koji sadrži poveznice na drugi tekst. Primjer bi bile autorove bilješke o složene definicije ili bilješke prevoditelja na dnu stranice knjige ako sadrži tekst na stranom jeziku. Internetske stranice složeni su sustav hipertekstualnih prijelaza s jedne stranice na drugu, unutar same stranice, kao i između izvora koji nisu povezani s jednom temom. Ova struktura je praktična, štedi puno vremena, omogućuje posjetitelju da brzo pronađe potrebne informacije i ne zbuni se. velike količine prijelazi.
Umetanje hiperveze
U HTML-u se deskriptor (tag) koristi za umetanje hiperveze. , koji se umeće na željeno mjesto. Obično se postavlja među tekst, budući da je sama hiperveza tekstualna struktura. Ali veze također mogu biti grafičke (ikone, gumbi, slike); o njima će se dalje raspravljati. Njihov položaj na web stranici nije ograničen samo na tekst, već ovisi o dizajnerskoj odluci kreatora stranice.
Ovo je primjer kako umetnuti hipervezu u HTML dokument, što se radi pomoću oznake . Posjetitelj stranice će vidjeti podcrtani tekst, različit od boje okolnog teksta (boja HTML veze može biti bilo koja), “Google početnu stranicu”, klik na koju će ga odvesti na glavnu stranicu Google tražilice. Treba napomenuti da tekst hiperveze mora sadržavati informacije o tome gdje će se izvršiti prijelaz. Ovog se principa treba pridržavati i prihvatiti ga kao pravilo!
Struktura oznake ...
Možete primijetiti da oznaka - u paru: potrebna je oznaka za zatvaranje.
href—atribut oznaka, označava svrhu veze.
https://google.com/ - vrijednost atributa, koji sadrži URL resursa na koji će se izvršiti prijelaz. Nalazi se u dvostrukim ili jednostrukim navodnicima. To ovisi o strukturi ugniježđivanja oznaka prema HTML pravilima.
cijela ova struktura se zove element web dokument.
Prema pravilima HTML-a, neki elementi mogu sadržavati druge elemente. Označiti nije iznimka. Ako programer treba podebljano istaknuti riječ Google, onda se to radi pomoću oznake prema općim pravilima oblikovanja teksta, promatrajući redoslijed ugniježđivanja oznaka. Webmaster mora znati kako stvoriti hipervezu u HTML-u bez grešaka, inače neće raditi. Neispravne veze se u kompjuterskom žargonu nazivaju "pokvarene".
Ovdje: element
sadrži ugniježđeni element
Apsolutne hiperveze
protokol://ime domene/put do datoteke
Primjer adrese za tražilicu uobičajenu u Americi: https://aol.com - apsolutna, budući da sadrži naziv domene.com.
Apsolutne hiperveze koriste se za navigaciju do stranica na drugim stranicama ili za pristup resursima koji se nalaze na drugom poslužitelju. Prijelaz se provodi pomoću internetskih protokola. Protokoli nisu tema ovog članka, ali budući da su uključeni u stvaranje hiperlinkova, potrebno ih je barem ukratko spomenuti:
- http I https - najčešće; koriste se za navigaciju između internetskih stranica različitih stranica;
- ftp - protokol za učitavanje datoteka na poslužitelj ili preuzimanje od strane korisnika sa stranice;
- mailto - poštanski protokol koji se koristi za slanje E-mail izravno sa stranice, bez odlaska u vašu osobnu e-poštu.
Postoji još nekoliko protokola posebne namjene (gopher, telnet), koji su dosta rijetki, a za čiju upotrebu je potrebno posebno znanje u programiranju ili administraciji sustava.
Relativne hiperveze
Uz relativno adresiranje, korištenje hiperveza u HTML-u služi za navigaciju unutar resursa i ne vodi izvan njegovih granica. Ako je stranica toliko velika da radi okomita traka za pomicanje, ponekad vrlo dugačka, kao, na primjer, u rječnicima, tada je vrlo zgodno i preporučljivo koristiti relativne veze za brzi skok do željenog slova.
Prilikom izrade online rječnika, programer stavlja abecedu na početak stranice, a da nije za korištenje poveznica, korisnik bi morao jako dugo okretati kotačić miša kako bi došao do slova “I ”.
Gdje da nazvao sidro, A Idi na slovo I- odredišno sidro. Za ispravan prikaz sidara preporučljivo je koristiti latinična slova i brojke, tako da ne treba pisati “I”, iako bi bilo jasnije.
Sada, da biste prešli s abecede na početku stranice na slovo "I", morate sidriti sidro na mjestu u HTML dokumentu gdje počinju riječi koje počinju slovom "I":
ispred sidra nalazi se znak hash, bez kojeg prijelaz na slovo neće funkcionirati.
Relativno adresiranje pri izradi stranice
Prikladan i općenito prihvaćen algoritam za izradu web stranice od strane programera:
- stvaranje mape na vašem računalu i postavljanje na mjesto za brzi pristup radi praktičnosti;
- stvaranje glavne mape u ovoj mapi;
- izrada sekundarnih web stranica (index.html/page2);
- i smještaj grafičkih datoteka u njega;
- stvaranje mape i postavljanje drugih objekata u nju (datoteke za preuzimanje, na primjer);
- punjenje stranice sadržajem;
- hosting datoteke stranice.
Svakako ćete morati koristiti poveznice za povezivanje između elemenata stranice, a bit će vrlo korisno znati kako umetnuti hipervezu u HTML na drugu stranicu iste stranice. Ako se datoteke stranice nalaze u istom direktoriju, na istom poslužitelju, tada nema potrebe za korištenjem apsolutnog adresiranja. Prilikom prijenosa datoteka stranice na hosting, veza između objekata će biti sačuvana, jer će također biti smješteni u isti direktorij na hostingu.
Recimo da je programer stvorio glavnu stranicu stranice index.html, koja ima poveznicu na drugu stranicu page2.html, ukrašenu slikom img.png. Tada će relativni put do ove slike izgledati ovako:
Savjet: Kada proučavate ovu temu, najbolje je koristiti jednostavan uređivač teksta jer morate steći vještinu pravilnog pisanja skok adresa i naučiti kako razumjeti kod drugih ljudi. U ovoj fazi bit će dobar rezultat hiperlink napisan u notepadu bez grešaka,HTML ih ne oprašta i proizvodi pogreške.
Metode za praćenje hiperveza
Zadano nova stranica otvara se u trenutnom prozoru preglednika kada korisnik klikne na hipervezu. Ali web programer može promijeniti zadanu vrijednost i prisilno otvoriti stranicu, na primjer, u novom prozoru. Za to postoji atribut cilj s određenim značenjem. To se najjasnije može prikazati tablicom.
Sintaksa atributa cilj:
Google početna stranica otvorit će se u novom prozoru.
Napomena: za otvaranje stranica u novoj kartici, ne postoje vrijednosti za ovaj atribut, već ga postavlja sam korisnik u postavkama preglednika.
Boja hiperveze
Iskusni korisnik interneta trebao je s vremenom primijetiti da su hiperveze različite boje od okolnog teksta, a obično su plave. Linkovi koje je slijedio pa se vratio na prethodnu stranicu postaju ljubičasti. Upotreba hiperveza u HTML-u u nestandardnoj shemi boja je mala, ali čini da se stranica ističe od ostalih.
Postavite boje poveznica u oznaci
pomoću atributa i njihovih vrijednosti, u kojima HTML boja u rgb sustavu (#00FF00) ili s izravnom naznakom naziva boje ("zelena"). Postoje tri vrste atributa za veze:- poveznica — postavlja boju neposjećene veze;
- vlink - postavlja boju poveznice koju je korisnik već slijedio;
- alink - postavlja boju veze u trenutku prelaska na drugu stranicu. To se događa brzo, pa nije uvijek moguće uhvatiti ovaj učinak.
Primjer označavanja:
Ako primijenite ove atribute u oznaci
, poveznice na ovaj web dokument bit će tamnoplave, posjećene poveznice ljubičaste, a aktivne poveznice narančasto-crvene.Grafičke hiperveze
Napredak i razvoj web dizajna zahtijeva da znate umetnuti hipervezu u HTML kao sliku. Jasno je da slika mora odgovarati sadržaju odredišne stranice. Na primjer, glavna stranica stranice o ljekovitom bilju može biti predstavljena u obliku fotografija biljaka, klikom na koju će korisnik biti preusmjeren na stranicu koja opisuje ljekovita svojstva biljke.
Široko korištena metoda za zamjenu statičnih gumba ( ) do prekrasne grafike koju je izradio web dizajner u grafičkim uređivačima (GIMP, Photoshop).
Za umetanje grafike kao hiperveze na stranice web-mjesta koristi se ista sintaksa, ali umjesto teksta koristi se oznaka za umetanje slike prema HTML pravilima:
Isto vrijedi i za atribute za postavljanje alternativnog teksta, širine, visine i drugih.
Pozivi sa stranice
Standard html5 je proširen funkcionalnost korištenje interneta, a sada možete telefonirati ne samo s telefona, već izravno s web stranice. U tu svrhu također možete koristiti hiperveze u HTML dokumentu, a one imaju sljedeću sintaksu:
...pretplatnik...
Umjesto riječi "pretplatnik" napisan je kontakt koji je razumljiv pozivatelju, kao u telefonskom imeniku. Također možete postaviti grafička datoteka(fotografija pretplatnika).
Da bi se pozivi mogli obavljati sa stranice, potrebno je imati ne samo poveznicu na telefonski broj pretplatnika, već i slušalice (mikrofon, slušalice), VoIP program instaliran na računalu, a brzina interneta mora biti veća od 0,5 Mb/s. Naplata poziva se vrši prema utrošenom prometu. Dakle, ako je internet neograničen, onda su pozivi besplatni.
Etika stvaranja hiperveza
Prilikom postavljanja web stranice na Internet, webmaster mora znati koje sve vrste hiperveza postoje u HTML-u, ne samo da ih pravilno i profesionalno primjenjuje, već se mora pridržavati i sljedećih odredbi:
- Hiperveza mora biti jasno vidljiva i odvojena od okolnog teksta. Korisnik mora znati da se radi o hipervezi.
- Korisniku treba biti jasno gdje će ići kada klikne na link. Za ovo je preporučljivo koristiti drugi atribut titula, koji jezgrovito opisuje prijelaznu stranicu. Sintaksa za korištenje atributa je:
- Korisnik mora dobiti istinitu informaciju o datoteci koja će biti preuzeta klikom na poveznicu.
Ako korisnik dođe na stranicu koja nije ona koju je očekivao ili preuzme krivu datoteku, u 99% slučajeva korisnik će odmah napustiti stranicu i više je nikada neće posjetiti.
Anti-Seo prilikom stvaranja hiperveza
Uz tehničku stranu pitanja kako umetnuti hipervezu u HTML, treba pokriti i moralni aspekt. Postoje mnoge stranice kojima korisnici blokiraju pristup od strane sigurnosnih programa (antivirus) ili čak od strane vlade. Ovo su stranice koje su izradili nepošteni web programeri.
Jedan od trikova kojima pribjegavaju je umetanje "nevidljivih" hiperlinkova na web stranicu. Prevaranti znaju kako napraviti hiperlink u HTML-u, te pomoću atributa ukloniti podcrtavanje linka i dodijeliti mu boju okolnog teksta tako da ga prosječni korisnik ne vidi. A uz pomoć drugih alata web tehnologije (CSS, JavaScript, PHP) možete programirati njihovo ponašanje. Na primjer, događaj JavaScript OnMouseOver pokreće radnju na elementu web stranice. Kada korisnik prijeđe pokazivačem iznad nevidljive poveznice, preusmjerava se na oglasnu stranicu na drugom mjestu. Ili još gore, kada postoji nevidljiva poveznica na datoteku i nepotrebne stvari se počnu preuzimati i instalirati na njegovo računalo softver. Obično su to virusi koji se mijenjaju početna stranica preglednici su pretrpani HDD puno programa i tako dalje.
Uskoro će takve stranice završiti na “crnoj listi” virusnih baza, sigurnosnih sustava i među samim korisnicima interneta. Takve stranice ne traju dugo i moraju mijenjati svoja imena, beskrajno seliti po Internetu, mijenjajući pružatelje hostova. To ne pridonosi promociji stranice, čemu njen tvorac uvijek teži i nikada od nje neće napraviti megaportal, kao što su, na primjer, društvene mreže. Između ostalog, takvi trikovi izazivaju mnogo negativnih emocija kod ljudi pogođenih tim radnjama.
Mislim da već razumijete o čemu će biti riječi u ovom poglavlju.. i znate što je poveznica, ako ne, onda kliknite ovdje.. Postoji nekoliko vrsta poveznica, kao i “mehanizama” za klikanje na njih. U ovom ću poglavlju pokušati detaljno govoriti o tome kako registrirati veze, kao i ući u zamršenost rada s njima.
Lirska digresija:
Jednom mi je u vojsci prišao načelnik stožera i naredio, citiram:
Donesite mi taj dokument, iako ne znam ni gdje je ni što je!! zašto stojiš Trčimo!! Kasnim!!!
Dakle, što mislim pod ovim, da preglednik ne bi pao u stupor kao ja tada, mora znati: točan naziv dokumenta, put do dokumenta i mjesto gdje ga dovesti, odnosno gdje ga otvoriti.
Na ovaj trenutak koristeći notepad, kreirali smo samo jedan HTML dokument, imam ga s imenom index.html (zašto ste odabrali tako čudan naziv index.html i zašto je potreban, pogledajte) Ne znam koji, vi ste smislili s imenom, ali mislim da ste ga koristili zapamtite i znate gdje je, osim naravno ako niste moj šef osoblja :).. U ovom dokumentu pokušat ćemo stvoriti poveznicu na drugi dokument koji još nemamo .. Dakle, prije nego što se povežete s njim, morate ga stvoriti, jer već znate kako to učiniti.
- Otvorite bilježnicu.
- Kod pišemo u html jeziku. na primjer, stranica s nizom fotografija.
- Spremamo ga kao html stranicu u istu radnu mapu u kojoj već postoji prvi dokument koji smo izradili. Nazovimo ga primer.html da izbjegnemo zabunu, a možda preimenujmo prvi u index.html
Sad znam da imaš dva html dokument i index.html i primer.html i da sada imate minimalni set za daljnje usavršavanje.
Tekstualne veze.
Upoznajmo tag (iz sidra), u njega možete priložiti tekst ili sliku koja će postati poveznica na određene dokumente. Atribut oznake href navodi naziv i put do dokumenta na koji vodi poveznica.
Sve zajedno piše ovako:
Evo mojih fotografija!!Kao što ste vjerojatno shvatili, primer.html je naziv našeg drugog html dokumenta, a natpis “Ovdje su moje fotografije!!” ovo je dio teksta iz datoteke index.html.
Po analogiji sa slikama, oznaka
Put poveznice do dokumenta koji se otvara određuje se istim metodama:
Evo mojih fotografija!!- To znači da se datoteka primer.html nalazi jednu razinu više od dokumenta
Evo mojih fotografija!!- dokument se nalazi na web stranici www.site.ru..
Pa, da probamo? Ispod je primjer dvaju dokumenata koji sadrže poveznice koje upućuju jedna na drugu.
Index.html datoteka:
Reci mi, dijete drago: u kojem uhu zuji?
U pravo ili lijevo?
Datoteka Primer.html:
Iz primjera možete vidjeti da su linkovi označeni bojom, prema zadanim postavkama plavo je link, a crveno je već posjećeni link, te boje se mogu mijenjati pomoću nama već dobro poznatog otvarajućeg taga < body > i njegovih atributa.
veza- boja veze.poveznica- boja kliknute, aktivne poveznice.
vlink- boja posjećene poveznice.
Napisano je ovako:
>Nastavljajući govoriti o boji tekstualne veze, vrijedi spomenuti da, ako je potrebno, možete prisiliti da se cijela veza i njeni pojedinačni dijelovi (fraze, riječi, slova) istaknu bojom pomoću poznate oznake i njegov atribut boja. Međutim, to se ne odnosi samo na boju, već možete zasebno postaviti i veličinu, stil i font teksta. Ali zapamtite da se manipulacija bojom mora obaviti unutar oznake ovdje a ne preko broda, inače će boja poveznice biti standardna ili kao što je navedeno u oznaci
Index.html datoteka:
link="#008000" alink="#ff0000" vlink="#ffff00">
Pogledajte frazu koja će vam pomoći da zapamtite mjesta boja u dugi
R
A
D
U
G
A
Datoteka Primer.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Svaki
Lovac
želje
znati
Gdje
sjedi
fazan
Vratite se na glavnu stranicu
Jedna od vaših stranica na web mjestu Obavezno treba pozvati index.html. To je datoteka s ovim imenom koju će program robot tražiti na vašoj web stranici kada osoba unese naziv vaše web stranice. Budući da je stranica index.html otvorit će se prvi, neka bude glavni. Ostale stranice možete zvati kako god želite... nema više nijansi s imenima.
O registru... Kada pišete putanju i nazive dokumenata, zapamtite da su npr. Stranica.html, stranica.html i STRANICA.html nazivi različitih dokumenata! Isto vrijedi i za nazive knjižnih oznaka i slika. Uvijek uzmite u obzir velika i mala slova kada pišete kod; postoji velika vjerojatnost da ovakva imena neće prepoznati jedan ili drugi preglednik. Neka bude pravilo da sve pišete i nazivate malim latiničnim slovima, tada će rizik od ljudskog faktora i hirova programa biti sveden na nulu.
Pravilo tri klika...
Pokušajte formirati "stablo poveznica" na takav način da posjetitelj stranice može doći s bilo koje stranice na bilo koje mjesto na stranici u minimalnom broju klikova. Više od tri prijelaza na na pravo mjesto na stranici ovo više ne valja.. Beskrajno učitavanje stranica koje su čovjeku nepotrebne može dovesti do živčanog sloma i preranog zatvaranja stranice. Uštedite ljudima vrijeme, novac i živce.
Razgovarajmo o prilično jednostavnom, ali u isto vrijeme popularnom pitanju. Kako od slike napraviti vezu? Događa se da postoji potreba za dodavanjem veze na strukturu web mjesta, na neki resurs, ne u obliku tekstualne veze, već u obliku slike. Što je sasvim logično, jer link u obliku slike izgleda privlačnije od običnog tekstualnog linka. A, osim toga, posjetitelju je puno bolje uočljiv.
Pitanje je zapravo vrlo jednostavno, ali ne može ga svatko riješiti. Kao primjer, predlažem da uzmete bilo koju sliku na Internetu i pretvorite je u poveznicu na resurs. Na primjer, dodati ću vezu na društvenu mrežu VKontakte u ovaj članak. A za dizajn izgleda veze, koristit ću VKontakte logo.
Dakle, da biste proveli svoj plan, morate pronaći ili nacrtati sliku, koja će kasnije postati poveznica. I smislite malo kako prikazati sliku, sa koristeći html. I također kako učiniti da slika postane poveznica, na koju se može u potpunosti kliknuti i koja radi.
HTML - slikovni kod.
Za prikaz slike u HTML kodu, možete koristiti oznaku img namijenjenu za to. Ovisno o sintaksi našeg koda, izlaz slike može izgledati drugačije. Na primjer, prilikom korištenja HTML sintaksa, kôd će izgledati ovako:
A kada koristite XHTML sintaksu - ovako:
Više detalja o sintaksi možete pronaći u članku o DOCTYPE.
Još malo o kodu:
src=”URL” — Umjesto URL-a potrebno je unijeti putanju do slike koju ćemo pretvoriti u poveznicu.
alt = "alternativni tekst" - namijenjen prikazu tekstualnih informacija o slici kada je prikaz slika onemogućen u pregledniku.
Osim toga, oznaka img ima i druge atribute. Glavni:
visina — visina slike
širina — širina slike
Ovo su samo neki od atributa koji se primjenjuju na slike. Ali u ovoj fazi imamo dovoljno. Svi ovi atributi mogu se dodijeliti kao u html kod, i u css stilovima.
HTML - kod veze.
Objašnjenja koda:
Oznaka a ima i druge atribute, ali u ovoj fazi možda nas zanima samo nekoliko njih:
target - dizajniran za određivanje u kojem prozoru preglednika će se dokument otvoriti pomoću trenutne veze. Na primjer, dokument će se otvoriti u trenutnom prozoru (zadano) ili u novom prozoru.
Dakle, sada znamo da je slika poveznica i da se sastoji od dva dijela koda. Sve što ostaje je kombinirati ih zajedno. Kao što sam rekao gore, koristit ću logotip društvena mreža VKontakte, da prikažem sliku i stavim vezu na svoju grupu, u kojoj ću, koristeći ciljni atribut, postaviti vezu da se otvori u novom prozoru.
Najprije je potrebno postaviti sliku na poslužitelj koji koristimo ili kopirati poveznicu na sliku na Internet. Više volim koristiti vlastiti poslužitelj za prikaz slika.
Želio bih odmah rezervirati da sam sliku učitao u wordpress biblioteku, odnosno u medijske datoteke. Budući da ću samo dodati sliku poveznice na članak. Ali kada dizajnirate web mjesto i dodajete razne elemente na web mjesto, ispravnije je učitavati slike pomoću FTP klijenta u mapu namijenjenu za to. U WordPressu se mapa najčešće nalazi u mapi teme i zove se images ili img.
Ovako će to izgledati:
Kao što vidimo, ispalo je, blago rečeno, ne baš najbolje. Poboljšati izgled a lokaciju će vam pomoći atributi za img. Također sam dodao odlomak kojem sam dodijelio atribut poravnanja teksta u sredinu. To znači da će tekst i ostali elementi koji se nalaze između p oznaka biti poravnati.
Još malo o oznaci p:
Dizajniran je za definiranje odlomka teksta. Ima oznake za otvaranje i zatvaranje.
stil - Atribut definira stilove elementa pomoću CSS pravila.
poravnanje teksta: središte; — CSS pravilo. Definira vodoravno poravnanje elementa (oznaka p i svi elementi unutar). U u ovom slučaju element je poravnat prema sredini.
Dakle, sredili smo sliku. Ali još nije postala poveznica.
To je uglavnom sve. Na prvi pogled može izgledati malo komplicirano. Ali u stvarnosti je sve jednostavno, glavna stvar je pažljivo pročitati sve što je napisano. I naravno, svakako pokušajte sami napraviti poveznicu sa slikom. Praksa vam najbolje pomaže da shvatite sve što vam nije jasno u teoriji, a također vam pomaže da puno bolje zapamtite što treba učiniti.