top of page

HTML

 No sākuma uzraksti <!DOCTYPEhtml> savā editorā. Es lietoju Notepad ++ (var ielādēt no

notepad-plus-plus.org (pilnīgi bezmaksas)). Šis tev jāuzraksta, lai nepārkāptu gramatikas noteikumus(sintaksu), kas katrā(cilvēku un datoru) valodā ir savs.   

Pārliecinies, ka tu lieto HTML valodu. Tālāk uzraksti <html> un pēc tam </html>.  Tie ir tagi. Īstenībā visu, kas sākas ar <tavs kods> un beidas ar </tavs kods> sauc par tagiem. Bet ne visās valodās ir šādi. Piemēram JavaScript nekas nav jāliek starp <    >.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Man liekas, ka tu jau sen esi pamanījis, ka tev ir galva un ķermenis. Bet izrādās, ka arī lapām internetā ir galva un ķermenis. Piemērs galvai:

 

 

 

 

 

Piemērs ķermenim:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Kas sanāk saliekot galvu un ķermeni? Cilvēks! Un iedomājies cilvēku - Tā kauli ir HTML, bet kas kaulus padara skaistus? Āda, kosmētika un tādas lietas. Kas varētu būt kosmētika priekš HTML? CSS! Kas tas par zvēru? Nu, par to tu uzzināsi vēlāk.

Turpinām par galvu. Kā to izdarīt savā editorā? Tu neticēsi, bet to var izdarīt ar tagu <head> un </head>!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

       

 

Kam tā galva vajadzīga? Tā satur svarīgu informāciju par lapu, piemēram nosaukumu, kuru var redzēt uz cilnes (angliski-Tab). Manā gadījumā nosaukums ir Kodu skola. Izveido <title> un </title> tagus!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Tagad par ķermeni-tas ir viss šis uzrakstītais, uzzīmētais, uzmeistarotais un tā tālāk. Lai izveidotu ķermeni, uzraksti <body> un </body> .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Lai tu saprastu, ko es no tevis gribu, iemācīšu vienu no pamata terminiem - elements. Elements izskatās šādi: <atvērts tags> + tavs saturs + </aizvērts tags>. Un tagad iemācīšu vēl vienu lietu par tagu atvēršanu/aizvēršanu. Ievēro šo principu: <pirmais tags><otrais tags> Tavs teksts<otrais tags><pirmais tags>.

 

Ja tu tagad nospiedīsi palaist un izvēlēsies savu interneta pārlūku nekas nebūs redzams. Tāpēc, ka nekas nav uzrakstīts ķermenī. Izmainīsim situāciju! Uzraksti <p> un </p>, svarīgi lai tas ir starp <body> un </body>. Tas p burts ir paragrāfs. Tur ir jāraksta teksts. Šī ir tava lapa, vari raksīt ko gribi!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ja tu tagad atvērsi šo failu ar savu interneta pārlūkprogrammu tu redzēsi savu uzrakstīto tekstu. Izskatās garlaicīgi, bet mēs drīz mācīsimies par CSS. Ir pilnīgi iespējams, ka tavs editors nesaprot latviešu valodu. Tāpēc pārliecinies, ka tu lieto UTF-8 kodējumu. Bet lai tagad varētu jau tagad uzfrišināt tavu tekstu, varam iemācīties par virsrakstiem. Tie ir 6 dažādi:

<h1> - Boss

<h2> - VicePrezidents

<h3> - Dažu lietu direktors

<h4> - Parasts darbinieks

<h5> - Zems asistents

<h6> - Atnes visiem kafiju par brīvu

Izveido pirmos 3 virsrakstus! 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Arī mūsu kafijas pienesējs grib būt pamanīts. Izveido pārējos 3 virsrakstus!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Saglabā un atver ar interneta pārlūkprogrammu. Lieliski! Tagad tu vari salīdzināt visus virsrakstus un un parasto paragrāfu. Nu labi teksts ir teksts. Bet bilde - viena tāda pasaka 1000 vārdus. Tad kāpēc rakstīt, ja var ielikt bildes? Tad labi, es tev iemācīšu, kā ielikt bildi. Dari to šādi: <img src="attēla adrese"/> . Attēla var dabūt ar peles labo klikšķi un izvēloties [Kopēt attēla URL] . 

 

Šis ir  viens no retajiem tagiem, kas pats aizveras. Tas nozīmē, ka beigās nav jāliek </img>.

Piemērs dzīvē:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Un tagad rezultāts:  /bungu skaņa/

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Lieliski! Tagad tu vari pamēģināt uztaisīt pats savu

 

lapu! Turpinājums sekos...(divas līnijas zemāk)

Jauki! Bet vai tu esi pamanījis, ka no tavas lapas nekur nevar nokļūt? Atrisināsim šo problēmu ar <a> tagu!

To lieto šādi: <a href="lapas adrese">teksts, uz kura var uzpiest</a> . Teksta vietā var likt, ko vēlies - bildi virsrakstu, tabulu, kasti, paragrāfu! Par to kasti un tabulu vēlāk.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Lapā tas izskatās šādi:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

To bultiņu es pats uzzīmēju. Skaisti! Nenovēršamies no tēmas. Kā jau redzēji, tas links ved uz draugiem.lv. Bet redzi, draudzīgais teksts ir blakus sunim. Lai to novērstu, lieto <br/> tagu! Tas tikai jāiliek vietā, kur vajag jaunu rindu. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Labi, es tagad izveidošu lapu, lai parādītu cik lapas var būt spēcīgas! ( var šo un visus citus projektus var apskatīt sadaļā Projekti).

 

Vai tu pamanīji, ka kodā es lietoju atstarpes izmantojot [TAB] taustiņu? Tad rodas jautājums, vai dators lasa tās atstarpes? Godīgi sakot - nē. Rezultāts no tā nemainīsies. Bet tās noder atkļūdošanā (debugging), vai arī lai tu ātri varētu to izlasīt.

Labi uzrakstīts kods:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Slikti uzrakstīts kods:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Trakāk būtu, ja tas būtu ierakstīts vienā līnijā.

 

Bet tagad parādīšu svarīgu  lietu - sarakstu. Tas var būt sakārtots un nesakārtots.  Lai iegūtu sakārtotu sarakstu

 

 

bottom of page