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

Lekcija 5... Dobro, da počnemo. Kao što i sami znate, dosad smo prešli puno toga. Rad sa tekstom, odnosno fontovima, sa slikama, linkovima. Međutim, i dalje ima što-šta novo da se nauči.
Sada je pravo vreme da popričamo o rezoluciji monitora. Moguće su različite rezolucije: od 640×480, preko 800×600 do 1024×768 (naravno, postoje i više rezolucije, ali ne verujem da se one previše koriste). Ima li ova priča ikakve veze sa web dizajniranjem? Naravno da ima! Naime, veoma je važno kako će ono što Vi napravite u Vašoj rezoluciji od, npr, 1024×768 izgledati nekome ko koristi rezoluciju 640×480 (i obrnuto). Kao primer neka Vam posluže tri donje sličice iste prezentacije, ali na različitim rezolucijama.

640×480 800×600 1024×768

Veoma je dobra ideja proveriti svoje strane na drugim rezolucijama (naravno, i na drugim browser-ima i operativnim sistemima). Vaša pažljivo skrojena prezentacija može izgledati... recimo, vrlo čudno na drugim rezolucijama! Ovo se naročito odnosi na prezentacije rađene na višim rezolucijama. Pogledajte tako urađenu prezentaciju u nižoj rezoluciji, i može se desiti da budete vrlo, vrlo neprijatno iznenađeni. Postoji korisna Majkrosoftova alatka (Quickres), koja omogućava jednostavno menjanje rezolucije. Vi se sada sigurno pitate: "E, baš ti hvala - a gde da je nađem?", a ona Vam je na dohvat ruke - baš ovde. Međutim, moguće je naći i neke mnogo bolje alatke za takvu upotrebu. Ja, na primer, koristim odlični utility tajvanske kompanije EnTech, pod imenom MultiRes. Možete ga naći na njihovom sajtu (da bih Vam olakšao posao, verziju 1.20 sam upakovao u ovaj kurs - ovde - 39 kB).

Pređimo na još neke alatke za formatiranje teksta. Prva je <BLOCKQUOTE>. U većini browsera, ovaj tag će dodati margine sa strane. (Ne znam da li je to baš prava terminologija, ali nadam se da shvatate pojentu.)

<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
Definicija: Kompjuter, ili računar, predstavlja sklop visokotehnoloških komponenti (hardware) oplemenjenih programima (software) sa zajedničkim ciljem da se omogući masovna obrada podataka, bavljenje grafičkim dizajnom, praćenje tehnološkog procesa proizvodnih programa, upravljanje komunikacionim sistemima itd.
</BLOCKQUOTE>
</BODY>
Definicija: Kompjuter, ili računar, predstavlja sklop visokotehnoloških komponenti (hardware) oplemenjenih programima (software) sa zajedničkim ciljem da se omogući masovna obrada podataka, bavljenje grafičkim dizajnom, praćenje tehnološkog procesa proizvodnih programa, upravljanje komunikacionim sistemima itd.

Sledeća korisna alatka su liste. One mogu biti ORDERED liste ili UNORDERED liste (ne znam kako bi ovo trebalo da se prevede na srpski, ali mislim da ćete shvatiti o čemu se radi).

Ovo je ordered lista
  1. nešto
  2. još nešto
  3. i ovo
  4. i kraj
Ovo je unordered lista
  • crveno
  • plavo
  • belo
  • zeleno
Prvo ćemo videti kako se pravi UNORDERED lista. Vrlo je jednostavno...

Ovo je početak.

<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
</BODY>
Šta želim za rodjendan?

Pažnja - mi zapravo još nismo počeli da pravimo listu... ovo je samo nekakav naslov...

Dodajmo odgovarajuće tagove.

<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
<UL>
</UL>
</BODY>
Šta želim za rodjendan?

Dodajmo element liste...

<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
<UL>
<LI>nov PC
</UL>
</BODY>
Šta želim za rodjendan?
  • nov PC

