IZRADA SAJTA za 10

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

Uredjenje teksta

U prethodnom naslovu videli smo kako se moe formatirati tekst u smislu njegove boje, veličine, fontovi, iskoenje itd. Ovde ćemo videti kako moemo uredjivati tekst u smislu novih redova, pasusa, uredjivati u prostoru i tako dalje.

<BODY>
brzo
shvatam
HTML
</BODY>

Uredjenje teksta slika 1

Znači u samom kodu hteli smo da svaka reč bude u novom redu, medjutim brauzer to nije ispotovao i sve je ispisao u jednom redu. Dakle, da bi brauzer razumeo da hoćemo neto napisati u novom redu moramo mu to "objasniti" tagom. Tag za novi red je <br>, pa da vidimo:

<BODY>
brzo<br>
shvatam<br>
HTML
</BODY>

Uredjenje teksta slika 2

Do istog rezultata u brauzeru bi smo doli da smo napisali kod i ovako:

<BODY>
brzo<br>shvatam<br>HTML
</BODY>

A moemo ako je potrebno i vie puta zaredom stavljati oznaku za novi red, na primer A<br><br><br>B. U ovom slučaju ispisaće se slovo A pa tek nakon tri reda ispod i slovo B.

Ako elimo novi red, i pri tome da uredimo i tekst u smislu da bude poravnjan i u desnu stranu (kao tekst u novinama), ili da tekst bude centriran, ili na levoj strani ili desnoj onda koristimo tag DIV:

<BODY>
brzo
<div>
shvatam HTML jer nije nimalo tezak
</div>
</BODY>

Uredjenje teksta slika 3

Znači kad je tag DIV bez atributa imamo isti efekat kao da smo koristili i tag <br>. Medjutim poenta korićenja DIV taga je u njegovim atributima, pa da vidimo:

<BODY>
brzo
<div align=center>
shvatam HTML jer nije nimalo tezak
</div>
<div align=left>
shvatam HTML jer nije nimalo tezak
</div>
<div align=right>
shvatam HTML jer nije nimalo tezak
</div>
</BODY>

Uredjenje teksta slika 4

Atribut ALIGN=CENTER centrira tekst na sredinu prostora, ALIGN=LEFT pomera tekst krajnje levo (to imamo i bez atributa), i ALIGN=RIGHT pomera tekst krajnje desno.

Postoji jo jedan vrlo zanimljiv atribut koji se zapisujeALIGN=JUSTIFY. Kada pogledate primer sve će biti jasno:

<BODY>
Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.
<div align=justify>
Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.
</div>
</BODY>

Uredjenje teksta slika 5

Kao to vidimo prvi tekst je napisan bez ikakvih tagova a drugi sa DIV tagom u kome je napisan i atribut. Primećujete kako je tekst sa atributom na desnoj strani lepo poravnjan kao neki profesionalan novinarski članak.

Korićenjem <br> i <div> taga tekst pisan nakon tih tagova se premeta u novi red. Postoji jo jedan tag<p></p> koji tekst spusta direktno dva reda nie, i tako pravi novi pasus. Naravno takav efekat imamo ako stavimo <br><br>, ali <p> tag moe da sadri i sve atribute kao i <div> tag. Da ne bi se ponavljao uzeću za objanjenje zadnji primer <div> taga samo ću zameniti umesto<div align=justify></div> staviću<p align=justify></p>. Naravno i ostali primeri su isti stim to se rezultat razlikuje jer pomera dva reda nie <p> tag.

<BODY>
Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.
<p align=justify>
Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.
</p>
</BODY>

Uredjenje teksta slika 6

Vidite kako je <p> tag napravio novi pasus, preskočio jedan red. Ovde treba napomenuti da svi ovi tagovi <br>, <div> i <p> mogu se koristiti, i imaju iste efekte, i na HTML objekte kao to su tabele, multimedija, slike i tako dalje, a ne samo na tekst. To isto vai i za naredne tagove koje ćemo do kraja ovog naslova videti. I jo neto, ako elimo da centriramo neki tekst na sredini prostora moemo koristiti i tag <center></center>. Ostali kao to su left, right i justify nemaju takav tag.

Da bi bio siguran da vam je sve jasno daću prethodni primer sa dodatkom tagova iz prethodnog naslova, kako bi ste videli da moete pustiti mati na volju u kombinovanju HTML tagova pri izgradnji web stranica.

<BODY>
Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta.<FONT SIZE=5 color=#CC33FF> Nas tekst sa tim etributom izgleda jako profesionalno i lepo</font>. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.
<p align=justify>
Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo <font color=#FF0000 face="verdana" SIZE=1><b>zanimljivog atributa za uredjivanje teksta</b></font>. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.
</p>
</BODY>

Uredjenje teksta slika 7

Idemo dalje. Hajde sad da napiemo rečenicu u kojoj su reči prilično razmaknute izmedju sebe:

<BODY>
brzo              shvatam                HTML
</BODY>

 Rezultat biće:

Uredjenje teksta slika 8

Dakle iako smo mi u kodu napisali tekst sa vie razmaka brauzer je ipak sve prikazao sa jednim razmakom. Znači i ovde moramo nekako reći brauzeru kroz kod da pie vie od jedne razmaknice. Za pisanje razmaknice se ne koristi nikakav tag već ifra &nbsp;

