HTML: sayfanın iskeleti

Ders 18'de bir web sayfasının üç katmanını gördün: HTML iskelet, CSS görünüm, JavaScript davranış. Bu ders iskeletin dersi. HTML bir programlama dili değil: değişken, if, döngü yok. Bir işaretleme dili: içeriğin her parçasını işaretleyip tarayıcıya "bu bir başlık", "bu bir liste", "bu bir form kutusu" dersin. Dersin sonunda yalnız HTML ile, telefonda da düzgün açılan ve doğrulayıcıdan hatasız geçen tek sayfalık bir şampiyon tanıtım sayfası yazmış olacaksın.

#Etiketsiz metin: tarayıcı neyin ne olduğunu bilmez

HTML'in neden gerektiğini görmek için deneme.html'e hiç etiket kullanmadan şunu yaz, kaydet ve tarayıcıda aç:

1Ahri2Dokuz Kuyruklu Tilki3 4Rol: Büyücü5Koridor: Orta

Beş satır yazdın, tarayıcı tek satır gösterdi. Tarayıcı satır sonlarını ve art arda gelen boşlukları tek bir boşluğa indirir. Hangi satırın başlık, hangisinin ayrı bir paragraf olduğunu bilemez, çünkü bunu ona sen söylemedin. Şimdi aynı içeriği etiketlerle yaz:

1<h1>Ahri</h1>2<p>Dokuz Kuyruklu Tilki</p>3<p>Rol: Büyücü</p>4<p>Koridor: Orta</p>

<h1> "bu sayfanın ana başlığı", <p> "bu bir paragraf" demek. Tarayıcı başlığı büyük ve kalın, paragrafları alt alta ve aralarında boşlukla çizdi. Bu, tarayıcının varsayılan görünümü; rengi, boyutu ve yazı tipini Ders 20'de CSS ile sen belirleyeceksin. HTML'in işi görünüş değil, anlam.

#Etiket, öğe, nitelik

<p>Rol: Büyücü</p> satırında üç parça var: <p> açılış etiketi, </p> kapanış etiketi (adın önünde eğik çizgi var), aradaki yazı da içerik. Üçüne birlikte öğe denir. Bazı öğeler açılış etiketinde ek bilgi taşır; buna nitelik denir. En iyi örnek bağlantı öğesi a: nereye gideceğini href niteliği söyler.

Yazım kuralları az ve hep aynı:

• Etiket adlarını küçük harfle yaz. <P> de çalışır ama herkes küçük harf kullanır.
• Nitelik değerini çift tırnağa al. Değerde boşluk varsa tırnak şart: src=img/ahri resmi.png yazarsan tarayıcı resmi.png'yi ayrı bir nitelik sanar.
• Nitelikleri birbirinden boşlukla ayır: <img src="ahri.png" alt="Ahri">.

#İç içe yazmak

Bir öğenin içine başka öğeler koyabilirsin. strong "bu kısım önemli" demek ve paragrafın içinde bir parçayı işaretler: <p>Ahri <strong>çok</strong> hızlı.</p>. Kural Ders 2'deki parantezlerle aynı: en son açtığını ilk kapat. ( [ ] ) doğru, ( [ ) ] yanlış.

<p><strong>Ahri</p></strong>

<p><strong>Ahri</strong></p>

VS Code burada yardım eder: bir açılış etiketini yazıp > girdiğinde kapanışını kendisi ekler, imleci bir etiketin üstüne koyduğunda eşini de vurgular.

#Kapanışı olmayan öğeler

Bazı öğelerin içi olmaz, bu yüzden kapanış etiketleri de yoktur: satır kırma <br>, resim <img>, form kutusu <input>, sayfa bilgisi <meta>. Bunlara boş öğe (void element) denir. Başka kodlarda <br /> biçimini görebilirsin; HTML'de sondaki eğik çizginin hiçbir etkisi yoktur.

#Yorum

<!-- Bu satır sayfada görünmez -->

JavaScript'teki // gibi: tarayıcı yorumu göstermez. Ama sayfanın kaynağını açan (sağ tık → Sayfa kaynağını görüntüle, İngilizcede View page source, ya da Ctrl+U) herkes okur. Yoruma şifre ya da gizli not yazma.

#Her sayfanın iskeleti

Etiketli dosyan çalıştı ama eksik: sekmede sayfanın adı yerine dosyanın adı ya da adresi yazıyor, telefonda küçücük görünecek ve Türkçe harfler bazı durumlarda bozulacak. Ders 18'de her sayfanın aynı iskeletle başladığını gördün ve onu kalıp olarak yazdın. Şimdi her satırın ne iş yaptığını öğrenecek ve iskelete telefonlar için bir satır daha ekleyeceksin. deneme.html'in içini sil ve şunu elle yaz:

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Ahri - Sihirdar Rehberi</title>7</head>8<body>9    <h1>Ahri</h1>10    <p>Dokuz Kuyruklu Tilki</p>11</body>12</html>

#Satırlar neden gerekli?

<!doctype html>: Tarayıcılar 1990'ların sayfalarını bozmamak için "eski kurallar" diye bir mod taşır (quirks mode). Bu ilk satır "güncel kuralları kullan" der; yazmazsan sayfa yine açılır ama eski kurallarla çizilir.

lang="tr": Ekran okuyucu sayfayı Türkçe sesle okur; yoksa "Şampiyon"u İngilizce okumaya çalışabilir. Tarayıcı da gereksiz yere "çevir" önermez.

