Základy HTML/XHTML
Info: obsah těchto stránek byl vytvořen v roce 2018, takže některé informace již jsou zastaralé, i když všeobecné základy jsou stále platné
Základy práce s textem
Na prvním místě při tvorbě stránek je vždy obsah. Pak uspořádná, strukturování dokumentu. A až úplně na konec grafické provedení.
Oddíly a odstavce
Používají se tag pro zalomení oddílu <div>, odstave <p> a řádku <br>.
Tag DIV
Slouží pro zalomení oddílů ("divizí"). Při zobrazení je většinou před vložen jeden prázdný řádek.
<![CDATA[
<div>
blok textu
</div>
* tag se všemi použitelnými atributy
<head align="left" dir="ltr" lang="cs" class="" style="">
* umístění textu vzhledem ke stránce
align="left" - vlevo (implicitní)
align="right" - vpravo
align="center" - doprostřed
align="justify" - zarovnání do blohu (k levému i pravému okraji)
* směr zobrazení textu
dir="ltr" - zleva doprava (implicitně)
dir="rtl" - zprava doleva
* kód jazyka použitého ve stránce
lang="cs"
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
nowrap - jen IE, zakáže automatické zalamování řádků
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
]]>
Tag P
Slouží pro definici odstavce. Při zobrazení je většinou před vložen jeden prázdný řádek.
<![CDATA[
<p>
blok textu
</p>
* tag se všemi použitelnými atributy
<p align="left" dir="ltr" lang="cs" class="" style="">
* umístění textu vzhledem ke stránce
align="left" - vlevo (implicitně)
align="right" - vpravo
align="center" - doprostřed
align="justify" - zarovnání do blohu (k levému i pravému okraji)
* směr zobrazení textu
dir="ltr" - zleva doprava (implicitně)
dir="rtl" - zprava doleva
* kód jazyka použitého ve stránce
lang="cs"
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
* mezi tagem <p> ... </p> se mohou nacházet jem tagy
<a> <img> <br> <b> <i> <tt> <u> <strike> <big> <small> <sup> <sub> <font>
<acronym> <cite> <code> <dfn> <em> <kbd> <samp> <strong> <var>
pokud se v textu vyskytne jiný tak, dojde k zalomení a ukončení odstavce
]]>
Nadpisy
Tag H1, H2, H3, H4, H5, H6
Slouží ke členění dokumnetu na kapitoly. Prohlížeč je zobrazuje věršinou tučně a před a za vkládá mezeru. Nadpis H1 je největší a H6 je nejmenší. Přičemž nadpis H4 má stejnou velikost jako normální písmo.
<![CDATA[
<h1>
blok textu
</h1>
(obdobně to platí i pro tag H2 - H6)
* tag se všemi použitelnými atributy (obdobně to platí i pro tag H2 - H6)
<h1 align="left" dir="ltr" lang="cs" class="" style="">
* umístění textu vzhledem ke stránce
align="left" - vlevo (implicitně)
align="right" - vpravo
align="center" - doprostřed
align="justify" - zarovnání do blohu (k levému i pravému okraji)
* směr zobrazení textu
dir="ltr" - zleva doprava (implicitně)
dir="rtl" - zprava doleva
* kód jazyka použitého ve stránce
lang="cs"
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
* mezi tagem pro nadpis se mohou nacházet jem tagy
<a> <img> <br> <b> <i> <tt> <u> <strike> <big> <small> <sup> <sub> <font>
<acronym> <cite> <code> <dfn> <em> <kbd> <samp> <strong> <var>
pokud se v textu vyskytne jiný tak, dojde k zalomení a ukončení odstavce
]]>
Změna vzhledu textu
Tagy pro změnu vzhledu textu je možné rozdělit na:
- styly orientované na obsah
informují prohlížeč o speciálním významu, kontextu nebo použití textu uvedeného mezi těmito tagy
- fyzické styly
definují explicitně způsob jak se má text mezi těmito tagy zobrazit
Ve všech se používají následující atributy
<![CDATA[
* umístění textu vzhledem ke stránce
align="left" - vlevo (implicitně)
align="right" - vpravo
align="center" - doprostřed
align="justify" - zarovnání do blohu (k levému i pravému okraji)
* směr zobrazení textu
dir="ltr" - zleva doprava (implicitně)
dir="rtl" - zprava doleva
* kód jazyka použitého ve stránce
lang="cs"
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
* mezi tagem se mohou nacházet jem tagy povolené v běžném textu
]]>
Tagy orientované na obsah
Tag ABBR
Vymezuje text, který tvoří zkrácenou formu delšího slofa nebo fráze.
<![CDATA[
<abbr>
blok textu
</abbr>
]]>
Tag ACRONYM
Vymezuje text (akronym), který je zkratkou počátečních písmen slov jména nebo fráze.
<![CDATA[
<acronym>
blok textu
</acronym>
]]>
Tag CITE
Vymezuje text, který je bibliografickou citací (titul knihy, časopisu apod.).
<![CDATA[
<cite>
blok textu
</cite>
]]>
Tag CODE
Vymezuje text, který je zobrazen v neproporcionálním písmu s pevnou šířkou znaků. Slouží převážně k zobrazení programového kódu.
<![CDATA[
<code>
blok textu
</code>
]]>
Tag DFN
Označuje první, definující výskyt pojmu či fráze.
<![CDATA[
<dfn>
blok textu
</dfn>
]]>
Tag EM
Značka prohlížeči říká, že text má zobrazit zvýrazněně. Většinou je zobrazena kurzívou.
<![CDATA[
<em>
blok textu
</em>
]]>
Tag KBD
Vymezuje speciální styl pro technické pojmy. Text je zobrazen neproporcionálním písmem.
<![CDATA[
<kbd>
blok textu
</kbd>
]]>
Tag SAMP
Vymezuje sekvenci literárních znaků z normálního kontextu.
<![CDATA[
<samp>
blok textu
</samp>
]]>
Tag STRONG
Značka prohlížeči říká, že text má zobrazit zvýrazněně. Většinou je zobrazena tučně.
<![CDATA[
<strong>
blok textu
</strong>
]]>
Tag VAR
Vyjadřuje jméno proměnné nebo uživatelem zadávané hodnoty. Text se většinou zobrazuje v neproporcionálním písmu.
<![CDATA[
<var>
blok textu
</var>
]]>
Tagy orientované na obsah
Tag B
Text je tučný. Je to ekvivalent tagu STRONG.
<![CDATA[
<b>
blok textu
</b>
]]>
Tag BIG
Text má větší velikost o jeden stupeň oproti normálnímu.
<![CDATA[
<big>
blok textu
</big>
]]>
Tag I
Text je kurzíva. Je to ekvivalent tagu EM.
<![CDATA[
<i>
blok textu
</i>
]]>
Tag SMALL
Text je menší o jeden stupeň oproti normálnímu.
<![CDATA[
<small>
blok textu
</small>
]]>
Tag SUB
Text je zobrazen o polovinu výšky znaku níže, ale ve stejné velikosti. Používá se jako dolní index.
<![CDATA[
<sub>
blok textu
</sub>
]]>
Tag SUP
Text je zobrazen o polovinu výšky znaku výše, ale ve stejné velikosti. Používá se jako horní index.
<![CDATA[
<sup>
blok textu
</sup>
]]>
Tag TT
Text je zobrazen v neproporcionálním písmem.
<![CDATA[
<tt>
blok textu
</tt>
]]>
Tag U
Text je zobrazen jako podtržený. Je to nedoporučený tag, který by měl být v příští verzi vypuštěn.
<![CDATA[
<u>
blok textu
</u>
]]>
Rozšířené zpracování písem
Model velikosti písem v HTML nepoužívá absolutní bodové velikosti, ale relativní velikosti. Velikost se čísluje od 1 (nejmenší velikost) až po 7 (největší velikost). Implicitní velikost (basefont) má stupeň 3. Stupňování je přibližně po 20% velikosti základní (3).
Tag BASEFONT
Nastaví základní velikost, barvu a řez písma.
<![CDATA[
<basefont>
blok textu
</basefont>
* tag se všemi použitelnými atributy
<basefont color="" face="" size="" lang="">
* barva písma
color="#000080" - barva (navy)
* řez písma
face="Arial"
* velikost písma 1-7 nebo +/- zvětšení/zmenšení
size="3"
* kód jazyka použitého ve stránce
lang="cs"
]]>
Tag FONT
Umožňuje změnu velikosti, stylu a barvy textu.
<![CDATA[
<font>
blok textu
</font>
* tag se všemi použitelnými atributy
<font color="" face="" size="" lang="">
* barva písma
color="#000080" <=> color="navy" - definice barvy číslem nebo jménem
* řez písma
face="Arial"
* velikost písma 1-7 nebo +/- zvětšení/zmenšení
size="3" může být "1"-"7" nebo také "+2", "-1"
* kód jazyka použitého ve stránce
lang="cs"
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
* mezi tagem se mohou nacházet jem tagy povolené v běžném textu
]]>
Přesné prokládání a rozvržení
To jde udělat jen pomocí CSS stylů. Pomocí tagů HTML je možné jen zdůraznění, struktůrování apod. dokumentu.
Tag BR
Říká prohlížeči, že má další text začínat na novém řádku. Prohlížeč nevkládá před takovýto řádek žádnou mezeru.
<![CDATA[
řádek textu
<br>
řádek textu
* tag se všemi použitelnými atributy
<br clear="">
* nastavení toku textu v případě, že je zde umístěn obrázek nebo tabulka
clear="left" - text pokračuje, až na levém okraji zkončí obrázky
clear="right" - text pokračuje, až na pravém okraji zkončí obrázky
clear="all" - text pokračuje, až na levém i pravém okraji zkončí obrázky
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
]]>
Tag NOBR
Říká prohlížeči, aby na text mezi tagy nepoužil automatické zalamování.
<![CDATA[
<nobr>
řádek textu
</nobr>
* tag nemá žádné atributy
<nobr>
]]>
Tag WBR
Používá se ve spojení s NOBR a říká prohlížeči, že může použít na text mezi těmito tagy automatické zalamování.
<![CDATA[
<wbr>
řádek textu
</wbr>
* tag nemá žádné atributy
<wbr>
]]>
Tag PRE
Zobrazí text přesně tak, jak byl zadán. To je, se všemi zadanými mezerami a novými řádky apod.
<![CDATA[
<pre>
řádek textu
</pre>
* tag se všemi použitelnými atributy
<pre allign="" width="" dir="" lang="">
* umístění textu vzhledem ke stránce
align="left" - vlevo (implicitně)
align="right" - vpravo
align="center" - doprostřed
* směr zobrazení textu
dir="ltr" - zleva doprava (implicitně)
dir="rtl" - zprava doleva
* počet znaků na řádku - nemá vliv na zalomení textu
width="80"
* kód jazyka použitého ve stránce
lang="cs"
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
]]>
Tag CENTER
Vycentruje obsah na stránce.
<![CDATA[
<center>
obsah
</center>
]]>
Blokové citace a adresy
Bloková citace je delší část textu - citace, zkopírovanéhp z jiného dokumentu.
Tag BLOCKQUOTE
Zobrazí text přesně tak, jak byl zadán. To je, se všemi zadanými mezerami a novými řádky apod.
<![CDATA[
<blockquote>
blok textu
</blockquote>
* tag se všemi použitelnými atributy
<blockquote cite="" dir="" lang="">
* vyznačuje zdroj citace
cite="" - zadává se např. název díla, URL adresa apod.
* směr zobrazení textu
dir="ltr" - zleva doprava (implicitně)
dir="rtl" - zprava doleva
* kód jazyka použitého ve stránce
lang="cs"
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
]]>
Tag Q
Je totožná s BLOCKQUOTE, jen s tím rozdílem, že tento tag používáme pro krátké citace.
<![CDATA[
<q>
blok textu
</q>
* tag se všemi použitelnými atributy
<q cite="" dir="" lang="">
* vyznačuje zdroj citace
cite="" - zadává se např. název díla, URL adresa apod.
* směr zobrazení textu
dir="ltr" - zleva doprava (implicitně)
dir="rtl" - zprava doleva
* kód jazyka použitého ve stránce
lang="cs"
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
]]>
Tag ADDRESS
Neslouží ke zvýrazění textu, ale jeho označení, že text je adresou. Prohledávače na ni mohou reagovat.
<![CDATA[
<address>
blok textu
</address>
* tag se všemi použitelnými atributy
<address dir="" lang="">
* směr zobrazení textu
dir="ltr" - zleva doprava (implicitně)
dir="rtl" - zprava doleva
* kód jazyka použitého ve stránce
lang="cs"
* kód jazyka použitého ve stránce
class - třída stylu
style - přímo vložený styl
* další atributy
id - označení, použitelné jako odkaz ve skriptech
title - popis oddílu
událostní atributy typu on...
]]>
Kódování speciálních znaků
Jsou to např, zanky větší/menší, ampersand, pevná mezera apod.. tyto se zadávají jako kombinace znaků a čísla popřípadě slova.
<![CDATA[
< = <
> = >
& = &
mí = µ
pí = ¶
libra = £
cent = ¢
Euro = €
copyright = ©
registrační značka = ®
pevná mezera =
]]>