1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

Html Dersleri 4- Tablolar Ve Listeler

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 25 Şubat 2017 tarihinde açılan konu

  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,800

    Özel Mesaj
    Selamün Aleyküm devrelerim HTML derslerinde nihayet kaldığımız yerden devam ediyoruz. Önceki dersimizde sayfaya resim ve link eklemeyi öğrenmiştik.

    1.Ders
    2.Ders
    3.Ders[Önceki Ders]


    Bu dersimizde ise sayfaya tablolar ve listeler ekleyeceğiz. Hemen başlayalım.

    1- Tablolar

    HTML sayfamıza bir tablo eklemek için ilk önce <table> etiketi ile sayfaya bir tablo oluşturacağımızı belirliyoruz.
    HTML:
    <table>
    
    </table>
    Bu "table" etiketi içine tablomuzun elemanlarını ekleyeceğiz. Bir tablo temel olarak satırlardan ve sütunlardan oluşur. Tabloya bir satır eklemek için <tr> bir sütun eklemek içinse <td> etiketi kullanılır. Şimdi bir örnek oluşturalım ve konumuz; "AYT Forumdaki Komutanlar ve Rütbeleri" olsun.
    HTML:
    <table>
    
    <tr>
    <td>Komutan Adı</td> <td>Rütbesi</td>
    </tr>
    
    <tr>
    <td>LEDÜN ABDAL</td> <td>Orgeneral</td>
    </tr>
    
    <tr>
    <td>EKE KURTGA</td> <td>TÜMGENERAL</td>
    </tr>
    
    <tr>
    <td>TILEY ŞAD</td> <td>ALBAY</td>
    </tr>
    
    <tr>
    <td>Bilge Tonyukuk</td> <td>Yarbay</td>
    </tr>
    
    <tr>
    <td>Refa</td> <td>Binbaşı</td>
    </tr>
    
    <tr>
    <td>yesevi</td> <td>Üsteğmen</td>
    </tr>
    
    </table>
    
    
    2 adet sütundan ve 6 adet satırdan oluşan bir tablo oluşturduk. Şimdi tablomuzun nasıl göründüğüne bakalım.
    [​IMG]

    Evet. Yaptığımız şeyin bir tabloyla alakası bulunmamakta. Ney eksik? Öncelikle bir tablonun satır ve sütunları birbirinden ayıran çizgileri olmalı. Bunu hemen <table> etiketine "border" parametresi ekliyoruz.
    HTML:
    <table border="3">
    "3" olarak verdiğim değeri siz artırıp azaltabilirsiniz. Şimdi tablomun nasıl göründüğüne bakıyorum:
    [​IMG]

    Şimdi gördüğünüz gibi tablom birşeye benzedi. Ama yinede daha iyi olabilir. Diyelim ki tabloma ben bir başlık tanımlamak istiyorum. Bunun için tablonun en başına tek sütunluk yeni bir satır açıyorum.
    HTML:
    <tr>
    <td>AYT Komutanlar ve Rütbeleri</td>
    </tr>
    Sonucu görelim:
    [​IMG]

    Burada bir sorun var. Oluşturduğum satırı tek bir sütuna sığdırdı ve yaptığım şey bir tablo başlığına benzemedi. Bunu düzeltmek için az önceki kodun "td" etiketine "colspan" parametresi veriyorum.

    HTML:
    <tr>
    <td colspan="2">AYT Komutanlar ve Rütbeleri</td>
    </tr>
    "colspan" parametresinin değerini "2" olarak verdim çünkü tablom 2 sütundan oluşuyordu. Bunun yanında "td" etiketini "th" olarak değiştiriyorum. Bu sayede tablo başlığım kalın ve satır içi ortalanmış olarak değiştiriyorum. Yani yazdığım kod;
    HTML:
    <tr>
    <th colspan="2">AYT Komutanlar ve Rütbeleri</th>
    </tr>
    şeklinde ve sonuç ise;
    [​IMG]

    Gayet güzel. Bunun dışında tablonun genişlik ve yüksekliğini değiştirebilirsiniz. Bunları önceki derslerde "width" ve "height" parametreleri olarak öğrenmiştik. Şimdi tablomu 350x350 olarak boyutlandırıyorum.
    HTML:
    <table border="3" width="350" height="350">
    Sonucu görelim:
    [​IMG]
    Tablonun tam olarak istediğimiz boyutta olmamasının nedeni satır sayımızın sütun sayısından fazla olması. Yine de tablomuz büyüdü, önemli olan da bu. Son olarak iki parametre daha öğrenip tablo konusunu kapatacağız devrelerim. Bu parametreler "cellpadding" ve "cellspacing" parametreleri. "Cellpadding", tablomuzdaki yazılarla yazıların bulunduğu çerçeve arasındaki uzaklığı belirler.
    HTML:
    <table border="3" width="350" height="350" cellpadding="20" >
    Oluşan görüntüyü görelim:
    [​IMG]

    Sonucumuz böyle bir grafik oldu devreler son olarak "cellspacing" parametresi ise tablodaki çerçevelerin birbirine olan uzaklığını belirler.
    HTML:
    <table border="3" width="350" height="350" cellpadding="20" cellspacing="15">
    Ve sonucumuz:
    [​IMG]

    Şeklinde oldu. Bu tür şeyleri istediğiniz gibi düzenleyebilirsiniz. Mesela tablodaki "td" etiketlerinden birini "u" etiketi içerisine alıp tablodaki yazıyı altı çizili hale de getirebilirsiniz...

    Evet devreler, tablolar konusu bitti. Şimdi geçelim listelere...

    2-Listeler
    Html listeleri; sırasız, sıralı ve tanımlama eleman listeler olarak 3 kısımda kullanılabilir.

    A-Sırasız Listeler
    Sırasız liste dediğimiz şey listenin başında madde işareti olduğu anlamına geliyor. <ul> etiketi ile sırasız bir liste oluşturacağımızı belirleriz ve daha sonra "ul" etiketi içerisine <li> etiketleri ile listemizin maddelerini ekleriz. Örnek:
    HTML:
    <h1>Meyve Listesi</h1>
    <ul>
    <li>Elma</li>
    <li>Armut</li>
    <li>Kiraz</li>
    <li>Üzüm</li>
    <li>Şeftali</li>
    </ul>
    Sonucumuz resimdeki gibidir:
    [​IMG]

    Bu resimde gördüğünüz üzere madde işareti daire şeklindedir. Bunu "type" parametresi ile değiştirebiliriz.
    HTML:
    <ul type="circle">
    
    <ul type="disc">
    
    <ul type="square">
    HTML:
    <ul type="circle">
    
    <ul type="disc">
    
    <ul type="square">
    Şeklinde 3 seçenek bulunmaktadır. Az önceki resimde "disc" varsayılan olarak belirlenmiştir. "circle" içi boş çemberi, "square" ise kareyi temsil etmektedir.

    B- Sıralı Listeler
    Liste elemanlarının başında madde işareti yerine rakamlar olur. Kullanım tarzı sırasız liste elemanıyla aynıdır. Tek fark <ul> yerine <ol> etiketininin kullanımıdır. Örnek:
    HTML:
    <h1>Meyve Listesi</h1>
    <ol>
    <li>Elma</li>
    <li>Armut</li>
    <li>Kiraz</li>
    <li>Üzüm</li>
    <li>Şeftali</li>
    </ol>
    Sonucu görelim:
    [​IMG]

    Gördüğünüz üzere madde işareti 1,2,3 şeklinde devam etmektedir. Eğer siz madde işaretinin "1" ile değil farklı bir sayıyla başlayıp devam etmesini istiyorsanız; "start" parametresi kullanabilirsiniz.
    HTML:
    <h1>Meyve Listesi</h1>
    <ol start="15">
    <li>Elma</li>
    <li>Armut</li>
    <li>Kiraz</li>
    <li>Üzüm</li>
    <li>Şeftali</li>
    </ol>
    Bu kod ile listemiz 15 üzerinden başlayacak ve devam edecektir.

    C-Tanımlama Liste Elemanı
    Öğreneceğimiz son liste grubu, tam olarak şöyle bir şey: <dl> etiketi ile bir tanımlama liste oluşturuyorsunuz, <dt> etiketi ile bir liste maddesi oluşturuyorsunuz ve daha sonra <dd> etiketi ile bu maddeyi açıklıyorsunuz. Örnek:
    HTML:
    <h1>HTML ve CSS</h1>
    
    <dl>
    <dt>HTML</dt>
    <dd>HTML web tasarımında öğrenilmesi gereken ilk dildir.</dd>
    <dt>CSS</dt>
    <dd>CSS web tasarımında öğrenilmesi gereken ikinci dildir.
    </dl>
    
    Şimdi örnekteki komutun grafiksel sonucunu görelim:
    [​IMG]

    Gördüğünüz gibi böyle bir sonuca ulaştık.

    Evet devrelerim, bu HTML dersimizin de sonuna geldik. Hızlı hızlı ilerlemeye devam ediyoruz. Herhangi bir kusurum, eksiğim veya anlamadığınız bir yer varsa yorum olarak bildirin lütfen. Ayrıca beğenilerinizi de esirgemeyin. :D İyi günler...

     
  2. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,800

    Özel Mesaj
  3. BLACK_RED_19 Atıldı

    • Guest
    Katılım:
    7 Kasım 2016
    Mesaj:
    1,363
    Alınan Beğeniler:
    845
    Meslek:
    GİZLİ

    Özel Mesaj
    Ellerine sağlık Devrem.
     
  4. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    soliderofTurkey ve ERVAH-I-EZEL bunu beğendi.
  5. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    ERVAH-I-EZEL bunu beğendi.
  6. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,800

    Özel Mesaj
    Kişiden kişiye değişir. Ben HTML'yi 1-1,5 hafta gibi öğrendim. Ancak CSS'yi öğrenirken çok kaytardım. Bu yüzden uzun sürdü öğrenmesi. Ne kadar istekli olduğuna göre değişiyor yani...
    Ayrıca bir dili biz temel ya da orta düzeyde öğreniyoruz internetteki kaynaklarla. Yüksek seviyede öğrenmek ne kadar zaman alır, işte onu bilemem...
     
    Abdulbasir ve Mundy123 bunu beğendi.
  7. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    sağolasın devrem.
     
    ERVAH-I-EZEL bunu beğendi.
    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    18
    Alınan Beğeniler:
    13

    Özel Mesaj
    ERVAH-I-EZEL bunu beğendi.
  8. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    <html>
    <head>
    <title>Pratik5.</title>
    </head>
    <body>
    <table border="1" align="center" cellpadding="0" cellspacing="0" >
    <tr>
    <td height="147" colspan="2" background="209od8m.gif" bgcolor="#00FF33"> </td>

    </tr>
    <tr>

    <td width="150" height="500" bgcolor="#66FF33"><ol type="I" title="Gayeler."><li>Savaş</li><li>yılma</li><li>Güven</li><li>Azimli OL</li><li>Yüksel</li><li>Çalış</li> </ol> <br/><br/><br/><br/><br/><font color="#FF0000" face="Arial, Helvetica, sans-serif">NE MUTLU TÜRKÜM DİYENE!!! ☾✰</font></td>

    <td width="442" height="500" bgcolor="#000000"><img src="x44mni3b.jpg" align="absmiddle"/> </td>
    </tr>

    <tr>
    <td height="147" colspan="2" background="209od8m.gif" bgcolor="#00FF33"> </td>

    </tr>



    </table>








    </body>
    </html>



    Devrelerim,üstlerim Sizce nasıl olmuş?
     
    ERVAH-I-EZEL bunu beğendi.
  9. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,800

    Özel Mesaj
    Resim olarak kendi bilgisayarındaki resmi yüklemişsin devrem. Sende olan resim bizde yok ki:(
    [​IMG]

    Yaptığın çalışma bende böyle gözüküyor devrem. Resmini internette bir resim yükleme sitesine yüklersen görebiliriz...
     
    Mundy123 bunu beğendi.
  10. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    kusura bakma devrem unutmuşum hemen yükleyeyim :)
     
    ERVAH-I-EZEL bunu beğendi.
  11. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    devrem ben hızlıresime yükledim atayımmı buraya yoksa sana otomatik olarak gelecekmi ?
     
  12. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,800

    Özel Mesaj
    Devrem bana otomatik nasıl gelsin? :) Linki atar mısın?
     
    Mundy123 bunu beğendi.
  13. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
  14. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,800

    Özel Mesaj
    Tamam devrem. Linkleri aldım ve senin HTML kodundaki ilgili yere ekledim. Hazırladığın çalışma gayet iyi olmuş. Başarılar...
     
    Mundy123 bunu beğendi.
  15. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    sağolasın devrem çalışmaya devam Allahın izni ile...
     
    ERVAH-I-EZEL bunu beğendi.
  16. Mundy123 Guest

    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    65
    Alınan Beğeniler:
    36

    Özel Mesaj
    devrem bir sorum olacak ben şimdi html'i öğrendiğim için her etiketi kavramam lazım fakat izlediğim kanal artık tabloları,<input> etiketlerini falan ekle bölmesinden yapmaya başladı.sence bendemi öyle yapmalıyım yoksa etiketleri ezberliyeyimmi ?
     
  17. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,800

    Özel Mesaj
    Ezberlemezsen kendini geliştiremezsin. İyi akşamlar...
     
    Abdulbasir ve Mundy123 bunu beğendi.
    • Guest
    Katılım:
    23 Şubat 2017
    Mesaj:
    18
    Alınan Beğeniler:
    13

    Özel Mesaj
    Korkma, sönmez bu şafaklarda yüzen al sancak;
    Sönmeden yurdumun üstünde tüten en son ocak.
    O benim milletimin yıldızıdır, parlayacak;
    O benimdir, o benim milletimindir ancak.

    Çatma, kurban olayım, çehrene ey nazlı hilal!
    Kahraman ırkıma bir gül... Ne bu şiddet, bu celal?
    Sana olmaz dökülen kanlarımız sonra helal;
    Hakkıdır, Hakk'a tapan, milletimin istiklal.

    Ben ezelden beridir hür yaşadım, hür yaşarım.
    Hangi çılgın bana zincir vuracakmış? Şaşarım!
    Kükremiş sel gibiyim: Bendimi çiğner, aşarım;
    Yırtarım dağları, enginlere sığmam taşarım.

    Garb'ın afakını sarmışsa çelik zırhlı duvar;
    Benim iman dolu göğsüm gibi serhaddim var.
    Ulusun, korkma! Nasıl böyle bir imanı boğar,
    ''Medeniyet!'' dediğin tek dişi kalmış canavar?

    Arkadaş! Yurduma alçakları uğratma sakın;
    Siper et gövdeni, dursun bu hayasızca akın.
    Doğacaktır sana va'dettiği günler Hakk'ın...
    Kim bilir, belki yarın, belki yarından da yakın.

    Bastığın yerleri ''toprak!'' diyerek geçme, tanı!
    Düşün altındaki binlerce kefensiz yatanı.
    Sen şehid oğlusun, incitme, yazıktır, atanı:
    Verme, dünyaları alsan da, bu cennet vatanı.

    Kim bu cennet vatanın uğruna olmaz ki feda?
    Şüheda fışkıracak toprağı sıksan, şüheda!
    Canı, cananı, bütün varımı alsın da Huda,
    Etmesin tek vatanımdan beni dünyada cüda.

    Ruhumun senden İlahi şudur ancak emeli:
    Değmesin ma'bedimin göğsüne na-mahrem eli;
    Bu ezanlar -- ki şehadetleri dinin temeli --
    Ebedi, yurdumun üstünde benim inlemeli.

    O zaman vecd ile bin secde eder -- varsa -- taşım;
    Her cerihamda, İlahi, boşanıp kanlı yaşım,
    Fışkırır ruh-i mücerred gibi yerden na'şım!
    O zaman yükselerek Arş'a değer, belki, başım.

    Dalgalan sen de şafaklar gibi ey şanlı hilal!
    Olsun artık dökülen kanlarımın hepsi helal.
    Ebediyyen sana yok, ırkıma yok izmihlal:
    Hakkıdır, hür yaşamış, bayrağımın hürriyet;
    Hakkıdır, Hakk'a tapan, milletimin istiklal.
     
  18. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,800

    Özel Mesaj
    Neden istiklal marşını buraya yazdın anlamadım ama yine de saol biraz iyi geldi:)
     

Bu Sayfayı Paylaş