Tekst

U prethodnoj jedinici smo razmatrali kreiranje jedne jednostavne stranice i sa njom tri
osnovna taga u HTML jeziku (html, head i body). U ovoj jedinici emo se detaljno upoznati
sa najee korienim tagovima HTML jezika.

Naslovi (headings)

Naslove smo ve sreli u prethodnim lekcijama. Pored toga to oznaavaju delove teksta,
naslovi slue kako bismo pravilno strukturirali dokument.

Primer naslova u HTML jeziku:

<h1>Lorem ipsum dolor sit amet</h1>

<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<h5>Lorem ipsum dolor sit amet</h5>
<h6>Lorem ipsum dolor sit amet</h6>

i prikaz u browseru:

slika 4.1 heading tagovi prikazani u browseru (od h1 do h6)

Copyright Link group

Vano je zapamtiti vie detalja kada je re o naslovima.

U naslovima se postavlja samo kratak, ist tekst naslova. Ne moemo postavljati

itave tekstove, slike i tako dalje. Iako ovo pravilo deluje logino, esto se pojavljuju
ovakve greke.
Mora se potovati pravilna hijerarhija naslova. h1 se koristi za glavne naslove. h2 za
podnaslove. Ukoliko postoji potreba za daljim grananjem teksta (posle h2), koristimo
h3 podnaslove, i tako dalje. Ne moemo postaviti h4 podnaslov odmah posle h1, na
primer, ili h1 posle h2.
Naslovi se ne koriste radi poveavanja veliine teksta i/ili postavljanja bold
formatiranja.

Po osnovnim, default podeavanjima, poto postavimo odreenom tekstu oznaku naslova

(heading tag) njemu se automatski poveava font i postaje bold.

Paragrafi (paragraphs)

Paragrafi su ono to esto nazivamo obinim tekstom. Kao i kod naslova, paragrafe
kreiramo tako to tekst okruimo poetnim i zavrnim p tagom.

Po osnovnim, default vrednostima, svaki paragraf, browser prikazuje na novom redu i

postavlja odreeni razmak pre i posle svakog paragrafa.

Primer paragrafa u HTML jeziku1:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>

i prikaz u browseru:

slika 4.2 - Primer dva paragrafa u browseru

1
Tekst koji se uglavnom koristi za primere u ovom kursu je poznati Lorem Ipsum. Ukoliko vas interesuje neto o
tome, nevezano za kurs, vie informacija moete nai na http://www.lipsum.com/

Copyright Link group

Bold

Bold efekat se, kao to ve moete pretpostaviti, postavlja pomou taga odreenog za to.
Specifino je to to moemo postaviti jednu od dve varijante, tanije <b> ili <strong> tag, i
dobiti skoro isti efekat. Kaem skoro, jer se razlikuju u jednom bitnom detalju. Da bismo to
razumeli, moramo napraviti malu digresiju i prvo pojasniti pojam semantike.

Semantika je, uopteno govorei, nauka o znaenju rei2. U kontekstu veb-dizajna i HTML
jezika, koji ovde izuavamo, semantika se odnosi na funkcionalno oznaavanje
elemenata. Ako govorimo konkretno o <b> ili <strong> tagovima, prvi e samo postaviti
bold varijantu fonta nad oznaenim karakterima, dok e <strong> definisati oznaen deo
kao izdvojen, bitan, naglaen.

Svi moderni pretraivai sadraj i u jednoj u drugoj varijanti prikazuju na isti nain (bold
font), ali <strong> ukazuje raznim softverskim alatima, drugim sajtovima i slinim
neljudskim itaima da je taj deo teksta naglaen.

Zbog svega navedenog, bolje je koristiti <strong> varijantu jer, osim vizuelne,
ima i funkcionalnu upotrebu. Na primer, kada Gugl, odnosno njegov automatizovani servis,
indeksira stranice, <b> nee oznaiti promenu u tekstu, odnosno tretirae ga kao obian
tekst, dok e <strong> uzeti u obzir kao neto bitniji deo teksta.

Primer bold (strong) formatiranja u HTML jeziku:

<p>Lorem ipsum <strong>dolor sit amet</strong>,consectetur adipisicing elit.</p>

i prikaz u browseru:

slika 4.3 - Prikaz paragrafa sa strong delom

Na primeru iznad primeujemo da je postavljen paragraf teksta, a da je njegov deo oznaen

