HTML
Z MiS
(Rozdíly mezi verzemi)
(→Základy formátování: Přidán příklad, oprava vzhledu...) |
(→Kaskádové styly (CSS): Příklad vlastního stylu, oprava vzhledu) |
||
| Řádka 38: | Řádka 38: | ||
== Kaskádové styly (CSS) == | == Kaskádové styly (CSS) == | ||
| − | + | Podrobnější materiály: http://www.tvorba-webu.cz/css/ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
=== Soubor se styly === | === Soubor se styly === | ||
| − | Do hlavičky HTML souboru (element <head>) musíme doplnit odkaz na soubor se styly: | + | Do hlavičky HTML souboru (element <code><head></code>) musíme doplnit odkaz na soubor se styly: |
<code><link rel="stylesheet" type="text/css" href="''nazev_souboru''.css" /></code> | <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>color</code>: barva textu | ||
* <code>background-color</code>: barva pozadí | * <code>background-color</code>: barva pozadí | ||
| Řádka 70: | Řádka 67: | ||
=== Vlastní styly === | === Vlastní styly === | ||
| − | * span | + | ; Označení textu, na který se aplikuje styl (v HTML) |
| − | * vlastní styl | + | * Elementy: <code>span</code> a <code>div</code> |
| + | * V otvírací značce doplníme atribut <code>class</code> s odkazem na název stylu. | ||
| + | ; Popis stylu (v CSS) | ||
| + | * vlastní styl uvozujeme tečkou. | ||
| + | |||
| + | <div class="Priklad"> | ||
| + | HTML soubor: <tt>index.html</tt> | ||
| + | <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: <tt>styl.css</tt> | ||
| + | .OdbornyTermin { | ||
| + | font-style: italic; | ||
| + | color: lime; | ||
| + | } | ||
| + | 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 === | ||
| + | * [http://www.tvorba-webu.cz/css/ Tvorba-webu.cz > CSS] | ||
| + | * 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 == | == Rozdělení stránky na oddíly == | ||
Verze z 29. 10. 2012, 15:26
Obsah[skrýt] |
HTML
Podrobnější materiály
Princip jazyka HTML
- textové soubory, doplněné o formátování
- pojmy:
- tag (značka): otvírací, zavírací
- element
- entita
- atribut
- Jak se jazyk HTML vyvíjel?
Základní elementy
- h1, h2,...
- p, (br)
- img a jeho atributy
- src... cesta k obrázku
- width... změna velikosti (ale skutečné rozlišení se nemění, stahuje se pořád obrázek v původní velikosti)
- alt... popis obrázku, který se zobrazí po najetí myší nad obrázek, nebo když se obrázek nepodaří zobrazit
- a
Tabulky a seznamy
- table, tr, td, th
- ul, ol, li
Struktura stránky
- html
- head
- body
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:
-
color: barva textu -
background-color: barva pozadí -
margin,padding: vlastnosti okrajů odstavce, obrázku atd. -
font-weight: tučné písmo -
font-style: kurzíva -
text-align: zarovnání textu (na střed, do bloku, vlevo, vpravo) -
text-indent: odsazení prvního řádku odstavce
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)
- Elementy:
spanadiv - V otvírací značce doplníme atribut
classs odkazem na název stylu.
- Popis stylu (v CSS)
- vlastní styl uvozujeme tečkou.
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
- Tvorba-webu.cz > CSS
- Somacon.com:
Rozdělení stránky na oddíly
- vlastnost float v kaskádových stylech
Publikování stránek
- Viz stánka Webhosting
Praktické
Užitečné nástroje
Časté chyby
Podrobnější zdroje
- GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <http://www.tvorba-webu.cz>.
