Valters Celmiņš
© 2006 - 2011
Apmācība mājas lapu izveidē izmantojot xHTML 1.0 un CSS 2.1 valodas

Karkasa plānošana

Atšķirībā no daudzām citām apmācībām, kur sāk ar tekstu vai bildīšu ievietošanu lapā, es uzreiz "braukšu mežā"! Kā saka: "Jo dziļāk mežā, jo vairāk malkas!"

Bet tas ir ar nolūku. Veidojot mājas lapu, nepieciešams to darīt pareizās secībā. Vispirms jāizveido tā mājas lapas daļa, kas saturēs visu kopā, savādāk, veidojot lapu tālāk, var sanākt muļķīgas situācijas, kad daļa vai pat visa mājas lapa strukturāli ir jāpārveido! Tieši šī iemesla dēļ arī vajadzēja izveidot mājas lapas skici un pēc tam gatavās lapas izskata konceptu attēla formātā. Nu tad atgriezīsimies pie tā, kādu mēs vēlamies mājas lapu izveidot:

Mājas lapas karkasu var veidot vairākos veidos:

  • izmantojot tabulas; šī metode ir ļoti nepareiza, ja runa ir par to pielietošanu visas mājas lapas izkārtojuma veidošanā, piedevām, šī metode ir stipri novecojusi,
  • izmantojot frameset (tulk. no angļu val. "kāmju kopa") metodi; kad runāju par !DOCTYPE variācijām, jau minēju, ka šis paņēmiens nav īpaši iecienīts, it īpaši pēdējā laikā, metode pati ar sevi ir stipri novecojusi un reti kura lapa internetā vairs "dzīvo" uz šāda principa,
  • izmantojot divus; ir tāds tags <div> </div>, pēc savas būtības tas ir vienkāršs četrstūris, sektors, laukums ... rāmītis, uz šāda principa dzīvo lielākais varums mājas lapu, un šī metode arī profesionāļu vidū ir atdzīta kā visvalīdākā ("valid" tulk. no angļu val. "pareizs").

Protams, es izmantošu un stāstīšu par pēdējo metodi - izmantojot "divus". Pirms ķeramies pie kodēšanas, vispirms izdomājam, kā veidot karkasu. Parasti mājas lapas dizains pats par sevi pasaka priekšā, kā dalīt lapu. Atceroties, ka "divi" ir četrstūra formas elementi, arī mājas lapa jāsadala loģiskos četrstūros. Parasti to dara vadoties pēc satura: atdalām virsrakstu, izvēlni vai izvēlnes, galveno teksta daļu, kājeni u.t.t. mūsu gadījumā tas varētu izskatīties kaut kā ... šādi:

Mazliet par to, kādēļ es sadalīju tieši šādi:

  1. galvenais saturošais "divs", tāds kā kontēneris visam, lai saturētu visu mājas lapas saturu kopā; tā kā mājas lapa ir iecentrēta, būs vieglāk iecentrēt tikai vienu elementu (šajā gadījumā, galveno kontēnera "divu"), nevis censties centrā dabūt katru atsevišķo elementu,
  2. mājas lapas virsraksts; parasti šajā daļā atrodas kādi attēli, speciāli teksti, virsraksti, un bieži šī informācijas ir relatīvi novietota - kaut kur pa vidu, ne īsti centrā, nenoteiktā attālumā viens no otra... tāds kā bardaks, šķiet tikai loģiski šādu bardaku ierobežot un tam piešķirt savu lauciņu,
  3. izvēlne; jebkāda veida izvēlnes bieži ir ieteicams ierobežot, bet par to sīkāk stāstīšu, kad ķersimies klāt izvēlņu veidošanai,
  4. teksta sadaļa; gluži tā pat kā rakstot uz baltas lapas ieteicams ievērot kaut kādas robežas, tā pat arī šeit - tekstu norobežo atsevišķi, tam ir ne tikai estētiska jēga, bet arī tīri funkcionāla jēga, jo teksts ir pati dinamiskākā (mainīgākā) jebkuras mājas lapas daļa, un ja šī daļa ir atdalīta no visa pārējā, ar to ir vieglāk strādāt,
  5. papildus sānu josla; līdzīgi kā teksta daļu, vienkārši prasās loģiski atdalīt,
  6. kājene; bieži vairāk pilda funkcionālu nevis loģisku lomu mājas lapas dizainā, kad ķeršos klāt pie dizaina veidošanas, to varēs viegli redzēt; protams, tā ir arī ideāla vieta, kur atstāt kontaktinformāciju, autortiesības vai veidošanas gadu... vai arī visu kopā.

