HTML

Z MiS

(Rozdíly mezi verzemi)

Přejít na: navigace, hledání

Aktuální verze z 29. 3. 2017, 10:31

Obsah

1 Co je to HTML?
2 Elementy jazyka HTML
- 2.1 Základní elementy
- 2.2 Tabulky a seznamy
3 Hlavička dokumentu
4 Vzhled dokumentu
5 Testování a publikování stránek
6 Praktické
7 Cvičení
8 Související stránky
9 Podrobnější zdroje

Co je to HTML?

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

Jazyk HTML slouží k popisu obsahu webových stránek. Kód stránky se ukládá do souboru s příponou .html a umisťuje na webový server.
Soubory HTML jdou také zobrazit v počítači přímo dvojím klikem na soubor. Stránka se otevře v prohlížeči.
Webové stránky jsou textové soubory, doplněné o formátování pomocí značek jazyka HTML.
Pojmy:
- tag (značka): otvírací, zavírací
- element
- entita
- atribut
Jak se jazyk HTML vyvíjel?

Elementy jazyka HTML

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

Základní elementy

h1, h2,...
p, (br)
hr
img a jeho atributy
- src... cesta k obrázku
- width... změna velikosti (ale skutečné rozlišení se nemění, stahuje se pořád obrázek v původní velikosti)
- alt... popis obrázku, který se zobrazí po najetí myší nad obrázek, nebo když se obrázek nepodaří zobrazit (vhodné i kvůli čtečkám webu pro zrakově handicapované)
a... hypertextový odkaz
- href... URL adresa odkazu

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

table... ohraničení celé tabulky,
tr... řádek tabulky
td... buňka tabulky v řádku.
th... buňka tabulky, která je součástí hlavičky tabulky (bude zvýrazněná).

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):

Id	Jméno	Počet bodů
1	František Novák	15

Seznamy s odrážkami/číslované

Element ul resp. ol
- ul... seznam s odrážkami
- ol... číslovaný seznam
Začátek seznamu označuje otvírací značka (<ul>), konec zavírací značka (</ul>).
Element li... jedna položka seznamu
- zobrazí se buď s odrážkou (když je uvnitř elementu ul)
- nebo číslem (když je uvnitř elementu ol).

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>
- Tímto uvádíme, že píšeme dokument HTML verze 5.
- Může být dále uvedeno DTD dokumentu, podle kterého ho lze validovat, některé validátory jeho uvedení vyžadují. Norma však nikoli.
- Více viz JakPsátWeb.cz → Doctype deklarace.
html
- Celá stránka by měla být zahrnuta do jednoho elementu HTML. Mimo jiné kvůli kompatibilitě s jazykem XML.
head
- Hlavička stránky. Informace zde uvedené popisují blíže stránku, ale na stránce se nezobrazují.
- Příklady informací: způsob kódování národních znaků, titulek stránky, odkaz na soubor s kaskádovými styly, popis stránky, klíčová slova,...
- Více o položkách v hlavičce stránky.
body
- Zde píšeme samotný obsah stránky, který se má zobrazit.

<!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

Testování webových stránek (při vývoji stránky)
Publikování hotové stránky

Praktické

Užitečné nástroje

PSPad... editor pro tvorbu stránek.
Geany, Notepad++... alternativní editory, pokud vám nevyhovuje PSPad.
TopStyle Lite... tvorba CSS stylů.

Časté chyby

Cvičení

Související stránky

CSS, Testování webových stránek, Publikování stránky

Podrobnější zdroje

GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <http://www.tvorba-webu.cz>.

@@ Řádka 1: / Řádka 1: @@
-[[Category:VSE]]
+[[Category:VSE]][[Category:Informatika]][[Category:CRI]][[Category:HTML]]
-[[Category:HTML]]
-[[Category:CRI]]
-== HTML ==
+== Co je to HTML? ==
+Podrobnější materiály: http://www.tvorba-webu.cz/html/
-=== Podrobnější materiály ===
+* Jazyk HTML slouží k popisu obsahu webových stránek. Kód stránky se ukládá do souboru s příponou <tt>.html</tt> a umisťuje na webový server.
-* http://www.tvorba-webu.cz/html/
+* Soubory HTML jdou také zobrazit v počítači přímo dvojím klikem na soubor. Stránka se otevře v prohlížeči.
+* Webové stránky jsou textové soubory, doplněné o formátování pomocí značek jazyka HTML.
-=== Princip jazyka HTML ===
+* Pojmy:
-* textové soubory, doplněné o formátování
-* pojmy:
 ** tag (značka): otvírací, zavírací
 ** element
