Učimo vas kako izraditi web stranicu i programirati
 



HTML Osnove

Tekst u HTML dokumentu

1. Općenito

Za unošenje texta u principu nije potreban nikakav poseban tag. Text jednostavno upisujemo u tijelo (body) dokumenta.

Primjer 'Običan text': vidi code » vidi stranicu

No da li je baš sve tako jednostavno pitanje je sad amletovsko ?

2. Formatiranje texta

Kako sam text ne bi bio jednoličan potrebno ga je malo uljepšati i uobličiti.

Novi red postići ćemo sa break line <br>

Primjer: vidi code » vidi stranicu

Sličan ovom tagu je tag <p> koji služi za razdvajanje paragrafa. Osim što skače u novi red on još i preskače jedan red.

Primjer: vidi code » vidi stranicu

Poravnanje teksta unutar paragrafa izvodi se s <p align="X"> gdje X može biti LEFT, RIGHT ili CENTER. Ovo je zastario tag pa se koristi CSS text-align: center.

Primjer: vidi code » vidi stranicu

Naš browser automatski prebacuje text u novi red kada je text duži od samog prozora. Da bi poništili ovo ponašanje koristi se <nobr>.

Primjer: vidi code » vidi stranicu

Ako ipak poželimo prijeći u novi red između <nobr> tagova napisat ćemo <wbr> tag. Ovo kod nekih browsera ne radi pa ćemo jednostavno tada upotrijebiti <br>.

Primjer: vidi code » vidi stranicu

Ukoliko želimo umjesto znaka, slova imati prazno mjesto upotrijebit ćemo &nbsp;.

Primjer: vidi code » vidi stranicu

Centriranje texta izvrši se sa <div align="center"> ili samo <center>.
Poravnanje ulijevo nije potrebno posebno definirati jer svaki browser po defaultu ima takvo poravnanje.
Udesno se text poravnava pomoću taga <div align="right">.

Primjer: vidi code » vidi stranicu

Određeni dio texta može biti uvučen sa lijeve strane. Istodobno se dobija i efekt kao kod <p> taga. To ćemo postići ako text smjestimo između <blockquote> tagova.

Primjer: vidi code » vidi stranicu

Ukoliko želimo da text u browseru bude prikazan točno onako kako smo ga napisali upotrijebit ćemo <plaintext> tag. Pri tome neće doći do interpretacije code-a odnosno HTML tagova. Ovo je vrlo korisno ako želimo prikazati HTML code u našem browseru.

Primjer: vidi code » vidi stranicu


Napomena: U IE5.5 neće raditi plaintext zatvarajući tag </PLAINTEXT> pa će zbog toga plaintext djelovati do kraja HTML dokumenta. Kod Mozilla 1.2 browsera takvih problema neće biti. To je zato što je ovaj tag zastario pa umjesto njega koristite <xmp> </xmp> .

Primjer: vidi code » vidi stranicu

U ovu svrhu može se koristiti i <pre> tag s tom razlikom što dolazi do interpretacije HTML code-a. To je tzv. preformatirani text.

Primjer: vidi code » vidi stranicu


3. Bold, Italic, Underline, Strike ...

    Podebljani text može se ostvariti na 2 načina: <b> ili <strong>
    Nakošeni text takođe na 2 načina: <i> ili <em>
    Podcrtani text pomoću <u>
    Precrtani text sa <strike> ili <s>

Primjer: vidi code » vidi stranicu

Indexe (ab i ab) ćemo pisati pomoću <sup> i <sub> tagova.

Primjer: vidi code » vidi stranicu


4. Boja texta (font color)

Kod boje texta razlikujemo:
» boju običnog texta (crna ako drukčije ne definiramo TEXT atributom)
» boja linka (plava ako drukčije ne definiramo LINK atributom)
» boja posjećenog linka (definira se VLINK atributom)
» boja aktivnog linka (definira se ALINK atributom)

Svaki browser ima svoje predefinirane boje. Ukoliko želimo da naš HTML dokument određuje ponašanje browsera tada ćemo to učiniti ovako:
<body bgcolor="#989898" text="#E6EF51" link="#89FF92" vlink="#9E97FF" alink="#FF9999">

Boja texta može se promijeniti u svakom trenutku sa <font color="#8882DA">

Primjer: vidi code » vidi stranicu


5. Veličina texta (font size)

Veličina texta definira se sa npr. <font size="+3"> što je isto kao <font size=6> (vidi tablicu).
U slijedećem primjeru možete vidjeti koliko veličina vaš browser podržava.

Primjer: vidi code » vidi stranicu



Najčešće je to 7 veličina koje su prikazane u tablici. Uočite da je svejedno da li ćete napisati -1 ili "-1" , ali nije svejedno "2" i 2.
1234567
"-2""-1""0""+1""+2""+3""+7"

Takođe veličine se mogu definirati tagovima <big> odnosno <small>. Kroz slijedeći primjer vidjet ćete da ako se <big> upotrijebi više puta uzastopno da će povećavati veličinu za jedan.

