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

Ovu lekciju ćemo početi malim objašnjenjem kako browser-i rade.
Prvo, jedan primer...

<BODY BGCOLOR="#FFFFFF">
neki kratak tekst
o HTML-u
</BODY>
neki kratak tekst o HTML-u

<BODY BGCOLOR="#FFFFFF">
neki
kratak
tekst
o HTML-u
</BODY>
neki kratak tekst o HTML-u

Browser ne prepoznaje formatiranja u tekstu. Ukoliko ne naglasite drugačije, sav tekst će biti napisan u jednom redu. Ako želite da počnete novi red, moraćete da koristite odgovarajući tag.

<BODY BGCOLOR="#FFFFFF">
neki
<BR>kratak
<BR>tekst
<BR>o HTML-u
</BODY>
neki
kratak
tekst
o HTML-u

<BR> u osnovi znači naredbu počni novi red. Sličan tagu <BR> je i tag <P>. Ovaj tag označava početak novog pasusa, uz efekat prelaska u novi red i preskakanja jednog reda.

<BODY BGCOLOR="#FFFFFF">
neki
<P>kratak
<P>tekst
<P>o HTML-u</BODY>
neki

kratak

tekst

o HTML-u


Napomena o <P> tagu: ne može se koristiti više puta. Drugim rečima, <P><P><P> obično neće predstavljati gomilu praznih redova, već samo jedan prazan red. Zašto? Kako dodati više praznih redova? Odgovor stiže!

Pogledajmo sledeći primer...

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

Browser ne prepoznaje više od jedne praznine. Možda to deluje čudno, ali je tako. Važno je da Vam to daje bolju kontrolu nad tekstom.

Naravno postoji tag, koji za browser predstavlja prazno mesto-> &nbsp;

Probajte ovo...

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

Znak & znači početak nekog specijalnog znaka, dok ; označava kraj. Slova između predstavljaju skraćenicu tog specijalnog znaka! Postoji veliki broj takvih znakova. Evo nekoliko često korišćenih... (Pažnja: obavezno koristite MALA SLOVA)

Naravno, postoji još mnogo specijalnih karaktera. Ako Vas interesuju, možete ih videti ovde.

Ovo će Vas možda malo zbuniti. Ako pritisnete Enter dok kucate, browser će to (obično) shvatiti kao razmak... osim ako razmak već postoji (tad će novi razmak biti ignorisan).

Još jedan kratak primer...

<BODY BGCOLOR="#FFFFFF">
neki<BR>kratak<BR>tekst<BR>
o<BR>HTML-u
</BODY>
neki
kratak
tekst
o
HTML-u

Jasno? Nadam se da jeste. Ja bolje ne znam da objasnim.

Sledeći tag je vrlo koristan. Ime mu govori za sebe.

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

Moguće je centrirati jednu reč ili celu stranicu - sve između <CENTER> tagova biće centrirano.

Pređimo na stavljanje slika na web strane. Koristićemo ovaj grb Beograda. Dakle, kliknite desnim tasterom miša, pa sliku snimite u odgovarajući folder.

GRB BEOGRADA

Za stavljanje slika, koristi se <IMG> tag.

<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>

Takođe, moramo odrediti izvor (source) i veličinu slike.

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="grb.jpg" WIDTH=124 HEIGHT=150>
</BODY>

Ovde moram naglasiti da atribut src ne pokazuje samo koja je slika u pitanju, već i gde se ona nalazi. Dijagrami koji slede, trebalo bi da Vam razjasne korišćenje ovog atributa, ako želimo da stavimo sliku koja se, npr, zove "chef.gif".

SRC="chef.gif" znači da se slika nalazi u istom folderu u kome je i HTML dokument, koji je poziva.
SRC="images/chef.gif" znači da se slika nalazi u folderu ispod HTML dokumenta koji je poziva. Pitanje je: koliko nivoa ispod? Onoliko koliko je potrebno (a u našem slučaju - jedan)!
SRC="../chef.gif" znači da je slika u folderu iznad HTML dokumenta koji je poziva.
SRC="../../chef.gif" znači da je slika dva foldera iznad HTML dokumenta koji je poziva.
SRC="../images/chef.gif" znači da je slika jedan folder gore, pa jedan dole u odnosu na HTML dokument.
SRC="../../../other/images/chef.gif" - nadam se da sami shvatate šta ovo znači.

Postoji i drugi način. Naime, moguće je i korišćenje kompletnih putanja (URL-ova). Na primer: http://www.neka_adresa.net/~ja-na-netu/LottzaStuff/other/images/chef.gif

Zašto, pitate se Vi, ima više smisla koristiti relativne (delimične) URLove, nego apsolutne (kompletne) URLove? Zato što tako možete napraviti svoj sajt lokalno (na svom hard-disku), a svi linkovi će normalno funkcionisati. Kada završite sve strane, ceo sajt možete da upload-ujete na server (a da sve i dalje radi normalno). Novo pitanje bi bilo: postoji li, onda, razlog da koristimo apsolutne URLove? Naravno, i to kada se slike nalaze na potpuno drugom serveru.

 

*PITANJE: Čim sam svoj sajt prebacio sa hard-diska na server, svi linkovi na slike su "zamrli". Koristio sam relativne URLove, a slike su sigurno na serveru. Šta se to dešava?

ODGOVOR: Zvuči kao problem sa velikim/malim slovima. Za sisteme bazirane na Windowsu, Grb.jpg je isto što i GRB.JPG, a to je isto što i grb.jpg. Međutim, čim se takav sajt prebaci na server (obično) baziran na UNIXu/LINUXu, to postaju tri različita imena. Vi kažete serveru da nađe fajl Grb.jpg, ali on može da nađe samo GRB.JPG.
Kako popraviti? Uvek koristite mala slova. Neka Vam to postane navika.
Druga stvar na koju treba obratiti pažnju je izbegavanje razmaka u imenima HTML fajlova. Umesto njih, koristite donju crtu. Promenite Moja Slika.gif u moja_slika.gif i Sve O Meni.HTML u sve_o_meni.html.

Sledeći atribut IMG taga koji treba pomenuti je ALT...

<IMG SRC="grb.jpg" WIDTH=124 HEIGHT=150 ALT="Grb Beograda!">

ALT predstavlja zamenu za sliku, kada posetilac sajta ne vidi slike (iz bilo kog razloga). Neko može da koristi čist tekstualni browser; neko je možda isključio prikazivanje slika da bi brže surfovao (kako se to radi? - u Netscape-u pritisneš Options pa skloniš potvrdu sa Auto Load Images), itd. U takvim slučajevima, atribut ALT može biti veoma važan Vašim posetiocima.

Još malo o veličini slika.

Probajte ovo...

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="grb.jpg">
</BODY>

Kao što vidite, browser može i sam da odredi veličinu slike. Zašto se onda gnjavimo sa dimenzijama? Razlog je jednostavan - to omogućava browser-u brže učitavanje slike.

Šta je tu najinteresantnije? Pazi sad...

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="grb.jpg" WIDTH=300 HEIGHT=175>
</BODY>

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="grb.jpg" WIDTH=40 HEIGHT=200>
</BODY>

Možete definisati bilo koju veličinu za sliku, nevezano za njenu pravu veličinu. Ako Vam nije jasno, pogledajte šta sve može da se uradi sa ovom malom, crvenom tačkom -> <- (zapravo, to je slika, dimenzija 1×1).

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P>
<CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER>
</BODY>

Interesantno, zar ne?

<--LEKCIJA 2        LEKCIJA 4-->

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