Oyunlar

HTML Dersleri

HTML Temel Dökümanlar

<html>
<head>
<title>Buraya başlık</title>
</head>

<body>
Görünecek metinler buraya
</body>
</html>

Başlık Öğeleri

<h1>En büyük başlık</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>En küçük başlık</h6>

Metin Öğeleri

<p>Bu bir paragraf</p>
<br> (satır atlama)
<hr> (yatay çizgi)
<pre>Biçimlendirilmemiş yazılar buraya</pre>
Mantıksal Stiller

<em>Vurgulu metin/em>
<strong>Güçlü metin</strong>
<code>Bilgisayar programlama kodu</code>
Fiziksel Stiller

<b>Koyu</b>
<i>İtalik</i>

Linkler ve Image Öğeleri

<a href="http://www.fikrin.net">Bu bir link</a>
<a href="http://www.fikrin.net"><img src="resim dosyasının yolu" alt="Alternatif metin></a>
<a href="mailto:webmaster@htmldersleri.org">E-mail gönder </a>

Sırasız Liste

<ul>
<li>İlk madde</li>
<li>İkinci Madde</li>
</ul>

Sıralı Liste

<ol>
<li>İlk madde</li>
<li>İkinci Madde</li>
</ol>

Tanımlama Listesi

<dl>
<dt>İlk terim</dt>
<dd>Açıklaması</dd>
<dt>İkinci terim</dt>
<dd>Açıklaması</dd>
</dl>

Tablolar (Tables)

<table border="1">
<tr>
<th>Bir başlık</th>
<th>Bir başlık daha</th>
</tr>
<tr>
<td>metin</td>
<td>metin</td>
</tr>
</table>

Çerçeveler (Frames)

<frameset cols="25%,75%">
  <frame src="sayfa1.htm">
  <frame src="sayfa22.htm">
</frameset>

Formlar (Forms)

<form action="http://www.htmldersleri.org/html_form_action.php" method="post/get">
<input type="metin" name="soyisim" value="GZO" size="30" maxlength="50">
<input type="şifre">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Elmalar
<option selected>Muzlar
<option>Kirazlar
</select>

<textarea name="Yorum" rows="60" cols="20"></textarea>

</form>

Özel Karakterler

&lt; ifadesi, bununla aynı çıktıyı verir: <
&gt; ifadesi, bununla aynı çıktıyı verir: >
&#169; ifadesi, bununla aynı çıktıyı verir: ©
Diğer Öğeler

<!-- Bu bir yorum -->

<blockquote>
Bu metin başka bir metinden alıntılanmış bir parçadır.
</blockquote>

<address>
Adres 1<br>
Adres 2<br>
Şehir<br>
</address>


HTML Kullanımı?

HTML zor değildir. Uğraşmaya başladıkça denemeler ile beraber yaptıkça öğreneceksiniz.

HTML Nedir?

Html .txt .mp3 gibi bir dosya uzantısıdır. Html uzantılı dosyalar internet üzerinden başkalarının ulaşabileceği, explorer gibi çeşitli tarayıcılar üzerinden çözümlenerek bizim görebileceğimiz şekilde sunulan kodlama formatıdır.


Siteleri Açtığımda Kodlar Neden Görünmüyor?

Tarayıcılar html dosyalarını çözerek gösterir. Html kodlarıyla hazırlanmış dosyayı alıp inceler ve görünmesi gerektiği gibi size gösterir.


HTML Kodları Nasıl Görülebilir?

Html dosyasının yorumlanmamış hali o dosyanın kaynağıdır. Html kodlarından oluşur ve tarayıcınızda sayfaya sağ tıklayıp "kaynağı göster" dediğinizde kodları görebilirsiniz.


HTML Dosyası Nasıl Oluşturulur?

Yeni bir metin belgesi oluşturun. Dosya ->Farklı Kaydet yolu ile dosya adının sonundaki .txt uzantısı yerine .html yazarak oluşturabilirsiniz.


HTML Kodlarını Denemenin Kolay Yolu Nedir?

Google'dan arama yaparak online kullanabileceğiniz kod deneme editörlerini bulabilirsiniz. Html kodlarını denemeniz için


Kodlarınızı yapıştırdığınızda ve Önİzle butonuna tıkladığınızda, sağ taraftaki kısımda kodlarınızın ön izlemesini görebilirsiniz.

Örnek Yapalım:

<div style="background-color:red;width:200px;height:150px;"><a style="color:white;">deneme</a></div>  

Bu örneği vermekteki amacımız, Kod Ön İzleme Editörünü denemeyi öğrenmeniz.



  
Sitenize yerleştirdiğinizde şöyle görünecek:









Sonraki derse geçebilirsiniz.





HTML Etiketlerine Giriş

HTML bir dildir. HTML'i bir ayda öğrenilebilecek kadar kolay yapan şey ise mantığının basit olmasıdır. Yabancı dillerde yüzlerce gramer kalıbı vardır. Html'de ise uymanız gereken tek bir kalıp vardır. Kolay bir dildir ama internette göreceğiniz html dersleri genelde karmaşık ve sıkıcıdır.

HTML sayfalar, aslında kümelerden oluşur. Farklı özelliklerdeki farklı kümelerden oluşur. 





