Rokasgrāmata Kā izveidot savu mājas lapu

Ievads

Šajā rakstā apskatīsim pašu vienkāršāko mājas lapu uzbūves principus. Tas nozīmē, ka mums vēl pagaidām nebūs darīšana ar datu bāzēm, mainīgajiem, kā arī vēl nevarēsim izveidot administratora sadaļu, kurā papildināt lapas informāciju. Sāksim ar to, ka iemācīsimies izvietot savā mājas lapā lapu veidojošos objektus – tekstu, bildes, tabulas u.c.

Pašu mājas lapas pamatni varam veidot kā tabulu, kas sastāv, piemēram, no divām kolonnām – pirmajā atrodas izvēlne (saraksts ar hipersaitēm), bet otrā kolonna atvēlēta attēlojamajai informācijai. Šāds būtu pašas vienkāršākās mājas lapas paraugs. Visu mājas lapas struktūru turēt vienā lielā tabulā nav labākais veids, bet ar to var izlīdzēties, sākot mācīties mājas lapu veidošanas principus.

Diemžēl ar rakstā aplūkoto materiālu būs par maz, lai izveidotu viegli programmējamu un maināmu lapu, piemēram, aplūkosim šo pašu lapu, kas sastāv no divām kolonnām.

Parasti mājas lapā ir vairākas sadaļas, un daži elementi katrā no tām var atkārtoties, piemēram, mūsu gadījumā izvēlne. Lai tā parādītos katrā mājas lapas sadaļā, kuru atvērsim, mums šis izvēlnes kods būs jāpārraksta. It kā nešķiet pārāk problemātiski – copy*paste, un lieta darīta, bet iedomājieties, ka, iespējams, kādreiz nāksies kaut ko mainīt šajā izvēlnē, piemēram, izsviest kādu mazu hipersaitīti – tad jāver vaļa katra lapa un ar roku jādzēš šī rindiņa. Tas pie mazām mājas lapām nebūs pārāk problemātiski. Bet, lai mēs tiktu pie apjomīgāku projektu izstrādes, vispirms sāksim iepazīt mājas lapu veidošanas principus no pašiem pamatiem – šeit es nedomāju mašīnkodu, bet gan valodu HTML :-).

Programmēšanas valodas

Runājot par mājas lapu izveidi, parasti iedala klienta un servera puses mājas lapas. Klienta puses mājas lapas jāsaprot tā, ka datorlietotājs atver kādu interneta lapu un viņam pa internetu tiek piesūtīts teksts, kas ir saprotams interneta pārlūkprogrammai (Internet Explorer, Firefox u.c.).

Šī pārlūkprogramma attiecīgi pārtulko šo viņai saprotamo tekstu, un lietotājs redz lapu tā, kādai tai ir jāizskatās. Pie šādām klienta puses interneta lapu programmēšanas valodām pieder HTML, JavaScript un citas.

Šis kods ir redzams arī jebkuram lietotājam. Piemēram, lai apskatītu kādas lapas kodu pārlūkprogrammā Internet Explorer ir jāatver View*Source.

Savukārt servera programmēšanas valodu (PHP) kods nav redzams interneta lapas apmeklētājiem, un visa koda apstrāde notiek uz servera (datora, uz kura tiek turēta mājas lapa).

Klienta puses vebprogrammēšanai ir kāda ļoti negatīva iezīme – dažādos interneta pārlūkos viena un tā pati lapa var izskatīties dažādi, jo katrai no tām izmantota sava sistēma klienta puses valodu saprašanai. Šīs ziepes ievārīja cīņa par vadošajām pozīcijām interneta pārlūku programmās starp Internet Explorer un Netscape interneta attīstības pirmsākumos.

Katrs ražotājs gribēja pievienot pēc iespējas unikālākas īpašības, bet sīvajā konkurencē mazliet aizmirsa par standartizāciju. Mūsdienās, manuprāt, nav par katru cenu jācenšas panākt, lai lapa nevainojami darbotos 99,9 % interneta pārlūku – galvenais ir pievērst uzmanību, lai viss strādātu uz mūsdienās visplašāk izmantotajiem pārlūkiem, t.i., Internet Explorer un Mozilla Firefox.

Kas vajadzīgs?

Pats primārais, ko parasti apgūst, mācoties veidot mājas lapas, ir HTML valoda. Ar tās palīdzību būtībā tiek pievienoti visi mājas lapas objekti (attēli, teksts utt.). Valoda ir patiešām viegla, un noteikti nav jābūt programmētājam, lai spētu tajā orientēties. Lai rakstītu HTML dokumentus, nav nepieciešams instalēt speciālu papildprogrammatūru, jo var izlīdzēties, rakstot dokumentus ar jebkuru teksta redaktoru, piemēram, Notepad, pēc tam saglabājot izveidoto failu ar paplašinājumu html, piemēram, lapa.html. Bet es noteikti ieteiktu izmantot kādu speciālu HTML redaktoru, piemēram, pats izmantoju latviešu izstrādāto HTML Pad 2005, kas ir lejupielādējams no http://www.blumentals.net/. Ar to izstrāde būs mazliet atvieglota, HTML koda atšķirīgas nozīmes elementi būs katrs savā krāsā un arī HTML tagu atribūti nebūs jāatceras no galvas. Bez maksas šī programma ir izmantojama 50 reižu, kas ir pilnīgi pietiekami vairāku mazu mājas lapu izstrādei.

