HTML
Z MiS
(Rozdíly mezi verzemi)
m (→Kaskádové styly (CSS): Doplněny W3Schools.com) |
(→Rozdělení stránky na oddíly: Podrobnější popis.) |
||
Řádka 98: | Řádka 98: | ||
== Rozdělení stránky na oddíly == | == 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> | ||
+ | <div id="Menu"> | ||
+ | Položka 1<br /> | ||
+ | Položka 2 | ||
+ | </div> | ||
+ | <p>Text text text...</p> | ||
+ | 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> | ||
== Publikování stránek == | == Publikování stránek == |
Verze z 29. 10. 2012, 15:40
Obsah |
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:
span
adiv
- V otvírací značce doplníme atribut
class
s 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
Rozdělení stránky na oddíly
Vlastnosti v kaskádových stylech
-
float
: plovoucí objekt: vlevo, vpravo, na středu -
width
: šířka bloku -
height
: výška bloku
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...Položka 2
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>.