İlk baktığınızda farkedemeyebilirsiniz. 8 adet küme kullanılmış, 4'ü resim kümesidir. Görmek zor değil zaten 4 adet resim var. Biri liste kümesi, diğeri ise yazı kümesidir. Geriye kalan iki küme ise alan oluşturma kümeleridir ve tek özellikleri, diğer kümelerin duracakları yerleri oluşturmaktır.





Yazı Kümesi Nasıl Oluşturulur?

Şu şekilde olmalıdır;


Kod:Önizlemesi:
<a>Merhaba</a>Merhaba



Bu basit bir yazı kümesidir. Nasıl oluşturulur;

Yazı kümesinin sembolu a 'dır.
Küme açılır.
İçerisine yerleştirmek istedikleriniz yerleştirilir.
Küme kapatılır.






Diğer Kümeler Nasıl Oluşturulur?

Yazı kümesinin sembolü a dır ve içine yazı konulur. Eğer kümemizin sembolü a değil de fieldset olsaydı şöyle açıp kapatacaktık;

<fieldset>  </fieldset>

İçine ne koyacağız? Bu kümeden kümeye değişir. Yazı kümesi, yazı oluşturmaya yaradığı için, içine yazı konulur. Fieldset kümesi ise, çerçeveli bir alan oluşturur ve içine başka kümeler konulur;


Kod:Önizlemesi:
<fieldset><a>Merhaba</a></fieldset>
Merhaba


Gördüğünüz üzere bir fieldset kümesi açıp içine a kümesi yerleştirdik. bu şekilde çerçeveli bir alan yaratıp içine yazı yerleştirmiş olduk.

İçine ne koyacağız? Bu kümeden kümeye değişir. Yazı kümesi, yazı oluşturmaya yaradığı için, içine yazı konulur. Fieldset kümesi ise, çerçeveli bir alan oluşturur ve içine başka kümeler konulur;

Örneğin center kümesini ele alalım. center kümesinin özelliği, içindeki tüm kümeleri yatay olarak ortalamasıdır:


Kod:Önizlemesi:
<fieldset><center><a>Merhaba</a></center></fieldset>
Merhaba



Gördüğünüz gibi bir önceki örnekte sol tarafa dayalı olan yazı kümesi, şimdi ortalanmış bir şekilde duruyor. 

Yukarıdaki örnekleri KOD DENEME EDİTÖRÜ ile deneyin. Ayrıca denemeniz için bazı küme sembolleri:

a
button
fieldset
b
li
textarea
marquee


Küme sembollerine kısaca etiket denilir. Her bir küme ise bir elementtir. a elementi, textarea elementi, fieldset elementi gibi...



Element Özellikleri

Html'in kümelerden oluştuğunu, bu kümelere element dendiğini, ayrıca her kümenin (elementin) kendi özellikleri olduğunu belirtmiştik.

Bu özellikler nasıl kullanılır?

Bir element, bir açılış etiketi, bir içerik ve bir kapanış etiketi ile oluşur.

 <a>      Merhaba     </a>

a elementinin bir özelliği kullanılacaksa, bu açılış etiketinin içinde kullanır: 

<a özellik="değer">       Merhaba     </a>

Eğer sembolü div olan bir elemetin bir özelliğini kullanacak olsaydık, şöyle olurdu:

<div özellik="değer">     İçerik     </div>

Özellik ve değer?

Örnek verecek olursak, a kümesinin bir özelliği href dir. href özelliği link vermeye yarar. Bu özelliğin değeri ise adrestir


Kod:Önizlemesi:
<a href="https://google.com">Merhaba</a>Merhaba








Bir body elementi oluşturalım. Body elementi, bulunduğu yeri kaplayan bir alan oluşturur ve içine başka elementler konulur. Biz de body elementimizin içine bir a elementi koyacağız:


Kod:Önizlemesi:
<body>    <a>  Merhaba  </a>    </body>Merhaba



Body elementinin bir özelliği bgcolor dır. bgcolor özelliği arkaplan rengini değiştirmeye yarar. Bu özelliğin değeri ise doğal olarak renk adıdır. özellik="değer" kalıbımızı kullanıyoruz:



Kod:Önizlemesi:
<body bgcolor="red">    <a>  Merhaba  </a>    </body>Merhaba



Şimdi a elementinin title özelliğini kullanalım. Title özelliği, elementin üzerine mouse ile beklediğinizde küçük bir kutucukta açıklama oluşturmaktır. Title özelliğinin değeri yazıdır. yani herhangi bir yazı kullanabilirsiniz:


Kod:Önizlemesi:

<a title="Merhaba!">

Bu yazının             üzerinde

farenizi bekletin.

</a>
Bu yazının üzerinde farenizi bekletin.

Farkedeceğiniz gibi, kodu yazarken araya boşluklar ve boş satırlar koyduk. Bunu yapmamızın sebebi size bir şeyi göstermek:

HTML kodlarında bir veya daha fazla boşluk koyarsanız bu bir boşluk olarak görünür. Satır atlamak ise gereksizdir çünkü html kodlarında istediğiniz kadar satır atlayın, tüm kodlarınızı aynı satıra yazmanızdan hiç bir farkı olmaz.


