Z o N i . W e b ! --- Mala Web škola
Lekcija 2

Ovde ću Vam odmah reći nešto, što možda neće biti baš najjasnije... U pitanju su naša slova - š, đ , č , ć, ž. Da biste ih videli, u glavu (HEAD) HTML dokumenta dodajte sledeći red:



<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
 ili
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
Ukoliko želite da koristite ćirilicu, sve što treba je da u gornjem redu vrednost 1250 zamenite sa 1251. Naravno, i tastaturu morate da prebacite na srpsku latiničnu (hrvatsku, slovenačku) odn. na srpsku ćiriličnu! Za sad Vam preporučujem da koristite samo engleska slova. Kad to savladate, lako ćete preći i na naša slova.
Da bi stvari izgledale jasnije, pisaću samo <BODY> tag. Izostaviću sve <HTML>, <HEAD> i <TITLE> tagove. Naravno, podrazumeva se da ćete ih vi pisati u svojim HTML-dokumentima.

<BODY>
</BODY>

Otkucajte neki kratak tekst.

<BODY>
neki kratak tekst
</BODY>
neki kratak tekst

Kad god uradite neku promenu u vašem dokumentu, snimite ga, pa pritisnite dugme Reload/Refresh na browser-u, da bi ste videli najnoviju verziju. Nekad to neće biti baš dovoljno (čudne su zverke ti browser-i). U tom slušaju primenite SuperReload (shift+Reload) - naravno, ovo važi samo za Netscape.

Prvo treba da naučimo kako se menja boja pozadine. Ova siva deluje prilično bezveze. (Napomena - siva nije uvek default - predefinisana boja.)

<BODY BGCOLOR="#FFFFFF">
neki kratak tekst
</BODY>
neki kratak tekst
FFFFFF je bela boja na "kompjuterskom" jeziku. Ovde se nalazi još nekoliko boja.
Netscape (i ostali browser-i) sve slike prebacuju na svoju paletu od 256 boja. Dalje, ukoliko izaberemo boju koja nije u toj paleti, browser će automatski umesto nje prikazati najbližu. U ovom trenutku to nije baš važno; no, ako Vas boje baš interesuju, kliknite ovde, gde ćete bolje upoznati ovaj obojeni problem.

Naravno, umesto boje, za pozadinu možete da uzmete i neku sliku. (Obratite pažnju da ona zasad treba da bude u istom folderu u kome se nalazi i Vaš HTML fajl.)

<BODY BACKGROUND="swirlies.gif">
neki kratak tekst
</BODY>

Ovo je slika korišćena za pozadinu.
Da bi se slika prikazala, browser mora da bude u mogućnosti da je nađe. Za sada, slika treba da bude u istom folderu u kome se nalazi i Vaš HTML dokument (PAGE1.HTML). Najlakši način da to izvedete je da desnim tasterom miša kliknete na sliku i izaberete Save Image As (ili tako nešto, što zavisi od browser-a). Zatim, sliku snimite u folder u kome je Vaš HTML fajl. Kasnije ćemo "detaljisati".

Očigledno je da je slika ponovljena više puta (tile) da bi se uklopila u veličinu ekrana. Ako, pak, koristite dugu, a tanku sliku, efekat će biti ovakav...

<BODY BACKGROUND="bluebar.gif">
neki kratak tekst
</BODY>

Ovo je slika korišćena za pozadinu.

(Zapravo, ova slika je dimenzija 800x2, ali je ovde kompresovana na 530x2, da bi se bez problema uklopila na svaki ekran.)

Dobro. Vratimo se sada čistom, belom ekranu.

<BODY BGCOLOR="#FFFFFF">
neki kratak tekst
</BODY>
neki kratak tekst

Sada bismo mogli da stvari malo podebljamo.

<BODY BGCOLOR="#FFFFFF">
neki kratak<B>tekst</B>
</BODY>
neki kratak tekst
Ovim smo browser-u rekli: neka tekst između <B> i </B> bude podebljan (bold).

Princip je isti i za ukošena slova (italic).

<BODY BGCOLOR="#FFFFFF">
neki <I>kratak</I> <B>tekst</B>
</BODY>
neki kratak tekst

Naravno, to važi i za podvlačenje (underline).

<BODY BGCOLOR="#FFFFFF">
<U>neki</U> <I>kratak</I> <B>tekst</B>
</BODY>
neki kratak tekst

Vratimo se na čist beli ekran.

<BODY BGCOLOR="#FFFFFF">
neki kratak tekst
</BODY>
neki kratak tekst

Ako želimo, tagovi se često mogu koristiti u raznim kombinacijama.

<BODY BGCOLOR="#FFFFFF">
neki kratak <I><B>tekst</B></I>
</BODY>
neki kratak tekst
Ovo je primer ugnežđenih tagova. Ukoliko ćete koristiti kombinacije tagova (a sigurno hoćete), onda, da ne bi ste zbunjivali browser-e, koristite ugnežđene, a ne preklopljene tagove. Primer sledi...

   <OVO><ONO></OVO></ONO>    preklopljeni tagovi.... loše
   <OVO><ONO></ONO></OVO>    ugnežđeni tagovi.... dobro

Veoma je interesantan i font fiksne dužine.

<BODY BGCOLOR="#FFFFFF">
<TT>neki kratak tekst</TT>
</BODY>
neki kratak tekst

Svako slovo zauzima jednaku količinu horizontalnog prostora.

Ovo je običan tip -> iiiiiiiiii
oooooooooo
mmmmmmmmmm
Ovo je font fiksne dužine -> iiiiiiiiii
oooooooooo
mmmmmmmmmm

Takođe možemo da menjamo i veličinu fonta... i to veoma jednostavno!

Prvo dodajmo par <FONT> tagova...

