[HTML] Ders 3 | Tablo Yapısını Ve Link Ekleme

Hyuna Akali

Full Stack Developer
Grafiker
Usta Üye
Editör
Mesaj
727
Çözümler
20
Beğeni
584
Puan
839
Merhabalar,

NOT: Bugünki derste dosyamızı index.html olarak kaydettik. Çünkü bir sunucuda tarayıcı ilk başta index.html'i çeker.

Bugünki dersimizde yavaştan yavaştan bir web sitesinin taslağını atmaya başlayacağız.İlk olarak tablo oluşturmayı öğrenip,
sonrasında MMO Tutkunlarının forum sayfasının taslağını atacağız.Arık derslere bu taslak üzerinden devam etmek istiyorum ki bir sayfanın
gelişimini kendi gözlerinizle görün.İlk yaptığınız taslaktan bir siteyi nerelere getirebileceğinizi... İleride CSS derslerimiz olacak.
Tabloları bu elementler yerine kutu modellemeleri ile yapacağız. Bu yüzden tablo mantığını ne kadar kavrarsanız ileride işiniz o kadar kolay olur.

İlk olarak tablo oluşturmak için temek etiketleri öğrenelim ;

- table = tarayıcıya bunun bir tablo olduğunu belirtir ve arasına yazılan değerleri tablo içine alır.
- tr = satır
- td = sütun veya satıra eklenecek her bir değeri sütuna ayırmayı sağlayan etiket olarak tanımlanabilir.

bu etiketleri kullanarak tablolarımızı oluşturacağız. Hemen başlayalım. İşlemleri body altına uyguladığımız için tekrar tekrar yazmaya gerek yok.
Size öğretirken body içine yazılmış gibi düşünün en son yazarım ki sayfa çok uzun görünüp gözünüzü korkutmasın.

HTML:
    <body>
        <table>
            <tr>
                <td>Bu bir değerdir.</td>
            </tr>
        </table>
    </body>

ilk başta bu kod bloğunu ele alalım. Dersin bu bölümüne kadar hata yapmış olanlar olabilir , yapılabilecek hataları şöyle bir gözden geçirelim.
bir etiket <kod></kod> olarak açılır ve kapanır. Eğer çoklu etiket kullanacaksak ; etiket içerisinde etiket gibi , o zaman etiketler içten dışa doğru kapanır.
Şimdi size iki etiket yapısı göstereceğim. Doğru olanı yeşil ile yazacak , yanlış olanları kırmızı ile yazacağım.

<tr><td></td></tr>
<tr><td></tr></td>
<td></tr></td><tr>


Simdi de gelelim etiketlerin alabildiği değerlere.Tablomuz şuanda belli belirsiz hiçbir şey anlam ifade etmiyor.ilk başta tablomuzun ortaya çıkması için çerçeve verelim.
HTML:
    <body>
        <table border="1">
            <tr>
                <td>Bu bir değerdir.</td>
            </tr>
        </table>
    </body>

burada "border" bir çerçeve stili istediğimizi 1 ise çerçeve kalınlığının 1px olmasını istediğimizi belirtiyor.Şimdi de tablomuza bir yükseklik ve genişlik değeri verelim ki gözle görünür bir tablo olsun.
HTML:
    <body>
        <table border="1" width="500" height="250">
            <tr>
                <td>Bu bir değerdir.</td>
            </tr>
        </table>
    </body>
burada da "width" ile genişliğinin 500 pixel olmasını "height" ile de uzunluğunun 250 pixel olmasını istediğimizi söyledik. Tablomuz ortaya çıktı. Şimdi tablomuza veri ekleyelim.
HTML:
    <body>
        <table border="1" width="500" height="250">
            <tr>
                <td>Bu bir değerdir.</td><td>Bu da bir değerdir.</td>
            </tr>
            <tr>
                <td>Bu da bir değerdir.</td>
            </tr>
        </table>
    </body>
gördüğünüz gibi tr ve td lerin boylarına karışmadığımız için biz ne kadar veri eklemişsek veriler boyutları eşit miktarda bölüşüyor.
Şimdi tablonun 1.satırının 1.sütununda , 1.satırının 2.sütununda ve 2.satırının 1.sütununda bir verimiz oldu.Böyle bir görüntü bize hoş görünmüyor diyelim.
Bu yüzden ben 2.satırdaki verimizin ben uzunluğunun üstteki iki verinin uzunluğuna eşit olmasını istiyorum.Bu yüzden colspan değerini kullanmam gerekiyor.

colspan = yatay kolon (sütun) uzunluğu
rowspan = dikey kolon (sütun) uzunluğu olarak görülebilir.

