Početni vodič za linkove HTML5 mesta

Šta su HTML5 Linkovi za korisnike?

IdUp do HTML5, oznaka je zahtevala jedan atribut: href. Ali HTML5 čini čak i taj atribut opcionalnim. Kada napišete oznaku bez ikakvih atributa, naziva se link za mesto.

Vezica za mjesto izgleda ovako:

Prethodni

Korišćenje veznih mesta u toku razvoja

Gotovo svaki web dizajner je u isto vreme ili tokom drugog dizajnirao i napravio web stranice. Prije HTML5 pisali bismo:

tekst linka

kao nosioca mesta. I poslala sam sajtove za mockup klijentima sa tim zastupnicima samo da me klijent pita "zašto veze u tekstu ne funkcionišu?"

Problem korišćenja hashtag-a (#) kao link-a je da se veza može kliknuti i to može dovesti do konfuzije za vaše klijente. I, ako neko zaboravi da ih ažurira sa ispravnim URL-ima, te veze se mogu pojaviti slomljene na živom sajtu jer ne povezuju ni sa čim.

Umesto toga, trebalo bi početi koristiti oznake bez atributa. Možete ih oblikovati tako da izgledaju kao bilo koji drugi link na vašoj stranici, ali oni neće biti klikni, jer su samo zaglavlja.

Korišćenje linkova na stranicama uživo

Međutim, linkovi mesta imaju mesto u web dizajnu više nego samo razvoj. Jedno mesto na kome se može dodati link za mjesto je u navigaciji. U mnogim slučajevima, liste za navigaciju na webu imaju način da indiciraju na kojoj ste strani. Ovi se često nazivaju indikatori "vi ste ovde".

Većina stranica se oslanja na atribute id-ova na elementu kojem je potreban marker "vi ste ovde", ali neki koriste i atribut klase. Međutim, bilo koji atribut koji koristite, potrebno je uraditi gomilu posla na svakoj stranici koja ima navigaciju na njoj, dodajući i uklanjajući atribut iz ispravnih elemenata.

Sa vezom mesta, možete napisati svoju navigaciju koju želite, a zatim jednostavno uklonite atribut href sa odgovarajuće veze kada dodate navigaciju na stranicu. Čuvaj celu listu plovidbe kao fragment u mojem uređivaču, tako da je to samo brza kopija i onda izbrišite href. Takođe možete dobiti svoj CMS da uradi istu stvar.

Osim dodavanja posebnog stila (pokazat ću vam kako dolje) do linka za mjesto, veza se ne može kliknuti. Tako se klijenti ne zbunjuju misleći da mogu dobiti nešto drugo ako kliknu na navigacijsku vezu u kojoj su trenutno.

Linkovi stajališta

Linkovi mesta je jednostavan za stil i stil različit od drugih linkova na vašoj web stranici. Jednostavno obavezno stisnite oznaku i oznaku a: link. Na primjer:

a {boja: crvena; font-weight: bold; tekst-dekoracija: nema; } a: link {boja: plava; font-weight: normal; tekstualna dekoracija: podvlači; }

Ovaj CSS će učiniti boldove i crvene veze bez ikakvih naglasaka. Iako će regularne veze biti normalne težine, plave i podvučene.

Ne zaboravite da resetujete sve stilove koje ne želite prenijeti sa oznake. Na primjer, ja sam postavio tezinu fonta za bold za linkove mjesta, tako da sam morao da je podesite na:

font-weight: normal;

za standardne veze. Isto važi i za tekstualnu dekoraciju, uklanjajući ga selekcionerom, biće uklonjen za a: link selektor ako ga nisam vratio.