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

Jaunu sadaļu veidošana

Mājas lapas dizains praktiski ir pabeigts un var tikt pielietots reālas lapas izveidei. Protams, saturu mājas lapai ļaušu veidot jums pašiem. Bet ir pāris lietas, ko vēl neesmu izstāstījis. Tās mēģināšu izstāstīt šajā sadaļā.

Mājas lapa parasti sastāv nevis no vienas, bet no vairākām lapām. Arī fiziski tas ir cits fails. Ja tiek veidota mājas lapa, pēc būtības tās ir vairāku vienas un tās pašas lapas kopiju izveide, mainot tās saturu, bet neskarot tās rindiņas, kas ir atbildīgas par dizainu. tad tā arī tagad izdarīsim: izveidosim faila index.html kopiju, nosaucot to savādāk:

Jaunajā sadaļā veidosim ļoti vienkāršu foto galeriju. Bet pirms veidojam saturu, vajadzētu izvēlnē savienot šos divus failus, lai būtu iespējams "ceļot" no vienas lapas uz citu un, protams, pēc tam arī atapakļ. Tā kā izvēlne visas lapas ietvaros saglabāsies vienāda, tad tas, ko es tūlīt rādīšu, attieksies uz visiem konkrētās lapas HTML failiem un to saturu:

HTML
...
      <div id="menu">
        <ul>
          <li>
            <a href="index.html">Galvenā lapa</a> <!-- galvenās lapas adrese -->
          </li>
          <li>
            <a href="foto.html">Fotogalerija</a> <!-- bilžu galerijas adrese -->
          </li>
          <li>
            <a href="#">Kontaktinformācija</a> <!-- pārējās adreses pagaidām atstājam kā ir -->
          </li>
          <li>
            <a href="#">Kaut kāda cita sadaļa</a>
          </li>
        </ul>
      </div>
...

Tik vienkārši! Bet šeit bieži rodas dažādas problēmas, kas saistītas ar to, ka aizmirstas kādā failā norādīt "atpakaļadreses" vai arī pilnībā aizmirstas rediģēt izvēlni, tādējādi liedzot ceļot pa lapām. Šis ir viens no punktiem, kur skaidri un gaiši redzams kāds tīra HTML pielietojuma trūkums - nemitīga un nevajadzīga koda atkārtošana. Jo lielāka lapa augs, jo grūtāk būs pārraudzīt visas adreses un failus. Mūsdienās šo problēmu risina servera puses programmēšanasvalodas, piemēram, PHP, ASP, Ruby on Rails u.c. Tas tā - idejai, ar ko turpināt pēc šīs apmācības...

Vienkāršota fotogalerija

Fotogalerijas var tikt veidotas ļoti daudzos un dažādos veidos. Es parādīšu to vienkāršāko un uzskatāmāko variantu. Tā darīšu galvenokārt, lai parādītu, kā izmantot atsevišķus vēl neparādītus HTML elementus.

Tabulas izveide

Sāksim jau ar to, ka definēsim, kādai vajadzētu izskatīties fotogalerijai. ... jau pateicu priekšā, ka tā būs tabula. Normāli mums atkal vajadzētu ņemt kādu grafisko zīmēšanas programmu un izveidot skici jeb maketu tam, kā tas viss izskatīsies. Šoreiz darīsim savādāk - uz izjūtām! Bieži, veidojot mājas lapas, nav jēgas iedziļināties sīkumos, cenšoties tos uzzīmēt. Vieglāk ir izdomāt galvā, kā tas izskatīsies, ātrāk ir to visu izrēķināt un notestēt jau kodā. Te nu pieredze jums pateiks priekšā, kurās situācijās to var atļauties, bet kurās situācijas tas var smagi atmaksāties. Tabulas bieži ir vairāk saistītas ar rēķināšanu, t.i. cik vietas tabulai atvēlēts, tādēļ tās nav vajadzības zīmēt.

