| Ana Sayfa | Dersler | Bize Ulaşın  

  HTML
  GIRIS
  TAGLAR
  GENEL BILGI
  LINK VERME
  FORMATLI METINLER
  TABLOLAR
 
 		 Gerçekten buraya kadar epeyi sey ögrendik. Söööyle bir hafizanizi yoklarsaniz, text ve font manipülasyonu, resimler, linkler. Isin temel prensiplerinden bahsedersek daha söylenecek çok sey var (TABLE-FORM-FRAME-CSS dersleride yolda.) Ama siz bu birkaç sayfadan sonra hiç degilse eline yüzüne bakilabilir web sayfalari yapabilirsiniz. Biraz da TABLE ve CSS derslerini okudunuzmu göze hos gözüken sayfalar yapma devriniz baslar. Bence eger bu isi amatör seviyede devam ettirmek isterseniz hiç FRAME'lere bulasmayin. Zaten kimsede mecbur kalmadikça kullanmanzii tavsiye etmez (sayfa yüklenme hizi FRAME'li sayfalarda epeyi düsmektedir.

Artik sira ekran çözünürlügü (Screen Resolution) konusuna geldi. Hani bir takim sayfalarda en iyi 800x600 yada 1024x768 çözünürlükte izlenir derler ya, o konu iste. Ben sahsen 800x600 ölçüsünü severim, zaten istatistiklerde en popüler çözünürlügün 800x600 oldugunu gösteriyor. Bunun bu isle ilgisi nedir? diye sorarsaniz, cevabi:
Çok önemli oldugudur. Çünkü sayfanizin insanlara nasil göründügünü ilgilendirmektedir. Asagida bir sayfanin her üç çözünürlükte görünümünü vermektedir. Sanirim farki biraz degerlendirirsiniz.

 

640×480 800×600 1024×768

