Demekki bir Web Sayfası hazırlamak istiyorsunuz!
İşiniz var..
Ders 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!
<BR>
Burada
<BR>
neler
<BR>
oluyor??
<BR>
</BODY>
Hey!
Burada
neler
oluyor??
|
<BR> sadece satırbaşı anlamına gelir. <BR>
benzer bir ikinci komut ise, <P>.
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!
<P>Burada
<P>neler
<P>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 <P><P><P>
ş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>
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>
&
ö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<BR>güzel<BR>bir şey<BR>
bir demet<BR>çiçek<BR>gibi!
</BODY>
Gerçekten
güzel
bir şey
bir demet
çiçek
gibi!
Önemli Not:
Hemen Yukarıda gördüğünüz <BR> 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>
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<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
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? |
<IMG SRC="resimler/resim_adi.gif" WIDTH=130 HEIGHT=101>
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><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>
Nasıl ama?
< Ders 2
Ders 4 >
| 
