Příručka pro začátečníky k odkazům na zástupné stránky HTML5

Co jsou to Odkazy pro zástupce HTML5 pro?

idUp do HTML5, tag vyžadoval jeden atribut: href. Ale HTML5 dokonce tento atribut je volitelný. Při zápisu značky bez atributů se nazývá odkaz zástupného symbolu.

Odkaz na zástupný symbol vypadá takto:

Předchozí

Použití zástupných odkazů během vývoje

Téměř každý webdesigner vytvořil zástupné symboly najednou nebo při vytváření webových stránek. Před HTML5 bychom psali:

text odkazu

jako zástupný symbol. A poslal jsem mockup stránky klientům s těmito zástupnými symboly pouze proto, aby se klient zeptal na mě "proč nefungují odkazy v textu?"

Problém s použitím značky hash (#) jako zástupného symbolu odkazuje na to, že odkaz je možné klikat, a to může způsobit zmatek pro vaše klienty. A pokud někdo zapomene aktualizovat je se správnými adresami URL, mohou se tyto odkazy na živém webu zobrazovat v rozporu, protože na ni nic neváží.

Místo toho byste měli začít používat značky bez atributů. Tyto styly můžete vypadat jako libovolný jiný odkaz na vaší stránce, ale nebudou klepnutí, protože jsou jen zástupnými symboly.

Použití zástupných odkazů na živých stránkách

Avšak odkazy na zástupné symboly mají místo v návrhu webových stránek více než jen vývoj. Jedno místo, na kterém může být zářit zástupný symbol, je navigace. V mnoha případech jsou seznamy navigace na webu nějakým způsobem označeny, na které stránce se nacházíte. Tito jsou často nazýváni "jste zde" indikátory.

Většina webových stránek se spoléhá na atributy id na elementu, který potřebuje značku "jste zde", ale někteří také používají atribut třídy. Nicméně, bez ohledu na atribut, který používáte, musíte provést spoustu práce na každé stránce, která má navigaci na ní, přidání a odstranění atributu ze správných prvků.

Pomocí odkazu zástupného symbolu můžete naplánovat navigaci, kterou chcete, a poté jednoduše odebrat atribut href z příslušného odkazu, když přidáte navigaci na stránku. Uložím celý seznam navigace jako úryvek do mého editoru, takže je to jen rychlá kopírování a vkládání href. Můžete také získat CMS dělat totéž.

A kromě přidání speciálního stylu (ukážeme vám, jak níže) k odkazu na zástupný symbol, odkaz nelze kliknout. Takže zákazníci si nedělají zmatek, protože si myslí, že by mohli dostat něco jiného, ​​pokud kliknou na navigační odkaz, kde jsou momentálně.

Styling Placeholder Links

Odkazy na zástupné symboly jsou snadno stylově a stylově odlišné od ostatních odkazů na vaší webové stránce. Jednoduše ujistěte se, že stylujete značku a a tag odkazu: a. Například:

a {barva: červená; font-weight: tučné; textová výzdoba: žádná; } a: odkaz {barva: modrá; font-weight: normální; textová výzdoba: podtržení; }}

Tento CSS vytvoří odkazové symboly tučné a červené, bez podtržení. Zatímco pravidelné odkazy budou normální váhy, modré a podtržené.

Nezapomeňte obnovit všechny styly, které nechcete přenášet z značky. Například jsem nastavil váhu písma na tučné odkazy pro zástupné symboly, takže jsem ji musel nastavit na:

font-weight: normální;

pro standardní odkazy. Totéž platí pro textovou výzdobu tím, že ji vyjmete voličem a, pokud by jsem ji neodevzdal, byl by pro volič odkazu a: odstraněn.