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

Izvēlnes izveidošana

Ievelkam dziļi elpu - esam aptuveni pusē!

Izvēlne - tā bieži ir "kā nagla **** " ... kaut kur ... tiem, kas mājas lapas sākuši veidot no pašiem pamatiem. Tas tāpēc, ka tieši šajā vietā būs jāatceras pilnīgi viss, kas jau ir bijis - elementu tipi, "peldināšana", maliņas, rāmīši un izmēri. Tas viss būs ļoti svarīgi vissīkākajās detaļās!

Bet, pirms sāku par izvēlnēm, ir kāds sīkumiņš, kas nav pieminēts, bet ir ļoti svarīgs izvēlnēs - tās ir hipersaites. Tad nu īsumā par galvenajām lietām, kas skar hipersaites. Nedaudz pieskāršos arī teksta formatēšanai, bet tikai virspusēji.

Hipersaites jeb enkuri

Sākšu jau ar to, ka hipersaites ir tieši tās, kas ļauj ceļot no lapas uz lapu, t.i. pieprasīt ielādēt pārlūkam citu interneta lapu vai vietni. Galvenais šiet ir saprast, ka "serfošana" ir nemitīga jaunu lapu ielāde jūsu datorā: katru reizi kaut kur uzklikšķinot un nomainot mājas lapas saturu (kaut vai viena, piemēram, portāla ietvaros) tiek izdarīts pieprasījums serverim atsūtīt jaunu failu ar HTML kodu atbilstoši jūsu pieprasījumam.

Vienkāršs piemērs ar pavisam vienkāršu hipersaiti, kas piesaistīta tekstam:

HTML
...
	<body>
		<a href="http://www.google.lv">Uz meklētāju Google</a>
	</body>
...

Tags <a> </a> ("anchor", tulk. no angļu val. "enkurs") sevī ietver objektu, uz kura uzklikšķinot tiks (parasti) ielādēta jaunā, pieprasītā lapa. Šajā gadījumā, Google! Vienmēr (ar īpašiem izņēmumiem) šis tags nāk pārī ar atribūtu href ("hypertext reference", tulk. no angļu val. "hiperteksta atsauce"). Tā būtībā ir adrese, kas norāda, uz kurieni doties.

Bet nu nedaudz sīkāk. Pirmkārt - objekts! "Enkuru" var pielikt gan tekstam, gan attēlam. Parasti nekam citam "enkurus" klāt nekarina, ar atsevišķiem neparastiem izņēmumiem. Piemēram, šajā pašā mājas lapā katram piemēra attēlam ir pielikta hipersaite, uz kuras uzklikšķinot tiek atvērts papildus logs ar dabīga izmēra piemēra attēlu. Otrkārt - parasti tiek ielādēta jauna lapa! Tā ir atsauce, un atsauce var atrasties arī tajā pašā lapā. Ja tiek uzklikšķināts uz šādas atsauces, tad lapa netiks pārlādēta, bet tā vietā lapa tiks "norullēta" vai "uzrullēta" līdz vietai, kur ievietota grāmatzīme (arī enkurs, bet ar īpašu iezīmi). Piemērs:

...
	<body>
		<a href="#mark">hipersaite</a>
		<!-- kaut kur citur, tajā pašā lapā -->
		<a name="mark">mērķa objekts</a>
		<!-- Uzklikšķinot uz augstāk stāvošās hipersaites,
		        tā aizvedīs uz (piemērā) zemāk stāvošo "enkuru". -->

		<a href="http://www.google.lv#mark">hipersaite</a>
		<!-- Šī hipersaite, turpretī, aizvedīs uz citu lapu un
		        mēģinās tajā atrast attiecīgo "enkuru". -->
	</body>
...

