HTML - Paragrafi


Kreiranje paragrafa

Element paragrafa koristi se za objavljivanje teksta na web stranicama. Paragrafi su definisani s oznakom <p>. Oznaka paragrafa je osnovna oznaka i obično je prva koja će vam trebati za objavljivanje svog teksta na web stranicama. Pogledajmo primjera:

<p>Ovo je paragraf.</p>
<p>Ovo je drugi paragraf.</p>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Kreiranje paragrafa u HTML</title>
</head>
<body>
    <p>Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
</body>
</html>


Zatvaranje elementa paragrafa

U HTML4 i starijim verzijama bilo je dovoljno pokrenuti novi paragraf koristeći početni tag. Većina pretraživača će pravilno prikazati HTML, čak i ako zaboravite završni tag. Pogledajmo primjer:

<p>Ovo je paragraf.
<p>Ovo je drugi paragraf.
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Zatvaranje HTML paragrafa</title>
</head>
<body>
    <p>Ovo je paragraf.
    <p>Ovo je drugi paragraf.
    <p><strong>Napomena:</strong> Ne zaboravite zatvoriti paragraf, 
    jer može proizvesti neočekivane rezultate ili greške!</p>
</body>
</html>

HTML kod u gornjem primjeru radiće u većini web pretraživača, ali nemojte se pouzdati u njega. Ako zaboravite na završni tag, mogu se dobiti neočekivani rezultati ili greške.



Kreiranje preloma reda

Tag <br> koristi se za ubacivanje prekida linije na web stranici. Budući da je <br> prazan element, nema potrebe za odgovarajućom </br> oznakom.

<p>Ovo je paragraf <br> sa prelomom reda.</p>
<p>Ovo je <br>drugi paragraf <br> sa prelomom reda.</p>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Kreiranje preloma (Line Breaks) u HTML</title>
</head>
<body>
    <p>Ovo je paragraf <br> sa prelomom reda.</p>
    <p>Ovo je <br>drugi paragraf <br> sa prelomom reda.</p>
</body>
</html>


Kreiranje horizontalnih pravila (linija)

Možete koristiti <hr> tag za kreiranje horizontalnih pravila ili linija za vizualno odvajanje dijela sadržaja na web stranici. Kao i <br>, tag <hr> je takođe prazan element. Pogledajmo primjera:

<p>Ovo je paragraf.</p>
<hr>
<p>Ovo je drugi paragraf.</p>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Kreiranje horizontalinih linija u HTML</title>
</head>
<body>
    <p>Ovo je paragraf.</p>
    <hr>
    <p>Ovo je drugi paragraf.</p>
</body>
</html>


Upravljanje bijelim (praznim) prostorima

Pretraživač će obično prikazati više razmaka kreiranih unutar HTML koda pritiskom na space ili tipku tab na tastaturi kao jedinstven razmak. Višestruki prelomi linija stvorenih unutar HTML koda pritiskom na tipku Enter prikazuju se kao jedinstveni razmak. Sljedeći paragrafi biće prikazani u jednom redu bez ikakvog prostora:

<p>Ovo je paragraf  sa više   razmaka    u kodu.</p>
<p>
    Ovaj paragraf
    sadrži više kartica i preloma reda
    u izvornom kodu.
</p>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Upravljanje bijelim (praznim) prostorima u HTML</title>
</head>
<body>
    <p>Ovo je paragraf  sa više   razmaka    u kodu.</p>
    <p>
        Ovaj paragraf
        sadrži više kartica i preloma reda
        u izvornom kodu.
    </p>
</body>
</html>


Definisanje unaprijed formatiranog teksta

Upravljanje prostorom nije baš zgodno. Možete koristiti oznaku <pre> za prikaz razmaka, kartica, preloma reda itd. tačno onako kako je napisano u HTML datoteci. Vrlo je korisno u predstavljanju teksta gdje su razmaci i prelomi reda važni. Sljedeći primjer će prikazati tekst u pretraživaču kao u izvornom kodu:

<pre>
    Twinkle, twinkle, little star, 
    How I wonder what you are! 
    Up above the world so high, 
    Like a diamond in the sky.
</pre>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Definisanje unaprijed formatiranog teksta</title>
</head>
<body>
<pre>
    Twinkle, twinkle, little star, 
    How I wonder what you are! 
    Up above the world so high, 
    Like a diamond in the sky.
</pre>
</body>
</html>