HTML’de Tablolar Oluşturmak

09 03 , 2015 Yorum Yapılmamış

Tablolar ile web sitenizin içeriğini daha organize hale getirebilir, farklı bilgiler ekleyebilirsiniz.

Tabloları oluşturmak için 3 temel etiket kullanıyoruz:

  • <table> :tablo oluşturmak için
  • <tr> :tabloda satırlar oluşturmak için
  • <td> :hücreleri oluşturmak için

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.

Örnek web sayfasının “body” bölümüne aşağıdaki kodu yazarak siz de ilk tablonuzu oluşturabilirsiniz.

<table border=1>
    <tr>
        <td>Satır 1, Hücre 1</td>
        <td>Satır 1, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 2, Hücre 1</td>
        <td>Satır 2, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 3, Hücre 1</td>
        <td>Satır 3, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 4, Hücre 1</td>
        <td>Satır 4, Hücre 2</td>
    </tr>
</table>

Bu HTML kodu ile aşağıdaki gibi bir sonuç oluşturduysanız devam daha detaylı incelemeye geçebiliriz.

Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1 Satır 2, Hücre 2
Satır 3, Hücre 1 Satır 3, Hücre 2
Satır 4, Hücre 1 Satır 4, Hücre 2

 

  • “border” niteliği tablonun kenarlıklarını belirler. “border=0″ ile kenarlıksız tablolar oluşturursunuz.

Tablolara Başlık Eklemek

Tablolara başlık satırı eklemek için hücreler oluşturmak için kullanılan <td> etiketi yerine, <th> etiketini kullanılır. Aşağıdaki örneği siz de “body” ögesinin içine yerleştirin.

<table border=1>
    <tr>
        <th>İsim</th>
        <th>Ücret</th>
    </tr>
    <tr>
        <td>Bisiklet</td>
        <td>1000 TL</td>
    </tr>
    <tr>
        <td>Paten</td>
        <td>200 TL</td>
    </tr>
</table>

Sonuç ise aşağıdaki gibi olacaktır.

İsim Ücret
Bisiklet 1000 TL
Paten 200 TL

 

Hücre büyüklüğü ve hücreler arası boşlukları ayarlamak

Hücreni büyüklüğünü “cellpading” hücrelerin arasındaki boşluğu “cellspacing” ayarlayan niteliklerdir.

<table border="1" cellpadding="5" cellspacing="5">

şeklinde <table> etiketi içinde düzenlenirler.

Tablolarda satır ve sütunları birleştirme

“colspan” ve “rowspan” niteliklerini kullanarak tablolarda sırasıyla sütun ve satırları birleştirebilirsiniz.

Aşağıdaki örnek tabloyu oluşturan kodları siz de örnek web sayfanızda deneyebilirsiniz.

<table border="1">
    <tr>
       <th>Sütun 1</th>
       <th>Sütun 2</th>
       <th>Sütun 3</th>
    </tr>
    <tr>
        <td rowspan="2">Satır 1, Hücre 1</td>
        <td>Satır 1, Hücre 2</td>
        <td>Satır 1, Hücre 3</td>
     </tr>
     <tr>
        <td>Satır 2, Hücre 2</td>
        <td>Satır 2, Hücre 3</td>
     </tr>
     <tr>
        <td colspan="3">Satır 3</td>
     </tr>
</table>

Yukarıdaki örnek kod aşağıdaki tabloyu oluşturur:

Sütun 1 Sütun 2 Sütun 3
Satır 1, Hücre 1 Satır 1, Hücre 2 Satır 1, Hücre 3
Satır 2, Hücre 2 Satır 2, Hücre 3
Satır 3

 

Bunlar dışından da tablolarda aşağıdaki özellikleri kullanabilirsiniz:

  • “bgcolor”: Bu nitelikle bütün tabloya ya da tek bir hücreye arka plan rengi ekleyebilirsiniz.