Yazılar arasında nasıl satır atlıyoruz?

Satır atlamaya yarayan bir element var. Sembolü br olan bu kümenin tek özelliği bir satırlık atlama oluşturması:


Kod:Önizlemesi:
<a>selam</a> <br/> <a>Nasılsın</a>selam
Nasılsın


Dikkatinizi çekecek şey muhtemelen <br/> nin çok saçma görünmesi olacak. 



Nedir Bu?

Evet, bu elementin bir açılış ve kapanış etiketi yok. Çünkü Gerek Yok.

Diyelim ki br kümesi şöyle bir şey olsaydı:

<br> </br>

İçine ne koyacaktık? Satır atlamanın içi olmaz. Bu nedenle bu element tek bir etiketle hem açılıp hem kapatılıyor:

<br/>

Burada kafanız karışmaya başlamasın. İçine bir şey konulamadığı için bu şekilde yazılan elementler sadece birkaç tane:

<br/>
<input/>
<img/>
<hr/>

örneğin <hr/> elementi yatay bir çizgi yerleştirmeye yarar. HTML dili yaratılırken <hr></hr> şeklinde kararlaştırılmamasının sebebi, çizginin içine bir şey konulamayacak olmasıdır:




Bundan sonraki birkaç dersimizde a img table div gibi elementleri öğreneceğiz. O zamana kadar bir ön hazırlık yapmak isteseniz Kod Deneme Editörümüz 'de şu kodları deneyebilir, değişiklikler yapıp pratiğinizi geliştirebilirsiniz:
<a href="https://www.koddostu.com" target="_blank">
<img src="https://ssl.gstatic.com/s2/oz/images/settings/privacy/vis-profile.png" />
<br/><br/><b><font color="red">Yaşasın!</font> </b>
</a>



A Elementinin Özelikleri


Bu dersten sonra yapabilecekleriniz:
Yazılara link vermek
Linklerin yeni pencerede veya aynı pencerede açılmasını sağlamak
Bilgilendirici not eklemek
Yazılara class, id veya name atamak

İçinde "merhaba" yazan bir a element oluşturalım:
<a>Merhaba</a>

A elementinin özelliklerini şu şekilde kullanıyoduk
<a özellik="deger">Merhaba</a>

a elementinin en çok kullanılan özelliklerini ve alabilecekleri değerleri tablo halinde görelim:

ÖzellikAlabileceği DeğerlerÖrnek
nameherhangi bir kelime<a name="naber"> Merhaba </a>
hreflink<a href="https://google.com"> Merhaba </a>
target_blank ,  _top , _self veya _parent<a target="_blank"> Merhaba </a>
classherhangi bir kelime<a class="naber"> Merhaba </a>
styleCSS kodları<a style="text-decoration:underline;"> Merhaba </a>
titleHerhangi bir yazı<a title="karşılama mesajı"> Merhaba </a>


Name özelliğinin etkisi, web sayfasında doğrudan görünmez. Name özelliğinin tek kullanım amacı, sayfadaki yazılara ve bazı başka elementlere kısa adlar koyarak daha sonra bunlara daha kolay ulaşmaktır. Daha sonra bahsedeceğim "sayfa içine köprü kurmak" yönteminde de kullanılırlar.

 (Ayrıca javascript dilinde de bazı elementlere ulaşmak için kullanılır. Bunu şöyle düşünün:  javascript dilinde, sayfanızdaki bir paragrafa bir efekt vereceksiniz diyelim. Mesela o paragraf küçülerek kaybolsun istiyorsunuz. Bu durumda önce paragrafa bir name değeri verirsiniz. Örneğin adı "paragrafımm" olsun. Javascript komutlarını oluştururken, tarayıcıya şöyle dersiniz: "paragrafımm isimli elementi getir, sonra ona şu şu efektleri uygula". Bu kısmı okumak veya anlamak zorunda değilsiniz. Sadece meraklılar için ek bir bilgi bu.)

href özelliği, tahmin edebileceğiniz gibi, elemente link vermeye yarar. Elbette her elemente link veremezsiniz. Örneğin bir tablonun kenarlığına tıklandığında bir adrese gitmesini sağlayamazsınız çünkü tablo elementinin href özelliği yoktur. Bunu daha sonra göreceğiz. Href özelliği kısaca,yazıya tıklandığında açılacak olan linki belirlemek için kullanılır. Eğer href özelliğini yazmazsanız, yazıya link vermemiş olursunuz.

KodÖnizlemesi
<a href="https://google.com">Tıkla</a>Tıkla


Ancak burada bilmeniz gereken önemli bir şey var. Eğer href değerinin başına https://koymazsanız, tarayıcı, yazdığınız değerin başına, o anki sitenin adresini ekler. Yani eğer kodun bulunduğu sayfanın adresi https://birsite.tr.gg ise, ve kod <a href="/anasayfa.html">Bir site</a> gibiyse, yazıya tıklandığında https://birsite.tr.gg/anasayfa.html adresine gidilir. Bu kısımla ilgili sorunuz varsa yorum olarak yazabilirsiniz.

 target özelliği (ingilizce hedef demek) , linkin nasıl açılacağını belirler. target değeri _blank olan bir link, yeni, boş bir sayfa veya sekmede açılır. target özelliği _self olan link, tıklandığı sayfada açılır. _parent ve _top değerlerini ise başka bir dersimizde, iframe'den bahsederken açıklayacağız.

