Valters Celmiņš
© 2006 - 2011
Apmācība mājas lapu izveidē izmantojot xHTML 1.0 un CSS 2.1 valodas

Elementu veidi

HTML valodā pamatā ir trīs tipu objekti:

  • rindu elementi (tulk. uz angļu val. "inline"),
  • bloku elementi (tulk. uz angļu val. "block"),
  • tabulu elementi (tulk. uz angļu val. "table"),

Nosaukumi vairāk vai mazāk jau pasaka priekšā, kam katrs no elementiem ir domāti, tomēr ne to pielietojums, bet īpašības un uzvedība ir tā, kas mūs interesē. Nedaudz sīkāk par katru atsevišķi.

Inline

Rindu elementi HTML valodā pēc noklusējuma ir lielākā daļa elementu, kas paredzēti darbam ar tekstu, piemēram <span> </span>, <a> </a>, <li> </li> u.c. Šie visi HTML elementi ir paredzētu darbam ar tekstu, bet, protams, var tikt izmantoti arī citiem mērķiem.

Rindu elementu galvenā īpašība ir veidot rindas pēc sekojošām īpašībām:

  • veidot visas rindas maksimāli platas (izstiepties no malas līdz malai) neatkarīgi no tās satura un/vai garuma,
  • veidot rindas tik augstas, cik augsts ir augstākais kārtējās rindas elements; tātad rinda būs tik augsta, cik augsts būs, piemēram, lielākais burts rindā,
  • kārtot visus rindas elementus vienu aiz otra secībā, ja tas iespējams; ja vairs nav iespējams turpināt rindu, veidot automātisku rindas pārnesi un izveidot jaunu rindu zem esošās.

Nosacījumi diezgan vienkārši un pašsaprotami, ja domājam par vienkāršāko rindas elementu - tekstu. To būtu vienkāršāk iedomāties kā baltu lapu, uz kuras jūs rakstāt. Pirms rakstīt, jānovelkt līnija visas lapas platumā, kas nozīmē, ka tiek izveidota rinda maksimālā platumā un tiek aizņemta vieta visas līnijas platumā neatkarīgi no tā, cik daudz jūs šajā rindā grasaties ierakstīt. Jūs arī rindas augstumu paredzat tik lielu, cik liels būs augstākais burts jūsu tekstā (vai vismaz paredzat vietu, lai varētu ierakstīt visu, ko vēlaties ierakstīt šajā rindā). Un, protams, burtus jūs rakstāt secībā, vienu aiz otra, līdz brīdim, kad vairs nav vietas un jāveido jauna rinda tieši zem iepriekšējās. Šeit par elementu tiek uzskatīts burts, bet atcerieties, ka burts nav vienīgais HTML elements, un rindās var kārtot gandrīz jebko... drīzāk rodas retorisks jautājums: "Cik tas ir ērti?"

Lai liktu pieņemt kādam elementam rindas īpašības, to jānorāda sekojošā veidā (CSS valodā):

span {display: inline;}

Tomēr pati svarīgākā lieta ir šādu elementu iespējamās īpašības. Tas, kāda tipa elements tas ir, ļoti spēcīgi nosaka to, kādas īpašības darbosies un kādas nedarbosies uz šādiem elementiem. Zemāk redzamas galvenās inline elementu īpašības jeb tās īpašības, kas atstās iespaidu tikai uz šiem elementiem:

span
{
 display: inline;
 color: black;           /* iegaumējiet šo īpašību uzmanīgi, tā attiecas TIKAI uz teksta krāsu */
 line-height: 150%;      /* līnijas augstums */
 text-align: justify;    /* teksta izlīdzinājuma veids */
 text-indent: 1,27cm;    /* teksta atkāpe */
 letter-spacing: 2px;    /* burtu/elementu atstarpes */
 word-spacing: 5px;      /* vārdu atstarpes */
 vertical-align: middle; /* vertikālā pozicionēšana iekš rindas */
 padding-top: 3px;
 padding-bottom: 3px;    /* tikai augšējā un apakšējā atstarpe */
}

Kā redzams, nav iespējams definēt ne platumu (width), ne augstumu (height), ne ārējā atstarpes (margin). Vienkārši šādas īpašības jau pēc loģikas ir ... neloģiskas, pieņemot, ka rindā visi elementi tiek uztverti kā viena liela elementu apvienota kopa. Var arī redzēt to, ka ir samērā unikālas īpašības tieši teksta apstrādei un formatēšanai, kas jau vien liecina par to, ka inline elementi pēc savas būtības ir domāti kā teksta elementi.

Block

Bloku elementi HTML valodā pēc noklusējuma ir, piemēram, <div> </div>, <img />,<p> </p>, <h1> </h1> u.c. Šādi elementi parasti paši pēc savas būtības ir blokveida/sektorveida elementi vai paredzēti daudzu lielāku elementu apvienošanai.

Bloku elementu galvenā īpašība ir veidot atdalošus sektorus pēc sekojošām īpašībām:

  • izveidot sektoru pēc dotajiem izmēriem; ja izmērs nav dots, veidot to pēc noklusētajiem, t.i. tā, lai tas neierobežotu saturu un maksimāli tam piekļautos,
  • kārtot sektorus vienu zem otra, ja nav citu nosacījumu,
  • nepārklāties vienam ar otru, ja nav citu nosacījumu.

Lai liktu pieņemt kādam elementam bloka īpašības, to jānorāda sekojošā veidā:

div {display: block;}

