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:Informatika]][[Category:Internet]][[Category:CRI]][[Category:HTML]]
+[[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 59: / Řádka 63: @@
 ; Seznamy s odrážkami/číslované
-* <code>ul</code> resp. <code>ol</code>... ohraničení seznamu (začátek a konec)
+* Element <code>ul</code> resp. <code>ol</code>
-* <code>li</code>... jedna položka seznamu, zobrazí se buď s odrážkou (uvnitř elementu <code>ul</code>) nebo číslem (uvnitř elementu <code>ol</code>).
+** <code>ul</code>... seznam s odrážkami
+** <code>ol</code>... číslovaný seznam
+* 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>).
 <div class="Priklad">
@@ Řádka 88: / Řádka 97: @@
 </div>
-=== Struktura stránky ===
+== 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.
+* <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.
+** 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,....
+** 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>
@@ Řádka 99: / Řádka 115: @@
 <div class="Priklad">
-  &lt;html>
+  &lt;!DOCTYPE html&gt;
-   &lt;head>
+ &lt;html&gt;
-      &lt;meta charset="windows-1250">
+   &lt;head&gt;
-      &lt;meta name="description" content="Web nejlepší cestovní kanceláře v ČR">
+      &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>
+   &lt;/head&gt;
-   &lt;body>
+   &lt;body&gt;
    ''... Zobrazitelný text stránky...''
@@ Řádka 114: / Řádka 131: @@
 </div>
-== Kaskádové styly (CSS) ==
+== 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?).
-Podrobnější materiály: http://www.tvorba-webu.cz/css/
+Grafický vzhled popisujeme pomocí [[CSS| kaskádových stylů]]!
-=== Soubor se styly ===
-Do hlavičky HTML souboru (element <code>&lt;head&gt;</code>) musíme doplnit odkaz na soubor se styly:
+== Testování a publikování stránek ==
+* [[Testování webových stránek]] (při vývoji stránky)
- <code><link rel="stylesheet" type="text/css" href="''nazev_souboru''.css" /></code>
+* [[Publikování stránky| Publikování hotové stránky]]
-=== 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 {
-   color: blue;
-   background-color: lightblue;
-   border: solid 2px blue;
-   text-align: center;
- }
-</div>
-=== Vlastní styly ===
-; 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">
-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.
-</div>
-=== Další zdroje ===
-* [http://www.tvorba-webu.cz/css/ Tvorba-webu.cz > CSS]
-* [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 ==
-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>.
-Na tyto styly se odkazujeme pomocí atributu <code>id</code>.
-<div class="Priklad">
-HTML soubor: <tt>index.html</tt>
- &lt;div id="Menu"&gt;
-   Položka 1<br />
-   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 />
-</div>
-== Publikování stránek ==
-* Viz stánka [[Webhosting]]
 == Praktické ==
 ; Užitečné nástroje
-* [http://www.pspad.cz PSPad]
+* [http://www.pspad.cz PSPad]... editor pro tvorbu stránek.
-* [http://www.topstyle4.com/ 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
@@ Řádka 222: / Řádka 156: @@
 # [[Cvičení HTML 4]]
 # [[Cvičení HTML 5]]
+== 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