<table border="1" bordercolor="green" bgcolor="yellow">
  • “background” : Bu nitelikle arkaplan görüntüsü ekleyebilirsiniz.
  • “bordercolor” : Bu nitelikle kenarlıkların rengini değiştirebilirsiniz.
  • “width” ve “height” nitelikleri ile piksel veya ekranda kapladığı alanın yüzdesi olarak girerek hücrelerin ve tablonun boyutunu değiştirebilirsiniz.

Web Sitesine Görüntü Nasıl Eklenir?

09 03 , 2015 Yorum Yapılmamış

HTML’de sadece yazılarla oluşturulmuş bir site biraz sıkıcı olabilirdi. İnternette sitelere nasıl resimleri eklendiğine beraber bakalım.

HTML dökümanına imaj eklemek için <img> etiketi şu şekilde kullanılır:

<img src="images/ornek1.gif" width="120" height="90" alt="HTML Dog">

src niteliği tarayıcıya görüntüyü nerede bulabileceğini söyler. Tıpkı linklerde kullanılan <a> etiketi gibi bir linki, yukarıdaki gibi bilgisayarınızdan bir dosyayı gösterebilir.

width ve height nitelikleri ise sırasıyla görüntünün genişliğini ve yüksekliğini tanımlar. Bu nitelikleri belirlemeden resim yüklenirse görüntünün tamamını yükleyecektir. Yazdığınızda ise istenilen boyutlarda sonuç verir.

alt niteliği ise sitenize giren kullanıcılar için görüntünüzün tanımını verir ve görme engelli kullanıcılar için de okuyucu programlar sayesinde imajın tanımını verir.

  • <img> etiketi bir içeriği çevrelemediği için kapatma etiketine de ihtiyaç yoktur.
  • Web sitelerinde kullanılan görüntüler genelde JPEG, PNG veya GIF formatındadır. PNG en yüksek kaliteye ve sıkıştırma oranına sahiptir ancak bazı eski tarayıcılar tarafından desteklenmeyebilir. JPEG daha çok fotoğraf gibi görüntülerde kullanılır. GIF ise az renk seçeneği nedeniyle düşük boyutludur ve kalitesi de düşüktür.
  • Kullanıcılar web sitelerini her zaman daha hızlı kullanmak isterler ve ultra yüksek çözünürlükler hızı yavaşlatır. Görüntüleri web sitenize yüklerken en uygun kalite ve hız dengesini yakalamaya çalışmanız en uygunu olacaktır.

 

HTML’de Linkler

09 03 , 2015 Yorum Yapılmamış

HTML’de ilk H ve T harfleri Hypertext’in kısaltmasıdır. Hypertext ise linklerden oluşmuş metin anlamına gelmektedir. HTML de linkleri kullanarak yazılan web sayfaları için tasarlanmıştır. İnternetin birbirine bağlı yapısı da linklerden gelmekte olduğu için linkler bulunmayan bir web sitesi düşünülemez. Şimdi web sitenize linkleri nasıl yerleştireceğinizi beraber inceleyelim.

Çapa(anchor) etiketi de denen link etiketi <a> ile belirlenir ve linkin adresi de bu etiket içine yazılır.

<!DOCTYPE html>
<html>

<head>
    <title>İlk Sayfam</title>
</head>

<body>

    <h1>Bu benim ilk web sayfam</h1>

    <h2>Bu site neden yapılmıştır?</h2>
    <p>HTML öğrenmek için</p>

    <h2>Where to find the tutorial</h2>
    <p><a href="http://www.vidobu.com">Vidobu</a></p>

</body>

</html>

Linkin adresi “href” niteliği kullanılarak belirlenmiştir. Link örnekteki gibi tamamen farklı olabileceği gibi sayfanıza bağlı da olabilir.

Örnek dosyanızla aynı klasörde bir başka .hmtl dosyasını aşağıdaki gibi ekleyebilirsiniz.

 <a href="ogrendiklerim.html">HTML'de neler öğrendim?</a>

Aynı zamanda aynı sayfa içindeki başlıklara da link verebilirsiniz. Bunun için öncelikle başlığa “id” niteliği kimlik oluşturmanız gereklidir. Sonra başına kare(#) koyarak kimlikle link verebilirsiniz.

<h2 id="baslik2">HTML'de Başlıklar</h2>
<a href="#baslik2">Başlıklar için tıklayınız.</a>

HTML ile Listeler Oluşturmak

09 03 , 2015 Yorum Yapılmamış

Web sayfanızdaki metinleri düzenlemede listeler önemlidir. HTML ile üç farklı tip liste oluşturabilirsiniz:

  • Sırasız liste
  • Sıralı liste
  • Tanım listesi

İlk iki listeyi bu yazıda inceleyeceğiz. Tanım listelerini öğrenmek için o bölüme geçebilirsiniz.

Sıralı ve sırasız listeler tamamen aynı şekilde çalışır. Ancak sırasız listelerde “nokta” gibi elemanlarla maddeler gösterilirken, sıralı listelerde sayılar veya harfler kullanılır.

<ul> etiketi sırasız listeler(unordered list), <ol> etiketi ise sıralı listeler(ordered list) için kullanılır. Her iki listenin içindeki maddeler <li> etiketi içine yazılır.

Sırasız Liste

Aşağıdaki kod ile sırasız liste hazırlayalım.

<!DOCTYPE html>

<html>

<head>
    <title>İlk sayfam.</title>
</head>

<body>
    <h1>Bu benim ilk web sayfam.</h1>

    <h2>Ne için yapılmıştır?</h2>
    <ul>
        <li>HTML öğrenmek için</li>
        <li>Öğrendiklerimi göstermek için</li>
        <li>Bilgisayarımda HTML'in nasıl çalıştığını görmek için</li>
    </ul>

</body>

</html>

İşte sırasız listemizi gerçekleştirdik. Şimdi bir de sıralı liste ekleyelim. Listeler bölümünü aşağıdaki gibi değiştirelim:

<ul>
    <li>HTML öğrenmek için</li>
    <li>Öğrendiklerimi göstermek için
        <ol>
            <li>Patronuma</li>
            <li>Arkadaşlarıma</li>
            <li>Kedime</li>
        </ol>
    </li>
    <li>Bilgisayarımda HTML'in nasıl çalıştığını görmek için</li>
</ul>

İşte sırasız bir liste içinde sıralı listeyi hazırladık.

HTML’de Başlıklar ve Metin Düzenleme

09 03 , 2015 Yorum Yapılmamış

Bir önceki yazımızda <p> etiketiyle paragrafları oluşturmaya değinmiştik. Şimdi de metin düzenlemeye başlıklarla devam edelim.

Başlıkların büyüklükleri ve önem sırasına göre 6 farklı başlığımız var. h1, h2, h3, h4, h5 ve h6 etiketleri ile başlıkları sıralayabilirsiniz. h1 en fazla öneme ve h6 en az öneme sahiptir.

Bir önceki örneğe şimdi de başlıklar ekleyip değiştirelim:

<!DOCTYPE html>
<html>

<head>
    <title>İlk Sayfam</title>
</head>

<body>
    <h1>Bu benim ilk web sayfam.</h1>

    <h2>Sayfada neler var?</h2>
    <p>Basit HTML kodları ile oluşturulmuş basit bir web sitesi.</p>

    <h3>Neden yapılmıştır?</h3>
    <p>HTML öğrenmek için yapılmıştır.</p>
</body>

</html>
  •  <h1> etiketinin her sayfada yalnızca bir kez kullanılması sayfa yapısı açısından önemlidir.
  • Başlıkları yazıların vurgusunu arttırmak için kullanmayın. Başlıklar arama motorları açısından önemlidir.