Základy jazyka HTML

Pokud chceme samostatně a to i za pomoci redakčního sytému publikovat v prostředí internetu, pak se nám bude hodit znalost alespoň některých základní HTML značek (přesněji tagů) a způsoby jejich použití. Pro psaní HTML je lépe použít co nejjednodušší textový editor např. notepad (poznámkový blok) případně pokročilejší PSpad. Jak bude obsah v internetovém prohlížeči zobrazen určujeme přímo v textovém režimu pomocí HTML tagů.

syntaxe

Především si musíme říct něco o syntaxi tagů (značek), tedy o jakém si pravopisu jazyka HTML. Pokud tento pravopis nebudeme dodržovat, tak podstupujeme riziko, že naše texty nebudou správně interpretovány a to jak prohlížeči živých internetových uživatelů tak i vyhledávači. Ještě je důležité poznamenat, že bude řeč především o těch značkách, které mají nějaký vztah k sémantice, tedy k SEO optimalizaci. Tyto tagy slouží především k určení významu označeného textu, způsob jeho zobrazení je až druhotný jev a může být v případech konkrétního použití změněn!

Dále bych měl upozornit že tento návod si rozhodně nemůže činit žádné nároky na úplný návod k výrobě HTML stránek. Snaží se jen přiblížit naprosté základy pro publikování v již hotovém webu. dokonce ani z úzkého pohledu sémanticky využitelných značek není kompletní, snaží se jen mapovat ty nejčastěji používané. Zkušený web-copywriter by jich měl znát mnohem víc. Nemluvě o HTML kodérovi.

  • všechny tagy v HTML se píší ve špičatých závorkách, tedy např. <p></p> je označení začátku a konce odstavce. Vše co je uzavřeno uvnitř této dvojce je považováno za právě jeden odstavec.
  • tagy mohou být párové a nepárové např. <br /> toto je nepárová značka pro ukončení řádku (místo enter) nemá jinou funkci a neuzavírá v sobě žádný obsah, (pro ukončení řádku není žádný potřeba). Nepárový tag má vždy před druhou závorkou lomítko.
  • párový tag musí mít povinně obě značky, z nichž jedna označuje začátek místa, které tag uzavírá, vypadá takto např. <p>, a druhá (konec tagu), vypadá takto </p>, tyto dvě značky se liší použitím lomítka, lomítko určuje koncovou polovinu tagu. Zde uvedený příklad platí pouze pro tag <p></p> jiný párový tag je např. toto <em></em> - především si povšimněte, že dvojce má stále znaky HTML tagů, tedy každý tag je uzavřen v hranatých závorkách a druhý z dvojce obsahuje hned za první závorkou lomítko.
  • některé tagy mohou mít své parametry. <img src=“obrazky/muj_obrazek.jpg“ /> je nepárový tag pro zobrazení obrázku, kde parametr je src, tento parametr nám určuje umístění obrázku. Parametry vždy zapisujeme se znakem =, za ním následuje (bez mezer!!) jeho hodnota uzavřená do uvozovek. Obecný tvar parametru v HTML je tedy parametr=“hodnota“.

Deset důležitých HTML tagů pro Váše stránky

některé z těchto HTML tagů jsou zmíněny výše, zde je ovšem vysvětlen jejich plný význam.

  • <p>text odstavce, může být pochopitelně i delší než je tento</p>
    tag označující odstavec
  • <strong>text tučným písmem</strong>
    tag označující tučné písmo, sémantické označení velmi důležitého textu
  • <em>text který bude vykreslen kurzívou</em>
    sémanticky se jedná o označení důležitého textu podobně jako u <strong> s tím rozdílem, že text bude zobrazen kurzívou
  • <abr>ČR</abr>
    označení zkratky, má význam především pro vyhledávače, zobrazen bude tučně s přerušovaným podtržením
  • <acronym>Čedok</acronym>
    takto označujeme zkratkové slovo, zobrazeno bude taktéž tučně
  • <address>zde bude napsána adresa</address>
    speciální tag pro označení adresy, konkrétní použití je např. takto <address>Květinová 24, Dolní Kotěhůlky 111 50</address>. Hlavně by to měla být spíše ucelená kontaktní informace, tedy npař. nikoli pouze e-mail. Ačkoli pokud e-mail bude následovat hned za adresou pak do tohoto tagu významově bezpochyby patří, stejně jako telefon, ICQ a jiné informace týkající se kontaktů, jen by se mělo jednat o větší blok těchto informací.
  • <cite>toto je citace</cite>
    takto by měla být označena každá citace, kterou v textu použijeme
  • <a href=“http://www.nejakaadresa.cz“>text tohoto odkazu</a>
    tag označující odkaz, obsah v části mezi uvozovkami za href určuje místo kam odkaz po kliknutí vede, může být zcela libovolné jen by mělo existovat.
  • <img src=“obrazky/muj_obrazek.jpg“ />
    tag pro vložení obrázku, adresa obsažená mezi uvozovkami za src je cestou k umístění obrázku
  • <br />
    znak pro konec řádku

Seznamy v HTML

Obyčejný seznam pomocí <ul></ul> <li></li>

Samostatnou kapitolou jazyka HTML jsou seznamy, jedná se o mocnou zbraň webového copywritera, jelikož důsledným a vhodným použitím seznamů zpřehledňujeme text tak jako žádným jiným nástrojem. Velmi důležitá informace je také to, že i vyhledávače seznamy „milují“ a slova v nich obsažená tak dostávají značnou váhu oproti ostatnímu textu.

  1. <ul></ul> začátek a konec seznamu
  2. <li>položka</li> položka seznamu

konkrétní použití vypadá takto:

<ul>
<li>položka 1</li>
<li>položka 2</li>
<li>položka 3</li>
</ul>

Jak je z příkladu patrné, tag <ul></ul> nám uzavírá celý seznam a tagy <li>položka X</li> tvoří jeho jednotlivé položky. Předcházející příklad bude v internetovém prohlížeči zobrazen takto:

  • položka 1
  • položka 2
  • položka 3
info@accessdesign.cz     tel.: +420 606 290 782