Tagad parēķināsim, cik daudz vietas atvēlēt vienam attēlam. Mums ir zināms, ka viss galvenais un mainīgais mājas lapas saturs atrodas "divā" div#text. Šī "diva" platums ir 700px (atrēķinot atsparpes no abām malām). Augstums, protams, neierobežots! Cik bildes mēs vienā rindā varētu sabāzt? Ietekmējoši ir vairāki faktori:

  • atcerieties, ka jūs esat savas mājas lapas dizaineri, jums ir svarīgi, kā tas izskatās; nevajadzētu bildes izveidot pārāk lielas, jo diezgan loģiska un populāra funkcija ir palielināt bildi, uzklikšķinot uz tās; arī pārāk mazas veidot ir nepateicīgi, jo tad šis samazinātais attēls būtu pārāk mazs, lai dotu jebkādu priekšstatu par attēla saturu kā tādu,
  • vajadzētu atcerēties arī par to, ka, veidojot izkārtojumu, bildes nebūt neatradīsies viena pie otras (salipušas kopā), šī atstarpe ir jāievēro, un tieši tā pat kā iepriekš, to nevajadzētu izveidot pārāk mazu vai pārāk lielu.

Šajā gadījumā optimāli (pēc maniem uzskatiem, tas nebūt nenozīmē, ka tas ir tas pareizākais viedoklis) būtu izveidot atstarpes 5px platumā no visām pusēm, kas summā dotu 10px starp attēliem, bet attēlus izvietot trīs vienā rindā; paltums atkarībā no tā, cik daudz vietas paliek pāri. Lai arī tās visas varētu tikt definētas kā attēlu īpašības, šajā gadījumā tas nebūtu svarīgi, vai tabulas šūnas, kas ierobežos attēlu, saņēms šīs īpašības, vai arī pats attēls. Tad nu izveidosim vispirms tabulu:

HTML
...
        <div id="text">
          <h1>Fotogalerija</h1>
          <table>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>
          <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
          </tr>
          <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
          </tr>
          </table>
        </div>
...

Augstāk minētajā piemērā tika izveidota tabula <table> </table> (tulk. uz angļu val. "table") ar četrām tabulas rindām <tr> </tr> (tulk. uz angļu val. "table row"), kur katrā rindā ir trīs tabulas šūnas <td> </td> ("tabulas dati", tulk. uz angļu val. "table data"). Šāda ir HTML valodas tabulu veidošanas stuktūra. Kā var redzēt, vajadzīgs ļoti daudz koda tabulas struktūras izveidošanai vien, tādēļ īpaši pie tabulu veidošanas centieties ievērot kārtīgu pierakstu, jo pazaudēt kādu neaizvērtu, neatvērtu vai vienkārši neuzrakstītu tagu ir ļoti viegli.

Līdzīgi kā citi elementi, tabulai noklusētais izskats ir samērā ... neredzams. Tabula ir īpašs elements, tādēļ, papildus jau esošajām īpašībām, tabulai ir arī savas speciālās īpašības, kas nestrādās nevienam citam elementam:

CSS
table
{
 border-collapse: seperate; /* collapse */
 /* šī īpašība nosaka, vai šūnas būs "salipušas" kopā vai katrai šūnai būs savs rāmītis */
    border-spacing: 2px 3px;
	/* ja augstāk minētā īpašība ir "seperate"; nosaka attālumu starp šūnām tabulas iekšienē */
 empty-cells: show; /* hide */
 /* pasaka to, rādīt vai slēpt šūnas, kurām nav satura */
}

Protams, saglabājas visas īpašības, kas šķiet loģiskas tabulai: atstarpes, rāmji, teksta pozicionēšanas u.c. Tad nu uzstādīsim mūsu tabulu un tās šūnu īpašības kā es izspriedu augstāk. mūsu, konkrētajā lapā būs tikai viena vienīga tabula, tādēļ tai pat nelietošu klasi vai identifikātoru. Protams, labāk būtu to darīt, bet tā kā es zinu, ka citu tabulu lapā nebūs, tas neko nemaina:

CSS
/*...*/
table
{
 border-collapse: seperate;
 border-spacing: 5px;
}

td
{
 border: 1px solid #999;
 width: 224px;
}
/*...*/

Vairāk vai mazāk viss jau ticis stāstīts. Vienīgā piebilde par šūnas platumu 224px. Tā kā kopējā pieejamā vieta tabulai ir 700px un katra šūna ir atdalīta no abām pusēm ar 5px atstarpi, sanāk, ka uz 3 šūnām platumā katrai atliek 233,3333... px, kas ir aptuveni 224px. Tik vienkārša matemātika!