<meta charset="utf-8">: Karakter kodlamasını Ders 18'de gördün: bilgisayar harfleri sayı olarak saklar ve UTF-8, Türkçe dahil bütün dillerin harflerini içeren tablodur. VS Code dosyanı UTF-8 kaydeder (durum çubuğunun sağında UTF-8 yazar); bu satır aynı bilgiyi tarayıcıya verir.

Vermezsen tarayıcı tahmin eder ve kodlama bildirmeyen bir sunucudan gelen sayfada yanılır: Ders 18'deki bozuk harfler böyle çıkıyordu. Satırı head'in ilk satırı yap: kurala göre bu bilgi sayfanın ilk 1024 baytının içinde olmalı, tarayıcı onu orada arar.

<meta name="viewport" …>: Telefon tarayıcıları, eski masaüstü sitelerini bozmamak için bu satırı görmezlerse sayfayı yaklaşık 980 piksel genişliğinde bir ekrana çizip telefona sığacak kadar küçültür. width=device-width "ekranın gerçek genişliğini kullan", initial-scale=1 "yakınlaştırmadan başla" der.

<title>: Sekmede görünen ad. Sayfayı yer imlerine ekleyince ve arama sonuçlarında da bu yazı çıkar. Her sayfanın kendi title'ı olmalı.

#Kısayol: Emmet

İskeleti bir kez daha elle yazdın; artık Ders 18'de adını duyduğun kısayolu kullanabilirsin. VS Code'un içinde gelen Emmet aracı kısa yazıları koda açar. Boş bir .html dosyasında ! yaz; çıkan öneri listesinde Emmet Abbreviation satırı seçiliyken Enter'a bas (arayüz değişmiş olabilir). VS Code şu iskeleti yazar:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    </body></html>

İki yeri değiştir: lang="en"'i lang="tr" yap, Document yerine kendi başlığını yaz. Büyük harfli <!DOCTYPE html> ve UTF-8 seninkiyle aynı anlama gelir; HTML bu yerlerde büyük-küçük harf ayırmaz. 1.0 ile 1 de aynıdır.

#HTML hata vermez, doğrulayıcı verir

JavaScript'te tek bir eksik parantez programı durdururdu (Ders 1'deki SyntaxError). HTML'de tarayıcı asla durmaz: hatalı kodu da çizer, eksikleri tahmin ederek tamamlar. Ama tahmin her zaman senin istediğin şey olmaz. deneme.html'in body kısmını şöyle değiştir; strong'u kapatmayı unuttuk:

8<body>9    <h1>Orta koridor</h1>10    <p>Ahri <strong>çok hızlı bir büyücü.</p>11    <p>Lux ise uzaktan vurur.</p>12</body>

Hiçbir hata mesajı yok, ama Lux'un cümlesi de kalın çıktı. Tarayıcının bu dosyadan ne kurduğunu görmek için sayfada F12'ye bas ve Elements sekmesine bak. Elements bunu açılıp kapanan bir ağaç olarak gösterir; aynı body'nin düz yazı hâli şu (Chromium'dan, boş satırları kısalttık):

<body>    <h1>Orta koridor</h1>    <p>Ahri <strong>çok hızlı bir büyücü.</strong></p><strong>    <p>Lux ise uzaktan vurur.</p></strong></body>

Tarayıcı ilk paragrafı kapatırken strong'u da kapattı, sonra "yazar kalın yazmaya devam etmek istiyor herhalde" diye düşünüp ikinci paragrafı yeni bir strong'un içine aldı. Sayfa büyüdükçe böyle sessiz tahminler bulması zor hatalara dönüşür. Onları görmenin yolu doğrulayıcı.

#W3C doğrulayıcısını kullanmak

W3C (World Wide Web Consortium), web standartlarını yazan kuruluşlardan biri. Ücretsiz doğrulayıcısı herkese açık:

Ders 1'de Node'un hata mesajını okumayı öğrenmiştin; burada da aynı mantık işler:

• Error (kırmızı) mutlaka düzeltilir. Warning (sarı) büyük ihtimalle düzeltilmeli. Info yalnızca bilgi verir.
• From line 10, column 13 dosyanın 10. satırı, 13. karakteri demek: Node'daki ders1.js:3 gibi.
• Kesik çizgili kutu o satırdan bir parça; sarıyla boyalı kısım sorunun yeri, Node'daki ^ işareti gibi. ↩ işareti orada bir satır sonu olduğunu gösterir.
• Mesajlar İngilizce. End tag p seen, but there were open elements "p'nin kapanış etiketi geldi ama içeride hâlâ açık öğeler vardı", Unclosed element strong "strong öğesi kapanmamış" demek.

#Başlıklar, paragraf ve vurgu

Bir sayfanın başlıkları onun içindekiler listesidir. HTML'de altı başlık düzeyi var: h1 en önemli, h6 en az önemli. Bundan sonraki örnekleri deneme.html'deki iskeletin body kısmına yaz; iskelet hep aynı kalsın.

<h1>Ahri</h1><p>Orta koridorun en hareketli büyücülerinden biri.</p><h2>Yetenekler</h2><h3>Q: Aldatan Küre</h3><p>Küre gider ve geri döner, <strong>iki yolda da</strong> hasar verir.</p><h3>E: Ayartan Öpücük</h3><p>İsabet eden rakip bir süre <em>sana doğru</em> yürür.</p><h2>Kısa kombo</h2><p>Önce E at.<br>Rakip yürürken Q ile vur.</p>

Başlık kuralları:

• Her sayfada bir h1 olur: sayfanın konusu.
• Düzey atlanmaz: h1'den sonra h2 gelir, h3 değil. Bir bölümü bitirip yeni bir ana bölüme geçerken yeniden h2'ye dönebilirsin; geri dönmek serbest, atlamak yasak.
• Başlığı boyutuna göre seçme. "Daha küçük yazı" istiyorsan yine doğru düzeyi seç; boyutu Ders 20'de CSS ayarlayacak.

<p> paragraftır. <strong> "bu kısım önemli" der, tarayıcı kalın çizer. <em> vurgudur: yüksek sesle okurken üstüne basarak söylediğin sözcük; tarayıcı eğik çizer. Başka kodlarda b (kalın) ve i (eğik) de görürsün; aynı görünürler ama "önemli" ya da "vurgulu" anlamı taşımazlar, sen strong ve em kullan.

<br> paragrafın içinde satır kırar: adres, şiir, kombo adımları gibi. Paragraflar arasında boşluk için <br><br> yazma; ayrı <p> aç, boşluğu CSS ayarlar.

Önizlemeye bir daha bak: h1, h2, h3 ve p her biri kendi satırını kapladı ve alt alta dizildi; strong ile em ise cümlenin içinde kaldı, alt satıra inmedi. İlk türe blok öğe (Ders 2'deki süslü parantezli kod bloğuyla ilgisi yok), ikincisine satır içi öğe denir. Birazdan göreceğin bağlantı (a) da satır içidir. Bu davranışı Ders 21'de CSS ile değiştirmeyi öğreneceksin.

#Bağlantılar ve resimler

#Bağlantı: a

Web'i web yapan şey bağlantılardır. a öğesi tıklanabilir bir bağlantı kurar; nereye gideceğini href niteliği söyler. href üç türlü yazılır:

<p><a href="https://www.leagueoflegends.com/tr-tr/">League of Legends resmî sitesi</a></p><p><a href="lux.html">Lux'un sayfası</a></p><p><a href="#kombo">Komboya atla</a></p><h2 id="kombo">Kısa kombo</h2>

Ders 18'deki adreslerin sonundaki # kısmı budur: xdd.baby/ders19#gorevler bu sayfada id="gorevler" olan başlığa iner. Klasöründe henüz lux.html yok; o bağlantıya tıklarsan hata sayfası gelir (bunu aşağıdaki sık hatalarda göreceksin). Denemek istersen yanına boş bir lux.html oluştur.

Başka bir siteye giden bağlantıyı yeni sekmede açmak istersen iki nitelik daha eklersin:

<a href="https://www.leagueoflegends.com/tr-tr/" target="_blank" rel="noopener noreferrer">Resmî site (yeni sekmede açılır)</a>

target="_blank" bağlantıyı yeni sekmede açar. Eskiden açılan sayfa, onu açan sekmeyi başka bir adrese yönlendirebiliyordu; rel="noopener" bu kapıyı kapatır, noreferrer karşı siteye nereden geldiğini söylemez. Güncel tarayıcılar noopener'ı kendiliğinden uyguluyor, ama rel eski tarayıcılarda da korur ve yerleşik bir alışkanlıktır. Yeni sekmede açılacağını bağlantı yazısında söyle; kendi sitendeki sayfalar için target kullanma.

#Resim: img

<img src="img/ahri.png" alt="Ahri'nin portresi" width="128" height="128">

img boş öğedir, kapanış etiketi yok. Resim için sampiyon-sayfasi içinde img adında bir klasör aç ve kendi çizdiğin ya da çektiğin bir resmi koy. Kendi resminin boyutunu Dosya Gezgini'nde resme sağ tıklayıp Özellikler → Ayrıntılar (Properties → Details) sekmesinde görürsün.

Kendi denemende Riot'un Data Dragon'daki resmini de kullanabilirsin: https://ddragon.leagueoflegends.com/cdn/16.20.1/img/champion/Ahri.png adresini aç, resme sağ tıkla, Resmi farklı kaydet (İngilizcede Save image as) de ve img klasörüne ahri.png adıyla kaydet. Bu resim 128×128 piksel; koddaki width ve height bu yüzden 128. Adresteki 16.20.1 veri sürümü; Ders 15'teki versions.json en yenisini verir.

Bu sitede Riot'un resimlerini telif nedeniyle göstermiyoruz; önizlemelerde Ahri'nin resminin yerinde kendi çizdiğimiz bir yer tutucu var.

alt yazarken:

• Resimde ne görünüyorsa onu kısaca yaz: "Ahri'nin portresi". "resim", "fotoğraf" deme; ekran okuyucu zaten "resim" der.
• Yalnızca süs olan bir resimde (bir ayraç çizgisi gibi) alt="" yaz: boş alt, ekran okuyucuya "bunu atla" der. alt'ı hiç yazmamak ise hatadır.

#Listeler ve tablo

#Listeler

<h2>Güçlü yanları</h2><ul>    <li>Çok hareketli: R ile üç kez atılır.</li>    <li>E ile rakibi yakalar.</li></ul><h2>Geliştirme sırası</h2><ol>    <li>Q: Aldatan Küre</li>    <li>W: Tilki Ateşi</li>    <li>E: Ayartan Öpücük</li></ol>

ul (unordered list) sırasız listedir, maddelerin önüne nokta konur. ol (ordered list) sıralı listedir; numaraları tarayıcı yazar, araya bir madde eklersen numaralar kendiliğinden kayar. Her madde bir li (list item). li yalnız ul ya da ol'un içinde durabilir; listenin içine de li'den başka bir şey konmaz.

#Tablo

Satırı ve sütunu olan veri için tablo kullanılır: istatistikler, fiyat listeleri, skorlar.

<table>    <caption>Ahri'nin değerleri</caption>    <thead>        <tr>            <th>Değer</th>            <th>1. seviye</th>            <th>Her seviyede</th>        </tr>    </thead>    <tbody>        <tr>            <td>Can</td>            <td>590</td>            <td>+104</td>        </tr>        <tr>            <td>Mana</td>            <td>418</td>            <td>+25</td>        </tr>    </tbody></table>

Tablo satır satır yazılır: bir tr açarsın, içine o satırın hücrelerini soldan sağa dizersin. Her satırda hücre sayısı aynı olmalı; bir hücre eksik kalırsa doğrulayıcı A table row was 2 columns wide, which is less than the column count established by the first row (3). diye uyarır.

th yalnız görünüş için değil: ekran okuyucu bir hücreyi okurken sütunun başlığını da söyler. Çizgiler görünüş işi, Ders 20'de CSS ile gelecek. Tabloyu sayfa düzeni (yan yana sütunlar) kurmak için kullanma; o iş Ders 21'deki CSS yerleşiminin.

#Formlar: kullanıcıdan bilgi almak

Arama kutusu, giriş ekranı, yorum alanı… Kullanıcının bir şey yazdığı ya da seçtiği her yer bir formdur. Bu derste formun iskeletini kuruyorsun; yazılanları JavaScript ile okumayı Ders 23'te, bir sunucuya göndermeyi Blok 4'te öğreneceksin.

#input ve label

<form>    <label for="sihirdar">Sihirdar adın</label>    <input type="text" id="sihirdar" name="sihirdar">    <button type="submit">Gönder</button></form>

• form: bütün form öğelerini saran kap.
• input: kullanıcının bilgi girdiği kutu. Boş öğedir, kapanışı yok. Ne tür bilgi alacağını type söyler.
• label: kutunun adı. for niteliği, ait olduğu kutunun id'siyle harfi harfine aynı olmalı. Bu bağ hem tıklamayı kolaylaştırır hem de ekran okuyucuya kutunun adını söyler.
• name: form gönderilirken bu bilginin hangi adla gideceği. name'i olmayan kutu hiç gönderilmez.
• button: formu gönderen düğme. Türlerini birazdan göreceksin.

#Diğer input türleri

<form>    <p>        <label for="eposta">E-posta</label>        <input type="email" id="eposta" name="eposta">    </p>    <p>        <label for="saat">Haftada kaç saat oynuyorsun?</label>        <input type="number" id="saat" name="saat" min="0" max="168">    </p>    <p>        <input type="checkbox" id="haber" name="haber">        <label for="haber">Yeni rehberlerden haberdar et</label>    </p>    <fieldset>        <legend>Hangi koridorda oynuyorsun?</legend>        <input type="radio" id="ust" name="koridor" value="ust">        <label for="ust">Üst</label>        <input type="radio" id="orta" name="koridor" value="orta">        <label for="orta">Orta</label>        <input type="radio" id="alt" name="koridor" value="alt">        <label for="alt">Alt</label>    </fieldset>    <button type="submit">Gönder</button></form>

Seçenek düğmelerini fieldset içine al ve grubun sorusunu legend ile yaz; ekran okuyucu her düğmeyi okurken soruyu da söyler. Her düğmenin value'su, o düğme seçilince gönderilecek değerdir.

Formu kendi dosyanda dene: e-posta kutusuna deniz@ornek.com, saate 12 yaz, onay kutusunu işaretle, Orta'yı seç ve Gönder'e bas. Sayfa yenilenir, kutular boşalır ve adres çubuğunun sonu şöyle olur:

deneme.html?eposta=deniz%40ornek.com&saat=12&haber=on&koridor=orta

Ders 18'deki adres parçalarından ? sonrası işte bu: her kutunun name'i ve değeri, aralarında &; @ adreste %40 diye yazılır. Onay kutusuna value yazmadığın için işaretliyken on gitti.

Hiçbir şeyi doldurmadan gönderirsen adres deneme.html?eposta=&saat= olur: işaretlenmemiş onay kutusu ve seçilmemiş grup hiç gönderilmez. E-postaya @ içermeyen bir şey yazarsan tarayıcı formu göndermez ve bir uyarı gösterir; bu denetimleri Ders 23'te göreceksin.

#select, textarea ve button

<form>    <p>        <label for="yetenek">En sevdiğin yetenek</label>        <select id="yetenek" name="yetenek">            <option value="q">Q: Aldatan Küre</option>            <option value="w">W: Tilki Ateşi</option>            <option value="e" selected>E: Ayartan Öpücük</option>        </select>    </p>    <p>        <label for="ipucu">Senin ipucun</label>        <textarea id="ipucu" name="ipucu" rows="3"></textarea>    </p>    <button type="submit">Gönder</button>    <button type="reset">Temizle</button>    <button type="button">Bir şey yapmaz</button></form>

• select açılır listedir, her seçenek bir option. Ekranda option'ın yazısı görünür, gönderilen ise value'su. selected niteliği açılışta hangi seçeneğin seçili geleceğini söyler; değeri yoktur, yazılması yeter.
• textarea çok satırlı yazı alanıdır. input'tan farklı olarak kapanış etiketi vardır; iki etiketin arasına yazdığın şey kutuya hazır yazı olarak girer. rows kaç satır yüksekliğinde görüneceğini söyler.
• button düğmedir ve type üç değer alır: submit formu gönderir, reset formu ilk hâline döndürür, button kendi başına hiçbir şey yapmaz (Ders 22'de ona JavaScript ile iş yaptıracaksın).

Bir de placeholder niteliği var: <input placeholder="örnek: Deniz"> kutunun içinde soluk bir örnek gösterir. label'ın yerini tutmaz, çünkü yazmaya başlayınca kaybolur ve kullanıcı neyin sorulduğunu unutur.

#Semantik etiketler: sayfanın haritası

Şimdiye kadar içeriğin parçalarını işaretledin; sayfanın bölgeleri için de etiketler var. Eskiden her bölge div denen anlamsız bir kutuyla yapılırdı ve tarayıcı hangisinin menü, hangisinin ana içerik olduğunu bilemezdi. Bugün her bölgenin kendi etiketi var:

Bu etiketler görünüşü değiştirmez; değişen, tarayıcının ve yardımcı araçların sayfayı anlamasıdır. Chrome'un erişilebilirlik ağacında bu bölgeler birer yer işareti (landmark) olur: header → banner, nav → navigation, main → main, aside → complementary, footer → contentinfo. Ekran okuyucu kullanan biri tek tuşla bu yer işaretleri arasında atlar ve menüyü baştan sona dinlemeden ana içeriğe geçer. Hiçbir etiket uymuyorsa blok için div, satır içi parça için span kullanılır; ikisi de anlamsızdır, genelde CSS ile süslemek için vardır.

#Erişilebilirlik: herkes kullanabilsin

Sayfanı yalnızca gözüyle ve faresiyle kullananlar ziyaret etmeyecek. Görme engelli biri ekran okuyucu ile sayfayı dinler, eli titreyen biri yalnız klavyeyle gezer, internet yavaşken resimler hiç inmez. Erişilebilirlik, sayfanın bu kişilerin hepsi için çalışması demek; doğru HTML yazınca işin büyük kısmı zaten biter.

Ekran okuyucu sayfayı tarayıcının kurduğu erişilebilirlik ağacından okur. Aynı şeyin iki yazılışı Chromium'un ağacına şöyle geçiyor (gerçek çıktı: önce rol, tırnak içinde ekran okuyucunun söyleyeceği ad):

Ekran okuyucu kullananlar sayfadaki bağlantıları çoğu zaman bir liste olarak dinler; o listede beş tane "buraya tıkla" duyan biri hangisinin nereye gittiğini bilemez. Bu dersin erişilebilirlik temelleri:

1. <html lang="tr">: sayfa doğru dilde okunur.
2. Her anlamlı resimde alt, süs resminde alt="".
3. Her form kutusunun bir label'ı; seçenek gruplarında fieldset ve legend.
4. Başlıklar sırayla: bir h1, düzey atlamadan.
5. Gideceği yeri söyleyen bağlantı yazısı; tıklanan şeyler için süslenmiş bir div değil, gerçek a ve button.

Kendin dene: fareye dokunmadan Tab'a bas. Odak bağlantılardan ve form kutularından sırayla geçmeli, Shift+Tab geri gider. Bir seçenek grubu tek durak sayılır, düğmeler arasında ok tuşlarıyla gezilir. Bir öğenin rolünü ve ekran okuyucuya hangi adla gittiğini F12 → Elements → sağ paneldeki Accessibility sekmesinin Role ve Name satırları gösterir (arayüz değişmiş olabilir).

#Uygulama: şampiyon tanıtım sayfası

Şimdi hepsini birleştir. sampiyon-sayfasi klasöründe index.html adında yeni bir dosya oluştur; Ders 18'den hatırla, sunucu klasörün adresine gelen isteğe bu dosyayı verir. Resim için img/ahri.png dosyasını hazırla. Sayfanın planı:

• header: site adı ve sayfa içi menü (nav)
• main içinde bir article: başlık, resim, giriş paragrafı; ardından Oynanış, Yetenekler, Temel değerler ve Anket bölümleri
• aside: kısa bir ipucu
• footer: kaynak ve dış bağlantı

Dosyayı üç parçada yaz; satır numaraları kaldığın yerden devam ediyor. Önce iskelet, başlık bölgesi ve tanıtım:

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Ahri - Sihirdar Rehberi</title>7</head>8<body>9    <header>10        <p><strong>Sihirdar Rehberi</strong></p>11        <nav>12            <ul>13                <li><a href="#oynanis">Oynanış</a></li>14                <li><a href="#yetenekler">Yetenekler</a></li>15                <li><a href="#degerler">Değerler</a></li>16                <li><a href="#anket">Anket</a></li>17            </ul>18        </nav>19    </header>20 21    <main>22        <article>23            <h1>Ahri</h1>24            <img src="img/ahri.png" alt="Ahri'nin portresi" width="128" height="128">25            <p><em>Dokuz Kuyruklu Tilki.</em> Orta koridorun <strong>en hareketli</strong> büyücülerinden biri.</p>

Menü bir bağlantı listesi: bağlantılar ul içinde, her biri bir li. Her bağlantı birazdan yazacağın bir bölümün id'sine gidiyor. İkinci parça, içerik bölümleri:

26            <section id="oynanis">27                <h2>Oynanış</h2>28                <p>Ahri rakibini uzaktan yetenekleriyle yıpratır. Fırsat bulunca E ile yakalar, R ile üç kez atılarak ya kovalar ya kaçar.</p>29            </section>30 31            <section id="yetenekler">32                <h2>Yetenekler</h2>33                <ul>34                    <li><strong>Q, Aldatan Küre:</strong> Küre gider ve geri döner, iki yolda da hasar verir.</li>35                    <li><strong>W, Tilki Ateşi:</strong> Üç alev yakındaki rakiplere kendiliğinden saldırır.</li>36                    <li><strong>E, Ayartan Öpücük:</strong> İsabet eden rakip bir süre sana doğru yürür.</li>37                    <li><strong>R, Ruh Saldırısı:</strong> Kısa sürede üç kez atılırsın.</li>38                </ul>39                <h3>Geliştirme sırası</h3>40                <ol>41                    <li>Q: Aldatan Küre</li>42                    <li>W: Tilki Ateşi</li>43                    <li>E: Ayartan Öpücük</li>44                </ol>45            </section>46 47            <section id="degerler">48                <h2>Temel değerler</h2>49                <table>50                    <caption>Ahri'nin değerleri (yamayla değişebilir)</caption>51                    <thead>52                        <tr>53                            <th>Değer</th>54                            <th>1. seviye</th>55                            <th>Her seviyede</th>56                        </tr>57                    </thead>58                    <tbody>59                        <tr>60                            <td>Can</td>61                            <td>590</td>62                            <td>+104</td>63                        </tr>64                        <tr>65                            <td>Mana</td>66                            <td>418</td>67                            <td>+25</td>68                        </tr>69                        <tr>70                            <td>Zırh</td>71                            <td>21</td>72                            <td>+4,2</td>73                        </tr>74                    </tbody>75                </table>76            </section>

Değerler Data Dragon'daki Ahri verisinden; yamalarla değişebildiği için tablonun başlığında bunu söylüyoruz. Son parça anket, yan bilgi ve sayfa sonu:

77            <section id="anket">78                <h2>Anket</h2>79                <form>80                    <p>81                        <label for="sihirdar">Sihirdar adın</label>82                        <input type="text" id="sihirdar" name="sihirdar">83                    </p>84                    <p>85                        <label for="saat">Haftada kaç saat Ahri oynuyorsun?</label>86                        <input type="number" id="saat" name="saat" min="0" max="168">87                    </p>88                    <fieldset>89                        <legend>Ahri'yi hangi koridorda oynuyorsun?</legend>90                        <input type="radio" id="orta" name="koridor" value="orta">91                        <label for="orta">Orta</label>92                        <input type="radio" id="ust" name="koridor" value="ust">93                        <label for="ust">Üst</label>94                    </fieldset>95                    <p>96                        <label for="yetenek">En sevdiğin yetenek</label>97                        <select id="yetenek" name="yetenek">98                            <option value="q">Q: Aldatan Küre</option>99                            <option value="w">W: Tilki Ateşi</option>100                            <option value="e">E: Ayartan Öpücük</option>101                            <option value="r">R: Ruh Saldırısı</option>102                        </select>103                    </p>104                    <p>105                        <label for="ipucu">Senin ipucun</label>106                        <textarea id="ipucu" name="ipucu" rows="3"></textarea>107                    </p>108                    <p>109                        <input type="checkbox" id="haber" name="haber">110                        <label for="haber">Yeni rehberlerden haberdar et</label>111                    </p>112                    <button type="submit">Gönder</button>113                </form>114            </section>115        </article>116    </main>117 118    <aside>119        <h2>Kısa ipucu</h2>120        <p>E isabet ederse hemen ardından Q'yu at: rakip sana doğru yürürken kaçamaz.</p>121    </aside>122 123    <footer>124        <p>Değerler Riot Games'in Data Dragon verisinden alındı.<br>Hazırlayan: Deniz</p>125        <p><a href="https://developer.riotgames.com/docs/lol" target="_blank" rel="noopener noreferrer">Riot geliştirici belgeleri (yeni sekmede açılır)</a></p>126    </footer>127</body>128</html>

Kaydet ve index.html'i tarayıcıda aç. CSS olmadığı için her şey alt alta, tarayıcının varsayılan görünüşüyle dizilir:

Bitirmeden önce üç denetim yap:

1. Doğrulayıcı: index.html'in tamamını doğrulayıcıya yapıştır. Hedef: Document checking completed. No errors or warnings to show. Bu dosyayı biz denetledik, aynen yazdıysan bu mesajı göreceksin.
2. Klavye: Tab ile baştan sona gez. Menüdeki Anket bağlantısında Enter'a bas: sayfa ankete inmeli.
3. Telefon: F12'ye bas, geliştirici araçlarında cihaz düğmesine (Toggle device toolbar, Ctrl+Shift+M) tıkla. Viewport satırı sayesinde yazılar okunaklı kalmalı.

#Sık hatalar

HTML'de hata mesajını tarayıcı değil doğrulayıcı verir; aşağıdaki doğrulayıcı mesajlarının hepsi W3C doğrulayıcısının gerçek çıktısı. Son iki kart, doğrulayıcının hiç yakalamadığı hatalar: onları ancak tıklayarak bulursun. Bütün derslerin hataları hata rehberinde.

9    <h1>Orta koridor</h1>10    <p>Ahri <strong>çok hızlı bir büyücü.</p>11    <p>Lux ise uzaktan vurur.</p>

Error: End tag p seen, but there were open elements.From line 10, column 42; to line 10, column 45ir büyücü.</p>↩    < Error: Unclosed element strong.From line 10, column 13; to line 10, column 20  <p>Ahri <strong>çok hı

9    <h1>Ahri</h1>10    <img src="img/ahri.png" width="128" height="128">

Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.From line 10, column 5; to line 10, column 53</h1>↩    <img src="img/ahri.png" width="128" height="128">↩</bod

9    <form>10        <label for="sihirdar">Sihirdar adın</label>11        <input type="text" id="sihirdarAdi" name="sihirdar">12    </form>

Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.From line 10, column 9; to line 10, column 30>↩        <label for="sihirdar">Sihird

9    <form>10        <label for="ad">Sihirdar adın</label>11        <input type="text" id="ad" name="sihirdar">12        <label for="ad">Takım adın</label>13        <input type="text" id="ad" name="takim">14    </form>

Error: Duplicate ID ad.From line 13, column 9; to line 13, column 48>↩        <input type="text" id="ad" name="takim">↩    < Warning: The first occurrence of ID ad was here.From line 11, column 9; to line 11, column 51>↩        <input type="text" id="ad" name="sihirdar">↩     

9    <h1>Ahri</h1>10    <h3>Yetenekler</h3>

Error: The heading h3 (with computed level 3) follows the heading h1 (with computed level 1), skipping 1 heading level.From line 10, column 5; to line 10, column 8</h1>↩    <h3>Yetene

9    <h1>Geliştirme sırası</h1>10    <li>Q: Aldatan Küre</li>11    <li>W: Tilki Ateşi</li>

Error: Element li not allowed as child of element body in this context. (Suppressing further errors from this subtree.)From line 10, column 5; to line 10, column 8</h1>↩    <li>Q: Ald Error: Element li not allowed as child of element body in this context. (Suppressing further errors from this subtree.)From line 11, column 5; to line 11, column 8</li>↩    <li>W: Til

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6</head>7<body>8    <h1>Ahri</h1>9</body>10</html>

Error: Element head is missing a required instance of child element title.From line 6, column 1; to line 6, column 7scale=1">↩</head>↩<body

<a href="www.leagueoflegends.com">Resmî site</a>

<input type="radio" id="orta" name="orta" value="orta"><label for="orta">Orta</label><input type="radio" id="alt" name="alt" value="alt"><label for="alt">Alt</label>

#Görevler

Her görevi sampiyon-sayfasi klasöründe ayrı bir dosyada (gorev1.html, gorev2.html…), tam iskeletle yap. Bitirince doğrulayıcıdan geçir; hedef her seferinde No errors or warnings to show. Önce kendin dene, takılırsan ipuçlarını sırayla aç, çözüme en son bak.

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Maç günlüğüm</title>7</head>8<body>9    <h1>Maç günlüğüm</h1>10    <p>Bugün Lux ile <strong>üç maç</strong> oynadım, ikisini kazandım.</p>11    <p><em>Kendime not:</em> Q'yu boşa atma.<br>Önce rakibin Flash'ını bekle.</p>12</body>13</html>

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Jinx - Sihirdar Rehberi</title>7</head>8<body>9    <h1>Jinx</h1>10    <img src="img/jinx.png" width="128" height="128">11    <p>Uzaktan vuran, <em>kaotik bir nişancı.</p>12    <h3>Silahları</h3>13    <li>Minigun</li>14    <li>Roket atar</li>15    <label for="favori">En sevdiğin silah</label>16    <input type="text" id="silah" name="silah">17</body>18</html>

Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.From line 10, column 5; to line 10, column 53</h1>↩    <img src="img/jinx.png" width="128" height="128">↩    < Error: End tag p seen, but there were open elements.From line 11, column 46; to line 11, column 49r nişancı.</p>↩    < Error: Unclosed element em.From line 11, column 23; to line 11, column 26an vuran, <em>kaotik

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Jinx - Sihirdar Rehberi</title>7</head>8<body>9    <h1>Jinx</h1>10    <img src="img/jinx.png" alt="Jinx'in portresi" width="128" height="128">11    <p>Uzaktan vuran, <em>kaotik bir nişancı.</em></p>12    <h2>Silahları</h2>13    <ul>14        <li>Minigun</li>15        <li>Roket atar</li>16    </ul>17    <label for="silah">En sevdiğin silah</label>18    <input type="text" id="silah" name="silah">19</body>20</html>

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>TFT faiz tablosu</title>7</head>8<body>9    <h1>TFT faiz tablosu</h1>10    <p>Her 10 altın için tur sonunda 1 altın faiz gelir, ama en fazla 5.</p>11    <table>12        <caption>Elindeki altına göre tur sonu faizi</caption>13        <thead>14            <tr>15                <th>Elindeki altın</th>16                <th>Faiz</th>17            </tr>18        </thead>19        <tbody>20            <tr>21                <td>0</td>22                <td>0</td>23            </tr>24            <tr>25                <td>9</td>26                <td>0</td>27            </tr>28            <tr>29                <td>10</td>30                <td>1</td>31            </tr>32            <tr>33                <td>19</td>34                <td>1</td>35            </tr>36            <tr>37                <td>20</td>38                <td>2</td>39            </tr>40            <tr>41                <td>49</td>42                <td>4</td>43            </tr>44            <tr>45                <td>50</td>46                <td>5</td>47            </tr>48            <tr>49                <td>75</td>50                <td>5</td>51            </tr>52        </tbody>53    </table>54</body>55</html>

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Yama notlarım</title>7</head>8<body>9    <h1>Yama notlarım</h1>10    <nav>11        <p>İçindekiler:</p>12        <ul>13            <li><a href="#sampiyonlar">Şampiyonlar</a></li>14            <li><a href="#esyalar">Eşyalar</a></li>15        </ul>16    </nav>17 18    <h2 id="sampiyonlar">Şampiyonlar</h2>19    <h3>Lux</h3>20    <img src="img/lux.png" alt="Lux'un simgesi" width="64" height="64">21    <ul>22        <li>Q yeteneğinin bekleme süresi kısaldı.</li>23        <li>R yeteneğinin hasarı arttı.</li>24    </ul>25    <h3>Garen</h3>26    <ul>27        <li>E yeteneğinde dönüş hızı arttı.</li>28    </ul>29 30    <h2 id="esyalar">Eşyalar</h2>31    <ul>32        <li>Zhonya'nın Kumsaati 100 altın pahalandı.</li>33    </ul>34 35    <p><a href="https://www.leagueoflegends.com/tr-tr/news/tags/patch-notes/" target="_blank" rel="noopener noreferrer">Resmî yama notları (yeni sekmede açılır)</a></p>36</body>37</html>

1<!doctype html>2<html lang="tr">3<head>4    <meta charset="utf-8">5    <meta name="viewport" content="width=device-width, initial-scale=1">6    <title>Vadi Kupası - Kayıt</title>7</head>8<body>9    <header>10        <p><strong>Vadi Kupası</strong></p>11        <nav>12            <ul>13                <li><a href="#kurallar">Kurallar</a></li>14                <li><a href="#oduller">Ödüller</a></li>15                <li><a href="#kayit">Kayıt</a></li>16            </ul>17        </nav>18    </header>19 20    <main>21        <h1>Vadi Kupası kayıtları açık</h1>22        <p>Takımını kur, kaydını <strong>cuma akşamına kadar</strong> yap.</p>23 24        <section id="kurallar">25            <h2>Kurallar</h2>26            <ol>27                <li>Her takımda 5 asıl oyuncu olur, en fazla 2 yedek eklenebilir.</li>28                <li>Maçlar Sihirdar Vadisi'nde turnuva seçimi (draft) ile oynanır.</li>29                <li>Maça 10 dakikadan fazla geç kalan takım hükmen kaybeder.</li>30            </ol>31        </section>32 33        <section id="oduller">34            <h2>Ödüller</h2>35            <table>36                <caption>Sıralamaya göre ödüller</caption>37                <thead>38                    <tr>39                        <th>Sıra</th>40                        <th>Ödül</th>41                    </tr>42                </thead>43                <tbody>44                    <tr>45                        <td>1.</td>46                        <td>Kupa ve sitede şampiyonlar köşesi</td>47                    </tr>48                    <tr>49                        <td>2.</td>50                        <td>Gümüş rozet</td>51                    </tr>52                    <tr>53                        <td>3.</td>54                        <td>Bronz rozet</td>55                    </tr>56                </tbody>57            </table>58        </section>59 60        <section id="kayit">61            <h2>Kayıt</h2>62            <form>63                <p>64                    <label for="takim">Takım adı</label>65                    <input type="text" id="takim" name="takim">66                </p>67                <p>68                    <label for="eposta">Kaptanın e-postası</label>69                    <input type="email" id="eposta" name="eposta">70                </p>71                <p>72                    <label for="oyuncu">Oyuncu sayısı (yedeklerle)</label>73                    <input type="number" id="oyuncu" name="oyuncu" min="5" max="7">74                </p>75                <fieldset>76                    <legend>Hangi gün oynayabilirsiniz?</legend>77                    <input type="radio" id="cumartesi" name="gun" value="cumartesi">78                    <label for="cumartesi">Cumartesi</label>79                    <input type="radio" id="pazar" name="gun" value="pazar">80                    <label for="pazar">Pazar</label>81                    <input type="radio" id="ikisi" name="gun" value="ikisi">82                    <label for="ikisi">İkisi de olur</label>83                </fieldset>84                <p>85                    <label for="sunucu">Sunucu</label>86                    <select id="sunucu" name="sunucu">87                        <option value="tr">TR</option>88                        <option value="euw">EUW</option>89                        <option value="eune">EUNE</option>90                    </select>91                </p>92                <p>93                    <label for="tanitim">Takımınızı tanıtın</label>94                    <textarea id="tanitim" name="tanitim" rows="4"></textarea>95                </p>96                <p>97                    <input type="checkbox" id="onay" name="onay">98                    <label for="onay">Kuralları okudum</label>99                </p>100                <button type="submit">Takımı kaydet</button>101                <button type="reset">Formu temizle</button>102            </form>103        </section>104    </main>105 106    <aside>107        <h2>Sorun mu var?</h2>108        <p>Turnuva sorumlusuna Discord'dan yaz: <strong>vadikupasi</strong></p>109    </aside>110 111    <footer>112        <p>Vadi Kupası bir hayran turnuvasıdır, Riot Games ile bağı yoktur.</p>113    </footer>114</body>115</html>

#Kendini sına

<img src="lux.png" alt="Lux'un portresi" width="128" height="128">

<p>Ahri      Lux Garen</p>

<h1>Ahri</h1><h3>Yetenekler</h3><h2>Oynanış</h2>

<label for="takim">Takım adı</label><input type="text" id="takimAdi" name="takim">

<form>    <label for="ad">Sihirdar adın</label>    <input type="text" id="ad" name="ad">    <button>Rastgele ad öner</button></form>

#Kayıt noktası

Bu derste yeni bir klasörde çalıştın, o yüzden Git'i bu klasörde baştan başlatıyorsun. VS Code terminalinde, C:\kod\sampiyon-sayfasi klasöründeyken:

Bir sonraki derste CSS'e geçiyorsun: renk, yazı tipi ve boşluk verecek, kutu modeliyle her öğenin etrafındaki boşlukları yönetecek ve sıfırdan bir şampiyon kartı boyayacaksın.