Šis, iespējams, ir visvienkāršākais, tomēr vispiņķerīgākais un visplašāk pielietotais elementu tips. Tikai bloku elementiem norādāmas sekojošās īpašības:

div
{
 display: block;
 width: 100px;   /* platums */
 height: 50px;   /* augstums */
 margin: 12px;
 padding: 1px;
 position: relative;  /* pozicionēšana attiecībā pret citiem elementiem */
   top: 10px;         /* pozicionēšanai pakļauti lielumi - attālumi no katras puses */
   right: 5px;        /* augša, labā, apkaša, kreisā */
   bottom: 10px;      /* šīs īpašības var izmantot tikai kopā ar position īpašību */
   left: 5px;
 overflow: auto;      /* nosaka, kā uzvedīsies bloka saturs, kad ies "pāri malām" */
 float: left;      /* bloka "peldināšana" */
 clear: both;      /* novērš "peldēšanu" virsū kādiem elementiem */
}

Pārsvarā darbs ar bloku elementiem notiek pie mājas lapas dizaina izstrādes, jo dizaini parasti tiek veidoti tieši izmantojot "divus", kas ir tipiski bloku elementi. Viena no svarīgākajām bloku elementu īpašībām ir to "peldināšana" - tā kā nav īsti iespējams tiešā veidā novietot blakus divus bloka elementus, jāveic to "peldināšana" attiecībā pret lapas saturu.

Table

Tabulu elementi HTML valodā ir maz, piemēram, <table> </table>, <tr> </tr>,<td> </td> un vēl daži citi. Vairāk vai mazāk visi tabulu elementi ir tabulu loģiskās sastāvdaļas tās veidošanas procesā.

Tabulu elementu galvenā īpašība ir veidot tabulārus izkārtojumus, vadoties pēc sekojošām īpašībām:

  • izveidot tabulu vai tās daļu pēc dotajiem izmēriem; ja izmērs nav dots, veidot to pēc noklusētajiem, t.i. tā, lai tas neierobežotu saturu un maksimāli tam piekļautos izmērā,
  • veidot tabulas šūnas ļidzīgi kā bloku elementus, pakļaujoties ļoti līdzīgiem noteikumiem,
  • kārtot visas tabulas šūnas kolonnās, kur kolonnas platums ir platākās šūnas platumā kolonnas ietvaros un visu šīs kolonnas šūnu platums ir vienāds ar kolonnas platumu, ja nav citu noteikumu,
  • kārtot visas tabulas šūnas rindās, kur rindas augstums ir vienāds ar augstākās šūnas augstumu šajā rindā un visu šūnu augstums šajā rindā ir vienāds ar pašas rindas augstumu.

Lai liktu pieņemt kādam elementam tabulas īpašības, to jānorāda sekojošā veidā:

table {display: table;}

Godīgi sakot, neesmu nekad redzējis vai pats izmantojis šādu paņemienu... Tabulu īpašības parasti netiek uzspiestas nevienam elementam, kas jau pēc noklusējuma nebūtu tabulas elements.

Tipa uzspiešana un īpašību mantošana

Bieži notiek tā sauktā tipa uzspiešana elementam, lai tas uzvestos savādāk. Ļoti, ļoti bieži to dara ar dažāda veida tekstiem un sarakstiem. To ļoti reti dara ar attēliem, "diviem" vai cita veida bloku elementiem, bet nekad neesmu redzējis, ka to darītu ar tabulām, tabulu elementiem jebkādā virzienā.

Ļoti veiksmīgs piemērs ir paragrāfi jeb tags <p> </p>. Pēc savas būtības tas darbojas tikai ar tekstiem, tomēr jau pēc noklusējuma tas ir bloka elements. Sanāk tā, ka daudzi, daudzi inline elementi tiek savākti vienkopus un ielikti tādā kā "rāmītī", kas tos satur kopā. Tā kā inline elementiem nav iespējams normāli definēt attālumus no citiem elementiem, tad šeit palīdz šis "rāmītis" - mēs necenšamies strādāt ar tekstu, bet gan ar to vienību, kas apņem šo tekstu. Piemērs:

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Pirmā mājas lapa</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Nam ante justo, ultrices consectetur laoreet nec, mattis sit amet neque.
		</p>
		<p>
			 Nullam egestas quam id quam convallis a aliquet purus auctor.
			 Morbi faucibus fermentum mi, in fermentum erat feugiat vitae.
		</p>
		<p>
			 Integer at ligula mauris, in adipiscing est.
			 Nulla risus est, mattis sit amet gravida sit amet, pretium a erat.
		</p>
	</body>
</html>
CSS

p
{
 border: 1px solid AAA; /* rāmītis, kas parāda katru paragrāfu, pelēks */
 margin-top: 5px;       /* neliela atstarpe no augšas, lai var redzēt, kur rindkopas atdalās */
 padding: 3px;          /* zolīda atstarpe iekšupē, lai teksts "nelīp" pie malām */
   /* visas augstāk minētās ir bloka īpašības */
 text-indent: 10px;
 line-height: 120%;
 color: lime;
   /* lai arī tags <p> nav inline elements,
      mēs drīkstam tam norādīt inline elementu īpašības, jo
	    tā saturs ir šādi elementi un šis saturs pieņems īpašības,
	    kas tikušas uzspiestas <p> elementam. */
}

Sīkāk pie tipu uzspiešanas atgriezīsimies, kad veidosim izvēlnes. Tur šī metode būs ļoti nozīmīga.