Tik pat labi varējām ļaut tabulas šūnām pielāgoties platumā atkarībā no tās satura. Nebūt nav obligāti uzstādīt šūnas platumu, bet tādā veidā mēs iegūstam lielāku kontroli pār izskatu un saturu; tā pat mājas lapas platums šajā gadījumā ir statisks.

Tabulu tehniskā puse

Kādreiz ļoti plaši tabulas izmantoja dizaina veidošanā "divu" vietā. Tabulas veidot un kontrolēt to uzvedību ir vienkāršāk, bet tikai cilvēkam!

Tabulas ir tehniski otrs smagākais elements tieši aiz attēliem HTML valodā. Noģenerēt vienu tabulu, protams, datoram nav nekādas grūtības, it īpaši ņemot vērā mūsdienu datoru jaudas. Noģenerēt vairākas tabulas - jau nedaudz grūtāk. Bet brīdī, kad dizains balstās uz tabulām, lapās ir tabulas un arī galerija ir veidota kā tabula, tas ir vesels tabulu mudžeklis, tās ir tabulas tabulā! Šādas konstrukcijas datoram uzbūvēt nav viegli, un bieži tas ir ir iemesls lēnām lapām.

Tabulas vajadzētu izmantot tikai un tikai tur, kur nepieciešams galējs tabulārs izkārtojums vai nepieciešams atspoguļot tiešām tabulāru informāciju. Arī šajā gadījumā, bija iespējams galeriju izveidot savādākā veidā, izmantojot "divus". Protams, tas ir nedaudz sarežģītāk... Vienīgais iemesls, kādēļ šeit izvēlējos tabulu, ir tāpēc, ka vēlējos nodemonstrēt, kā tehniski izveidot tabulu un kādas ir tās īpašības.

Attēli

Mājas lapas bez attēliem nav nekādas mājas lapas! Vidēji mājas lapās ir vismaz 10 attēli dizainam un vēl vismaz tik pat daudz attēlu kā vienkāršas bildes lapas saturā. Reizēm attēlu skaits vienā lapā var pārsniegt pat simtus! Un tomēr, lai arī cik populārs nebūtu šis mājas lapas elements, ar to jābūt īpaši piesardzīgam, jo tas ir vissmagākais un visilgāk lejuplādējamais elements standarta HTML elementos!

Pirms ievietojat kādu attēlu mājas lapā, ieteiktu pasekot līdzi pāris parametriem, kas būtiski ietekmēs mājas lapas ātrdarbību un izmēru:

  • attēla gabarītizmēri: ja, piemēram, ievietojat fotogrāfiju mājas lapā, padomājiet, vai jums tiešām nepieciešams ielikt 3200x2400px izmēra bildi pa taisno lapā; tikai īpaši, parasti ne mājas apstākļos sastopami, monitori ir spējīgi pilnībā attēlot šādu gabarītu attēlus; vienmēr centieties attēlus samazināt līdz tikai vajadzīgajam lielumam, jo, samazinot attēlu tikai divas reizes, izmērs uz diska sarūk gandrīz četras reizes,
  • attēla "svars": attēli sastāda 60% līdz 98% mājas lapas kopējā "svara" (t.i. kilobaiti, megabaiti, gaigabaiti u.t.t.), tādēļ tieši attēli parasti ir tie, kas bremzē lapas ielādi jūsu datorā visvairāk; centieties pēc iespējas optimizēt attēla izmēru un formātus, lai iegūtu maksimāli mazu izmēru katram attēlam, kas ir jūsu lapā,
  • faila formāts: lielākais grēks ir saglabāt mājas lapai paredzētos attēlus nekompresētos formātos, piemēram *.bmp; nekad nelietojiet nekompresētos formātus mājas lapās, ja nav īpašas nepieciešamības; labākie un populārākie mājas lapu attēlu formāti pagaidām ir *.jpg, *.gif un *.png,
  • attēlu atkārtošana: organizējiet attēlu atrašanos mājas lapā tā, lai nevienu attēlu nekad nevajadzētu kopēt un atkārtot failu sistēmā; tomēr ir kāds īpašs gadījums, kad attēlus kopē speciāli - lai paātrinātu lapas ielādi vietās, kur ir ļoti daudz attēlu paraugu (piemēram, fotogalerijas), kā paraudziņi tiek ielādēti lielo attēlu mazas kopijas, bet tikai apskatāmais attēls tiek ielādēts oriģinālajā izmērā; šādas metodes ieguvumi ir ātrums, bet tā vietā tiek ziedots tikai nedaudz vietas dubulto, bet miniatūro attēlu uzglabāšanai, parasti šī metode sevi attaisno!

