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

Teksta formatēšana

Teksts ir visur, visās mājas lapās! Pilns internets ar tekstu!! Pamata ideja mājas lapām arī ir teksts. Pašos pirmsākumos HTML valoda arī tika radīta ar domu izveidot universālu starpplatformu (dažādu operētājsistēmu) dokumentu formatēšanas un kārtošanas iespēju dokumentos. Varat uzskatīt HTML un CSS valodas kā zema līmeņa MS Word vai OpenOffice Writer programmas, tikai tas viss notiek koda līmenī, nevis grafiski! Tieši šī iemesla dēļ tekstam HTML un CSS valodā veltīts visvairāk tagu un īpašibu.

Virsraksts

Lielākais vairums dizainā ir pabeigts, palikuši tikai pāris sīkumi. Laiks tos sakārtot, un sāksim kārtošanu no augšas! Mums pietrūkst mājas lapas titula virsraksta. Izveidosim to:

HTML
...
        <div id="top">
          <span id="mainTitle">Mana pirmā mājas lapa</span>
        </div>
...
CSS
/* ... */
#top span#mainTitle
{
 font-size: 36px;                                   /*     lieli ... */
 color: #060;                                       /* ... zaļi...   */
 font-style: italic;                                /* ... slīpi...  */
 font-family: Verdana, "DejaVu Sans", sans-serif;   /* ... burti!    */
}
/* ... */

Ja HTML sadaļā nav nekā īpaši jauna, tad CSS jau atkal ir kaut kas jauns! Pēdējā rindiņa... Veidojot mājas lapas visu laiku ir jādomā, kā tā izskatīsies nevis uz jūsu datora, bet kā tā izskatīsies uz citu datoriem! Šeit vienmēr ir jādomā kā pesimistam - jāapsver paši ļaunākie iespējamie varianti. Fonts, kāds būs burtiem - tiek vienkārša lieta var mainīt daudz ko, tādēļ "jānobruņojās" ar rezervi. Īpašībai font-family (burtu stils) var kabināt klāt vērtības tik, cik uziet! Doma ir tāda, ka dators centīsies rindas kārtībā atrast un pielietot pirmo iespējamo fontu. Vienkārši? Nebūt ne! Cik dažādi datori, tik dažādu fontu. Katrai operētājsistēmai ir savi iebūvēties noklusējuma fonti, ir iespējams jebkurā brīdī pievienot jaunus vai dzēst jau esošos. Tas visu sarežģī, jo mājas lapas veidotājam jāspēj prognozēt gan tas, kādi fonti varētu būt uz lietotāja datora, gan tas, kā ar šiem fontiem lapa izskatīsies. Šeit norādīti divi fonti un "glābšanas riņķis". Vispirms par fontiem. ja fonta nosaukums ir viens vārds, to nav vajadzības likt pēdiņās, bet ja fonta nosaukums sastāv no vismaz diviem vārdiem, to obligāti jāliek pēdiņās, savādāk dators nesapratīs un neatpazīs. "Glābšanas riņķis", ko iepriekš minēju, ir frāzīte sans-serif. Katrs fonts, kas tiek veidots, tiek klasificēts.

Minot kādu no fontu klasifikātoriem, operētājsistēma pati izvēlēsies, kādu fontu pielietot no tai pieejamajiem šāda tipa fontiem, ja nav ticis atrasts neviens fonts no iepriekš minētajiem. Tas ļauj kaut daļēji saglabāt mājas lapas stilu nezinost, kāds fonts tiks pielietots. Centieties lietot tikai populārus, labi zināmus ununiversālus (daudzvalodu) fontus; latviešu valoda ir viena no tām valodām, kam nepieciešami unikāli simboli, kas nav sastopami daudzās citās valodās, tādēl šis ir vēl viens iemesls neaizrauties ar unikāliem, skaistiem fontiem. Pēdējo iemeslu, kādēļ nevajadzētu šādus fontus izmanto, jūs varat pārbaudīt paši - pamēģiniet izlasīt kaut pusi A4 lapas ar mākslinieciska tipa fonu veidotu tekstu... ātri "galus atdosiet"! Atcerietis - mājas lapai ir jāpiesaista uzmanība, nevis "jānokauj" cilvēka redze!

Turpinot virsrakstu, vajadzētu to novietot pareizi. Šī ir viena no retajām reizēm, kad var pielietot pozicionēšanu. Vispirms nodemonstrēšu, kā to dara un pēc tam paskaidrošu, kas tas ir:

CSS
/* ... */
#top span#mainTitle
{
 font-size: 36px;
 color: #060;
 font-style: italic;
 font-family: Verdana, "DejaVu Sans", sans-serif;
 display: block;      /* pārveidojam uz bloka tipa elementu mūsu virsrakstu */
 width: 220px;        /* uzstādam konstantu platumu, lai panāktu pārnesi jaunā rindā */
 position: relative;  /* pozicionēšana relatīvi tā atrašanās vietai */
   top: 40px;               /* atstarpe no augšas */
   left: 150px;             /* atstarpe no kreisās */
}
/* ... */

Līdz īpašībai position visam vajadzētu būt skaidram. Pozicionēšana - tā ir īpašība bloka tipa elementiem, kas ļauj to pārvietot brīvi pa mājas lapu, ignorējot jebkuru citu objektu tā ceļā. Ļoti parocīga īpašība, bet tajā pašā laikā ļoti "slidīga".