Primjer: vidi code » vidi stranicu

Pri pisanju naslova koriste se heading tagovi i imaju veličine od 1 do 6 (<h1> , <h2> , <h3> , <h4> , <h5> i <h6>).

Primjer: vidi code » vidi stranicu


6. Fontovi (font face)

Svaki browser ima svoje predefinirane (default) vrijednosti što se tiče veličine, boje i fonta. Te vrijednosti mogu se proizvoljno mijenjati u postavkama browsera. Web stranica kod koje nisu posebno definirana svojstva texta poprimit će svojstva koja se nalaze u postavkama browsera.

Primjer: vidi code » vidi stranicu

Ukoliko striktno želimo da naša web stranica ima određeni font tada ćemo to uraditi pomoću FONT taga i njegova atributa FACE.    <font face="Arial">
Veoma važna stvar je da pri tome vaš browser mora podržavati dati font (u ovom slučaju Arial). No i ako ga ne bude podržavao text će biti prikazan u onom fontu koji smo definirali kao primarni u svom browseru.

      Mozilla fontovi (Linux browseri)

Primjer: vidi code » vidi stranicu

      Internet Explorer fontovi (Windows browser)

Primjer: vidi code » vidi stranicu

Kod određenih browsera (Mozilla, Galeon) javlja se 5 vrsta fontova koje možemo proizvoljno mijenjati. Ustvari te fontove možemo shvatiti kao nekakve font varijable, koje mogu poprimiti različite vrijednosti stvarnih fontova. To su Serif , Sans-serif , Cursive , Fantasy i Monospace .
Ako npr. napišemo da je <font face="Fantasy"> , a Fantasy u browseru podesimo na a.d. mono tada će text biti prikazan u a.d. mono fontu. Ako pak Fantasy podesimo na Arial tada će text biti prikazan u Arial fontu.

Primjer: vidi code » vidi stranicu

Atribut FACE dozvoljava nam osim jednog fonta da navedemo više fontova (grupu fontova). U tom slučaju je prvi font koji napišemo primaran, a ostali su zamjenski. Npr. ako napišemo
<font face="arpad , flat , Courier"> tada će naš browser prvo tražiti font arpad. Ako ga ne podržava tada će tražiti flat. Ako ni njega ne podržava onda će pokušati sa Courier. Ako međutim ne podržava niti jedan od ova tri navedena fonta onda će browser za prikaz texta upotrijebiti font u njegovim postavkama koji smo definirali kao predefinirani (default font). Ovo je osnovna logika po kojoj rade svi browseri prilikom traženja fonta.

Primjer: vidi code » vidi stranicu

Vrlo je zanimljiv font fixne dužine. Kod njega svako slovo zauzima istu količinu horizontalnog prostora. To postižemo sa <tt> Typewriter Tagom.

Primjer: vidi code » vidi stranicu


7. Osnovni font (basefont)

Vjerojatno ste se pitali kako definirati osnovne postavke za text koje će se odnositi na cijeli text unutar naše web stranice. Rješenje je u <basefont> tagu.
Sintaxa mu glasi :
<basefont face="serif,Arial,Courier" size="2" color="#FF0000"

Primjer: vidi code » vidi stranicu

Ovaj tag je poprilično zastario pa ga Mozilla 1.2 ne podržava. U tom slučaju morat ćete koristiti samo <font> ili CSS, no o CSS-u kasnije. IE5.5 podržava ovaj tag.


8. Specijalni znakovi u HTML -u

Ponekad će vam u životu zatrebati da napišete npr. < , > , µ ... itd. Slijedeće tablice prikazuje većinu specijalnih znakova (engl. & ampersand characters).

Primjer: vidi code » vidi tablicu

Svaki znak može se napisati tako da se upotrijebi &#nnn gdje je nnn broj ASCII koda.

Primjer: vidi code » vidi tablicu

Provjeru možete izvršiti pomoću posebnog programa : Symbol translator


9. Komentar u HTML code -u

Radi boljeg pregleda HTML coda te radi objašnjenja što pojedini dio HTML dokumenta predstavlja napisat ćemo komentar. Komentar neće biti prikazan u prozoru našeg browsera, nego ćemo ga vidjeti tek kad pogledamo source code.

<!-- Ovo je komentar. -->


10. Buduće odrednice

Može se primjetiti kako većina ovih tagova je zastarjela te ih neki browseri više ne podržavaju (npr. basefont , wbr , blink ...). To ne znači da se više ne mogu postići ovi efekti. Jednostavno se po preporukama W3C-a danas više koristi CSS koji je mnogo flexibilniji i bogatiji. Zato će u budućnosti CSS sve više zamjenjivati zastarjele HTML tagove te će se razvoj ovog jezika vjerojatno kretati u ovom pravcu.

I evo jednog primjera gdje je za pozadinu upotrijebljena animirana GIF sličica.

Primjer: vidi code » vidi stranicu




| Uvjeti Korištenja | Zaštita Privatnosti | Kontakt |