@@ Řádka 16: / Řádka 13: @@
 ** atribut
 * Jak se jazyk HTML vyvíjel?
+== Elementy jazyka HTML ==
+Podrobnější materiály: http://www.tvorba-webu.cz/html/
 === Základní elementy ===
-* h1, h2,...
+* <code>h1</code>, <code>h2</code>,...
-* p, (br)
+* <code>p</code>, (<code>br</code>)
-* img
+* <code>hr</code>
-* a
+* <code>img</code> a jeho atributy
+** <code>src</code>... cesta k obrázku
+** <code>width</code>... změna velikosti (ale skutečné rozlišení se nemění, stahuje se pořád obrázek v původní velikosti)
+** <code>alt</code>... popis obrázku, který se zobrazí po najetí myší nad obrázek, nebo když se obrázek nepodaří zobrazit (vhodné i kvůli čtečkám webu pro zrakově handicapované)
+* <code>a</code>... hypertextový odkaz
+** <code>href</code>... URL adresa odkazu
+<div class="Priklad">
+Příklad:
+ &lt;h1&gt;Jižní Amerika&lt;/h1&gt;
+ &lt;p&gt;Jižní Amerika je zajímavý
+     &lt;a href="htt<span></span><!--SPAN nechej tu, jinak se příklad zobrazí jako odkaz-->p://cs.wikipedia.org/wiki/Kontinent"&gt;kontinent&lt;/a&gt;.
+ &lt;/p&gt;
+ &lt;p&gt;
+   &lt;img src="amerika.jpg" alt="Jižní Amerika" /&gt;
+ &lt;/p&gt;
+</div>
 === Tabulky a seznamy ===