Dodajmo još elemenata (budimo neskromni!)

<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
<UL>
<LI>nov PC
<LI>brz gliser
<LI>1.000.000 $
<LI>ostrvo na Pacifiku
<LI>Leticiju Kastu *
</UL>
</BODY>
(* devojke - i mladići sa takvim sklonostima: slobodno upišite Leonardo DiKaprio, npr.)
Šta želim za rodjendan?
  • nov PC
  • brz gliser
  • 1.000.000 $
  • ostrvo na Pacifiku
  • Leticiju Kastu

Bravo! Napravili ste listu!

Kako se pravi ordered lista? Lako! Samo treba promeniti <UL> tag u <OL>.

<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
<OL>
<LI>nov PC
<LI>brz gliser
<LI>1.000.000 $
<LI>ostrvo na Pacifiku
<LI>Leticiju Kastu
</OL>
</BODY>
Šta želim za rodjendan?
  1. nov PC
  2. brz gliser
  3. 1.000.000 $
  4. ostrvo na Pacifiku
  5. Leticiju Kastu

Ovde moram da napomenem da ne bih imao ništa ni protiv obrnutog redosleda!

Pitanje: Ko ti je ta Leticija Kasta?
Odgovor: Francuska manekenka.
Pitanje: A kako ona izgleda?
Odgovor: Ovako! (slika veličine 800×600, odn. oko 95 kB)

Osim ove dve, postoji i DEFINICIONA lista, koja bi mogla da izgleda ovako...

modem...
uređaj koji omogućava komunikaciju udaljenih računara
miš.........
uređaj koji omogućava pokretanje kursora na ekranu
itd...........
i tako dalje

Počnimo rad...

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

Dodajmo definicioni naslov...

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Definicija kompjutera
</DL>
</BODY>
Definicija kompjutera

Dodajmo element liste.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Definicija kompjutera
<DD>Kompjuter, ili računar, predstavlja sklop visokotehnoloških komponenti (hardware) oplemenjenih programima (software) sa zajedničkim ciljem da se omogući masovna obrada podataka, bavljenje grafičkim dizajnom, praćenje tehnološkog procesa proizvodnih programa, upravljanje komunikacionim sistemima itd.
</DL>
</BODY>
Definicija kompjutera
Kompjuter, ili računar, predstavlja sklop visokotehnoloških komponenti (hardware) oplemenjenih programima (software) sa zajedničkim ciljem da se omogući masovna obrada podataka, bavljenje grafičkim dizajnom, praćenje tehnološkog procesa proizvodnih programa, upravljanje komunikacionim sistemima itd.

Na kraju bi bilo lepo podebljati naslov. To, naravno, nije obavezno, ali po mom skromnom mišljenju tako izgleda mnogo lepše.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT><B>Definicija kompjutera</B>
<DD>Kompjuter, ili računar, predstavlja sklop visokotehnoloških komponenti (hardware) oplemenjenih programima (software) sa zajedničkim ciljem da se omogući masovna obrada podataka, bavljenje grafičkim dizajnom, praćenje tehnološkog procesa proizvodnih programa, upravljanje komunikacionim sistemima itd.
</DL>
</BODY>
Definicija kompjutera
Kompjuter, ili računar, predstavlja sklop visokotehnoloških komponenti (hardware) oplemenjenih programima (software) sa zajedničkim ciljem da se omogući masovna obrada podataka, bavljenje grafičkim dizajnom, praćenje tehnološkog procesa proizvodnih programa, upravljanje komunikacionim sistemima itd.

Sledeća korisna stvar je horizontalna linija.

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

I u ovom slučaju postoji nekoliko dodatnih opcija...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>

Liniju možemo postaviti levo, desno ili je centrirati.

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>

Možemo da kontrolišemo i debljinu (default vrednost je 2), kao i boju (na žalost, promena boje videće se samo u Internet Exploreru!)...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3 COLOR="RED">
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>

