Mislim da ste već shvatili o čemu se radi u ovom poglavlju.. i znate šta je link, ako ne, onda kliknite ovdje.. Postoji nekoliko vrsta linkova, kao i "mehanizama" za njihovo praćenje. U ovom poglavlju pokušat ću vam detaljno reći kako registrirati veze, kao i posvetiti se zamršenostima rada s njima.
Lirska digresija:
Kad sam bio u vojsci, prišao mi je načelnik štaba i izdao naređenje, citiram:
Donesite mi taj dokument, stvarno ne znam gdje je i šta je!! šta stojiš? Trčimo!! Kasnim !!!
Pa šta ja ovo radim, da pretraživač, kao ja tada, ne padne u omamljenost, treba da zna: tačan naziv dokumenta, putanju do dokumenta i mesto gde da ga donese, odnosno gde da ga otvorim.
Trenutno smo uz pomoć notepad-a napravili samo jedan HTML dokument, imam ga pod nazivom index.html (zašto sam izabrao tako čudan naziv index.html i zašto vam je potreban i zašto vam treba) ne znam s kojim, sami ste smislili ime, ali mislim da ga se sećate i znate gde se nalazi, osim naravno ako niste moj šef kabineta :) .. U ovom dokumentu pokušaćemo da kreiramo link ka drugom dokumentu koji još nemamo.. Dakle, prije nego što ga povežete, morate ga kreirati, na sreću, već znate kako.
- Otvaramo svesku.
- Kod pišemo u html jeziku. na primjer stranica sa brojnim fotografijama.
- Čuvamo ga kao html stranicu u istom radnom folderu gde je već prvi dokument koji smo kreirali. Hajde da ga, da ne bude zabune, nazovemo primer.html, a prvi verovatno preimenujmo u index.html
Sada znam da imate dva html dokumenta index.html i primer.html i da sada imate minimalan set za dalje učenje.
Tekstualni linkovi.
Upoznajte oznaku (od sidro - sidro), u njega možete priložiti tekst ili sliku, koja će postati veza do određenih dokumenata. Atribut oznake href specificira ime i putanju do dokumenta na koji veza upućuje.
Sve zajedno je napisano ovako:
Evo mojih slika!!Kao što ste vjerovatno shvatili primer.html je naziv našeg drugog html dokumenta, a natpis "Evo mojih fotografija!!" ovo je dio teksta iz datoteke index.html.
Slično kao na slikama, oznaka
put linka do otvorenog dokumenta piše se na isti način:
Evo mojih slika!!- To znači da se datoteka primer.html nalazi jedan nivo više od dokumenta
Evo mojih slika!!- dokument se nalazi na web stranici www.site.ru ..
Pa, hajde da probamo? Ispod je primjer dva dokumenta odjednom u kojima su navedene veze koje upućuju jedna na drugu.
Index.html fajl:
Reci mi, drago dete, u kom uhu mi zuji?
V u pravu ili lijevo?
Primer.html fajl:
Iz primjera možete vidjeti da su linkovi označeni bojom, prema zadanim postavkama plava je veza, a crvena je već posjećena veza, ove boje se mogu promijeniti korištenjem početne oznake koja nam je već dobro poznata < body > i njegove atribute.
veza- boja linka.alink- boja aktivnog linka na koji se klikne.
vlink- boju posjećenog linka.
Napisano je ovako:
>Nastavljajući govoriti o boji tekstualne veze, vrijedi spomenuti da, ako je potrebno, možete prisilno istaknuti bojom i cijelu vezu i njene pojedinačne dijelove (fraze slova riječi) poznatom oznakom i njegov atribut boja. Međutim, ovo se ne odnosi samo na boju, već možete zasebno podesiti veličinu, stil i font teksta. Ali zapamtite da se manipulacija bojama mora obaviti unutar oznake. ovdje a ne preterano, inače će boja linka biti ili po defaultu, ili kako je napisano u tag-u
Index.html fajl:
link = "# 008000" alink = "# ff0000" vlink = "# ffff00">
Pogledajte frazu koja će vam pomoći da zapamtite mjesta cvijeća u dugi.
R
A
D
Imati
G
A
Primer.html fajl:
link = "# 008000" alink = "# ff0000" vlink = "# ffff00">
Svaki
lovac
željama
znam
gdje
sjedi
fazan
Vratite se na glavnu stranicu
Jedna od vaših stranica na sajtu obavezno treba pozvati index.html. To je fajl s ovim imenom koji će robot tražiti na vašoj web-lokaciji kada osoba unese ime vaše stranice. Od strane index.htmlće se otvoriti prvi, neka bude glavni. Ostale stranice možete zvati kako god želite...nema više nijansi s imenima.
O slučaju .. Kada pišete putanju i nazive dokumenata, zapamtite da su, na primjer: Page.html, page.html i PAGE.html ovo imena različitih dokumenata! Isto važi i za nazive obeleživača i slike. Prilikom pisanja koda uvijek budite osjetljivi na velika i mala slova, postoji velika vjerovatnoća da ovaj ili onaj pretraživač neće prepoznati takva imena. Neka bude pravilo da sve pišete i zovete malim latiničnim slovima, tada će se rizik od ljudskog faktora i hirova programa svesti na nulu.
Pravilo tri klika.
Pokušajte formirati "stablo linkova" na način da posjetitelj stranice može doći sa bilo koje njegove stranice na bilo koje mjesto na stranici uz minimalan broj klikova na linkove. Više od tri prelaska na pravo mjesto na stranici više nije dobro.. Beskrajna preuzimanja nepotrebnih stranica za osobu mogu dovesti do nervnog sloma i preranog zatvaranja stranice. Uštedite vrijeme, novac i živce ljudi.
Hiperveze 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 pomjeriti kada se klikne 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:
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, pišite pitanja.
Datum objave: 2014-04-23
Hiperveze su jedna od najvažnijih komponenti html dokumenata. Zahvaljujući ovoj komponenti, kao i uobičajenim vezama, internet je tako jednostavan za korištenje. Pogledat ćemo najjednostavnije opcije za umetanje hiperveza koje će vam pomoći da kao programeri početnici savladaju ovu lekciju.
Kako napraviti hipervezu u html-u?
Ovaj kod će raditi samo na vašoj web stranici, za vanjske veze neće raditi.
< a href=" *** ">***** < /a>
primjer:
< a href="https://сайт/">Dnevnik Kako sve raditi< /a>
U pretraživaču će izgledati ovako:
< a href="https://сайт/prigotovlenie-edy/368-kak-sdelat-malosolnye-ogurcy.html">Kako napraviti malo slane krastavce?< /a>
U pretraživaču možemo vidjeti sljedeće:
Kako napraviti hipervezu u html-u na eksternu stranicu?
Za xrefs, kod bi trebao biti malo izmijenjen. Za povezivanje na drugu stranicu, koristeći kod:
< a href="*** ">***** < /a>
< a href="https://vk.com/kaksdelatvse">U kontaktu smo "Kako sve uraditi"< /a>
Hiperlink može povezivati stranice unutar jedne stranice ili upućivati na bilo koju stranicu na Internetu. Kada pravite veze ka tuđim stranicama, uvijek trebate koristiti apsolutnu adresu stranice (http://www.site.com/page.html). Kada se povezujete na stranicu unutar web stranice, poželjno je koristiti relativni URL (page.html, catalog / page.html). Kada pravite grafičku hipervezu, imajte na umu da grafika nije dostupna nekim korisnicima, pa obavezno uključite odgovarajuće tekstualne elemente.
primjer:
Hiperlink unutar html stranice
Ponekad je potrebno napraviti hipervezu unutar iste stranice. Na primjer, na ovoj stranici, ovo su hiperveze na početku lekcije, koje vam omogućavaju da pređete na pregled određenog pitanja, i na samom dnu stranice, omogućavajući vam da odete na vrh stranice.
primjer:
Mail hiperveza
primjer:
|
HTML kod: [email protected] |
Prikaz u pretraživaču: |
Otvaranje html stranica u novom prozoru
Koristeći atribut TARGET, možete učitati stranicu u novom prozoru pretraživača. Ovaj atribut se koristi za postavljanje imena prozora. Naziv prozora se koristi u poslovne svrhe. Da otvorite stranicu u novom prozoru, koristite konstantu _blank.
primjer:
Boja teksta hiperveze
Atributi LINK, ALINK, VLINK postavljaju boju fonta hiperlinkova.
Atribut LINK se koristi za isticanje hiperveza koje korisnik još nije posjetio.
Redoslijed sljedećih hiperlinkova
Neki pretraživači mogu podržavati taster Tab za praćenje hiperveza. Pretraživač, prema zadanim postavkama, ističe hiperveze redoslijedom kojim se pojavljuju u tekstu stranice. Možete promijeniti redoslijed skokova koristeći TABINDEX atribut oznake ... Da biste uključili hipervezu u listu koja opisuje novi poredak navigacije, morate atributu TABINDEX dodijeliti neki pozitivan cijeli broj u rasponu od 1 do 32767. Da biste isključili hipervezu sa liste, morate atributu dodijeliti bilo koji negativan broj. Kada korisnik pritisne taster Tab, kursor se pomera na hipervezu sa najnižom pozitivnom vrednošću indeksa. Ako nekoliko hiperveza ima istu vrijednost indeksa, prva odabrana će biti ona koja je viša u tekstu stranice.
Treba reći da se atribut TABINDEX može koristiti za odabir drugih objekata, kao što je grafika.
"Hiperveze u HTML-u" je peta lekcija HTML tutorijala. Ova lekcija će se fokusirati na korištenje hipertekstualnih veza. Svaki web dokument je baziran na hipertekstualnim vezama, tako da je svaki web master dužan znati raditi sa linkovima.
Pravila za korištenje hipertekstualnih veza.
Hiperveze u HTML-u neophodni su za povezivanje različitih dokumenata, kako unutar jedne stranice, tako i unutar cijelog Interneta. Za kreiranje hipertekstualnih veza (hiperveza) koristite deskriptor :
Atribut href se koristi za prosljeđivanje adrese dokumenta na koji veza upućuje.
Veliki broj objekata može djelovati kao hiperveze, uključujući slike:
– meta tagovi u HTML-u.
Možete se pozivati ne samo na različite dokumente, već i na različite dijelove ovih dokumenata. Da biste to učinili, u neki dio dokumenta potrebno je postaviti takozvano sidro - konstrukciju pogleda, a zatim se pozvati na nju navođenjem sljedećeg koda u atributu href:
href = "http: //www.site.# naziv sidra"
Ako pretraživač ne može pronaći navedeno imenovano sidro na pozvanoj stranici, tada će prijelaz jednostavno ići na početak dokumenta i neće doći do grešaka.
Hipertekstualna komunikacija se može odvijati preko raznih protokola. U nastavku su predstavljeni najčešće korišteni:
- HTTP- protokol - standardni protokol za hipertekstualne komunikacije, dizajniran za jednokratni prijenos blokova informacija.
- FTP- protokol - univerzalni protokol za prijenos datoteka. Zahtijeva autorizaciju.
- MAILTO- standardni protokol za prijenos pošte.
Postavljanje hiperlinkova u HTML-u.
Ciljni atribut, oznaka definira kako će se nova stranica otvoriti i uzima sljedeće vrijednosti:
- _self - dokument će se otvoriti u trenutnom prozoru
- _parent - u nadređenom okviru trenutnog okvira
- _top - u glavnom prozoru cijele strukture okvira
- _blank - dokument će se otvoriti u novom prozoru
Na primjer, da otvorite stranicu s kontaktima u novom prozoru, morate koristiti sljedeći kod:
- Link - definiranje izgleda još neposjećenih linkova.
- Alink - definiranje izgleda već posjećenih linkova.
- Vlink - definiranje izgleda odabranih linkova.
U sljedećoj lekciji ćemo govoriti o radu sa grafikom u HTML-u: kako umetnuti slike, prilagoditi njihov izgled i još mnogo toga.
