Tekst

“Alguses oli Sõna…” Nii algab  Uue Testamendi Johannese Evangeeliumi raamat. Ma pole ristiusku ja seepärast ei tea, mida need sõnad tähendama peaks. Küll aga tean mida see tähendab veebiarenduses: ilma tekstita pole keegi veel ühtegi täisväärtuslikku veebilehte loonud.

XHTML

Paragrahv
Paragrahv on veebilehe kõige lihtsam ehitusüksus, mis koosneb tekstist, numbritest, märkidest ja sümbolitest. Paragrahvi märgendiks on  <p>, tegemist on täismärgendiga, ehk element koosneb alg-ja lõppmärgendist. Kui te proovite sisestada teksti niisama tekstiredaktorisse, ilma paragrahvi märgendita, ilmub tekst veebisirvija aknas. KUID seda teksti ei saa hiljem kujundada, selle asukoha muuta jm.

See on täiesti harilik paragrahv

Probleem:  Mitme realine tekst avaneb veebisirvijas ühes reas

Kui tahate, et teie tekst oleks mitmel real, võib kasutada kahte viisi: te loote iga rea jaoks uue paragrahvi, kuid siis jäävad veebisirvijas ridade vahele palju ruumi. Paremaks variandiks on kasutada märgendit “break line” ehk rea lõhkujat. Break line on poolmärgend, mis vajab ainult algmärgendit <br/>.  Rea lõhkuja viib endast paremale jääva teksti järgmisele reale. 

Pealkirjad

Igal tekstil peab olema pealkiri. Pealkirjatu tekst ei kutsu lugema ja tänapäeval mängib pealkiri isegi olulisemat rolli kui teksti sisu. Märgendiks on “h” ja pealkirja järgunumber. Näiteks esimese järgu pealkirja märgendiks on <h1>. Xhtml-s on pealkirjadel 6 astet: Esimene on kõige suurem ja kuues on kõige väiksem. Pealkirjade puhul kehtib reegel: pealkirjadel on oma hierarhia, suurema järgu pealkirjale peab järgnema väiksema järgu pealkiri. Esimese järgu pealkiri esineb üldjuhul vaid ainult ükskord. Järgnevaid saab kasutada, kuidas iganes sobib.

Rasvane tekst ja kaldkiri

Selleks, et teha osa tekstist või kogu tekst rasvaseks on kaks märgendit: <b>  ja <strong>. Mõlemad saavad oma ülesandega suurepäraselt hakkama. Selleks, et tekst ilmuks kaldkirjas, kasutatakse märgendit <i> või <em>.

See on <em>kaldkiri</em> ja see on <strong> rasvane tekst</strong>

Kommentaarid ja vahejooned

Veebilehe loomisel on vahete vahel vajadus lisada lähtekoodi omapoolseid kommentaare. Kuid niisama kirjutamisel ilmub tekst veebisirvijas, ning see variant ei sobi. Lahenduseks on kommentaari märgend. Komentaari märgendis asuvat teksti ignoreerib veebisirvija täielikult, ning seda saab vaadata ainult avades veebilehe lähtekoodi. Kommentaare tehes, peab olema ettevaatlik, et nendes poleks mainitud midagi veebilehe turvaaukudest.

Vahejoon on paks joon, mis jagab veebilehe osadeks. Seda kasutatakse suhteliselt harva, kuid sellegipoolest on see suhteliselt kasulik asi. Märgendiks on <hr/>.

Üla-ja alaindeks

Kui teie veebilehel on palju valemeid ja üleüldse on ta seotud teadusega, siis vahete-vahel tekib vajadus lisada tekstile üla- ja alaindekseid. Selleks, et lisada ülaindeks paneme lisatava indeksi ümber <sup> märgendid. Selleks, et lisada alaindeks, tuleb alumise indeksi ümber panna <sub> märgendid.

Tsitaadid

Xhtml-s kasutatakse erinevat tüüpi tsitaadimärgendeid. Igal märgendil on omad plussid ja miinused ning kasutusalad. Blokktsitaati kasutatakse pikemate tsitaatide puhul, siis kui ta on mitmerealine. Tsitaadi märgendiks on <blockquote> ja selle sisse käivad paragrahvid.  Antud märgendi miinuseks on see, et ta ei tee tekstiga midagi silmapaistvat: ta liigendab tsitaadi veid paremale poole.

Teiseks tsitaadimärgendiks on <q> märgend, mida kasutatakse mõne paragrahvi sees. See märgend lisab tsitaadile jutumärgid ümber, kuid mõningad veebisirvijad ei näita neid. Seepärast kasutatakse neid harva.

Lühendid ja viited

