Postavíme stránku školního kroužku robotiky. Bude mít odkaz na školu, fotku robota, tabulku termínů a přihlášku. To jsou čtyři věci, které má skoro každý web.
<p>text</p>. Atribut je údaj v počáteční značce ve tvaru název="hodnota".<img src="robot.jpg"> – element img, atribut src.a s atributem href (cíl).<a href="https://www.skola.cz">Web školy</a>https://www.skola.cz/krouzky.html. Relativní: krouzky.html nebo ../index.html (o složku výš).<a href="../index.html">Zpět na hlavní stránku</a>. Dvě tečky a lomítko ../ znamenají „o složku nahoru“.Atribut target="_blank" otevře odkaz v nové záložce. Používej ho střídmě: uživatele to může mást.
img vloží obrázek, src říká, kde soubor je. alt je náhradní text: přečte ho čtečka obrazovky a zobrazí se, když se obrázek nenačte.<img src="robot.jpg" alt="Robot z Lega sleduje černou čáru">img je prázdný element, koncovou značku nemá. Čistě ozdobný obrázek dostane prázdný alt="", aby ho čtečka přeskočila.
table je celá tabulka, tr řádek, th záhlaví (nadpis sloupce nebo řádku), td obyčejná buňka s daty.<tr><th>Den</th><th>Čas</th></tr><table> <tr><th>Den</th><th>Čas</th></tr> <tr><td>Středa</td><td>14:00</td></tr> </table>. První řádek tvoří buňky th, protože jde o nadpisy sloupců.form sbírá data od uživatele a odešle je na server. action říká kam, method jakou metodou HTTP (GET nebo POST).<form action="/prihlaska" method="post">input je políčko; jeho type určuje druh (text, email, password, number, checkbox, radio…). name je jméno, pod kterým hodnota odejde na server. label je popisek; přes for se propojí s id políčka.<label for="jmeno">Jméno</label> <input id="jmeno" name="jmeno" type="text" required>Doplň správné hodnoty. Všechna slova jsou anglická, jako v opravdovém kódu.
required a type="email" zajistí, že na server přijdou jen správná data.Útočník může poslat požadavek přímo, mimo formulář, nebo kontrolu v prohlížeči vypnout.
a href, obrázek img src alt, tabulka table – tr – th/td, formulář form action method s poli input (type, name) a popisky label for. Alt a label nejsou ozdoba: bez nich stránku nepoužije člověk se čtečkou.Tyhle čtyři skupiny elementů napíšeš na webu stokrát. Tady je máš přehledně: co dělá který element, jaké má důležité atributy a kde se nejčastěji chybuje.
název="hodnota".V <a href="kontakt.html"> je atribut href.<img>, <input>, <br>../ je o složku výš, / na začátku znamená kořen webu.obrazky/logo.png, ../index.html, /kontakt.html| Zápis | Co udělá |
|---|---|
<a href="https://example.com"> | odkaz na jiný web (absolutní cesta) |
<a href="kontakt.html"> | odkaz na soubor ve stejné složce |
<a href="#rozvrh"> | skok na element s id="rozvrh" na téže stránce |
<a href="mailto:[email protected]"> | otevře nový e-mail |
<img src="a.jpg" alt="popis"> | obrázek s náhradním textem |
table – celá tabulkatr (table row) – řádekth (table header) – buňka záhlavítd (table data) – buňka s datycaption – nadpis tabulkycolspan / rowspan – buňka přes víc sloupců / řádkůTabulka je na data (rozvrh, ceník, výsledky). Na rozvržení stránky se nepoužívá, na to je CSS.
| Element / atribut | Význam |
|---|---|
form action="/x" method="post" | kam a jak se data odešlou |
input type="text" | jednořádkový text |
input type="email", "password", "number" | e-mail, skryté heslo, číslo |
input type="checkbox" / "radio" | zaškrtávátko / jedna volba z několika |
select + option | rozbalovací seznam |
textarea | víceřádkový text |
button type="submit" | tlačítko odeslat |
name | jméno hodnoty pro server |
label for="id" | popisek propojený s polem |
required | pole je povinné |
form s action a method (u osobních údajů POST).label a input se správným type.id (pro label) a name (pro server).required.<button type="submit">.Roztřiď elementy a atributy do skupin, kam patří.
krouzky/robotika.html. Jak z ní odkážeš na obrazky/robot.jpg v kořeni webu dvěma způsoby?../obrazky/robot.jpg (o složku výš, pak do složky obrazky). Od kořene webu: /obrazky/robot.jpg.<form action="/prihlaska" method="post"> <label for="mail">E-mail</label> <input id="mail" name="email" type="email" required> <label><input type="radio" name="den" value="st"> Středa</label> <label><input type="radio" name="den" value="ct"> Čtvrtek</label> <button type="submit">Odeslat</button></form>. Přepínače mají stejné name, proto jde vybrat jen jeden.<img src="graf.png"> – alt nepotřebuji, obrázek je přece vidět.<img src="graf.png" alt="Graf: počet členů vzrostl z 8 na 15">Nevidomý uživatel obrázek nevidí, čtečka přečte jen alt. Alt se ukáže i tehdy, když se obrázek nenačte.
a href (absolutní nebo relativní cesta), obrázek img vždy s alt, tabulka jen na data (tr, th, td), formulář form s action a method, pole input se správným type, name a popiskem label.