Īpašībā href, kā jau redzējāt, var atrasties ne tikai pilna adrese, bet arī adreses daļa. bet arī šeit ir daži knifi, kurus vajadzētu piefiksēt. Adresi iespējams norādīt vairākos dažādos veidos:

  • pilnā adrese - tieša norāde uz ielādējamo lapu,
    <a href="http://www.google.lv/">hipersaite</a>

  • saknes adresēšana - tiek norādīta nepilna adrese attiecībā pret saknes failu, t.i. attiecībā pret šī brīža apskatāmo lapu,
    <a href="index.html">hipersaite</a>
    <!-- Ja tiktu apskatīta, iemēram, lapa "http://www.majaslapa.lv/bildes/lapa.html",
         tad serveris mēģinātu atrast failu index.html mapītē "bildes",
         kas atrodama pēc adreses "http://www.majaslapa.lv/" - ievērojiet failu hierarhiju!-->

  • adresēšana dziļumā - tiek norādīta nepilna adrese attiecībā pret saknes failu ar padziļinātu hierarhiju,
    <a href="bildes/lapa.html">hipersaite</a>
    <!-- Ja tiktu apskatīta, iemēram, lapa "http://www.majaslapa.lv/index.html",
         tad serveris mēģinātu atrast failu lapa.html mapītē "bildes",
         kas atrodamas pēc adreses "http://www.majaslapa.lv/bildes/lapa.html". -->

  • adresēšana atkāpjoties - tiek norādīta nepilna adrese attiecībā pret saknes failu ar atpakaļejšu hierarhiju,
    <a href="../index.html">hipersaite</a>
    <!-- Ja tiktu apskatīta, iemēram, lapa "http://www.majaslapa.lv/bildes/lapa.html",
         tad serveris mēģinātu atrast failu index.html vienu mapīti seklāk hierarhijā,
         kas būtu "http://www.majaslapa.lv/index.html". -->

  • adresēšana pēc saknes direktorijas - tiek norādīta nepilna adrese attiecībā pret mājas lapas saknes adresi; piezīmēšu, ka šis ir vienīgais adresēšanas veids, kas varētu šķietami nestrādāt, jo tās darbībai nepieciešama speciāla servera gala programmatūra, ko mēs šajā apmācībā neizmantojam, bet visos mājas lapu publiskošanas serveros šī funkcija strādās,
    <a href="/index.html">hipersaite</a>
    <!-- Apskatot jebkuru lapu, kas atrodas jebkurā mājas lapas "http://www.majaslapa.lv/"
         hierarhijas līmenī, serveris mēģinās atrast failu index.html,
         kas atrodamas pēc adreses "http://www.majaslapa.lv/index.html". -->

Hipersaites atribūtu href negrīkst nekad atstāt tukšu! Bieži, testēšanas nolūkos, ir vēlme ievietot hipersaiti kaut kur, lai tikai redzētu, kā tā izskatās. Šādos gadījumos vienmēr kā adreses atribūta vērtību jānorāda "#" jeb tukša grāmatzīme. Nerunājot par tehnisko pusi, tīri praktiski jau pats simbols vien ir samērā uzkrītošs, un, pamanot šādu simbolu kodā, viegli izsekot līdzi "pabeigtajām" un "nepabeigtajām" lietām.

Hipersaitēm ir arī vairāki papildus atribūti, tomēr ir viens, kuru es vēlētos nedaudz izcelt. (Gandrīz) katru reizi, kad tiek nospiests uz hipersaites, tiek ielādēta jauna lapa, tomēr ne vienmēr mēs vēlamies, lai lapas skatītājs pazaudē iepriekšējo saturu un to aizstāj ar jaunu. Mūsdienu pārlūkiem ir "tabi" jeb cilnes, kas ļauj vienā programmas logā apskatīt vairākas lapas uzreiz. Ir kāds atribūts, kas ļauj šo īpašību izmantot:

<a href="/index.html" target="_blank">hipersaite</a>

Ar šī atribūta palīdzību tiek panākts, ka mērķis tiks atvērts jaunā logā/cilnē, saglabājot iepriekš apskatāmās lapas saturu nemainīgu.

Pāris komentāri par šo atribūtu. Pirmkārt, no tā tomēr vajadzētu izvairīties, jo tas ir norakstīts kā novecojis, un pēc būtības xHTML 1.0 Strict versijā netiek atbalstīts. Tas tāpēc, ka tehnoloģijas nestāv uz vietas: lielākajai daļai datorpeļu ir rullītis, un nospiežot ar rullīti uz hipersaites, tiek panākts tieši tāds pats efekts. Tiek uzskatīts, ka lietotājs pats labāk zinās, kādā veidā viņš vēlas apskatīt lapas. Otrkārt, kad sāksiet "siet klāt" savai mājas lapai programmēšanas valodas, piemēram, PHP, šāda funkcija visticamāk kļūs nevajadzīga dažādu apsvērumu dēļ, bet ap to laiku jau paši sapratīsiet, kāpēc.

Hipersaites formatēšana

Pēc noklusējuma tags <a> </a> ir inline elements (ceru, atceraties, ko tas nozīmēja). Jebkurš objekts, kam "piekabināts enkurs" uzvedīsies kā teksts, ja nav norādīts savādāk. tas ļoti uzskatāmi ļauj parādīt to, ka hipersaites pēc būtības domātas tekstam. Tieši tādēļ arī pēc noklusējuma šis tags pieņems jebkādas tekstam paredzētās īpašības.

Tomēr hipersaitēm ir arī savas, īpašas un unikālas īpašības. Hipersaite ir aktīvais elements, tādēļ tas arī bieži tiek izcelts kā ... aktīvs. Uzbraucot uz hipersaites, jau reiz apmeklējot kādu lapu, apmeklēšanas brīdī hipersaites parasti maina vai var mainīt savu krāsu, formu... būtībā īpašības. Ja runa ir par īpašībām, mēs runājam par CSS valodu.

HTML
...
	<body>
		<a href="http://www.google.lv/" class="special">Uz meklētāju Google</a>
        <!-- kā jau jebkuram HTML tagam, arī šim var piešķirt klasi vai ID -->
	</body>
...
CSS
a.special         { /* kopīgās īpašibas jebkurai hipersaitei */ }
a.special:link    { /* tiek norādītas īpašības neapmeklētai saitei */ }
a.special:visited { /* īpašības apmeklētai saitei */ }
a.special:hover   { /* īpašības saitei, kad uz tās tiek uzbraukt ar kursoru */ }
a.special:active  { /* īpašības šī brīža aktīvajai saitei, t.i. saite sakrīt ar aktīvo failu */ }

Secība - tā šeit ir svarīga! Lai visas augstāk minētās īpašības normāli funkcionētu, tās jādefinē tieši šādā secībā (viena no retajā vietām, kur secība ir svarīga): :link, :visited, :hover un beigās :active. Visas iepriekš minētās ir pseido-klases. Šīs ir vienīgās četras pseido-klases, ar kurām nav problēmas IE pārlūkos, tādēļ arī par citām pseido klasēm nestāstīšu.
(Īstenībā es nestāstīšu par daudzām lietām, kas varētu būt noderīgas tikai tāpēc, ka IE tās vienkārši neatbalsta. Labāk šādas lietas neapgūt, jo problēma saglabāsies un būs jārisina tik un tā ar savādākām metodēm.)
Ne vienmēr nepieciešams minēt (definēt) visas pseido-klases un to īpašības. Bieži pietiek norādīt kopējās īpašības un populārāko :hover īpašibu kopu.


Hipersaišu adresēšanas īpatnības atkārtosies vēl pāris vietās (no kurām viena jau tika apskatīta pie dizaina griešanas). Galvenais ir saprast, kā notiek adresēšana, saprast, kā tā ir saistīta ar failu hierarhiju, kāda tiek veidota mājas lapai.