KodÖnizlemesi
<a href="https://google.com" target="_blank">Tıkla</a>Tıkla


class özelliği yazılara sınıf atamanızı sağlar. Yani 4000 kişilik bir okul olduğunu düşünün. Eğer öğrencileri sınıflara ayırmazsanız büyük bir kargaşa olurdu değil mi? Sınıflar, css kodlarında, yazılan bir kodun hangi elemente uygulanacağını belirlemeye yarar.

Aslında henüz css öğrenmeyeceksiniz. Ama class özelliğini anlamanız için küçük bir örnek yapalım:

Genelde sitemizde iki dosya bulundururuz. Birinde CSS, diğerinde HTML kdolarımız bulunur. Css kodları, html kodlarındaki renkleri, arkaplanları, genişlikleri ve hatta saydamlıkları belirlememize yarar. Örneğin html kodumuz şöyleyse:
<a>kırmızı</a>
<a>normal</a>
<a>bu da kırmızı</a>

birinci ve üçüncü yazının kırmızı olmasını istiyorsak, bu yazılara ortak bir sınıf veririz. sınıfın adı herhangi bir kelime olabilir:
<a class="midyedolma">kırmızı</a>
<a>normal</a>
<a class="midyedolma">bu da kırmızı</a>

ardından css dosyamıza, şu css kodunu ekleriz:
.midyedolma{ color:red; }

yukarıdaki css kodlarını anlamanıza gerek yok. Sadece, class özelliğinin, css kodlarının uygulanacağı elementleri seçmek için kullanıldığını anlayın.

 style  özelliği de yine css ile ilgilidir.Belli bir elemente css kodları uygulamak için, kodları direkt o elementin içine yerleştirebiliriz. Örnek:
<a style="color:red;"></a>

Ancak bu da css konusuna girdiği için, bu özelliği şimdilik anlamanıza gerek yok.

title özelliği, kullanıcı elementin zerinde faresini beklettiği zaman görünecek olan bilgilendirici bir not eklememizi sağlar. Bu özeliği geçen dersimizde örneklemiştik:

KodÖnizlemesi
<a title="teşekkürler!">bu yazının üstüne gelip bekleyin</a>bu yazının üstüne gelip bekleyin


 id özelliği de class özelliği gibidir. Ancak id özelliği css dışında, javascriptte de çok işe yarar. Bu özelliği de şimdilik bilmenize gerek yok.





Resim elementi ve başlık 

Html resim elementinin özelliklerini ve başlık elementlerini inceleyeceğiz.

Resim Elementi: img

Resim elementi olan img, tek bir etiketle açılır ve kapatılır:
<img />

Resmin adresi, boyutları ve kenarlıkları gibi bilgileri ise önceki dersimizde bahsettiğimiz özellik="değer" formatında ekleriz:
<img özellik="değer" />


Elbette ki birden fazla özellik ve değere yer verebiliriz.
Şimdi img elementinde en çok kullanılan özellikleri ve değerlerinin cinslerini yazalım:


Özellik
Alabileceği Değerler
Örnek
src
resim linki
<img src="https://img851.imageshack.us/img851/5412/dth6.png"/>
alt
yazı
<img alt="bir çiçek resmi" />
width
sayı veya oran
<img width="50px"/> veya <img width="20%"/>
height
sayı veya oran
<img height="50px"/> veya <img height="20%"/>
border
sayı
<img border="3" />
style
CSS kodları
<img style="border-color:red;-moz-border-radius:14px;" />


Yukarıdaki özellikler arasından, src mutlaka belirtilmelidir. Border değerini de kesinlikle belirtmenizi öneriyorum. Çünkü İnternet Explorer, border değerleri belirtilmemiş resimlere kendi kafasına göre kenarlık ekler. Bu yüzden kenarlık eklemeyecekseniz bile border="0" diye belirtmenizde fayda var.

Şimdi sırasıyla bu özellik ve değerleri gözden geçirelim:

  src özelliği ve değeri kesinlikle belirtilmelidir. Zaten resmin adresi olmadan resmi gösteremeyiz değil mi? Resminizin adresini belirtmediğiniz sürece resminiz sayfada görünmez. Bu konuda dikkat etmeniz gereken şey, resmin adresini href ile değil src ile belirliyor olmamız. src aslında kaynak anlamına gelen source kelimesinden geliyor.

Şimdi img elementinde en çok kullanılan özellikleri ve değerlerinin cinslerini yazalım:

Yukarıdaki özellikler arasından, src mutlaka belirtilmelidir. Border değerini de kesinlikle belirtmenizi öneriyorum. Çünkü İnternet Explorer, border değerleri belirtilmemiş resimlere kendi kafasına göre kenarlık ekler. Bu yüzden kenarlık eklemeyecekseniz bile border="0" diye belirtmenizde fayda var.

Eğer bir resminiz varsa ve bunu internete koyup linkini edinmek istiyorsanız en basitinden https://imageshack.us a kaydolabilirsiniz.

KodÖnizlemesi
<img src="https://img851.imageshack.us/img851/5412/dth6.png"/>

