HTML Temel seviye 5

Babayiğit · 3 Mart 2021

evet bu konum 5 hemen geçelim

evet şimdi diyelim kendim tanıtan bir web sitesi yapacağız ve bunun için
yaş+isim soy isim adresi şeklinde bir tablo yapacağız

ilk kodumuz <table>
</table>

bunların içine yazacağız gelin ilk yazacaklarımızı görelim;

HTML:

<tr></tr>

bu bunun anlamı table row yani satır demek bunun içine stün koyacağız şöyle;

HTML:

<th>isim
 </th>

bu ise başlık demek isim adı altında olucak

ve biz başlıkları alt alta koyacağız nasılmı;

HTML:

<tr>
        <th>isim
        </th>
        <th>soyisim
        </th>
        <th>
            yaş
        </th>
    </tr>

bu şekilde ilk başlıkları belirteceğiz şimdi bunun altına gelecek olan kodları tanıyıp yazalım;

HTML:

 <td>
      zülkarneyn
</td>

evet td etiketi ise TABLE etiketi ile oluşturulan tabloların satırlarındaki hücreleri oluşturarak, tabloda gösterilecek verilerin tanımlanmasını sağlar

bunuda aynı şekilde yapacağızki veriyi sınıflandırsın ;

HTML:

<td>
            zülkarneyn
        </td>
     <td>
            babayiğit
        </td>
     <td>
            23
        </td>

evet şimdi gelelim görünümü nasıl;

görünüm bu şekilde ve en ücra yerinde hemen ilk konularımda boyutlandırma kodunu verelim

HTML:

<table style="width:100%">

evet kodumuz bu baştaki table etiketinin içine yazıyoruz ve yayıyor ama nasıl yayıyor birde onu göstereyim;

evet şimdi ben ek olarak resimde eklemek istiyorum evet nasıl yapıyorduk stün içine bunun kodunu siz ayarlayın(sonda kodları paylaşcam)

evet şöyle bir MUA maskesi seçtim

evet şimdi sınırlar çizelim artık zaten yavaş yavaş css geçtik

HTML:

 <style>
       table, td, th{
          border: 3px solid red;
    </style>

evet şimdi sınırlar çizildi hangilerine uygulanacak renkleri ve px de belirlendi ama bir sorun var

evet bakın sınırlar ayrı neden çünkü hem td hem th ye çizdik bunun önüne geçmek için ise

CSS:

 border-collapse:collapse;

bunu yazıyor hemen altına bu çizgiyi üst üste bindirdi

görünümü böyle şimdi ise yazıları yerinden oynatalım

CSS:

td{
          padding:15px;
}

evet bunu üsteki th içinde aynı şekil td nin yanına yazarak yapabiliriz ama ortada kalması iyi görünüm ise şu şekil

evet sağdan ve soldan genişledi fazla da oynamak istemiyorum açıkcası

şimdi diyelim adres vericeksiniz ama 2 tane var hemen

HTML:

<th colspan="2">adres</th>

şimdi bundan iki tane stün açacağız alt alta oda şu şekil

HTML:

 <td>
            ankara
        </td>
    <td>
            istanbul
        </td>

görünümünü de şu şekil

gayet şık oldu bence

şimdi daha klas bir tablo daha yapayım ilk görünümünü göstereyim

şimdi kodlarını göstereyim;

HTML:

<table>
    <tr>
        <th>Ad:</th>
        <td>Zülkarneyn Babayiğit</td>
    </tr>
    <tr>
        <th rowspan="2">Telefon numarası;</th>
        <td>11111111111</td>
    </tr>
    <td>12121212121</td>
</table>

evet aradaki kod farkı "rowspan":Rowspan özelliği: row , ok, sıra anlamına gelmektedir.span ise kapsama,içerme..Yani,sıra kapsama anlamındadır. Yukardan aşağıya doğru kaç tane sıra birleşecek ise,rowspan değerine o sayı girilir.

tercihim ilkinden yana

şimdi başlık ataması yapalım hemen bunuda <table> eiketinin hemen altına koyalım;

HTML:

 <caption>Tanımım</caption>

bakın hemen ortalarına çaktı ama boyutu küçük oldu hemen o css kodlarımıza ani bir uçuş yapalım

CSS:

   caption{
            font-size:32px;
            }

evet görünümü ise

evet şakadanak büyütük

)

eveett bir konumuzun daha sonu şimdi bütün kodları paylaşayım ve hepinize bol çalışmalar diyeyimmm

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hacktivizim</title>
    <style>
       table, td, th{
          border: 3px solid red;
          border-collapse:collapse;
          }
          td{
          padding:17px;
          }
          caption{
            font-size:32px;
            }

    </style>

</head>
<body>

<table style="width:100%">
    <caption>Tanımım</caption>
    <tr>
        <th>isim
        </th>
        <th>soyisim
        </th>
        <th>
            yaş
        </th>
        <th>resim</th>
         <th colspan="2">adres</th>
    </tr>
        <td>
            zülkarneyn
        </td>
     <td>
            babayiğit
        </td>
     <td>
            23
        </td>
    <td>
           <img src="data:image/jpeg;base64,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" style="width:70px; , height:70px">
        </td>
     <td>
            ankara
        </td>
    <td>
            istanbul
        </td>


</table>
<br><br>
<table>
    <caption>iletişim</caption>
    <tr>
        <th>Ad:</th>
        <td>Zülkarneyn Babayiğit</td>
    </tr>
    <tr>
        <th rowspan="2">Telefon numarası;</th>
        <td>11111111111</td>
    </tr>
    <td>12121212121</td>
</table>

</body>
</html>

eveeettt kodlarım bu konu biraz dağınık ama böylesi inanın daha iyi

)

Can · 3 Mart 2021

hala bitmedi mi bu html ya

eline emeğine sağlık

Babayiğit · 3 Mart 2021

TOSUN HT' Alıntı:
hala bitmedi mi bu html ya
eline emeğine sağlık

benim neler çektiğimi bir Allah bilir bir ben

saolasın

Güvenli Ticaret

Sorunum Var

Doğru Türkçe ve Kurallar

HTML Temel seviye 5

Babayiğit

Can

La Turquie Kémaliste

Babayiğit

Konuyu görüntüleyen kullanıcılar: