HTML nedir? Element · tag · attribute

Bir web sayfasını binaya benzetirsek HTML, binanın iskeletidir. Sayfada ne olduğunu söyler: "Burada bir başlık var, altında bir yazı, yanında bir resim, en altta bir buton." Hepsi bu. Rengi, güzelliği söylemez (o CSS'in işi), tıklanınca ne olacağını da söylemez (o JavaScript'in işi). Sadece ne var, ne yok, onu söyler.

HTML'in yapı taşına element denir. Bir elementi yazmak için adını köşeli parantezlerin içine yazarsın; buna tag (etiket) denir. Çoğu element bir açılış ve bir kapanış tag'inden oluşur, ikisinin arasına da içerik girer. Elemente ekstra bilgi vermek istersen açılış tag'inin içine attribute (özellik) yazarsın. Kulağa karışık geliyor ama tek satırda hepsi görünüyor:

<button id="kaydet">Kaydet</button>

<button>      → açılış tag'i: "burada bir buton başlıyor"
id="kaydet"   → attribute: butona ekstra bilgi (adı "kaydet" olsun)
Kaydet        → içerik: butonun üzerinde yazacak yazı
</button>     → kapanış tag'i: "buton burada bitti" (baştaki / işaretine dikkat)

Bu dört parçanın toplamına, açılışı, özellikleri, içeriği ve kapanışıyla, element denir. Bir HTML sayfası, iç içe geçmiş yüzlerce elementten oluşur; tıpkı iç içe kutular gibi. Bu kitabın bundan sonraki her "İskelet" bölümü, işine en çok yarayacak element türlerini tek tek tanıtıyor.

Div ve span Görünmez kutular

İşte web'in en çok kullanılan ama en az anlaşılan elementi: div. Sırrı şu: div, görünmez bir kutudur. Kendisi hiçbir şey göstermez; tek görevi başka elementleri bir arada tutmaktır. Neden gerekli? Çünkü "şu üç şeyi yan yana koy", "bu kartı sağa yasla", "şurayı komple gizle" diyebilmek için o şeylerin tek bir pakette olması gerekir. O paket div'dir.

span ise div'in minicik kardeşi: koca bir kutu değil, cümlenin içindeki birkaç kelimeyi paketlemek için kullanılır, mesela tek bir kelimeyi kırmızı yapmak istediğinde. Ezberi kolay: div = koli, span = etiket bandı.

Aşağıdaki örnekte gerçekten iç içe kutular var ama görünmüyorlar, çünkü div böyle bir şey. Butona bas, kenarlarını boyayayım, o zaman gör:

<div>                                  ← dış koli (mavi)
  <div>İçimde bir <span>span</span> saklı</div>   ← iç kutu (pembe) + span (sarı)
  <div>Ben ikinci div'im</div>
</div>

Başlıklar, paragraflar, linkler H1–h6 · p · a · strong

Bir sayfadaki yazıların da türleri vardır ve her türün kendi elementi var. h1'den h6'ya kadar olanlar başlıktır: h1 en büyüğü ve en önemlisidir, sayfanın ana başlığı. Rakam büyüdükçe başlık küçülür. Önemli bir kural: her sayfada tek bir h1 olmalı, çünkü Google sayfanın ne anlattığını önce h1'den anlar (SEO dediğimiz şeyin ilk taşı).

Normal yazılar p (paragraf) elementine girer. Bir yazının içinde bir kısmı kalınlaştırmak istersen strong kullanılır. Başka bir sayfaya götüren tıklanabilir yazılar ise a elementidir (İngilizce "anchor", çapa), nereye gideceğini href attribute'u söyler. Hepsi bir arada, canlı:

<h1>Ana başlık</h1>
<p>Yazı, <strong>kalın kısım</strong> ve
   <a href="https://garamsi.com">bir link</a>.</p>

Listeler Ul · ol · li

Alt alta maddeler göstereceksen liste elementleri kullanılır ve mantığı çok basittir: listenin kendisi için bir kap, her madde için bir satır. Kap iki çeşit: ul maddelerin önüne nokta koyar (sırasız liste), ol ise 1, 2, 3 diye numaralar (sıralı liste). Her iki kabın içindeki her bir madde de li'dir (list item = liste elemanı).

<ul>                     <ol>
  <li>süt</li>             <li>ürünü kazı</li>
  <li>domates</li>         <li>fiyatı eşleştir</li>
</ul>                     </ol>

Tablolar Table · tr · td · th

Elindeki bilgi satır ve sütunlardan oluşuyorsa, fiyat listesi, puan cetveli, stok dökümü, tablo kullanılır. Adları İngilizce kısaltmalardan gelir ve bir kez çözünce bir daha unutmazsın: table tablonun kendisi. tr = table row, yani bir satır. td = table data, yani satırın içindeki bir hücre. th = table header, yani kalın görünen başlık hücresi.

Yani kurulum hep aynıdır: table'ın içine satır satır tr, her tr'nin içine hücre hücre td dizersin. "Tabloya satır ekle" demek = "yeni bir tr ekle" demek. Butonla dene, JavaScript gerçekten yeni bir tr ekleyecek:

<table>
  <tr> <th>Ürün</th>   <th>Fiyat</th> </tr>   ← başlık satırı
  <tr> <td>Cüzdan</td> <td>$45</td>   </tr>   ← veri satırı
</table>

Formlar Form · input · label · textarea · select · button

Kullanıcıdan bilgi almak istediğin her yer bir formdur: giriş ekranı, arama kutusu, sipariş sayfası. Parçaları şunlar ve her birinin görevi nettir:

form, parçaların hepsini saran kaptır, "bunlar birlikte gönderilecek" demektir. input tek satırlık giriş kutusudur ve type attribute'uyla kılıktan kılığa girer: type="text" yazı kutusu, type="number" sayı kutusu, type="checkbox" işaret kutusu, type="password" yıldızlı şifre kutusu, type="date" tarih seçici. textarea çok satırlı büyük yazı alanıdır (yorum, not). select açılır menüdür, seçenekleri option'dur. label kutunun yanındaki açıklama yazısıdır ve güzel bir huyu vardır: label'a tıklamak, bağlı olduğu kutuyu seçer, telefonda küçücük kutuyu tutturmaya çalışmaktan kurtarır. button da düğmedir; formun içindeyse formu gönderir.

Aşağıdaki form gerçekten çalışıyor, doldur, gönder. Ama dikkat: bilgiler hiçbir sunucuya gitmiyor, JavaScript yakalayıp sana geri gösteriyor:

<form>
  <label for="ad">Adın:</label>
  <input type="text" id="ad">
  <select><option>Cüzdan</option></select>
  <textarea></textarea>
  <button type="submit">Gönder</button>
</form>

Resim, video, ses Img · src · alt · video · audio

Sayfaya görsel ve ses koymanın elementleri bunlar. En önemlisi img (image = resim). İki attribute'u ezbere bil: src (source = kaynak) resim dosyasının nerede olduğunu söyler, bir dosya adı ya da internet adresi olabilir. alt (alternative = yedek) ise resim yüklenemezse yerine gösterilecek yedek yazıdır; ayrıca görme engellilerin ekran okuyucusu bu yazıyı sesli okur ve Google resmin ne olduğunu buradan anlar. Yani alt hem nezaket hem SEO'dur.

Aşağıda ikisini de canlı görüyorsun: soldaki resmin src'si doğru, sağdakinin src'sini bilerek bozdum, bak, yerine alt yazısı çıktı:

src doğru → resim geldi

src bozuk → alt devrede

video ve audio da aynı mantık: src ile dosyayı gösterirsin. Tek fark, controls attribute'unu eklersen oynat/durdur düğmeleri gelir. Aşağıdakiler gerçek dosyalar, oynat:

<img src="logo.png" alt="Mağazanın logosu" width="96">
<video src="tanitim.mp4" controls></video>
<audio src="zil.mp3" controls></audio>