# HTML ETİKETLERİ

Kaynak: https://webodasi.com/html-etiketleri-html-listeleme-etiketleri-2/
Yazar: Meryem Işık
Yayın: 2020-06-15
Güncelleme: 2020-07-14

## -HTML ETİKETLERİ-

 

Bir önceki bloğumuzda  **[HTML Etiketlerini](https://webodasi.com/html-etiketleri/)** 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>
```

 

![ol etiketi](https://webodasi.com/wp-content/uploads/2020/06/ol.png)

 

Ö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 etiketi](https://webodasi.com/wp-content/uploads/2020/06/ul.png)

 

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

 

![](https://webodasi.com/wp-content/uploads/2020/06/ultype-1.png)

 

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

 

![](https://webodasi.com/wp-content/uploads/2020/07/1-5.png)

 

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

 

![Table etiketi](https://webodasi.com/wp-content/uploads/2020/06/tablo.png)

 

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

 

![rowspan](https://webodasi.com/wp-content/uploads/2020/06/rowspan.png)

 

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

 

![](https://webodasi.com/wp-content/uploads/2020/06/colspan-1.png)

 

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](https://www.youtube.com/watch?v=faQM8OYGm98)** [videodan](https://www.youtube.com/watch?v=faQM8OYGm98)tekrar etmek istersiniz diye düşündüm.