HTML ETİKETLERİ

Gold

Meryem Işık

ABONE OL

News

0 yorum

11,320 okunma

Okunuyor HTML ETİKETLERİ

İçindekiler

-HTML ETİKETLERİ-

Bir önceki bloğumuzda HTML Etiketlerini incelemiştik. Gelin şimdi HTML listeleme etiketlerini ve HTML tablo oluşturmayı inceleyelim

LİSTELEME ETİKETLERİ

HTML listeleme etiketleri birçok amaç için kullanılır. En çok web sitelerinin menü kısımlarında kullanılır. Yatay menüler, dikey menüler, açılır menüler vs hepsinin temelini HTML listeleme etiketleri ile oluşturuyoruz. Listeleme etiketleri temelde ikiye ayrılır. Sıralı listeler ve sırasız listeler. Sıralı ve sırasız listeler arasındaki fark; sıralı listelerde, 1, 2, 3- A, B, C gibi rakam ya da harflerle, sırasız listelerde ise madde işaretinin kullanılmasıdır.

Sıralı Listeler

Sıralı listeler oluşturuken 2 adet etiket kullanıyoruz. Bunlar ol etiketi ve li etiketidir. Bu etiketleri birlikte inceleyelim.

<ol> Etiketi

ol etiketini sıralı liste oluşturmak için kullanırız. li etiketi ise listenin her bir elemanını oluşturmak için kullanılır. Örneğin;

      <ol> //type değeri vermediğimiz için  den başladı
         <li>Denizli</li>
         <li>İstanbul</li>
      </ol>      
      <ol type="A">
         <li>Denizli</li>
         <li>İstanbul</li>
      </ol>      
      <ol type="a">
         <li>Denizli</li>
         <li>İstanbul</li>
      </ol>      
      <ol type="I">
         <li>Denizli</li>
         <li>İstanbul</li>
      </ol>      
      <ol type="i">
         <li>Denizli</li>
         <li>İstanbul</li>
      </ol>

Örnekte göründüğü üzere verdiğimiz başlangıç değerinden sonra sıralı bir şekilde sıralama işlemini gerçekleştirdi.

Sırasız Listeler

Sırasız liste oluhşturuken 2 adet etiket kullanılır. Bunlar ul ve li etiketleridir. Bu etiketleri birlikte inceleyelim.

<ul> Etiketi

ul etiketini sırasız liste oluşturmak için kullanırız. li etiketi ise ol etiketinde olduğu listenin her bir elemanını oluşturmak için kullanılır. Örneğin;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>        
      <ul>
         <li>Denizli</li>
         <li>İstanbul</li>
         <li>Ankara</li>
      </ul>      
   </body>
</html>

ul etiketine type özelliği vererek işaretçi türünü değiştirebiliriz.

disc, işaretçi yuvarlak ve içi doludur.
circle, işaretçi yuvarlak ve içi boştur.
square, işaretçi kare ve içi doludur.
none, işaretçi kullanılmaz. Örneğin;

     <ul type="disc">
         <li>Denizli</li>        
      </ul>   
      <ul type="circle">
         <li>İstanbul</li>        
      </ul> 
      <ul type="square">
         <li>Ankara</li>        
      </ul> 
      <ul type="none">
         <li>Bursa</li>        
      </ul>

Listeleme işlemlerini iç içe de yapabilriz. Yani sırasız içine sıralı ya da sıralı içine sırasız listeleme işlemlerini de yapabiliriz. Dilerseniz örnek üzerinden inceleyelim;

      <ul>
         <li>Meyveler
             <ol>
                 <li>Elma</li>
                 <li>Kivi</li>
                 <li>Kavun</li>
             </ol>
         </li>
         <li>Tatlılar
             <ol>
                 <li>Tiramisu</li>
                 <li>Sütlaç</li>
                 <li>Şekerpare</li>
             </ol>
         </li>
     </ul>

Burdaki örnekte sırasız listeleme içinde sıralı listeleme işlemini gerçekleştirdik. İsterseniz sıralı içinde sırasız listelemeyi kendiniz de deneyebilirsiniz..