Sayfanizi tüm çözünürlüklerde kontrol etmek çok iyi bir fikirdir. Çünkü saatler süren çalismalar ve yerlestirmeler sonunda websitenizi Upload edersiniz ve 10-15 gün sonra diyelim 17 inç ekranda 1024×768 çözünürlükte çalisan arkadasinizin bilgisayarindan sööyle havali bir biçimde websitenizi göstermeye kalkarsiniz; Aman, o da ne, o saatlerce ugrastiginiz anasayfaniz almis basini gidiyor, durun, tutun, yakalayin...(Bu dersleri size çeviren nacizane ben ayni hatayi yaptim, daha da korkuncu sadece kendi browserimden kontrol ettigim bizim turkmcsd.net'in anasayfasiydi ve ben tam 2.5 ay sonra, 40.000 (kirkbin) ziyaretçiden sonra olayin farkina vardim, ne kötü degil mi?)

Bundan dolayi, yalniz diger çözünürlüklerde degil, baska ekran büyüklüklerinde de kontrol edin; 14-15-17-19 inç ekran, Notebook, WebTV filan, akliniza gelen hersey.

 

Simdi biraz da, kullanabileceginiz formatlama araçlarindan anlatalim. Birincisi <BLOCKQUOTE> 'dur. Bir çok browserlerde marjinlerinizi içeriye çeker (Tam dogru terimi bulamadim, sanirim yaklasik olarak anlatabildim.) Simdi hemen yukardaki paragrafa uygulayalim ve bir web sayfasinda olsa nasil olurdu, hemen asagida izleyin.

<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
Ben sahsen 800x600 ölçüsünü severim, zaten istatistiklerde en popüler çözünürlügün 800x600 oldugunu gösteriyor. Bunun bu isle ilgisi nedir? diye sorarsaniz, cevabi:
Çok önemli oldugudur. Çünkü sayfanizin insanlara nasil göründügünü ilgilendirmektedir. Asagida bir sayfanin her üç çözünürlükte görünümünü vermektedir. Sanirim farki biraz degerlendirirsiniz.
</BLOCKQUOTE>
</BODY>
 


 

Ben sahsen 800x600 ölçüsünü severim, zaten istatistiklerde en popüler çözünürlügün 800x600 oldugunu gösteriyor. Bunun bu isle ilgisi nedir? diye sorarsaniz, cevabi:
Çok önemli oldugudur. Çünkü sayfanizin insanlara nasil göründügünü ilgilendirmektedir. Asagida bir sayfanin her üç çözünürlükte görünümünü vermektedir. Sanirim farki biraz degerlendirirsiniz.


 

Bir baska kullanisli araç, LIST özelligidir. ORDERED list'ler ve UNORDERED list'ler vardir.

 

Bu ordered list örnegidir
 
  1. Büyük bir sey
  2. Küçük bir sey
  3. Kisa bir sey
  4. Uzun bir sey
  Bu da unordered list örnegi
 
  • Kirmizi
  • Mavi
  • Eski
  • Yeni

Önce bir taneUNORDERED list yapalim. Gerçekten çok basittir.

Sööyle baslayin

<BODY BGCOLOR="#FFFFFF">
Karnemi alinca istediklerim!.
</BODY>
 

Karnemi alinca istediklerim!.
 


Not- teknik olarak henüz listeyi yapmaya baslamadik, bu sadece baslik.

Unordered list etiketlerini ekleyin

<BODY BGCOLOR="#FFFFFF">
Karnemi alinca istediklerim!.
<UL>
</UL>
</BODY>
 

Karnemi alinca istediklerim!.
 


 

Liste maddesi ekleyin.

<BODY BGCOLOR="#FFFFFF">
Karnemi alinca istediklerim!.
<UL>
<LI>kirmizi bir bisiklet
</UL>
</BODY>
 

Karnemi alinca istediklerim!.
 
  • kirmizi bir bisiklet


 

Bir kaç tane daha ekleyin...

<BODY BGCOLOR="#FFFFFF">
Karnemi alinca istediklerim!.
<UL>
<LI>kirmizi bir bisiklet
<LI>bir sürat teknesi
<LI>bir PC
<LI>bir TV
<LI>bir de Melanie Griffith
</UL>
</BODY>
 

Karnemi alinca istediklerim!.
 
  • kirmizi bir bisiklet
  • bir sürat teknesi
  • bir PC
  • bir TV
  • bir de Melanie Griffith


Iste Liste dedigin de böyle olmaz mi?!

Pekiii ordered list'i nasil yapacagim? Kolay! <UL> etiketini <OL> olarak degistirin.

<BODY BGCOLOR="#FFFFFF">
Karnemi alinca istediklerim!.
<OL>
<LI>kirmizi bir bisiklet
<LI>bir sürat teknesi
<LI>bir PC
<LI>bir TV
<LI>bir de Melanie Griffith
</OL>
</BODY>
 

Karnemi alinca istediklerim!.
 
  1. kirmizi bir bisiklet
  2. bir sürat teknesi
  3. bir PC
  4. bir TV
  5. bir de Melanie Griffith


 

Baska bir liste tipi ise definition list'tir.

 

VOLKAN
Fenerbahçe'nin kalecisi olup, ayni zamanda Milli takiminda kalesini de bazen korumaktadir. Arasira aptalca goller yeme huyu ortaya çiksa da, 2004 yilinda Fenerbahçeye çok sey kazandirdi.
CORDOBA
Besiktasin'in son iki sezondur file bekçiligini yapan Cordoba, ayni zamanda Kolombia Milli takiminin da kalecisidir. Türkiye'yi çok seven Cordoba bu sene memleketine dönecekmis.

Hadi baslayalim...

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

Sonra definition basligini atiniz...

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

Rüstü Rençber


 

Definition maddesini yaziniz.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Rüstü Rençber
<DD>Fenerbahçe'nin kalecisi olup, ayni zamanda Milli takiminda kalesini korumaktadir. Arasira aptalca goller yeme huyu ortaya çiksa da, 2001 yilinda diger yillara göre daha az saçmaladigindan, Fener sonunda sampiyon oldu.
</DL>
</BODY>
 

Rüstü Rençber
Fenerbahçe'nin kalecisi olup, ayni zamanda Milli takiminda kalesini korumaktadir. Arasira aptalca goller yeme huyu ortaya çiksada, 2001 yilinda diger yillara göre daha az saçmaladigindan, Fener sonunda sampiyon oldu.


 

Rötus olarak, basligi kalinlastirip, altina da Taffarel'i yerlestirdik mi listemiz biter.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT><B>Rüstü Rençber </B>
<DD>Fenerbahçe'nin kalecisi olup, ayni zamanda Milli takiminda kalesini korumaktadir. Arasira aptalca goller yeme huyu ortaya çiksa da, 2001 yilinda diger yillara göre daha az saçmaladigindan, Fener sonunda sampiyon oldu.
</DL>
</BODY>
<DL>
<DT><B>Taffarel </B>
<DD>Galatasaray'in son bir kaç sezondur file bekçiligini yapan Taffarel, ayni zamanda Brezilya Milli takiminin da kalecisidir. Türkiye'yi çok seven Taffarel bu sene memleketine dönecekmis.
</DL>
</BODY>
 

Rüstü Rençber
Fenerbahçe'nin kalecisi olup, ayni zamanda Milli takiminda kalesini korumaktadir. Arasira aptalca goller yeme huyu ortaya çiksa da, 2001 yilinda diger yillara göre daha az saçmaladigindan, Fener sonunda sampiyon oldu.
Taffarel
Galatasaray'in son bir kaç sezondur file bekçiligini yapan Taffarel, ayni zamanda Brezilya Milli takiminin da kalecisidir. Türkiye'yi çok seven Taffarel bu sene memleketine dönecekmis.


 

Gelelim çok sik kullandigimiz Horizontal Rule (yani Ufki Hat-eski Türkçe) yani düz çizgi. Bunu gerçekten çok sik kullaniriz.

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


 

Birkaç tane opsiyonumuz vardir.

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


 


 

Bunun anlatimi kendinden menkul..

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


 

Ayni zamanda kalinligi 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ç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>
 


 

Hatirlarsiniz, geçmiste bir yerde, browserin formatlamayi anlamadigini, sadece metni pespese yazdigini söylemistim, aynen bu sekilde...

<BODY BGCOLOR="#FFFFFF">
 

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |       HTML DERSLERI     |
     |          herkese        |
     |          lazim          |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

</BODY>
 


\|/ (@ @) +----oOO----(_)-----------+ | HTML DERSLERI | | herkese | | lazim | +-----------------oOO-----+ |__|__| || || ooO Ooo


 

Eveet, <PRE> (preformat) etiketleriyle, bunu engelleyip, metnin yazdigimiz sekilde görünmesini saglariz.

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

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |       HTML DERSLERI     |
     |          herkese        |
     |          lazim          |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

</PRE>
</BODY>
 


 
                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |       HTML DERSLERI     |
     |          herkese        |
     |          lazim          |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo


* Dikkat, monospaced font kullanilmistir.


SSS :kardesim, bunlar çocuk isi, bizim böyle soytariliklara ayiracak vaktimiz yok (çocuklar, alinmayin, ama 20 yasin üstündeki herkes böyle söyler.)

Cevap: Biraz hayal gücünüzü kullanin bakalim, hadi, söylemezsem duramam, <PRE></PRE> etiketlerini kullanarak bir de siir yazmayi deneyin bakalim, yada söyle diyelim, önce bir iki kit'a Orhan Veli'den yazin, neye benziyor, sonra da her seyi yeniden <PRE></PRE> etiketlerini kullanarak yazin.
Tamam, tamam siir meraklilari tesekküre gerek yok, zaten yeterince tesekkür etmissinizdir içinizden.
 

En son yorum etiketini tartisacagiz.

<BODY BGCOLOR="#FFFFFF">
<!--Bu bir yorumdur-->
Bu degildir<P>
Yorumlarinizi dökümanin herhangi bir yerine koyabilirsiniz ve browser de içindeki hiçbirseyi degerlendirmesine almaz. Gizli mesajlar koyabilirsiniz <!--Selam abicim!--> kendinize notlar olabilir, <!--Aksam ekmek al--> yada önemlisi, sayfanizin kaynak koduna bakan birine yardimci olabilecek bir mesaj olabilir .<!--Bu sayfadan araklama yapaninnn&%Ç£#$!-->
</BODY>
 

Bu degildir

Yorumlarinizi dökümanin herhangi bir yerine koyabilirsiniz ve browser de içindeki hiçbirseyi degerlendirmesine almaz. Gizli mesajlar koyabilirsiniz kendinize notlar olabilir, yada önemlisi, sayfanizin kaynak koduna bakan birine yardimci olabilecek bir mesaj olabilir .
 


Herseyin açikça anlasilmasi için, yorum <!-- ile baslamali -->ile bitmeli
Yorumun için baska HTML etiketleri koysaniz bile, browser onlari dikkate almaz. Browseriniz taaa ki --> isaretini görene kadar herseyi atlar.

Ister inanin, ister inanmayin ama bitti. Evet çevirisi bana sikinti verdi, ama sizlerin yüzündeki mutlu ifadeyi düsündükçe ha gayret dedim ve biraz da e-dersane.com un vermis oldugu link sayesinde 6 aydir elimin bir türlü varipta yapamadigim çeviriyi 2 günde bitirdim. Simdi istatistiklere bakacagim, bu sayfalar yeterince ilgi görürse (ilgiden kastettigim, günde en az 10 ziyaretçi), ayni çabuklukla CSS ve TABLE derslerine devam ederim, ona göre.

Gelelim konumuza; Artik bir web sayfasi yapmak için gerekli esas etiketlerin hepsini biliyorsunuz. Daha baska etiketler var mi? Evet, tahmin ettiginizden de fazla. Fakat size garanti veririm, buraya kadar ögrendiklerinizle %70 etiketleri ögrenmis oldunuz. TABLE, FRAME ve FORM konularini da çevirdim mi, geri kalan %27 yi de ögrenmis olursunuz. Simdi çok meraklilar soracaklar, bize kalan %3 ü göstermiyecekmisiniz??
Hayir, çünkü o etiketler ya simdiye kadar ögrendiklerinizin bir kopyasi, ya da çok sinirli ve özel kullanimi olan seyler, sonra zaten bir yerlerde karsiniza çikinca ögrenirsiniz.

Gelelim, HTML editör programi faslina. Derler ya, bir kelime HTML bile bilmenize gerek yok, iste FRONT Page kullanin falan filan. Hiç böyle seylere ragbet etmeyin. Çünkü FRONTPAGE gibi bir programi ögrenmek için harçayacaginiz zaman içerisinde bu HTML derslerini yalayip yutarsiniz. Ondan sonra mantigini bile çözemediginiz bir programi kullanirken yaptiginiz hatalari bulmaya çalisacaginiza, text-tabanli HTML Editör programinizla sayfaniza hakim olmaniz daha kolay olur.
Türk MCSD.NET © 2005
Siteyi en kaliteli Internet Explorer 5 ve üzeri versiyonlarinda 800 x 600 pixel çözünürlükte izlemenizi tavsiye ederiz.