alt özelliği resmin açıklamasını içerir. Eğer resim bir şekilde görüntülenemezse, resmin görünmesi gereken alanda alt değerinde yazanlar görünür. Bu değeri oluştururken belli bir kurala bağlı kalmanıza gerek yok. Resminizi açıklayan herhangi bir metin koyabilirsiniz. Ya da alt özelliğini eklemeye de bilirsiniz. Ancak alt değeri aynı zamanda arama motorlarının sayfanızı değerlendirirken kullandığı bir veri. Bu nedenle kullanmanızda fayda var.Alt kelimesini, "alternatif metin" anlamında düşünebilirsiniz.

KodÖnizlemesi
<img alt="iki tane kare" src="https://img851.imageshack.us/img851/5412/dth6.png" />iki tane kare

width özelliği, eklediğiniz resmin enini belirler. Piksel cinsinden bir değer yazmak için px kısaltmasını kullanabilirsiniz. Veya bulunduğu kısmın genişliğine göre oranlamak isterseniz sonuna % işaretini ekleyebilirsiniz. Örneğin bir hücrenin içine koyduğunuz resme width="100%" yazarsanız, resim hücrenin genişliğinde olur. Eğer hiç bir kısaltma eklemeden sayı yazarsanız, Tarayıcı bunu da piksel olarak düşünecektir. Eğer hiç bir width değeri vermezseniz, Resmin kendi genişliği kullanılır. Veya yükselik değerini belirtmişseniz, genişliği de ona göre ayarlar.

height özelliği için de yukarıdaki şeylerden sözedebiliriz. Ancak height resmin genişliğini değil yüksekliğini belirler:


KodÖnizlemesi
<img width="50px" height="200px" src="https://img851.imageshack.us/img851/5412/dth6.png" />
<img height="40" src="https://img851.imageshack.us/img851/5412/dth6.png" />


border değeri aslında çok basittir. 3, 5 gibi herhangi bir sayı yazarak kenarlığın, yani çerçevenin genişliğini belirlersiniz:



Kod
Önizlemesi
<img border="4" src="https://img851.imageshack.us/img851/5412/dth6.png" />

 style değeri olarak css kodları kullanılır. Ancak şu an için bundan bahsetmeye gerek yok. Html dersleri bitmeden css derslerine başlamayacağız.


Resimlere link vermek

HTML dilinde bildiğiniz gibi, elementler kullanırız. İlk dersimizde bu elementleri kümelere benzetmiştik ve bazı kümelerin diğerlerini kapsayabileceğini söylemiştik. İşte şimdi o özellikten bahsetme zamanı:
Resim kümesinin href özelliği yoktur. Bu nedenle resimlere link vermek istediğimizde, href özelliği olan bir elementin içine koyarız. Ve bu element çoğunlukla, yazı kümemiz olan "a" dır:



Kod
Önizlemesi
<a href="https://google.com"> <img src="https://img851.imageshack.us/img851/5412/dth6.png"/> </a>

Başlık Elementleri

Başlık elementleri, aslında son derece kısırlaştırılmış birer yazı elementidir. Başlık elementlerini şu şekilde gösterebiliriz:

KodÖnizlemesi
<h6>Merhaba</h6>
Merhaba
<h5>Merhaba</h5>
Merhaba
<h4>Merhaba</h4>






<h3>Merhaba</h3>

Merhaba

<h2>Merhaba</h2>

Merhaba

<h1>Merhaba</h1>

Merhaba







Tablolar

Merhaba! Bu dersimizde html tabloların nasıl oluşturulduklarıyla ilgili bazı şeyleri öğreneceksiniz! Üstelik olabilecek en kolay şekilde!

Aslında Tablo kodları kolaydır. Html tablolarının tek bir zor yanı vardır: "anlatmak" :D Evet, html tablolarını anlatmak zordur. Ama anlatabilirseniz, anlamak çocuk oyuncağı olur.


Hatırlatma: küme mantığı

Daha önce HTML deki her bir elementin aslında bir küme gibi olduğundan bahsetmiştik. İç içe kümeler oluşturabiliyoruz mesela. yani bir yazı kümesi oluşturursak:
<a>              </a>


Sonra bunun içine bir resim kümesi koyarsak:
<a>  <img/> </a>

Eğer istesek, bir Div kümesine iki paragraf kümesi ve her birine ikişer yazı kümesi ekleyebiliriz:
<div>
<p>
<a> </a>
<a> </a>
</p>

<p>
<a> </a>
<a> </a>
</p>
</div>

Bunları alt alta da yazsanız, yan yana da yazsanız bir şey değişmez.

Tabloları oluştururken de, bu şekilde en az 3 farklı element kullanacağız. Şimdi istersen bir tablonun kümelenişini görelim:


Tablo Elementinin Kümelenmesi





Yukarıdaki gibi görünen bir tabloda, aslında iç içe konulmuş 7 tane element vardır. 
1 adet tablo elementi. Bu tablo elementinin içine yerleştirilmiş 2 adet satır elementi ve her bir satır elementinin içine konulmuş iki tane hücre elementi. 

Aslında anlaşılması gayet basit. Tablo elementimizin adı table dır.(teybıl diye okunur). satır elementi tr dir ve hücre elementi td dir.

