HTML

Z MiS
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
(→Vlastní styly: Zpřehlednění.)
m (→Související stránky: Dodány související stránky.)
 
(Není zobrazeno 8 mezilehlých verzí od 1 uživatele.)
Řádka 1: Řádka 1:
−
[[Category:VSE]][[Category:Informatika]][[Category:Internet]][[Category:CRI]][[Category:HTML]]
+
[[Category:VSE]][[Category:Informatika]][[Category:CRI]][[Category:HTML]]
  
 
== Co je to HTML? ==
 
== Co je to HTML? ==
Řádka 131: Řádka 131:
 
</div>
 
</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 ===
+
−
Pomocí kaskádových stylů můžeme přiřadit vzhled existujícímu elementu HTML (třeba všem nadpisům), ale můžeme také vytvořit vlastní styl a ten použít kdekoli ve stránce.
+
−
; Vytvoření vlastního stylu (v CSS)
+
−
* Stejně jako přiřazení vzhledu existujícímu elementu, ale místo názvu elementu uvedeme název stylu.
+
−
* Název vlastního styl uvozujeme tečkou.
+
−
 
+
−
<div class="Priklad">
+
−
Soubor se styly: styly.css
+
−
'''.'''OdbornyTermin {
+
−
    font-style: italic;
+
−
    color: lime;
+
−
}
+
−
</div>
+
−
 
+
−
; Použití stylu na vybraný text (v HTML)
+
−
* Text ohraničíme značkami <code>span</code> nebo <code>div</code>:
+
−
** <code>div</code> vytvoří samostatný odstavec z označeného textu
+
−
** <code>span</code> pouze aplikuje styl na označený text.
+
−
* V otvírací značce doplníme atribut <code>class</code> s název stylu jako hodnotou.
+
−
 
+
−
<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;
+
−
</div>
+
−
 
+
−
; Výsledek:
+
−
<div class="Priklad">
+
−
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 ===
+
−
; Seznam vlastností CSS:
+
−
* [http://www.jakpsatweb.cz/css/vlastnosti.html Jak psát web.cz &rarr; Seznam CSS vlastností]
+
−
; Učebnice:
+
−
* [http://www.tvorba-webu.cz/css/ Tvorba-webu.cz > CSS]
+
−
* [http://www.w3schools.com/css/default.asp W3Schools.com > CSS]
+
−
; Webové pomůcky &mdash; 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í a testování stránek ==
+
−
* [[Publikování stránky]]
+
−
* [[Testování webových stránek]]
+
  
 
== Praktické ==
 
== Praktické ==
Řádka 256: Řádka 156:
 
# [[Cvičení HTML 4]]
 
# [[Cvičení HTML 4]]
 
# [[Cvičení HTML 5]]
 
# [[Cvičení HTML 5]]
 +
 +
 +
== Související stránky ==
 +
* [[CSS]], [[Testování webových stránek]], [[Publikování stránky]]
  
 
== Podrobnější zdroje ==
 
== 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]>.
 
* GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <[http://www.tvorba-webu.cz http://www.tvorba-webu.cz]>.

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


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

Citováno z „http://www.mis.e-mis.cz/index.php/HTML“
Osobní nástroje
Jmenné prostory
Varianty
Akce
Výuka
Navigace
Nástroje