HTML dokumenta struktūra

Vispirms iepazīsimies ar HTML dokumentu struktūru. Lai to uzskatamāk varētu parādīt, sākšu ar konkrētu piemēru – mājas lapā parādās tikai teksts: „Šis ir mans pirmais HTML dokuments”. HTML valodas objektu iekļaušana notiek ar tagu palīdzību. Tags parasti ir ietverts <> iekavās. Katram HTML dokumentam jāsākas <HTML> tagu un jābeidzas ar </HTML> noslēdzošo tagu. Svarīgi ievērot, ka noslēdzošajam tagam pirms taga nosaukuma ir / zīme. Tātad tagad mūsu dokuments izskatās šādi:

<HTML>

</HTML>

Tam, vai rakstām ar lielajiem vai mazajiem burtiem, nav nozīmes, jo praktiski visas mūsdienu pārlūkprogrammas neņems verā to, vai HTML kods rakstīts ar lielajiem vai mazajiem burtiem, piemēram, minētais piemērs varētu izskatīties šādi:

<hTMl>

</html>

Tālāk HTML taga iekšiene sastāv no galvenes (head) un „ķermeņa” (body) tagiem:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Standarts skaitās visus tagus un to atribūtu nosaukumus rakstīt ar lielajiem burtiem, bet tas būtībā ir gaumes jautājums.

HEAD parasti glabājas informācija par konkrēto HTML dokumentu, piemēram, tā nosaukums, saites uz kādiem ārējiem dokumentiem, savukārt BODY tiek rakstīts pats dokuments.

Lai interneta pārlūks varētu automātiski atpazīt, ka mājas lapā ir izmantoti latviešu burti, <head> tagā jāiekļauj šāda rindiņa:

Iepriekš minētais piemērs tagad izskatīsies šādi:

<HTML>

<HEAD>

<TITLE>Virsraksts</TITLE>

</HEAD>

<BODY>

Šis ir mans pirmais html dokuments

</BODY>

</HTML>

TITLE tagā iekļautais teksts parādīsies interneta pārlūka loga augšpusē, tādējādi lapas apmeklētājam norādot, kāds dokuments ir atvērts.

Nākamajā solī vairs atliek tikai saglabāt dokumentu, piemēram, lapa.html, un atvērt to ar kādu no interneta pārlūkprogrammām.

Ja līdz šim viss ir izdevies, tagad turpināsim ar konkrētu tagu aprakstu, kas iekļaujami BODY taga iekšienē.

Komentāra iekļaušana

Ja ir vajadzība pie kāda taga pievienot paskaidrojumu vai kādu citu papildinformāciju, kas netiks uzrādīta lapas apmeklētājam, apskatot jūsu lapu, to var izdarīt ar palīdzību, piemēram,

Aiz šīs rindas būs komentārs

Teksta izvietošana

Teksta izvietošanai un dažādu formatējumu panākšanai ir paredzēti vairāki tagi. Sāksim apskatu ar paragrāfa tagu <p>. Interneta lapās visbiežāk rindkopa nesākas ar mazu atkāpi no malas pirmajā tās rindā, kā tas ir ierasts, piemēram, grāmatās, bet vienu rindkopu no otras visbiežāk atdala tukša rindiņa. Ja vēlamies kādu teksta apgabalu pārveidot par rindkopu, šis teksts ir jāliek <p> tagos, piemēram,

<p>1. rindkopa</p>

<p>2. rindkopa</p>

Rindkopas nebūt nav obligāti jāliek <p> tagos, bet pēc tam varēs tām ērti piešķirt īpašības, piemēram, krāsu, burtu lielumu, stilu utt.

Viena no <p> taga labajām īpašībām ir tā, ka varam norādīt teksta rindiņu izvietojumu <p> taga iekšienē. To dara, <p> tagā iekļaujot parametru align="". Align savukārt var uzstādīt vairākas izvēles iespējas: center, left, right. Ja uzstādījums būs center, katra teksta rindiņa atradīsies tieši pa vidu rindkopas kopējam platumam, attiecīgi left un right pozicionēs visas rindiņas kreisajai vai labajai pusei.

Piemērs:

<p align=”center”>1. rindkopa rindiņas pozīcija ir center</p>

Parasti, rakstot teksta dokumentus, esam pieraduši, ka pēc ENTER taustiņa nospiešanas mēs varam sākt rakstīt jaunā rindā. Ar HTML tā nevarēs darīt, jo visas veicamās darbības ir jāuzrāda ar konkrētiem tagiem. Tātad, ja gribam, lai teksts aiz kādas konkrētas vietas atrastos jaunā rindiņā, šajā vietā jāievieto <br> tags.

Šī ir pirmā rindiņa<br>

Un tagad atrodamies jau jaunā rindiņā<br>

Un mums nav <br>jaraksta<br>katra<br>jauna<br>rindiņa<br>jaunā<br>rindā<br>jo visu izdara br tags!

<br> tagus var likt arī vairākus pēc kārtas, tādējādi panākot tukšas rindiņas.

Iekļaujot <hr> tagu, izveidosim tekstā horizontālo līniju, kas varētu noderēt, lai atdalītu dažādu tēmu tekstu vienu no otra.

