HTML - Renderovanje teksta

Jedna od najvažnijih karakteristika HTML-a je njegova sposobnost da prikaže tekst. Postoji nekoliko načina za prikazivanje teksta u HTML-u, a mi ćemo u ovom postu, pogledati neke od najčešćih.

Naslovi (Headings)

Naslovi se koriste za organizovanje teksta i stvaranje hijerarhije. HTML posjeduje šest nivoa naslova, u rasponu od <h1> (najvažniji) do <h6> (najmanje značajan). Primeri:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Nikada nemojte koristiti oznake naslova nižeg nivoa osim ako nisu ispod oznaka naslova višeg nivoa. Svi naslovi su elementi na nivou bloka.

Paragraf

Paragrafi su najčešći način prikazivanja teksta u HTML-u. Jednostavno stavite tekst u par oznaka za otvaranje i zatvaranje <p> i napravili ste novi pasus.

<p>Pasus 1</p>
<p>Pasus 2</p>

Takođe se može koristiti za strukturalno grupisanje povezanog sadržaja kao što su slike ili polja forme. Paragraf je element na nivou bloka.

Formatiranje teksta

Za formatiranje vizuelnog prikaza teksta možemo koristiti sledeće oznake:

<!-- Da damo važnost nekom dijelu teksta koristimo
strong oznaku, koja vizuelno izgleda kao tekst koji je boldovan  -->
<strong>Važan dio teksta</strong>
 
<!-- b oznaka se koristi da test prikažemo kao boldovan
NAPOMENA: Ovaj način formatiranja teksta se smatra zastarjelim -->
<b>Bolodvani tekst</b>
 
<!-- i oznaka za prikaz teksta u kurzivu
NAPOMENA: Ovaj način formatiranja teksta se smatra zastarjelim -->
<i>Kurziv</i>
 
<!-- Da naglasimo neki dio teksta koristimo em oznaku,
    vizuelno izgleda kao italic -->
<em>Naglašeni tekst</em>
 
<!-- u oznaka da dio teksta bude podvučen -->
<u>Podvučen tekst</u>
 
<!-- Da dio teksta učinimo manjim koristimo small oznaku -->
<small>Mali tekst</small>
 
<!-- Da dio teksta prikažemo većim, koristimo big oznaku -->
<big>bigger text</big>
 
<!-- Ako hoćemo da dio teksta označimo kao obrisan
koristimo del oznaku  -->
<del>Ovaj dio teksta je obrisan/nevažeći</del>
 
<!-- Za umetnuti dio teksta koristimo ins oznaku,
vizuelno izgleda kao underline tekst -->
<ins>inserted</ins>
 
<!-- Superscript tekst se renderuje u manjem fontui i prikazuje se
za pola karaktera iznad normalne linije prikaza -->
<sup>superscript</sup>
 
<!-- Subscript tekst se renderuje u manjem fontu i prikazuje se
za pola karaktera ispod normalne linije prikaza -->
<sub>subscript</sub>
 
<!-- Da označimo/istaknemo dio teksta koristmo mark oznaku -->
<mark>marked</mark>

Navodi i Citati

Ove oznake koristimo kada navodimo neki izvor ili citiramo nekoga.

<!-- Ako treba da označimo dio koji je uzet od nekog
drugog izvora, koristimo <blockquote> tag.
Vrijednost atributa cite predstavlja url ka izvoru označenog
dijela teksta -->
<blockquote cite="https://blackquote-source.com">Citirani sadržaj ovdje</blockquote>
 
<!-- Za kraće citate koristimo <q> oznaku pri čemu se sadržaj prikazuje
pod navodnicima -->
<q>Citat</q>
 
<!-- U tekstu često iz praktičnih razloga koristmo skraćenice.
Da označimo skraćenicu upotrebljavamo <abbr> tag sa title atrubutom čija
vrijednost predstavlja pun naziv skraćenice. Kada korisnik mišem pređe preko
skraćenice pojavljuje se mali iskačući prozor u kom je vidljiv njen
pun naziv. -->
<p>Neka skraćenica: <abbr title="Full Value">FV</abbr></p>
 
<!-- Ako hoćemo da definišemo informacije o autoru ili
vlasniku dokumenta upotrebljavamo <address>  -->
<address>Kreirao - Author Name</address>
 
<!-- Cite tag koristimo kada hoćemo da označimo naslov
nekog kreativnog sadržaja, poput knjige, pjesme, filma i sl.
Prikazuje se kao kurzivni tekst.  -->
<p><cite>Demijan</cite> - Herman Hese</p>

Liste

Liste predstavljaju blok elemente i klasifikovane su u tri tipa/grupe:

Neuređene liste su one kod kojih je redosled elemenata liste nebitan. Ako želimo da definišemo tip neuređene liste, koristimo atribut type sa jednom od sledećih vrijednosti:
- disc
- circle
- square
- none

