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.
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.
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 <input type=”text” name=”mana_teksta_forma” value=”ievadi savu tekstu šeit” size=”10”>
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.
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:
Š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:
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:
<input type="button" value="Nospied mani!!">
Forma nosūtīšana (submit) Lai nosūtītu formu uz action atribūtā norādīto adresi, veidojam šādu spiedpogu:
<input type="submit" value="Sūtīt">
Formas lauku informācijas dzēšana (reset) <input type="reset" value="Dzēst">
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.
<fieldset> <legend> 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> <input type="reset" value="Dzēst"> <input type="submit" value="Sūtīt"> </form> </fieldset>
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.
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!