Tad droši vien būs arī nepieciešams kādas teksta daļas burtus padarīt treknākus, pasvītrot vai norādīt slīpraksta (Italic) stilā. Treknākus burtus padara <b> tags (<b>teksts</b>), pasvītrojums panākams ar <u> (<u>teksts</u>), bet slīpraksta stils ar <i> (<i>teksts</i>).

Lai izceltu virsrakstus, var izmantot kādu no virsraksta tagiem. Pavisam ir pieejami seši virsrakstu tagi: <h1>;<h2>;<h3>;<h4>;<h5>;<h6>. Jo mazāku virsraksta tagu izmanto (tagu, kuram mazāks skaitlis aiz h), jo virsraksta burti būs lielāki un treknāki, piemēram,

<h1>Virsraksts</h1>

dos vislielāko virsrakstu, savukārt, uzrakstot

<h6>Mazais virsraksts</h6>

iegūsim virsrakstu salīdzinoši ar <h1> tagu maziem burtiem.

Variējot virsrakstu tagus, ērti varam izcelt galvenos virsrakstus ar lieliem burtiem, savukārt apakšvirsrakstiem piešķirt mazāku burtu izskatu, piemēram:

<h1>Galvenais virsraksts</h1>

<h2>Apakšvirsraksts nr.1</h2>

<p>teksts<p>

<h2>Apakšvirsraksts nr.2</h2>

<h3>Apakšvirsraksta nr.2 apakšvirsraksts</h3>

<p>teksts<p>

<h2>Apakšvirsraksts nr.3</h2>

Daži tagi, ko izmanto noteikta teksta formatēšanai:

1. <code></code> - lieto, lai izceltu programmēšanas koda fragmentus. <code></code> iekļautā teksta fonta stils būs Courier View.

2. <sup></sup> - uz augšu pacelts teksts. Var noderēt, lai pierakstītu skaitli kādā pakāpē.

3. <sub></sub> - tagā iekļautais teksts būs kā indekss.

4. <strike></strike> - teksts būs pārsvītrots ar vienu svītru.

Teksta spoguļattēls

Šis teksts parādīsies no otras puses

</bdo>

Burtu krāsa, izmērs un stils

Virsrakstam, kā arī parastā teksta izcelšanai noteikti ir būtiski mainīt teksta krāsu. Katrai krāsai ir iepriekš noteikts kods, kas kodā ir jāiekļauj. Tā, piemēram, dzeltenajai krāsai atbilst kods #ffff00, bet zaļajai - #00ff00. Informāciju par krāsu kodējumu var atrast <a href=”http://www.pitt.edu/~nisg/cis/web/cgi/rgb.html”>šajā</a> lapā.

Burtu krāsas, izmēra un stila maiņai var izmantot <font> tagu. Visus uzstādījumus <font></font> iekļautajam tekstam uzstāda ar <font> parametriem:

1. color=”krāsas kods” – krāsa

2. face=”burta stils” – norāda burtu stilu. Internetā visbiežāk tiek izmantots Arial vai Verdana stils. Norādot kādus eksotiskus stilus, vajag padomāt, vai tas tiešām ir nepieciešams, jo ne uz visiem datoriem visi burtu stili ir instalēti un var gadīties, ka jūsu mājas lapa, aplūkota citā datorā, izskatās nepavisam tā kā jūsu datorā.

3. size=”skaitlis” – burtu izmērs

Tagad atkal pievērsīsimies konkrētam piemēram. Pieņemsim, ka vēlamies, lai kāds teikums būtu sarkanā krāsā, ar Arial burtu stilu un ar 10 pikseļu burtu izmēru. Katrai krāsai nebūt nav jāmeklē atbilstošais kods. Ja ir zināms konkrētās krāsas nosaukums angļu valodā, tad koda vietā var rakstīt to. Iepriekš minētajā kodu lapā ir arī doti krāsu angliskie nosaukumi, bet jāiegaumē tas, ka krāsu nosaukumus, kas sastāv no vairāk nekā viena vārda, ir jāraksta kopā, piemēram, krāsas nosaukums „dark slate grey” pie color parametra jāraksta „DarkSlateGrey”.

<font color=”red” face=”Arial” size=”10”> Šis teikums būs sarkanā krāsa, Arial burtu stilā un ar izmēru 10!</font>

Krāsu var norādīt arī kā sarkanās, zaļās un zilās krāsas (RGB krāsu modelis) kombināciju:

color=”rgb(0,0,0)” – šos trīs skaitļus var patvaļīgi mainīt no 0-255!

Atcerieties, ka visi HTML tagi ir iekļaujami viens otrā, piemēram, ja šis pats teikums ir nepieciešams arī ar treknākiem burtiem un slīprakstā, to var izdarīt, iekš vai ārpus fonta taga iekļaujot <b> un <i> tagus:

<font color=”red” face=”Arial” size=”10”><b><i>Šis teikums būs sarkanā krāsa, Arial burtu stilā un ar izmēru 10!</i></b></font>

Visai būtiski, veidojot šādas tagu kombinācijas, ir atcerēties to, ka tags, kas bija pirmais atverošais, aizverošais būs pēdējais. Iepriekš redzējām arī to, ka <font> bija pirmais pirms <b><i>, bet </font> bija pēdējais pēc </i></b>. Lielākajā daļā mūsdienu interneta pārlūku lapa strādās arī tad, ja šī struktūra netiks ievērota, bet noteikti labāk ieteiktu turēties pie standarta, jo tas arī uzlabos koda pārskatāmību.