<BODY BGCOLOR="#FFFFFF">
neki kratak <FONT>tekst</FONT>
</BODY>

Onda odredimo vrednost atributa SIZE.

<BODY BGCOLOR="#FFFFFF">
neki kratak <FONT SIZE=6>tekst</FONT>
</BODY>
neki kratak tekst
Postoji 7 veličina fontova:

malecni mali obični srednji veliki oho-ho veliki i džinovski!
1 2 3 4 5 6 7

Dve napomene. Prva: <TAG> govori browser-u da uradi nešto. Međutim, ATRIBUTE ide u <TAG> i govori browser-u kako da uradi to što zahtevate.
Druga napomena se tiče podrazumevanih vrednosti (default). Kao što verovatno znate, default je vrednost koju browser pretpostavlja, ako niste naglasili drugačije. Dobar primer je veličina fontova. Podrazumevana veličina je 3. Ako nije drugačije naglašeno, ona će zaista i biti 3.

Svaki browser ima podešene podrazumevane fontove - ime, veličinu i boju. Ukoliko niste ništa "prčkali", podrazumevani font je Times New Roman od 12pt (što u HTML-u iznosi 3), crne boje. Naravno, ukoliko želite, u svom HTML dokumentu možete koristiti i druge fontove. Kao, npr. ARIAL ili VERDANA.

<BODY BGCOLOR="#FFFFFF">
neki kratak <FONT FACE="ARIAL">tekst</FONT>
</BODY>
neki kratak tekst
Veoma važno!!!
Font će se videti samo ako posmatrač ima instaliran taj font na svom računaru! Ukoliko to nije slučaj, tekst će biti predstavljen podrazumevanim (default) fontom. Zato, oprez sa fontovima! Uz Windows, veoma su česti fontovi Arial i Verdana. Takođe i Impact!. Da bi se ovo delimično prevazišlo, možete navesti više od jednog fonta - ovako...

<FONT FACE="ARIAL, HELVETICA, VERDANA">Zdravo</FONT>.

Malo objašnjenje... Browser traži font ARIAL. Ako ga nađe, koristi ga. Ako ne, onda traži sledeći navedeni font - HELVETICA. Ako ga ne nađe, tražiće VERDANA. E, ako ne nađe ni taj font, onda će koristiti podrazumevani (default) font.

Da biste videli kako različiti fontovi mogu da izgledaju u vašem browser-u, pogledajte Handy Dandy Font Viewer [ © J. Barta ].

OK. Nazad na interesantne stvari.
Ako želite, možete da promenite i boju fonta.

<BODY BGCOLOR="#FFFFFF">
neki kratak <FONT COLOR="#FF0000">tekst</FONT>
</BODY>
neki kratak tekst

Unutar jednog taga možemo koristiti više atributa...

<BODY BGCOLOR="#FFFFFF">
neki kratak <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">tekst</FONT>
</BODY>
neki kratak tekst

<BODY BGCOLOR="#FFFFFF">
neki kratak <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">tekst</FONT></B></I></U>
</BODY>
neki kratak tekst
Još jedanput bih naglasio da tagovi treba da budu ugnežđeni, a ne preklopljeni.

<TAG3><TAG2><TAG1>E-heej!</TAG1></TAG2></TAG3>

Redosled tagova nije uopšte važan.

Još jedna stvar pre kraja ove lekcije. Browser ima podrazumevana podešavanja za boju teksta, linkova, aktivnih linkova, posećenih linkova, kao i za boju pozadine. Te podrazumevane vrednosti su:

Tekst je crn
Linkovi su plavi
Aktivni linkovi su crveni
Posećeni linkovi su ljubičasti

Ukoliko želite, ove podrazumevane vrednosti mogu se lako menjati. Kao prvo, moguće je uneti promenu za ceo HTML dokument. Evo kako...

<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
neki kratak tekst
</BODY>
neki kratak tekst
Znam, znam... još Vam nisam rekao kako se prave linkovi! Ova lekcija pokazuje kao se menjaju boje, a linkovi će stići na red uskoro.
    Kao što vidite, pozadina je sada crna, a tekst je žut.
    Linkovi su sada crveni
    Posećeni linkovi su tamno crveni
    Aktivni linkovi su zeleni

Ovde se nalazi i koristan programčić - Color Picker (© Joe Barta) koji olakšava (i čini interesantnim) eksperimentisanje bojama. Uz pomoć ColorPicker-a možete ne samo da birate boje, već i da menjate vrste i veličine fontova, da isprobavate kako bi izgledala podebljana ili ukošena slova, a možete da se igrate i sa slikama za pozadinu. ColorPicker će automatski generisati <BODY> tag.

Eto! Sada znate skoro sve u vezi sa manipulisanjem tekstom u Vašim dokumentima. Sada bez problema možete napraviti velika crvena slova ili mala podebljana slova. Možete koristiti i razne vrste fontova, ili FONT FIKSNE ŠIRINE.
Osim toga, moguće je napraviti i tzv. rollercoaster!

HTML kôd za "rollercoaster" izgleda ovako (ako Vas interesuje).

Pre nego što završimo ovu lekciju, želeo bih da vam skrenem pažnju na još jednu sitnicu. HTML kôd bilo koje stranice može se jednostavno videti - pritisnite View/Source na Vašem browser-u. Dakle, ako prilikom web-surfa naletite na neku finu stranu, i zapitate se "Kako li je ovo urađeno?", znajte da je odgovor udaljen samo nekoliko klikova Vašeg miša.

<--LEKCIJA 1        LEKCIJA 3-->

Sadržaj Lekcije
Uvod - 1 - 2 - 3 - 4 - 5 - 6		 Indeks "Barebones"
HTML vodič
Z o N i . W e b !