HTML İle Web Sitesi Hazırlama.
| Hayvan Resimleri | Köpek Resimleri |
Tek satırlı iki hücreli bir tablo oluşturuyoruz. Tablonun genişliği (width) 850 piksel uzunluğundadır.
|
<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.
<table border=1 width=850 align=center>
<tr>
<td> Hayvan Resimleri </td>
<td> Köpek Resimleri </td>
</tr>
</table>
| Hayvan Resimleri | Köpek Resimleri |
Birinci hücrenin align özelliğini sol (left) olarak veriyoruz; Hayvan resimleri ifadesi hücrenin soluna hizalanıyor.
|
ikinci hücrenin align özelliğini ise right yapıyoruz sağa hizalamak için.
<table border=1 width=850 align=center>
<tr>
<td align=left> Hayvan Resimleri </td>
<td align=right>Köpek Resimleri </td>
</tr>
</table>
| Hayvan Resimleri | Köpek Resimleri |
Hayvan Resimleri ifadesini büyültmek için font etiketinin size özelliğine 6 değerini veriyoruz.
|
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.
<table border=1 width=850 align=center>
<tr>
<td align=left> <font size=6 > Hayvan Resimleri </font> </td>
<td align=right> <font size=6 > Köpek Resimleri </font> </td>
</tr>
</table>
| Hayvan Resimleri | Köpek Resimleri |
Daha önce sizlere tablo davranışı diye bir ifade kullanmıştım.
|
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.
<table border=0 width=850 align=center>
<tr>
<td align=left> <font size=6 > Hayvan Resimleri </font> </td>
<td align=right> <font size=6 > Köpek Resimleri </font> </td>
</tr>
</table>
<hr color=black width=850 align=center>
| Hayvan Resimleri | Köpek Resimleri |
| İlk tablo gibi ikinci tablonunda align özelliğini center yapıp tablonun sayfada ortalı olmasını sağlıyoruz. |
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.
<table border=0 width=850 align=center>
<tr>
<td align=left> <font size=6 > Hayvan Resimleri </font> </td>
<td align=right> <font size=6 > Köpek Resimleri </font> </td>
</tr>
</table>
<hr color=black width=850 align=center>
<br>
<table border=1 align=center>
<tr>
<td width=168> </td>
<td width=336 height=280> </td>
<td width=168> </td>
</tr>
</table>
| Hayvan Resimleri | Köpek Resimleri |
 |  |
İlk hücrenin içine iki tane resim ekleyeceğiz şimdilik bir tanesini ekleyelim.
|
üçü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.
..........................
........................................
..................................................
<table border=1 align=center>
<tr>
<td width=168> <img src="kopek-1/Kopek (2).jpg"> </td>
<td width=336 height=280> </td>
<td width=168> <img src="kopek-1/Kopek (3).jpg"> </td>
</tr>
</table>
| Hayvan Resimleri | Köpek Resimleri |
| |   |
Bir yere dikkatinizi çekmek için ilk hücrenin genişlik (width) değerini 368 piksel yaptım.
|
Ş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.
....................
................................
.........................................
<table border=1 align=center>
<tr align=center>
<td width=368> <img src="kopek-1/Kopek (2).jpg"> <img src="kopek-1/Kopek (3).jpg"> </td>
<td width=336 height=280> </td>
<td width=168> <img src="kopek-1/Kopek (4).jpg"> <img src="kopek-1/Kopek (5).jpg"> </td>
</tr>
</table>
| Hayvan Resimleri | Köpek Resimleri |
| | |
Aynı hücredeki iki resim arasında <br> etiketini kullanarak aralarında bir miktar boşluk verdik.
|
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.
..........................
......................................
..............................................
<table border=0 align=center>
<tr align=center>
<td width=168> <img src="kopek-1/Kopek (2).jpg"> <br><br> <img src="kopek-1/Kopek (3).jpg"> </td>
<td width=336 height=280> </td>
<td width=168> <img src="kopek-1/Kopek (4).jpg"> <br><br> <img src="kopek-1/Kopek (5).jpg"> </td>
</tr>
</table>
| Hayvan Resimleri | Köpek Resimleri |
| | |
Yeni bir tablo oluşturalım. Tablo iki satırdan oluşsun ve 5 sutundan meydana gelsin.
|
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)
<table border=1 align=center>
<tr>
<td width=168> </td>
<td width=168> </td>
<td width=130> </td>
<td width=168> </td>
<td width=168> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
| Hayvan Resimleri | Köpek Resimleri |
| | |
    | ||||
