Html Dersleri 4- Tablolar Ve Listeler

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.


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:


Ş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:


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;


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:

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:


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:


Ş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:


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:


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:


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. İyi günler...

 

Manidar Mundy123 43tcvatantc43 D1sLaNSeLoT Trigged xEmre Cyber_Doctor_TR
Buraya gelin devreler...

 

Ellerine sağlık Devrem.

 

devrem youtubeden falan bunları öğrendim ama yinede ellerine sağlık iyi anlatmışsın.

 

devrem birde bir şey soracağım sadece html proglamlama dilini öğrenmek ortalama kaç günde veya kaç haftada biter söylersen sevinirim...

 

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

 

sağolasın devrem.

 

okudum Er im

 

<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ş?

 

Resim olarak kendi bilgisayarındaki resmi yüklemişsin devrem. Sende olan resim bizde yok ki


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

 

kusura bakma devrem unutmuşum hemen yükleyeyim

 

devrem ben hızlıresime yükledim atayımmı buraya yoksa sana otomatik olarak gelecekmi ?

 

Devrem bana otomatik nasıl gelsin? Linki atar mısın?

 

Tamam devrem. Linkleri aldım ve senin HTML kodundaki ilgili yere ekledim. Hazırladığın çalışma gayet iyi olmuş. Başarılar...

 

sağolasın devrem çalışmaya devam Allahın izni ile...

 

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 ?

 

Ezberlemezsen kendini geliştiremezsin. İyi akşamlar...

 

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.

 

Neden istiklal marşını buraya yazdın anlamadım ama yine de saol biraz iyi geldi