Biz yatay uzunluğunun 2 yatay kolonun birleşiminden olmasını istediğimiz için şu şekilde yapıyoruz.
HTML:
<body>
    <table border="1" width="500" height="250">
            <tr>
                <td>Bu bir değerdir.</td><td>Bu da bir değerdir.</td>
            </tr>
            <tr>
                <td colspan="2">Bu da bir değerdir.</td>
            </tr>
        </table>
</body>

eğer böyle olmasını istemiyor ve 1.satırın 2.sütunundaki veriye dik uzunluk vermek istiyorsanızda şu şekilde yapabilirsiniz.
HTML:
<body>
    <table border="1" width="500" height="250">
            <tr>
                <td>Bu bir değerdir.</td><td rowspan="2">Bu da bir değerdir.</td>
            </tr>
            <tr>
                <td>Bu da bir değerdir.</td>
            </tr>
        </table>
</body>

Tablomuz şimdi daha güzel görünüyor değil mi :) Şimdi de tablomuzu sol köşeden ayırıp ortalayalım.Bunun için align değerini kullanacağız.
align'ın tam çevirisini söyleyemesemde yaslamak gibi algılanabilir. Biz tablomuzu ortaya yaslamak istediğimiz için center diyeceğiz.
HTML:
<body>
    <table border="1" width="500" height="250" align="center">
            <tr>
                <td>Bu bir değerdir.</td><td>Bu da bir değerdir.</td>
            </tr>
            <tr>
                <td colspan="2">Bu da bir değerdir.</td>
            </tr>
        </table>
</body>

son olarakda link vermeyi öğrendikmi tamamdır :) Örneğin ilk satırın ilk sütunundaki yazıya bir link verip youtube'u açmasını sağlayalım.

bunun için a etiketini ve href değerini kullanacağız. "a" bir bağlantı tanımlamak istediğimiz ve "href" de nereye yönlendireceğimizi belirtir.
Yazımızın tamamına link vermek istediğimiz için tüm yazımızı "a" içerisine almaya dikkat edin.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Tablo Yapıları Ve Link Verme</title>
</head>
<body>
    <table border="1" width="500" height="250" align="center">
        <tr>
            <td><a href="https://youtube.com//">Bu bir değerdir.</a></td><td>Bu da bir değerdir.</td>
        </tr>
        <tr>
            <td colspan="2">Bu da bir değerdir.</td>
        </tr>
    </table>
</body>
</html>

Şimdi de kendiniz alıştırmalar yaparak tablo mantığını pekiştirmeye çalışın.Buraya kadar öğrenmiş olduğunuz konular ile neler yapabileceğinizi
göstermek amaçlı bir sayfada ben yaptım.Derslere bundan sonra bu sayfa üzerinden devam edip eklemeler yapacağımki yapacağımız şeyler gözümüzde canlansın :)

Şuana Kadar Öğrenilenler:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>MMO Tutkunları</title>
    </head>
  
    <body>
  
        <table width="1024" height="650" border="1" align="center">
            <!--- Site Görseli -->
            <tr>
                <td colspan="5">Site Görseli</td>
            </tr>
            <!--- Menü Alanı --->
            <tr height="12">
                <td width="130"><a href="https://www.mmotutkunlari.com/"><center>Anasayfa</center></a></td>
                <td width="130"><a href="https://www.mmotutkunlari.com/find-threads/unanswered"><center>Forumlar</center></a></td>
                <td width="130"><a href="https://www.youtube.com/mmotutkunlari"><center>Videolar</center></a></td>
                <td width="130"><a href="https://www.mmotutkunlari.com/whats-new/"><center>Yeni İçerikler</center></a></td>
                <td width="130"><a href="https://www.mmotutkunlari.com/uye/"><center>Üyeler</center></a></td>
            </tr>
            <!--- Reklam Barı --->
            <tr>
                <td colspan="5">Reklam Görseli</td>
            </tr>
            <!--- İçerik Alanı --->
            <tr>
                <td><center>Paylaşan Kişi</center></td><td colspan="4">Birinci Konu</td>
            </tr>
            <tr>
                <td><center>Paylaşan Kişi</center></td><td colspan="4">İkinci Konu</td>
            </tr>
        </table>
      
    </body>
  
</html>
 
Son düzenleme:
hocam kendini geliştirmen için sana bir youtube kanalı önerebilirim. içerisinde çok güzel dersler var. html php javascript fln
 
Sadi evrenşekerin videosu mu ? Şuan bakamıyorum ama eve gidince bakarım teşekkürler
 
ben Python un en çok o özelliğini seviyorum çok basit ve kullanışlı geliyor bana.
 
Geri
Üst