Articles by "html ders"
html ders etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
En yeni konular, en gücel haberler. En son çıkan internet haberleri. Oyun haberleri. Hepsi webtegez.blogspot.com'da..

HTML İle Web Sitesi Hazırlama.

Hayvan ResimleriKöpek Resimleri


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. 

<table border=1 width=850 align=center> 
  <tr> 
    <td> Hayvan Resimleri </td> 
    <td> Köpek Resimleri </td>
  </tr>
</table>


Hayvan ResimleriKöpek Resimleri


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. 

<table border=1 width=850 align=center>
  <tr>
    <td align=left> Hayvan Resimleri </td>
    <td align=right>Köpek Resimleri </td>
  </tr>
</table>
 


Hayvan ResimleriKöpek Resimleri


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. 

<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 ResimleriKöpek Resimleri



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. 

<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 ResimleriKöpek Resimleri


   


 İ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. 

&nbsp; 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 &nbsp; yi hücre içinde kullandık. 
Geçmiş derslerimizden şunu hatırlayın; &nbsp; kodunu birden fazla boşluk vermek istediğimizde yanyana kullanıyorduk. Web tarayıcısı birden fazla boşluk &nbsp; 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> &nbsp; </td>
    <td width=336 height=280> &nbsp; </td>
    <td width=168> &nbsp; </td>
  </tr>
 </table>

Hayvan ResimleriKöpek Resimleri


 


İ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. 

..........................
........................................
..................................................

<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 ResimleriKöpek Resimleri


   


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. 


....................
................................
.........................................

<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 ResimleriKöpek Resimleri


 

  



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. 

..........................
......................................
..............................................

<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 ResimleriKöpek Resimleri


 

  

     
     


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 &nbsp; '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 &nbsp; 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 &nbsp; 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 &nbsp; boyundadır. (&nbsp; de bir karakterdir) 

<table border=1 align=center>

  <tr>
    <td width=168> &nbsp; </td>
    <td width=168> &nbsp; </td>
    <td width=130> </td>
    <td width=168> </td>
    <td width=168> </td>
  </tr>

  <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
  </tr>

</table>


 
Hayvan ResimleriKö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. 
 
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ı. 

<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> &nbsp; </td>
      <td width=130> &nbsp; </td>
      <td width=168> &nbsp; </td>
      <td width=168> &nbsp; </td>
  </tr>
  <tr>
      <td> &nbsp; </td>
      <td> &nbsp; </td>
      <td> &nbsp; </td>
      <td> &nbsp; </td>
      <td> &nbsp; </td>
  </tr>
</table>


Hayvan ResimleriKöpek Resimleri


 

  

   
 

 

 

 

 

 

  

 

 

 

 

 

     


<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. 


...........................
.............................................
........................................................

<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> &nbsp; </td>
            <td> &nbsp; </td>
            <td> &nbsp; </td>
            <td> &nbsp; </td>
            <td> &nbsp; </td>
</tr>
</table>


Hayvan ResimleriKö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. 
 
nedeni de normal boşlukla baştan bir miktar uzaklaştıramayız; boşluk ihmal edilir. 
Birçok yerde &nbsp; 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>
            &nbsp; Arı <br> 
            &nbsp; Aslan <br>
            &nbsp; At <br>
            &nbsp; Ayı <br>
            &nbsp; Balık <br>
            &nbsp; Balina <br> 
            &nbsp; Baykuş <br>
            &nbsp; Böcek <br>
            &nbsp; Bufalo <br>
            &nbsp; Çita <br>
            &nbsp; Deniz Ayısı <br> 
            &nbsp; Denizanası <br>
            &nbsp; Devekuşu <br>
            &nbsp; Dinozor <br>
            &nbsp; Domuz <br>
            &nbsp; Ejderha <br>
            &nbsp; Fare <br>
            &nbsp; Fil <br>
            &nbsp; Flamingo <br> 
            &nbsp; Fok <br>
            &nbsp; Gergedan <br> 
    </font>
</td>
.......................
....................................
...........................................

Hayvan ResimleriKö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). 
 
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ı. 

.......................
....................................
...........................................

<td width=130 align=left valign=top> 
    <font face="verdana" size=3>
            &nbsp; Arı <br> 
            &nbsp; Aslan <br>
            &nbsp; At <br>
            &nbsp; Ayı <br>
            &nbsp; Balık <br>
            &nbsp; Balina <br> 
            &nbsp; Baykuş <br>
            &nbsp; Böcek <br>
            &nbsp; Bufalo <br>
            &nbsp; Çita <br>
            &nbsp; Deniz Ayısı <br> 
            &nbsp; Denizanası <br>
            &nbsp; Devekuşu <br>
            &nbsp; Dinozor <br>
            &nbsp; Domuz <br>
            &nbsp; Ejderha <br>
            &nbsp; Fare <br>
            &nbsp; Fil <br>
            &nbsp; Flamingo <br> 
            &nbsp; Fok <br>
            &nbsp; Gergedan <br> 
    </font>
</td>
.......................
....................................
...........................................

Hayvan ResimleriKö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 ResimleriSayfa     1   2   3


 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 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 ResimleriKö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 ResimleriSayfa     1   2   3