. - HTML Dersi 3

Sanırım artık browserin (tarayıcı program) nasıl çalıştığı hakkında biraz bilgi edinme zamanı geldi.
Önce bir örnek..

<BODY BGCOLOR="#FFFFFF"> Güzel bir şey bir demet çiçek gibi! </BODY>

Güzel bir şey bir demet çiçek gibi!

<BODY BGCOLOR="#FFFFFF"> Hey! Burada neler oluyor?? </BODY>

Hey! Burada neler oluyor??

Browser eğer formatı söylemezseniz tanımaz. Siz aksini söylemedikçe, karakterleri ardarda sıralar. Yeni bir satır başlamak istiyorsanız, satırbaşı yapmalısınız.

<BODY BGCOLOR="#FFFFFF"> Hey! Burada neler oluyor?? </BODY>

Hey!
Burada
neler
oluyor??

  sadece satırbaşı anlamına gelir.   benzer bir ikinci komut ise, . Buda yeni bir paragrafın başlangıcını belirtir. Bir satır atlayıp, yeni bir satırdan satırbaşı yaparak paragrafı başlatır.

<BODY BGCOLOR="#FFFFFF"> Hey! Burada neler oluyor?? </BODY>

Hey!

Burada

neler

oluyor??

Bu satırbaşlatan etiketler hakkında bir not:
Bunları bir defadan fazla kullanamazsınız. Yani bir başka deyişle  şeklinde yazarak bir kaç tane boş satır elde edemezsiniz. Genelde tek bir tane boş satır bırakırlar. Az sonra size bir kaç tane boş satırı nasıl elde edeceğinizi anlatacağım.

Önce buraya bakınız...

<BODY BGCOLOR="#FFFFFF"> Gerçekten güzel bir şey. </BODY>

Gerçekten güzel bir şey.

Tarayıcı birden fazla boşluğu tanımaz. Gerçekten saçma görünen bir şey ama, böyle olması en uygun hali. Bu size dökümanın görünümünün tüm kontrolunu vermekte.

Browsere "boşluk" geldiğini anlatan küçücük bir kod vardır yani, ->   den bahsediyorum.

Şimdi bunu bir deneyin bakalım...

<BODY BGCOLOR="#FFFFFF"> Gerçekten         güzel         bir şey. </BODY>

Gerçekten güzel bir şey.

& özel bir karakterin başladığını, ; ise bittiğini belirtir; arada kalan harfler ise, özel karakteri tanımlarlar. Bu özel karakterlerden bir kısmı aşağıdadır. Dikkat: bunlar hep küçük harfle yazılmalıdır.

  ( boşluk)
< (< küçüktür işareti)
> (> büyüktür işareti)
& (& ampersand işareti)
" (" çift tırnak)
 ( soft hyphen)

Bunları herzaman kullanmanız gerekmez, bazen gerçek işareti yazmak tarayıcı programı şaşırtabilir. Bu işaretlerin nezaman karıştıracağını nasıl anlarız? diye sorarsanız; Bunun tam olarak bir kuralı yoktur. Biraz alıştırma ve web sayfanızda sapıtmış şekilde duran karakterleri görünce kullanmaya başlarsınız.

Bu arada hatalarınız üzerine düşüncelerim: Bir kısım insanlar hataların, hata yapmanın kötü olacağını düşünerek, hata yapmamak için yeni olan hiç bir şeyi denemezler. Elbette aynı hatayı tekrar tekrar yapmak biraz aptallığın yada nazikçe dikkatsizliğin belirtisi olsada, öğrenmeniz sırasında herşeyi berbat etmekten korkmayınız. Sonuçta hatalarınızdan da öğreneceksiniz.
Eğer hiç bir şeyi berbat etmiyorsanız, hiç bir şey öğrenmiyorsunuz, dolayısı ile, büyük bir ihtimalle hiç bir şey yapmıyorsunuz demektir. Biliyorsunuz, herşeyi berbat etmek, öğrenmenin adeta bir yan ürünüdür.

Bu kadar gevezelik yeter artık.

