Číslo projektu CZ.1.07/1.5.00/34.0499
Název školy Soukromá střední odborná škola Frýdek-Místek, s.r.o.
Název Materiálu VY_32_INOVACE_87_IVT_HTML_7_nase_www
Autor Ing. Pavel BOHANES
Tematický okruh IVT_HTML
Ročník 4 Forma denní, 5 Forma dálková Datum tvorby listopad ’12
Anotace Text slouží k výuce a samostudiu, celek tvoří základy z tvorby www stránek se základy HTML a CSS obsahuje také cvičení, pro práci, úpravu www stránek, textu, tabulek. Společná kontrola činností je prováděná pomoci dataprojektoru nebo na PC.
Zdroje Ilustrace, pokud není uvedeno jinak, jsou screeny
obrazovky a jejich úprava, archiv autora a kliparty
MSOFFICE.
Úkol: IVT_HTML_7_nase_www (3 body):
Nyní si pojďme ukázat jak, vytvoříme rozdělení stránky a přidáme si hlavičku a patičku.
K tomu potřebujeme tag DIV.
Například
<div id="hlavicka">
HLAVICKA NAŠÍ STRÁNKY
</div>
HLAVICKA NAŠÍ STRÁNKY, je text který se objeví v naší hlavičce, kdežto id=“hlavicka“ je odkaz na CSS styl kde je popis jak má náš oddíl pro hlavičku vypadat.
Například
#hlavicka { width:800px;
height:100px;
background:orange;
}
Kde # znamená, že jde o odkaz, který nevede na soubor, ale na záložku, kterou aktivujeme v div pomoci id="odkaz na záložku v našem případě slovo hlavicka". A wight:800px
znamená že, naše stránka bude mít šířku hlavičky 800 bodů (px), height:100px znamená, že naše stránka bude mít výšku 100 bodů (px) a background:orange znamená, že pozadí naší stránky bude oranžová.
Analogicky si vytvoříme i patičku v naší webové stránce
<div id="pata">
ZÁPATÍ NAŠÍ STRÁNKY
</div>
Z toho plyne, že ZÁPATÍ NAŠÍ STRÁNKY je text, který se objeví v naší patičce, kdežto id=“paticka“ je odkaz na CSS styl kde je popis jak má náš oddíl pro paticku vypadat.
Například
#paticka { width:800px;
height:100px;
background:orange;
position:absolute;
top:900px;
}
Kde # znamená, že jde o odkaz, který nevede na soubor, ale na záložku, kterou aktivujeme v div pomoci id="odkaz na záložku v našem případě slovo paticka". A wight:800px
znamená že, naše stránka bude mít šířku hlavičky 800 bodů (px), height:100px znamená, že naše stránka bude mít výšku 100 bodů (px), background:orange znamená, že pozadí naší stránky bude oranžová, position:absolute je takzavané pozicování, to znamená, že určíte počáteční polohu pro váš div, top:900px nám říká, že počátek je posunut o 900px to znamená, že hlavička bude mít počátek na 600px z vrchu.
Znovu upozorňuji, že tagy div mají být v HTML souboru a zbytek má být v CSS souboru Aplikujme tyto vědomosti na naší stránku beran.html
