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 bgcolor=”green”>
<body> tagā arī varam norādīt visas lapas teksta krāsu – par to atbildīgs text atribūts:
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!!!