Şimdi sizleri sıkmaya başlamadan bir iki şeyin üzerinden çabucak gidiverelim. Ne diyorduk?
Browser, eğer satırbaşı yapmasını söylemezseniz, yazdıklarınızı düzgün bir metin gibi yazmaya devam eder. Bütün boşlukları da 1 boşluk değerine düşürerek gösterecektir. Eğer arada daha fazla boşluk isterseniz, ( ) boşluk kodu olarak kullanmanız gerekmektedir. Bahsetmediğim bir nokta:
Eğer, Return (yada Enter) tuşuna basarsanız, browser onu da bir boşluk olarak kabul edecektir..(gerçekten bir boşluk yoksa.)

Hemen şu örneği inceleyin:

<BODY BGCOLOR="#FFFFFF"> Gerçekten güzel bir şey bir demet çiçek gibi! </BODY>

Gerçekten
güzel
bir şey
bir demet
çiçek
gibi!

Önemli Not:
Hemen Yukarıda gördüğünüz yani "Line Break", browsere satırbaşı yapmasını söyleyen HTML etiketidir. Bu açıklamayı atladığımızı farkedip bizi uyaran Ersan beye teşekkür ederim. Eğer sizde böyle eksiklikleri farkederseniz lütfen bir e-mail ile bildirin.

Umarım gayet açık seçik olarak demek istediğimi anlatmışımdır...

Bir sonraki anlamı kendinden menkul bir etiket

<BODY BGCOLOR="#FFFFFF"> <CENTER>Gerçekten güzel bir şey</CENTER> </BODY>

Gerçekten güzel bir şey

Gördüğünüz gibi ister bir kelime, isterse de tüm sayfanız olsun, <CENTER> etiketinin arasında ne kalırsa, ortalanır. Bitti...

Neredeyse bir kaçtane boş satır yapmayı anlatmasını unutuyordum. Çok kolay, istediğiniz boş satır sayısı kadar, boşluk işaret + satırbaşı etiketi koyunuz.

<BODY BGCOLOR="#FFFFFF"> Gerçekten güzel           bir şeyyyy.. </BODY>

Gerçekten güzel

bir şeyyyy..

Artık resimlerimizi websayfamıza yerleştirmenin zamanı gelmiş bulunuyor. Şimdi bu resimi kullanacağız, sağ tıklayarak resim klasörüne kopyalayın

Bir resmi belirtmek için <IMG> (image) etiketini kullanırız.

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

Aynı zaman da kaynağını ( src = source ) ve ölçülerini ( size ) belirtiriz.

<BODY BGCOLOR="#FFFFFF"> <IMG SRC="chef.gif" WIDTH=130 HEIGHT=101> </BODY>

Bir şeyi belirtmeden olmaz. Kaynak yani SRC resmin hangi resim olduğunu belirtirken, aynı zamanda nerede olduğunuda bildirir. Yukardaki SRC, "chef.gif", browserin "chef.gif" adındaki resmi HTML ile aynı directory den yüklemesini belirtiyor (yani resim dosyası ile HTML dosyanız aynı klasörün içinde bulunuyor.)
Aşağıda şemalarla anlatmaya çalıştım (ilk baktığınızda anlamazsanız, gidin kendinize bir kahve yapın, yada mevsim meyvalarından atıştırın, uykunuz açılsın, tekrar okuyun. Bunların da faydası olmazsa, üzerinde resim olan herhangi bir web sayfasını sağ tıklayıp, kaynağını görüntüleyin, bakın nasıl yapmışlar. Gene çözemediyseniz, üzülmeyin, bana da ilk 1-2 sefer böyle olmuştu, bakın şimdi size ders bile veriyorum :-))), gerçekten, anlamadığınız şeyleri hiç dert edinmeyin, nasılsa bir gün öğreniyorsunuz.)

	`SRC="chef.gif"` resmin onu çağıran HTML dökümanı ile aynı klasörde olduğu anlamına gelir.
	`SRC="images/chef.gif"`, resmin, onu çağıran HTML dökümanından bir seviye aşağıda başka bir klasörde olduğunu belirtir. Bu daha da ileri seviyelere gidebilir.
	`SRC="../chef.gif"`, resmin, onu çağıran HTML dökümanından bir seviye yukarda olduğunu belirtir. (bir itiraf-moraliniz düzelsin diye- bu satırda yazdıklarımı, sayfayı tercüme ettiğim şu ana kadar ben bile bilmiyordum. Gerçekte bu benim için bir hobi gibi birşey, ama insanlara olabildiğince yardımcı olmaya çalışıyorum, hepsi bu.)
	`SRC="../../chef.gif"` resmin, onu çağıran HTML dökümanından iki seviye yukarda olduğunu belirtir (yalan yok, yukardaki satırdaki itirafımı bu satır için de tekrarlayabilirsiniz, gerçekten :-)))
	`SRC="../images/chef.gif"`resmin, onu çağıran HTML dökümanından bir seviye yukarda ve images klasöründe olduğunu belirtir (artık bu sayfa benim itiraflarım sayfasına dönmeden bu konuyu kapamalıyım, çünkü, bir bilen olarak imajım bayağı hasar aldı.)