(uokviren) novim strong tagom. U prikazu u browseru, taj deo teksta je prikazan bold
varijantom fonta. Da smo, kojim sluajem koristili <b> varijantu, vizuelno bismo dobili
potpuno isti efekat.

Ovde smo pomenuli termin semantike i pojasnili da pomou nje u veb-dizajnu prenosimo
skriveno znaenje elemenata. Korienje semantikih elemenata nije obavezno, ali moe
biti korisno, bilo u manjoj ili veoj meri. Konkretno, upotreba <b> umesto <strong> nee
napraviti veliku razliku, ali ne moe da kodi.

2
Vie informacija na http://sr.wikipedia.org/sr-el/Semantika

Copyright Link group

Italic

Kad govorimo o italic varijanti pisanja, pojavljuje se slina situacija kao kod gorepomenutog
bold formatiranja. Moemo koristiti ili <i> ili <em> tagove. Analogno tome, prvi e samo
postaviti italic varijantu fonta, dok e <em> tag postaviti i semantiko znaenje. Pomenuti
<em> tag oznaava da se tekst unutar njega neznatno razlikuje i istie od ostatka reenice.
Em je skraeno od engleske rei emphasize, to znai naglasiti.

Primer italic (em) formatiranja u HTML jeziku:

<p>Duis aute irure <em>dolor</em> in reprehenderit</p>

i prikaz u browseru:

slika 4.4 - Prikaz paragrafa sa italic delom

Kao to smo pojasnili, bold i italic formatiranje se vrlo jednostavno, upotrebom

odgovarajuih tagova moe postaviti u okviru naih tekstova. Ovo nije jedini nain da to
uinimo. Upotrebom CSS opisa, kojima emo se baviti kasnije u kursu, moemo takoe
stilizovati tekst na razne naine, ak i lake nego putem tagova.

Sup i sub

Ponekad se u tekstovima pojavljuje potreba za karakterima koji su iznad, odnosno ispod

osnovne linije, pogotovo u formulama. Za takve detalje koristimo <sup>, odnosno <sub>
tagove. Sup je skraeno od superscript, dok je sub skraeno od subscript.

Pogledajmo primer za sup (u prvom redu) i sub (u drugom redu):

<p>E = MC²</p>

<p>CO₂ + H₂O = H₂CO₃</p>

i prikaz u browseru:

slika 4.5 - Prikaz sup i sub tagova

Copyright Link group

Verujem da kd kod drugog primera deluje pomalo zbunjujue zbog mnotva tagova, ali,
ako razloite deo po deo, primetiete da je u stvari sve veoma jednostavno. Pogledajte, na
primer, isti deo ovako:

<p>
CO₂
+
H₂O
=
H₂CO₃
</p>

Da li sada deluje malo jednostavnije? Sve je u nainu gledanja na detalje. Nai mozgovi su
navikli na klasine (da se tako izrazim) tekstove i povezuju delove teksta u logine celine.
Kod HTML jezika je to malo drugaije.

Ovakav, navedeni kd e dati isti rezultat, jer novi redovi i razmaci uneti u kd ne igraju
znaajnu ulogu.

Br

Ve smo rekli da se po zavretku i s poetkom novog paragrafa postavlja novi red. Ali
ponekad elimo da usred paragrafa prelomimo red, bez kreiranja novog paragrafa. To
moemo uiniti jednostavno, postavljanjem taga za, pretpostavili ste, prelom reda koji se
oznaava sa <br> u HTML varijanti jezika, odnosno <br /> u xHTML varijanti.

Zbog specifinosti ovog elementa (nema svoj sadraj), ne piemo poetni i krajnji tag, ve
samo jedan koji je istovremeno i poetni i zavrni. Ovo je jedan od samozatvarajuih
tagova, o emu je ve bilo rei ranije u kursu.

Br je skraenica od engleske rei break. Ukoliko ste koristili opciju shift+enter u MS Wordu,
ili slinom alatu, onda vam je princip umnogome poznat.

Primer <br> taga u HTML jeziku:

<p>Excepteur sint occaecat,<br>cupidatat non proident, sunt in culpa

qui officia deserunt mollit anim id est laborum</p>

i prikaz u browseru:

slika 4.6 - Prikaz prelomljenog paragrafa u browseru

Copyright Link group