Lapas fona, teksta krāsa

Lai visas lapas fons būtu kādā noteiktā krāsā, <body> tagā iekļaujam bgcolor parametru, tam norādot vēlamo krāsu, kādā no trīs atļautajiem krāsu pierakstīšanas veidiem, piemēram:

<body> tagā arī varam norādīt visas lapas teksta krāsu – par to atbildīgs text atribūts:

Saraksti

Ar html tagiem iemācīsimies veidot divus sarakstu tipus – numurētos un nenumurētos sarakstus.

Ja gribam, lai uzskaitījums būtu numurēts, jārīkojas šādi:

<ol>

</ol>

Tātad <ol> taga ietvaros tiek iekļauts viens, noteikts saraksts, kur katrā <li> tagā ir konkrēts saraksta elements ar kartas skaitli priekšā. Šis piemērs mums dos:

1. nr1

2. nr2

3. nr3

Nenumurētajiem sarakstiem princips ir tas pats, tikai <ol> taga vietā lietosim <ul>! Iepriekšējo piemēru pārrakstot nenumurētajā sarakstā, HTML kods izskatīsies šādi:

<ul>

</ul>

Rezultātā iegūstam:

* nr1

* nr2

* nr3

Vairāku līmeņu saraksti

Reāli praksē ir gadījumi, kad katram saraksta elementam jāraksta arī apakšuzskaitījums. To varam panākt, attiecīgajā vietā iekļaujot vēl vienu <ul> vai <ol> tagu, piemēram,

<ol>

<ol>

<ol>

</ol>

</ol>

<ul> un <ol> sarakstus varam kombinēt visdažādākajos veidos, piemēram, kādam <ol> sarakstam, kāda apakšaraksta elementu uzskaitījumu veikt ar <ul> sarakstu!

Lai uzskatamāk parādītu saraksta apakšlīmeņus, varam arī norādīt stilu, kādā tiks uzskaitīti saraksta elementi, piemēram, uzskaiti veikt ar romiešu cipariem vai ar burtiem. <ol> tagam varam norādīt šādus tipus (tipa atribūts ir type):

A – lielie burti;

a - mazie burti;

I – romiešu cipari;

i – romiešu cipari (maziem burtiem).

<ul> saraksta tagad varam norādīt šādus tipus:

disc

circle

square

</ul>

Definētie saraksti

Iedomājieties, ka jūs gribat vienā rindiņā uzrakstīt kādu vārdu un tad nākamajā ar smuku atkāpi no malas vārda skaidrojumu, tad atkal vārds un atkal ar tādu pašu atkāpi vārda skaidrojums utt. Ar HTML tas ir izdarāms, un tos sauc par definētajiem sarakstiem:

<dl>

<dt>dators</dt>

<dd>

Elektroniskā datu apstrādes iekārta

</dd>

<dt>kalkulators </dt>

<dd>

Skaitļotājierīce, kas automātiski izpilda atsevišķas matemātiskas operācijas ar manuāli ievadītiem skaitļiem; mazizmēru kalkulatorus sauc par mikrokalkulatoriem

</dd>

</dl>

Tabulu veidošana

Vienu tabulu ieskauj <table> tags. Tabulas sastāv no rindām un kolonnām. Rindu iekļauj ar <tr> tagu, savukārt kolonnu ar <td>. Jāiegaumē, ka <td> tagiem ir jābūt <tr> taga iekšienē un viens pats <tr> tags bez <td> neveidos rindu, jo, neiekļaujot nevienu <td> tagu, tas nozīmēs, ka rindas kolonnu skaits ir 0. Vispirms uzrakstīsim tabulu ar vienu rindu, kurā ir viena kolonna:

<table>

<tr>

<td>

</td>

</tr>

</table>

Kad tas ir izdarīts, <td> tagā varam rakstīt mums vajadzīgo informāciju, kā arī iekļaut jaunas tabulas. Apskatot šo lapu, droši vien nekādas izmaiņas netiks pamanītas, tāpēc, lai redzētu tabulas izskatu, varam iekļaut BORDER atribūtu:

Norādot, ka border=”0” tabulas robežu rādīšana tiks atslēgta, savukārt palielinot šo parametru, tabulas robežas līnijas kļūs resnākas.

Tālāk, kā jau normālā tabulā, droši vien vēlēsimies iekļaut vairākas rindas un vienā rindā vairākas kolonnas. Iekļaujot rindā vairākas kolonnas, vienkārši <tr> taga iekšienē rakstām vairākus <td> tagus pēc kārtas, t.i.

<tr>

<td>

Kolonna nr1

</td>

<td>

Kolonna nr2

</td>

<td>

Kolonna nr3

</td>

</tr>

Līdzīgi rīkojamies ar rindām, tikai šeit rakstām vairākus <tr> tagus pēc kārtas (atcerieties, ka viens pats <tr> bez <td> nebūs nekas!!!):

<tr>

<td>

Rinda nr1

</td>

<td>

Rinda nr1

</td>

</tr>

<tr>

<td>

Rinda nr2

</td>

</tr>

<tr>

<td>

Rinda nr3

</td>

</tr>

