HTML

Z MiS
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
m (→Publikování a testování stránek: Oprava pořadí, podrobnější vysvětlení.)
(→Další zdroje: Přidána kombinace více stylů)
Řádka 203: Řádka 203:
  
 
</div>
 
</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 ===
 
=== Další zdroje ===

Verze z 6. 1. 2015, 14:33


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>

Kaskádové styly (CSS)

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

Soubor se styly

Do hlavičky HTML souboru (element <head>) musíme doplnit odkaz na soubor se styly: 

<link rel="stylesheet" type="text/css" href="nazev_souboru.css" />

Základny formátování

Stylu můžeme nastavovat různé vlastnosti. Jejich výčet najdete na webu, nejběžnější uvádíme:

Příklad: 

h2 {
  color: blue;
  background-color: lightblue;
  border: solid 2px blue;
  text-align: center;
}

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)

Soubor se styly: styly.css 

h1 {
   color: blue;
}
.OdbornyTermin {
   font-style: italic;
   color: blue;
}
Použití stylu na vybraný text (v HTML)

HTML soubor: index.html 

<h1>Obyčejný nadpis</h1>
<p>
  Text, ve kterém je <span class="OdbornyTermin">odborný 
  termín</span>.
  A druhý <span class="OdbornyTermin">pojem</span> je také 
  odborný termín.
</p>
Výsledek

Výsledek (v prohlížeči):

Obyčejný nadpis

Text, ve kterém je odborný termín. A druhý pojem je také odborný termín.

Snazší popis více stylů

Pokud je více stylů podobných, můžeme jejich popis kombinovat.

Vnoření elementů

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;
}
Společný vzhled

V následujícím případě se ohraničení uplatní na vlastní styl .Poznamka i na elementy table: 

.Poznamka, table { 
    border: 1px blue;
}

V následujícím případě se barva nastaví nadpisům úrovně 1 i 2, ale velikost textu jen na nadpisy úrovně 1: 

h1, h2 {
    color: indigo;
}
h1 { 
    font-size: bigger;
}


Další zdroje

Seznam vlastností CSS
Učebnice
Webové pomůcky — Somacon.com

Rozdělení stránky na oddíly

Vlastnosti v kaskádových stylech

Vlastnosti přiřazujeme speciálním stylům, uvozeným znakem #.

Na tyto styly se odkazujeme pomocí atributu id.

HTML soubor: index.html 

<div id="Menu">
  Položka 1

  Položka 2
</div>
<p>Text text text...</p>

CSS soubor: styl.css 

#Menu {
   float: left;
   width: 100px;
   background-color: yellow;
}

Výsledek (v prohlížeči):

Položka 1
Položka 2
Text text text...


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