Kui te kasutate tekstis lühendeid, ning te ei taha ruumi kulutada lühendite selgitamiseks, saab kasutada lühendi märgendit <abbr> , mille atribuudi väärtuseks on lühendi selgitus ja märgendite vahel on lühend, mille kohta tuuakse selgitus. Veebisirvijas avaneb lühendi selgitus jutumullis, kui viia hiirekursor sõna peale.

Kui te viitate tekstis allikale, siis peaks allika pealkiri olema eriliste <cite>- märgendite vahel. Märgendite vahel olev tekst muutub rasvaseks ja veidi suuremaks kui ümbritsev tekst.

Allajoonimised ja mahatõmbamised

Selleks, et teksti läbiks must, rasvane joon tuleb antud tekst paigutada <del> märgendite vahele. Kuid, kui te tahate millegile tähtsale joone alla tõmmata, siis lisage <ins> märgendid. NB! Allajoonitud tekste peetakse tavaliselt linkideks!

See siin peaks olema<del>väheoluline tekstiosa, seepärast tõmban selle maha</del> ning
see on <ins>see on väga oluline tekstiosa</ins>

CSS

Nüüd, kui me teame kuidas üht või teist sorti teksti veebilehele lisada, oleks tarvis selgeks saada, kuidas seda teksti kujundada saaks. Kui me paneme teksti üles ilma kujunduseta, näeks see välja nagu üks nendest algelistest veebilehtedest 90-aastatest. Kuid me elame praegu 21.sajandil ja kõik peab olema ilus!

Kirja stiil

Selleks, et muuta teksti kirjastiili, tuleb stiililehte lisada muudatava märgendi tähis, seejärel lisada looksulud mille vahele lisada omaduseks font-family ja parameetriks vajalik kirjastiil. Kirjastiili valimisel peab olema ettenägelik, ning valima kõige levinumaid kirjastiile. Te võite ju valida väga ilusa kirjastiili, mis teie arvutis paistab ilusana, kuid teiste arvutis paistavad sõnad hieroglüüfidena. Tavaliselt kirjutatakse kirjastiili parameetriks mitu sarnast stiili, eraldades neid komaga, näiteks font-family: arial, helvetica. Juhul kui kasutaja arvuti ei tunne üht kirjastiili ära, kasutab ta teist. Juhul kui kirjastiili nimi on mitmeosaline, nagu “Times New Roman”, siis peab stiilinimetus olema jutumärkide vahel.

Kirja suurus, rasvasus ja kallutatus

Tähtede suuruse muutmiseks kasutatakse omadust “font-size”, ning selle parameetri väärtust määratakse pikslites, nagu ka tavalistes tekstiredaktorites. Kirja suuruse muutmisel ärge unustage, et teil on ka pealkirjad ja alapealkirjad, mis tihti peale sobivad rohkem kui lihtsalt suurte tähtedega kirjutatud tekst.

Selleks, et muuta tekstilõik või pealkiri rasvaseks tuleb kasutada “font-weight” omadust, millel on mitmeid parameetreid, kuid kõige levinumad on “bold” ja “normal” ehk siis “rasvane” ja “tavaline”. Kaldkirja lisamiseks saab kasutada css omadust “font-style”, millel on kõigest kaks parameetri väärtust: “italic” ja “normal”.

Teksti transformeerimine

Teksti transformeerimine kujutab endast ette teksti tähtede muutmist suurtähtedeks, väiketähtedeks ja suurtähe lisamist igale sõnale.  Css-i omaduseks teksti transformeerimisel on “text-transform”

• text-transform: capitalize; Muudab iga sõna esimese tähe suurtäheks.
• text-transform: uppercase; Muudab kõik tähed suurtähtedeks.
• text-transform: lowercase; Muudab kõik tähed väiketähtedeks.

Teksti paigutus

Sellised omadused nagu “word-spacing” ja “letter-spacing” määravad vastavalt sõnade või tähtede vahelise kauguse. Nende parameetrite väärtuseks võib olla “normal” või siis mõni muu arvuline väärtus.

Omadus “text-height” määrab tekstirea kõrguse, parameetri väärtus on pikslites, ning omadus “text-length” määrab tekstirea pikkuse, selle parameetri väärtust märgitakse protsentides.

“Text-align” määrab teksti asukoha elemendis. Selle omaduse parameetriteks “left”- vasak, “right”-parem ja “center”- keskel.

Kokkuvõte

Antud artikkel on suhteliselt sisukas ja kõik siit loetud ei esimese korraga pähe, ega peagi jääma. Valige enda jaoks kõige põhilisemad märgendid ja omadused, mida teile vaja läheb ja õppige korralikult selgeks. Kõige tähtsamateks teemadeks selles artiklis on pealkirjad, paragrahvid, kommentaarid, teksti paigutus, suurus, rasvasus ja kaldkiri. Õppige need teemad korralikult selgeks, ülejäänu peast teadmine pole nii oluline.