1 Ağustos 2012 Çarşamba

HTML Frame Kullanmak

Frame, HTML'de birden fazla belgeye tek bir sayfada yer vermek amacıyla açılan pencereler. Bu şekilde sağda farklı bir pencere ve içerik, solda farklı bir pencere ve içerik olacaktır. Genellikle bir pencere linklerin bulunduğu alan, diğer pencere ise asıl içeriğin bulunacağı alan olarak kullanılır. Arama Motoru optimizasyonu için olumsuz etkileri olduğu için genellikle kullanılmaz. Biz yine de en önemli kısımlarıyla ele alalım:

Pencereleri bölmeye <frameset> koduyla başlarız. Dikkat etmemiz gereken <body></body> arasında yazılamaması gerektiğidir. Bu kısım frame tekniği desteklemeyen tarayıcılar için <noframes></noframes> arasında kullanılacaktır.





   <frameset cols="25%,75%">
      <frame src="frame_a.htm">
      <frame src="frame_b.htm">
   </frameset>


Burada cols="deger1,deger2" şeklinde bir kullanım dikkatinizi çekmiştir. Burada belirteceğimiz değerler pencere sütunlarının oranlarını belirtmektedir. yatay pencereler kullanacaksak bu kezrows="deger1,deger2" şeklinde kullanmalıyız.

Bahsi geçen değerler yüzde (%) olarak ifade edilebileceği gibi piksel olarak da yazılabilir. Eğer bir pencerenin boyutu, diğeri için belirtilen dışındaki alan olacaksa (*) kullanırız. Bir örnek: cols="200,*" yazarsak. İlk pencere (frame_a.htm) 200 piksel genişliğinde olacaktır, diğer pencere ise (frame_b.htm) geriye kalan tüm alanı kaplayacaktır.

Son olarak şunu ekleyelim, değerler pencere sayısı kadar yazılacaktır. Eğer 3 pencere kullansaydık. Bu kez 3 pencere için sırasıyla ayarlama yapacaktık: cols="200,25%,*" gibi.



   <frameset cols="25%,25%,*">
      <noframes>
         <body>Eger tarayıcı frame desteklemiyorsa...</body>
      </noframes>
      <frame src ="venus.htm" />
      <frame src ="mars.htm" />
      <frame src ="jupiter.htm" />
   </frameset>




Frame Desteklemeyen Tarayıcılar - noframes

Bunun için frameset açılış ve kapanış etiketleri arasında <noframes>(tarayıcınız frame desteklemiyor mesajı)</noframes> şeklinde bir bölüm koyuyoruz. Burası html sayfamızın devamıymış gibi <body></body> tagları arasına almalıyız.

Yatay ve Dikey Pencereleri Bir Arada Kullanmak

Bunun için frame içinde frame kullanmalıyız. Üst tarafta yatay bir pencere ve hemen altında sağ ve sol olarak ikiye bölünmüş bir pencere örneği verecek olursak:




   <frameset rows="50%,50%">
   <frame src="frame_a.htm">
      <frameset cols="25%,75%">
         <frame src="frame_b.htm">
         <frame src="frame_c.htm">
      </frameset>
   </frameset>
   


Frame Kenarlığı ve Pencere Boyutlarını Sabitleme

Frameleri birbirinden ayıran çizgiyi yok etmek için <frame src="#"> koduna frameborder="0"özelliği eklememiz yeterlidir.

Pencere boyutları sizin belirttiğiniz gibi başlangıçta çalışmakta fakat kullanıcı tarafından değiştirilebilmektedir. Bunu engellemek için <frame src="#"> koduna noresize="noresize" özelliği eklememiz yeterlidir.

IFRAME Kullanmak

Bunun yukarıda anlatılandan farklı yanı normal bir HTML belgesinde farklı bir sayfa ya da site için pencere açmanıza yaramaktadır. Pencere içerisinde boyutu belirttiğiniz boyutlarda olmak üzere belirttiğiniz site görünecektir:





   <iframe src="http://kod.anime.web.tr/google.htm" frameborder="0" width="184" height="94" scrolling="no"></iframe>






Yukarıda görüldüğü gibi http://kod.anime.web.tr/google.htm adresini sayfamızda kullandık. iframe kodu içerisinde geçen:

frameborder="0" - Kenarlık kullanılmayacağını belirtir.
width="184" - 184 piksel genişlikte olacağını belirtir.
height="94" - 94 piksel yükseklikte olacağını belirtir.
scrolling="no" - Kaydırma çubuğunu gösterme demek.



