HTML pamati

01. Ievads HTML

Apgūstot mājas lapu veidošanu, pirmā lieta, ko vajadzētu sākt mācīties, ir HTML — Hiperteksta iezīmēšanas valoda (HyperText Markup Language). Jebkura interneta lapa būtībā ir vienkāršs teksta dokuments, kurā ar speciālām iezīmēm jeb HTML tagiem ir atzīmēti dažādi elementi — virsraksti, teksta rindkopas, saraksti, attēli u.c. Interneta pārlūkprogramma šo speciāli iezīmēto tekstu apstrādā un parāda lietotājam saprotamā veidā. HTML valoda ir paredzēta, lai piešķirtu elementiem nozīmi, nevis izskatu. Pēc tam, kad elementiem piešķirta nozīme, to...

Lasīt tālāk

02. HTML sintakse

Jebkuras valodas pamatā ir vārdi. HTML valodas "vārdi" ir tagi. Jebkurš HTML tags sākas ar < un beidzas ar > zīmēm. Katram HTML tagam ir noteikta nozīme, ko tas piešķir tekstam vai citam objektam. Pāra tagi Lielākā daļa HTML tagu ir pāra tagi. Tie attiecas uz noteiktu teksta daļu, ko norobežo atverošais un noslēdzošais HTML tags, un piešķir šai teksta daļai noteiktu nozīmi dokumentā. Noslēdzošais tags atšķiras no atverošā ar simbolu / pēc <. Pāra tagiem vienmēr ir nepieciešams noslēdzošais tags. Pārlūkprogrammas gan pieļauj daudz ko un...

Lasīt tālāk

03. Pamatelementi

Kāda ir HTML dokumenta struktūra? Apskatīsim pirmajā sadaļā doto piemēru: Dokumenta tips: <!DOCTYPE html> informē pārlūkprogrammu par to, ka dokuments ir rakstīts HTML5 standartā. Šī deklarācija vienmēr atrodas pašā dokumenta sākumā. Senākās HTML versijās DOCTYPE bija sarežģītāks, bet HTML5 tas ir vienkāršots līdz minimumam. Šī daļa nav obligāti nepieciešama, lai lapa darbotos, bet bez tās var rasties problēmas ar sarežģītu lapu attēlošanu, jo pārlūkprogrammai nākas "uzminēt", pēc kādām specifikācijām attēlot kodu. Vienmēr iekļauj...

Lasīt tālāk

04. Virsraksti un teksts

Lai dokumenta struktūra būtu labi saprotama un pārskatāma gan Tavas lapas apmeklētājiem, gan meklētājiem, nepieciešams pareizi lietot virsrakstus, rindkopas un teksta formatēšanas elementus. Virsraksti HTML pieļauj sešus virsrakstu līmeņus — <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Ir būtiski tos lapā lietot atbilstoši satura nozīmei. Nav jāuztraucas par burtu noformējumu vai izmēru — to visu pēc tam varēs norādīt ar CSS palīdzību. Rakstot HTML kodu, virsrakstus ir jāizvēlas pēc nozīmes, nevis burtu izmēra. Tie sakārtoti...

Lasīt tālāk

05. Saraksti

Saraksti sākumā var šķist nenozīmīga HTML daļa, taču mainot to izskatu ar CSS, tie iegūst daudz plašāku pielietojumu — sarakstus var izmantot ne tikai kā vienkāršu lietu uzskaitījumu tekstā, bet arī daudzlīmeņu izvēlnēs, komentāru attēlošanā, saišu blokos, attēlu galerijās u.c. Praksē tie tiek izmantoti gandrīz jebkurā mājas lapā. HTML valoda sevī ietver 3 sarakstu tipus: • sakārtots saraksts <ol> (ordered list) — uzskaitījumam lieto skaitļus vai burtus. Šādus sarakstus parasti izvēlas tur, kur saturiski ir nozīme elementu secībai. •...

Lasīt tālāk

06. Saites

Saites (hipersaites) ir neatņemama daļa jebkurai interneta lapai. Nospiežot uz saites, lietotājs nonāk citā lapā vai lapas sadaļā. <a> tags tiek izmantots, lai izveidotu saiti no viena dokumenta uz citu vai arī uz citu tā paša dokumenta daļu. Galvenais <a> taga atribūts ir href (hyper-reference), kas norāda, uz kurieni saite vedīs. Vienkārša saite <a href="https://google.lv">doties uz Google</a> Rezultāts: doties uz Google Neobligāts, taču ļoti ieteicams atribūts ir title — nosaukums. Šis teksts parādās, kad lietotājs novieto peles kursoru...

Lasīt tālāk

07. Attēli

Lai ievietotu dokumentā attēlu, tiek izmantots <img> tags. Piemērs: <img src="bilde.jpg" alt="Attēla apraksts"> src norāda attēla atrašanās vietu. Tā var būt gan absolūtā, gan relatīvā adrese. Relatīvā adrese nozīmē faila atrašanās vietu attiecībā pret HTML dokumentu. Ja bilde atrodas tajā pašā mapē, kur HTML dokuments, relatīvā adrese ir vienkārši nosaukums.jpg. Ja bilde atrodas apakšmapē "atteli", adrese ir atteli/nosaukums.jpg. Šim tagam obligāts atribūts ir alt — alternatīvais teksts. Alt atribūts norāda tekstu, kas parādīsies attēla...

Lasīt tālāk

08. Tabulas

Tabulas HTML valodā ir paredzētas strukturētu datu attēlošanai rindās un kolonnās — piemēram, cenrāžiem, salīdzinājumiem, statistikai u.tml. Svarīgi: tabulas ir domātas datu attēlošanai, nevis lapas izkārtojuma veidošanai. Lapas izkārtojumam izmanto CSS (flexbox, grid). Vienkārša tabula Tabulu veido ar šādiem tagiem: • <table> — tabulas ietvars • <tr> — tabulas rinda (table row) • <td> — tabulas šūna (table data) • <th> — tabulas galvenes šūna (table header) — teksts pēc noklusējuma tiek attēlots treknrakstā Piemērs...

Lasīt tālāk

09. Formas

HTML formas ļauj lietotājiem ievadīt un nosūtīt datus — piemēram, reģistrācijas veidlapas, meklēšanas lauki, aptaujas, komentāri un citi interaktīvi elementi. Formas pamati Formu veido ar <form> tagu, norādot, uz kurieni dati tiks nosūtīti (action) un kādā veidā (method): <form action="/apstrade.php" method="post"> <label for="vards">Vārds:</label> <input type="text" id="vards" name="vards"> <button type="submit">Nosūtīt</button></form> Metode GET pievieno datus URL adresei (piemēram, meklēšanai), bet POST nosūta datus...

Lasīt tālāk

10. Semantiskie elementi

HTML5 ieviesa semantiskos elementus, kas ļauj skaidrāk aprakstīt lapas struktūru. Atšķirībā no universālā <div>, semantiskie elementi norāda satura nozīmi, kas palīdz meklētājiem, ekrāna lasītājiem un citiem izstrādātājiem labāk saprast lapas uzbūvi. Galvenie semantiskie elementi <header> <h1>Mājas lapas nosaukums</h1> <nav> <a href="/">Sākums</a> <a href="/par-mums">Par mums</a> <a href="/kontakti">Kontakti</a> </nav></header><main> <article> <h2>Raksta...

Lasīt tālāk

11. Audio un video

HTML5 ļauj ērti iegult audio un video saturu tieši mājas lapā bez papildu spraudņiem (plugins). Agrāk bija nepieciešams Flash Player vai citi paplašinājumi, bet tagad multimediju var atskaņot ar iebūvētiem HTML elementiem. Video <video> elements ļauj iegult video failu lapā: <video src="video.mp4" controls width="640" height="360"> Tava pārlūkprogramma neatbalsta video elementu.</video> Galvenie atribūti: • controls — parāda atskaņošanas vadīklas (play, pause, skaļums) • autoplay — sāk atskaņošanu automātiski (pārlūkprogrammas bieži...

Lasīt tālāk

12. Meta informācija

Dokumenta <head> sadaļā tiek ievietota dažāda meta informācija, kas nav tieši redzama lietotājam, bet ir būtiska lapas pareizai darbībai, meklētāju optimizācijai (SEO) un attēlošanai sociālajos tīklos. Rakstzīmju kodējums Vienmēr norādi dokumenta rakstzīmju kodējumu. UTF-8 ir universālais standarts, kas atbalsta visas valodas, tai skaitā latviešu diakritiskās zīmes (ā, č, ē, ģ, ī, ķ, ļ, ņ, š, ū, ž): <meta charset="UTF-8"> Viewport — mobilā saderība Šis meta tags ir obligāts responsīvām (mobile-friendly) lapām. Bez tā mobilās ierīces...

Lasīt tālāk

Tagu saraksts

Piezīme: sarkanā krāsā atzīmētie tagi ir novecojuši (deprecated). To vietā izmanto CSS . Tags Pielietojums a Saite (hipersaite) abbr Abreviatūras (saīsinājuma) skaidrojums acronym Novecojis. Lietot address Kontaktinformācija lapas vai sadaļas autoram area Klikšķināms apgabals attēlu kartē (image map) article Patstāvīgs satura gabals (raksts, komentārs, foruma ieraksts) aside Papildu saturs (sānjosla, saistītie raksti) audio Audio faila atskaņotājs b Treknraksts bez papildu nozīmes...

Lasīt tālāk

Atpakaļ Uz augšu