Tento stručný a snad jasný návod mě napadl, když jsem po několika měsících, přidával do patičky svého webu ikonku klubu blogerů. Je tam uveřejněný zdrojový kód pro vložení ikonky a po jeho přečtení mi málem vypadly všechny vlasy na hlavě. Rozhodl jsem se pro vás napsat revidovaný kód s vysvětlením, které vám může pomoci mít své stránky více pod kontrolou. Článek tady musí zůstat! Jakékoliv komentáře uvádějte dolů pod článek. Zdrojový kód vypadá následovně (upravil jsem odsazení pro lepší čitelnost):
<p style="text-align: center;"><strong>Jsem členem</strong></p>
<p style="text-align: center;"> </p>
<p style="text-align: center;">
<a href="https://klub-blog.blogspot.com/" target="_blank">
<img src="https://3.bp.blogspot.com/-7B3ZXtz5HYM/Xk7Etgxwp_I/AAAAAAAAJIs/LXduhRr2YK817_gJTNTq3fQYo-AhxyR1ACK4BGAYYCw/s1600/Klub%2Bbloger%25C5%25AF%2Bico.png" alt="" width="147" height="189" />
</a>
</p>Co nabízí HTML5
Ze začátku je potřeba říci, že HTML elementy se dělí na ty, které se zobrazují jako blok (ve sloupci), a elementy zobrazující se v řádku. Na každý element uzavřený ve špičatých závorkách lze pohlížet jako na objekt, který má své parametry (atributy), a každý parametr přechovává určitou hodnotu. Nahlížení na elementy jakožto na objekty dále využijete například při psaní CSS, Javascriptu nebo XML, kde se hojně pracuje s DOM nebo-li „Document Object Model“.
V kódu uvedeném výše se hojně využívá element <p>. Poprvé je využit k vytvoření zvýrazněného textu, jenž má sloužit jako nadpis. Podruhé je využit, jakožto metoda k vytvoření nového řádku. Takže předpokládám, že cílem bylo dosáhnout odsazení nadpisu od ikonky. Po třetí je použit jako „obal“ do kterého je vnořený obrázek s odkazem, který se opět zobrazí na novém řádku. Výsledný kód funguje, ale z hlediska použitých elementů je problematický. Element <p> je zkratka pro anglické slovo „paragraph“. V češtině se jedná o odstavec. Smyslem existence tohoto elementu v HTML je, že se užívá k ukládání textových řetězců a internetový prohlížeč dostane informaci, že má data interpretovat jako odstavec s obsahem. V našem kontextu to znamená především dvě věci. Slouží k ukládáni dat použitých v článku. Za druhé neslouží jako nástroj k úpravě vzhledu stránky. Pro odsazení se používá soubor s předem definovaným vzhledem (CSS), kde se využívá parametr „padding“ nebo „margin“. Pomoci těchto parametru definujeme výsledné odsazení.
V našem případě je lepší element <p> zaměnit za element <div> (dejme tomu i <section>…) Takto nebudeme mást indexovací roboty vyhledávačů. Výsledný kód pak vypadá následovně.
<div>
<strong>Jsem členem</strong><br>
<a href="https://klub-blog.blogspot.com/" target="_blank">
<img src="adresa_obrazku">
</a>
</div>Element <div> je určen , aby sloužil jako kontejner neboli oddíl pro ostatní elementy definující obsah. Určitě jste si dále všimli elementu <br>. Tento element je zkratkou anglického slova „break“ a neznamená nic jiného než zalomení řádku. Takže už není potřeba používat element <p> k přechodu na další řádek.