<ul type="square">
  <li>Element jedan</li>
  <li>Element dva</li>
  <li>Element ...</li>
</ul>

Uređene liste oslanjaju se na redosled prikaza elemenata liste. Da bismo odredili tip liste, prosleđujemo jednu od vrijednosti atributu type:
- 1 - podrazumijevani tip, lista će biti označena arapskim brojevima.
- I - lista će biti numerisana velikim rimskim brojevima.
- i - lista će biti numerisana malim rimskim brojevima.
- A - elementi liste biće označeni velikim slovima abecede.
- a - elementi liste će biti označeni malim slovima abecede.

<!-- Ol oznaka posjeduje i atribut start koji se koristi da 
podesimo početnu vrijednost indeksiranja elemenata liste -->
<ol type="1" start="20">
  <li>Element 1</li>
  <li>Element 2</li>
</ol>

Deskriptivna lista sadrži listu termina i opise istih.

<!-- Definisanje deskriptivne liste -->
<dl>
  <dt>Termin</dt>
  <dd>Opis termina</dd>
</dl>

Tabele

Tabela ( <table> ) je HTML element koji se koristi za prikaz podataka na strukturiran način. Podatke dijelimo na redove i kolone, pri čemu svaka ćelija sadrži tekst, slike, veze ili druge HTML elemente. NAPOMENA: Izbjegavajte upotrebu tabela za definisanje layouta stranice.

<!-- Definisanje tabele -->
<table>
  <!-- caption element se koristi da damo naslov tabeli ili 
  kraći opis iste. Nije obavezan prilikom kreiranja tabele. -->
  <caption>
    Naslov tabele
  </caption>
  <!-- thead je opcionalni element ali se preporučuje kako bi grupisali
  naslove sadržaja tabele i vizuelno ih odvojili od redova sa običnim podacima  -->
  <thead>
    <!-- tr element služi da označi red u tabeli unutar kojeg smještamo polja tabele -->
    <tr>
      <!-- th elementom označavamo polje sa naslovom -->
      <th>Naslov 1</th>
      <th>Naslov 2</th>
    </tr>
  </thead>
 
  <!-- tbody element je takođe opcionalni element koji se kao i thead preporučuje
  u cilju grupisanja podataka tabele. -->
  <tbody>
    <tr>
      <!-- td oznaku koristimo za prikaz podatka -->
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
 
  <!-- tfoot je još jedan opcionalni element koji služi za grupisanje podnožja tabele.
  Može imati jedan ili više redova. -->
  <tfoot>
    <tr>
      <td>Table footer</td>
      <td>Table footer</td>
    </tr>
  </tfoot>
</table>

Linkovi

Tekst na koji se može kliknuti i koji upućuje korisnike na drugu veb stranicu ili drugi dio iste stranice naziva se veza (link). Oznaka <a> se koristi za pravljenje veza, a atribut href se koristi za označavanje URL-a stranice na koju veza treba da vodi. Možemo koristiti atribut target da odredimo kako će se otvoriti veza sa kojom je vezana oznaka <a>. Target atribut može imati sledeće vrijednosti:

_blank - otvara novi prozor u pregledaču.
_self - otvara vezu u istom okviru u kome je izvršena radnja na linku. Ovo je podrazumijevana vrijednost.
_parent - otvara povezani dokument u roditeljskom prozoru.
_top - otvara povezani dokument unutar određenog iframe tag-a.

<a href="https://destination.com">Link</a>

Unaprijed formatiran tekst

Ponekad moramo da zadržimo formatiranje i razmak teksta onako kako se pojavljuje u izvornom kodu. Bilo koji razmak, prelomi redova i uvlake prisutni u izvornom kodu se prenose u prikazani tekst kada je tekst zatvoren oznakom <pre> i prikazan je u fontu fiksne širine. Za tekst koji zahtijeva tačno formatiranje, kao što su isječci koda i drugi tipovi teksta, oznaka <pre> se često koristi. Pjesme, tekstovi pjesama i drugi tekstovi u kojima su prelomi redova i razmaci ključni za sadržaj ili prezentaciju teksta takođe se prikazuju pomoću ove tehnike.

<pre>
        Svaki razmak i
    novi red se prikazuju
        između ovih oznaka
</pre>

Oznake fraza koje se odnose na kod ili računarske programe

<!-- code element se koristi za definisanje
dijela kompjuterskog koda. Koristimo ga zajedno
sa pre oznakom kako bi očuvali razmake i nove
redove jer ih code element ne čuva. -->
<pre>
    <code>
        <!-- Kod... -->
    </code>
</pre>
 
<!-- Ozaka samp se koristi da definiše izlaznu operaciju programa. -->
<p>
  <samp>...</samp>
</p>
 
<!-- Sa var oznakom definišemo varijable -->
<p>
  <var>Var</var>
</p>