KompoZer 0.8 : Vienkāršas tīmekļa lappuses veidošana

3. TĪMEKĻA LAPPUŠU VEIDOŠANAS PAMATI

3.3. Vienkāršas tīmekļa lappuses veidošana

HTML valodā izveidots dokuments sastāv no HTML elementiem, kurus veido HTML

tagi un attēlojamā informācija. HTML tagu lietošanu var raksturot šādi:

ar tagiem iezīmē HTML elementus;
tagi parasti tiek lietoti pa pāriem, piemēram: <html> un </html>. Pirmais tags norāda HTML elementa sākumu, bet otrais – beigas (aiz simbola < atrodas slīpsvītra /);
tekstu starp sākuma un beigu tagiem sauc par elementa saturu;
tagi var saturēt atribūtus, kas norāda elementa īpašības vai papildu informāciju;
tātad elementam vispārīgā gadījumā ir šāds izskats:
<elements atribūts="vērtība"> elementa saturs </elements>;
tagus var pierakstīt gan ar mazajiem, gan ar lielajiem burtiem.

2.3.1.HTML dokumenta izveidošana

Piemēram, pārlūkprogrammas Mozilla Firefox logā redzama vienkārša tīmekļa lappuse:

Tīmekļa lappusei atbilstošā HTML dokumenta struktūra var būt šāda:

HTML dokuments

dokumenta galva

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<title>Tīmekļa lappuse</title>

</head>

<body>

Tīmekļa lappuses saturs

</body>

</html>

dokumenta saturs

Katram HTML dokumentam jāsatur šādi struktūras elementi:

Elements	Tagi	Funkcija
HTML dokuments	`<html> </html>`	Tā saucamais saknes elements, kas satur visus citus elementus un norāda, ka dokuments ir HTML formātā.
Galva	`<head> </head>`	Satur metadatus un citu informāciju, kas nav jāattēlo tīmekļa lappusē, tai skaitā lappuses nosaukumu, kodējumu un noformējuma instrukcijas.
Ķermenis jeb saturs	`<body> </body>`	Satur visus elementus un tekstu, kas ir jāattēlo tīmekļa lappusē, tai skaitā virsrakstus, rindkopas un hipersaites.

Piemērā dotais HTML dokuments turklāt satur šādus pamatelementus:

Elements	Tagi	Funkcija
Metadati	`<meta>`	Atribūti satur informāciju par lappusi, šajā gadījumā norādot rakstzīmju kodējumu UTF-8, kas nodrošina dažādu alfabētu burtu pareizu attēlošanu.
Lappuses nosaukums	`<title> </title>`	Satur lappuses nosaukumu, ko pārlūkprogrammas parasti parāda loga virsraksta joslā un lappuses cilnē.
Rindkopa	`<p> </p>`	Satur teksta bloku, līdzīgi kā rindkopas grāmatā vai tekstapstrādes lietotnēs.

Lai izveidotu HTML dokumentu:

atver tekstapstrādes lietotni, piemēram, Gedit, lietojot komandu Applications / Accessories / gedit Text Editor;
ievada tekstu atbilstoši iepriekšējā lapā minētajam paraugam;
saglabā izveidoto dokumentu, izpildot šādas darbības:

lieto komandu File / Save. Atveras dialoglodziņš Save As.
dialoglodziņā Save As:

navigācijas rūtī atlasa mapi, piemēram, Dokumenti;
tekstlodziņā Name ievada dokumenta nosaukumu, piemēram, „lappuse.html”;
piespiež pogu Save.

2.3.2.Tīmekļa lappuses apskatīšana pārlūkprogrammā

Lai pārlūkprogrammā apskatītu ar izveidoto HTML dokumentu aprakstīto tīmekļa lappusi, pēc izvēles:

atver mapi, kurā saglabāts HTML dokuments, un izpilda dubultklikšķi uz datnes nosaukuma:

atver pārlūkprogrammu un lieto komandu File / Open File. Atveras dialoglodziņš Open File, tajā atrod mapi, kurā saglabāts HTML dokuments, izvēlas attiecīgo datni un piespiež pogu Open:

Atveras pārlūkprogrammas logs, kurā redzama izveidotā tīmekļa lappuse:

Lai pārlūkprogrammā apskatītu tīmekļa lappuses HTML kodu, lieto komandu View / Page Source. Atveras jauns logs, kurā redzams ievadītais HTML kods:

Šis dokuments tiks ņemts par pamatu pārējo HTML iespēju aplūkošanai.

2.3.3.HTML dokumenta rediģēšana un teksta noformēšana

Izveidoto HTML dokumentu var rediģēt tāpat kā jebkuru parasta teksta dokumentu:

dzēšot nevajadzīgo tekstu;
ievadot jaunu tekstu;
lietojot nepieciešamos tagus, piemēram, kas paredzēti teksta formatēšanai;
labojot kļūdas.

HTML dokumentā teksta formatēšanai lieto šādus tagus:

Tagi	Apraksts
`<h1>, </h1>` `<h2>,</h2> utt.`	Piešķir virsraksta stilu (ir seši stili). Jo lielāks skaitlis, jo zemāka līmeņa virsraksts. h1 ir pirmā līmeņa virsraksts, h2 – otrā līmeņa virsraksts jeb apakšvirsraksts.
`<p>, </p>`	Norāda rindkopas sākumu un beigas.
`<br>`	Pāriet uz jaunu rindu, neveidojot jaunu rindkopu.
`<hr>`	Ievieto horizontālu līnija ekrāna platumā.
`<em>, </em>`	Uzsvērts teksts. Parasti tiek attēlots kā slīpraksts.
`<strong>, </strong>`	Spēcīgi uzsvērts teksts. Parasti tiek attēlots kā treknraksts.