-* table, tr, td, th
+; Tabulky:
-* ul, ol, li
+* <code>table</code>... ohraničení celé tabulky,
+* <code>tr</code>... řádek tabulky
+* <code>td</code>... buňka tabulky v řádku.
+* <code>th</code>... buňka tabulky, která je součástí hlavičky tabulky (bude zvýrazněná).
-=== Struktura stránky ===
+<div class="Priklad">
-* html
+Příklad:
-* head
+ &lt;table border="1">
-* body
+ &lt;tr>&lt;th>Id&lt;/th>&lt;th>Jméno&lt;/th>&lt;th>Počet bodů&lt;/th>&lt;/tr>
+ &lt;tr>&lt;th>1&lt;/th>&lt;td>František Novák&lt;/td>&lt;td>15&lt;/td>&lt;/tr>
+ &lt;table>
-== Kaskádové styly (CSS) ==
+Výsledek (v prohlížeči):
+ <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>
+</div>
-=== Podrobnější materiály: ===
+; Seznamy s odrážkami/číslované
-* http://www.tvorba-webu.cz/css/
+* Element <code>ul</code> resp. <code>ol</code>
-* Somacon.com:
+** <code>ul</code>... seznam s odrážkami
-** [http://www.somacon.com/p142.php Barvy na Internetu]
+** <code>ol</code>... číslovaný seznam
-** [http://www.somacon.com/p141.php Průvodce styly tabulek]
+* Začátek seznamu označuje otvírací značka (<code>&lt;ul&gt;</code>), konec zavírací značka (<code>&lt;/ul&gt;</code>).
+* Element <code>li</code>... jedna položka seznamu
+** zobrazí se buď s odrážkou (když je uvnitř elementu <code>ul</code>)
+** nebo číslem (když je uvnitř elementu <code>ol</code>).
-=== Soubor se styly ===
+<div class="Priklad">
-* <link rel="stylesheed" type="text/css" href="nazev_souboru.css" />
+Příklad:
+ &lt;ul>
+ &lt;li>Úkol první: zapište text&lt;/li>
+ &lt;li>Úkol druhý:
+    &lt;ol>
+    &lt;li>Přeložte program&lt;/li>
+    &lt;li>Spusťte ho!&lt;/li>
+    &lt;/ol>
+ &lt;/li>
+ &lt;li>Úkol třetí: Odešlete výsledky&lt;/li>
+ &lt;/ul>
-=== Základy formátování ===
+Výsledek (v prohlížeči):
-* color
+ <ul>
-* background-color
+ <li>Úkol první: zapište text</li>
-* margin
+ <li>Úkol druhý:
-* font-weight
+    <ol>
-* font-style
+    <li>Přeložte program</li>
+    <li>Spusťte ho!</li>
+    </ol>
+ </li>
+ <li>Úkol třetí: Odešlete výsledky</li>
+ </ul>
+</div>
-=== Vlastní styly ===
+== Hlavička dokumentu ==
-* span, div
-* vlastní styl
-== Rozdělení stránky na oddíly ==
+Správně napsaný soubor HTML by měl kromě samotného textu mít i hlavičku s doplňujícími informacemi.
-* vlastnost float v kaskádových stylech
-== Co potřebujete k publikování stránek ==
+* <code>&lt;!DOCTYPE html&gt;</code>
-* hosting
+** Tímto uvádíme, že píšeme dokument HTML verze 5.
-* doména
+** Může být dále uvedeno DTD dokumentu, podle kterého ho lze validovat, některé validátory jeho uvedení vyžadují. Norma však nikoli.
+** Více viz [http://www.jakpsatweb.cz/doctype.html JakPsátWeb.cz &rarr; Doctype deklarace].
+* <code>html</code>
+** Celá stránka by měla být zahrnuta do jednoho elementu HTML. Mimo jiné kvůli kompatibilitě s jazykem XML.
+* <code>head</code>
+** Hlavička stránky. Informace zde uvedené popisují blíže stránku, ale na stránce se nezobrazují.
+** Příklady informací: způsob kódování národních znaků, titulek stránky, odkaz na soubor s&nbsp;kaskádovými styly, popis stránky, klíčová slova,...
+** Více o [[HTML: Položky v hlavičce stránky| položkách v hlavičce stránky]].
+* <code>body</code>
+** Zde píšeme samotný obsah stránky, který se má zobrazit.
+<div class="Priklad">
+ &lt;!DOCTYPE html&gt;
+ &lt;html&gt;
+  &lt;head&gt;
+     &lt;meta http-equiv="content-type" content="text/html; charset=windows-1250" />
+     &lt;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" />
+  &lt;/head&gt;
+  &lt;body&gt;
+  ''... Zobrazitelný text stránky...''
+  &lt;/body&gt;
+ &lt;/html&gt;
+</div>
+== 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í [[CSS| kaskádových stylů]]!
+== Testování a publikování stránek ==
+* [[Testování webových stránek]] (při vývoji stránky)
+* [[Publikování stránky| Publikování hotové stránky]]
 == Praktické ==
-=== Užitečné nástroje ===
+; Užitečné nástroje
-* [[http://www.pspad.cz PSPad]]
+* [http://www.pspad.cz PSPad]... editor pro tvorbu stránek.
-* TopStyle Lite
+* [http://www.geany.org/ Geany], [http://notepad-plus-plus.org/ Notepad++]... alternativní editory, pokud vám nevyhovuje PSPad.
+* [http://www.topstyle4.com/ TopStyle Lite]... tvorba CSS stylů.
+; Časté chyby
+== Cvičení ==
+# [[Cvičení HTML]]
+# [[Cvičení HTML 2]]
+# [[Cvičení HTML 3]]
+# [[Cvičení HTML 4]]
+# [[Cvičení HTML 5]]
-=== Časté chyby ===
+== Související stránky ==
+* [[CSS]], [[Testování webových stránek]], [[Publikování stránky]]
 == Podrobnější zdroje ==
 * GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <[http://www.tvorba-webu.cz http://www.tvorba-webu.cz]>.

HTML

Aktuální verze z 29. 3. 2017, 10:31

Obsah

Co je to HTML?

Elementy jazyka HTML

Základní elementy

Tabulky a seznamy

Hlavička dokumentu

Vzhled dokumentu

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

Praktické

Cvičení

Související stránky

Podrobnější zdroje

Osobní nástroje

Jmenné prostory

Varianty

Zobrazení

Akce

Hledat

Výuka

Navigace

Nástroje