HTML - Oblikovanje teksta

Formatiranje teksta sa HTML-om

HTML pruža nekoliko tagova koje možete koristiti da bi se neki tekst na vašim web stranicama prikazao drugačije od uobičajenog teksta. Na primjer, možete pomoću taga <b> da podebljate font teksta, a pomoću taga <i> da tekst postane italic (nakošen), označite <mark> da biste istakli tekst, označite <code> da biste prikazali fragment računarskog koda, taga <ins> i <del> za obelježavanje uredničkih dodataka, brisanja i još mnogo toga. Sljedeći primjer prikazuje najčešće korištene tagove oblikovanja u praksi. Pogledajmo u primjeru kako ovi tagovi funkcionišu: 

<p>Ovo je <b>podebljan tekst</b>.</p>
<p>Ovo je <strong>jako istaknuti tekst</strong>.</p>
<p>Ovo je <i>italic tekst</i>.</p>
<p>Ovo je <em>naglašeni tekst</em>.</p>
<p>Ovo je <mark>istaknuti tekst</mark>.</p>
<p>Ovo je <code>kompjuterski kod</code>.</p>
<p>Ovo je <small>manji tekst</small>.</p>
<p>Ovo je <sub>linija napisana ispod</sub> i <sup>iznad</sup> teksta.</p>
<p>Ovo je <del>obrisani tekst</del>.</p>
<p>Ovo je <ins>umetnuti tekst</ins>.</p>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Formatiranje HTML teksta</title>
</head>
<body>
    <p>Ovo je <b>podebljan tekst</b>.</p>
    <p>Ovo je <strong>jako istaknuti tekst</strong>.</p>
    <p>Ovo je <i>italic tekst</i>.</p>
    <p>Ovo je <em>naglašeni tekst</em>.</p>
    <p>Ovo je <mark>istaknuti tekst</mark>.</p>
    <p>Ovo je <code>kompijuterski kod</code>.</p>
    <p>Ovo je <small>manji tekst</small>.</p>
    <p>Ovo je <sub>linija napisana ispod</sub> i <sup>iznad</sup> teksta.</p>
    <p>Ovo je <del>obrisani tekst</del>.</p>
    <p>Ovo je <ins>umetnuti tekst</ins>.</p>
</body>
</html>

Tag <strong> obično se u pretraživaču prikazuje kao <b>, dok se tag <em> prikazuje kao <i>. Međutim, postoji razlika u značenju ovih tagova.


Razlika imeđu taga <strong> i <b> taga

Tag <strong> i <b> pretpostavljeni tekst prikazuju podebljano, ali tag <strong> označava da njegov sadržaj ima veliku važnost, dok se tag <b> jednostavno koristi za privlačenje pažnje čitatelja bez prenošenja bilo kakvog posebnog značaja. 

<p><strong>UPOZORENJE!</strong> Opasan sadržaj.</p>
<p>Ovo je samo običan <b>podebljani</b> sadržaj.</p>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML strong Vs b tag</title>
</head>
<body>
    <p><strong>UPOZORENJE!</strong> Opasan sadržaj.</p>
    <p>Ovo je samo običan <b>podebljani</b> sadržaj.</p>
</body>
</html>

Razlika između taga <em> i <i> taga

Slično tome, i <em> i <i> tag podrazumijevaju priloženi tekst u kurzivu (italic), ali <em> tag ukazuje da je njegov sadržaj naglasio sadržaj u odnosu na okolni tekst, dok se <i> tag koristi za označavanje tekst koji je iz razloga čitljivosti isključen iz uobičajenog teksta, poput tehničkog izraza, neke fraze s drugog jezika, misli itd. 

<p>Psi su <em>slatke</em> životinje.</p>
<p>Moj prijatelj <i>Marko Marković</i> sinoć nije bio na žurci.</p>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML em Vs i tag</title>
</head>
<body>
    <p>Psi su <em>slatke</em> životinje.</p>
    <p>Moj prijatelj <i>Marko Marković</i> sinoć nije bio na žurci.</p>
</body>
</html>

Formatiranje citata

Blokove navodnika možete lako formatirati iz drugih izvora pomoću HTML taga <blockquote>. Tag blockquote se uglavnom prikazuju s razvedenim lijevim i desnim uglovima, uz malo dodatnog prostora iznad i dole. Pogledajmo primjer da biste vidimo kako to funkcioniše: 

<blockquote>
    <p>Obrazovanje, to je ono što ostane nakon što osoba zaboravi sve što je naučila u školi.</p>
    <cite>— Albert Einstein</cite>
</blockquote>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Formatiranje citata</title>
</head>
<body>
  
    <blockquote>
        <p>Obrazovanje, to je ono što ostane nakon što osoba zaboravi sve što je naučila u školi.</p>
        <cite>— Albert Einstein</cite>
    </blockquote>

</body>
</html>

Za kratke umetnute navode možete koristiti HTML <q> tag. Većina pretraživača prikazuje umetnute navodnike okružujući tekst navodnicima. Pogledajmo primjer: 

<p>Obrazovanje, to je ono što ostane nakon što osoba zaboravi sve što je naučila u školi.  
<q>Albert Einstein</q></p>

Prikazivanje skraćenica

Kratica je skraćeni oblik riječi, fraze ili imena. Možete označiti kartice pomoću taga <abbr>. Atribut naslova upotrebljava se unutar ovog taga za potpunu ekspanziju kratice, koja se u pretraživačima prikazuje kao alat kada je miš iznad elementa. Pogledajmo primjer: 

<p>Ovo <abbr title="World Wide Web Consortium">W3C</abbr> 
je glavna međunarodna organizacija za standardizaciju <abbr 
title="World Wide Web">WWW ili W3</abbr>. Osnovao ga je Tim Berners-Lee.</p>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Prikaz skraćenica u HTML</title>
</head>
<body>
    <p>Ovo <abbr title="World Wide Web Consortium">W3C</abbr> 
    je glavna međunarodna organizacija za standardizaciju <abbr 
    title="World Wide Web">WWW ili W3</abbr>. Osnovao ga je Tim Berners-Lee.</p>
</body>
</html>

Označavanje adrese za kontakte

Web stranice često uključuju ulice ili poštanske adrese. HTML pruža poseban tag <adresa> koji predstavlja informacije o kontaktima (fizičke i/ili digitalne) za osobe, ljude ili organizaciju. Ovu bi oznaku idealno trebalo koristiti za prikaz podataka o kontaktima koji se odnose na sam dokument, kao što je autor članka. Većina pretraživača prikazuje blok adresa. Pogledajmo primjera: 

<address>
IT TUTORIJALI<br>
Bosna i Hercegovina<br>
78000, Banja Luka
</address>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Formatiranje adrese u HTML</title>
</head>
<body>
<p>Ovo je moja adresa.</p>
<address>
    IT TUTORIJALI<br>
    Bosna i Hercegovina<br>
    78000, Banja Luka
</address>
</body>
</html>