HTML Tablo Oluşturma

HTML etiketlerinde tablolar <table></table> etiketleri sayesinde oluşturulur. <tr> Açılımı table row, dilimizde tablo satırı anlamına gelir. <td> Açılımı table data‘dır. Dilimizde tablo sütunları anlamına gelir. <th> Açılımı table header, tablomuza başlık vermek istediğimizde bu etiketi kullanırız. Basit bir örnek ile tablo oluşturalım.

   <table border="1"> 
         <body>
            <tr>
               <th>Ders</th>
               <th>Kerem</th>
               <th>Aslı</th>
            </tr>
             <tr>
                 <td>Türkçe</td>
                 <td>80</td>
                 <td>90<br />
                 </td>
             </tr>
             <tr>
                 <td>Mateamtik</td>
                 <td>95</td>
                 <td>85</td>
             </tr>            
         </body>
     </table>

<th> etiketleri içine yazdığımız yazılar başlıkları, <td> etiketleri sütunları, <tr> etiketleri ise satırları oluşturdu. table etiketinden sonra yazılan border sayesinde tablomuza kenarlık vverdik.Yazılan 1 rakamı ise 1 piksele eşittir.

Table etiketi ile kullanabileceğimiz özellikleri inceleyelim;

border, dış kenar çizgimizin kalınlığını belirler
width, tablomuzun piksel olarak genişliğini belirlemede kullanılır.
height, tablomuzun piksel olarak yüksekliğini belirlemede kullanılır.
bordercolor, çizgi rengini belirler.
align, verileri yatay olarak hizalamada kullanılır. Left: sola, right: sağa, center: orataya hizalar.
valign, veriyi dikey olarak hizalamada kullanılır. Top: üste, bottom: alta, middle: oraya hizalamada kulanılır.

Rowspan Nedir, Nasıl Kulanılır?

Rows satırları, rowspan ise satırların birleşimini ifade eder. Örneği beraber inceleyelim;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>        
      <table border="1" width="250" height="150" bordercolor="blue"> 
             <tr align="center">
                 <td bgcolor="pink" rowspan="2"> A</td>
                 <td bgcolor="orange">B</td>
                 <td bgcolor="green" >C</td>                 
             </tr>
             <tr align="center">                 
                 <td bgcolor="purple" >D</td>
                 <td bgcolor="darkblue">E</td>
             </tr>            
     </table> 
   </body>
</html>

Bu örnekte yukarıda verdiğimiz özellikleride kullanmaya çalıştık. Örnekte göründüğü gibi A hücresine verdiğimiz rowspan sayesinde A hücresi iki hücre yüksekliğine sahip oldu. Dilerseniz farklı hücreleri birleştirmede de kullanabilirsiniz.

Colspan Nedir, Nasıl Kullanılır?

Col, ingilizcede column ifadesinin kısaltmasıdır. Column, türkçede sütun anlamına gelir. Colspan ise sütunları birleştirme anlamına gelir. Örnek üzerinden gidelim;

<html>
   <head>
      <title> Web Odası </title>
   </head>
   <body>        
      <table border="1" width="250" height="150" bordercolor="blue"> 
             <tr align="center">
                 <td bgcolor="pink" colspan="3"> A</td>                      
             </tr>
             <tr align="center">                 
               <td bgcolor="gray">B</td>
               <td bgcolor="blue">C</td>
               <td bgcolor="purple" >D</td>
             </tr>
             <tr align="center">                 
               <td bgcolor="silver" colspan="3">E</td>            
           </tr>               
     </table> 
   </body>
</html>

Rowspan için verdiğimiz örnek üzerinde oynamalar yaptık. A hücresine verdiğimiz colspan sayesinde A h hücresinin genişliği 3 hücre genişliğinde oldu.

Bugünkü yazımızda HTML listeleme etiketlerini ve HTML tablo oluşturma etiketlerini inceledik. HTML listeleme etiketlerini budaki videodantekrar etmek istersiniz diye düşündüm.