11.kl. "Galvenie tīmekļa lappusi aprakstošie tagi."

Stundas mērķis -  apgūt tīmekļa lappusi aprakstošo tagu sintaksi un lietošanu.

Uzdevumi (sasniedzamie rezultāti):
· iegūt izpratni par tīmekļa lappuses struktūru;
· noskaidrot tīmekļa lapppusē ievietojamos objektus;
· noskaidrot un apgūt tagu pieraksta principus;
· apgūt lappuses galveno daļu aprakstīšanas tagus;
· uzrakstīt HTML kodu lappusei par Auces novadu (skat. Auces_novads.doc)!
 
Saikne ar standartu 11.klases programmā:
· Hiperteksta iezīmēšanas valoda (HTML) un tajā veidotu dokumentu struktūra, galvenie tīmekļa
lappusi aprakstošie tagi.
· Tīmekļa lappuses parametru iestatīšana.

HTML - HyperText Markup Language jeb valoda, kurā ar vadības simbolu, kurus sauc par tagiem, palīdzību nosaka pārlūkprogrammā attēlojamās tīmekļa lappuses struktūru un izskatu (LIIS materiāls).

HTML dokumenta struktūras pamatsastāvdaļas ir objekti:

• virsraksti; 
• tabulas; 
• rindkopas;
• saraksti.  

HTML tagus izmanto, lai norādītu interneta pārlūkprogrammai, kā šos objektus parādīt.Tīmekļa lappusēs var ievietot arī grafiskos un multimediju objektus:

• skat. LIIS materiālu par tīmekļa lappušu veidošanas principiem un struktūru.s
• pilns tēma materiālu komplekts MS OneNote 2010 digitālajā piezīmju grāmatiņā - saite uz OneNote datni SkyDrive;
• pilns tēma materiālu komplekts *mht Web arhīva formātā - saite lejupielādei;
• pilns tēma materiālu komplekts Evernote digitālo piezīmju formātā (*enex tipa datne ir lietojama ar Evernote) - saite *enex datnes leupielādei;

Tīmekļa lappuses galvenos tagus parāda nākošie attēli:

Citi svarīgi tagi (skat. arī W3C vietni):

Rīku komplekti darbam1. Piezīmju bloknots (Notepad) un pārlūkprogramma
2. Notepad++ un pārlūkprogramma
3. Tiešsaistes servisi:

• w3shools.com - rokasgrāmata, piemēri un izmēģinājumi;
• ewebeditor.com/demo/ - dažādi darba režīmi;
• htmlinstant.com - logi rediģēšanai un apskatei (vertikāli)
• rendera.heroku.com/ - 2 logi (vertikāli, ir piemēri)
• htmledit.squarefree.com/ - arī 2 logi (horizontāli)
• elrte.org/demo - jaudīgs rīks
• plugnedit.com/ - vizuālais tīmekļa lapu redaktors

Darba tehnoloģija

1. Atvērt piezīmju bloknotu (Notepad)!
2. Ievadīt atverošo un noslēdzošo tagu HTML:
          un beigu rindā
     
3. Saglabāt ioto tīmekļa lapas sagatavi:

• File => Save As;
• ievadīt datnes vārdu: nosaukums.html;
• nomainīt datnes tipu: Saves As Type => All Files;
• Save

4. Atvērt saglabāto tīmekļa lapu pārlūkprogrammā un pārliecināties, ka lapa tiek atainota korekti!
5. Ja ir kļūmes, tad izlabot HTML kodu, atkārtoti saglabāt (CTRL + S) vai File => Save!
6. Pārlūkprogrammā lapu ielasīt atkārtoti (Reload), apskatīt!
7. Turpināt html koda rediģēšanu un pilnveidi!


Neliels tīmekļa laps fragments

Citas praktiskiem darbiem ieteicamas programmas:

• Notepad un kāda pārlūkprogramma (Firefox, Google Chrome, IE);
• Notepad++ un kāda pārlūkprogramma (Firefox, Google Chrome, IE);
• SeaMonkey ar iebūvēto HTML redaktoru Composer.