Līdz šim izveidotās tabulas ir pārlieku vienkāršas. Parasti darīšana ir ar krietni vien sarežģītākas struktūras tabulām. Lai skaidrošana būtu uzskatāmāka, apskatīsim konkrētu piemēru – mums ir jāizveido tabula, kuras pirmā rindiņa sastāv no tabulas virsraksta un vienas kolonnas, savukārt otrajā rindiņā doti tabulas kolonnu virsraksti un šajā un turpmākās rindās ir jau 3 kolonnas. Rindu paskaidrojošie nosaukumi atrodas katras rindas pirmajā kolonnā. Vēl arī 2. un 3. rindas pirmās kolonnas ir apvienotas kopā kā viena vesela. Sākam darbu ar pašu pamatu, ko jau esam iemācījušies – izveidojam sākotnēji pirmo rindu, kurā būs viena kolonna. Lai nebūtu virsraksts jāliek <b> tagos, <td> vietā varam izmantot <th> tagu, kas ļaus izveidot tekstu ar treknākiem burtiem:

<table>

<tr>

<th>

Tabulas virsraksts

</th>

</tr>

</table>

Tik tālu viss iet spīdoši, bet problēmas sākas, kad liekam klāt nākamo rindu, kurā ir trīs kolonnas. Tabulas virsraksts pirmajā kolonnā ir otrās rindas pirmās kolonnas platumā. Šo problēmu atrisināt varam ar colspan atribūtu, ko liekam <th> tagā. Colspan atribūtā norāda, par cik kolonnām tiks iztiepts attiecīgais lauks, kurā šīs atribūts tiek iekļauts. Šajā gadījumā mums vajag izstiept lauku pa trīs kolonnām, tad HTML tabulas kods izskatās šādi:

<tr>

Tabulas virsraksts

</th>

</tr>

<tr>

<td>

1. kolonna

</td>

<td>

2. kolonna

</td>

<td>

3. kolonna

</td>

</tr>

</table>

Ja tabulas lauku gribam izstiept vairāku rindu garumā, tad jālieto rowspan atribūts. Vienkāršs piemērs:

<tr>

Tabulas virsraksts

</th>

</tr>

<tr>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

Tabula tabulā

Ir situācijas, kad ar colspan un rowspan atribūtiem ir par maz, lai izveidotu patiešām sarežģītas struktūras tabulu. Tad var izlīdzēties ar jaunas tabulas iekļaušanu ķēdē jau esošas tabulas laukā. Piemērā dota tabula ar vienu rindu, kurā ir divas kolonnas - iekļaujam jaunu tabulu pirmajā kolonnā:

<body>

<tr>

<td>

<tr>

<td>

Jaunā tabula

</td>

</tr>

</table>

</td>

<td>

2.kolonna

</td>

</tr>

</table>

Piemērā redzams, ka jaunu tabulas vietu izvēlamies starp <td> un </td>, un jauno tabulu veidojam tāpat kā iepriekš.

Citi tabulu atribūti

Vēl pie <table> taga atribūtiem var noderēt cellspacing un cellpadding. Cellpading tiek norādīta atstarpe no tabulas lauka robežas līdz laukā iekļautajai informācijai, savukārt cellspacing tiek norādīta atstarpe starp blakus esošajām tabulas šūnām:

Vēl varam norādīt arī tabulas pozīciju. To dara ar align parametru (center, right, left).

Uzrakstot

panāksim, ka tabulas novietojums būs lapas vidū.

Lai tabula izskatītos vizuāli pievilcīgāka, varam arī norādīt tās platuma izmēru, piemēram,

<table width=”200”> - tabulas platums būs 200 pikseļi.

Platuma mērvienības var norādīt arī procentos, piemēram, ja gribam noteikt, ka tabulas izmērs būs 50% platumā no visas lapas izmēra, tad rakstām:

<td> taga atribūti

Pie katra <td> taga arī varam norādīt vairākus atribūtus. Svarīgākie no tiem:

bgcolor – fona krāsa;

width – platums;

valign – vertikāla informācijas pozicionēšana (top, middle, bottom, baseline);

align – informācijas novietojums šūnā (left, center, right)

Hipersaites

Būtībā visu interneta lapu pamatā ir pārslēgšanās starp lapām. Pārslēgšanos starp lapām nodrošina hipersaites. Par hipersaiti var izveidot jebko – tekstu, attēlu, pat veselu tabulu. Hipersaites iekļaušana notiek ar <a> tagu. Svarīgākais <a> atribūts ir href – ceļš, uz kuru ved hipersaite, piemēram, izveidojam tekstu „Tu pašlaik lasi rigarulle.lv interneta lapu”. Lai izveidotu rigarulle.lv par hipersaiti, jārīkojas sekojoši:

Tu pašlaik lasi <a href=”http://www.rigarulle.lv”>rigarulle.lv</a> interneta lapu.

Tagad „rigarulle.lv” ir hipersaite un, uzspiežot uz tās, atvērsies šī lapa. Ja href tiek iekļauts ceļš uz kādu interneta lapu, noteikti nedrīkst aizmirst pierakstīt adreses sākumā http://, jo pretējā gadījumā interneta pārlūks nesapratīs, ka hipersaite ir interneta lapa!!!

E-pasts kā hipersaite

Droši vien esat pamanījuši, ka ir lapas, kur, nospiežot uz kāda e-pasta hipersaites, atveras e-pasta programma (Outlook Express vai cita), kuras adrešu lauciņā ir jau ievietota konkrētā e-pasta adrese. Ja ir sajūta, ka tavai mājas lapai arī kaut ko tamlīdzīgu noteikti vajag, tad:

