Skip to content

Instantly share code, notes, and snippets.

@encukou

encukou/stranka.html

Created May 25, 2020 19:20
Show Gist options
  • Save encukou/6ca3280f48f61b17d295c511e9e033fe to your computer and use it in GitHub Desktop.
Save encukou/6ca3280f48f61b17d295c511e9e033fe to your computer and use it in GitHub Desktop.
Download ZIP
Raw
stranka.html
<!DOCTYPE html>
<!--
Tento soubor si otevři ve webovém prohlížeči.
Často v prohlížeči jde otevírat pomocí Ctrl+O.
-->
<html>
<head>
<title>HTML stránka</title>
<meta charset="utf-8">
</head>
<body>
<h1>HTML</h1>
<p>
HTML je značkovací jazyk – tedy jazyk, ve kterém můžu napsat text
a vyznačit v něm, co je <em>nadpis</em>, co je <em>odstavec</em>
nebo co je <em>odkaz</em> (a kam ten odkaz vede).
</p>
<h2>Jak HTML funguje</h2>
<p>
K vyznačování používám <em>značky</em>, které se píšou do špičatých
závorek.
Značek je spousta a každá má nějaké (často zkratkovité) jméno.
Když je v „zobáčcích“ jen jméno, je to otevírací značka; když je
na začátku lomítko, je to značka zavírací.
</p>
<p>
Značky se do sebe zanořují: poslední otevřenou
značku musím první zavřít. Jinak by v tom byl chaos.
<br>
Výjimkou jsou značky jako <em>br</em> a <em>img</em>, které se
neuzavírají.
Trocha chaosu být musí.
</p>
<p>
Odsazování
nehraje
v HTML
vůbec žádnou roli.
Jedna mezera, deset mezer,
dva nové řádky – všechno je to na jedno brdo. Důležité jsou
značky.</p><p>Když to ale po sobě budeš chtít pak někdy znovu
přečíst, odsazování důsledně dodržuj!
</p>
<p>
Některé značky potřebují <em>atributy</em>. Třeba takový odkaz:
když chci odkázat na <a href="https://pyladies.cz/">nějakou jinou stránku</a>,
musím v atributu <em>href</em> zadat celou adresu té stránky.
</p>
<p>
Obrázkům jako je <img src="had.png" alt="obrázek hada">
je dobré dát atribut <em>alt</em>.
Ne všichni uživatelé internetu obrázky vidí!
<br>
(Jestli hada nevidíš ty, stáhni si ho
<a href="https://naucse.python.cz/course/pyladies/intro/pyglet/static/had.png">
z internetu
</a>
a ulož do adresáře, kde máš tuhle stránku,
pod jménem <code>had.png</code>.)
</p>
<p>
Když popisuju funkci <code>print</code> nebo soubor
<code>stranka.html</code>, označím to jako kousky kódu.
Když popisuju značku <code>&lt;html&gt;</code>, musím pro špičatou
závorku použít speciální trik, <em>entitu</em>.
Entita pro ampersand je <code>&amp;amp;</code>.
</p>
<h2>Odrážky a seznamy</h2>
<p>Známe dva druhy seznamů:</p>
<ul>
<li>Odrážkový (unordered list – <code>ul</code>)</li>
<li>Číslovaný (ordered list – <code>ol</code>)</li>
</ul>
<p>Jak napsat seznam v HTML:</p>
<ol>
<li>Otevři značku <code>ol</code> nebo <code>ul</code></li>
<li>
Pro každou odrážku:
<ol>
<li>Otevři značku <code>li</code> (list item)</li>
<li>Napiš obsah odrážky</li>
<li>Zavři značku <code>li</code></li>
</ol>
</li>
<li>Zavři značku <code>ol</code> nebo <code>ul</code></li>
</ol>
<h2>Formulář</h2>
<p>
Odešli tento formulář a sleduj, co se stane s adresou této stránky!
</p>
<form method="GET" action="#">
<div>
<label>
Jmenuju se:
<input type="text" name="name">
</label>
</div>
<div>
Mám rád/a:
<label>
<input type="radio" name="animal" value="dog">
Psy
</label>
<label>
<input type="radio" name="animal" value="cat">
Kočky
</label>
<label>
<input type="radio" name="animal" value="snake">
Hady
</label>
</div>
<div>
<label>
<input type="checkbox" name="newsletter">
Chci dostávat newsletter
</label>
</div>
<input type="submit" value="Odeslat!">
</form>
<h2>Tabulky</h2>
<table>
<caption>Přehled značek</caption>
<tr>
<th>Značka</th>
<th>Funkce</th>
<th>Anglický termín</th>
</tr>
<tr>
<td><code>&lt;html&gt;</code></td>
<td>HTML Dokument</td>
<td><em>HyperText Markup Language</em> document</td>
</tr>
<tr>
<td><code>&lt;head&gt;</code></td>
<td>Hlavička (část, která se nezobrazí jako součást dokumentu)</td>
<td><em>Head</em>er</td>
</tr>
<tr>
<td><code>&lt;title&gt;</code></td>
<td>Titulek</td>
<td><em>Title</em></td>
</tr>
<tr>
<td><code>&lt;meta&gt;</code></td>
<td>Metainformace (např. o kódování textu)</td>
<td><em>Meta</em>information</td>
</tr>
<tr>
<td><code>&lt;body&gt;</code></td>
<td>Tělo stránky</td>
<td>Document <em>body</em></td>
</tr>
<tr>
<td><code>&lt;h1&gt;</code></td>
<td>Nadpis 1. úrovně</td>
<td>Level <em>1 H</em>eading</td>
</tr>
<tr>
<td><code>&lt;h2&gt;</code></td>
<td>Nadpis 2. úrovně</td>
<td>Level <em>2 H</em>eading</td>
</tr>
<tr>
<td><code>&lt;h6&gt;</code></td>
<td>Nadpis 6. (nejnižší) úrovně</td>
<td>Level <em>6 H</em>eading</td>
</tr>
<tr>
<td><code>&lt;p&gt;</code></td>
<td>Odstavec</td>
<td><em>P</em>aragraph</td>
</tr>
<tr>
<td><code>&lt;em&gt;</code></td>
<td>Zvýraznění</td>
<td><em>Em</em>phasis</td>
</tr>
<tr>
<td><code>&lt;strong&gt;</code></td>
<td>Silnější zvýraznění</td>
<td><em>Strong</em> emphasis</td>
</tr>
<tr>
<td><code>&lt;code&gt;</code></td>
<td>Kód</td>
<td><em>Code</em></td>
</tr>
<tr>
<td><code>&lt;a&gt;</code></td>
<td>Odkaz</td>
<td><em>A</em>nchor (=kotva)</td>
</tr>
<tr>
<td><code>&lt;img&gt;</code></td>
<td>Obrázek</td>
<td><em>IM</em>a<em>G</em>e</td>
</tr>
<tr>
<td><code>&lt;br&gt;</code></td>
<td>Nový řádek</td>
<td>Line <em>BR</em>eak</td>
</tr>
<tr>
<td><code>&lt;ul&gt;</code></td>
<td>Odrážkový seznam</td>
<td><em>U</em>nordered <em>L</em>ist</td>
</tr>
<tr>
<td><code>&lt;ol&gt;</code></td>
<td>Číslovaný (seřazený) seznam</td>
<td><em>O</em>rdered <em>L</em>ist</td>
</tr>
<tr>
<td><code>&lt;li&gt;</code></td>
<td>Položka seznamu</td>
<td><em>L</em>ist <em>I</em>tem</td>
</tr>
<tr>
<td><code>&lt;div&gt;</code></td>
<td>Oddíl dokumentu (nesdílí řádek s dalším obsahem, ale není to odstavec textu)</td>
<td><em>Div</em>ision</td>
</tr>
<tr>
<td><code>&lt;form&gt;</code></td>
<td>Formulář</td>
<td><em>Form</em></td>
</tr>
<tr>
<td><code>&lt;label&gt;</code></td>
<td>Popisek ovládacího prvku (obvykle obsahuje i samotný prvek)</td>
<td><em>Label</em></td>
</tr>
<tr>
<td><code>&lt;input&gt;</code></td>
<td>Prvek pro vstup od uživatele</td>
<td><em>Input</em> element</td>
</tr>
<tr>
<td><code>&lt;table&gt;</code></td>
<td>Tabulka</td>
<td><em>Table</em></td>
</tr>
<tr>
<td><code>&lt;tr&gt;</code></td>
<td>Řádek tabulky</td>
<td><em>T</em>able <em>R</em>ow</td>
</tr>
<tr>
<td><code>&lt;table&gt;</code></td>
<td>Hlavička tabulky</td>
<td><em>T</em>able <em>H</em>eader</td>
</tr>
<tr>
<td><code>&lt;table&gt;</code></td>
<td>Buňka tabulky</td>
<td><em>T</em>able <em>D</em>ata</td>
</tr>
<tr>
<td><code>&lt;-- --&gt;</code></td>
<td>Komentář</td>
<td>no <em>comment</em></td>
</tr>
</table>
<table>
<caption>Přehled atributů</caption>
<tr>
<th>Atribut</th>
<th>Funkce</th>
<th>Anglický termín</th>
</tr>
<tr>
<td><code>charset</code></td>
<td>Kódování (použití u <code>meta</code>)</td>
<td><em>Char</em>acter <em>Set</em></td>
</tr>
<tr>
<td><code>href</code></td>
<td>Adresa odkazu (u <code>a</code>)</td>
<td><em>H</em>ypertext <em>Ref</em>erence</td>
</tr>
<tr>
<td><code>src</code></td>
<td>Adresa zdroje (u <code>img</code> je zdrojem obrázek)</td>
<td><em>S</em>ou<em>RC</em>e</td>
</tr>
<tr>
<td><code>alt</code></td>
<td>Alternativní text (kdyby se <code>img</code> nenačetl)</td>
<td><em>ALT</em>ernative text</td>
</tr>
<tr>
<td><code>method</code></td>
<td>HTTP metoda požadavku pro odeslání <code>form</code>uláře</td>
<td><em>Method</em></td>
</tr>
<tr>
<td><code>action</code></td>
<td>Adresa požadavku pro odeslání <code>form</code>uláře</td>
<td><em>Action</em></td>
</tr>
<tr>
<td><code>type</code></td>
<td>
Druh (typ) ovládacího prvku <em>input</em>.
Možností tu je <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types">moc</a>.
</td>
<td><em>Type</em></td>
</tr>
<tr>
<td><code>name</code></td>
<td>Jméno (proměnné kterou <em>input</em> nastavuje)</td>
<td><em>Name</em></td>
</tr>
<tr>
<td><code>value</code></td>
<td>Hodnota (proměnné kterou <em>input</em> nastavuje)</td>
<td><em>Value</em></td>
</tr>
</table>
<h2>Na závěr</h2>
<p>
HTML toho umí mnohem víc.
Zajímá-li tě, doporučuju zajít na anglickou wiki
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">MDN</a>
(Mozilla Developer Network), případně k hledaným výrazům připsat „MDN“.
Existují i jiná místa, kde se o webových technologiích
dozvědět – ale často se zaměřují na pořadí ve vyhledávačích
víc než na kvalitu obsahu.
</p>
<p>
HTML kóduje jen <em>obsah</em> stránky (co je nadpis,
co je odkaz, co je v tablulce).
Nezabývá se <em>prezentací</em> (co je kurzívou, co je červené,
co je bezpatkovým písmem).
Tyhle detaily buď dodá prohlížeč sám, nebo se dají zapsat
ve speciálním jazyce <em>CSS</em> a do HTML dokumentu vložit
značkou <code>&lt;style&gt;</code>.
</p>
<style>
/* Nechť mají všechny buňky tabulek šedé pozadí a černý text! */
td {
background-color: #EEE;
color: black;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment