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

Hello World!

Sākam veidot mājas lapu. Atveram index.html failu un rakstām:

<!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>
		<p>Hello World!</p>
	</body>
</html>

Šāda izskatītos pati, pati vienkāršākā lapa, kas nodrukā tekstu "Hello World!" Tas ir minimāli nepieciešamais kods, kas būtu vajadzīgs, lai nodrukātu šo vienkāršo frāzīti korekti un bez kļūdām. Šo piemēru var droši uzskatīt par paraugu jebkuras mājas lapas veidošanai! Lēnām un secībā mēģināšu paskaidrot, kas šeit ir kas.

!DOCTYPE

Nav vienas kopīgas HTML valodas. Ir vairākas šīs valodas versijas un līdz ar to vairāki standarti. Valoda laika gaitā ir attīstījusies un tikusi uzlabota, pielāgota un atkļūdota.

Pēdējā versija, pie kuras šobrīd HTML valoda ir apstājusies, ir xHTML 1.0. Daudzi noteikti protestēs, sakot, ka HTML un xHTML ir divas dažādas valodas (kas tā arī ir), tomēr, lai nejauktu jums galvu, pieturēsimies pie koncepta, ka ir viena valoda ar vairākām versijām, kur katra nākamā versija ir ar stingrākiem noteikumiem, mazāk kļūdām un korektāku izpildes secību. Šīs apmācības ietvaros tiks izmantoti xHTML 1.0 valodas standarti.

Pirmais, ko norādīsim jaunizveidotajā HTML failā, protams, būs tas, kādu valodas versiju pārlūkam izmantot, lai atšifrētu un uzzīmētu jūsu mājas lapu. Tas ir ļoti svarīgi, lai palielinātu lapas ielādes ātrumu, un reizēm pat kritiski, lai mājas lapas saturs vispār tiktu atpazīts un uzzīmēts pareizi!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>

XHTML 1.0 Transitional ir "vaļīgā" valodas versija, kas pieļauj dažas lietas, ko valodas pamatversija neļauj: novecojuši tagi, nepieņemami risinājumi, vērtības u.c. No angļu valodas "transition" ir pāreja. Tāda ir arī šīs versijas doma - veidot pāreju no vecākās valodas versijas uz jaunāko nedaudz vieglāku, pieļaujot vecākās versijas iespējas tajā pašā laikā pievienojot jaunās versijas funkcionalitāti un īpatnības. Ja ir jau kaut kādas priekšzināšanas par HTML valodu, ieteiktu sākt ar šo versiju, lai būtu vieglāk uzsākt mācīšanās procesu.

<!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">
</html>

XHTML 1.0 Strict ir valodas standarta versija, kas pret kļūdām un nepareizu kodu izturēsies ar vislielāko iespējamo bardzību: tas tiks ignorēts! Šai valodas versijai ir stingri noteikumi, no kuriem nevar atkāpties, izmantojot iepriekšējo versiju nepilnības, priekšrocības vai trūkumus. Ja ir minimālas zināšanas vai tādu vispār nav par HTML valodu, ieteiktu sākt ar šo. Tādā veidā nav iespējams iemācīties nepareizas lietas, jo, pārbaudot koda pareizību,tiks norādīts pat uz vissīkākajām kļūdām.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</html>

XHTML 1.0 Frameset ir valodas versija, kas īpaši paredzēta tā saukto freimu (neatkarīgo rāmju) izmantošanai. Tiesa, no šī kodēšanas paņēmiena (izmantojot freimus vai freimsetus) lielākā daļa profesionālo mājas lapu veidotāju izvairās, jo tam ir ļoti daudz trūkumu.

Kas attiecas uz atribūtu un tā vērtību, kas atkārtojas <html> sākuma tagā - tā ir norāde uz kopējo valodas standartu un ieteikumimiem, kā to pielietot. Šīs rindiņas atcerēties nav vajadzības; tās atkārtosies visās jūsu veidotajās lapās, un viss, kas jums ar tām parasti būs jādara, būs jāparkopē katrā lapā atkal un atkal. Arī saprast, ko katra no augstāk uzrakstītajām rindiņām nozīmē, pagaidām nav svarīgi un lielumam no jums neko nemainītu tā pat.

HTML valodas sintakse

Pirms skaidroju tālāk, vispirms vajadzētu saprast, kā vispār HTML valoda tiek pierakstīta tās pamatprincipos. Pirmais, kas jāspēj saprast, ir tas, ka mājas lapa ir viens milzīgs blāķis ar tekstu! Principā HTML valodā ir trīs veidu teksti:

  • parastais teksts jeb tas teksts, kas būs redzams jebkuram mājas lapas apmeklētājam... loģiski,
  • otrs ir hiperteksts; vienkārši izsakoties, tā ir teksta daļa, ko redz dators, saprot dators un izmanto dators, lai parādītu kaut ko, ko cilvēks ir iecerējis redzēt (piemēram, "pateikt" datoram, lai ievieto bildi), HTML valodā šadi hiperteksti tiek likti tagos (tegos, birkās, stūriekavās...) - viss, kas ierakstīts tagos, mājas lapas lasītājam tiešā veigā nebūs redzams,
  • trešais ir komentāri; šads teksts nav redzams ne mājas lapas apmeklētājam, ne datoram, tas domāts vienīgi kā piezīme mājas lapas koderim / veidotājam.

Neliels piemērs (nepilns kods ārpus konteksta):

...
<p>Hello World!</p>
<br />
<img src="attels.jpg" />
<!-- komentārs -->
...

Zilā krāsā attēloti tagi, sarkanā krāsā to atribūti (īpašibas), bet rozā krāsā - atribūtu (īpašibu) vertība. Zaļā krāsā ir komentāri, bet viss pārējais teksts, kas ir melnā krāsā un atrodas ārpus stūriekavām (jeb tagiem) ir vienkāršs teksts.

Ievērojāt, ka tagi atkārtojas ar kādu sīku izmaiņu? HTML valodā ir divu veidu tagi:

  • noslēdzamie tagi, tādi ir lielākais vairums; tos nepieciešams atvērt un pēc tam arī aizvērt ar tāda paša nosaukuma tagu, pievienojot slīpsvītru (ievērojiet pareizu virzienu) noslēdzošajam tagam; viss, kas atrodas starp šiem tagiem, tiek pakļauts šī taga īpašībām,
  • pašnoslēdzošie tagi - šie tagi parasti izpilda kādu noteiktu pašsaprotami pabeigtu darbību, piemērā šāds tags ir <br />, kas vienkārši izveido line break (tulk. no angļu val. "līnijas pārnesi") jeb jaunu rindiņu.

Centieties ievērot un atcerēties, kuri tagi ir pašnoslēdzoši, kuri nē. Jebkurā gadījumā atcerieties vienu: ja tags ir ticis atvērts, tam ir arī jāaizveras kaut kā, kaut kad!

Mājas lapas galva jeb galvene

Mājas lapas gelvene jeb <head> </head> tagos esošais nosaka mājas lapas vispārīgās īpašības. Atkārtošu piemēru un paskaidrošu sīkāk:

...
	<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>
...
  • taga <title> </title> nozīme ir loģiska (tulk. no angļu val. "nosaukums"); mājas lapas nosaukums parādās vairākās pārlūka vietās: uz palodzītes, uz cilnes (taba) un pārlūka pašā augšā,
  • tagi <meta /> glabā informāciju par ... informāciju; sākumā varbūt izklausās nedaudz ačgārni, bet meta-informācija ir informācija par informāciju; vienā mājas lapā var būt daudzi un dažādi meta tagi atkarībā no nepieciešamības;
    šeit meta tags norāda mājas lapā izmantoto valodu jeb izmantojamo simbolu kopu, darbojas līdzīgi kā iepriekš stāstīju pie failu saglabāšanas; būtībā šo rindiņu nav vajadzības izprast, tā vienkārši ir jāatceras un jāiekopē katrā lapā,
  • tagi ar nosaukumu <link /> norāda uz saistībām ar citiem failiem; īpašība rel (tulk. no angļu val. "relationship") jēga ir norādīt saistību, kāda ir starp norādīto failu un eksistējošo dokumentu, šī link rindiņa HTML dokumentā iekļauj visu meta-informāciju, kas tiks saglabāta style.css failā un definēs lapas stilu (tulk. uz angļu val. "stylesheet").

Mājas lapas galvenē var atrasties arī daudzas citas lietas, piemēram, veselas koda daļas (parasti JavaScript), dažādas īpašības, kas norāda "kičīgas" īpašības mājas lapas izskatās, bet lielākajā daļā gadījumu tās ir stipri īpatnējas lietas, kas saistītas ar konkrētās mājas lapas izveidi.

Mājas lapas ķermenis

Ja ir galva, jābūt ķermenim! Tagos <body> </body> atradīsies viss pārējais! Tieši šajā vietā top visa redzamā mājas lapas daļa. Visi teksti, tabulas, bildes... viss tiek ievietots šeit.

Mūsu mazajā piemērā tas ir teksts vienā rindkopa viena teikuma garumā. Sveika, Pasaule! Laiks papildināt mājas lapas saturu ar ko nedaudz nopietnāku...

Kā tam tagad īsti jāizskatās?

Lai sāktu kaut ko darīt, vajadzētu saprast, cik tālu esam tikuši, kas mums ir un kā mums trūkst. Viens attēls, ar kura palīdzību esmu mēģinājis izskaidrot, cik tālu esam tikuši un kam vajadzētu būt izveidotam:

Mapītes (folderus) varat veidot pēc jūsu ieskatiem, galvenais ir pašam atcerēties un saprast, kur kas būs jāliek. Es pieturēšos pie principa: visi attēli, kas būs nepieciešami mājas lapas dizaina veidošanai, ievietošu mapītē design, bet pārējos attēlus (jebkurus citus) mapītē images.