Ş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.
|
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ı.
<table border=1 align=center>
<tr>
<td width=168>
<img src="kopek-1/Kopek (6).jpg">
<br><br>
<img src="kopek-1/Kopek (7).jpg">
<br><br>
<img src="kopek-1/Kopek (8).jpg">
<br><br>
<img src="kopek-1/Kopek (9).jpg">
</td>
<td width=168> </td>
<td width=130> </td>
<td width=168> </td>
<td width=168> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
| Hayvan Resimleri | Köpek Resimleri |
| | |
| |     |     |     | |
<tr align=center> Bu koda dikkat etmenizi istiyorum;
|
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.
...........................
.............................................
........................................................
<table border=1 align=center>
<tr align=center>
<td width=168>
<img src="kopek-1/Kopek (6).jpg">
<br><br>
<img src="kopek-1/Kopek (7).jpg">
<br><br>
<img src="kopek-1/Kopek (8).jpg">
<br><br>
<img src="kopek-1/Kopek (9).jpg">
</td>
<td width=168>
<img src="kopek-1/Kopek (10).jpg">
<br><br>
<img src="kopek-1/Kopek (11).jpg">
<br><br>
<img src="kopek-1/Kopek (12).jpg">
<br><br>
<img src="kopek-1/Kopek (13).jpg">
</td>
<td width=130> </td>
<td width=168>
<img src="kopek-1/Kopek (14).jpg">
<br><br>
<img src="kopek-1/Kopek (15).jpg">
<br><br>
<img src="kopek-1/Kopek (16).jpg">
<br><br>
<img src="kopek-1/Kopek (17).jpg">
</td>
<td width=168>
<img src="kopek-1/Kopek (18).jpg">
<br><br>
<img src="kopek-1/Kopek (19).jpg">
<br><br>
<img src="kopek-1/Kopek (20).jpg">
<br><br>
<img src="kopek-1/Kopek (21).jpg">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
| 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 | | |
Hayvan isimlerinin başında $amp;nbsp; var.
|
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.
.......................
....................................
...........................................
<td width=130>
<font size=3>
Arı <br>
Aslan <br>
At <br>
Ayı <br>
Balık <br>
Balina <br>
Baykuş <br>
Böcek <br>
Bufalo <br>
Çita <br>
Deniz Ayısı <br>
Denizanası <br>
Devekuşu <br>
Dinozor <br>
Domuz <br>
Ejderha <br>
Fare <br>
Fil <br>
Flamingo <br>
Fok <br>
Gergedan <br>
</font>
</td>
.......................
....................................
...........................................
| 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 | | |
Herşeyde olduğu gibi font etiketinde de varsayılan bir yazı tipi vardır (face).
|
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ı.
.......................
....................................
...........................................
<td width=130 align=left valign=top>
<font face="verdana" size=3>
Arı <br>
Aslan <br>
At <br>
Ayı <br>
Balık <br>
Balina <br>
Baykuş <br>
Böcek <br>
Bufalo <br>
Çita <br>
Deniz Ayısı <br>
Denizanası <br>
Devekuşu <br>
Dinozor <br>
Domuz <br>
Ejderha <br>
Fare <br>
Fil <br>
Flamingo <br>
Fok <br>
Gergedan <br>
</font>
</td>
.......................
....................................
...........................................
| 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 | | |
| Geyik Hampster Hindi Iguana İnek Jaguar Kanguru Kaplan Kaplumbağa Kartal Kaz | Keçi Kedi Kertenkele Kirpi Koala Kelebek Koyun Köpek Köpek Balığı Kuğu Kurbağa |
| Hayvan Resimleri / Köpek Resimleri | Sayfa 1 2 3 |
| Diğer hayvan isimlerini de 2. satırdaki 5 hücreye yazacağız. |
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 Resimleri sitesini 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 | | |
| Geyik Hampster Hindi Iguana İnek Jaguar Kanguru Kaplan Kaplumbağa Kartal Kaz | Keçi Kedi Kertenkele Kirpi Koala Kelebek Koyun Köpek Köpek Balığı Kuğu Kurbağa | Koyun Köpek Köpek Balığı Kuğu Kurbağa Kurt Kuş Lama Lemur Leopar Maymun | Ördek Örümcek Panda Panter Papağan Pelikan Penguen Rakun Sincap Sinek Kuşu Tarantula | Tavşan Tavuk Tilki Timsah Yarasa Yavru Kuzu Yılan Yunus Zebra Zürafa |
| Hayvan Resimleri / Köpek Resimleri | Sayfa 1 2 3 |
Post A Comment:
0 comments: