Tīmekļa lapas ir rakstītas īpašā valodā HTML (hiperteksta iezīmēšanas valoda), un to izejas kodu vienmēr ir iespējams aplūkot.
Ja zina HTML un CSS, ir iespējams veidot mājaslapu atbilstoši savām idejām.
2. Sasniedzamie rezultāti
Tīmekļa lapas ir rakstītas īpašā valodā HTML (hiperteksta
iezīmēšanas valoda), un to izejas kodu vienmēr ir iespējams
aplūkot.
Ja zina HTML un CSS, ir iespējams veidot mājaslapu
atbilstoši savām idejām.
3. 1.uzdevums
Atver pasaules lielāko tīmekļa izstrādātāju vietni w3schools.com, izvēlies pirmo nodaļu Learn
HTML un atver sadaļu HTML introduction.
What is HTML? (Kas ir HTML?)
What is an HTML Element? (Kas ir HTML elements?)
HTML Page Structure (HTML lapas struktūru)
4. Kas ir HTML?
HTML apzīmē hiperteksta iezīmēšanas valodu
HTML ir standarta iezīmēšanas valoda Web lapu izveidei
HTML apraksta Web lapas struktūru
HTML sastāv no elementu sērijas
HTML elementi norāda pārlūkprogrammai, kā parādīt saturu
HTML elementi apzīmē tādas satura daļas kā "šis ir virsraksts", "šī ir rindkopa", "šī ir saite" utt.
5. Kas ir HTML elements?
HTML elementu nosaka sākuma tags, saturs un beigu tags:
< tagname > Saturs iet šeit... < /tagname >
HTML elements ir viss no sākuma taga līdz beigu tagam:
< h1 > Mans pirmais virsraksts < /h1 >
< p > Mana pirmā rindkopa. < /p >
7. Es runāju latviski.
Mani sauc Anna.
<html lang=”lv”>
<head>
<meta charset = “utf-8”>
<title> Annas lapa </title>
</head>
Es esmu tāda, kāda
esmu, to visu jūs
varat redzēt.
<body>
Lapas saturs, ko redz tās
skatītājs.
</body>
</html>
HTML lapas struktūra
8. 1. solis
Doto vienkārša HTML dokumenta piemēru A Simple HTML Document atver HTML redaktorā,
nospiežot pogu Try it Yourself:
Nomaini mājas lapai citu virsrakstu (liec savu vārdu!):
Pārliecinies, vai Tu to esi izdarījis pareizi, palaižot mājas lapu ar Run:
tas ir pirmā līmeņa jeb lielais virsraksts (heading 1 - tāpēc tags <h1>)
9. 2. solis
Nomaini arī uzrakstīto rindkopu (paragraph - tāpēc tags <p>) pret tekstu: Es mācos veidot
mājas lapu.
Papildini mājas lapu ar vēl vienu rindkopu, rakstot no jauna tagu <p> (atceries, ka vajadzēs to arī
aizvērt!): Man tas izdodas!
Gatavajam piemēram vajadzētu izskatīties šādi:
10. 3. solis
Atver tiešsaistes vidi repl.it. un izveido pats savu mājas lapas piemēru:
dod lapai nosaukumu;
pievieno pirmā līmeņa virsrakstu;
pievieno 2 rindkopas ar tekstu.
Iesniedz savu darbu skolotājam, spiežot labajā augšējā stūrī uz pogas
Ieraksti ielūguma lodziņā skolotāja e-pastu un spied pogu Invite
11. 2. uzdevums
1. solis
Atver pasaules lielāko tīmekļa izstrādātāju vietni w3schools.com, izvēlies pirmo nodaļu Learn
HTML un atver sadaļu HTML Basic. Precīzā adrese:
https://www.w3schools.com/html/html_basic.asp
Izlasi, ja vajadzīgs, izmanto vārdnīcas vai tulkotāja iespējas, HTML Headings (HTML virsraksti),
HTML Paragraphs (HTML rindkopas), HTML Links (HTML saites), HTML Images (HTML attēli), kā
arī izpildi vingrinājumu piemērus.
2. solis
Atver sadaļu HTML Attributes. Precīzā adrese:
https://www.w3schools.com/html/html_attributes.asp
Izlasi, ja vajadzīgs, izmanto vārdnīcas vai tulkotāja iespējas, HTML Attributes (HTML īpašības), kā
arī izpildi vingrinājumu piemērus.
12. Kopsavilkums par teorijas
jautājumiem:
<h1> Galvenais pirmā līmeņa virsraksts
<h2> Otrā līmeņa virsraksts utt.
Pavisam virsrakstiem var būt 6 līmeņi, tātad no
<h1> līdz <h6>
<p> rindkopa
īpašība style pievieno elementam konkrētu stilu,
piemēram krāsu, burtu tipu, lielumu
<p style="color:red;">Šī rindkopa ir sarkanā
krāsā.</p>
<a> saite
atribūts href norāda precīzu saites adresi
<a href="https://www.w3schools.com">Šī ir
saite</a>
<img> attēls
īpašība src norāda attēla atrašanās vietu uz
servera vai internetā
īpašība alt norāda tekstu, kas būs redzams
gadījumos, ja nav iespējams skatīt attēlu
īpašība height norāda attēla augstumu
īpašība width norāda attēla platumu
<img src="img_girl.jpg" alt="meitene"
height=100 width=100>
13. 3. solis
Atver tiešsaistes vidi repl.it un izveido pats savu mājas lapas piemēru:
Pirmā līmeņa virsraksts Pirmdienas laika ziņas;
Divi otrā līmeņa virsraksti Valmierā un Liepājā;
Zem katra virsraksta pievieno pa parastā stila rindkopai attiecīgi katrai pilsētai Mākoņains,
lietus - raksti Valmierā un Saulains laiks - raksti Liepājā;
Pievieno katrai pilsētai atbilstošu laikapstākļu nelielu bildīti;
Zem visiem ierakstiem uzliec saiti uz laika ziņu lapu, kurā varētu sīkāk izlasīt gan par
laikapstākļiem Valmierā, gan Liepājā.
15. 3. uzdevums
Atver tiešsaistes vidi repl.it. un izveido pats savu mājaslapas piemēru par tēmu Mani hobiji, tajā
ietverot šādus HTML elementus :
Pirmā līmeņa virsraksts Mani hobiji;
Divi otrā līmeņa virsraksti, kuros nosauc 2 savus hobijus;
Zem katra otrā līmeņa virsraksta pievieno vismaz 2 rindkopas, kuros apraksti savus hobijus - ko šajā
hobijā dara, kādi ir populārākie veidi (ja tādi ir), cik bieži tu ar šo savu hobiju nodarbojies utml, ievēro
pareizrakstību un atceries par pieturzīmēm;
Pievieno katram hobijam nelielu bildīti;
Zem katra hobija ieraksta ieliec saiti uz interneta lapu, kurā varētu sīkāk izlasīt par šo hobiju;
Izmanto stila īpašību, pievienojot krāsu vismaz vienai rindkopai, krāsu nosaukumiem izmanto
zināmos krāsu nosaukumus angļu valodā.