Yukarıda soldaki tablonun kodları şunlardır:
<table>
<tr>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

</table>

Eğer tablonuzda sadece bir tek satır, ve o satırda da 3 adet hücre olsun isteseydiniz:
<table>
<tr>
<td></td> <td></td>
<td></td>
</tr>
</table>
Bunu yapardınız. hücrelerin içine ise istediğinizi yazabilirsiniz. <td>merhaba</td> gibi.

HTML kodların önemli bir özelliği, satır atlayarak yazmanızın hiç bir anlamı olmamasıdır. yani yukarıda verdiğimiz kodu şu şekilde yazabiliriz:
<table> <tr> <td></td> <td></td> <td></td> </tr> </table>

Tüm bunların dışında, tabloların bir dezavantajı vardır:

Hücreleri hizalarlar! Yani bir satıra iki, diğer satıra üç hücre koyarsanız şöyle görünür:



Bunu aşmak ve hücrelerin genişliğini istediğimiz gibi ayarlayabilmek için hücre elementinin özelliklerini öğrenmemiz gerekir:


TD Elementinin Özellikleri


ÖzellikDeğerNe İşe Yarar?Örnek Kullanım
alignleft
right
center
justify
hücre içindekilerin sağa sola ortaya veya her iki tarafa hizalanmasını sağlar.<td align="right"> merhaba </td>
bgcolorrgb(x,x,x)
#xxxxxx
hücrenin arkaplan rengini rgb veya hex renk kodlarıyla belirler.<td bgcolor="#000000"> merhaba </td>
colspansayıhücrenin yatay olarak kaç hücrelik yer kaplayacağını belirler.<td colspan="2"> merhaba </td>
rowspansayıhücrenin dikey olarak kaç hücrelik yer kaplayacağını belirler.<td rowspan="8"> merhaba </td>
heightpikselpiksel cinsinden hücrenin yüksekliğini belirtir.<td height="40px"> merhaba </td>
widthpikselpiksel cinsinden hücrenin genişliğini belirtir.<td width="120"> merhaba </td>
valigntop
middle
bottom
hücre içindekilerin hücrenin alt veya üst kenarına dayanmasını veya dikey olarak tam ortalanmasını sağlar.<td valign="top"> merhaba </td>

Bu derslik burada kesmek yararlı olacaktır. Bir daha ki derste tabloların tüm özelliklerini ve uygulamalarını öğreneceğiz. O zamana kadar, uygulamalarını göstermediğimiz yukarıdaki td özelliklerini deneyimlemeye çalışın.



Tablo Kodu Özellikleri

Bir önceki dersimizde,tablo elementlerine değinmiştik ve td elementinin özellik-değer listesini vermiştik. Aslında tablo elementleri webmasterlar için ağır birer yük. Css3'ün çıkışıyla birlikte, tablo elementleri tamamen gereksiz bir hal aldı. Yine de karşılaştığınız bir kodu anlayamazsanız kendimizi suçlu hissetmek istemiyoruz. Bu nedenle bu derste, tablo elementi özelliklerinin genel kullanımına örnekler göstereceğiz. 

Hatırlatma: Tablolar

Önceki dersimizde öğrendiklerimizi kullanarak, 2 satır 2 sütundan oluşan bir tablo hazırlayalım: 

1.adım: bir tablo alanı oluşturalım: 
<table>
    ...
</table>

2.adım: tablo elementimizin içine, 2 adet satır ekleyelim:
<table>
       <tr>
               ...
       </tr>

        <tr>
                ...
       </tr>

</table>

3.adım: her satıra 2 adet hücre ekleyelim:
<table>
       <tr>
                <td>...</td>       <td>...</td>
       </tr>

        <tr>
                 <td>...</td>       <td>...</td>
       </tr>

</table>

Elbette bunların hepsini tek satıra da yazsak bir şey değişmeyecek:
<table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table>

Dersi takip ederken bir yandan da bu kodları kod deneme editörümüzde denemeniz anlamanızı kolaylaştırır.

Daha önceden bildiğiniz gibi, her x elementinin, bazı özellik ve değerleri olabilir. Bu özellik ve değerleri kullanma yöntemimiz ise şudur:
<x özellik="değer"> </x>

Önceki dersimizi,tablo kodlarımız içerisindeki hücre elementi olan "td" için geçerli özellik ve değerleri örneklendirerek bitirmiştik:

ÖzellikDeğerNe İşe Yarar?Örnek Kullanım
alignleft
right
center
justify
hücre içindekilerin sağa sola ortaya veya her iki tarafa hizalanmasını sağlar.<td align="right"> merhaba </td>
bgcolorrgb(x,x,x)
#xxxxxx
hücrenin arkaplan rengini rgb veya hex renk kodlarıyla belirler.<td bgcolor="#000000"> merhaba </td>
colspansayıhücrenin yatay olarak kaç hücrelik yer kaplayacağını belirler.<td colspan="2"> merhaba </td>
rowspansayıhücrenin dikey olarak kaç hücrelik yer kaplayacağını belirler.<td rowspan="8"> merhaba </td>
heightpikselpiksel cinsinden hücrenin yüksekliğini belirtir.<td height="40px"> merhaba </td>
widthpikselpiksel cinsinden hücrenin genişliğini belirtir.<td width="120"> merhaba </td>
valigntop
middle
bottom
hücre içindekilerin hücrenin alt veya üst kenarına dayanmasını veya dikey olarak tam ortalanmasını sağlar.<td valign="top"> merhaba </td>

