HTML

Z MiS
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
m (Oprava vzhledu a kategorií...)
(Přidán příklad)
Řádka 16: Řádka 16:
 
=== Základní elementy ===
 
=== Základní elementy ===
  
−
* <code>h1, <code>h2</code>,...
+
* <code>h1</code>, <code>h2</code>,...
 
* <code>p</code>, (<code>br</code>)
 
* <code>p</code>, (<code>br</code>)
 
* <code>hr</code>
 
* <code>hr</code>
Řádka 23: Řádka 23:
 
** <code>width</code>... změna velikosti (ale skutečné rozlišení se nemění, stahuje se pořád obrázek v původní velikosti)
 
** <code>width</code>... změna velikosti (ale skutečné rozlišení se nemění, stahuje se pořád obrázek v původní velikosti)
 
** <code>alt</code>... popis obrázku, který se zobrazí po najetí myší nad obrázek, nebo když se obrázek nepodaří zobrazit
 
** <code>alt</code>... popis obrázku, který se zobrazí po najetí myší nad obrázek, nebo když se obrázek nepodaří zobrazit
−
* <code>a</code>
+
* <code>a</code>... hypertextový odkaz
 +
** <code>href</code>... URL adresa odkazu
 +
 
 +
<div class="Priklad">
 +
Příklad:
 +
&lt;h1&gt;Jižní Amerika&lt;/h1&gt;
 +
&lt;p&gt;Jižní Amerika je zajímavý &lt;a href="http<span></span>://cs.wikipedia.org/wiki/Kontinent"&gt;kontinent&lt;/a&gt;.&lt;/p&gt;
 +
&lt;p&gt;
 +
  &lt;img src="amerika.jpg" /&gt;
 +
&lt;/p&gt;
 +
</div>
  
 
=== Tabulky a seznamy ===
 
=== Tabulky a seznamy ===

Verze z 29. 10. 2012, 16:11


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

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