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> <li>nr1</li> <li>nr2</li> <li>nr3</li> </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> <li>nr1</li> <li>nr2</li> <li>nr3</li> </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> <li>nr1</li> <li>nr2</li> <ol> <li>2.1</li> <li>2.2</li> <ol> <li>2.2.1</li> <li>2.2.2</li> </ol> </ol> <li>nr3</li> </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
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>
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: <table border=”1”> 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.
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:
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: <table border="1"> <tr> <th colspan="3"> 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: <table border="1"> <tr> <th colspan="3"> Tabulas virsraksts </th> </tr> <tr> <td rowspan="2"> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> a </td> <td> b </td> </tr> </table>
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> <table border="1"> <tr> <td> <table border="1"> <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 <table align=”center”> 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:
<table width=”50%”>
<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:
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:
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!!!
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:
<img src=”bildes/bilde.jpg”>
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 src=”/img/mani_atteli/bilde.jpg” width=”300” src=”Šis ir mans attēls”>
<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:
<body background=”bilde.jpg”>
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.