Gelin şimdi biraz pratik yapalım:


Hücre özellikleri: align & valign


KodÖnizleme
<table border="1">

<tr><td align="right">Merhaba</td></tr>


<tr><td align="left">Deneme Yazısı</td></tr>

<tr><td align="center" style="width:150px;">Güle Güle</td>


</tr></table>




Görebileceğiniz gibi, İlk hücreye align="right" özellik ve değerlerini vererek sağa yasladık. İkincisini sola, üçüncüsünü ise merkeze hizaladık. Aslında basit bir ingilizce dil bilgisi yeterli tüm bu özellikleri anlamak için.Şöyle ki; Align hizalamak demek. Right ise sağ demek. Yani html türkçe olsaydı, şöyle olacaktı:
<td hizala="sağ"> </td> gibi.

valign ise aslında "düşey hizalama" anlamına gelen "vertical align" ın kısaltması. Yani şöyle bir hücrede:
<td valign="top"> Merhaba</td> 

içerik(Yani Merhaba kelimesi) hücrenin üst kenarına yapışacaktır.

valign="middle" içeriği ortalarken, valign="bottom" içeriği hücrenin dibine yapıştırır. Hücreyi bir oda gibi düşünün. valign="middle" ise, odaya koyduklarınız odanın ortasında,havada süzülüyor. valign="top" ise tavana bitişik duruyorlar. 

Son derece basit değil mi? Yine de anlamadığınız kısımlar olursa lütfen yorum bölümünde belirtin.



Hücre özellikleri: height &width

Bunları aslında biliyorsunuz. height yükseklik, width ise genişlik demek. İster html, ister css, ister başka bir kod dili öğrenin, height ve width kelimelerinden asla kurtulamazsınız. Her yerde çıkarlar karşınıza. Şimdi gelin bir örnek yapalım.

Aşağıdaki örnekte, ilk hücreye 200 piksel genişlik,40 piksel yükseklik verirken,ikinci hücreye 80 piksel genişlik verelim:

KodÖnizleme
<table border="1">
  <tr>

     <td height="40" width="200">
         Deneme Yazısı
     </td>

     <td height="40" width="80">
         Deneme
     </td>

     <td>
        Deneme
     </td>
  </tr>

  <tr>
     <td>Başka bir hücre</td>
     <td>Son Hücre</td>
  </tr>
</table>




Burada dikkatinizi çekmesi gereken bir şey var. "Başka Bir Hücre" yazan hücreyi görüyorsunuz değil mi? Biz o hücrenin genişliğini 200 yapmadığımız halde, üstteki hücre ile birlikte o da 200 piksel genişliğe ulaştı. Neden?

Çünkü bir sütundaki her hücre aynı genişliğe, bir satırdaki her hücre aynı yüksekliğe sahiptir.  Eğer "Deneme" ve "Son Hücre" adlı hücrelere bakarsanız görürsünüz. "Son Hücre" yazan hücremiz de otomatik olarak 80 piksel genişlikte kaldı. (Tablomuzdaki ilk satıra 3, ikinci satıra 2 hücre ekledik. O yüzden 2. satırda bir boşluk var.)

Peki ya biz "Son Hücre" yazan hücremizin, 2 hücre genişliğinde olmasını, ve tablonun sağ altındaki boşluğun böylece yok olmasını isteseydik?


Hücre özellikleri: rowspan & colspan

Standart olarak her hücre, bir hücrelik yer kaplar (E yani ne olacaktı?). Ama bir satırda üç, diğer satırda iki hücre koyduğumuzda şöyle çirkin bir görüntü oluşur:


Peki ya biz şöyle görünmesini istiyorsak:


İşte burada devreye giren hücre özellikleri colspan ve rowspan.  colspan ile bir hücrenin kaç hücre genişliğinde olacağını, rowspan ile kaç hücre yüksekliğinde olacağını belirleyebiliyoruz:

KodÖnizleme
<table border="1">

  <tr>

     <td height="40" width="80">ilk</td>
     <td height="40" width="80">ikinci</td>
     <td>üçüncü</td>
  </tr>


  <tr>

     <td>bir</td>
     <td align="center"colspan="2">iki</td>

  </tr>

<tr>


</tr></table>

Nasıl? Eğlenceli mi? Tablolar ile neler yapabileceğinizi bir düşünsenize...
Sadece tablo!
Tablolar hiç eğlenceli değildir ve sadece sıkıcı bir iki tablo yapmanıza olanak sağlar. Üstelik yan yana iki hücre koyacağız diye bir tablo elementi, bir de satır elementi koymamız gerekir. Tablo içerikleri tamamen yüklenmeden sayfada görüntülenmez. tablolar web sitenizi yavaşlatır. Tablolar sıradan çinko karbon piller gibidir. Makinenize zarar verir. Kim böyle bir şey kullanır ki?