CSS valoda, tās sintakse

"Divs" kā elements ir ļoti vienkāršs, pat triviāls pēc savas būtības. Ja jūs pamēģinātu ievietot mājas lapā div elementu, diezgan ātri saprastu, kur ir problēma: izskatītos, ka tā tur nemaz nav! Bet ir... "Divs" ir bez rāmīša, bez izmēra, bez krāsas, principā tas ir neredzams! Tas galīgi nekam neder! Bet ja apskatītos xHTML valodas div elementa atribūtus, tādu praktiski nav - mēs nevaram HTML valodā norādīt ne izmēru, ne krāsu, ne rāmīti.

Šeit arī parādās galvenā xHTML valodas doma - pilnīgi visas īpašības norādīt CSS valodā (parasti atsevišķā failā vai failos). Tādēļ, pirms sākam veidot karkasu HTML valodā, ir jāsaprot tas, kas ir CSS valoda, kāda ir tās sintakse un kā to savienot ar HTML elementiem.

Vispirms par savienošanu ar HTML elementiem. Katram, jebkuram HTML elementam iespējams norādīt klasi un/vai identifikātoru (īpašības class un id). Tās ir pazīmes, ar kuru palīdzību iespējams identificēt un atpazīt elementus HTML valodā. Kā jau nosaukumi pasaka priekšā, klase var būt vairāku elementu grupa, kopa, kurā apvienoti vairāki elementi, bet identifikātors ir unikāls, neatkārtojams apzīmējums kādam vienam, konkrētam un lapā unikālam objektam. Mēģināšu to nodemonstrēt ar piemēra palīdzību:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Pirmā mājas lapa</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="virsraksts">Hello World!</div>
		<div class="teksts">
		   Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
		   consectetur, adipisci velit.
		</div>
		<div class="teksts">
		   Vestibulum a dolor felis, eget porttitor nibh. Phasellus et elementum mi.
		</div>
	</body>
</html>

"Divs" ar identifikātoru virsraksts lapā drīkst atkārtoties tikai vienu vienīgu reizi, bet "divi" ar klases īpašību "teskts" drīkst atkārtoties, pakļaujoties vieniem un tiem pašiem uzstādītajiem noteikumiem/īpašībām.

Ķeramies pie CSS valodas. Atcerieties, CSS valodai tika izveidots atsevišķs fails, kā arī šis fails mājas lapas galvenē tika pievienots HTML failam. Tādēļ visu CSS valodas kodu rakstīsim tikai tam paredzētajā failā (style.css) saprotot, ka brīdi, kad atveram HTML failu, tas automātiski meklē sev piesaistīto CSS failu un skatās tajā esošo informāciju un to izmanto. Neliels piemērs no CSS koda:

div#virsraksts
{
 border: 1px solid #000;
 background-color: rgb(240,240,240);
}

div.teksts
{
 border: 1px dashed #F00;
 background-color: rgb(255,236,236);
}

div#virsraksts, div.teksts
{
 width: 200px;
}

Ja paspējāt jau apskatīt paraugu pārlūkā, noteikti pamanījāt, ka beidzot sāk parādīties kaut kas interesants. Bet nu visu pēc kārtas par to, ko un kā nupat uzrakstīju CSS valodā. Pirmkārt - sintakse (tulk. uz angļu val. "sintax") jeb pieraksts. Tipiskais CSS valodas pieraksts ir sekojošs:

tags # identifikators    { īpašība : vērtība ; }
tags . klase   { īpašība : vērtība ; }

Atstarpēm un pārnesēm jaunā rindiņā CSS valodā nav īpašas nozīmes - varat veidot savu pierakstu, kāds jums patīk. Bet kas attiecas uz īpatnībām CSS sintaksē, tās stāstīšu ar laiku, jo to ir samērā daudz. Pirmā īpatnība, ko var redzēt iepriekšējā paraugā ir tā, ka vienu īpašibu kopu ir iespājams norādīt vairākiem dažādas klases un/vai identifikātoru tagiem, atdalot šos elementus ar komatu. Šajā gadījumā visiem trīs "diviem" tiek norādīts viens un tas pats platums.

Par īpašībām, ko esmu norādījis: ieteiktu vispirms izlasīt par krāsām un izmēriem, kādus izmanto CSS valodā. Ar šīm lietām sanāks strādāt ļoti daudz, līdz ar to ir ļoti svarīgi tās pilnībā saprast.

