Mala Web skola ! --- HTML Lekcija 4

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

Vreme je da naučimo pravljenje linkova.

To je zaista veoma jednostavno. Napravimo link na Yahoo.
Počnimo ovako...

<BODY BGCOLOR="#FFFFFF">
Posetite Yahoo!
</BODY>

Posetite Yahoo!

Onda ćemo dodati par ANCHOR tagova (tzv. sidra).

<BODY BGCOLOR="#FFFFFF">
Posetite <A>Yahoo!</A>
</BODY>

Posetite Yahoo!

Dodajte URL i gotovo! URL je skraćenica od Universal Resource Locator (to znači univerzalni lokator), što zapravo znači web adresa.

<BODY BGCOLOR="#FFFFFF">
Posetite <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>

Posetite Yahoo!

Napravimo još jedan.

<BODY BGCOLOR="#FFFFFF">
Posetite Netscape!
</BODY>

Posetite Netscape!

<BODY BGCOLOR="#FFFFFF">
Posetite <A HREF="http://home.netscape.com/">Netscape!</A>
</BODY>

Posetite Netscape!

Link za e-mail radi vrlo slično. Jedina razlika je to što se umesto web adrese koristi e-mail adresa.

<BODY BGCOLOR="#FFFFFF">
Posalji mi <A HREF="mailto:hej@zdravo.co.yu">mail!</A>
</BODY>

Posalji mi mail!

* PITANJE: Mogu li odmah da odredim Subject u svom mail linku?

Odgovor: Naravno, ali tu postoji začkoljica. Ovako se to radi...

... ali imaj na umu, da neki e-mail klijenti ne podržavaju ovu funkciju.

* PITANJE: Šta treba da uradim, pa da mi linkovi ne budu podvučeni?

ODGOVOR: Tehnički, ovo nije moguće izvesti uz pomoć HTML-a. Međutim, tu mogu da pomognu stilovi (StyleSheets), ali samo kod onih browsera koji ih podržavaju! Stavite ovo u HEAD deo HTML fajla, i oni browseri koji podržavaju StyleSheets, linkove će pisati nepodvučene...

Evo šta treba da uradite ako koristite Netscape Navigator, a želite da Vam se linkovi pojavljuju nepodvučeni: otvorite browser, kliknite na Options, pa izaberite General Preferences. Izaberite tab Appearance, i na kraju uklonite potvrdu kod rečenice Links are: Underlined. (Verovatno nešto slično postoji i za Internet Explorer.)

Moguće je koristiti i slike kao linkove. Kako? Vrlo lako: potrebno je staviti <IMG> tag umesto odgovarajuće reči.

<BODY BGCOLOR="#FFFFFF">
Posetite <A HREF="http://www.beograd.org.yu"><IMG SRC="grb.jpg" WIDTH=120 HEIGHT=175></A>
</BODY>

Posetite

* PITANJE: Kako mogu da se oslobodim one ružne plave linije oko slike-linka?

ODGOVOR: Prosto... samo dodaj BORDER=0 u IMG tag. (Vidi dole!)

<BODY BGCOLOR="#FFFFFF">
Posetite <A HREF="http://www.beograd.org.yu"><IMG SRC="grb.jpg" WIDTH=120 HEIGHT=175 BORDER=0></A>
</BODY>

Posetite

Još jedna stvar u vezi sa linkovima... Sasvim je prihvatljivo napraviti link na nečiju web stranu bez pitanja. Linkovi su ono što Mrežu čini Mrežom!

Kada stavljate slike na Vašu stranicu, ne zaboravite da one sadrže mnogo podataka, pa se sporo učitavaju. Rešenje za smanjenje veličine (mislim na veličinu u kilobajtima!) je smanjenje dimenzija. Međutim, smanjenje dužine i širine za po pola smanjuje veličinu u kB za samo 1/4. Takođe, može se smanjiti i broj boja. Na primer:


• Dimenzije 310 x 304 • Broj boja - 238 • Veličina - 69 Kb

• Dimenzije 207 x 203 • Broj boja - 238 • Veličina - 34 Kb	• Dimenzije 207 x 203 • Broj boja - 48 • Veličina - 19 Kb

Za obradu slika korišćen je Paint Shop Pro.

Razmislimo malo: prva slika je veća, lepša i boljeg kvaliteta, ali s druge strane... ako Vašoj strani treba čitava večnost da se učita, posetioci će je verovatno napustiti, ne videvši ništa!

