Príručka pre začiatočníkov pre odkazy na zástupné miesta vo formáte HTML5

Čo sú to odkazy HTML5 pre zástupcov?

idUp do HTML5, tag potreboval jeden atribút: href. Ale HTML5 dokonca tento atribút je voliteľný. Keď napíšete značku bez atribútov, nazýva sa jej odkazom.

Odkaz na zástupný symbol vyzerá takto:

Predchádzajúci

Pomocou zástupných odkazov počas vývoja

Takmer každý web dizajnér vytvoril zástupné symboly v rovnakom čase pri navrhovaní a vytváraní webových stránok. Pred HTML5 by sme napísali:

text odkazu

ako zástupný symbol. A poslala som klientom s mojimi zástupcami stránky mockup iba preto, aby sa klient spýtal "prečo nefungujú odkazy v texte?"

Problém s používaním značky hash (#) ako odkazu zástupného symbolu je to, že odkaz je možné kliknúť, čo môže spôsobiť zámenu pre vašich klientov. A ak niekto zabudne ich aktualizovať so správnymi adresami URL, tieto odkazy sa môžu zobraziť na webových stránkach naživo, pretože nie sú prepojené s ničím.

Namiesto toho by ste mali začať používať značky bez akýchkoľvek atribútov. Môžete ich vytvoriť tak, aby vyzerali ako akýkoľvek iný odkaz na vašej stránke, ale nebudú možné kliknúť, pretože sú iba zástupnými zástupcami.

Pomocou zástupných odkazov na stránkach naživo

Avšak odkazy na zástupné symboly majú miesto v webovom dizajne pre viac ako len vývoj. Jedno miesto, na ktorom sa môže zobraziť odkaz zástupného symbolu, je navigácia. V mnohých prípadoch sú navigačné zoznamy webových stránok nejakým spôsobom označené, na ktorej stránke sa nachádzate. Tieto sa často označujú ako ukazovatele "ste tu".

Väčšina lokalít závisí od atribútov id na prvku, ktorý potrebuje značku "ste tu", ale niektorí používajú aj atribút triedy. Avšak bez ohľadu na atribút, ktorý používate, musíte urobiť veľa práce na každej stránke, na ktorej je navigácia na nej, pridaním a odstránením atribútu zo správnych prvkov.

S odkazom na zástupný symbol môžete napísať svoju navigáciu tak, ako by ste chceli, a potom jednoducho odstráňte atribút href z príslušného odkazu, keď pridáte navigáciu na stránku. Ukladám celý môj navigačný zoznam ako úryvok do môjho editora, takže je to len rýchla kópia-vložiť a potom odstrániť href. Môžete tiež získať CMS robiť to isté.

Okrem pridávania špeciálneho štýlu (ukážem vám, ako nižšie) odkaz na zástupný symbol, odkaz nie je možné kliknúť. Takže zákazníci nemajú zmätený názor, že by mohli získať niečo iné, ak kliknú na navigačný odkaz, kde sú momentálne.

Styling Placeholder Links

Odkazy zástupných stránok sa ľahko štýlujú a štýlu odlišujú od ostatných odkazov na vašej webovej stránke. Jednoducho nezabudnite štýlovo označiť značku a aj značku odkazu: a. Napríklad:

a {farba: červená; font-weight: tučné; textová dekorácia: žiadne; } a: odkaz {farba: modrá; veľkosť písma: normálna; textová dekorácia: podčiarknutie; }

Tento CSS vytvorí odkazové symboly tučné a červené, bez podčiarknutia. Zatiaľ čo bežné odkazy budú mať normálnu hmotnosť, modré a podčiarknuté.

Nezabudnite obnoviť všetky štýly, ktoré nechcete preniesť z značky. Napríklad som nastavil veľkosť písma na tučné odkazy pre zástupné symboly, takže som ho musel nastaviť na:

veľkosť písma: normálna;

pre štandardné odkazy. To isté platí v prípade textovej dekorácie, ak ju odstránite pomocou voliča a, ak by som ju neposunul, bol by pre výber prepojenia a: odstránený.