Tek satırlı iki hücreli bir tablo oluşturuyoruz. Tablonun genişliği (width) 850 piksel uzunluğundadır.
<table align=center> şeklinde hizalama belirttiğimizde sayfa içinde tabloyu hizalamış (ortalamış) oluruz.
<tr> ve <td> HTML etiketlerinin align özelliğine değer verdiğimizde ise hücre içindekileri hizalamış oluruz. (şu anda vermedik)
Yukarıdaki iki hücreli tabloya dikkat ederseniz sayfa içinde ortalanmış durumda.
Tabloya veya Satıra veyahut hücreye yükseklik değeri vermediğimiz halde tablonun belli bir yüksekliği var.
Bunun nedeni biz yükseklik (height) değeri vermemiş olsak bile hücre içindeki nesne tablonun belli bir yükseklik almasını sağlar.
Eğer biz hücre içindeki yazı yada yazılardan birinin puntosunu (büyüklüğünü) arttırır yada azaltırsak hücre yüksekliğide buna göre değişecektir.
Biz eğer tabloya yada hücreye yükseklik verseydik ve daha sonra yazı büyüklüğünü (puntoyu) arttırsaydık tablo yüksekliğinde değişme (bozulma) olmazdı. Çünkü hücre içindekilerin ihtiyaçı olan yükseklikten daha fazla yüksekliği en başta vermiş olacaktık.
Birinci hücrenin align özelliğini sol (left) olarak veriyoruz; Hayvan resimleri ifadesi hücrenin soluna hizalanıyor.
Sol yada sağ ifadelerinden kasıt sizin ekrana bakarken ki sağınız ve solunuzdur.
ikinci hücrenin align özelliğini ise right yapıyoruz sağa hizalamak için.
Hayvan Resimleri ifadesini büyültmek için font etiketinin size özelliğine 6 değerini veriyoruz.
Önceki derslerimizden şunu hatırlayın: Html etiketleri birbirini kesemez.
HTML kodlamada dikkat etmeniz gereken husus :en son açılan etiket ilk önce kapatılmalıdır.
font etiketinin size=6 ile etkileyeceği bütün kelimelerin font etiketi arasında olması gerekir.
İnşaAllah ilerleyen derslerimizde sizlerle HTML sayfalarındaki yazılara biçim verirken CSS diye bir teknik kullanacağız.
Şu anda biçim ve büyüklük verirken font etiketini size ve face özellikleriyle kullanacağız.
Daha önce sizlere tablo davranışı diye bir ifade kullanmıştım.
Bazen tablo görüntüsü değil davranışı için table etiketini kullanırız;
Bunu table etiketinin border özelliğine sıfır değerini vererek elde ederiz.
border özelliğini daha önce img (resim) etiketinde de kullandığımızı hatırlayın.
Ekranın sağından soluna doğru ince ve siyah bir çizgi çizmek için <hr> etiketini kullanıyoruz.
Birçok HTML etiketinin alabildiği özellikler olan; align (hizalama)
color (renklendirme)
width (genişlik) Özelliklerini hr etiketi içinde kullandık.
İlk tablo gibi ikinci tablonunda align özelliğini center yapıp tablonun sayfada ortalı olmasını sağlıyoruz.
Tek satırlı ve 3 sutunlu bir tablo elde etmek için kodları yukarıdaki gibi ekledik. <tr> ....... </tr>
Nokta nokta olan yerde üç tane hücre tanımı var. hücrelerin ilk ikisinin genişliği 168 piksel dir.
üç hücreden birine yükseklik verdiğimizde diğer ikisi de otomatik olarak o yükseklikte olacaktır.
kodunu <td> ile </td> arasında kullanmamızın nedeni şudur:
içinde hiçbirşey olmayan hücreyi web tarayıcısı göstermeyecektir. O hücrenin görünmesi için yi hücre içinde kullandık.
Geçmiş derslerimizden şunu hatırlayın; kodunu birden fazla boşluk vermek istediğimizde yanyana kullanıyorduk. Web tarayıcısı birden fazla boşluk kodu kullanılarak verilmediyse birçok boşluğu tek boşluk gibi algılıyordu.
İlk hücrenin içine iki tane resim ekleyeceğiz şimdilik bir tanesini ekleyelim.
ikinci ve büyük hücreyi reklam alanı olarak düşündüm.
üçüncü hücreye de bir tane resim ekleyelim.
Şuna dikkat edin: Hücreye align (yatay hizalama) ve valign (dikey hizalama) değeri vermediğimizde,
Varsayılan yatay hizalama şekli sol tarafa doğrudur. Hücre içindeki resim sanki align=left yapmışız gibi hizalanıyor.
Dikey hizalamada geçerli değer ise middle (ortalı) dır.
Resim ne hücrenin üstüne (top) hizlanmış ne de altına (bottom) doğru hizalanmış. Biz dikey hizalamada hiçbirşey belirtmemiş olmamıza rağmen sanki valign=middle yazmışız gibi davranıyor.
Sizler <img> etiketini biliyorsunuz. Img etiketinin src özelliği ile resmin nerede olduğunu belirtiyoruz.
Eğer resim html sayfamızla aynı yerde değil bir dizinin içindeyse resmin adını direk yazmıyoruz.
Resmin adından önce içinde bulunduğu klasörün adını yazıp (kopek-1) araya slaş işareti (/) koyuyoruz.
Böylece Kopek (2).jpg dosyasının nerede olduğunu src özelliğiyle img etiketine belirtmiş olduk.
Bir yere dikkatinizi çekmek için ilk hücrenin genişlik (width) değerini 368 piksel yaptım.
önceki sayfada 1. hücrede tek resim 3. hücrede de tek resim vardı.
Şu anda geçici olarak 1. hücreyi 368 piksel genişliğine getirdim 3. hücrenin genişliğine ise dokunmadım 168 olarak duruyor.
Aynı hücreye ikinci bir resim eklediğimizde eğer hücre genişliği yeterli ise ikinci resim 1. resmin hemen yanında yer alıyor.
3. hücreye dikkat edin hücrenin genişliği 168 (yetersiz geliyor) o yüzden iki resim altlı üstlü gözüküyor.
Bir şeyi daha söyleyip sonraki aşamaya geçmek istiyorum:
<tr> etiketine align=center özelliğini verdiğimizde align=center özelliğini alan <tr> etiketinin içinde ne kadar hücre varsa (o satırdaki bütün hücreler) aynı hizalama değerini alacaktır. Burada da her üç hücrede align = center özelliğini aldı;
Yani yatay hizalamaları ortalı oldu.
Aynı hücredeki iki resim arasında <br> etiketini kullanarak aralarında bir miktar boşluk verdik.
Altlı üstlü olmalarını nedeni <br> etiketi değidlri çünkü yanyana gelmeleri için hücre genişliği yeterli değil.
ilk hücrenin genişliğini tekrar 168 piksele getirdim. Bir önceki sayfada söylediğimi tekrar söylüyorum.
Hücrenin genişliği yeterli değilse iki resim yanyana gelmez altlı üstlü olurlar.
Tablo çizgilerini kaldırmak için table etiketinin border özelliğine 0 değerini veriyoruz.
Böylece tablonun görüntüsü değil davranışını kullanmış oluyoruz.
Çoğu kez html sayfasında istediğimiz yerleşimi sağlamak için <table>....</table> etiketini kullanırız.
table etiketi içinde <tr>....</tr> alt etiketi yer alır. satır ifade eden tr etiketinin alt etiketi ise <td>....</td> dir.
Yeni bir tablo oluşturalım. Tablo iki satırdan oluşsun ve 5 sutundan meydana gelsin.
Toplamda 2 x 5 = 10 hücreli bir tablo olacak.
Fakat size 'in boş hücre içinde kullanılmasının ne demek olduğunu uygulamalı olarak göstermek istiyorum.
Aşağıdaki mavi koda dikkat ederseniz 1. satırın 3. 4. ve 5. hücrelerinde html etiketi yok.
Sonucu yukarıya bakıp görebilirsiniz. Tanımlamada hücre olmasına rağmen görüntüde 3 hücre kayıp.
Nedeni o hücreler bomboş bu yüzden tarayıcı o hücreleri göstermeye gerek duymuyor.
Bir boşluk yerine geçen olan hücreler ise görsel olarak görülebiliyor.
normalde birinci satırda 5 hücre ikinci satırda 5 hücre olmak üzere toplamda 10 hücre olması gerekirken toplam 7 hücre görülüyor.
Ayrıca,
Tabloda bir hücrenin genişliği ne ise o sutundaki bütün hücreler o genişliği alırlar.
Sadece birinci satırdaki hücrelere genişlik verilmesinin nedeni budur.
3. sutun hariç hepsi 168 piksel genişliğinde.
Yükseklik (height) belirtilmediği için varsayılan yazı büyüklüğüne göre boy alan boyundadır. ( de bir karakterdir)
Şuna dikkat ediniz. İlk satırın 1. hücresine 4 adet resim koyunca bütün hücreler en yüksek hücre olan 1. hücrenin yüksekliğine uydular.
Bir tablo hücresine yükseklik (height) verilmediğinde içindeki şeylerin ona kazandırdıracağı yükseklik (height) kadar yükseklik (height) alırlar.
Her bir resim arasına iki tane <br><br> kodu ilave edilmiştir.
Resimlerin sağa (hücre kenarına) yapışık olmalarının nedeni align (hizalama) değeri vermediğimizdendir.
Biz align belirtmediğimiz için varsayılan yatay hizalama olan left (sola hizalı) şeklini aldı.
<tr align=center> Bu koda dikkat etmenizi istiyorum;
Birinci satırdaki 4 hücrenin içindekileri ortaya hizalamak için her <td> ye align=center ilave etmedik.
Bunun yerine satıra (<tr align=center> ) hizalama özelliği verdiğimizde satırdakileri hizalamış olduk.
Bu aşamada diğer 3 hücreye de resim ekledik.
önceki sayfada olduğu gibi burada da; her hücreye eklediğimiz 4 resim genişlik yetmediğinden alt alta gelecekti.
fakat biz bunu gözlemleyemedik çünkü zaten iki resim arasında <br> <br> kodları var.
Siz resimler arasındaki br kodlarını kaldırıp olayı kendiniz gözlemleyebilirsiniz.
Arı
Aslan
At
Ayı
Balık
Balina
Baykuş
Böcek
Bufalo
Çita
Deniz Ayısı
Denizanası
Devekuşu
Dinozor
Domuz
Ejderha
Fare
Fil
Flamingo
Fok
Gergedan
Hayvan isimlerinin başında $amp;nbsp; var.
nedeni de normal boşlukla baştan bir miktar uzaklaştıramayız; boşluk ihmal edilir.
Birçok yerde bizim imdadımıza yetişir.
Font etiketimizi hatırlayın. Yazılara büyüklük (size), renk (color), yazı şekli (face) vs.. vermek istediğimizde font etiketini kullanırız.
Font etiketi de daha önceki söylediğimiz kurala uyuyor; önce açılan etiket önce kapanır.
Font etiketinden önce <td> etiketi açılmış daha sonra <font> etiketi açılmış o yüzden öncelikli olarak
Burada <font> etiketi kapanması gerekir.
Eğer başka bir hücreye daha yazı yazarsak ve onunda aynı font özelliklerine sahip olmasını istersek ilgili hücrede font etiketini tekrar açıp kapatırız.
Arı
Aslan
At
Ayı
Balık
Balina
Baykuş
Böcek
Bufalo
Çita
Deniz Ayısı
Denizanası
Devekuşu
Dinozor
Domuz
Ejderha
Fare
Fil
Flamingo
Fok
Gergedan
Herşeyde olduğu gibi font etiketinde de varsayılan bir yazı tipi vardır (face).
Biz hiçbir face belirtmeyip sadece font belirttik. Varsayılan yazı tipi (face) hoşumuza gitmedi ve değiştiriyoruz.
Ben yazı tipi diyorum ama daha doğru ifadesi yazı fontudur.
<font face="verdana" size=3> ifadesindeki verdana ile hayvan isimlerinin fontu değiştirilmiş oldu.
<td width=130 align=left valign=top> bu satıra da align ve valign ekledik.
Yazı yazdığımız hücre de yatay hizalama (align) değerini tr ye verdiğimiz ortalı (center) ifadesinden alıyordu.
Bir hücrenin dikey hizalamasının nasıl olacağı söylenmediyse varsayılan hizalama middle dır.
Biz burada valign=top ile hücrenin en üstünden hizalamaya başladık hücre içindeki boşluk yazılardan sonraya kaydı.
Diğer hayvan isimlerini de 2. satırdaki 5 hücreye yazacağız.
En üstte uyguladığımız <hr> ifadesiyle çizgi çizmeyi tekrar kullandık.
Dediğim gibi align (yatay hizalama), color (renk), width (genişlik) özellikleri birçok html etiketinde kullanılır ve br etiketini bu özellikleriyle kullandık.
web tasarımı öğrenmekten çok daha zevkli olan birşey var o da web sitesi yapmak. Hayvan Resimlerisitesini yaparken sizinle bu bilgileri paylaşmak ve sizlerin de ileride böyle siteler yapacağınızı düşünmek beni mutlu ediyor.
Sitedeki sayfalara bakarken boş bir yere sağ tıklayıp kaynağı görüntüle (view source) seçip html kodlarını inceleyebilirsiniz.
Selametle kalın.
Hayvan Resimleri
Köpek Resimleri
Arı
Aslan
At
Ayı
Balık
Balina
Baykuş
Böcek
Bufalo
Çita
Deniz Ayısı
Denizanası
Devekuşu
Dinozor
Domuz
Ejderha
Fare
Fil
Flamingo
Fok
Gergedan
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)