HTML

Z MiS
Verze z 29. 3. 2017, 10:31; Spravce (diskuse | příspěvky)
(rozdíl) ← Starší verze | zobrazit aktuální verzi (rozdíl) | Novější verze → (rozdíl)
Přejít na: navigace, hledání


Obsah

Co je to HTML?

Podrobnější materiály: http://www.tvorba-webu.cz/html/


Elementy jazyka HTML

Podrobnější materiály: http://www.tvorba-webu.cz/html/

Základní elementy

Příklad:

<h1>Jižní Amerika</h1>
<p>Jižní Amerika je zajímavý 
    <a href="http://cs.wikipedia.org/wiki/Kontinent">kontinent</a>.
</p>
<p>
  <img src="amerika.jpg" alt="Jižní Amerika" />
</p>

Tabulky a seznamy

Tabulky

Příklad:

<table border="1">
<tr><th>Id</th><th>Jméno</th><th>Počet bodů</th></tr>
<tr><th>1</th><td>František Novák</td><td>15</td></tr>
<table>

Výsledek (v prohlížeči):

IdJménoPočet bodů
1František Novák15
Seznamy s odrážkami/číslované

Příklad:

<ul>
<li>Úkol první: zapište text</li>
<li>Úkol druhý:
   <ol>
   <li>Přeložte program</li>
   <li>Spusťte ho!</li>
   </ol>
</li>
<li>Úkol třetí: Odešlete výsledky</li>
</ul>

Výsledek (v prohlížeči):

  • Úkol první: zapište text
  • Úkol druhý:
    1. Přeložte program
    2. Spusťte ho!
  • Úkol třetí: Odešlete výsledky

Hlavička dokumentu

Správně napsaný soubor HTML by měl kromě samotného textu mít i hlavičku s doplňujícími informacemi.

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <meta name="description" content="Web nejlepší cestovní kanceláře v ČR" />
    <title>Cestovní kancelář Leť-tam!</title>
    <link rel="stylesheet" type="text/css" href="styly.css" />
 </head>
 <body>
 
 ... Zobrazitelný text stránky...
 
 </body>
</html>

Vzhled dokumentu

Všimněte si, že stále popisujeme jen strukturu dokumentu (co je nadpis, co je tabulka, odkaz,...), nikoli vzhled (jak má nadpis vypadat?).

Grafický vzhled popisujeme pomocí kaskádových stylů!


Testování a publikování stránek

Praktické

Užitečné nástroje
Časté chyby

Cvičení

  1. Cvičení HTML
  2. Cvičení HTML 2
  3. Cvičení HTML 3
  4. Cvičení HTML 4
  5. Cvičení HTML 5


Související stránky

Podrobnější zdroje

Osobní nástroje
Jmenné prostory
Varianty
Akce
Výuka
Navigace
Nástroje