HTML Bağlantılar

Bir HTML belgesinde bağlantı (link) verme işini <a href="adres"> koduyla yapmaktayız. Link verdiğimiz kelime ortaya gelecek şekilde yine </a> ile bağlantı verme işini sonlandırmaktayız. Bu şekilde başka bir sayfaya ya da web sitesie bağlantı veririz. Aynı zamanda bu yolla bir müzik dosyası, bir zip arşivi vb. de link vermeniz mümkün.

Aşağıda sitenin bir sayfasına, başka bir siteye, mail adresine ve bir dosyaya link örnekleri görmekteyiz. Bunları inceleyelim:



  <a href="index.html">HTML Dersleri için buraya tıklayın (Sayfa)</a>

   <a href="http://sitesi.web.tr/">Ana sayfa için buraya tıklayın (Site).</a>

   <a href="mailto:admin@venus.gen.tr">Bize e-mail göndermek için buraya tıklayın (E-mail).</a>

 <a href="http://html.sitesi.web.tr/images/html.gif">Site logosunu görmek için buraya tıklayın (GIF resim dosyası).</a>
   

Dikkat: Bir siteye link verirken www.siteadresi.com şeklinde ya da siteadresi.com şeklinde yazarsanız link yine sayfanızda bu bağlantıyı arar. Bunun için başka bir siteye link verirken mutlaka http:// ile başlanmalıdır.

Bağlantıyı Yeni Pencerede Açmak

Bunun için target="_blank" özelliğini kodumuza ekleriz. Böylece bağlantı sayfamızda değil yeni bir pencerede açılacaktır:


<a href="http://sitesi.web.tr/" target="_blank">Ana sitemizi yeni bir sayfada açmak için tıklayın..</a>


Ana sitemizi yeni bir sayfada açmak için tıklayın..




Sayfa İçi Bağlantılar

Bazı durumlarda (özellikle uzun sayfalarda) sayfanın belirli bir bölümüne link vermek gerekebilir. Bunun için name="" özelliğinden yararlanırız. Böyle durumlarda href="" özelliği kullanılmaz.

Öncelikle sayfa içinde bağlantı vereceğimiz yere giderek <a name="etiket"></a> şeklinde yer imimizi belirtiyoruz. Böylece sayfanın bu kısmını işaretledik. Şimdi bu işarete link vermek için sayfa içerisinde başka bir yerde (en aşağıda ya da en yukarıda olabilir) <a href="#etiket">(metin)</a> şeklinde işaretlediğimiz yere link veriyoruz.



<a href="#top">Sayfa Başı</a>


Sayfa Başı


Örnekte görüldüğü gibi tıklandığı zaman daha önce <a name="top"></a> ile Bağlantılar yazısının hemen üstünde belirttiğimiz yere gidiyor. Bu bölüme dışarıdan link vermek içinhref="baglantilar.html#top" kullanılabilir. Sayfa yüklendikten sonra işaretli kısım görünecektir.




HTML Özel Karakterler

Bazı karakterler HTML dilinde çeşitli anlamlara gelebilmektedir. Örneğin (<) karakteri bir HTML kodunun başladığını anlatır ve bunu düz metin kısmında kullanmak kodlamalarda soruna yol açabilir. Böyle durumlarda (&) ya da (#) ile başlayan ve (;) ile biten bazı özel kelimelerden yararlanarak özel karakterleri kullanmalıyız.

Kaynak koduna baktığımızda bunlar &lt; şeklinde görülmektedir. Fakat tarayıcının (<) işaretini oluşturduğunu görürüz.

Gözardı Edilemez Boşluklar

Normalde HTML dilinde boşluk ( ) karakterleri bazı özel durumlar hariç sayılmaz. Yani 10 tane boşluk kullanmış da olsanız bu tarayıcı tarafından boşluk yokmuş gibi algılanır. Bu durumu da özel karakterlerle halledebiliriz. Böyle bir durumda boşluk bırakmak için kullanacağımız metin (&nbsp;)'dir. Aşağıda iki farklı örnekte birinde 10 tane boşluk karakteri, diğerinde 10 tane &nbsp; kullanıldı.

Bu 10'luk standart boşluk.
          Bu 10'luk özel boşluk

HedefTanımKullanım
(Boşluk)Boşluk vermeye yarar.&nbsp;
<Küçüktür işareti.&lt;
>Büyüktür işareti.&gt;
&Ve işareti.&amp;
"Tırnak.&quot;
'Ayıraç.&#39;

Bunun dışında fazla kullanılmamakla birlikte © (&copy;), ® (&reg;) gibi işaretlerinde özel kullanım şekilleri vardır. Bunların tamamı HTML Entities olarak geçer.

HTML Biçimlendirme

HTML dosyamızdaki metinleri biçimlendirirken (kalınlık, sağa yatık yazma, vurgu vb.) çeşitli kodlardan yararlanırız. Bunların birbirinden farklı en önemlilerine aşağıdaki listeden ulaşabilirsiniz. Tüm metin biçimlendirme çeşitleri ise aşağıdaki örnekte verilmiştir.

EtiketAnlamı
<b>Kalın yazmak.
<i>Sağa yatık (italik) yazmak.
<u>Altı çizili yazmak.
<del>Üstü çizili yazmak.
<sup>Üs yazmak.
<sub>Alt hizada yazı yazmak.
<big>Büyük yazı.
<small>Küçük yazı.



<b>Kalın bir yazı</b><br />
   <i>Sağa yatık bir yazı</i><br />
   <u>Altı çizili yazı.</u><br />
   <del>Üstü çizili yazı.</del><br /><br />
   Normal Metin <sub>Yazı hizasının altında küçük yazı.</sub><br /><br />
   Normal Metin <sup>Yazı hizasının üstünde küçük yazı.</sup><br /><br />
   <big>Büyük bir yazı</big><br />
   <small>Küçük bir yazı</small><br /><br />

   <em>Vurgulu bir yazı</em><br />
   <strong>Vurgulu bir yazı</strong><br />
   <ins>Vurgulu bir yazı.</ins><br />
   <s>Vurgulu bir yazı.</s><br />
   <strike>Vurgulu bir yazı.</strike><br />
 

Kalın bir yazı
Sağa yatık bir yazı
Altı çizili yazı.
Üstü çizili yazı.

Normal Metin Yazı hizasının altında küçük yazı.

Normal Metin Yazı hizasının üstünde küçük yazı.

Büyük bir yazı
Küçük bir yazı

Vurgulu bir yazı
Vurgulu bir yazı
Vurgulu bir yazı.
Vurgulu bir yazı.
Vurgulu bir yazı.




Yazı Tipi, Yazı Boyutu ve Renk Seçimi

Bunun için <font> kodunu kullanıyoruz. Örneği inceleyelim:





      <font face="Tahoma" size="1" color="red">Bu 1. örnek yazı..</font><br />
      <font face="Verdana" size="2" color="blue">Bu 2. örnek yazı..</font><br />
      <font face="Times New Roman" size="3" color="#CCFFCC">Bu 3. örnek yazı..</font><br />
   


Bu 1. örnek yazı..
Bu 2. örnek yazı..
Bu 3. örnek yazı..



face="yazıtipi" - Yazı tipi, font klasöründeki adıyla yazılır.
size="boyut" - 1-6 arasında bir değerdir.
color="renk" - Yazı rengini burdan belirtiriz. Renklerle ilgili bilgi verilecek..


HTML Özellikleri

Daha önceden de söylediğimiz gibi, HTML kodları çeşitli özellikleri desteklemekte ve bunlarıozellik="deger" tarzı bir kullanımla belirtmekteydik. Şimdi bunu örnekleyelim:


<h1 align="center">Ortalanmış Bir Başlık</h1>



H1 Başlık

Align özelliği h1, div, td, p gibi anahtarlarda desteklenen sayfa düzeni özelliğidir. Bu değer left (sola), right (sağa) ve center (ortalanmış) olabilir.

Başka bir örnek, tablo kenarlığını tarayıcıya anlatmak:

<table> - bir tablo başlattığımızı anlattık.
<table border="0"> - bir tablo başlattığımızı, aynı zamanda bu tablonun kenarlığı olmadığını (0) anlattık.

Bir özelliği yazarken tırnak işareti ya da ayıraç kullanacaksak dikkat etmemiz gereken nokta kullanmadığımız karakterle özelliği belirtmek. Örneğin:

<a href="#" title="Murat'ın sayfası için tıklayın..">Benim Bağlantım 1</h1>
   <a href="#" title='"Murat" ın sayfası için tıklayın..'>Benim Bağlantım 2</h1>

Bundan sonraki derslerde nesneleri, kullanabileceğiniz özellikleri ile birlikte tanıyacağız.

31 Temmuz 2012 Salı

Basit HTML Kodları

Bu bölümde H1-H2-H3-H4-H5-H6 olarak tabir ettiğimiz başlık yapısı (heading), paragraf açma ve satır atlamayı öğreneceğiz.

Başlık Kullanma

Başlıklar <H1>'den <H6>'ya kadar en büyükten en küçüğe doğru sıralanan ve sayfadaki yerine göre kullanacağımız, W3C standardında başlıklarımızdır. Bu başlıklardan sonra ayrıca bir satır atlanmaktadır...



<h1>H1 Başlık</h1>
   <h2>H2 Başlık</h2>
   <h3>H3 Başlık</h3>
   <h4>H4 Başlık</h4>
   <h5>H5 Başlık</h5>
   <h6>H6 Başlık</h6>


H1 Başlık

H2 Başlık

H3 Başlık

H4 Başlık

H5 Başlık
H6 Başlık
Yukarıdaki örnekte H1'in değiştirildiğini görüyorsunuz. Daha sonra anlatacağımız CSS stil dosyaları ya da dosya içi stillemeler kullanarak başlık etiketlerinde (renk, boyut vs.) değişiklik yapmanın mümkün olduğunu göreceksiniz.

Paragraflar

Paragraf yeni bir satıra başlangıcı ifade eder. Bunu HTML dilinde <p> ile başlatır ve </p> ile bitiririz. Aynı başlık yapısında olduğu gibi paragraflardan sonra da kendiliğinden satır atlar.


<p>Bu bir paragraf örneği..</p>
   <p>Bu da başka bir paragraf örneği..</p>
 


Bu bir paragraf örneği..
Bu da başka bir paragraf örneği..


NOT: Açılan bir kodu kapatmayı unutmayınız: Satır atlama (<br />) ve meta dışında <b>...</b> gibi kullanılmalı. Aksi takdirde sayfa düzeninde bozulmalar oluşabilir.

Satır Atlamak

Bir paragrafta ya da paragraf kullanılmadan başlanılan bir yazıda, HTML dilinde satır atlamak için <br /> tagını kullanırız.

 <p>Bu bir<br /> paragraf ve satır atlama<br /> örneği..</p>

Bu bir
paragraf ve satır atlama
örneği..

Temelde <br> ile <br /> arasında fark yoktur. Fakat (/) eklenmesinin nedeni, satır atlama kodunun bir kapanış tagı olmamasıdır (yani </br> şeklinde bir kullanım olamaz). W3C Standartlarına göre <br /> daha doğru bir kullanımdır (XHTML gereği).






HTML Elementler

Özellikleri

  • HTML dili tag, etiket adlarını verdiğimiz kodlamalardan oluşur.
  • Bu kodlar < ile başlayıp > ile biterler.
  • Bir kod genellikle iki parçadan oluşur. Bu elementin başladığı ve bittiği kodlardır. Element bittiği zaman bölü işareti (/) ile başlangıçtaki değerin yazılması yeterlidir. Örneğin: <b>metin...</b>
  • Tabi her kod bu duruma uymaz. Bazı kodlar için kapanma anahtarı kullanılmaz, onun yerine bu işaret başlangıç kodunun sonuna eklenir. Örneğin: <br />, <hr />


  • Bu kodlar büyük-küçük harf fark etmeden işler. Yani <b> ile <B> arasında fark yoktur. Buna karşın W3C standartları gereği küçük harf kullanmak daha yararlıdır.


  • Aşağıda başlayan ve biten bir kalın yazma elementi görmekteyiz:


    <b>Bu bir kalın yazıdır...</b>


    Değişmez Sayfa Yapısı

    Bir HTML dosyası her zaman aşağıdaki şekilde kodlanmalıdır:



    <html>
       <head>
          <title>Sayfa Başlığı</title>
          (Meta etiketler, scriptler, RSS yolları ve CSS dosyası)
       </head>
       <body>
          (Diğer tüm elementler ve düz metin)
       </body>
       </html>
       


    W3C Standardında bir HTML belgesinde bu kodlar olmazsa olmazdır. Sonuçta yerlerini ters yazsanız da ya da düz metin yazsanız da browser tarafından görünür fakat HTML ön bilgileri, sayfa başlığı, içeriğin bulunduğu yer tarayıcı tarafından görülmez ve hem arama motorları, hem ziyaretçi, hem de browser için bazı sıkıntılar doğurabilir..

    Şimdi buradaki standart diyebileceğimiz kodlar ve aralarında geçen html kodlarını incelemeye başlayalım...

    İpucu: HTML kodlarını öğrenirken anında deneme yapmak için sağ üstte bulunan HTML Editörü'nü kullanabilirsiniz..