V tejto časti sa dozviete všetko o formulovaní stránky do CSS a následne ju postaviť na XHTML 1.1. Nájdete tu aj základné informácie o CSS a dozviete sa tak trochu aj jeho rozšírenú syntax. Zdrojový kód stránky sa trochu prerobil od minulej časti ale v základe je to jej priame pokračovanie.

Hneď ako prvé by ste očakávali asi pokračovanie zdrojového kódu a tým pádom tvorby minulého layoutu, ktorý sme ešte nedokončili. Tak som sa rozhodol aj pokračovať. Pokračovanie nájdete v dolnej časti článku. Tu hore si povieme niečo o CSS.

CSS
CSS je veľmi výhodné používať. Jeho vlastnosti zdôrazňujú rýchly efektívny kód s malou veľkosťou na serveroch, ktorá sa pohybuje v niekoľkých kB. Obnáša ľahšiu syntax základnú ako HTML a je ľahké s ním narábať a upravovať ho. Možno trochu ťažšie pre začiatočníkov je navrhnúť ho pre každý jeden prehliadač. CSS oddeľuje štýl stránky od jej štruktúry (obsahu). Vhodná kombinácia CSS je s XHTML a to je "moderný web" o čom hovorí aj samotný seriál. Určite vás už niekedy napadlo pri písaní HTML aby ste si na stránke povedzme zmenili písmo a pod. Bolo to dosť zložité ak ste používali klasické tagy <font>. Všetko ste museli prepisovať a zabralo to pekne veľkú časť práce len so štýlmi. V CSS na to slúžia iba entity, ktoré sa zapisujú veľmi jednoducho a to v takejto podobe:

#entita

- tento zápis je braný ako "id" a taktiež ho môžete v kóde použiť iba jeden krát. Viac-násobné použitie 
môže viesť k nevalidnému kódu a to predsa nikto nechce dosiahnúť.


.entita

 - tento zápis je braný ako "class" a môžeme ho narozdiel od "id" (#entina) použiť na stránke viackrát.

Takže zápis do CSS vyzerá takto:

<div id="entita">Obsah</div>

<div class="entita">Obsah</div>

Určite by ste radi vedeli ako sa zapisujú štýly písma, jeho veľkosť, či má byť hrubé alebo tenké, modré alebo červené. Taktiež môžeme určovať linky, ktoré sme navštívili, ktoré sú práve otvorené, voľba farieb pozadia a pod. Možno si myslíte, že všetko bolo zodpovedané v minulom diele ale tak to nieje, pretože to musím aj vysvetliť.Základný zápis štýlov písma je takýto:

body {

font-family: verdana, sans-serif;

font-size: 80%;

font-weight: normal;

color: #000;

text-align: left;

background: #fff;

}

Všetko čo sme napísali je obrazom našej stránky (štýlom). Ako prvé čo je pre nás primárny cieľ je vždy písmo. Začnem od začiatku. Zápis font-family nám určuje typ písma, ktoré sme si vybrali. Písma rozdeľujeme na tvz. patkové písma a bezpatkové písma.
Príklad:
Patkove písma: "Times New Roman", Times, serif;
Bezpatkove pisma: Arial, Verdana, Tahoma, Helvetica, sans-serif;
Za každým písmom patkovým by malo malo nasledovať bezpatkové. Je podporované na každom operačnom systéme. Pokiaľ je písmo rozdelené resp. má vo svojom názve medzeri zapisujeme ho do úvodzoviek. Atribút font-size udáva veľkosť písma. Môžeme ho zadávať v percentách (%) čo je vhodnejšie, pretože pri zmene rozlíšenia písmo zosáva rovnaké. Ďalší atribút nám určuje či je písmo normálne, hrubé, kurzíve, prečiarknuté a pod. Ak zoberieme do úvahy, že si chceme zmeniť farbu písma, tak jednoducho napíšeme jeho farbu v tvare color. My sme si zvolili čiernu (#000), ale to je teraz vedľajšie. Čierna farba je defaultná farba písma všetkých prehliadačov. Nasledujúci atribút je text-align čo je zarovnanie písma. V našom prípade doľava. Posledný atribút je "background". Určuje farbu pozadia stránky. Naša farba je biela (#fff). Biela farba pozadia je aj defaultnou farbou pozadia každého prehliadača. Teraz sa trochu presuniem do XHTML ale potom opäť zabočím do CSS:

V XHTML rozlišujeme typy nadpisov a to tak, že využívame tagy h1, h2, h3, h4, h5, a h6. Je to od najväčšieho po najmenší. Tiež jedna s dôležitých vecí pre SEO. Zápis vyzerá nasledovne:

<h1>Nadpis stránky</h1>

<h2>Nadpis stránky</h2>

<h3>Nadpis stránky</h3>

<h4>Nadpis stránky</h4>

<h5>Nadpis stránky</h5>

<h6>Nadpis stránky</h6>

A toto bude efekt v kóde:

Nadpis stránky
Nadpis stránky
Nadpis stránky
Nadpis stránky
Nadpis stránky
Nadpis stránky

To by bolo asi pre XHTML a nadpisy všetko ale teraz sa vrátim znova k CSS. Zápisy sa dajú ovplyvniť v XHTML cez CSS a to nasledovným zápisom.

h1 { color: #ccc; }

Teraz sme si deklarovali a tým pádom aj zmenili nejaký tag pomocou CSS. Takto isto to platí aj pre iné tagy a nie len pre nadpisy. Výsledok posúďte sami:

Nadpis stránky

Možno sa vám zdajú takéto zmeny zbytočné ale určite verím, že ich v praxi využijete. Malý úvod do CSS sme si už spravili a teraz môžeme CSS spojiť s XHTML. CSS sa budete učiť celý seriál a nielen v tejto časti článku. Ešte by som upozornil, že sa budete CSS učiť s tým rozdielom, že bude spojené s výučbou XHTML čo určite nieje na škodu.

XHTML
Opakujem, že som sľúbil pokračovanie písania stránky v minulom kóde a tak sa do toho môžeme pustiť. Trochu si zmeníme CSS a XHTML dokumenty aby farby neboli čierne. Čierne farby som zvolil len pre ukážku. Teraz zvolím vlastný štýl :-). Toto je aktuálne CSS. Bolo doplnené a má aj prerobený kód pre prehľadnosť.

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 vidíte trochu som pozmenil aj body {} a pribudlo pár nových odsekov, dúfam, že ste sa nenaplašili :-). Chcel som aby to trochu malo aj farieb a tak som použil aj modrú farbu a zafarbil som ňou vrch a spodok stránky. Vrch stránky predstavuje entita #logo. Logu sme dali pevné rozmery, pretože sa v ňom počas prehliadania stránky nebude nič meniť. Border sme zadali len na spodnú čiaru a tým sme dostali viditeľné ohraničenie spodku #logo. Nakoniec prišlo aj background a tomu som dal tmavo-modrú farbu. Pribudol nám tu ešte #spodok a zmenil sa nám #obsah a #navigacia. Obsah sa nám zmenil v trochu širšom rozpätí. Jeho šírku sme určili v percentách a nastavili sme mu aj border na ľavú stranu. Padding je určité rozšírenie nejakého obsahu a istým spôsobom aj jeho vnorenie. Padding sme použili s dôvodu aby sme texty v obsahu nemali úplne na okraji. Float v CSS je akoby náhradou align.  Navigácii sme zadali šírku na 20% aby sa mohla prispôsobiť rovno s #obsah. Floatom sme zarovnali #navigacia-u na ľavo. Určite ste si ešte všimli aj #spodok, ktorému atribúty asi vysvetľovať nemusím ale jeden by tu aj bol. Clear:both určuje ukončenie zarovnania stránky vo všetkých smeroch. dalo by sa povedať ide aj o obtekanie stránky. Keby sme to neukončili nastalo by tzv. "rozpadnutie stránky" čo by viedlo aj k jej nepoužitiu. Posledné čo sme si zadefinovali je úprava tagu "ul". Normálne bez tejto úpravy by nám každý prehliadač vykonal posunutie o riadok alebo od okraja. Prehliadače sú v tomto odlišné. Pridali sme tam ešte aj padding: 0px aby sa nám menu "ul" zobrazovalo správne aj vo Firefoxe.

Teraz sa presunieme k samotnej definícií do kódu stránky.

<?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 stránka 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 stránky</h1>

<br />Obsah stránky.<br />

Táto stránky je generovaná pomocou kaskádových šablón CSS a pomocou dokumentov 
XHTML.<br />

Toto je príklad XHTML stránky urobenej na servery www.pabi3.com

</div>



<div id="navigacia">

<ul>

<li>Domov</li>

<li>Služby</li>

<li>Referencie</li>

<li>Kontakt</li>

</ul>

</div>



<div id="spodok">

&copy; PaBi3.com. Všetky práva vyhradené.<br />

XHTML a CSS validné stránky.

</div>



</div>



</body>



</html>

Všetky entity sú umiestnené v jednej hlavnej a to v entite(dive) #main. #Main určuje kompletnú štruktúra stránky. Jej šírku hlavne. Všetko čo sme zapísali do hlavičky už asi poznáte s minulých dielov a teraz by ste si mohli stránku už sami odskúšať aby ste videli výsledok. Prejdite ju validatorom a potom aj každým prehliadačom a zistíte, že keď je stránka validná je tu aj pravdepodobnosť úspechu v iných prehliadačoch. Myslím, že štýl stránky je dôležitejší ako samotná štruktúra a je aj omnoho jednoduchší. Ak ste pochopili CSS, tak potom štruktúra napísanej stránky zo zadefinovanými entitami v divoch už nepotrebuje bližšie vysvetlenie. Keď už teraz máme zvládnuté základy ako sformovať layout, tak by som vám oznámil, že toto je koniec dnešnej časti a v ďalšej časti sa dozviete niečo o definícií farby odkazov jej prechod myšou a mnoho ďalšieho :-).

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 30.04.2005 20:54