. - HTML Dersi 5

Gerçekten buraya kadar epeyi şey öğrendik. Şöööyle bir hafızanızı yoklarsanız, text ve font manipülasyonu, resimler, linkler. İşin temel prensiplerinden bahsedersek daha söylenecek çok şey var (TABLE-FORM-FRAME-CSS dersleride yolda.) Ama siz bu birkaç sayfadan sonra hiç değilse eline yüzüne bakılabilir web sayfaları yapabilirsiniz. Biraz da TABLE ve CSS derslerini okudunuzmu göze hoş gözüken sayfalar yapma devriniz başlar. Bence eğer bu işi amatör seviyede devam ettirmek isterseniz hiç FRAME'lere bulaşmayın. Zaten kimsede mecbur kalmadıkça kullanmanzıı tavsiye etmez (sayfa yüklenme hızı FRAME'li sayfalarda epeyi düşmektedir.

Artık sıra ekran çözünürlüğü (Screen Resolution) konusuna geldi. Hani bir takım sayfalarda en iyi 800x600 yada 1024x768 çözünürlükte izlenir derler ya, o konu işte. Ben şahsen 800x600 ölçüsünü severim, zaten istatistiklerde en popüler çözünürlüğün 800x600 olduğunu gösteriyor. Bunun bu işle ilgisi nedir? diye sorarsanız, cevabı:
Çok önemli olduğudur. Çünkü sayfanızın insanlara nasıl göründüğünü ilgilendirmektedir. Aşağıda bir sayfanın her üç çözünürlükte görünümünü vermektedir. Sanırım farkı biraz değerlendirirsiniz.


640×480	800×600	1024×768

