HTML-Ders1: HTML Nasıl Kullanılır?
HTML kolay bir dildir. Bizim kullandığımız teknik ile öğrenmek daha da kolay olacak. Ancak her şeyden önce, sabredip bu bir sayfalık yazıyı okumalısınız. Yoksa ne bu sitede, ne de başka bir sitede pek bir şey anlayamayacaksınız.
İlk dersimizde klişeleşmiş konulara (HTML in açılımı, kimlerin bulduğu vs) değinmemize gerek yok. Bu sitede bulacağınız dersler internetteki sıkıcı derslere benzemeyecek.
1-HTML Nedir?
Html bir uzantıdır. tıpkı mp3'ün bir şarkı uzantısı olması gibi, Html de bir yazı dosyası uzantısıdır. Bu yazı dosyalarını açmak için de Microsoft Word gibi, bilgisayarınızın metin editörlerini kullanabilirsiniz.
Html uzantılı dosyalar, başka bir bilgisayardan, internet yoluyla ulaşılabilir. Microsoft Word gibi programlar interneti kullanamadığı için, Tarayıcı dediğimiz programlar oluşturulmuştur. Tarayıcılar, hem internete bağlanabilen, hem de html dosyalarını gösterebilen programlardır. En çok bilinen tarayıcılar ise şunlardır:
İnternet Explorer
Mozilla Firefox
Chrome
Çoğu internet sayfası aslında bir html dosyasıdır. Siz dosyanın adresini yazarsınız, tarayıcınız o dosyayı internetten bulup açar ve size gösterir.
Php, asp gibi farklı dosyalar da var, ama bu yazıyı html öğrenmeniz için hazırladık, html öğrenmenize yaramayacak şeylerden bahsetmiyoruz.
Tarayıcılar html dosyalarını yorumlayarak gösterir. Yani html kodlarıyla hazırlanmış dosyayı alır,inceler ve nasıl görünmesi gerektiğine karar verip size gösterir.
2-HTML Kodlarını Nasıl Görebilirim?
Bir html dosyasının yorumlanmamış haline o dosyanın Kaynağı denir. HTML sayfalarının(dosyalarının) kaynakları, html kodlarından oluşur ve tarayıcınızdaki bir sayfada bir yere sağ tıklayıp Kaynağı Göster yazısına tıklamanız gerekir.
4-Nasıl HTML Dosyası Oluşturabilirim?
Yeni bir metin belgesi oluşturup açın. Dosya -> Farklı kaydet seçeneğine tıklayın ve dosya adının sonundaki .txt yerine .html yazın.
HTML-Dersi 2: HTML Etiketlerine giriş
HTML her şeyden önce bir dildir. HTML'i bir ayda öğrenilebilecek kadar kolay yapan şey ise mantığının çok 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 dil olmasına rağmen, internette göreceğiniz diğer html dersleri genelde ya karmaşık ya da sıkıcıdır. Biz ise size çok daha basit ve eğlenceli bir şekilde anlatmayı hedefliyoruz:
HTML sayfalar, aslında kümelerden (alanlardan) oluşur. Farklı özellikleri olan farklı kümeler vardır. Bunu anlamak için bir web sayfasını ele alalım:
Böyle bir sayfaya ilk baktığınızda farkedemeseniz de, 8 adet küme kullanılmıştır. Bunlardan 4ü resim kümesidir. Bunu görmek çok da zor değil çünkü zaten sayfada 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:
Bir yazı kümesi nasıl oluşturulur?
Şöyle:
Kod: Önizlemesi:
<a>Merhaba</a> Merhaba
Aslında bu basit bir Yazı Kümesidir. Peki bu kümeyi nasıl oluşturduk:
Yazı kümesinin sembolü a dır. Bu bilgiyi unutmamak zorundasınız.
Küme oluşturmak için 3 adımı izleriz:
Kümeyi açarız.
İçine yerleştireceklerimizi yerleştiririz.
Kümeyi kapatırız.Yukarıda örnek gösterdiğimiz kodu tekrar incelersek:
Peki diğer kümeleri nasıl oluşturuyoruz?
Aslında bu gayet basit. 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 kapayacaktık:
<fieldset> </fieldset>
Peki içine ne koyacaktık? Aslında 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 gibi 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.
Ö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
Bu örnekte görebileceğiniz gibi, bir önceki örnekte sol tarafa dayalı olan yazı kümesi, şimdi ortalanmış şekilde duruyor.
İleriki derslerimizde basit bir anlatımla resim kümesi dahil pek çok kümeyi inceleyeceğiz.
Son olarak, küme sembollerine kısaca etiket denilir. Her bir küme ise bir elementtir. a elementi, textarea elementi, fieldset elementi gibi...
HTML-Dersi3: Element Özellikleri
Önceki dersimizde size html'in kümelerden oluştuğunu, bu kümelere element dediğimizi söylemiştik. Ayrıca her kümenin(elementin) kendi özellikleri olduğunu da söylemiştik.
Peki bu özellikler nasıl kullanılır?
Hatırlarsanız bir element, bir açılış etiketi, bir içerik ve bir kapanış etiketi ile oluşturuluyordu.
Örneğin:
<a> Merhaba </a>
gibi.
a elementinin bir özelliğini kullanacaksak, bunu açılış etiketinin içinde kullanırız:
<a özellik="değer"> Merhaba </a>
Eğer sembolü div olan bir elemetin bir özelliğini kullanacak olsaydık, şöyle yapardık:
<div özellik="değer"> İçerik </div>
Özellik ve değer?
Örneğin a kümesinin bir özelliği href dir. href özelliği link vermeye yarar. Bu özelliğin değeri ise adres tir
Kod: Önizlemesi:
<a href="http://google.com">Merhaba</a> Merhaba
Başka bir örnek yaparsak daha iyi anlarsınız. Şimdi 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.
Burada bir başka şeye daha dikkat çekmek istiyorum. farkedeceğiniz gibi, Kodu yazarken arayaboşluklar ve boş satırlar koydum. Bunu yapmamı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?
Gayet makul bir soru. Satır atlamaya yarayan bir element var. Evet 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.
Bu da ne??
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:
HTML-Ders4: A Elementinin Özelikleri
bu dersimizde bazı elementlerin özelliklerini ve kullanım örneklerini öğreneceğiz.
Bu yazıyı bitirince 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
Öyleyse lafı fazla uzatmayalım ve dersimize başlayalım:
A Elementinin Özellikleri
Geçtiğimiz derste, her bir elementin nasıl açıldığını, element özelliklerinin nasıl eklendiğini anlatmıştık. Şimdi içinde "merhaba" yazan bir a elementi oluşturalım:
<a>Merhaba</a>
A elementinin özelliklerini şu şekilde kullandığımızı söylemiştik:
<a özellik="deger">Merhaba</a>
Şimdi a elementinin en çok kullanılan özelliklerini ve alabilecekleri değerleri tablo halinde göstermek istiyorum:
Özellik Alabileceği Değerler Örnek
name herhangi bir kelime <a name="naber"> Merhaba </a>
href link <a href="http://google.com"> Merhaba </a>
target _blank , _top , _self veya _parent <a target="_blank"> Merhaba </a>
class herhangi bir kelime <a class="naber"> Merhaba </a>
style CSS kodları <a style="text-decoration:underline;"> Merhaba </a>
title Herhangi bir yazı <a title="karşılama mesajı"> Merhaba </a>
Şimdi bu özellikleri tek tek ele alalım:
Name özelliğinin etkisi, web sayfasında doğrudan görünmez. Açıkçası 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="http://google.com">Tıkla</a> Tıkla
Ancak burada bilmeniz gereken önemli bir şey var. Eğer href değerinin başına http:// 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 http://birsite.tr.ggise, ve kod <a href="/anasayfa.html">Bir site</a> gibiyse, yazıya tıklandığında http://birsite.tr.gg/anasayfa.htmladresine 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="http://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> gibi. 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.
Bu dersimizi bunlarla sınırlı tutmamız daha iyi olacak. Biliyorum, bu yazıda öğrendikleriniz pek eğlenceli değil. Ancak bu ders mümkün olduğunca basit ve anlaşılır bir şekilde anlatıldığı için, sonraki derslerde daha yetenekli pek çok elementi, daha basit ve hızlı bir şekilde anlayabileceksiniz.
Bir sonraki dersimizde img, h1,h2,h3,h4,h5,h6 elementlerini inceleyeceğiz
HTML-Ders 5: Resim elementi ve başlık elementleri
Bu dersimizde 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="http://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.
Eğer bir resminiz varsa ve bunu internete koyup linkini edinmek istiyorsanız en basitinden http://imageshack.us a kaydolabilirsiniz.
Kod Önizlemesi
<img src="http://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="http://img851.imageshack.us/img851/5412/dth6.png" />
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="http://img851.imageshack.us/img851/5412/dth6.png" />
<img height="40" src="http://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="http://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="http://google.com"> <img src="http://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>
Merhaba
<h3>Merhaba</h3>
Merhaba
<h2>Merhaba</h2>
Merhaba
<h1>Merhaba</h1>
Merhaba
HTML-Ders 6: Tablolar
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
Özellik Değer Ne İşe Yarar? Örnek Kullanım
align left
right
center
justify hücre içindekilerin sağa sola ortaya veya her iki tarafa hizalanmasını sağlar. <td align="right"> merhaba </td>
bgcolor rgb(x,x,x)
#xxxxxx hücrenin arkaplan rengini rgb veya hex renk kodlarıyla belirler. <td bgcolor="#000000"> merhaba </td>
colspan sayı hücrenin yatay olarak kaç hücrelik yer kaplayacağını belirler. <td colspan="2"> merhaba </td>
rowspan sayı hücrenin dikey olarak kaç hücrelik yer kaplayacağını belirler. <td rowspan="8"> merhaba </td>
height piksel piksel cinsinden hücrenin yüksekliğini belirtir. <td height="40px"> merhaba </td>
width piksel piksel cinsinden hücrenin genişliğini belirtir. <td width="120"> merhaba </td>
valign top
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.
HTML-Ders 7: 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>
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:
Özellik Değer Ne İşe Yarar? Örnek Kullanım
align left
right
center
justify hücre içindekilerin sağa sola ortaya veya her iki tarafa hizalanmasını sağlar. <td align="right"> merhaba </td>
bgcolor rgb(x,x,x)
#xxxxxx hücrenin arkaplan rengini rgb veya hex renk kodlarıyla belirler. <td bgcolor="#000000"> merhaba </td>
colspan sayı hücrenin yatay olarak kaç hücrelik yer kaplayacağını belirler. <td colspan="2"> merhaba </td>
rowspan sayı hücrenin dikey olarak kaç hücrelik yer kaplayacağını belirler. <td rowspan="8"> merhaba </td>
height piksel piksel cinsinden hücrenin yüksekliğini belirtir. <td height="40px"> merhaba </td>
width piksel piksel cinsinden hücrenin genişliğini belirtir. <td width="120"> merhaba </td>
valign top
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>
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!
HTML Dersleri