<a href=mailto:adrese@pasts.lv>Mana e-pasta adrese</a>

Fails kā hipersaite

Tā kā visa jūsu mājas lapa visticamāk būs veidota no vairākiem html failiem, tad būs nepieciešamība caur hipersaitēm pārslēgties no viena HTML dokumenta uz citu – tātad jāiekļauj hipersaite uz failu. Pieņemsim, ka esam atvēruši failu index.html, kurā rakstām hipersaiti. Mums vajag atvērt failu “hipersaite.html”. Ja “hipersaite.html” fails atrodas tajā pašā mapē, tad vienkārši rakstām:

<a href=”hipersaite.html”>Atveram hipersaiti!</a>

Ja hipersaite atrodas kādā apakšdirektorijā, piemēram, „faili”, tad href parametrā rakstam ceļu uz šo failu pieminot visas direktorijas, direktoriju atdalot vienu no otras ar „/” zīmi:

<a href=”/faili/hipersaite.html”>Atveram hipersaiti!</a>

vai

<a href=”apaksirektorija1/apaksirektorija2/apaksirektorija3/hipersaite.html”>Atveram hipersaiti!</a>

Lai nokļūtu līdz failam, dažkārt ir nepieciešams kāpties atpakaļ direktoriju sistēmā, tad rakstām „..”:

<a href=”../faili/hipersaite.html”>Atveram hipersaiti!</a>

Norādot ceļu, varam arī izmantot pilnu pierakstu, sākot ar to, uz kura diska fails atrodas, līdz pat vietai direktoriju hierarhijā. Piemēram, ja fails “lapa.html” atrodas C:/dokumenti/web/lapa.html, tad href parametrā varam to rakstīt. Tas gan nav pārāk labs veids: ja mēs pārvietojam mapi „dokumenti” uz citu disku (piemēram, D), tad šis ceļš vairs nestrādās!

Norādot ceļu uz failu precīzi jāievēro visi lielie un mazie burti, pat failu paplašinājumā, piemēram, ja fails ir Bilde.JPG, tad nevaram rakstīt bilde.jpg, esot pārliecināti, ka hipersaite pēc tam strādās korekti!!!

Bildes iekļaušana

Reti kura mājas lapa mūsdienās ir iedomājama bez attēliem. Attēlu iekļaujam ar <img> tagu, src atribūtā norādot ceļu uz attēlu:

Atribūti:

Border – varam ievietot bildi dažāda platuma rāmjos;

Height – bildes augstums;

Width – bildes platums;

Alt – informācija par bildi, kas parādās, kad ar peles kursoru esam uzbraukuši uz attēla.

Piemērs:

<img> tagu varam arī aptvert ar hipersaites tagiem - <a><img></a>, tādējādi padarot attēlu par hipersaiti, kas parasti arī tiek darīts, kad lapas navigācijas sistēma ir īstenota ar pogām, kas ir parasti attēli.

Src atribūtā var rakstīt arī hipersaiti uz attēlu kādā jau eksistējošā interneta lapā, tikai tad ir jāzina precīzi, zem kādas mapes tā atrodas datorā, uz kura mājas lapa ir izvietota:

Nevajadzētu lietot reizē width un height parametrus. Lietojot width, bilde tiks samazināta līdz noteiktam platumam (augstums tiks pielāgots automātiski), savukārt height ierobežos bildi augstumā (platums tiks pielāgots jaunam augstuma parametram automātiski). Savukārt, ja lietosim gan height un width parametrus reizē, varam iegūt augstumā vai platumā nedabīgi izstieptu bildi! Nav ieteicams bildei likt augstākus platuma vai augstuma parametrus nekā oriģinālajam attēlam, jo tad attēls visticamāk būs nekvalitatīvs (graudains). Vēl viena kļūda, kas ir ļoti plaši izplatīta tieši Latvijas lapās, ir lapā ievietot milzīgus attēla failus (>1MB) un tad mākslīgi samazināt to ar kādu no šiem abiem <img> parametriem – pirmkārt, šādi samazinot lielus attēlus, attēls arī var izskatīties nekvalitatīvs, otrkārt, attēla lielums tādējādi nesamazināsies un tāpat apmeklētajām būs jāgaida, kamēr ielādēsies viss lielais fails. Tāpēc, ja negribat, lai jūsu mājas lapu apmeklētājs ar lēnu interneta pieslēgumu neaizvērtu jūsu lapu, pat īsti neapskatījis, attēli ir jāsamazina jau iepriekš kādā no attēlu apstrādes programmām – es personīgi iesaku ACDSee. Internetā nav nepieciešamības ievietot apjomīgos BMP vai vēl ļaunāk - PNG failus. Pietiks ar JPG attēlu kvalitāti vai attēlos, kuros nav īpaši vairāk par 256 krāsām – GIF formāta attēliem. Saglabājot ACDSee attēlu apstrādes programmā JPG formātā, optimālais (starp failu izmēru un kvalitāti) kvalitātes uzstādījums ir 75%. Turpat arī būs iespēja samazināt attēla izmēru (ar Resize rīku).

Fona bilde

Lai kāda bilde būtu visas lapas fonā, atliek vien <body> tagā iekļaut atribūtu background un tajā norādīt ceļu uz bildi:

Ja fona attēls būs mazāks par lapas izmēru, attēls atkārtosies tik reižu, cik būs nepieciešams, lai aizpildītu visu lapas fonu.

Formas

No formām statiskā HTML lapā (bez JavaScript un PHP izmantošanas) vēl nebūs reāla labuma. Tomēr, ja ir vēlme turpināt apgūt mājas lapu programmēšanas tehnoloģijas, bez tām neiztikt, tāpēc ir vērts iemācīties tās veidot.

Vienu formu kopu ietver <form> tags. Parasti form tagā norāda atribūtu method, kas ir formas nosūtīšanas veids. Ja method ir GET, tad forma tiks nosūtīta caur adresi – formās ievadītā informācija būs kā pielikums. To var izmantot, ja formas nav pārlieku lielas, jo tā nu ir sanācis, ka URL adreses garums nav neierobežoti liels. Savukārt ar POST metodi sūtot, informācija tiks nodota caur mainīgajiem. Otrs svarīgākais atribūts <form> tagā būs action. Šeit norādām hipersaiti, uz kuru lapu tālākai apstrādei tiks sūtīta formā ievadītā informācija.

</form>

Ja tik tālu viss ir skaidrs, varam ķerties klāt konkrētām formām. Vēl pieminēšu, ka ir būtiski pie katras formas norādīt parametru name, lai pēc tam varētu atpazīt, kādi dati, kādā formā tika ievadīti. Otrs parametrs, kas nosaka formas tipu, ir type.

Teksta forma

Value atribūta informācija parādīsies uzreiz pēc lapas atvēršanas. Ja nav nepieciešamības, šo atribūtu var neiekļaut. Size norādām teksta lauka garumu.

Paroles lauks

Ievadītā informācija paroles laukā nebūs redzama!

Paplašināta teksta forma (textarea)

<textarea rows=”10” cols=”10”>Teksts, kas parādās katru reizi. Ja gribi, lai forma būtu tukša, starp šiem tagiem neraksti neko!!!</textarea>

Ar rows un cols tiek norādīts teksta lauka lielums!

Radio pogas

Radio pogas izmanto, kad ir no kāda saraksta jāizdara tieši viena izvēle. Ja vienā formā norādām vairākas atšķirīgu tipu radio pogas, tad tām ir jābūt ar dažādiem name nosaukumiem, savukārt viena tipa radio pogām - ar vienu un to pašu name nosaukumu.

<input type=”radio” name=”izvele” checked value=”nr1”> Izvēle nr 1<br>

<input type=”radio” name=”izvele” value=”nr2”> Izvēle nr 2<br>

<input type=”radio” name=”izvele” value=”nr3”> Izvēle nr 3

Value atribūtā norādām katrai izvēlei savu identifikatoru. Ierakstot kādā no input tagiem checked, mēs norādām, ka šī radio poga būs iezīmēta, atverot lapu.

Izvēles rūtiņas (Checkbox)

Lieto, kad no vairākām izvēlēm var izvēlēties vairākus variantus.

Atzīmē, kuras atbildes ir pareizās:<br>

<input type=”checkbox” name=”var1”>1. atbilde<br>

<input type=”checkbox” name=”var2”>2. atbilde<br>

<input type=”checkbox” name=”var3”>3. atbilde<br>

Šeit jau redzam, ka name nav vienāds! Arī šeit varējām izmantot checked atribūtu, lai iezīmētu rūtiņas, kuras būs atzīmētas uzreiz pēc lapas atvēršanas.

Izkrītošais saraksts (dropdown list)

Vēl viens paņēmiens, kā izvēlēties vienu no izvēlēm:

<option value=”fiat”>Fiat

<option value=”audi”>Audi

<option value=”honda”>Honda

</select>

Šeit, lai noteiktu noklusēto izvēli, ir option tagā jāraksta parametrs SELECTED!!! Varam arī Select tagā norādīt atribūtu size, kas noteiks, cik ieraksti formā tiks attēloti vienlaicīgi. Ja gribam pieļaut, ka no saraksta uzreiz var izvēlēties vairākus elementus, tad select tagā jāiekļauj atribūts MULTIPLE – pēc tam lapas apmeklētājs, turot nospiest CTRL taustiņu, varēs iezīmēt vairākus elementus:

<option value=”fiat”>Fiat

<option value=”audi”>Audi

<option value=”honda”>Honda

</select>

Spiedpoga (Button)

Ar spiedpogām varēs darīt daudz un dažādu brīnumlietu, ja izdomāsi apgūt tādu lietu, ka JavaScript – un tas būs vien jādara, ja ir vēlme savu mājas lapu padarīt vizuāli interesantāku un dinamiskāku. Bet nu pagaidām iemācīsimies tikai kā tās uztaisīt:

Forma nosūtīšana (submit)

Lai nosūtītu formu uz action atribūtā norādīto adresi, veidojam šādu spiedpogu:

Formas lauku informācijas dzēšana (reset)

Visa <form></form> tagā atrodošos formu ievdītā informācija tiks dzēsta, nospiežot šo pogu!

Ievietojam visus formu laukus smukā rāmīti (fieldset)

Viens no populārākajiem formu stila elementiem ir fieldset – iežogojam viena tipa un nozīmes formu kopu.

Informācija par formām:

</legend>

<form>

Teksta lauks 1 <input type="text"><br>