Sayfanızı tüm çözünürlüklerde kontrol etmek çok iyi bir fikirdir. Çünkü saatler süren çalışmalar ve yerleştirmeler sonunda websitenizi Upload edersiniz ve 10-15 gün sonra diyelim 17 inç ekranda 1024×768 çözünürlükte çalışan arkadaşınızın bilgisayarından şööyle havalı bir biçimde websitenizi göstermeye kalkarsınız; Aman, o da ne, o saatlerce uğraştığınız anasayfanız almış başını gidiyor, durun, tutun, yakalayın...(Bu dersleri size çeviren nacizane ben aynı hatayı yaptım, daha da korkuncu sadece kendi browserimden kontrol ettiğim bizim ilkturk.net'in anasayfasıydı ve ben tam 2.5 ay sonra, 40.000 (kırkbin) ziyaretçiden sonra olayın farkına vardım, ne kötü değil mi?)

Bundan dolayı, yalnız diğer çözünürlüklerde değil, başka ekran büyüklüklerinde de kontrol edin; 14-15-17-19 inç ekran, Notebook, WebTV filan, aklınıza gelen herşey.

Şimdi biraz da, kullanabileceğiniz formatlama araçlarından anlatalım. Birincisi <BLOCKQUOTE> 'dur. Bir çok browserlerde marjinlerinizi içeriye çeker (Tam doğru terimi bulamadım, sanırım yaklaşık olarak anlatabildim.) Şimdi hemen yukardaki paragrafa uygulayalım ve bir web sayfasında olsa nasıl olurdu, hemen aşağıda izleyin.

<BODY BGCOLOR="#FFFFFF"> <BLOCKQUOTE> Ben şahsen 800x600 ölçüsünü severim, zaten istatistiklerde en popüler çözünürlüğün 800x600 olduğunu gösteriyor. Bunun bu işle ilgisi nedir? diye sorarsanız, cevabı: Çok önemli olduğudur. Çünkü sayfanızın insanlara nasıl göründüğünü ilgilendirmektedir. Aşağıda bir sayfanın her üç çözünürlükte görünümünü vermektedir. Sanırım farkı biraz değerlendirirsiniz. </BLOCKQUOTE> </BODY>

Ben şahsen 800x600 ölçüsünü severim, zaten istatistiklerde en popüler çözünürlüğün 800x600 olduğunu gösteriyor. Bunun bu işle ilgisi nedir? diye sorarsanız, cevabı:
Çok önemli olduğudur. Çünkü sayfanızın insanlara nasıl göründüğünü ilgilendirmektedir. Aşağıda bir sayfanın her üç çözünürlükte görünümünü vermektedir. Sanırım farkı biraz değerlendirirsiniz.

Bir başka kullanışlı araç, LIST özelliğidir. ORDERED list'ler ve UNORDERED list'ler vardır.

Bu ordered list örneğidir

Büyük bir şey
Küçük bir şey
Kısa bir şey
Uzun bir şey

Bu da unordered list örneği

Kırmızı
Mavi
Eski
Yeni

Önce bir taneUNORDERED list yapalım. Gerçekten çok basittir.

Şööyle başlayın

<BODY BGCOLOR="#FFFFFF"> Karnemi alınca istediklerim!. </BODY>

Karnemi alınca istediklerim!.

Not- teknik olarak henüz listeyi yapmaya başlamadık, bu sadece başlık.

Unordered list etiketlerini ekleyin

<BODY BGCOLOR="#FFFFFF"> Karnemi alınca istediklerim!. <UL> </UL> </BODY>

Karnemi alınca istediklerim!.

Liste maddesi ekleyin.

<BODY BGCOLOR="#FFFFFF"> Karnemi alınca istediklerim!. <UL> <LI>kırmızı bir bisiklet </UL> </BODY>

Karnemi alınca istediklerim!.

kırmızı bir bisiklet

Bir kaç tane daha ekleyin...

<BODY BGCOLOR="#FFFFFF"> Karnemi alınca istediklerim!. <UL> <LI>kırmızı bir bisiklet <LI>bir sürat teknesi <LI>bir PC <LI>bir TV <LI>bir de Melanie Griffith </UL> </BODY>

Karnemi alınca istediklerim!.

kırmızı bir bisiklet
bir sürat teknesi
bir PC
bir TV
bir de Melanie Griffith

İşte Liste dediğin de böyle olmaz mı?!

Pekiii ordered list'i nasıl yapacağım? Kolay! <UL> etiketini <OL> olarak değiştirin.

<BODY BGCOLOR="#FFFFFF"> Karnemi alınca istediklerim!. <OL> <LI>kırmızı bir bisiklet <LI>bir sürat teknesi <LI>bir PC <LI>bir TV <LI>bir de Melanie Griffith </OL> </BODY>

Karnemi alınca istediklerim!.

kırmızı bir bisiklet
bir sürat teknesi
bir PC
bir TV
bir de Melanie Griffith

Başka bir liste tipi ise definition list'tir.

Rüştü Rençber: Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksa da, 2001 yılında diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu.

Taffarel: Galatasaray'ın son bir kaç sezondur file bekçiliğini yapan Taffarel, aynı zamanda Brezilya Milli takımının da kalecisidir. Türkiye'yi çok seven Taffarel bu sene memleketine dönecekmiş.

Hadi başlayalım...

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

Sonra definition başlığını atınız...

<BODY BGCOLOR="#FFFFFF"> <DL> <DT>Rüştü Rençber </DL> </BODY>

Rüştü Rençber

Definition maddesini yazınız.

<BODY BGCOLOR="#FFFFFF"> <DL> <DT>Rüştü Rençber <DD>Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksa da, 2001 yılında diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu. </DL> </BODY>

Rüştü Rençber: Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksada, 2001 yılında diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu.

Rötuş olarak, başlığı kalınlaştırıp, altına da Taffarel'i yerleştirdik mi listemiz biter.

<BODY BGCOLOR="#FFFFFF"> <DL> <DT>Rüştü Rençber <DD>Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksa da, 2001 yılında diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu. </DL> </BODY> <DL> <DT>Taffarel <DD>Galatasaray'ın son bir kaç sezondur file bekçiliğini yapan Taffarel, aynı zamanda Brezilya Milli takımının da kalecisidir. Türkiye'yi çok seven Taffarel bu sene memleketine dönecekmiş. </DL> </BODY>

Rüştü Rençber: Fenerbahçe'nin kalecisi olup, aynı zamanda Milli takımında kalesini korumaktadır. Arasıra aptalca goller yeme huyu ortaya çıksa da, 2001 yılında diğer yıllara göre daha az saçmaladığından, Fener sonunda şampiyon oldu.

Taffarel: Galatasaray'ın son bir kaç sezondur file bekçiliğini yapan Taffarel, aynı zamanda Brezilya Milli takımının da kalecisidir. Türkiye'yi çok seven Taffarel bu sene memleketine dönecekmiş.

Gelelim çok sık kullandığımız Horizontal Rule (yani Ufki Hat-eski Türkçe) yani düz çizgi. Bunu gerçekten çok sık kullanırız.

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

Birkaç tane opsiyonumuz vardır.

<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> </BODY>

Bunun anlatımı kendinden menkul..

<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% ALIGN=LEFT> <HR WIDTH=60% ALIGN=RIGHT> <HR WIDTH=60% ALIGN=CENTER> </BODY>

Aynı zamanda kalınlığı da kontrol edebilirsiniz...

<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=3> <HR WIDTH=60% SIZE=8> <HR WIDTH=60% SIZE=15> </BODY>

İçi dolu, tek bir çizgi de yapabilirsiniz

<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1 NOSHADE> <HR WIDTH=60% SIZE=3 NOSHADE> <HR WIDTH=60% SIZE=8 NOSHADE> <HR WIDTH=60% SIZE=15 NOSHADE> </BODY>

Hatırlarsınız, geçmişte bir yerde, browserin formatlamayı anlamadığını, sadece metni peşpeşe yazdığını söylemiştim, aynen bu şekilde...

<BODY BGCOLOR="#FFFFFF">

|/ 
                (@ @)
     +----oOO----(_)-----------+
     |       HTML DERSLERİ     |
     |          herkese        |
     |          lazım          |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

</BODY>

|/ (@ @) +----oOO----(_)-----------+ | HTML DERSLERİ | | herkese | | lazım | +-----------------oOO-----+ |__|__| || || ooO Ooo

Eveet, <PRE> (preformat) etiketleriyle, bunu engelleyip, metnin yazdığımız şekilde görünmesini sağlarız.

<BODY BGCOLOR="#FFFFFF"> <PRE>

|/ 
                (@ @)
     +----oOO----(_)-----------+
     |       HTML DERSLERİ     |
     |          herkese        |
     |          lazım          |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

</PRE> </BODY>

|/ 
                (@ @)
     +----oOO----(_)-----------+
     |       HTML DERSLERİ     |
     |          herkese        |
     |          lazım          |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

* Dikkat, monospaced font kullanılmıştır.

SSS :kardeşim, bunlar çocuk işi, bizim böyle soytarılıklara ayıracak vaktimiz yok (çocuklar, alınmayın, ama 20 yaşın üstündeki herkes böyle söyler.)

Cevap: Biraz hayal gücünüzü kullanın bakalım, hadi, söylemezsem duramam, <PRE></PRE> etiketlerini kullanarak bir de şiir yazmayı deneyin bakalım, yada şöyle diyelim, önce bir iki kıt'a Orhan Veli'den yazın, neye benziyor, sonra da her şeyi yeniden <PRE></PRE> etiketlerini kullanarak yazın.
Tamam, tamam şiir meraklıları teşekküre gerek yok, zaten yeterince teşekkür etmişsinizdir içinizden.

En son yorum etiketini tartışacağız.

<BODY BGCOLOR="#FFFFFF">  Bu değildir Yorumlarınızı dökümanın herhangi bir yerine koyabilirsiniz ve browser de içindeki hiçbirşeyi değerlendirmesine almaz. Gizli mesajlar koyabilirsiniz  kendinize notlar olabilir,  yada önemlisi, sayfanızın kaynak koduna bakan birine yardımcı olabilecek bir mesaj olabilir . </BODY>

Bu değildir

Yorumlarınızı dökümanın herhangi bir yerine koyabilirsiniz ve browser de içindeki hiçbirşeyi değerlendirmesine almaz. Gizli mesajlar koyabilirsiniz kendinize notlar olabilir, yada önemlisi, sayfanızın kaynak koduna bakan birine yardımcı olabilecek bir mesaj olabilir .

Herşeyin açıkça anlaşılması için, yorum ile bitmeli
Yorumun için başka HTML etiketleri koysanız bile, browser onları dikkate almaz. Browseriniz taaa ki --> işaretini görene kadar herşeyi atlar.

İster inanın, ister inanmayın ama bitti. Evet çevirisi bana sıkıntı verdi, ama sizlerin yüzündeki mutlu ifadeyi düşündükçe ha gayret dedim ve biraz da e-dersane.com un vermiş olduğu link sayesinde 6 aydır elimin bir türlü varıpta yapamadığım çeviriyi 2 günde bitirdim. Şimdi istatistiklere bakacağım, bu sayfalar yeterince ilgi görürse (ilgiden kastettiğim, günde en az 10 ziyaretçi), aynı çabuklukla CSS ve TABLE derslerine devam ederim, ona göre.

Gelelim konumuza; Artık bir web sayfası yapmak için gerekli esas etiketlerin hepsini biliyorsunuz. Daha başka etiketler var mı? Evet, tahmin ettiğinizden de fazla. Fakat size garanti veririm, buraya kadar öğrendiklerinizle %70 etiketleri öğrenmiş oldunuz. TABLE, FRAME ve FORM konularını da çevirdim mi, geri kalan %27 yi de öğrenmiş olursunuz. Şimdi çok meraklılar soracaklar, bize kalan %3 ü göstermiyecekmisiniz??
Hayır, çünkü o etiketler ya şimdiye kadar öğrendiklerinizin bir kopyası, ya da çok sınırlı ve özel kullanımı olan şeyler, sonra zaten bir yerlerde karşınıza çıkınca öğrenirsiniz.

Gelelim, HTML editör programı faslına. Derler ya, bir kelime HTML bile bilmenize gerek yok, işte FRONT Page kullanın falan filan. Hiç böyle şeylere rağbet etmeyin. Çünkü FRONTPAGE gibi bir programı öğrenmek için harçayacağınız zaman içerisinde bu HTML derslerini yalayıp yutarsınız. Ondan sonra mantığını bile çözemediğiniz bir programı kullanırken yaptığınız hataları bulmaya çalışacağınıza, text-tabanlı HTML Editör programınızla sayfanıza hakim olmanız daha kolay olur.