Notepad++

 SeaMonkey Composer

Izmantotais attēls ir atrodams šajā vietnē (attēla saite) - http://www.zemgaletourism.lv/bildes/Vecauces_pils_5.jpg!  Attiecīgajā attēla tagā, lietojot attēlu no kādas vietnes, ieteicams kā attēla avotu (src="***") izmantot saiti! Izmēģiniet praktiskajā darbā abus variantus!

SeaMonkey Composer html koda rediģēšanas režīmā:

Uzdevumi treniņam:

• pārbaudīt šeit dotos HTML valodas tagus, ievadot līdzīgus piemērus kādā vienkāršā teksta redaktorā (Notepad, Notepad ++, Notepad 2008 vai citā - piemēram, Blogger jauna raksta sagatavošanas redaktorā);
• saglabāt piemērus ar paplašinājumu html;
• saglabātos piemērus aplūkot pārlūkprogrammā ( Firefox, Opera, IE vai Safari);
• Izanalizēt attēlā ar Notepad++ logā redzamo html kodu;
• izveidot nelielu noderīgu saišu sarakstu (izmantot saraksta tagus);
  
• pamēģināt kombinēt tagus teksta izskata uzlabošanai, saglabāt pārveidotos piemērus un aplūkot tos no jauna.

*** Ieteikums! Sākumā var būt apgrūtinoši iegaumēt tagus, to pieraksta sintaksi, tādēļ ir iespējams paralēli lietot kādu piemērotu bezmaksas tīmekļa lapu redaktoru, kurā daudzus lapas elementus var izveidot vizuālā vidē, bet tagus atrast koda rediģēšanas režīmā.

*** Noteikti vēlams paralēli lietot vietni W3Schools.com!

Dažas ieteicamas programmas tīmekļa lappušu rediģēšanai:

•  Notepad ++ - vienkārša un lieliska programma koda rediģēšanai;
• ērti lietojams SeaMonkey (pārlūkprogramma ar iebūvētu html koda redaktoru Composer);
• Amaya - pilnībā nodoršina atbilstību W3C standartiem (saskarne nepierasta);
• NetObjects Fusion Essentials - lieliska tīmekļa lapu un vietņu veidošanas sistēma;
• Kompozer - šo programmu iesaka K.Veiss (vsk. māc. grāmatas autors);
• TheSiteWizard - tiešsaistes rīks tīmekļa lapu veidotājiem (šeit daudz noderīgas informācijas);
• CofeeCup Free Stuff - veirākas lieliskas bezmaksas programmas (web redaktors, izvēlņu ģenerators, bezmkasas izglītības paka, u.c.);
• PageBreeze Free HTML Editor - ļoti labs un vienkāršs tīmekļa lapu redaktors, kurā var strādāt dizaina un koda rediģēšanas režīmos;
• Alleycode - šeit atrodama virkne bezmaksas rīku tīmekļa lappušu veidošanai;
  
• FirstPage 06 - lielisks rīks, tikai reti tiek atjaunināts;
• WebPlus SE -ļoti interesanta un jaudīga tīmekļa lappušu veidošanas programma;
  
• Komodo Edit - tiek rekomendēts kā viens no labākajiem rīkiem;
• Aptana Studio - lieliska vide web aplikāciju būvei (atbalsta AIR 2.0 beta);
• NetBeans - vide, kura atbalsta milzīgu skaitu tehnoloģiju un paredzēta aplikāciju izstrādei dažādām vidēm;
• Eclipse - arī visai iespaidīgs rīks;
  
• Microsoft rīki - vesela kolekcija, bet nav bezmaksas (iz izmēģinājuma versijas);
  
• Adobe rīki (Products) - iz izmēģinājuma versijas;
• Xara rīki - izmēģinājuma versijas.

Protams, ir arī virkne tiešsaistes rīku - skat. šīs pašas vietnes izvēlni Web rīki labajā malā.
---------------------------------------------------------------------------------------------------------------