Sanirim artik browserin (tarayici program) nasil çalistigi hakkinda biraz
bilgi edinme zamani geldi.
Önce bir örnek..
<BODY BGCOLOR="#FFFFFF">
Güzel bir sey
bir demet çiçek gibi!
</BODY>
| Güzel bir sey bir demet çiçek gibi! |
<BODY BGCOLOR="#FFFFFF">
Hey!
Burada
neler
oluyor??
</BODY>
| Hey! Burada neler oluyor?? |
Browser eger formati söylemezseniz tanimaz.
Siz aksini söylemedikçe, karakterleri ardarda siralar. Yeni bir satir
baslamak istiyorsaniz, satirbasi yapmalisiniz.
<BODY BGCOLOR="#FFFFFF">
Hey!
<BR> Burada
<BR> neler
<BR> oluyor??
<BR> </BODY>
Hey!
Burada
neler
oluyor??
|
<BR> sadece satirbasi anlamina gelir.
<BR> benzer bir ikinci komut ise, <P>. Buda yeni bir
paragrafin baslangicini belirtir. Bir satir atlayip, yeni bir satirdan
satirbasi yaparak paragrafi baslatir.
<BODY BGCOLOR="#FFFFFF">
Hey!
<P>Burada
<P>neler
<P>oluyor??
</BODY>
| Hey!
Burada
neler
oluyor?? |
Bu satirbaslatan etiketler hakkinda bir not:
Bunlari bir defadan fazla kullanamazsiniz. Yani bir baska deyisle
<P><P><P> seklinde yazarak bir kaç tane bos satir elde edemezsiniz.
Genelde tek bir tane bos satir birakirlar. Az sonra size bir kaç tane bos
satiri nasil elde edeceginizi anlatacagim.
Önce buraya bakiniz...
<BODY BGCOLOR="#FFFFFF">
Gerçekten güzel bir sey.
</BODY>
Tarayici birden fazla boslugu tanimaz. Gerçekten saçma görünen bir sey
ama, böyle olmasi en uygun hali. Bu size dökümanin görünümünün tüm
kontrolunu vermekte.
Browsere "bosluk" geldigini anlatan küçücük
bir kod vardir yani, -> den
bahsediyorum.
Simdi bunu bir deneyin bakalim...
<BODY BGCOLOR="#FFFFFF">
Gerçekten
güzel
bir sey.
</BODY>
& özel bir karakterin
basladigini, ; ise bittigini belirtir; arada kalan
harfler ise, özel karakteri tanimlarlar. Bu özel karakterlerden bir kismi
asagidadir. Dikkat: bunlar hep küçük harfle yazilmalidir.
- ( bosluk)
- < (< küçüktür isareti)
- > (> büyüktür isareti)
- & (& ampersand isareti)
- " (" çift tirnak)
- ­ ( soft hyphen)
Bunlari herzaman kullanmaniz gerekmez, bazen gerçek isareti yazmak
tarayici programi sasirtabilir. Bu isaretlerin nezaman karistiracagini
nasil anlariz? diye sorarsaniz; Bunun tam olarak bir kurali yoktur. Biraz
alistirma ve web sayfanizda sapitmis sekilde duran karakterleri görünce
kullanmaya baslarsiniz.
Bu arada hatalariniz üzerine düsüncelerim: Bir kisim insanlar
hatalarin, hata yapmanin kötü olacagini düsünerek, hata yapmamak için
yeni olan hiç bir seyi denemezler. Elbette ayni hatayi tekrar tekrar
yapmak biraz aptalligin yada nazikçe dikkatsizligin belirtisi olsada,
ögrenmeniz sirasinda herseyi berbat etmekten korkmayiniz. Sonuçta
hatalarinizdan da ögreneceksiniz.
Eger hiç bir seyi berbat etmiyorsaniz, hiç bir sey ögrenmiyorsunuz,
dolayisi ile, büyük bir ihtimalle hiç bir sey yapmiyorsunuz demektir.
Biliyorsunuz, herseyi berbat etmek, ögrenmenin adeta bir yan ürünüdür.
Bu kadar gevezelik yeter artik.
Simdi sizleri sikmaya baslamadan bir iki seyin üzerinden çabucak
gidiverelim. Ne diyorduk?
Browser, eger satirbasi yapmasini söylemezseniz, yazdiklarinizi düzgün
bir metin gibi yazmaya devam eder. Bütün bosluklari da 1 bosluk degerine
düsürerek gösterecektir. Eger arada daha fazla bosluk isterseniz, ( )
bosluk kodu olarak kullanmaniz gerekmektedir. Bahsetmedigim bir nokta:
Eger, Return (yada Enter) tusuna basarsaniz, browser onu da bir bosluk
olarak kabul edecektir..(gerçekten bir bosluk yoksa.)
Hemen su örnegi inceleyin:
<BODY BGCOLOR="#FFFFFF">
Gerçekten<BR>güzel<BR>bir
sey<BR>
bir demet<BR>çiçek<BR>gibi!
</BODY>
Gerçekten
güzel
bir sey
bir demet
çiçek
gibi!
Önemli Not:
Hemen Yukarida gördügünüz <BR> yani
"Line Break", browsere satirbasi yapmasini söyleyen HTML etiketidir.
Bu açiklamayi atladigimizi farkedip bizi uyaran
Ersan beye tesekkür ederim.
Eger sizde böyle eksiklikleri farkederseniz lütfen bir e-mail ile
bildirin. |
Umarim gayet açik seçik olarak demek istedigimi anlatmisimdir...
Bir sonraki anlami kendinden menkul bir etiket
<BODY BGCOLOR="#FFFFFF">
<CENTER>Gerçekten güzel bir sey</CENTER>
</BODY>
Gördügünüz gibi ister bir kelime, isterse de tüm sayfaniz olsun,
<CENTER> etiketinin arasinda ne kalirsa, ortalanir. Bitti...
Neredeyse bir kaçtane bos satir yapmayi
anlatmasini unutuyordum. Çok kolay, istediginiz bos satir sayisi kadar,
bosluk isaret + satirbasi etiketi koyunuz.
<BODY BGCOLOR="#FFFFFF">
Gerçekten güzel<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
bir seyyyy..
</BODY>
Gerçekten güzel
bir seyyyy.. |
Artik resimlerimizi websayfamiza
yerlestirmenin zamani gelmis bulunuyor. Simdi bu resimi kullanacagiz, sag
tiklayarak resim klasörüne kopyalayin
Bir resmi belirtmek için <IMG> (image) etiketini kullaniriz.
<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>
Ayni zaman da kaynagini ( src = source ) ve ölçülerini ( size )
belirtiriz.
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101>
</BODY>
Bir seyi belirtmeden olmaz. Kaynak yani
SRC resmin hangi resim oldugunu belirtirken, ayni zamanda
nerede oldugunuda bildirir. Yukardaki SRC, "chef.gif",
browserin "chef.gif" adindaki resmi HTML ile ayni directory den
yüklemesini belirtiyor (yani resim dosyasi ile HTML dosyaniz ayni
klasörün içinde bulunuyor.)
Asagida semalarla anlatmaya çalistim (ilk baktiginizda anlamazsaniz,
gidin kendinize bir kahve yapin, yada mevsim meyvalarindan atistirin,
uykunuz açilsin, tekrar okuyun. Bunlarin da faydasi olmazsa, üzerinde
resim olan herhangi bir web sayfasini sag tiklayip, kaynagini
görüntüleyin, bakin nasil yapmislar. Gene çözemediyseniz, üzülmeyin, bana
da ilk 1-2 sefer böyle olmustu, bakin simdi size ders bile veriyorum
:-))), gerçekten, anlamadiginiz seyleri hiç dert edinmeyin, nasilsa bir
gün ögreniyorsunuz.)
 |