Sākam veidot reālo karkasu mājas lapai. Sāksim visu numerācijas secībā, kā tika norādīts iepriekš. Vispirms izveidosim kontēneri jeb galveno "divu", kas saturēs kopā visu lapu. Norādīsim tam tādas īpašības, lai mēs to varētu redzēt.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Pirmā mājas lapa</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="container">
			<!-- pagaidām neko iekšā neliekam -->
		</div>
	</body>
</html>
CSS

div#container
{
 width: 900px;			/* platums */
 height: 500px;			/* augstums */
 border: 1px solid black;	/* rāmītis: biezums, veids, krāsa */
 background-color: #F5F5F5;	/* fona krāsa */
}

Kāpēc es izvēlējos tieši šādus "diva" parametrus?
Platums. Lielākā daļa cilvēku pārlūko internetu ar maksimāli lielu interneta pārlūku, tas nozīmē, ka platuma ziņā tiek izmantots gandrīz viss monitors. Un šeit grēko ļoti daudzu mājas lapu izstrādātāji: mājas lapas nedrīkst veidot, vadoties pēc sava ekrāna izmēra, ir jāņem vērā dotā brīža aktuālākie mazāko (!) ekrānu izmēri. Pāris gadus atpakaļ aktuāls bija izmērs 800x600, šodien jau lielākā daļa netbūku ("netbook", tulk. no angļu val. "interneta klēpjdatori") ir ar ekrāna izšķirtspēju 1024x600. Āķis vienkārši ir faktā, ka pārlūkot mājas lapas, kas izmēru ziņā ir lielākas par ekrāna izšķirtspēju, ir daudz neparocīgāk un neērtāk nekā lapas, kas ir nesalīdzināmi šaurākas par ekrāna izšķirtspēju. Otrs faktors ir tas, ka interneta pārlūkos lapu palielināt var vienmēr (parasti to nodrošina taustiņu kombinācija Ctrl "+" vai Ctrl "peles rullītis uz augšu") un netiek pazaudēta iespēja salasīt lapas saturu, bet, samazinot mājas lapu (Ctrl "-" vai Ctrl "peles rullītis uz leju"), bieži saturs kļūst nesalasāms.
Otra galējība ir izveidot mājas lapu pilnīgi dinamisku, t.i. tādu, lai tā pielāgojas jebkādam ekrāna izmēram. Pirmkārt, tiek zaudēta kontrole pār mājas lapas uzvedību, kas pie neprognozētiem un nestandarta ekrānu izmēriem var radīt grafisko haosu jūsu lapā, otrkārt, atšķirība starp mazāko iespējamo un lielāko iespējamo monitoru tirgū ir graujoša, pat 2,5 reizes, ja salīdzina izšķirtspējas, kas liks mājas lapai izskatīties ļoti izplūdušai uz lielākiem monitoriem, padarot to nefunkcionālu.
Un pēdējā lieta - atstājiet rezervi platumam, neizmantojiet maksimālo platumu, šajā gadījumā, 1024 pikseļus. Gandrīz visos pārlūkos daļa platuma jārezervē slīdjoslai (tulk. uz angļu val. "slide bar") labajā ekrāna malā - tā taču arī aizņem savu daļu ekrāna platuma, un katrā pārlūkā, katrā operētājsistēmā šis joslas platums atšķirās par pāris pikseļiem. Atstājiet rezervi, piedomājot par šo faktu.

Augstums. Tā parsti ir problēma, kas ar laiku atrisina pati sevi, protams, ar atsevišķiem izņēmumiem. Patiesībā, augstumu parasti nedefinē; to atstāj nedefinētu vai arī norāda noklusēto izmēru: 100%. Doma ir sekojoša: lielākā daļa elementu, kam ir paredzēts kaut kāds saturs, augstumā pielāgojas saturam, t.i. jo vairāk satura būs (piemēram, teksts), jo augstāks kļūs elements. Mājas lapa pēc savas būtības ir pilnīgi dinamiska pa vertikāli. Šeit "divam" norādu izmēru tikai tāpēc, lai tu varētu redzēt, savādāk pēc noklusējuma tam augstums būs 0px, kas nozīmētu, ka mēs redzētu vienkāršu līniju. Varat pamēģināt noņemt augstuma parametru un pavērot, kā tas izskatīsies. Jebkurā gadījumā, šo īpašību ar laiku dzēsīsim ārā. Par manis nosaukto problēmu, kas saistīta ar mājas lapas augstumu, papildus varat palasīt šeit, gan jau ka kādu rezi nāksies ar šo problēmu cīnīties.

