Terimlerin İngilizcesini söylemek zorundayım zira edineceğiniz bütün yardımcı programlarda İngilizce olacak.Yukarıda Kırmızı ile yazılmış şeylere "TAG" yani "etiket" derler. İlki açılış tag idir, ikincisi kapanış tag i. Kapanış tag i yapmak için açılş tag ine / eklediniz mi yeterlidir. Tag lerin hepsinin olmamakla beraber birçoğunun kapanış tag i vardır.
Tag leri Tarayıcınızla konuşmak gibi değerlendirin, daha doğrusu birşeyler yapmasını tarif ediyorsunuz. Şu anda tarayıcıya bunun 'HTML dökümanının başlangıcı olduğunu' söylediniz (<HTML> ve bununda 'HTML dökümanının sonu' olduğunu söylediniz. (</HTML>. Şimdi içine birşeyler dolduralım.
Aman, birşey daha, dökümanınıza TITLE ile BODY tagleri arasına giracak birşeyler ilave edelim.
<HTML>
<HEAD>
<TITLE>Benim ilk web denemem!</TITLE>
</HEAD>
<BODY>
Merhaba ilkturk.net!
</BODY>
</HTML>
Şimdi save yapın, fakat text dökümanı değil, html dökümanı olarak. index.html olarak yeni bir klasörün içinde save yapın. Eğer bu biraz kafayı karıştırdı ise şöyle yapın... Notepadde Dosyayı tıklayın sonra Farklı Kaydet.
Çıkan diyalog kutusunda -> tıklayarak yeni bir klasör açın, istediğiniz adı verin. Sonra çift tıklayıp açın
Dosya Adı: diyen yere index.html yazın Farklı kaydet: tıklayın. Ama dikkat edin all files(*.*) yada Bütün dosyalar desin.
Enter'a basın ve bitti evet bitti.!
Tebrikler! artık tam fonksiyonlu webdede yayınlanabilecek bir WEB SAYFANIZ oldu. başardınız. İsterseniz SuperTurks veya ilkturk üye alanınızdan file manager ile web alanınıza yollayın. Artık bütün dünya görebilir...
Şimdi tarayıcının adres çubuğuna http://sitenizinadı.ilkturk.org yazın... birşey başarmış olmanın keyfi ile eserinizi seyredin.
Bir sonraki basamak sayfanıza güzel birşeyler koymak olacak.
Bir sonraki bölüme geçmeden iki önemli nokta
BİR: bu yaptığınız bir iskelet HTML dökümanı idi. Şu anda bu okuduğunuz sayfa dahil bütün fiyakalı web sayfaları bu esas tagleri bulundurmak zorundadır.
İKİ: Döküman <TITLE>Benim ilk web denemem!</TITLE> etiketleri arasında yazılı olanlar entepede tarayıcı penceresinin sol üst köşesinde, lacivert çubuğun üzerinde çıkar. İnanmazsanız kafanızı kaldırıp dediğim yere bakın.
Karışıklığa sebep vermemek için <BODY> taglerinin içini yazacağım. Bunadan sonra <HTML>, <HEAD> & <TITLE> taglerini artık yazmayacağım ama siz mutlaka yazın. (ben kısaltmış olmak için yazmıyorum-belirteyim).
Dökümanda herhangi bir şey değiştirdiniz mi mutlaka "Kayıt" ile saklatın, "Yenile" yi tıklayın ve değişikliği hemen gözlemleyinki ne olduğunu anlayabilesiniz
Sanırım ilk öğrenmemeiz gereken background - fon - renginin nasıl değiştiği.
<BODY BGCOLOR="#FFFF00">
Güzel bir şey
</BODY>
Güzel bir şey
FFFF00 sarı renginin HEX kodudur. Tıklarsanız burada biraz daha var.
Dilerseniz arkaplanı image - resim - de yerleştirebilirsiniz.
DİKKAT : image -resim- sizin HTML dosyanızla (sayfanızla) aynı folder -klasör- de olmalı. Yoksa resimleriniz çıkmaz. Resimleri göremezseniz endişelenmeyin, mutlaka aynı klasörde değildir veya GIF ve JPG dosyalarınızı Türkçe harfler kullanarak isimlendirmiş olabilirsiniz.
Kodun yazılışı ise aşağıdaki gibidir:
<BODY BACKGROUND="fon.gif">
Güzel bir şey
</BODY>
Güzel bir şey
Arkaplan image ı burada
İmage in görünebilmesi için aynı HTML dosyanızla aynı klasörde olması gerek. Bunun en kolay yolu , image ın üzerine sağ tıklayıp birinci derste yaptığınız sayfa bilgisayarın hangi bölümünde ise hemen onun yanına Resmi Farklı Kaydet yapın
--------------------------------------------------------------------------------
Eski düz beyaz ekrana gidelim tekrar.
<BODY BGCOLOR="#FFFFFF">
Güzel bir şey
</BODY>
Güzel bir şey
<BODY BGCOLOR="#FFFFFF">
Güzel bir <B>şey</B>
</BODY>
Güzel bir şey
Biz aslında browsere diyoruz ki<B> görünce harfleri kalın yapmağa başla </B> görüncede durdur.
<BODY BGCOLOR="#FFFFFF">
Güzel bir <I><B>şey</B></I>
</BODY>
Güzel bir şey
Bu nested - yani içiçe geçmiş - taglere örnektir. İlerde etiketleri birlikte kullandığınız zaman aşağıdaki şekilde yapın yoksa browserin kafasını karıştırırsınız.
<THIS><THAT></THIS></THAT> Karışık yani HATALI
<THIS><THAT></THAT></THIS> Nested DOĞRUSU BÖYLE
Elbette font size too font ebatlarıda değişir... Nasıl mı? - Çok kolay.
Önce <FONT> taglerini ilave edin...
<BODY BGCOLOR="#FFFFFF">
Güzel bir<FONT>şey</FONT>
</BODY>
Sonra SIZE ebat özelliğini belirtin.
<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT SIZE=3>şey</FONT>
</BODY>
Güzel bir şey
Fontlar 7 ebatta gelir:
minik küçük normal büyücek büyük gerçekten büyük jumboo!
1 2 3 4 5 6 7
Şimdi iki şeyi tartışalım. <TAG> browsere bir şeyi yapmasını söyler ve ATTRIBUTE ise <TAG> içine girer ve browsere nasıl yapacağını söyler.
İkinci nokta ise defaultlar yani varsayılanlar. Eğer hiçbirşey belirtilmemişse browser varsayılan değerleri atar. Mesela font ölçülerinde varsayılan değer 3 tür. bir şey belirtmezseniz browser 3 varsayarak karakterleri yazar.
Her browserin değişik varsayılan font ayarları vardır. Eğer PCnizi fazla kurcalamadı iseniz varsayılan ayarları " Times New Roman 12pt ve siyah renk tir". Ama ARIAL and COMIC SANS gibi değişik fontlarda vardır.
<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT FACE="ARIAL">şey</FONT>
</BODY>
Güzel bir şey
Tabii fontların gözükmesi için PCnize yüklü olması gerekir. Tekrarlayayım eğer sayfanıza bakan kimse, sizin belirttiğiniz fontlar bilgisayarına yüklü değilse, sadece kendi bilgisayarının varsayılan fontunu görür. Onun için fontlarınızla biraz dikkatli olun.Arial ve Comic Sans MS Windows ile gelen yaygın fontlardandır. Aynı şekilde Impact! da. Yapmanız gereken, işi garantiye almak için birden fazla font belirtmeniz. (Evet! yapabilirsiniz) Bunlardan birini yapın.. <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>.
Benim gibi jetonu geç düşenlere açıklayayım. Olay şu: Sayfa yüklenirken browser ARIAL arar. Bulursa kullanır, bulamadı ozaman HELVETICA yı arar. Bulursa kullanır olmadı LUCIDA SANSı gider bakar. Onuda bulamazsa çaresiz varsayılan fontu kullanır.
Evvet, eğlenceye geri dönelim..
İsterseniz font rengini değiştirebilirsiniz.
<BODY BGCOLOR="#FFFFFF">
Güzel bir <FONT COLOR="#FF0000">şey</FONT>
</BODY>
Güzel bir şey
<BODY BGCOLOR="#FFFFFF">
Güzel bir <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">şey</FONT></B></I></U>
</BODY>
Güzel birşey
Tekrar belirteyim, birden fazla tag nested olmalı.
<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>
Hangisinin önce olduğu mühim değil. Bir şeyi kırmızı ve kalın yapmak için sıra farketmez. İstediğiniz sırada yapabilirsiniz.
<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>
Kendinizi ve browserin kafasını karıştırmak için en kestirme yol, etiketlerin sırasını karıştırmaktır. The fastest way to confuse the browser, not to mention yourself is to overlap the tags...
Son olarak: Browserin text rengi, link rengi, aktif link rengi ve ziyaret edilmiş link rengi ve ekran fon rengi için varsayılan değerleri vardır. Şöyleki:
Text siyahtır
Linkler mavi
Actif link kırmızı
Ziyaret edilmiş link mor
Eğer ihtiyacınız olursa bunları değiştirebilirsiniz (ihtiyacınız olursa dedim!) Bütün dünya linkleri mavi görmeğe alışmıştır. Lütfen fazla değişiklik yapıp kafaları karıştırmayın. Bütün döküman için varsayılanları <BODY> etiketinin içinde değiştirebilirsiniz.
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
Güzel bir şey
</BODY>
Güzel bir şey
Şimdi linkleri öğrenmeden neden suyu bulandırıyorsun diyebilirsiniz!! Haklısınız ama yakında linkleri yapmasını nasılsa öğreneceksiniz. Hiç değilse şimdiden renkleri değiştirmesini öğrendiniz. Şimdi görüyorsunuz fon siyah ve text sarı.
Linkler şimdi kırmızı
Ziyaret edilmiş linkle bordo
ve aktif linkler ise yeşil.
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??
<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>
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<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!
Umarım gayet açık seçik olarak demek istediğimi anlatmışımdır...
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 ş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
<A HREF="http://superturks.org" target="_blank"><img src="http://www.korfez.net/images/banners/banner_7.gif" width="144" height="54" alt="" border="0"></A>
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....
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.
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.
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...