SRC="chef.gif" resmin onu çagiran HTML dökümani ile ayni
klasörde oldugu anlamina gelir. |
 |
SRC="imgs/chef.gif", resmin, onu çagiran HTML
dökümanindan bir seviye asagida baska bir klasörde oldugunu belirtir.
Bu daha da ileri seviyelere gidebilir. |
 |
SRC="../chef.gif", resmin, onu çagiran HTML dökümanindan
bir seviye yukarda oldugunu belirtir. (bir itiraf-moraliniz düzelsin
diye- bu satirda yazdiklarimi, sayfayi tercüme ettigim su ana kadar
ben bile bilmiyordum. Gerçekte bu benim için bir hobi gibi birsey,
ama insanlara olabildigince yardimci olmaya çalisiyorum, hepsi bu.)
|
 |
SRC="../../chef.gif" resmin, onu çagiran HTML
dökümanindan iki seviye yukarda oldugunu belirtir (yalan yok,
yukardaki satirdaki itirafimi bu satir için de tekrarlayabilirsiniz,
gerçekten :-))) |
 |
SRC="../images/chef.gif"resmin, onu çagiran HTML
dökümanindan bir seviye yukarda ve images klasöründe oldugunu
belirtir (artik bu sayfa benim itiraflarim sayfasina dönmeden bu
konuyu kapamaliyim, çünkü, bir bilen olarak imajim bayagi hasar
aldi.) |
| Diyorum ki: |
Siz kafanizi fazla karistirmayin, web alaninizi da saçma bir hale
getirmemek için, bütün resimlerinizi resimler diye bir
klasörde toplayin sonrada asagidaki formatta bir etiketleme yapin.
Hepimizin selameti açisindan en uygunu budur. Zaten biz amatörlere
bukadari gerçekten yeterli, hem sonra kim görecek ki directorynizi? |
<IMG SRC="resimler/resim_adi.gif" WIDTH=130 HEIGHT=101>
Bu arada bir degisik yoluda resimlerin kaynaginin komple bir URL
olmasi. Örnegin, http://www.turkmcsd.net/images/banners/banner_7.gif
Bana bir iyilik yapin, web sitenize asagidaki linki yerlestirin (yani
dersler hepten bedavaya gelmesin bari.)
SSS: Websayfami Upload ettikten sonra, resimlerim
gözükmüyor neden acep? Resimlerimi de yükledigime eminim, çünkü
FTP programini penceresinden orada olduklarini görüyorum.
A: Her zamanki durum, Windows tabanli sistemlerde Chef.gif
ile CHEF.GIF ayni seydir. Ha Ali Veli, ha Veli Ali. Resmi Unix
sunucusuna koyun (genel durum.) 3 ayri dosya adina dönüsür. Siz
sunucuya Chef.gif 'i yüklemesini söylüyorsunuz, fakat onun
buldugu ise, CHEF.GIF.
Çözüm: bütün resim dosyalarini küçük harfle yükleyin ve web
sayfaniza kaydedin. Bunu da aliskanlik haline getirin. Ayri bir
aliskanlik konusu ise dosya adlarinda bosluk birakmayin, alt
karakter kullanin. Benim Annem.gif yerine benim_annem.gif i
tercih ediniz. |
|
Bir baska
IMG özelligi olan ALT tan da bahsetmeden geçemeyiz....
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101
ALT="Chef">
ALT resimin yerine kullanilan bir açiklama yazisinin
bulunmasidir. Kullanicinin tarayici programinin resim yükleme özelligi
sayfalarin hizli yüklenmesini saglamak için kapatilmis, yada sadece metin
gösteren bir browser kullaniyor olabilir. Bu gibi durumlarda ALT
özelligi önemli olabilir.
Gelelim resimlerin SIZE yani ölçülerrine.
Bunu bir deneyin bakalim...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif">
</BODY>
Gördügünüz gibi, browser bütün isi kendisi yapiyor, tahminen resmi
ölçülendirdi ve görüntüledi. O zaman ölç,yle isimiz ne? Detaylara
girmezseniz sayfaniz daha çabuk yüklenir.
Güzel tarafi nerede? Suna bir bakin...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=300 HEIGHT=101>
</BODY>
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="chef.gif" WIDTH=40 HEIGHT=200>
</BODY>
Dilegidiniz ölçüleri yazabilirsiniz, ve esas
ölçülerin önüne geçersiniz. Simdi su kirmizi noktaya bakin ->
 <-. 1x1
ölçüsünde bir kare. Bakin onunla neler yapabiliyorum...
<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>
Nasil ama?
|