Rāmītis un fona krāsa. Arī šīs īpašības ir tikai pagaidām, lai var redzēt "divu". Kā jau iepriekš minēju, "diviem" pēc noklusējuma nav ne krāsas, ne rāmīša, tāpēc ar tiem ir grūti strādāt... jo tos vienārši neredz! Šis ir pagaidu risinājums, lai šo problēmu novērstu. Šādus knifus parasti izmanto agrīnajās mājas lapas tapšanas stadijās. Protams, ir arī citi paņēmieni, kā nodrošināt dažādu elementu redzamību, bet man šī metode patīk tādēļ, ka ne visām pārlūkprogrammām ir rīki, kas šādas iespējas nodrošina, bet šo paņēmienu atbalsta visi pārlūki. Vienkārši, bet efektīvi!

Ir vēl divas mazas, tomēr nozīmīgas problēmas, kas jāatrisina. Aplūkojiet attēlu, kur kā par piemēru ņemts mūsu topošās mājas lapas šī brīža izskats pārlūkprogrammā Google Chrome:

Abas šīs problēmas ir saistītas ar tādu īpašību kā margin (tulk. no angļu val. "robeža"). Šī īpašība nosaka jebkura elementa attālumu no citiem elementiem, tā ir tāda kā ārējā robeža, zona, kurā neviens cits elements nedrīkst ienākt.

Vispirms apskatīsim, kādēļ rodas pirmā problēma - mistiski attālumi no augšas un kreisā sāna. Teorētiski, mājas lapai vajadzētu veidoties no augšējā kreisā stūra, bet šajā gadījumā mēs redzam, ka tas tā īsti nenotiek. Tas ir saistīts ar kādu CSS valods īpatnību: CSS valodā pilnīgi visiem elementiem tiek uzstādītas visas īpašības, pat tad, ja tās vispār nav uzrakstītas, un to vērtības tiek uzdotas pēc noklusējuma jeb tā, kā pārlūkam patīk. Izmantošu vienu no Mozilla Firefox papildus aplikācijām (FireBug), lai nodemonstrētu, kā tas izskatās:

No šīs problēmas var atbrīvoties ļoti veikli. Jau domājot uz priekšu, vajadzētu novērst šādas problēmas atkārtošanos jebkuram elementam, t.i. negaidītas atstarpes un nobīdes. Toatrisina viena rindiņa CSS kodā:

*
{
 margin: 0;
}

...

Zvaigznīte CSS valodā nozīmē "visiem"; šajā gadījumā pilnīgi visiem elementiem, kas jebkad tiks uzrakstīti HTML valodā, tieks piešķirta ārējā robeža "0". Un nullei CSS valodā ir kāda īpatnība - nav vajadzības norādīt mērvienību; vai nav vienalga, kāda nulle tā ir, nulle ir un paliek nulle, lai arī kāds mērs tas nebūtu! Varētu rasties jautājums: "Bet ko tad, ja kādam elementam šo vērtību tomēr vajag savādāku?" Dators jebkuru kodu lasa no dokumeta sākuma virzienā uz beigām, kas nozīmē, ka vēlāk minētā īpašība ņems virsroku, t.i. pārrakstīs iepriekš minēto īpašību, ja tāda ir bijusi. Bet ar to nevajadzētu aizrauties un vajadzētu piedomāt pie īpašību organizēšanas, lai nenotiktu masīva īpašību pārrakstīšana.

Ir vēl kāda īpašība, kas reizēm uzvedās līdzīgi kā īpašība margin - tā ir īpašība padding (tulk. no angļu val. "polsterējums"), kas nosaka elementa iekšējo atstarpi. Šobrīd neuztrauksimies, kas tas īsti ir, vienkārši saprotot, ka šīs īpašības ir uzvedības ziņā saistītas, atzīmēsim šo īpašību tieši tā pat kā ārejo robežu:

*
{
 margin: 0;
 padding: 0;
}

...

Tagad iecentrēsim lapu. Ir vairāki paņēmieni, kā to izdarīt, bet es parādīšu korektāko tieši šai situācijai. Jāpievieno viena rindiņa mūsu CSS failā sekojoši:

* {margin: 0; padding: 0;}

div#container
{
 width: 900px;
 height: 500px;
 border: 1px solid black;
 background-color: #F5F5F5;
 margin: 0 auto;              /* iecentrēšana nav nekas vairāk kā
                                 vienādu (automātisku) attālumu 
                                 uzstādīšana no abām malām */
}

Šeit parādās vēl kāda īpašība, kas saistīta ar elementa margin vērtību norādīšanu... un ne tikai. Pirms tupināt apmācību, izlasiet visu, kas saistīts ar margin, padding un border elemetu problēmām. Šīs visas trīs īpašibas ir savā starpā cieši saistītas un ir samērā kutelīgs jautājums mājas lapu veidošanā.