Takođe, linija može biti i popunjena...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>

Svakako se sećate da sam rekao da browseri ne razumeju formatiranje teksta bez tagova, tj. da tekst prikazuju u jednoj ravnoj liniji. Otprilike ovako (napomena - koristićemo font Courier New)...

<BODY BGCOLOR="#FFFFFF">
<font face="courier new" size="3">

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |    Z o N i . W e b !    |
     |           ***           |
     |   Kratki kurs HTML-a    |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</BODY>
\|/ (@ @) +----oOO----(_)-----------+ | Z o N i . W e b ! | | *** | | Kratki kurs HTML-a | +-----------------oOO-----+ |__|__| || || ooO Ooo

Međutim, sa <PRE> (preformatirano) tagom, možemo da dobijemo rezultat, koji će izgledati baš onako kako smo otkucali!

<BODY BGCOLOR="#FFFFFF">
<PRE>

                 \|/
                (@ @)
     +----oOO----(_)-----------+
     |    Z o N i . W e b !    |
     |           ***           |
     |   Kratki kurs HTML-a    |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</PRE>
</BODY>
                 \|/
                (@ @)
     +----oOO----(_)-----------+
     |    Z o N i . W e b !    |
     |           ***           |
     |   Kratki kurs HTML-a    |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

* Obratite pažnju na to da je korišćen font Courier New (može i Times New Roman), fiksne širine (tt).

Poslednji tag koji ćemo ovde komentarisati je komentar tag, koji služi za komentarisanje :-).

<BODY BGCOLOR="#FFFFFF">
<!--Ovo jeste komentar-->
Ovo nije<P>
Komentar može da se nalazi bilo gde u HTML fajlu, a browseri će ignorisati sve što se nalazi unutar zagrada taga. Ovaj tag možete koristiti za dodavanje skrivenih poruka <!--Zdravo, mama!-->, nekih podsetnika za sebe <!--Kupi hleb i mleko-->, ili možete dodati neke korisne savete onima koji gledaju Vaš Document source<!--Će te ubijem, ako prekopiraš išta od mene!!!-->.
</BODY>
Ovo nije

Komentar može da se nalazi bilo gde u HTML fajlu, a browseri će ignorisati sve što se nalazi unutar zagrada taga. Ovaj tag možete koristiti za dodavanje skrivenih poruka , nekih podsetnika za sebe , ili možete dodati neke korisne savete onima koji gledaju Vaš Document source.


Da bi bilo potpuno jasno, treba naglasiti da komentar mora početi sa <!-- i završiti sa -->
Između njih, možete staviti sve što želite - čitave pasuse, druge tagove... Browser će jednostavno ignorisati sve dok ne nađe -->

Pa, to bi bilo sve! Sada znate sve osnovne tagove, koji su Vam potrebni za zidanje web tvrđava. Zar ne postoji još tagova? Postoji, i to još popriličan broj. Recimo da ste sada naučili 70% potrebnih, osnovnih tagova. Kada dobro utvrdite gradivo, predlažem Vam da krenete dalje. Čekaju Vas napredni kursevi o Tabelama, Formularima i Okvirima (frejmovima). Ti kursevi će Vam obezbediti znanje novih 27% HTML znanja. Pitate se: a gde su poslednja 3%? To su većinom tagovi koji se retko koriste, tagovi sa retkom ili ograničenom primenom. Njih ćete naučiti (ako Vam uopšte budu potrebni) kasnije, tokom rada.

Kada napravite svoje HTML strane, verovatno ćete hteti da ih postavite na server. Serveri su specijalni kompjuteri, koji ugošćavaju web strane, i prikazuju ih svakome ko to zatraži (tako što otkuca odgovarajuću adresu). Kratak vodič o tome mođete naći ovde.

<--LEKCIJA 4        LEKCIJA 6-->

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