HTML

Z MiS
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
(→Další zdroje: Přidána kombinace více stylů)
(Osamostatněny kaskádové styly CSS)
Řá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:
 
−
 
−
<code><link rel="stylesheet" type="text/css" href="''nazev_souboru''.css" /></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 {
 
−
  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 stylu uvozujeme tečkou.
 
−
* Název nemůže obsahovat mezeru!
 
−
 
−
<div class="Priklad">
 
−
Soubor se styly: styly.css
 
−
h1 {
 
−
    color: blue;
 
−
}
 
−
'''.'''OdbornyTermin {
 
−
    font-style: italic;
 
−
    color: blue;
 
−
}
 
−
</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;h1&gt;Obyčejný nadpis&lt;/h1&gt;
 
−
&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):
 
−
<div style="color:blue; text-size: bigger; font-weight: bold">Obyčejný nadpis</div>
 
−
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>
 
−
 
−
=== Snazší popis více stylů ===
 
−
Pokud je více stylů podobných, můžeme jejich popis kombinovat.
 
−
; Vnoření elementů
 
−
* Můžeme říci, že se vlastnosti uplatní pouze pokud je element vnořen v jiném elementu.
 
−
* Zapíšeme to tak, že napíšeme nejprve název „obalujícího“ elementu a pak název vnořeného elementu. Styl se uplatní na vnořený element.
 
−
<div class="Priklad">
 
−
V následujícím případě se velikost písma uplatní na nadpis pouze pokud je v buňce tabulky:
 
−
td h1 {
 
−
    font-size: bigger;
 
−
}
 
−
</div>
 
−
; Společný vzhled
 
−
* Můžeme nastavit vlastnosti více stylům zároveň.
 
−
* Zapíšeme to tak, že názvy stylů oddělíme čárkou.
 
−
<div class="Priklad">
 
−
V následujícím případě se ohraničení uplatní na vlastní styl <tt>.Poznamka</tt> i na elementy <tt>table</tt>:
 
−
.Poznamka, table {
 
−
    border: 1px blue;
 
−
}
 
−
</div>
 
−
* Následně můžeme ještě popis stylů doplňovat.
 
−
<div class="Priklad">
 
−
V následujícím případě se barva nastaví nadpisům úrovně 1 i&nbsp;2, ale velikost textu jen na nadpisy úrovně 1:
 
−
h1, h2 {
 
−
    color: indigo;
 
−
}
 
−
h1 {
 
−
    font-size: bigger;
 
−
}
 
−
</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>
 
  
 
== Testování a publikování stránek ==
 
== Testování a publikování stránek ==

Verze z 7. 1. 2015, 11:36


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

Podrobnější zdroje

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