Da bi ste videli koliko se slika može umanjiti, probajte GIF Works (klikni donju sliku). Pošaljite im svoju sliku, koja će se vratiti progresivno optimizovana. GIF Works predstavlja besplatni on-line alat za obradu i manipulaciju GIF slikama (nešto kao znatno oslabljeni, ali ipak funkcionalan Photoshop).

Još jedna mogućnost je postavljanje umanjenih sličica (thumbnails), koje će biti linkovi do velikih slika.Kao primer neka posluže ove tri sličice mojih automobila (hmm, ne bi to bilo loše!).

Kliknite na sličicu da bi ste je videli u punoj veličini

Prva stvar koju trebate da uradite je da startujete svoj program za obradu slika (npr. Adobe Photoshop), i da napravite umanjene verzije svojih slika. Takođe, trebalo bi smanjiti i broj boja (256 je sasvim dovoljno za Mrežu). Ovo je važno: nikako nije dovoljno samo smanjiti dimenzije slike u <IMG> tagu. Naime, to bi značilo sabijanje slike u manji prostor, što svakako ne bi ubrzalo učitavanje strane (lično smatram da bi ga i usporilo, ali to ne mogu da garantujem). Ono što Vama treba je umanjena kopija velike slike, koju ćete koristiti kao link.

Pa, da vidimo kako to izgleda. Koristićemo srednju sliku (plava Korveta). Snimite i veliku i umanjenu sliku u Vaš radni folder. (Kako? - Ako koristite Netscape, desnim klikom i izborom stavke Save Image As.)

Počnite sa <IMG> tagom.

Dodajte <A> tagove.

Dodajte URL, i to je to!

Sada možete, ukoliko želite, da uklonite plavu liniju oko slike. S druge strane, možete i da je ostavite, kako bi Vaši posetioci znali da je u pitanju link. To sve zavisi od Vas.

* PITANJE: U Netscape Navigatoru moje slike-linkovi imaju male plave crtice pored sebe. Takođe, ostaju i mali međuprostori između slika, a ja želim da sve to bude skroz sastavljeno. O čemu se radi? Inače, u Internet Exploreru sve izgleda normalno.

ODGOVOR: Netscape tretira pritisnut taster Enter kao razmak (u ovom slučaju između slika). Internet Explorer ne radi to. To je to. Male plave crtice su samo link ispod razmaka. Lek: ne pritiskajte Enter ni pre ni posle slike.

Ovo je kôd za gornje slike:

Promena kôda u ovako nešto bi uklonila te plave crtice:

Dodatna podešavanja i razmak nestaje:

Je li ovo prevelik problem? Jeste, samo ako ne razumete šta se dešava, i kako to srediti. Je li Netscape loš browser? Ne, naravno; samo je drugačiji od Explorera. Važno je znati da ono što je napisano neće izgledati uvek isto u svim browserima.

Postoji još jedna vrsta linka: link na određeni deo strane. Kliknite ovde da bi ste magično bili prebačeni na deo gde smo prvi put pričali o URLovima.

Evo kako se to radi.

Prvo označite deo gde želite da prebacite posetioca. Uzmite neku reč i ubacite je između <A> tagova.

<A>Dodajte</A> URL adresu i to je gotovo!

Označimo deo na koji ćemo skočiti tako što ćemo ga imenovati /NAME="ime"/.

<A NAME="upabit">Dodajte</A> URL adresu i to je gotovo!

Ovim ste označili tačku na koju će se link odnositi.

Sada možemo da počnemo "gradnju" linka.

Klikni <A>ovde</A>

Dodajmo ime dokumenta...

Klikni <A HREF="lesson04.html">ovde</A>

I na kraju, dodajte sidro, tj. NAME atribut. Ovako...

Klikni <A HREF="lesson04.html#upabit">ovde</A>

To je to! Stigosmo do kraja još jedne dosadne (dosadne!?) lekcije o HTMLu. Ako ste spremni i odmorni, bacite se na sledeću lekciju. Ako ne, odmorite se!

<--LEKCIJA 3 LEKCIJA 5-->

Sadržaj Lekcija
Uvod - 1 - 2 - 3 - 4 - 5 - 6 Indeks "Barebones"
HTML vodič

Z o N i . W e b !