HTML – HyperText Markup Language

Základní struktura

<html>

    <head>
        <title>Titulek stránky</title>
    </head>

    <body>
        <h1>Nadpis stránky</h1>
        
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
        elit. Duis vehicula mi eget arcu. Suspendisse potenti. 
        Proin mi justo, iaculis vel, iaculis et, porttitor a, 
        elit. Sed diam justo, cursus eget, sollicitudin vel.</p>
		
        <p>Maecenas sit amet erat. Mauris vitae tellus ut libero 
        hendrerit mollis. Vestibulum volutpat condimentum est. 
        Sed viverra libero ac justo. Fusce auctor sem at libero. 
        Nulla ac diam. Vestibulum ante ipsum primis in faucibus 
        orci luctus et ultrices posuere cubilia.</p>
    </body>

</html>

Podívejte se na ukázku takové stránky.

Elementy jsou:

Atributy

<img src="obrazek.gif" alt="Popis obrázku" />

Poznámky

<!-- tady je poznámka -->

Blokové elementy

<p>Základní odstavec</p>

<h1>Nadpis první úrovně</h1>
<h2>Nadpis druhé úrovně</h2>
…
<h6>Nadpis šesté úrovně</h6>

<blockquote>Delší bloková citace</blockquote>

<address>Adresa</address>

<pre>Předformátovaný text (zdrojový kód programu apod.)</pre>

<div>Bezvýznamový blokový element</div>

<hr/> horizontální čára

<br/> nový řádek

Inline elementy

<strong>Důležitý text (tučně)</strong>

<em>Důležitý text (kurzíva)</em>

<cite>Citace</cite>

<code>Výpis kódu</code>

<dfn>Definice</dfn>

<kbd>Vstup z klávesnice</kbd>

<samp>Ukázka</samp>

<tt>Přrdformátovaný</tt>

<var>Proměnná</var>

<abbr>Ustálený výraz</abbr>

<acronym>Zkratka</acronym>

<del>Smazaný text</del>

<ins>Přidaný text</ins>

<q>Citace</q>



<b>Tučný text</b>

<i>Kurzíva</i>

<sub>Dolní index</sub>

<sup>Horní index</sup>

<strong>Důležitý text (tučně)</strong>

Seznamy

<ul>
    <li>První položka</li>
    <li>Druhá položka</li>
</ul>

<ol>
    <li>První položka</li>
    <li>Druhá položka</li>
</ol>
  1. První položka
  2. Druhá položka
<ol type="A">
    <li>První položka</li>
    <li>Druhá položka</li>
</ol>
  1. První položka
  2. Druhá položka
<dl>
    <dt>Termín</dt>
    <dd>Definice termínu</dd>

    <dt>Termín</dt>
    <dd>Definice termínu</dd>
</dl>
Termín
Definice termínu
Termín
Definice termínu

Odkazy

<a href="stranka.html">Odkaz na stránku</a>

<a href="http://www.example.com/stranka.html">Odkaz na stránku</a>

Obrázky

<img src="obrazek.gif" alt="Obrázek slona" />

Tabulky

<table>
    <tr>
        <td>První buňka</td>
        <td>Druhá buňka</td>
    </tr>
    <tr>
        <td>Třetí buňka</td>
        <td>Čtvrtá buňka</td>
    </tr>
</table>
První buňka Druhá buňka
Třetí buňka Čtvrtá buňka

Textové entity

&lt; <
&gt; >
&amp; &
&nbsp; (tvrdá mezera)
&quot; "
&ndash; – (pomlčka)
&mdash; — (dlouhá pomlčka)
&hellip; … (výpustka, elipsa)

Tabulky

<table>
    <tr>
        <th>První záhlaví</th>
        <th>Druhé záhlaví</th>
    </tr>
    <tr>
        <td>První buňka</td>
        <td>Druhá buňka</td>
    </tr>
</table>
První záhlaví Druhé záhlaví
První buňka Druhá buňka 
<table>
    <tr>
        <td colspan="2">Sloučená buňka</td>
    </tr>
    <tr>
        <td>Levá buňka</td>
        <td>Pravá buňka</td>
    </tr>
</table>
Sloučená buňka
Levá buňka Pravá buňka 
<table>
    <tr>
        <td rowspan="2">Sloučená buňka</td>
        <td>Horní buňka</td>
    </tr>
    <tr>
        <td>Dolní buňka</td>
    </tr>
</table>
Sloučená buňka Horní buňka
Dolní buňka

Pro další nastudování:

Formuláře

<form action="index.php" method="post">
    <fieldset>
        <legend>Ukázkový formulář</legend>

        <label for="vstup">Vstup:</label>
        <input type="text" name="vstup" id="vstup" value="" />

        <br />

        <input type="submit" value="Odeslat" />
    </fieldset>
</form>
Ukázkový formulář 
<input type="password" name="heslo" id="heslo" value="" />

<input type="hidden" name="skryty" value="baf" />

<textarea name="dlouhy" id="dlouhy" cols="40" rows="5">
    Nějaký text
</textarea>

<input type="checkbox" name="zaskrtni" id="zaskrtni" value="1" />
    <label for="zaskrtni">Zaškrtávací pole</label>

<input type="checkbox" name="zaskrtni2" id="zaskrtni2" value="1" checked="checked" />
    <label for="zaskrtni2">Další pole</label>

<input type="radio" name="volba" id="volba_1" value="1" />
    <label for="volba_1">První volba</label>

<input type="radio" name="volba" id="volba_2" value="2" checked="checked" />
    <label for="volba_2">Druhá volba</label>

<select name="vyber" id="vyber">
    <option value="1">První možnost</option>
    <option value="1">Druhá možnost</option>
    <option value="1" selected="selected">Třetí možnost</option>
</select>

<form action="index.php" method="post" enctype="multipart/form-data">
    <fieldset>
        <legend>Odeslání souboru</legend>

        <label for="soubor">Soubor:</label>
        <input type="hidden" name="MAX_FILE_SIZE" value="250000" />
        <input type="file" name="soubor" id="soubor" />

        <input type="submit" value="Odeslat" />
    </fieldset>
</form>
Odeslání souboru

Pro další nastudování:

Rámy (frames)

Samostatně nastudovat:

Kódování, znaková sada, MIME typ dokumentu

Mnoho znakových sad, pro češtinu nejpoužívanější:

Uvádí se v záhlaví HTML dokumentu ve speciálním meta tagu:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Titulek stránky</title>
    </head>
    …

MIME-typy dokumentu:

Doctype a XML deklarace

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>
    …

Další

Příklad

Zkuste si sami vytvořit následující jednoduchou stránku:

Hlavní nadpis stránky…

Toto je běžný odstavec stránky, ve kterém jsou některé důležité věci a také i jiné důležité věci. Kromě nich tu máme i odrážkový seznam:

  • Jedna položka
  • Další položka:
    1. První podpoložka
    2. Druhá podpoložka
  • A ještě jedna položka…

Přidáme sem třeba i odkaz na stránky o předmětu.

Sloučené záhlaví
První buňka Sloučená buňka Třetí buňka
Druhá buňka Čtvrtá buňka

Delší bloková citace by třeba mohla být Být či nebýt, toť otázka. Víc důstojno-li ducha trpěti od střel a praků zlého osudu, neb ozbrojit se proti moři běd…

Ve stránce můžeme mít i různé znaky,
jako je & < nebo >. Například první
jmenovaný se zaznamenává pomocí 
textové entity &amp;
Jednoduchý formulář