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

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

@@ Řádka 1: / Řádka 1: @@
-[[Category:VSE]][[Category:Informatika]][[Category:Internet]][[Category:CRI]]
+[[Category:VSE]][[Category:Informatika]][[Category:CRI]][[Category:HTML]]
-== HTML ==
+== Co je to HTML? ==
 Podrobnější materiály: http://www.tvorba-webu.cz/html/
-=== Princip jazyka HTML ===
+* 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.
-* textové soubory, doplněné o formátování
+* 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.
-* pojmy:
+* 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
@@ Řádka 13: / Řá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 ===
@@ Řádka 22: / Řádka 26: @@
 ** <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
+** <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
@@ Řádka 29: / Řádka 33: @@
 Příklad:
   &lt;h1&gt;Jižní Amerika&lt;/h1&gt;
-  &lt;p&gt;Jižní Amerika je zajímavý &lt;a href="http<span></span>://cs.wikipedia.org/wiki/Kontinent"&gt;kontinent&lt;/a&gt;.&lt;/p&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" /&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: http://www.tvorba-webu.cz/css/
+; Seznamy s odrážkami/číslované
+* Element <code>ul</code> resp. <code>ol</code>
-=== Soubor se styly ===
+** <code>ul</code>... seznam s odrážkami
+** <code>ol</code>... číslovaný seznam
-Do hlavičky HTML souboru (element <code>&lt;head&gt;</code>) musíme doplnit odkaz na soubor se styly:
+* 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
- <code><link rel="stylesheet" type="text/css" href="''nazev_souboru''.css" /></code>
+** zobrazí se buď s odrážkou (když je uvnitř elementu <code>ul</code>)
+** nebo číslem (když je uvnitř elementu <code>ol</code>).
-=== Základny formátování ===
-Stylu můžeme nastavovat různé vlastnosti. Jejich výčet najdete na webu, nejběžnější uvádíme:
-* <code>color</code>: barva textu
-* <code>background-color</code>: barva pozadí
-* <code>margin</code>, <code>padding</code>: vlastnosti okrajů odstavce, obrázku atd.
-* <code>font-weight</code>: tučné písmo
-* <code>font-style</code>: kurzíva
-* <code>text-align</code>: zarovnání textu (na střed, do bloku, vlevo, vpravo)
-* <code>text-indent</code>: odsazení prvního řádku odstavce
 <div class="Priklad">
 Příklad:
-  h2 {
+  &lt;ul>
-   color: blue;
+ &lt;li>Úkol první: zapište text&lt;/li>
-   background-color: lightblue;
+ &lt;li>Úkol druhý:
-   border: solid 2px blue;
+    &lt;ol>
-   text-align: center;
+    &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>
+Výsledek (v prohlížeči):
+ <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>
 </div>
-=== Vlastní styly ===
+== Hlavička dokumentu ==
-; Označení textu, na který se aplikuje styl (v HTML)
-* Elementy: <code>span</code> a <code>div</code>
-* V otvírací značce doplníme atribut <code>class</code> s odkazem na název stylu.
-; Popis stylu (v CSS)
-* vlastní styl uvozujeme tečkou.
-<div class="Priklad">
+Správně napsaný soubor HTML by měl kromě samotného textu mít i hlavičku s doplňujícími informacemi.
-HTML soubor: <tt>index.html</tt>
- &lt;p&gt;
-   Text, ve kterém je &lt;span class="OdbornyTermin"&gt;odborný termín&lt;span&gt;.
-   A druhý &lt;span class="OdbornyTermin"&gt;pojem&lt;/span&gt; je také odborný termín.
- &lt;/p&gt;
-CSS soubor: <tt>styl.css</tt>
- .OdbornyTermin {
-    font-style: italic;
-    color: lime;
- }
-Výsledek (v prohlížeči):
-Text, ve kterém je <span style="font-style: italic; color: blue">odborný termín</span>. A druhý <span style="font-style: italic; color: blue">pojem</span> je také odborný termín.
+* <code>&lt;!DOCTYPE html&gt;</code>
+** 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 [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>
-=== Další zdroje ===
+== Vzhled dokumentu ==
-* [http://www.tvorba-webu.cz/css/ Tvorba-webu.cz > CSS]
+Všimněte si, že stále popisujeme jen strukturu dokumentu (co je nadpis, co je tabulka, odkaz,...), nikoli vzhled (jak má nadpis vypadat?).
-* [http://www.w3schools.com/css/default.asp W3Schools.com > CSS]
-* Somacon.com:
-** [http://www.somacon.com/p142.php Barvy na Internetu]
-** [http://www.somacon.com/p141.php Průvodce styly tabulek]
-== Rozdělení stránky na oddíly ==
+Grafický vzhled popisujeme pomocí [[CSS| kaskádových stylů]]!
-Vlastnosti v kaskádových stylech
-* <code>float</code>: plovoucí objekt: vlevo, vpravo, na středu
-* <code>width</code>: šířka bloku
-* <code>height</code>: výška bloku
-Vlastnosti přiřazujeme speciálním stylům, uvozeným znakem <code>#</code>.
+== 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]]
-Na tyto styly se odkazujeme pomocí atributu <code>id</code>.
+== Praktické ==
-<div class="Priklad">
+; Užitečné nástroje
-HTML soubor: <tt>index.html</tt>
+* [http://www.pspad.cz PSPad]... editor pro tvorbu stránek.
- &lt;div id="Menu"&gt;
+* [http://www.geany.org/ Geany], [http://notepad-plus-plus.org/ Notepad++]... alternativní editory, pokud vám nevyhovuje PSPad.
-   Položka 1<br />
+* [http://www.topstyle4.com/ TopStyle Lite]... tvorba CSS stylů.
-   Položka 2
- &lt;/div&gt;
- &lt;p&gt;Text text text...&lt;/p&gt;
-CSS soubor: <tt>styl.css</tt>
- #Menu {
-    float: left;
-    width: 100px;
-    background-color: yellow;
- }
-Výsledek (v prohlížeči):
-<div style="float: left; width: 100px; background-color: yellow;">Položka 1<br />Položka 2</div>Text text text...<br /><br /><br />
+; Časté chyby
-</div>
+== Cvičení ==
+# [[Cvičení HTML]]
-== Publikování stránek ==
+# [[Cvičení HTML 2]]
-* Viz stánka [[Webhosting]]
+# [[Cvičení HTML 3]]
+# [[Cvičení HTML 4]]
-== Praktické ==
+# [[Cvičení HTML 5]]
-=== Užitečné nástroje ===
-* [http://www.pspad.cz PSPad]
-* [http://www.topstyle4.com/ TopStyle Lite]
-=== Č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]>.