Uzdodot pozicionēšanas īpašību, pirmais, kas ir jānorāda, ir atskaites punkts. Ir četri veidi, kā uzdot atskaites punktu objektam, to pozicionējot "brīvajā telpā":

  • statiskā pozicionēšana (tulk. uz angļu val "static") - noklusējuma pozicionēšana, uzvedīsies kā tika aprakstīts par bloku elementiem,
  • fiksētā pozicionēšana (tulk. uz angļu val "fixed") - šāda pozicionēšana nosaka objekta atrašanās vietu, kā atskaites punktu uzstādot pārlūka iekšējā loga (logs, kurā mainās mājas lapas saturs) augšējo kreiso stūri,
  • relatīvā pozicionēšana (tulk. uz angļu val "relative") - šāda pozicionēšana nosaka objekta atrašanās vietu, kā atskaites punktu uzstādot hierarhijā pēdējā elementa, kurā tas atrodas, augšējo kreiso stūri,
  • absolūtā pozicionēšana (tulk. uz angļu val "absolute") - šāda pozicionēšana nosaka objekta atrašanās vietu, kā atskaites punktu uzstādot hierarhijā pēdējā elementa, kurā tas atrodas, augšējo kreiso stūri, ja šim elementam pozicionēšana nav statiska (noklusētā).

Īpašības left (kreisā), top (augša), right (labā) un bottom (apakša) nosaka to, kādu attālumu no konkrētās puses ievērot. Šīs īpašības strādā visos pozicionēšanas režīmos izņemot statisko pozicionēšanu (noklusētā). Izvairieties pielietot šo metodi, ja vien neesat pārliecināts, ka tā dara tikai to, ko jūs vēlaties! Šai īpašībai ir tencence "ignorēt" visu apkārtējo, kas bieži izraisa negaidītu blakus efektus, tāpēc dizainu veidošanā šadas pozicionēšanas neizmanto... parasti!

Galvenais teksts

Ar virsrakstu esam tikuši galā. Atliek teksts!

Kā jau iepriekš minēju, nevienu elementu mājas lapā nevajadzētu atstāt "peldam" brīvi pa kādu lapas daļu. Tas it īpaši attiecas uz tekstu. Šeit bieži notiek vislielākā grēkošana, jo tekstam taču ir tik daudzi un dažādi tagi! Protams, ne vienmēr tos visus vajag izmantot, un mums šajā gadījumā pietiek ar pāris no tiem. Vispirms izveidosim galvenā teksta virsrakstus:

HTML
...
        <div id="text">
          <h1>Virsraksts tēmai</h1>
        </div>
...
CSS
/* ... */

*
{
 margin: 0; padding: 0;
 font: 12px/120% Verdana, "DejaVu Sans", sans-serif;
}

/* ... */

div#text
{
 width: 700px;         /* samazinam izmēru no 720px uz 700px, jo ... */
 pdding: 10px;         /* tiks pievienots "polsterējums", lai teksts nelīp pie malām klāt */
 /* height: 500px; */  /* likvidējam augstumu, jo tas mums vairs nebūs vajadzīgs,
                          to veidos mājas lapas teksta saturs */
 float: left;
}

/* ... */

#text h1
{
 font-size: 17px;
 color: #060;
 border-bottom: 2px solid #060;
 padding: 10px 0 5px;
}
/* ... */

Nu gan daudz sagāzu! Bet neskrieniet, izpētiet! Lielāka daļa šeit redzamo lietu sāk atkārtoties. Patiesībā klāt nāca tikai viena vienīga lieta - saīsinātais "font" pieraksts. CSS valodā var saīsināt pusi no visa koda, tā tas ir. Arī teksta formatēšana tiek saīsināti pierakstīta, lai apvienotu veselu kaudzi īpašību vienā īsā rindiņā. Šeit, līdzīgi kā pie "border" īpašībām, ir savrīga secība, kas pēc kā tiek minēts. Zemāk piemērā tiks nodemonstrēta secība visām īpašībām, kas var tikt minētas "font" atribūtā:

CSS
span
{
 font-style: italic;          /* slīpraksts nāk pirmais */
 font-variant: small-caps;    /* lielo/mazo burtu automātiska pārveidošana */
 font-weight: bold;           /* treknraksts */
 font-size: 20px;             /* burtu izmērs */
 line-height: 150%;           /* līnijas augstums */
 font-family: Tahoma, serif;  /* stils */
}

Un īsāk visu to pašu var pierakstīt šādi:

span {font: italic small-caps bold 20px/150% Tahoma, serif; }

Izmantojot tieši šādu metodi, mūsu mājas lapā norādītas teksta īpašības. Protams, vairākas no tām ir izlaistas, bet, kamēr netiek mainīta pārējo īpašību secība, izlaistās īpašības tiek atstātas uz noklusētajām vērtībām.

Un nu pēdējā lieta, kas attiecs uz tekstu: noformatējam paragrāfus atbilstoši tam, kā tiem vajadzētu izskatīties:

HTML
...
        <div id="text">
          <h1>Virsraksts tēmai</h1>
          <p>Lorem ipsum dolor sit amet [..]</p>
          <p>Vivamus quis turpis nisi [..]</p>
        </div>
...
CSS
p
{
 text-indent: 1.27cm; /* šī laikam ir vienīgā vieta, kur es jebkad lietoju centimetrus, */
                      /* jo MS Word programmā šāds attālums ir pēc noklusējuma! */
                      /* ievērojiet decimālo simbolu! */
 text-align: justify; /* teksta izlīdzināšana (kārtošana) */
 padding: 5px 0;      /* neliela atstarpe starp rindkopām - zolīdi! */
}

Mājas lapa strauji tuvojas tās nobeiguma stadijai. Nākamajās sadaļās izveidosim nelielu fotogaleriju, kur bildes savāksim tabulā, izveidosim arī atsevišķu sadaļu, lai nodemonstrētu, kā strādā hipersaites, un tad jau lapa būs pabeigta!