Zato treba koristiti ovaj tag? Deluje loginije uvek prelomiti tekst novim paragrafom, ali se
moe desiti da smo, na primer, postavili odreenu CSS stilizaciju nad paragrafom, kao i vei
razmak pre/posle. Moda elimo da neki deo teksta sauvamo zajedno, ali ipak u novom
redu.

Upotreba ovog taga nije obavezna. Browser e sam prebaciti nastavak teksta u novi red
istog paragrafa ukoliko doemo do kraja stranice / okruujueg elementa. Break koristimo
samo kada ba elimo prelom na odreenom mestu u tekstu.

Hr

Hr je tag koji slino funkcionie kao prethodno pomenuti br, u smislu da se pie samo
jednom kao <hr> u HTML varijanti jezika, odnosno <hr /> u xHTML varijanti, ali ima
sasvim drugaiju funkciju. Ovaj tag postavlja horizontalnu liniju u tekstu. Sama oznaka hr je
skraeno od horizontal rule (horizontalna linija). U poslednje vreme se sve ree koristi, ali
ponekad moe biti korisno.

Primer <hr> taga izmeu dva paragrafa u HTML jeziku:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
<hr>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>

i prikaz u browseru:

slika 4.7 - Prikaz <hr> taga u browseru izmeu dva paragrafa

Copyright Link group

Specijalni znaci

Za prikazivanje specijanih znakova, koriste se odgovarajude HTML naredbe. One poinju

znakom &, a zavravaju se znakom ;

Kada postavimo neki od ovih specijalnih znakova, mi u kodu upisujemo jedno, a browser to
prikazuje na drugaiji nain. Na primer, ukoliko u kodu napiemo:

<p>Copyright &copy; LINKgroup</p>

dok bi u browseru rezultat bio:

slika 4.8 - Prikaz zamenskog karaktera u tekstu

Zamenski karakteri mogu biti vrlo korisni ponekad. Na sledeoj tabeli moete videti neke
najee od njih, a vie detalja o ovim znacima moete nai na:
http://www.w3schools.com/html/html_entities.asp

HTML naredba Izgled na HTML strani

&nbsp; (blanko tj non breaking space)

&lt; <

&gt; >

&amp; &

&copy;

&raquo;

Tabela 4.1

Napomena o razmacima (white-space)

esto se deava da mnogi korisnici navikli na (pogrean) rad u MS Word ili slinom alatu
koriste viestruke razmake za pozicioniranje teksta. To je pogreno zbog mnogih detalja u
koje neemo sada zalaziti, ali je vano napomenuti da u HTML jeziku ne moemo pisati
viestruke razmake. Izmeu dva karaktera se moe pojaviti samo jedan obian razmak.
Ukoliko, ipak, postavimo vie razmaka, korisnik e videti samo jedan. Za pozicioniranje
elemenata se koriste drugi naini. Sve viestruke razmake HTML jednostavno ukloni i ostavi
samo jedan.

Copyright Link group

Slina je situacija sa redovima u kodu. Novi redovi ne igraju nikakvu ulogu. Moemo
napisati celu stranicu u jednom redu ili pak koristiti na hiljade redova. U prikazu se nee
primetiti razlika. Bitno je samo pisati tagove u celosti, tj. ne prelamati izmeu znakova < i
>.

Pitanje

Italic tekst je oznaen u HTML jeziku:

Tagovima <em> ili <i>

Tagom <em>
Tagom <i>
Tagom <italic>

Moemo koristiti ili <em> ili <i> tagove. <i> e samo postaviti italic varijantu fonta, dok e
<em> tag postaviti i semantiko znaenje. Pomenuti <em> tag oznaava da se tekst
unutar njega neznatno razlikuje i istie od ostatka reenice. Em je skraeno od engleske rei
emphasize, to znai naglasiti. I je skraeno od italic.

Najvanije iz lekcije

Naslovi se oznaavaju H tagovima u nivoima 1-6.

Paragrafi se oznaavaju <p> tagovima.
Bold formatiranje u HTML jeziku moemo postaviti pomou <strong> ili <b> tagova,
mada se <strong> preporuuje.
Italic formatiranje u HTML jeziku moemo postaviti pomou <em> ili <i> tagova,
mada se <em> preporuuje.
Viestruki razmaci ili novi redovi ne igraju znaajnu ulogu u prikazu.

Copyright Link group