Popis základních tagů
<p>odstavec textu</p>
Odstavec (angl. paragraph) je základní formátovací tag. Značka <p> se nachází na začátku každého odstavce a ten končí značkou </p>. Je to tudíž párová značka(tag).
Text nového odstavce vždy začíná nový řádek a konec odstavce končí řádek. Klasický odstavec v HTML má před sebou a za sebou navíc vertikální mezeru, která většinou přesně odpovídá výšce jednoho řádku Pokud se vyskytnou za sebou dva odstavce nebo jiné elementy s vertikální mezerou, výška mezery se nesčítá. Podobná mezera se dělá i u jiných blokových prvků, nejčastěji u nadpisů.
Tag <p> je velmi často používán HTML editory jako základní prvek dokumentu.
Texty, které mají odstavce značené pomocí tagu <p>, jsou dobře transformovatelné do jiných formátů a dobře se s nimi pracuje pomocí CSS. Nejen proto používání tagu <p> velmi doporučuji.
<br />
Řádkový zlom (angl. break). Způsobuje okamžité ukončení řádku. Případný další text pokračuje na nové řádce.
Je důležité pochopit rozdíl mezi <p> a <br />.
- V zobrazení je jediný rozdíl: <br> kolem sebe nedělá vertikální mezery.
- Z typografického hlediska odpovídá <br> "měkkému entru" aneb "vynucenému zalomení řádku".
- Pokud je tag <br /> použit uprostřed odstavce, další text se považuje za pokračování toho odstavce, nikoli za nový. Takže kupříkladu pokračuje nastavení zarovnání.
<div>
Div se nejčastěji překládá jako oddíl. Zahrnuje v sobě libovolně velkou oblast textu včetně nadpisů, obrázků a tabulek. Nezřídka se celá stránka vyskytuje uvnitř jednoho elementu <div>.
Před a za oddílem se zalomí řádek. V tomto smyslu je <div> velmi podobný odstavci (<p>). Narozdíl od odstavce ale <div> nedělá před a za sebou vizuální mezery.
Tag <div> byl do HTML přidán zejména kvůli kaskádovým stylům. V tom se zase podobá tagu <span>, který také přibyl kvůli stylům. Rozdíl mezi <div> a <span> je v tom, že <div> je blokový element (způsobuje zalomení řádku před a po), kdežto <span> je in-line element (řádkový). Na toto téma vizte též pojednání div a span, neutrální tagy.
h1, h2, h3,...
Nadpisy (angl. heading) jsou vlastně zvláštním druhem odstavců (tag <p>). Je rozlišováno šest stupňů nadpisů.
Nadpisy se automaticky zobrazují tučně, různou velikostí písma a mají kolem sebe vertikální mezery. Není tedy třeba je formátovat ručně. Každý prohlížeč má standartně nastavenou velikost písma i mezery před a za nadpisem.
Mnozí autoři pro nadpisy nepoužívají tyto tagy <hx>, ale normální odstavce (tag <p>), kterým nastaví velikost a řez (pomocí CSS). To je vcelku chyba, zejména protože si tak přidělávají spoustu práce. Vzhled nadpisů lze snadno předefinovat pomocí CSS.
Text se správně nadefinovanými nadpisy se snáze převádí do jiných formátů (rtp, pdf, doc). Některé programy na základě nadpisů dokáží automaticky vytvářet obsah dokumentu. Některé vyhledávače si také všímají tagů nadpisů a přikládají jejich textu větší váhu. Obecně je hlavní nadpis stránky označován tagem h1, druhý nejdůležitější h2 atd. Na stránce se může vyskytovat více než jeden nadpis stejné úrovně, ale měli bychom dodržovat správnou strukturu jejich zanoření, tzn. nepřeskakovat jednotlivé úrovně. Například toto je špatně:
<h1>Nadpis nejvyšší úrovně</h1>
<h3>Nadpis třetí úrovně</h3>
Složitější tagy s atributy
Obrázky <img />
jak vidíte hned v nadpise, jedná se o nepárový tag. Do stránky se vloží obrázek načtený z jiného souboru. Tag <img> má několik povinných atributů:
src
Zdoj obrázku, cesta k tomu souboru (angl. source = zdroj). Cesta k obrázku se udává jako URL absolutně nebo relativně. Přípustné jsou soubory typu *.gif, *.jpg, v novějších prohlížečích také *.png a v Internet Exploreru *.bmp. Pokud soubor obrázku nebude nalezen, zobrazí se ve stránce zástupný symbol nenalezeného obrázku (nejčastěji červený křížek) se zástupným textem.
Příklad vložení obrázku strom.gif, který se nachází ve stejném adresáři (relativní cesta):
<img src="strom.gif" alt="strom">
Příklad vložení obrázku absolutní cestou:
<img src="http://www.jakpsatweb.cz/images/jakpw.gif" alt="Jak psát web">
alt
Zástupný text (alternative text). Zobrazuje se ve stránce v oblasti nenačteného obrázku.
Spousta lidí prochází web s vypnutými obrázky (třeba já kvůli slabému připojení), mnoho uživatelů webu je slabozrakých, slepci si nechávají stránky předčítat čtečkami nebo převádět do braila. Pro všechny tyto uživatele jsou obrázky neviditelné. Oni vědí, že na stránce je obrázek, ale nevědí, co na něm je. A proto (a nejen proto) se tam píše alt.
Příklad zástupného textu "strom":
<img src="strom.gif" alt="strom">
Width, height
Šířka (width) a výška (height) obrázku. Udává se v pixelech (normální číslo) nebo procentech. Pokud rozměry nejsou uvedeny, zobrazí se obrázek ve své normální velikosti. V praxi se doporučuje výšku a šířku u obrázku zadávat i v případě, že obrázek bude přirozeně veliký. To kvůli rychlejšímu a lepšímu načítání stránky.
Pokud se zadají jiné rozměry, než má obrázek ve skutečnosti, pak se ve výsledku obrázek zvětší, zmenší nebo zdeformuje. V případě, že je uveden jenom jeden rozměr (šířka nebo výška), upraví se druhý rozměr tak, aby obrázek zachovával proporce (takže může být jinak velký, ale nebude deformovaný).
Pozor na častou chybu přehazování písmenek t a h. Widht je špatně, správně je width. Heigth je špatně, správně je height.
Příklad: mám obrázek strom.gif o šířce 50 a výšce 100 pixelů. Nejlépe je zadat jej takto:
<img src="strom.gif" width="50" height="100" alt="strom">
V případě, že rozměry nezadám, obrázek se nakonec načte stejně velký. Jenomže při načítání si nevyhradí místo a způsobí, že dokument po načtení obrázku poskočí:
<img src="strom.gif" alt="strom">
Zadají-li se jiné rozměry, obrázek bude deformován, ale rozměry v dokumentu dodrží:
<img src="strom.gif" width="70" height="70" alt="deformovaný strom">