Diyorum ki:	Siz kafanızı fazla karıştırmayın, web alanınızı da saçma bir hale getirmemek için, bütün resimlerinizi resimler diye bir klasörde toplayın sonrada aşağıdaki formatta bir etiketleme yapın. Hepimizin selameti açısından en uygunu budur. Zaten biz amatörlere bukadarı gerçekten yeterli, hem sonra kim görecek ki directorynizi?

Bu arada bir değişik yoluda resimlerin kaynağının komple bir URL olması. Örneğin, http://www.korfez.net/images/banners/banner_7.gif Bana bir iyilik yapın, web sitenize aşağıdaki linki yerleştirin (yani dersler hepten bedavaya gelmesin bari.)

SSS: Websayfamı Upload ettikten sonra, resimlerim gözükmüyor neden acep? Resimlerimi de yüklediğime eminim, çünkü FTP programını penceresinden orada olduklarını görüyorum.
A: Her zamanki durum, Windows tabanlı sistemlerde Chef.gif ile CHEF.GIF aynı şeydir. Ha Ali Veli, ha Veli Ali. Resmi Unix sunucusuna koyun (genel durum.) 3 ayrı dosya adına dönüşür. Siz sunucuya Chef.gif 'i yüklemesini söylüyorsunuz, fakat onun bulduğu ise, CHEF.GIF.
Çözüm: bütün resim dosyalarını küçük harfle yükleyin ve web sayfanıza kaydedin. Bunu da alışkanlık haline getirin. Ayrı bir alışkanlık konusu ise dosya adlarında boşluk bırakmayın, alt karakter kullanın. Benim Annem.gif yerine benim_annem.gif i tercih ediniz.

Bir başka IMG özelliği olan ALT tan da bahsetmeden geçemeyiz....

<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">

ALT resimin yerine kullanılan bir açıklama yazısının bulunmasıdır. Kullanıcının tarayıcı programının resim yükleme özelliği sayfaların hızlı yüklenmesini sağlamak için kapatılmış, yada sadece metin gösteren bir browser kullanıyor olabilir. Bu gibi durumlarda ALT özelliği önemli olabilir.

Gelelim resimlerin SIZE yani ölçülerrine.

Bunu bir deneyin bakalım...

<BODY BGCOLOR="#FFFFFF"> <IMG SRC="chef.gif"> </BODY>

Gördüğünüz gibi, browser bütün işi kendisi yapıyor, tahminen resmi ölçülendirdi ve görüntüledi. O zaman ölç,yle işimiz ne? Detaylara girmezseniz sayfanız daha çabuk yüklenir.

Güzel tarafı nerede? Şuna bir bakın...

<BODY BGCOLOR="#FFFFFF"> <IMG SRC="chef.gif" WIDTH=300 HEIGHT=101> </BODY>

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

Dileğidiniz ölçüleri yazabilirsiniz, ve esas ölçülerin önüne geçersiniz. Şimdi şu kırmızı noktaya bakın -> <-. 1x1 ölçüsünde bir kare. Bakın onunla neler yapabiliyorum...

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