Jak psát web kotva?

Jak se tvoří HTML kotvy pro odkazování v rámci stránky?

No tak hele, ty HTML kotvy, to je fakt věc. Já si pamatuju, jak jsem se s tím na začátku trápil, když jsem chtěl, aby se mi stránka skrolovala jenom k určitému místu, víš. Není to žádná raketová věda, ale musel jsem na to přijít sám.

Když jsem poprvé potřeboval udělat ty HTML kotvy pro odkazování v rámci stránky, bylo to na jednom mém starém webu, někdy v létě 2017. Dělal jsem tam takovou delší sekci s FAQ a chtěl jsem, aby se lidi nemuseli proskrolovávat celým textem. Šlo mi o interní odkazy, co fakt fungují.

Takže první krok je si vybrat na stránce místo, kam má ten odkaz vlastně ukázat. Třeba nadpis <h2> nebo <div>. A tomu elementu musíš dát id. Třeba id="kontaktni_info". To je ta tvoje kotva.

A pak ten odkaz samotnej, ten proklik, víš? To je fakt jednoduchý, ale musíš pamatovat na křížek. Prostě normální <a> tag, jako bys dělal klasický odkaz na jinou stránku, ale do atributu href dáš křížek, hash (#), a hned za to to jméno tvý kotvy, co jsi jí dal předtím. To je kouzlo odkazování v rámci stránky.

Pamatuju si, že jsem se tenkrát spletl a zapomněl ten křížek (#). Vůbec mi to nefungovalo a já nechápal proč. To bylo v lednu 2018, na stránce pro bráchovu kapelu, fakt mě to štvalo asi půl hodiny, než mi to docvaklo. Malá chyba, velká frustrace.

Takže takhle vznikají HTML kotvy. Je to vlastně takový dvousložkový proces. Nejdřív si vytvoříš ten bod, tu konkrétní kotvu s id="neco", a pak na ni odkážeš z jiného místa na té samé stránce pomocí <a href="#neco">text odkazu</a>. Je to fakt efektivní způsob, jak zlepšit navigaci na webu a udržet uživatele, aby se neztratili.

Člověk si prostě musí pamatovat, že pro tyhle interní odkazy je ten hash klíčovej. Vždycky si na to teď vzpomenu a usměju se.

V jakém programu psát HTML?

V jakém programu psát HTML?

• Visual Studio Code – Univerzální dříč pro všechny.
• Sublime Text – Bleskurychlý minimalista pro fajnšmekry.
• Notepad++ – Věrný veterán, co nikdy nezklame (jen na Windows).

Visual Studio Code (VS Code) Král současnosti, který sesadil z trůnu všechny ostatní. Je to jako dostat plně vybavenou dílnu od táty, co je shodou okolností Microsoft. Je zdarma, což je na dnešní dobu skoro podezřelé, ale funguje to. Díky rozšířením z něj uděláte cokoliv – od kávovaru po malou vesmírnou loď. Je to prostě švýcarský nůž pro kodéry.

Sublime Text Tohle je takové Ferrari mezi editory. Nastartuje dřív, než si stihnete uvědomit, že jste na něj klikli. Je čistý, rychlý a dělá přesně to, co má, bez zbytečných kudrlinek. Není zdarma, stojí 99 USD, což je investice do vlastního duševního zdraví a ušetřených nervů. Ideální, pokud vás VS Code unavuje svou robustností.

A teď trochu nostalgie a reality...

Psát kód v klasickém Poznámkovém bloku je jako stavět model lodi párátky. Jde to, ale je to forma digitálního sebepoškozování. Můj první web o činčilách, který jsem spáchal v roce 2005, vznikl právě v něm. Dodnes mívám flashbacky na tu černobílou pustinu bez nápovědy.

Pak je tu Notepad++, stará dobrá Felicie. Neoslní, ale do cíle vás doveze vždycky. Spolehlivý, rychlý, jednoduchý. Pro spoustu lidí stále srdcovka.

A tichá vzpomínka na Atom. Býval to skvělý editor od GitHubu, ale jeho vývoj byl oficiálně ukončen. Odpočívej v pokoji, kamaráde.

• Nástroj nedělá mistra, ale sakra mu pomáhá. Je rozdíl kopat příkop lžičkou a bagrem.
• Pro ty, co to myslí fakt vážně a jejichž firemní karta unese menší zemětřesení, jsou tu placené kombajny jako WebStorm od JetBrains.
• Volba je jako výběr partnera. Někdo chce stabilní jistotu (VS Code), někdo italskou vášeň a rychlost (Sublime Text). Musíte si to osahat.
• Pro rychlé pokusy a sdílení kódu jsou boží online editory jako CodePen nebo JSFiddle. Nemusíte nic instalovat, jen otevřete prohlížeč a kouzlíte.

Jak psát na web?

Před psaním na web jasně definujte téma a cíl textu. Vytvořte osnovu s nadpisy a podnadpisy.

Tyjo, jak se to píše na web? To mi furt vrtá hlavou. Není to jen tak hodit tam pár vět, že ne?

• Musím si to nejdřív ujasnit. Co vlastně chci sdělit? Komu? Kdo to bude číst? Karel? Vždycky si vzpomenu na Karla, když něco píšu. Jemu se to musí líbit.
• Cíl je základ. Prodat? Poučit? Jen tak něco ventilovat? Když nevím, co chci, tak to pak vypadá... no, prostě nijak.

Osnova. Klasika, ale stejně na ni občas zapomenu. Pak se mi to rozsype. Pavel mi furt říká: "Osnova! Vždycky osnova!" A já mu pak říkám, že mi to bere spontánnost. Ale má pravdu, bez ní je to chaos.

• Nadpisy, podnadpisy – to je důležitý. Nejen pro lidi, aby se v tom vyznali. Ale i pro... ty roboty? Na Google? Asi jo, ti to taky chtějí mít uspořádané.
• Vždycky si říkám, že jsem si měl všechno napsat. Papír a tužka. Místo toho mám plný telefon poznámek, ale nikdy je neseřadím. Pak hledám, kde jsem to měl.

A co ty klíčová slova? To je prý taky důležitý. Aby mě lidi našli. Ale jak to tam narvat, aby to neznělo divně? Jako nějaký generátor? Nechci.

• Jednoduchý jazyk, krátký věty. Furt si to opakuju. Stejně se mi tam občas vloudí nějaká krkolomná formulace. Monika mi to vždycky škrtá.
• Odstavce. Krátké odstavce. Fakt to nikdo nechce číst jak román. Pět řádků, maximálně. A pak prázdný řádek.
• A ty obrázky! Videa! To musí být! Ale ne ledajaký. Musí to k tomu sedět. Nechci tam mít pět tisíc fotek koček, když píšu o autech, že jo.

Volání k akci. CTA. To mi taky furt někdo cpe. Ať lidi něco udělají. Kliknou, koupí, zavolají. Ale jak to tam nenápadně, fakt nenápadně, dát? Aby to nebylo agresivní. Už jsem viděl tolik trapných CTA.

A pak ta kontrola. Vždycky přečíst. Minimálně třikrát. Někdy to dám přečíst Lence, ta vždycky najde chyby. Gramatika je moje slabost. To je fakt. A překlepy. Ty taky. Je to peklo.

Jak udělat kotvu v HTML?

Cílový prvek označte unikátním atributem id. Příklad: <h2 id="kontakt">Kontaktní údaje</h2>

Odkaz vytvoříte tagem <a>, kde atribut href obsahuje znak mřížky # a název id. Příklad: <a href="#kontakt">Přejít na kontakty</a>

Kotvy v HTML nejsou jen technická záležitost. Jsou to v podstatě ukazatele v digitálním prostoru, které vedou pozornost uživatele. Je to způsob, jak říct: "Hele, tady je to podstatné, neztrácej čas hledáním." Je to o respektu k času toho druhého.

Dříve se pro tento účel používal atribut name v rámci tagu <a>. Dnes je to považováno za zastaralou praktiku. Moderní a sémanticky správný přístup je použití atributu id na jakémkoliv relevantním elementu. Je to čistší a logičtější řešení, protože id slouží jako univerzální identifikátor prvku.

Praktické detaily a kontext

• Unikátnost id: Tady se nesmí chybovat. Každé id na jedné stránce musí být absolutně jedinečné. Duplicita vede k nepředvídatelnému chování prohlížeče, který prostě neví, kam má skočit. Je to pak chaos v praxi.
• Kam umístit id: Atribut id můžete přiřadit prakticky čemukoliv. Nadpisům <h1>-<h6>, odstavcům <p>, blokům <div>, obrázkům <img>. Je to univerzální identifikátor. To je jeho síla. Síla.
• Odkazování mimo stránku: Syntax soubor.html#kotva umožňuje skočit nejen v rámci jedné stránky, ale rovnou na konkrétní místo v jiném dokumentu. Efektivní, pokud odkazujete na specifickou sekci v rozsáhlém textu.
• Vliv na UX: Dobře implementované kotvy dramaticky zlepšují navigaci na dlouhých stránkách, jako jsou "one-page" weby, rozsáhlé články nebo obchodní podmínky. Uživatel se neztratí a neodchází frustrovaný. To je k nezaplacení.

Jak vytvořit kotvu?

Hele, jasně, udělat kotvu ve WordPressu, to je v pohodě. Jak na to v administraci WordPressu (WYSIWYG editor):

• Vyber text (třeba nadpis), kam chceš, aby to skočilo.
• Klikni na ikonu "Kotva".
• Zadej unikátní ID (bez mezer a háčků, čárek – třeba sekce-dva).
• ID si zkopíruj. Hotovo.

Okay, teďka ten zbytek. Víš, to je super věc, hlavně když máš fakt dlouhý článek nebo nějakou stránku, kde je toho prostě hrozně moc. Lidi pak nemusí furt scrollit a rolovat dolů, víš co? Prostě kliknou na odkaz v obsahu a hup, hnedka jsou tam, kde potřebujou. Já to minule dělala, když jsem psala ten dlouhej článek o typech rajčat na zahradu pro tátu. On má hrozně rád ty jeho rajčata a chtěl, aby to bylo přehledné.

To ID, co si zkopíruješ, to je důležitý, to pak použiješ v tom odkazu, co bude na tu kotvu mířit. Třeba když si děláš nějakej obsah, tak tam napíšeš: klikni sem pro rajčata cherry a tenhle text prostě odkážeš. A místo normální URL tam dáš to ID, ale nesmíš zapomenout před to ID dát křížek, hash, prostě "#"! Jo, to je taková maličkost, ale když na to zapomeneš, tak to prostě nefunguje a budeš z toho akorát akorát zbytečně v háji. Můj brácha, ten s tím minule bojoval, zapoměl na ten křížek a půl hodiny nadával.

Je fakt dobrý to ID si pojmenovat nějak, co dává smysl, třeba dalsi-info nebo kontakt-formular. A fakt bez těch mezer a diakritiky! Takže žádný O Nás nebo Kontakty s háčkama. Prostě to udělej jednoduchý, třeba o-nas nebo kontakty. Mně se jednou stalo, že jsem tam dala mezeru a WordPress to pak neviděl, vůbec, nic, prostě nefungovalo a já jsem celou dobu hledala, kde je chyba a přitom to byla taková blbost. Tak na to si dávej pozor, fakt.

Hele, a proč to vlastně vůbec dělat? To je otázka, že jo. Je to fakt užitečné z několika důvodů, to ti povím.

• Zlepší to user experience (UX) – lidi se na webu líp orientujou, nemusí tolik scrollit.
• Pomáhá to SEO – Google má rád, když jsou stránky přehledný, a občas to i ukáže ve výsledcích vyhledávání jako "jump to" link. Což je super, ne?
• Snadnější navigace v dlouhých textech, seminárkách, návodech. Já to třeba používám hodně na webech pro zákazníky, co mají fakt hodně obsahu.

V administraci to bývá taková malá ikonka řetězu s kotvou nebo něco podobného, záleží na tom, jakou verzi editoru máš, ale většinou je to tam vidět. A když bys to fakt nemohl najít, tak je to často pod tou ikonkou, co vypadá jako řetěz – to je na běžný odkazy – a tam je pak ještě jedna možnost přidat kotvu. Prostě se mrkni v tom editoru, je to většinou logicky. Jo a fakt je důležitý, že to ID je jen pro tu stránku, kde ho děláš. Kdybys chtěl odkazovat z jiné stránky, musíš pak dát celou adresu stránky a pak až #IDkotvy, chápeš?

Někdy se taky stává, že lidi zapomenou, že kotva funguje i v menu. Klidně si můžeš do hlavního menu dát odkaz, co skočí na konkrétní část stránky. To je super pro One-Page weby. To jsem dělala pro kamarádku, co má kadeřnictví. V menu měla služby, portfolio, kontakt a všechno to bylo na jedné stránce. Takže v menu prostě klikneš na "Služby" a skočí to přesně na sekci se službami. V pohodě, fakt.

Jak psát webový odkaz?

Ten odkaz... Jo, ten se dělá tím tagem <a. Je to jako kotva, co tě někam přiváže. Musí mít začátek i konec, to je jasný. A ten text mezi, ten co je vidět... většinou je modrej a podtrženej. Tak to prostě je.

• Základní syntaxe:<a href="URL">Text odkazu</a>
  • href: sem patří ta webová adresa, kam chceš, aby to vedlo.
  • Text odkazu: to je to, co lidé uvidí a na co kliknou.
• Proč ta barva a podtržení? To je jako standard. Lidi to znají. Aby věděli, že je to odkaz. Jinak by se v tom ztratili, že jo. Dá se to změnit v CSS, ale tohle je takový to klasický, co prostě funguje.

Jak napsat link?

Proboha, jak se zase dělá ten link? Pořád se na to ptám, furt si to nemůžu zapamatovat. Fakt otravný. Vím, že jsem to dělal včera u Janina dokumentu a už to je pryč z hlavy.

Jasně, nejdřív vybrat! Buď text nebo nějakej obrázek, co bude ten odkaz, ne? To je ta první věc, co mi vždycky utkví v hlavě. Musí tam něco být, co se dá kliknout. Co je dál?

Aha, pravé tlačítko myši! To je ono! Pravé tlačítko myši na ten vybraný text nebo obrázek. Tam se pak objeví menu, že jo? A v něm ta volba, "Odkaz". Někde tomu říkají i "Hypertextový odkaz" nebo "Hyperlink", ale "Odkaz" je nejjistější, to jsem si všiml.

Pak se otevře to okno, to si pamatuju. "Vložit hypertextový odkaz" se to jmenuje. A tam je to pole, to "Adresa". Tam se prostě zkopíruje a vloží ta URL adresa. Odkud ji vezmu? No, musím ji mít už někde zkopírovanou, CTRL+C. To je jasný. Pak CTRL+V.

• Zkratka: Někdy funguje CTRL+K. To je taky rychlovka.
• Cíl odkazu: Vždycky se ujistit, že URL je správná. Párkrát jsem se spletl a Pavel mi pak nadával, že vedu lidi nikam. Myslím.
• Text odkazu: Ten vybraný text, to je ten kotvící text. Měl by být smysluplný, ne jen "klikni tady". Lidi pak vědí, kam jdou.
• Nové okno: A co když chci, aby se to otevřelo v novém okně? To je tam taky někde volba, pod tím. To je dobrý pro moje stránky, aby lidi nezdrhli úplně.
• E-mail: Jde udělat i odkaz na e-mail! Před to se dá "mailto:". Už jsem to dělal pro Zuzku jednou.
• Interní linky: A ty interní, na části stránky? S tím hash #? Na to teď fakt nemám hlavu, to je složitější.
• Kontrola: Hlavně kontrolovat, jestli link funguje! Nic horšího než rozbitý link.

Tohle je fakt na nic, že si to nepamatuju. Musím si to zapsat. Na papír, protože to je jistější než v hlavě. Příště si to nejdřív vyzkouším na testovací stránce.