Lai rediģētu izveidoto HTML dokumentu:

atver tekstapstrādes lietotni, piemēram, Gedit;

atver HTML dokumentu, izpildot šādas darbības:
lieto komandu File / Open. Atveras dialoglodziņš Open Files. Tajā norāda HTML faila atrašanās vietu.

rediģē un ievada tekstu atbilstoši paraugam:

<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Tīmekļa lappuse</title> </head> <body> <h1>HTML valodas pamati</h1> Šajā piemēra aplūkosim vienkāršu HTML lapu ar formatējumu <h2>Parastas rindkopas</h2> Šajā nodaļā ir rindkopas, kurās tiek izmantoti pirmīt aplūkotie ļoti svarīgie tagi.Jāatceras, ka to izskats vienā pārlūkā var atšķirties no izskata citos <h2>Dzejas rindkopas</h2> Kuries slīpā lietū, mana uguns, kuries. Buries pāri senču kauliem, mana sirdsapziņa, buries. Kur ies mana tauta, mana dūša tur ies. Turies debesīs un zemē, mana nolemtība, turies. </body> </html>

saglabā izmaiņas.

Mājaslapas izskatu pārbauda tīmekļa pārlūkā.

Novecojušie formatēšanas tagi

Tīmekļa veidošanās sākumā tagus izmantoja ne tikai nozīmes aprakstīšanai, bet arī formatēšanai. Mūsdienās šos paņēmienus nav ieteicams izmantot, tā vietā izmanto CSS (skatīt nodaļu 9.13.).

Tagi	Apraksts
`<b>, </b>`	Piešķir treknrakstu.
`<i>, </i>`	Piešķir slīprakstu.
`<font>,` `<font>`	Iestata fonta atribūtus: face – fontu, size – lielumu (ir 6 lielumi), color – krāsu (krāsu kodi ir pieejami http://www.w3schools.com/tags/ref_colorpicker.asp ).

Piemērs:

Šis teikums satur slīprakstu un melnrakstu. Bet šajā teikumā daži vārdi ir ar Arial fontu, lielāka izmēra un sarkani.

2.3.4.Hipersaites

HTML valodas stūrakmens ir hipersaites; tās ļauj piekļūt tīmekļa lapām un dokumentiem, veicot peles klikšķi. Tās var norādīt gan uz citām tīmekļa lapām, dokumentiem failiem, bildēm gan e pasta adresēm. Hipersaites veido ar tagiem <a> un </a>. Šim tagam ir jānorāda atribūts href, kas satur adresi (URL) uz mērķa dokumentu. Piemērs:

Šī ir piemēra <a href="http://lu.lv/">vietne</a>.

Iegūtais rezultāts ir šāds:

Šī ir piemēra vietne.

2.3.5.Sarakstu un attēlu lietošana

HTML dokumentā var veidot aizzīmētus un numurētus sarakstus, kā arī norādīt tīmekļa lappusē ievietotos attēlus, iegūstot, piemēram, attēlā redzamo rezultātu:

HTML dokumentā sarakstus veido šādi elementi:

Elements	Tagi	Funkcija
Aizzīmēts saraksts	`<ul></ul>`	Satur aizzīmēta saraksta punktus.
Numurēts saraksts	`<ol></ol>`	Satur numurēta saraksta punktus.
Saraksta punkts	`<li></li>`	Satur atsevišķa saraksta elementa tekstu un/vai apakšsarakstu.

Saraksts var saturēt apakšsarakstus:

sagriež sieru un tomātus
uz maizes šķēles liek

salātu lapas,
majonēzi,
sieru un tomātus

virsū uzliek otru maizes šķēli

<ol>

<li>sagriež sieru un tomātus</li>

<li>uz maizes šķēles liek

<ul>

<li>salātu lapas,</li>

<li>majonēzi,</li>

<li>sieru un tomātus</li>

</ul>

</li>

<li>virsū uzliek otru maizes šķēli</li>

</ol>

Lai ievietotu attēlus, izmanto tagu <img>, kuram ir divi atribūti:

src – attēla atrašanās vieta. Ja attēls ir vienā mapē ar HTML dokumentu, tad norāda tikai attēla nosaukumu. Citādi jānorāda attēla URL;
alt – alternatīvais teksts, kas parādās, ja attēlu nevar parādīt vai lietotājs ir atslēdzis attēlu rādīšanu.

Iepriekšējo attēlu izveido šādi:

<img src="sviestmaize.png" alt="Brokastu maize">

Ielādējot lapu, pārlūks meklēs attēlu ar nosaukumu sviestmaize.png tajā pašā mapē, kurā atrodas lapa. Ja šo attēlu neatradīs, tad tā vietā tiks uzrakstīts “Brokastu maize”.

Ja ir nepieciešamība padziļināti apgūt HTML valodu, valodas aprakstus var sameklēt globālajā tīmeklī. Piemēram, viena no labām tīmekļa vietnēm ir

http://www.w3schools.com/html/html_quick.asp.