Š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 :-).

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:

<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=Windows-1251”>

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

<HTML>
<HEAD>
 <TITLE>Virsraksts</TITLE>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=Windows-1251”>

</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ē.

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 <!-- komentārs -->

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:

<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.  - uz augšu pacelts teksts. Var noderēt, lai pierakstītu skaitli kādā pakāpē.
3.  - 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>