HTML

Z MiS
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
(Praktické: Přidán odkaz na cvičení)
m (Přidána kategorie HTML)
Řádka 1: Řádka 1:
[[Category:VSE]][[Category:Informatika]][[Category:Internet]][[Category:CRI]]
+
[[Category:VSE]][[Category:Informatika]][[Category:Internet]][[Category:CRI]][[Category:HTML]]
  
 
== HTML ==
 
== HTML ==

Verze z 7. 10. 2013, 14:19


Obsah

HTML

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

Princip jazyka 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" />
</p>

Tabulky a seznamy

Struktura stránky

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

Označení textu, na který se aplikuje styl (v HTML)
Popis stylu (v CSS)

HTML soubor: index.html

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

CSS soubor: styl.css

.OdbornyTermin {
   font-style: italic;
   color: lime;
}

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

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

Další zdroje

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


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

Podrobnější zdroje

Osobní nástroje
Jmenné prostory
Varianty
Akce
Výuka
Navigace
Nástroje