WIKMAN TUTORIÁLY
| HTML / CSS | PC / HW / SW | TIPY / RADY / NÁVODY | UPLOAD | GUESTBOOK | KONTAKT |
HTML / CSS - tutoriály
Zde se budu oběvovat různé ukázky, návody a tipy pro tvorbu WWW stránek ve starších verzích jazyka HTML. Časem se zde objeví i nějaké návody z oblasti HTML5, JS, jQuery atd., ale to opravdu až později. Čekal bych i nějaké Vaše tipy nebo rady, pokud tedy chcete přispívat i Vy/ty, klidně mi napište do kontaktů v návštěvní knize.
Zatím si však můžete zkusit těch pár návodů, které jsou momentálně k dispozici v tomto seznamu:
2.ČÁST
3.ČÁST
- 3.0 - Stylování a pozicování pomocí CSS
- 3.1 - Pozice v prohlížeči
- 3.2 - Začínáme stylovat - ŠÍŘKA/WIDTH
- 3.3 - Začínáme stylovat - VÝŠKA/HEIGHT
- 3.4 - Začínáme stylovat - OKRAJ/BORDER
- 3.5 - Stylování a pozicování pomocí CSS - Druhá část
- 3.6 - CSS STYL - Div Head
- 3.7 - CSS STYL - Div Obsah
- 3.8 - CSS STYL - Div Foot
- 3.9 - CSS STYL - Dvě možnosti zápisu
- 3.10 - CSS STYL - Finální podoba v souboru "style.css"
4.ČÁST
HOSTING, SERVER A EDITOR
Kritéria pro výběr hostingu by si měl každý určit sám podle vlastních potřeb. Na webu je spousta hostingů, které se liší v nabízených službách. Je na vás, zdali budete používat databáze, php nebo chcete jen prezentovat svou statickou webovou vizitku. Pokud použijete Google k vyhledání slova "HOSTING", jistě si z vybraných výsledků vyberete.
Pro náš případ však bude bohatě stačit free hosting WEBZDARMA.CZ. Dostupnost serveru, ftp klient, dostatečný úložný prostor a podpora php5 je přesně to, co budeme v následujících krocích potřebovat. Na adrese webzdarma.wz.cz se pomocí několika kliknutí zaregistrujete a vyberete si název domény a subdomény. Výběr názvu vaší stránky by měl být originální a nesmí být již obsazen (použit), tuto skutečnost však lehce zjistíte - zkrátka to nepůjde. Jakmile bude vše připraveno, zadáno a odesláno, budete informováni o příchozím E-mailu, který je nutné potvrdit. V mailu vám budou rovněž zaslány informace o heslech které jste si zadali při registraci, adresu vaší budoucí www stránky a konečně FTP přístup. Ten budeme používat pro přesun našich html souborů.
Pokud jste při registraci pustupovali úspěšně, byl vám zaslán mail, o zřízení a plné funkčnosti vaší adresy. Ta však nefunguje, protože postrádá nejnutnější soubor, tedy index.html(nebo index.htm popřípadě index.php). Soubor INDEX.HTML si vytvoříme pomocí celosvětově známého id tag editoru PSPAD. K samostatné tvorbě indexu se vrátíme později a pak jej na server nahrajeme pomocí zmiňovaného ftp klienta. Webzdarma nabízí vlastní ftp webové rozhraní pro přenos souborů (osobně bych ale hledal jinou variantu), stejně tak je ftp klient i součástí pspad editoru (ten budeme v našem případě používat). Doporučuji také použít TotalCommander. Je ideální pro přenos obrázků a na manipulaci s adresáři na serveru.
Index.html
Server jsme zprovoznili, ale adresa nám ještě zcela nefunguje, server totiž postrádá soubor "index.html" . Budeme jej proto muset vytvořit a nahrát na server. K tomuto ůčelu nám poslouží PSPAD. Jeho instalace je jednoduchá a neměli byste s ní mít potíže. Můžete samozřejmě použít i jiný editor, ale jelikož budu v PSPadu dělat tento návod, bude pro vás lepší si jej nainstalovat.
V PSPadu se po levé straně nachází panel (okno chcete-li), v jeho záložkách najdeme ikonu složky, na které je napsáno "FTP", rozklikněte ji. Ikony, které se nám nyní zobrazily zastupují funkce, které můžeme využívat pro správu našich souborů na serveru. Nás však zajímá pouze první (taková ta "zástrčka"). Klikneme na ní a rozbalíme si nabídku FTP připojení.
Zaklikneme si "Nové připojení" a poté vyplníme podle parametrů, které máme v E-mailu od zprostředkovatele hostingu. Vše uložíme a připojíme se k serveru. Pokud je vše v pořádku, rozsvítí se v bočním panelu zelená kostička a "FTP: adresa vašeho serveru" to znamená, že jsme připojeni a můžeme odesílat data.
Tak tedy k věci, v editoru si spusťte nový soubor, zobrazí se okno s různými typy souborů, my si vybereme "HTML multihighlighter". Objeví se nový soubor "Nový1.html" s hlavičkou dokumentu.
Měl by vypadat takto.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
</body>
</html>
POZNÁMKA:
V ukázce není vidět reklamní proužek u topu stránky (ve Vašem případě však ano), ktrerý je takovou malou pozorností od zprostředkovatele webového prostoru, když si opět prohlédnete index.html, zjistíte, že se do kódu přidala nová část. Jedná se právě o tuto reklamu, doporučuji celý její kód označit, vyjmout a vložit za tag </html> na konci kódu. Není nutné, aby se vám pletl do stránky, když s ní budete pracovat.
Mezi tag<title>
a
</title>
doporučuji napsat název vaší stránky ( já použiji tento:"Zde bude název vaší stránky") a mezi tag
<body>
a
</body>
bysme mohli napsat něco ve stylu :" Stránky jsou ve výstavbě". Tím bysme mohli tuto část ukončit a soubor uložit na server jako index.html. To porovedeme jednoduše, v programové nabídce PSPADU klikneme na Soubor a pak na Uložit na FTP, poté budete vyzváni k uložení souboru na váš disk. Vytvořte novou složku, kam budete postupně přidávat soubory. Tam soubor uložte pod novým názvem "index.html" a můžete si také všimnout, že se zapsal i v panelu s FTP adresářem. Nyní je vše připraveno a my můžeme nakouknout do prohlížeče (já budu používat Firefox). Pokud jste tedy použili výše uvedené příklady textů, následující stránka by měla vypadat stejně jako v této ukázce .
Tohle by do začátku mělo stačit. Jak přidat hlavičku, obsahovou část a patičku si ukážeme v dalším článku.
INDEX.HTML - Tvorba prvků stránky
Minule jsme si připravili projekt a na serveru zprovoznili index.html. Do indexu jsme úspěšně přidali název stránky a nyní se budeme indexu věnovat trochu podrobněji. Začneme s elementy, které se budou nacházet mezi tagy <body> a </body>. Tento článek bude pojednávat o tvorbě jednosloupcového layoutu pomocí divů. Stručne si vysvětlíme a vypíšeme jednotlivé části zdrojového kódu.
Obalový Div - wrapper
Takže začneme u prvního prvku - tedy u tzv. "Obalovače". Ten v sobě bude obsahovat ostatní prvky/elementy, které nám budou tvořit stránku. V druhé části článku umístíme obalovací div do středu stránky a určíme mu další vlastnosti pomocí stylů.
Nyní si však obalovací div zapíšeme do kódu. To uděláme tak, že mezi tagy <body> a </body> umístíme element "div" s třídou "obal". Pro přehlednost nebudu vypisovat celý kód i s hlavičkou dokumentu, ale jen tu část mezi tagy <body>.
Zápis bude vypadat takto :
<body><div class=”obal”></div></body>
Div head - Hlavičkový Div - Header
Další částí naší stránky bude "head", česky tedy hlavička. Funkce hlavičky je prostá, obvykle je v ní obrázek, který nějak souvisí s tématem stránky. O názvu stránky informuje hlavním nadpisem a v některých případech v ní bývá pohyblivá fotogalerie s ukázkou sortimentu. Jak už název napovídá, hlavička bude umístěna na začátku dokumentu, ale jelikož jsme si v minulém odstavci vytvořili "obalovací div", budeme muset hlavičku umístit do něj.
Zápis bude vypadat takto :
<body><div class=”obal”>
<div class=”head”></div></div></body>
Navigační Div - Menu
Pro tvorbu navigace, která bude obsahovat nejdůležitější odkazy pro orientaci na naší stránce, použijeme namísto divu jednoduchou tabulku. Tabulka má totiž možnost vytvářet stejně veliké buňky a to je pro tvorbu menu ideální. Mohli bychom sice použít div, aby nám tabulku obalil, ale je to vcelku zbytečné, proto div vynecháme. Nejdříve vložíme do tabulky somostatné buňky a těm pak přidáme odkazy. Buňek můžete mít kolik chcete, ale doporučuji myslet na délku slov, které v nich budou umístěny jako odkazy. Nejvíc bych doporučil maximálně pět buněk v menu. Při větším počtu, nebo dlouhých odkazech, se vám buňky začnou skládat pod sebe, což asi nikdo nechce.
K samotnému kódu tabulky jen ve zkratce :
<table>
- tag začátku tabulky</table>
- tag konce tabulky<tr>
- tag začátku řádku</tr>
- tag konce řádku<td>
- tag začátku buňky</td>
- tag konce buňkyStruktura tabulky pro menu o pěti odkazech :
<table class="menu"><tr><td>odkaz1</td><td>odkaz2</td><td>odkaz3</td><td>odkaz4</td><td>odkaz5</td></tr></table>Index.html bude vypadat takto :
<body><div class=”obal”><div class=”head”></div><table class=”menu”><tr><td>odkaz1</td><td>odkaz2</td><td>odkaz3</td><td>odkaz4</td><td>odkaz5</td></tr></table></div></body>
POZNÁMKA:
Tabulku (menu) jsme neobalili divem, protože to není nutné. Menu se zobrazí u vrcholu stránky, je to zapríčiněno tím, že "head" (nadřazený prvek stránky), nic neobsahuje a nemá definovanou výšku. Pokud jste postupovali správně, výsledek by měl vypadat takto.
Obsahový Div - Content
Další částí naší stránky bude "obsah". O funkci obsahu snad není ani třeba mluvit, ve zkratce jen, obrázky, texty, tabulky, fotogalerie a videa. Co v oblasti obsahu chcete mít, je jen na vás. Div "Obsah" bude umístěn za tabulkou navigace dokumentu, ale budeme jej muset také vložit do obalovače.
Zápis tedy bude vypadat takto :
<div class=”obsah”></div>A v samotném kódu pak takto :
<body><div class=”obal”><div class=”head”></div><table class=”menu”><tr><td>odkaz1</td><td>odkaz2</td><td>odkaz3</td><td>odkaz4</td><td>odkaz5</td></tr></table>
<div class=”obsah”></div>
</div></body>
POZNÁMKA:
V některých případech je dobré obalit si obsahový div, vnořením do dalšího (<div class="obalobsahu"><div class="obsah"></div></div>). Nutné to však není, ale časem, když budete s divy pracovat, zjistíte, že tento způsob nabízí spoustu jiných možností, jak nakládat s obsahovým divem. Na této stránce je použitý obsahový div, který jsem vnořil do dalších dvou, kterým jsem nastavil různou barvu okrajů. Výsledek je patrný na okrajích stránky v podobě barevně stupňovaného okraje.
Patička Stránky - Footer
Další a poslední částí naší stránky bude "patička/footer". Patička html stránky mívá nejčastěji informativní charakter. Obvykle v ní najdete odkazy na RSS zprávy, datum zprovoznění stránky/webu, autora kódu, E-mail na kontaktní osobu/webdesignera, značky o validitě CSS a HTML, různé pageranky a počítadla návštěv a podobně. My se tímto nebudeme nějak zvlášť zabývat, bude jen na vás, čím patičku dokumentu obohatíte. Patička/footer bude umístěna na konci dokumentu, ale stále se bude nacházet v obalovacím divu.
Zápis tedy bude vypadat takto :
<div class=”foot”></div>A v samotném kódu pak takto :
<body><div class=”obal”><div class=”head”></div>
<table class=”menu”><tr><td>odkaz1</td><td>odkaz2</td><td>odkaz3</td><td>odkaz4</td><td>odkaz5</td></tr></table><div class=”obsah”></div>
<div class=”foot”></div></div></body>Shrnutí
Pro pořádek vypíši kód tak aby barevně vyjádřil všechny prvky použité v HTML zápisu v dokumentu index.html.
<body>
<div class=”obal”>
......................................................... Toto je začátek "obalovacího" divu.
<div class=”head”></div>
................................................... Toto je div "head".
<table class=”menu”></table>
............................................... Toto je tabulka s navigací "menu".
<div class=”obsah”></div>
.................................................. Toto je "obsahový" div.
<div class=”foot”></div>
................................................... Toto je poslední div "foot/patka".
</div>
..................................................................... Toto je konec "obalovacího" divu.
</body>
Zakončení
Toto je základní schéma stránky. Na stránce zatím není nic vidět, kromě textu v menu, to je totiž jediný čitelný obsah. Až prvkům dodáme jednotlivý obsah (text, obrázky), situace se změní. Pokud však chcete, můžete si text doplňovat během tvoření.
V dalších částech tohoto návodu se budeme věnovat každému prvku kódu zvlášť. Budeme stylovat pomocí CSS.
Stylování a pozicování pomocí CSS
V této části si jednotlivé elementy nastylujeme pomocí CSS ( Cascadig Style Sheet). Pro možnost stylování bude nutné v PSPADu spustit nový soubor typu "Cascading Style Sheet" a uložit ho na server jako "style.css". Poté je třeba do hlavičky našeho indexu vepsat "metatag", který zajistí, že se server na náš css soubor připojí a úspěšně jej aplikuje.
Otevřeme si index.html a kamkoliv mezi tagy <head> a </head> nacházejícími se v hlavičce napíšeme následující tag :
<link rel="stylesheet" type="text/css" href="style.css">
Hlavička indexu bude vypadat následovně :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Zde bude název vaší stránky</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
</body>
</html>
POZNÁMKA:
Tímto jsme serveru napověděli, co a kde má hledat, aby byli naše prvky ve stránce vykresleny pomocí CSS. Je nutné, aby soubor css nebyl umístěn uvnitř nějaké složky, server by ho nenašel. Pokud trváte na "schování" css souboru do nějaké složky, např. "Styly", je nutné změnit i cestu k souboru v metatagu. Nahrazením odkazové cesty
href="style.css"
za
href="Styly/style.css"
tuto cestu zpřístupníte.
Prozatím si pro pořádek uděláme malou osnovu, která bude určovat, jaké vlastnosti a v jakém pořadí budeme aplikovat na dané prvky, v tomto případě pro
<html>
.
width
- šířka
height
- výška
border
- okraj
margin
- vnější okraj
padding
- vnitřní okraj
background
- barva pozadí
color
- barva textu
POZNÁMKA:
Je možné, že některé vlastnosti nebudeme muset vůbec použít, ale raději je tady vypíši. Height a width budou nespíše ty nejčastěji používané, jak v tomto návodu, tak ve vašem příštím zkoušení.
Pozice v prohlížeči
Jako první je potřeba si určit, kde na obrazovce monitoru se má obsah naší stránky vykreslovat. Existuje spousta variant. Já budu pro tento případ používat centrování na střed. Pak obalovacímu divu určíme velikost a přidáme mu okraj o velikosti jednoho pixelu (to kvůli lepší orientaci na stránce).
Jako první tedy zarovnáme stránku, pomocí selektoru "*". Zde bych jen podotkl, že pomocí tohoto selektoru nastavíte vlastnosti naprosto všem elementům na stránce, proto je lepší to v tomto případě s vlastnostmi moc nepřehánět.
Do style.css si napíšeme tento první styl :
*{
margin:0px auto;
padding:0px auto;
border:0px;
}
POZNÁMKA:
V zápisu je použito "auto", jedná se o relativní určení - automaticky dopočítá okraj. Pokud je definováno "0px" okraj se dopočítá rovnoměrně vůči
<body>
resp. obalovacímu divu, který bude mít pevně danou šířku. Zápis v souboru "style.css" uložte na server. Soubor nechte v PSPADu ještě otevřený pro další práci.
Začínáme stylovat - ŠÍŘKA/WIDTH
Jako první jsme si určili šířku. Tu můžeme definovat buď v konkrétních valutách (obvykle jsou to pixely - "px"), nebo relativně (jedná se o procenta "%"). V případě stylování šířky
<html> však použijeme procenta. Je to z toho důvodu, že nikdo nemá stejný monitor, proto využijeme možnosti zadat relativní velikost.
Náš první zápis pro
<html>
v souboru stylu (style.css) bude tento :
html{
width:100%;
}
- tímto jsme určili, že náš "html prostor" bude stoprocentně rozšířen.
POZNÁMKA:
Vřele doporučuji, používat řádkové poznámky pro lepší orientaci ve stylopisu. Ponámku uděláte jednoduše, je uzavřena mezi znaky "/*" a "*/", doporučuji vám označovat si takto každý element ve styloppisu, např takto: " /* toto bude poznámka pro obsahový div */ " . Počet poznámek není nijak omezen.
Začínáme stylovat - VÝŠKA/HEIGHT
Jako druhou vlastnost jsme si určili výšku. Tu můžeme také definovat buď v konkrétních nebo relativních hodnotách. V případě stylování výšky
<html>
však opět použijeme procenta.
Dalším zápisem určíme stoprocentní výšku :
html{
width:100%;
height:100%;
}
- tímto jsme určili, že náš "html prostor" bude stoprocentně vysoký.
Začínáme stylovat - OKRAJ/BORDER
Jelikož je potřeba si kvůli orientaci stránku opticky rozlišit, uděláme následující krok. Obalovacímu divu nastavíme šířku 800px (pixelů), výšku 500px a červený okraj o velikosti 1px. Tím se nám na čistě bílé stránce zobrazí červeně lemovaný obdélník, který bude definovat oblast Obalovacího divu a tedy prostor, ve kterém se nachází všechny ostatní prvky (head,menu,obsah a patka).
Tento zápis zvýrazní oblast Obalovacího divu :
.obal{
width: 800px;
height: 500px;
border: 1px red;
}
POZNÁMKA:
V zápisu je použita tečka před "obal", je to proto, že "
.
" je symbol, který v kaskádových stylech definuje třídu (class), kdyby jsme symbol nenapsali, vlastnost by se neaplikovala. Tento symbol budem v css psát před všechny třídy naší stránky, tedy i před "head, obsah i foot".
Soubor style.css by měl nyní vypadat takto :
*{
margin:0px auto;
padding:0px auto;
border:0px;
}
/* CSS styl pro HTML */
html{
width:100%;
height:100%;
}
/* CSS styl pro OBAL */
.obal{
width:800px;
height:500px;
border:1px solid red;
}
POZNÁMKA:
Soubor uložte na server a v prohlížeči si zadejte adresu vaší stránky. Měli byste vidět, že uprostřed monitoru se vykresluje červený obdélník, který demonstruje okraj obalového divu o šířce 800px.
Zobrazit ukázku. V ukázce jste viděli obdélník, který definuje pevnou velikost obalovacího divu a zároveň jste si mohli všimnout, že se na střed zarovnal i obsah menu. To zajistil "hvězdičkový" selektor. Takto se nyní budou chovat všechny prvky stránky, dokud jim neurčíme jinak.
V další části článku nastavíme vlastnost width a height zbývajícím částem naší stránky a jednoduchou nabídku vytvořenou pomocí tabulky nastylujeme do finální podoby. Pokračovat
Stylování a pozicování pomocí CSS - Druhá část
Minule jsme si nastavili CSS styly pro html a obalovací div. V této části se budeme věnovat zbylým částem stránky. Pro pořádek se budeme držet posloupnosti zadané ve struktuře kódu stránky. Začneme divem head a budeme pokračovat až k patičce. V následujících částech se nebudu pozastavovat u jednotlivých částech css stylů, ale ke každému divu vypíšu jeho konkrétní vlastnosti i s jejich hodnoty, případné nesrovnalosti se pokusím objasnit v poznámkách.
CSS STYL - Div Head
Popravdě, nejsem si jist, zda existuje nějaká standardní velikost pro hlavičku. Mě osobně dimenzování hlavičky moc netrápí. Obvykle nastavím výšku v průměru 150-250px / automatickou velikost pro šířku. Zkrátka, měl by to být příjemně působící obdélník. To k výšce a šířce.
width:auto;height:150px;
Jako další bychom si mohli určit okraj. Zapíšeme mu tyto hodnoty, "velikost-typ-barvu", ale velikost bude nulová. Další "okraje" budou vnější a vnitřní prostor okolo divu. Ty budou mít také nulovou hodnotu (nejsou v tomto příkladu nutné).
margin:0px;padding:0px;border:0px solid (souvislá linka) red;
Následně si hlavičku obarvíme, a tím jí i zvýrazníme na samotné stránce. V PSPadu si v horních ikonách (hned pod souborovou nabídkou), najděte ikonku s barevnými kostičkami (vyvoláte stiskem "ALT+C"). Kliknětě na vámi vybranou barvu a přepište si vedle vygenerovaný hexakód. Jako pozadí bysme mohli použít i obrázek, ale ten také není nutný.
background:#ffcc00;
Barvu textu nastavovat nebudeme.
Konečný styl pro div head :
.head{ width:auto;height:150px;margin:0px;padding:0px;border:0px solid red;background:#ffcc00;}
POZNÁMKA:
U vlastností width jsme použili hodnotu "auto"která zajistí správné vyplnění hlavičky na šířku. U vlastností margin, padding, border jsme použili nulové hodnoty, protože nepotřebujeme složitě definovat prostor, ten bude dostatečně vykreslen zabarvením pozadí. Hodnotu "auto" jsem zvolil proto, že může nastat případ, kdy budete chtít dodat padding kvůli odsazení a tato hodnota se přizpůsobí.
CSS STYL - Div Obsah
Nskýtá se více možností, jak můžete pracovat s obsahem vaší stránky. Záleží, jestli budete chtít mít stránku fixní, s pevnými rozměry a s obsahem tzv. rolovat, nebo budete-li mít nastavenou automatickou hodnotu výšku a obsahový div se bude přizpůsobovat samotnému obsahu. Osobně preferuji druhou variantu. Obvykle nastavím výšku na "auto" a šířku (tak jako u hlavičky) na hodnotu "auto". Pokud však víte, že stránka bude mít minimální obsah, můžete s klidem použít variantu s pevně danou velikostí.
width:auto;height:auto;
Zde si vlastnoti okrajů buď zkopírujeme od "head", nebo je nevyužijeme vůbec. Nulový okraj, není vlastně žádný, proto je zbytečné psát ho i v tomto případě. Já je však zkopíruji, je lepší, když jsou po ruce. Jediným okrajem, kterému určíme hodnotu je "padding", hodnotu nastavíme na "10px". Způsobí to odražení textů od okrajů obsahového bloku.
margin:0px;padding:10px;border:0px solid (souvislá linka) red;
Následně si obarvíme "obsahovou" část tak, abychom ji mohli odlišit od zvýrazněné hlavičky. "ALT+C", klikneme na barvu a přepíšme si hexakód. Jako pozadí bysme mohli použít i obrázek, ale ten do obsahové části nedoporučuji, většinou spíš dělají zle a zhoršují čitelnost textu.
background:#66cc00;
Barvu textu nastavovat nebudeme.
- Asi vás teď napadá, proč jsem vynechal styl pro navigaci. Je to proto, že styl pro navigaci bude trošku obsáhlejší a chci se mu věnovat v příští kapitole věnované speciálně menu.
Konečný styl pro div obsah :
.obsah{ width:auto;height:auto;margin:0px;padding:10px;border:0px solid red;background:#66cc00;}CSS STYL - Div Foot
Patička stránky může mít různou velikost. Záleží na webu, na kterém se nacházía jak je na webu zaplněna/využita. Výšku nastavuji na "auto", nemám do ní co dávat, a pokud do ní něco dávám, tak obvykle jednoduchý text, který je zároveň odkazem na můj osobní web. Šířku nastavíme taktéž na "auto".
width:auto;height:auto;
Jelikož hodnota vlastnosti "height" je nastavena na "auto", patička by se kolem textu obalila, proto je nutné, stejně jako u "obsahu", nastavit vnitřní okraj na hodnotu "10px", ostatní vlastnosti opět na nule.
margin:0px;padding:10px;border:0px solid (souvislá linka) red;
Zbývá si obarvit "obsahovou" část.
background:#66cc00;
Barvu textu nastavovat nebudeme.
Konečný styl pro div foot :
.foot{ width:auto;height:auto;margin:0px;padding:10px;border:0px solid red;background:#66cc00;}CSS STYL - Dvě možnosti zápisu
Pro použití na stránce jsou vhodné oba zápisy, je jen na vás, který způsob použijete, oba jsou vpodstatě stejné. Jen v kratší verzi jsou vynechány vlastnosti s nulovou hodnotou.
| Varianta dlouhého zápisu | Varianta krátkého zápisu |
.head{ |
.head{ |
width:auto; |
width:auto; |
height:150px; |
height:150px; |
margin:0px; |
background:#66cc00; |
padding:0px; |
} |
border:0px solid red; |
.obsah{ |
background:#66cc00; |
width:auto; |
} |
height:auto; |
.obsah{ |
padding:10px; |
width:auto; |
background:#66cc00; |
height:auto; |
} |
margin:0px; |
.foot{ |
padding:10px; |
width:auto; |
border:0px solid red; |
height:auto; |
background:#66cc00; |
padding:10px; |
} |
background:#66cc00; |
.foot{ |
} |
width:auto; |
|
height:auto; |
|
margin:0px; |
|
padding:10px; |
|
border:0px solid red; |
|
background:#66cc00; | |
} |
POZNÁMKA:
Pro náš příklad doporučuji použít kratší variantu, a to hned ze dvou důvodů. Za prvé, pokud jste začátečníci, bude pro vás mnohem jednodužší a pohodlnější orientovat se v menším množství kódu, a zadruhé vlastnosti s nulovou hodnotou, které jsme v zápisu vynechali si můžeme kdykoliv dopnit. Zároveň doporočuji ze zápisu smazat i ostatní nulové vlastnosti z předešlého článku.
CSS STYL - Finální podoba v souboru "style.css"
Nyní si zobrazíme finální podobu našeho stylesheetu. Vlastnosti s nulovou hodnotou jsem z ukázky odebral
Finální podoba v souboru "style.css" :
*{ margin:0px auto;padding:0px auto;}/* CSS styl pro HTML */html{width:100%;height:100%;}/* CSS styl pro OBAL */.obal{width:800px;height:500px;border:1px solid red;}/* CSS styl pro HEAD */.head{ width:auto;height:150px;background:#ffcc00;}/* CSS styl pro OBSAH */.obsah{ width:auto;height:auto;padding:10px;background:#66cc00;}/* CSS styl pro FOOT */.foot{ width:auto;height:auto;padding:10px;background:#66cc00;}
POZNÁMKA:
V ukázce je vidět žlutý obdélník v horní části stránky, ten reprezentuje hlavičku. Pod ní se nachází zatím nenastylované menu a pod ním jsou dva pruhy. Zelený pruh představuje obsahový div a žlutý patičku. jejich výška je 20px (padding:10px). Výšku 20ti pixelů mají proto, protože padding se aplikoval na všechny strany (levou, pravou, horní i dolní), tím pádem se nám horní okraj sečetl s dolním a vytvořil výšku 20px.
Jak už jsem se zmínil výše, v příští části článku se budeme soustředit jen na stylování menu. Styly přiřadíme většině prvkům, které budou v tabulce obsaženy a texty "odkaz1" apod., změníme na funkční odkazy. To vše a další se naučíme v následujícím pokračování
CSS STYL - Menu - úprava html kódu
Nyní se budeme věnovat samotnému menu. Než však začneme se stylováním, bude třeba v tabulce vytvořit funkční odkazy. Já v našem příkladu nebudu používat odkazy na konkrétní cíle, jako je například tento <a href="http://nějaká stránka.cz">odkaz1</a>, ale místo adresy odkazu zadám pouze znak "#". Takže mnou vytvořený odkaz bude sice funkční, ale nebude nikam odkazovat/směřovat. Vy si pak můžete tento znak nahradit adresou, kterou byste v odkazu chtěli mít.
Náš html kód, který máme v souboru "index.html" bude po správném upravení vypadat takto :
<table class="menu"><tr><td><a href="#">odkaz1</a></td><td><a href="#">odkaz2</a></td><td><a href="#">odkaz3</a></td><td><a href="#">odkaz4</a></td><td><a href="#">odkaz5</a></td></tr></table>
Tímto jsme si vytvořili odkazy, které sice nikam neodkazují, ale pro naší práci je tento způsob zápisu postačující. Později budeme odkazy stylovat - konkrétně pomocí selectoru
<a>.
CSS STYL - Menu - <table>
Nnejdří si nastylujeme samotnou tabulku a vlastnostem nastavíme následující hodnoty :
width:100%;
- tabulka se roztáhne na celou šířku obalovacího divu
height:auto;
- výška tabulky se zhora a zespod obalí kolem obsau její buňky, v našem případě okolo textu "ODKAZ"
text-align:center;
- nová vlastnost "text-align" a její hodnota "center" nám zajistí, že vše co se v tabulce bude nacházet, se zarovná na střed.
border-collapse: collapse;
- nová vlastnost "border-collapse" a její hodnota "collapse" nám zajistí, že všechen volný prostor v tabulce se odstraní.
background:#99ccff;
- pro vizuální odlišení nastavíme barvu pozadí
Kód pro Tabulku bude vypadat takto :
.menu {width:100%;height:auto;border:1px solid black;background:#99ccff;text-align:center;border-collapse: collapse;}CSS STYL - Menu - <tr>
Styl pro řádek tabulky, vlastnostem nastavíme následující hodnoty :
width:100%;
- řádek se roztáhne na celou šířku tabulky
height:100%;
- výška řádku vyplní výšku tabulky
border:1px solid black;
- pro vizuální odlišení nastavíme barvu okraje
background:#44ccff;
- pro vizuální odlišení nastavíme barvu pozadí
Kód pro řádek bude vypadat takto :
.menu tr{width:100%;height:auto;border:1px solid black;background:#44ccff;}CSS STYL - Menu - <td>
Styl pro buňku tabulky, vlastnostem nastavíme následující hodnoty :
width:auto;
- buňka se roztáhne na celou svou šířku
height:auto;
- buňka vyplní celou svou výšku
border:1px solid black;
- pro vizuální odlišení nastavíme barvu okraje
background:#44ccff;
- pro vizuální odlišení nastavíme barvu pozadí
Kód pro buňku bude vypadat takto :
.menu td{width:auto;height:auto;border:1px solid black;background:#44ccff;}CSS STYL - Pseudotřída - :hover
Pseudo třída a ":hover" slouží k vyvolání akce po najetí myši nad element. Zadáním vlasností do pseudotřídy ":hover" mužeme hodnoty těchto vlastností libovolně měnit. Elementu přidáme pseudotřídu tak, že ji zařadíme hned za název elementu v CSS souboru.
Například takto - ".menu td:hover{}".
background:#44ccff;
- nastavíme změnu barvy pozadí. Vložením této vlastnosti do pseudotřídy jsme zapříčinili změnu její hodnoty, kterou jsme zadali výše buňce tabulky
Kód pro :hover bude vypadat takto :
.menu td:hover{background:#ff0033;}CSS STYL - Menu - odkazy
Pro odkazy nastavíme dvě nové vlastnosti a to text-decoration a display. Vlastnost "text-decoration" s hodnotou "none" zapříčiní, že podtržení odkazů zmizí. Vlastností "display" s hodnotou "block" vytvoříme blokový element, který zajistí správnou funkci odkazů v menu.
Kód pro odkazy bude vypadat takto :
.menu a{text-decoration:none;display:block;background:#ffcc00;}
CSS STYL - finální zápis
Po přidání všech těchto výše popsaných stylů do našeho souboru "style.css", bude jeho obsah vypadat takto :
*{ margin:0px auto;padding:0px auto;}/* CSS styl pro HTML */html{width:100%;height:100%;}/* CSS styl pro OBAL */.obal{width:800px;height:500px;border:1px solid red;}/* CSS styl pro HEAD */.head{ width:auto;height:150px;background:#ffcc00;}/* CSS styl pro MENU */.menu {width:100%;height:auto;border:1px solid black;background:#99ccff;text-align:center;border-collapse: collapse;}/* CSS styl pro MENU-TR */.menu tr{width:100%;height:auto;border:1px solid black;background:#44ccff;}/* CSS styl pro MENU-TD */.menu td{width:auto;height:auto;border:1px solid black;background:#44ccff;}/* CSS styl pro TD HOVER */.menu td:hover{background:#ff0033;}/* CSS styl pro ODKAZY V MENU */.menu a{text-decoration:none;display:block;background:#ffcc00;}/* CSS styl pro OBSAH */.obsah{ width:auto;height:auto;padding:10px;background:#66cc00;}/* CSS styl pro FOOT */.foot{ width:auto;height:auto;padding:10px;background:#66cc00;}Konec
Tímto konečným zápisem stylu pro vaší stránku jste (snad) úspěšně absolvovali tento návod. Gratuluji.
Zde si můžete prohlédnout konečný výsledek. Rád bych upozornil, že dokud na stránku nedodáte obsahovou část ( text, obrázky ), a to i do patičky, nemusí se stránka zobrazovat korektně.
Existuje mnoho způsobů, jak si vylepšit vizuální podobu stránky pomocí kaskádových stylů záleží jen na vaší fantaziji. Je sice pravdou, že ne všechny internetové prohlížeče, dokáží v dnešní době zobrazit všechny vlastnosti zcela identicky, ale je ve všeobecném pvědomí, že se na tom úspěšně pracuje. Je jen otázkou času, kdy se tak stane a nám se tak do rukou dostane "nebezpečný nástroj" pro tvorbu internetových prezentací. Do této chvíle však budeme stále nuceni používat hacky, nebo tvořit webovky pouze pro dané prohlížeče. Nashledanou u příštího tutoriálu.
