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.
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:
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,
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> <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:
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 <bdo dir="rtl"> Šis teksts parādīsies no otras puses </bdo>
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:
