Ders 02: HTML’de Tablolar, Başlıklar, Resim etiketi, CSS Yazma ve Çağırma

CSS Eğitim & Dersler HTML Programlama
YouTube üzerinde dersin anlatımı

İkinci dersimizde HTML etiketleme dili ile oluşturulan tabloları açıklayacağız. Gün geçtikçe tablolar yerine tabloya dönüştürülmüş div’lerin kullanımı artsa da düzen bakımından oldukça zorlanıldığı da yeni sistem açısından göz ardı edilemez bir gerçektir. Tabloları oluşturmanın ve biçimlendirmenin en kolay yolu <table> etiketi ile çalışmaktır.

Önce aşağıda bir sayfa oluşturalım ve bu sayfa üzerinden anlatıma devam edelim.
tablolar.html dosyası içeriği:

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tablolar</title>
    <link rel="stylesheet" type="text/css" href="css/stilim.css">

</head>

<body>
    <h1>Öğrenci Notları</h1><br>
 
    <table style="border: 2px solid #000">
        <tr>
            <th style="width: 250px">Öğrenci Adı</th>
            <th>Vize Notu</th>
            <th>Final Notu</th>
            <th>Ortalaması</th>
        </tr>
        <tr>
<td><a href="https://www.facebook.com/datahavuz">Umut Keskin</a></td>
            <td>50</td>
            <td>70</td>
            <td>64</td>

        </tr>

        <tr>
            <td>Ali bey</td>
            <td>60</td>
            <td>80</td>
            <td>74</td>

        </tr>

    </table>
    <br>
    <img src="img/notlar_yarin.jpg" style="width:200px;">
</body>

</html>

<title> .. .</title> etiketleri arasına Tablolar yazarak sayfamızın başlığını belirledik ve tarayıcıda görünecek olan başlık olarak ayarladık.

<link rel="stylesheet" type="text/css" href="css/stilim.css">

Yukarıdaki satır ile sayfa içeriğini etkileyecek bir dosya bağlantısı oluşturduk. rel niteliği ile bunun bir stil dosyası olduğunu. type niteliği ile de bu dosya tipinin yazı formatında bir CSS dosyası olduğunu ifade ettik.

Şimdi CSS dosyamızı oluşturup css/ dizini altına kaydedelim.

stilim.css dosyası içeriği:

th {
    text-align: center;
    width: 100px;
    font-weight: 200;
    color: #ffffff;
    background-color: #000000;
}

td {
    text-align: center;
    border: 1px solid #000000;
    color: red;
    font-weight: bold;
}

Yukarıdaki biçimlendirme kodlarında tablo başlıkları (th) için sırasıyla:

– Yazıyı ortala,
– Genişlik 100 piksel olsun,
– Yazı kalınlığını ince yap (200 değeri ince yapar. 500-600 gibi değerler ise yazıyı kalınlaştırır. Ya da kalın yazı için
bold, daha da kalın için bolder kullanılabilir),
– Arka plan rengini (background-color) siyah yap,
– Yazı rengini beyaz yap
.

komutlarını verdik.
Aynı şekilde (takip eden satırlardaki) <td> hücreleri için de:

– Yazıyı ortala
– 1 piksel genişliğinde, çizgisel ve siyah renkli kenarlık yap,
– Kırmızı renkle yaz,
– Yazılar kalın olsun.


komutlarını verdik.

 <h1>Öğrenci Notları</h1>

Üstteki satırımızda sayfa içerisinde görünür bir başlık oluşturduk. Bunu title ile karıştırmayalım. Title, görünen bir başlık değildir ve sayfa içinde kafa kısmında (head) yer alır. Gövdede (body) değil!
Bu başlığı en üst düzey başlık olarak ayarladık. HTML başlıkları, düzeylerine göre altı kademedir. Yani H1, H2, H3, H4, H5 ve H6 olmak üzere altı adet “header” etiketimiz mevcuttur. Numarası arttıkça yazı boyutu varsayılan olarak küçülür. Elbette istediğiniz başlık etiketini yine CSS stillendirmesi ile istediğiniz boyutta yazabilirsiniz.

Şimdi gelelim tablomuza:

  <table style="border: 2px solid #000">
        <tr>
            <th style="width: 250px">Öğrenci Adı</th>
            <th>Vize Notu</th>
            <th>Final Notu</th>
            <th>Ortalaması</th>
        </tr>

        <tr>
<td><a href="https://www.facebook.com/datahavuz">Umut Keskin</a></td>
            <td>50</td>
            <td>70</td>
            <td>64</td>
       </tr>

        <tr>
            <td>Ali bey</td>
            <td>60</td>
            <td>80</td>
            <td>74</td>
        </tr>

    </table>

<table> etiketi ile tablomuzu açtık. Ve bu etiketimizin style niteliğine border: 2px solid #000 yazmak suretiyle tablomuzun dış kenarlığını 2 piksel kalınlığında, çizgisel ve siyah renkli olmak üzere ayarladık.

<tr>….</tr> etiketleri arasına tabloya gelecek her bir satırı yazdık. Yani bu etiket o tabloda 4 çift var ise 4 satırdan oluştuğunu söyleyebiliriz. Bu etiket “table row” (tablo satırı) olarak bilinmektedir. Şimdi de birinci satır ile ikinci satır arasındaki farktan bahsedelim.
2. satırda başlayan tr etiketi ile 9.satırda başlayan tr etiketi içerikleri görüldüğü gibi farklıdır. 2. satır başlayınca içeriğe <th> (table header / tablo başlığı) dahil olmuştur. Başka bir deyişle tabloların ilk satırlarında genelde tablo başlıkları (th) yazılır.
9. satırda olduğu gibi takip eden satırlarda ise <tr> satırların içine <td> tablo hücreleri yazılır.

Tüm tablo hücreleri ve satırlar kapatıldıktan sonra table etiketi de mutlaka kapatılmalıdır.

Örneğimizde (tablolar.html) üçüncü satırda bir stillendirme vardır ve width: 250px şeklinde tablo başlığı genişliği ayarlanmıştır. Bu durumda ilgili hücrenin altına gelecek olan her hücre bu stilden etkilenecektir. Yani th’nin altına gelen her <td> hücresi için ayrıca genişlik ayarlamak için stillendirmeye gerek kalmayacaktır.

Bu dersimizde bir de sayfaya fotoğraf ya da resim eklemeyi anlattık. Resim (image) eklemek için <img> etiketini kullanıyoruz. Yine resmin kaynağını belirtmemiz gerekiyor. Bunun için de nitelik (attribute) olarak src kullanıyor ve kaynak (source) belirtiyoruz.
Bir örnekle gösterelim:

<img src="https://im.haberturk.com/2019/01/03/ver1546516339/2280520_810x458.jpg" alt="Milli Eğitim Bakanlığı logosu 810px-458px ebatlarında">

Yukarıdaki kod eksiksiz yazıldığında, sayfamızdaki görüntüsü şu şekilde olacaktır:

MEB Logosu

Burada src -bahsettiğimiz gibi- kaynak anlamına gelir ve dosya neredeyse o yolu tarif etmeliyiz. Nitelik (attribute) olarak bulunan alt parametresi ise “Alternative text” (alternatif yazı) anlamına gelir ve ilgili görselin bulunamaması ya da yüklenememesi durumunda resmin yerinde gösterilir. Arama motorları resimlerdeki alternatif metin öğesine önem vermektedir.
Bu derslik bu kadar.
Sorularınız varsa lütfen sayfanın altından bırakınız.