→ Slide 1

HTML Tagy

→ Slide 2

Úprava textu

Všechny tagy na formátování textu jsou in-line tagy, to znamená řádkové. Nezalamují za sebou řádek (narozdíl od blokových tagů).

↓ Slide 3

Fyzické formátování textu

 tučné písmo
 kurzíva
 podtržení textu Nepoužívat
 dolní index
 horní index
 zmenšení textu
<big> zvětšení písma
<s> přeškrtnutý text
<strike> přeškrtnutý text ¹⁾

↓ Slide 4

Logické formátování

 úsek textu
 zvýraznění (tučně)
 zvýraznění (kurzíva)
<cite> citace
<code> výpis kódu
<dfn> nově použitý termín
<kbd> vstup z klávesnice
<samp> ukázka
<var> formátování proměnné
<abbr> ustálený výraz
<acronym> zkratka
<del> smazaný obsah ²⁾)]

→ Slide 5

Odkazy

↓ Slide 6

Opakování

http://www.kosek.cz/php/faq.html

↓ Slide 7

Vložení odkazu

 <a href="URL">text odkazu</a>

Nejčastější použití odkazů je přímo v textu, kde vytvoříme odkaz na další informace týkající se určitého pojmu:

Mnoho zajímavých informací o službě WWW lze nalézt na serveru
<a href="http://www.w3.org/">konsorcia W3C</a>. Naleznete zde 
i informace o nejnovější verzi jazyka HTML.

Mnoho zajímavých informací o službě WWW lze nalézt na serveru konsorcia W3C. Naleznete zde i informace o nejnovější verzi jazyka HTML.

↓ Slide 8

Malá odbočka k atributům

 <název elementu atribut1="hodnota1" atribut2="hodnota2" … >

³⁾

→ Slide 9

Seznamy

celý seznam zahájíme tagem <ul>;
napíšeme potřebný počet položek seznamu, každou položku uzavřeme mezi tagy <li> a </li>;
seznam ukončíme tagem </ul>.

Nabízené druhy ovoce:
<ul>
    <li>Jablka</li>
    <li>Hrušky</li>
    <li>Švestky</li>
    <li>Banány</li>
</ul>

Nabízené druhy ovoce:

Jablka
Hručky
Šfestky
Banány

→ Slide 10

Obrázky

<img src="URL" alt="popis" width="šířka" height="výška">
 
<img src="moucha.gif" alt="Moucha, která jí večeři" width="200" height="142">

→ Slide 11

Komentáře

 <!-- text komentáře -->

Co nelze komentovat?

→ Slide 12

Tabulky

Tabulky se vytváření pomocí elementu <table>
<tr> - řádky tabulky
<td> - buňky tabulky
<th> - hlavička tabulky

↓ Slide 13

<table>
<tr>
    <th>Rok</th>
    <th>Obrat A</th>
    <th>Obrat B</th>
</tr>
<tr>
    <td>1994</td>
    <td>12,6 mil.</td>
    <td>3,6 mil.</td>
</tr>
<tr>
    <td>1995</td>
    <td>11,7 mil.</td>
    <td>5,9 mil.</td>
</tr>
<tr>
    <td>1996</td>
    <td>8,3 mil.</td>
    <td>9,7 mil.</td>
</tr>
</table>

↓ Slide 14

Rok	Obrat A	Obrat B
1994	12,6 mil	3,6 mil.
1995	11,7 mil.	5,9 mil.
1996	8,3 mil.	9,7 mil.

→ Slide 15

Bonus Kaskádové styly

<!DOCTYPE html>
<html>
<head>
<title>Ukázková stránka -- bez použití CSS</title>
</head>
<body bgcolor="white" link="blue" vlink="navy" alink="red">
 
<basefont size="3" face="Verdana CE, Verdana, Arial CE, Arial,
Helvetica, sans-serif">
 
<h1 align="center"><font color="blue" face="Times New Roman CE, Times New Roman,
Times Roman, serif">Úvod</font></h1>
 
<p>Nějaký v tuto chvíli nepodstatný text</p>
 
<h1 align="center"><font color="blue" face="Times New Roman CE, Times New Roman,
Times Roman, serif">Stať</font></h1>
 
<p>Text teď poněkud rozvineme.</p>
<p>Alespoň do dvou odstavců.</p>
 
<h1 align="center"><font color="blue" face="Times New Roman CE, Times New Roman,
Times Roman, serif">Závěr</font></h1>
 
<p>Závěr může být opět krátký.</p>
 
</body>
</html>

↓ Slide 16

body { background-color: white;
       color: black;
       font-family: Verdana, Arial, Helvetica, sans-serif }
 
h1 { color: blue;
     font-family: 'Times New Roman', 'Times Roman', serif;
     text-align: center }

↓ Slide 17

<!DOCTYPE html>
<html>
<head>
<title>Ukázková stránka -- bez použití CSS</title>
<link href="styl.css" type="text/css" rel="stylesheet">
</head>
<body>
 
<h1>Úvod</h1>
 
<p>Nějaký v tuto chvíli nepodstatný text</p>
 
<h1>Stať</h1>
 
<p>Text teď poněkud rozvineme.</p>
<p>Alespoň do dvou odstavců.</p>
 
<h1>Závěr</h1>
 
<p>Závěr může být opět krátký.</p>
 
</body>
</html>

→ Slide 18

Zdroje

¹⁾ https://www.jakpsatweb.cz/html/text.html

²⁾ https://www.jakpsatweb.cz/html/text.html

³⁾ http://htmlguru.cz/zaklady-atributy.html