Teksta lauks 2 <input type="text"><br>

Teksta lauks 3 <input type="text"><br>

</form>

</fieldset>

Lapa, kas sastāv no kadriem (frame)

Ideja par kadriem ir tāda, ka vienā lapā vienlaicīgi tiek atvērti vairāki dokumenti (lapas), nodrošinot to vienlaicīgu aplūkošanu. Šis ir viens no vienkāršākajiem veidiem, kā izveidot mājas lapas navigāciju – vienā kadrā atrodas visas hipersaites uz mājas lapas lapaspusēm, savukārt otrajā kadrā atveras lapaspuses.

Vertikālie kadri

<html>

</frameset>

<html>

Kā redzam, veidojot kadrus, neliekam <body> tagu!!!

<frameset> taga parametrā norādām kadru izmērus – var norādīt arī platumu pikseļos, t.i., rakstot bez % zīmes!

Horizontālie kadri

<html>

</frameset>

</html>

Šeit mainījās tikai <frameset> atribūts – cols vietā rakstām rows!

Pēc noklusēšanas kadru izmērus ir iespējams mainīt. Lai to aizliegtu, rakstām <frame> atribūtu noresize

Vertikālo un horizontālo kadru apvienojums

Dotajā piemērā no sākuma izveidojam divus horizontālos kadrus un tad vietā, kur būtu jāraksta otrais <frame> tags, liekam <frameset> tagu ar atribūtu cols, tādējādi norādot, ka šeit tiks veidoti vertikālie kadri.

<html>

</frameset>

</html>

Pa ekrānu slīdošais teksts

Kaut kā īpaša izcelšanai var izmantot slīdošo tekstu. Iekļaujot tekstu vai citu objektu <marquee> tagos, šis objekts pārvietosies no kreisās uz labo pusi. Ar direction atribūtu varam arī norādīt pretējo objekta pārvietošanās virzienu:

Pārvietošanās stilu varam pakoriģēt ar behaviour atribūtu – tā iespējamās opcijas ir scroll, slide, alternate. Par objekta pārvietošanās ātrumu atbildīgs ir scrolldelay atribūts – jo lielāku skaitli tajā ierakstīsim, jo lēnāk objekts pārvietosies. Šis skaitlis izteikts aiztures laiku milisekundēs, tātad, ja gribam, lai objekts pavirzītos uz priekšu ik pēc sekundes, tad rakstām scrolldelay=”1000”.

Vel daži <marquee> atribūti:

Loop – cik reizes teksts pārvietosies pa ekrānu;

Scrollamount – pārvietošanas attālums;

Bfcolor – fona krāsa;

Width – objekta pārvietošanas laukuma platums

Fona skaņas iekļaušana

Droši vien ir nācies nokļūt kādā interneta lapā, kuru atverot sāk skanēt fona mūzika. Var apgalvot, ka mājas lapu izstrādātāji šādi apgrūtina savas lapas aplūkošanu, piemēram, ja apmeklētājs klausās mūziku un, atverot mājas lapu, paralēli sāk kaut kas skanēt, tad visdrīzāk datorlietotājs izdarīs izvēli, kas varētu arī būt jūsu lapas aizvēršana. Ja tomēr nepārliecināju par fona skaņas iekļaušanas nepraktiskumu un ir jums pārliecība, ka visiem lapas apmeklētājiem jādzird šī unikālā fona mūzika/troksnis, tad <head> apgabalā ir jāiekļauj <gbsound> tags. Parametrā src norādām ceļu uz skaņas failu, bet loop parametrā jāieraksta skaitlis, kas norāda, cik reižu atkārtot failu. Ierakstot INFINITY, atkārtošana būs tik ilga, kamēr tiks aizvērta konkrētā lapa:

Mājas lapas izvietošana internetā

Latvijā ir vairāki pakalpojumu sniedzēji, kas piedāvā bez maksas izvietot savu mājas lapu, bet tad jārēķinās, ka adreses nosaukumā būs ietverts arī šī pakalpojuma sniedzēja vārds. Bezmaksas mājas lapu izvietošanu piedāvā, piemēram, www.home.lv, www.times.lv u.c.

Ja ir vēlēšanās, lai mājas lapas nosaukums būtu tāds, kā jūs vēlaties, tad būs nepieciešama domēna reģistrācija, kas NAV bezmaksas! Par šādu pakalpojumu sniedzējiem Latvijā var pameklēt informāciju www.google.lv, ierakstot meklēšanā frāzi domēna reģistrācija WWW lapu izvietošana.

Nobeigums

Esam iepazinušies ar pašām minimālākajām zināšanām mājas lapu izveidē. Ar to varētu pietikt vienkāršas mājas lapas izveidei, kaut gan būs zināmi ierobežojumi dizaina veidošanā. Raugoties profesionālākas mājas lapas izveides virzienā, būs jālūko vismaz pēc vārdiem CSS, JavaScript, PHP, MySQL – ar CSS atvieglojot mājas lapas dizaina izveidi, ar JavaScript padarot mājas lapu dinamiskāku (dažādi izlecošie, lidojošie paziņojumi, logi, bildes, formā ievadīto datu pārbaude, izkrītošās izvēlnes un daudz, daudz citu īpašību), un ar PHP un MySQL piesaistot mājas lapai datu bāzi, tādējādi attēlojot informāciju no tās.