Hned ako prve by ste ocakavali asi pokracovanie zdrojoveho kodu a tym padom tvorby minuleho layoutu, ktory sme este nedokoncili. Tak som sa rozhodol aj pokracovat. Pokracovanie najdete v dolnej casti clanku. Tu hore si povieme nieco o CSS. CSS CSS je velmi vyhodne pouzivat. Jeho vlastnosti zdoraznuju rychly efektivny kod s malou velkostou na serveroch, ktora sa pohybuje v niekolkych kB. Obnasa lahsiu syntax zakladnu ako HTML a je lahke s nim narabat a upravovat ho. Mozno trochu tazsie pre zaciatocnikov je navrhnut ho pre kazdy jeden prehliadac. CSS oddeluje styl stranky od jej struktury (obsahu). Vhodna kombinacia CSS je s XHTML a to je "moderny web" o com hovori aj samotny serial. Urcite vas uz niekedy napadlo pri pisani HTML aby ste si na stranke povedzme zmenili pismo a pod. Bolo to dost zlozite ak ste pouzivali klasicke tagy <font>. Vsetko ste museli prepisovat a zabralo to pekne velku cast prace len so stylmi. V CSS na to sluzia iba entity, ktore sa zapisuju velmi jednoducho a to v takejto podobe: #entita - tento zapis je brany ako "id" a taktiez ho mozete v kode pouzit iba jeden krat. Viac-nasobne pouzitie moze viest k nevalidnemu kodu a to predsa nikto nechce dosiahnut. .entita - tento zapis je brany ako "class" a mozeme ho narozdiel od "id" (#entina) pouzit na stranke viackrat. Takze zapis do CSS vyzera takto: <div id="entita">Obsah</div> <div class="entita">Obsah</div> Urcite by ste radi vedeli ako sa zapisuju styly pisma, jeho velkost, ci ma byt hrube alebo tenke, modre alebo cervene. Taktiez mozeme urcovat linky, ktore sme navstivili, ktore su prave otvorene, volba farieb pozadia a pod. Mozno si myslite, ze vsetko bolo zodpovedane v minulom diele ale tak to nieje, pretoze to musim aj vysvetlit.Zakladny zapis stylov pisma je takyto: body { font-family: verdana, sans-serif; font-size: 80%; font-weight: normal; color: #000; text-align: left; background: #fff; } Vsetko co sme napisali je obrazom nasej stranky (stylom). Ako prve co je pre nas primarny ciel je vzdy pismo. Zacnem od zaciatku. Zapis font-family nam urcuje typ pisma, ktore sme si vybrali. Pisma rozdelujeme na tvz. patkove pisma a bezpatkove pisma. Priklad: Patkove pisma: "Times New Roman", Times, serif; Bezpatkove pisma: Arial, Verdana, Tahoma, Helvetica, sans-serif; Za kazdym pismom patkovym by malo malo nasledovat bezpatkove. Je podporovane na kazdom operacnom systeme. Pokial je pismo rozdelene resp. ma vo svojom nazve medzeri zapisujeme ho do uvodzoviek. Atribut font-size udava velkost pisma. Mozeme ho zadavat v percentach (%) co je vhodnejsie, pretoze pri zmene rozlisenia pismo zosava rovnake. Dalsi atribut nam urcuje ci je pismo normalne, hrube, kurzive, preciarknute a pod. Ak zoberieme do uvahy, ze si chceme zmenit farbu pisma, tak jednoducho napiseme jeho farbu v tvare color. My sme si zvolili ciernu (#000), ale to je teraz vedlajsie. Cierna farba je defaultna farba pisma vsetkych prehliadacov. Nasledujuci atribut je text-align co je zarovnanie pisma. V nasom pripade dolava. Posledny atribut je "background". Urcuje farbu pozadia stranky. Nasa farba je biela (#fff). Biela farba pozadia je aj defaultnou farbou pozadia kazdeho prehliadaca. Teraz sa trochu presuniem do XHTML ale potom opat zabocim do CSS: V XHTML rozlisujeme typy nadpisov a to tak, ze vyuzivame tagy h1, h2, h3, h4, h5, a h6. Je to od najvacsieho po najmensi. Tiez jedna s dolezitych veci pre SEO. Zapis vyzera nasledovne: <h1>Nadpis stranky</h1> <h2>Nadpis stranky</h2> <h3>Nadpis stranky</h3> <h4>Nadpis stranky</h4> <h5>Nadpis stranky</h5> <h6>Nadpis stranky</h6> A toto bude efekt v kode: Nadpis stranky Nadpis stranky Nadpis stranky Nadpis stranky Nadpis stranky Nadpis stranky To by bolo asi pre XHTML a nadpisy vsetko ale teraz sa vratim znova k CSS. Zapisy sa daju ovplyvnit v XHTML cez CSS a to nasledovnym zapisom. h1 { color: #ccc; } Teraz sme si deklarovali a tym padom aj zmenili nejaky tag pomocou CSS. Takto isto to plati aj pre ine tagy a nie len pre nadpisy. Vysledok posudte sami: Nadpis stranky Mozno sa vam zdaju taketo zmeny zbytocne ale urcite verim, ze ich v praxi vyuzijete. Maly uvod do CSS sme si uz spravili a teraz mozeme CSS spojit s XHTML. CSS sa budete ucit cely serial a nielen v tejto casti clanku. Este by som upozornil, ze sa budete CSS ucit s tym rozdielom, ze bude spojene s vyucbou XHTML co urcite nieje na skodu. XHTML Opakujem, ze som slubil pokracovanie pisania stranky v minulom kode a tak sa do toho mozeme pustit. Trochu si zmenime CSS a XHTML dokumenty aby farby neboli cierne. Cierne farby som zvolil len pre ukazku. Teraz zvolim vlastny styl :-). Toto je aktualne CSS. Bolo doplnene a ma aj prerobeny kod pre prehladnost. body { font-family: verdana, sans-serif; font-size: 80%; font-weight: normal; color: #000; text-align: center; background: #fff; } #main { width: 770px; margin: auto; text-align: left; border: 1px solid #000; } #logo { height: 100px; border-bottom: 1px solid #000; background: #526F91; } #obsah { width: 79%; border-left: 1px solid #000; padding: 3px; float: right; } #navigacia { width: 20%; float: left; } #spodok { height: 30px; border-top: 1px solid #000; text-align: center; color: #fff; background: #526F91; clear: both; } ul { margin-top: 2px; margin-left: 20px; padding: 0px; } Ako vidite trochu som pozmenil aj body {} a pribudlo par novych odsekov, dufam, ze ste sa nenaplasili :-). Chcel som aby to trochu malo aj farieb a tak som pouzil aj modru farbu a zafarbil som nou vrch a spodok stranky. Vrch stranky predstavuje entita #logo. Logu sme dali pevne rozmery, pretoze sa v nom pocas prehliadania stranky nebude nic menit. Border sme zadali len na spodnu ciaru a tym sme dostali viditelne ohranicenie spodku #logo. Nakoniec prislo aj background a tomu som dal tmavo-modru farbu. Pribudol nam tu este #spodok a zmenil sa nam #obsah a #navigacia. Obsah sa nam zmenil v trochu sirsom rozpati. Jeho sirku sme urcili v percentach a nastavili sme mu aj border na lavu stranu. Padding je urcite rozsirenie nejakeho obsahu a istym sposobom aj jeho vnorenie. Padding sme pouzili s dovodu aby sme texty v obsahu nemali uplne na okraji. Float v CSS je akoby nahradou align. Navigacii sme zadali sirku na 20% aby sa mohla prisposobit rovno s #obsah. Floatom sme zarovnali #navigacia-u na lavo. Urcite ste si este vsimli aj #spodok, ktoremu atributy asi vysvetlovat nemusim ale jeden by tu aj bol. Clear:both urcuje ukoncenie zarovnania stranky vo vsetkych smeroch. dalo by sa povedat ide aj o obtekanie stranky. Keby sme to neukoncili nastalo by tzv. "rozpadnutie stranky" co by viedlo aj k jej nepouzitiu. Posledne co sme si zadefinovali je uprava tagu "ul". Normalne bez tejto upravy by nam kazdy prehliadac vykonal posunutie o riadok alebo od okraja. Prehliadace su v tomto odlisne. Pridali sme tam este aj padding: 0px aby sa nam menu "ul" zobrazovalo spravne aj vo Firefoxe.Teraz sa presunieme k samotnej definicii do kodu stranky. <?xml version="1.0" encoding="ISO-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="robots" content="follow, all" /> <meta name="author" content="www.PaBi3.com" /> <meta name="Keywords" content="XHTML, CSS, PaBi3" /> <meta name="description" content="Toto je stranka v XHTML, ktora vyuziva kaskadove sablony CSS." /> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> <title>Nadpis stranky v XHTML</title> </head> <body> <div id="main"> <div id="logo"> </div> <div id="obsah"> <h1>Nadpis stranky</h1> <br />Obsah stranky.<br /> Tato stranky je generovana pomocou kaskadovych sablon CSS a pomocou dokumentov XHTML.<br /> Toto je priklad XHTML stranky urobenej na servery www.pabi3.com </div> <div id="navigacia"> <ul> <li>Domov</li> <li>Sluzby</li> <li>Referencie</li> <li>Kontakt</li> </ul> </div> <div id="spodok"> © PaBi3.com. Vsetky prava vyhradene.<br /> XHTML a CSS validne stranky. </div> </div> </body> </html> Vsetky entity su umiestnene v jednej hlavnej a to v entite(dive) #main. #Main urcuje kompletnu struktura stranky. Jej sirku hlavne. Vsetko co sme zapisali do hlavicky uz asi poznate s minulych dielov a teraz by ste si mohli stranku uz sami odskusat aby ste videli vysledok. Prejdite ju validatorom a potom aj kazdym prehliadacom a zistite, ze ked je stranka validna je tu aj pravdepodobnost uspechu v inych prehliadacoch. Myslim, ze styl stranky je dolezitejsi ako samotna struktura a je aj omnoho jednoduchsi. Ak ste pochopili CSS, tak potom struktura napisanej stranky zo zadefinovanymi entitami v divoch uz nepotrebuje blizsie vysvetlenie. Ked uz teraz mame zvladnute zaklady ako sformovat layout, tak by som vam oznamil, ze toto je koniec dnesnej casti a v dalsej casti sa dozviete nieco o definicii farby odkazov jej prechod mysou a mnoho dalsieho :-).

XHTML a CSS, 3.diel Návrat

XHTML a CSS, 3.diel

Speak introduction
Speak full