Ievietot attēlu mājas lapā ir ļoti vienkārši. Piemērs:

HTML
...
        <img src="images/bilde.jpg" alt="attēla apraksts" />
...

Attēlu ievietošanas tags ir viens no retajiem pašnoslēdzošajiem tagiem. Attēli mājas lapās netiek iekļauti, tiem tiek rezervēta vieta un tikai pēc tam tie tiek ielikti tiem atvēlētajā vietā, tādēļ šim tagam ir obligāti divi atribūti:

  • src ("source", tulk. no angļu val. "avots") - attēla adrese jeb atrašanās vieta, līdzīgi kā hipersaitēm,
  • alt ("alternative", tulk. no angļu val. "alternatīva, cita izvēle") - tā kā attēls ir ārējs avots un tam lapā tiek rezervēta vieta, tad tajā kaut kas ir vienmēr jāieliek; gadījumā, ja attēla avots pazūd un vairs neeksistē, HTML valoda rezervētajā vietā ievietos attēla alternatīvo tā aprakstošu tekstu norādot,ka tur vajadzēja būt attēlam, bet nekropļojot mājas lapas saturu, atstājot lielu, baltu, nesaprotamu pleķi.

Lai arī cik tas varētu nešķist dīvaini, <img /> tags pēc noiklusējuma ir inline, nevis bloka elements, tāpēc ar to esiet uzmanīgi.

Attēlam nav nekādu īpašību, kas būtu īpaši izceļamas. Visas loģiskās īpašības, kādas vien varat iedomāties attēlam, var tikt pielietotas. vēlos atzīmēt tikai attēla gabarītus. Pēc noklusējuma attēls tiks ievietots oriģinālizmērā, ja nav citu nosacījumu vai ierobežojošo faktoru. Ir iespējams definēt īpašības width un height, tomēr šeit ir viens āķis, kas nedaudz atvieglo darbu ar attēliem: pietiek norādīt tikai vienu no diviem izmēriem, un dators automātiski izrēķinās proporcionāli otru parametru, cenšoties nekropļot attēla dimensijas, bet ja tiks norādīti abi izmēri, dators ļaus kropļot attēlu, neievērojot dimensiju proporcijas.


Kad tas viss ir izrunāts, piepildīsim mūsu galeriju ar attēliem. Pilnīgi visi galerījā atrodamie attēli nav mani, tie ir publiski pieejami kaut kur internetā, un es nepiesavinos nekādas autortiesības uz tiem:

HTML
...
        <div id="text">
          <h1>Fotogalerija</h1>
          <!-- samazināju tabulu līdz izmēram 3x2, lai būtu kaut nedaudz pārskatāmāk -->
          <!-- izmantoju augstāk aprakstīto metodi ar miniatūru uzskates failu izmantošanu -->
          <!-- uzklikšķinot uz piemēra attēlu, tas aizvedīs uz pilno attēlu jaunā lapā -->
          <table>
            <tr>
              <td>
                <a href="images/test1_full.jpg" target="_blank">
                  <img src="images/test1_small.jpg" alt="" />
                </a>
              </td>
              <td>
                <a href="images/test2_full.jpg" target="_blank">
                  <img src="images/test2_small.jpg" alt="" />
                </a>
              </td>
              <td>
                <a href="images/test3_full.jpg" target="_blank">
                  <img src="images/test3_small.jpg" alt="" />
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="images/test4_full.jpg" target="_blank">
                  <img src="images/test4_small.jpg" alt="" />
                </a>
              </td>
              <td>
                <a href="images/test5_full.jpg" target="_blank">
                  <img src="images/test5_small.jpg" alt="" />
                </a>
              </td>
              <td>
                <a href="images/test6_full.jpg" target="_blank">
                  <img src="images/test6_small.jpg" alt="" />
                </a>
              </td>
            </tr>
          </table>
        </div>
...
CSS
/*...*/
td img
{
 border-width: 0; /* ja attēlam uzliek hipersaiti,
                     pārlūkiem ir tendence uzlikt
                     rāmīti hipersaites krāsā */
}
/*...*/

Īsumā arī par attēliem tas ir viss!