Bu yüzden çok daha basit, kullanışlı ve eğlenceli olan "div"leri kullanırız. Ortalama bir CSS bilgisiyle(ki htmlden sonra css gayet kolay gelecek) divlere istediğimizi yaptırabiliriz. Uçururuz, kaçırırız, tablo yaparız, buton yaparız, galeri yaparız, yaparız da yaparız. Div elementi, html'in yapıtaşıdır. Evin tuğlası gibidir. Div elementi içermeyen bir web sitesi göremezsiniz.

Peki nedir bu div elementi?
Merak ettiniz değil mi?
Malesef bunun için gelecek dersi beklemeniz gerekecek.
En azından şuna sevinebilirsiniz: html'in en sıkıcı kısmını atlattınız!




Div Elementi Özellikleri

Önceki yazıda en sıkıcı konu olan tabloları işlemiştik. Div ise çok daha yetenekli ve basit bir elementtir. Bu dersimizde Div elementinin kullanımı ve özellikleri üzerinde duracağız.

  Html derslerimizi takip ediyorsanız, bu derse özellikle dikkat etmelisiniz zira günümüzde Div etiketi, neredeyse tüm web sitelerinin yapıtaşı durumunda.


Div Elementi Nedir? Ne İşe Yarar?

  Div elementi, ilk iki derste bahsettiğimiz gibi bir "küme", bir "alan" oluşturur. Div elementini a, span, b gibi elementlerden ayıran en önemli özellik, bunun bir Blok Elementi olmasıdır. Bunu daha iyi anlayabilmeniz için, şöyle bir örnek verebiliriz: 
HTML'de elementler temelde "blok seviyesinde element" ve "satır içi element" olarak ikiye ayrılır.
Sakın canınızı sıkmayın, aslında durum çok basit:

Satır içi elementler, içine ne koyarsanız o boyuttadır. Sönük bir balon gibi.
Bloklar ise alabileceği maksimum genişliktedir. Tüm sayfanın, tüm satırın genişliğine ulaşmak ister.

Yan yana 5 tane satır içi element koyarsanız, yan yana dururlar. Diğer elementlerle yan yana durmak hoşlarına bile gider.
Yan yana 5 tane blok elementi koyarsanız hepsi alt alta görünür, her biri koca bir satır yer kaplar. Bir Blok, sağında ve solunda başka element görmekten hoşlanmaz.
Aşağıdaki örnekte, iki adet satıriçi elementin arasına önce bir satıriçi element, sonra ise bir blok element koyuyoruz:

a, span gibi elementler satır içi element iken, div, h1, p gibi elementler blok düzeyindeki elementlerdir. P elementinden önce ve sonra kendiliğinden satır atlanmasının asıl sebebi de zaten blok olmasıdır. 



Div Elementi Özellikleri

Div elementinin elbette class, id style ve title özellikleri var. Bu özelliklerin ne işe yaradığını zaten önceki derslerimizden biliyorsunuz. Bunun dışında dir, ve lang gibi henüz bahsetmeyeceğimiz ve pek kullanılmayan iki özelliği daha var.
Bulabileceğiniz çoğu online türkçe kaynakta div elementinin bir de "align" özelliği olduğu yazıyor. Oysa bu özellik HTML5 ve sonrasında desteklenmiyor, yani artık "eski" ve zaman içerisinde kullanımdan kalkacak.

Div elementinin en çok kullanılan özelliği, "style" özelliğidir. Div, esasında CSS ile istenilen her formata sokulabildiği için bu kadar popüler.


Kod:

<div style="height:150px;text-align:center;background-color:slateblue;color:#fff;">
<h1>Hoş Geldiniz</h1>
</div>

Sonuç:

Hoş Geldiniz


Elbette henüz CSS öğrenmediğiniz için style özelliğine verdiğimiz şu değerlere kafa yormanıza gerek yok:
height:150px;text-align:center;background-color:slateblue;color:#fff;

Merakınızı giderecekse; style="" özelliğini kullanarak, DİV'in arkaplanını mor, yüksekliğini 150piksel yapıp, içeriği ortalayıp rengini beyaz yapacak css kodlarını yazdık. Eğer biraz ingilizce bilginiz varsa, zaten şimdiden css'in ne kadar basit olduğunu hissetmişsinizdir.

Dikkatinizi çektiyse, div elementi alabildiği en büyük genişliği aldı. Bulunduğu alanı enlemesine doldurdu. Eğer isteseydik, CSS kullanarak bu div'in genişliğini bile kendimiz ayarlayabilirdik.

Bu kadar! Css öğrenene kadar div mucizelerini çok fazla kurcalamayacağız. Yine de bir sonraki derse kadar oyalanmanız ve Kod Deneme Editörümüz ile pratik yapmanız için, birkaç kod örneği vermeyi ihmal etmeyeceğim:

Örnek 1(aslında ilk dersimizde bu örnek kulanılmıştı):
<div style="background-color:red;width:200px;height:150px;"><a style="color:white;">deneme</a></div>


Örnek 2:
<div style="border:2px solid black;height:150px;">
     <div style="border:2px solid red;height:100px;">
          Kutu içinde kutu
     </div>
</div> 

Örnek 3:
<div dir="rtl">
         merhaba, nasılsınız<br/>acaba?
</div>