<BODY>
brzo &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; shvatam &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HTML
</BODY>

Uredjenje teksta slika 9

Znak " &" označava početak ifre, a znak " ; " kraj.Pored ove ifre za razmaknicu postoje ifre za sve moguće znakove i slova. Za razmaknicu je neophodno uvek koristiti ifru, a za neke znakove je po nekad potrebno koristiti njihovu ifru. Na primer svaki tag počinje znakom " < " a zavrava se " > ". I sad kad bi se ti znakovi koristili unutar koda i za njihovo prikazivanje u brauzer, tada bi u nekim slučajevima dolo do greke jer bi ih brauzer razumeo u nekim slučajevima kao sintaksu za pisanje tagova. Da do toga ne bi dolo ti znakovi ( a i ostali kao to je na primer znak dvostruki navodnici " " " ) moraju se po nekad napisati u obliku ifre. Takodje ne moramo koristiti one meta tagove za definisanje srpskih slova koji smo na početku napisali, već i naa slova imaju ifre. I jedna vrlo bitna napomena. Za pisanje ifri obavezno koristite samo mala slova. Evo tabele interesantnih HTML ifri:

ifra1 Znak1 ifra2 Znak2 ifra3 Znak3 ifra4 Znak4
&#269;  č &#177;   &#178;   &#188;  
&#268;  Č &amp;  & &#179;   &#189;  
&#263;  ć &lt;  < &#710;   &#190;  
&#262;  Ć &#174;   &#181;   &shy;  
&#273;  đ &gt;  > &#182;   &#247;  
&#208;   &quot;  " &#216;   &#223;  
&#353;   &#8364;   &#215;   &#8482;  
&#352;   &#8240;   &#185;   &#8226;  
&#382;   &#169;   &#167;   &#162;  
&#381;   &#163;   &#165;   &#402;  

Postoje preko 40 000 ifri (ASCII-HEX vrednosi) za raznorazne znakove. Kliknite na sledeće dugme da vifite većinu interesantnih ifri:

Da nastavimo sa novim stvarima. Primetili ste da tekst koji piete u HTML kodu i tekst koji prikazuje brauzer se dosta razlikuje. Na primer vi moete u kod-u pisati tekst u jednom redu jako dugo, a kad brauzer prikae taj tekst on ga saseče u nekoliko redova tako da se smesti ba u prostor po horizontali kolika je horizontalna duina ekrana. Medjutim postoji tag koji nedozvoljava da brauzer saseče va tekst bez obzira koliko je dug. Naime, neće smeti da ga iseče već će napraviti horizontalni klizač tako da se ceo tekst moe isčitati. Tag koji radi to je <nobr></nobr> a izmedju početnog i krajnjeg taga NOBR smetate tekst koji ne elite da sečete u vie redova.

Tag <BLOCKQUOTE></BLOCKQUOTE> pravi margine sa leve strane čitavom tekstu koji je u njemu (sve redove pomera par razmaka udesno). Evo primera:

<BODY>
<BLOCKQUOTE>
Ovo je malo duzi tekst da bi se moglo objasniti upotreba jednog vrlo zanimljivog atributa za uredjivanje teksta. Nas tekst sa tim etributom izgleda jako profesionalno i lepo. Zato je preporuka da se on koristi uvek kad se pisu tekstovi. Evo upravo ovi redovi demonstriraju i dokazuju to.
</BLOCKQUOTE>
</BODY>

A rezultat:

Uredjenje teksta slika 10

Već nekoliko puta smo pisali u ovom delu kako brauzer ne prikazuje tekst onako kako ga mi napiemo u kod-u ako ne primenjujemo tagove. Medjutim postoji tag koji omogućava da brauzer prikae na tekst ba onako kako ga mi napiemo u kod-u. Taj tag je <pre></pre>. Evo primera koji jasno dočarava sve: 

<BODY>
     _    _
    (o)--(o)
   /.______.
   ________/
  ./        .
 ( .        , )
  _\//_/ /
   ~~  ~~  ~~

<BODY>

Ako samo ovako napiemo brauzer će dati sledeći prikaz:

Uredjenje teksta slika 11

A ako napiemo ovako:

<BODY>
<PRE>
     _    _
    (o)--(o)
   /.______.
   ________/
  ./        .
 ( .        , )
  _\//_/ /
   ~~  ~~  ~~

</PRE>
<BODY>

Rezultat će sad biti:

Uredjenje teksta slika 12

I na kraju ovog dela moemo opisati tag koji slui za komentar unutar HTML kod-a. Kada piete neki HTML kod koji je jako veliki potrebno prokomentarisati neke njegove delove, kako bi se kasnije lake snali kad trebate neto da dodate ili ispravite. Tag za komentar počinje <!-- a zavrava se sa -->. Sve unutar tog taga brauzer preskače i ignorie. Znači tu moete da piete ta god elite, čak i bilo koje tagove itd, sve će biti ignorisano.

Copyright 2010 BUbaj. Powered By bubaj.com
HTML    Tekst    Slika i link    Tabela    Frejm    Forma