HTML Dokümantasyonu
Kısa ve örneklerle anlatılan HTML kaynağı. Kavramı oku, kodu gör, sonra Coddy yolculuğunda uygula.
Rehberli bir HTML yolculuğuna başlaBaşlarken
- Doctype`<!DOCTYPE html>` her HTML belgesinin ilk satırıdır. Tarayıcıya sayfayı quirks modu yerine standart modda göstermesini söyler. Sözdizimini, eski doctype'ların neye yol açtığını ve modu nasıl kontrol edeceğini öğren.
- HTML etiketleriHTML etiketleri içeriği işaretler, böylece tarayıcı her parçanın ne olduğunu bilir: bir başlık, bir paragraf, bir link, bir resim. Etiketlerin ve elementlerin nasıl çalıştığını, hangi etiketlerin kapanış etiketi olmadığını, iç içe yazımı ve en çok kullanacağın etiketleri öğren.
- HTML özellikleriÖzellikler bir HTML elementine bilgi ekler: bir linkin nereye gittiği, bir resmin ne gösterdiği, hangi CSS sınıfının uygulandığı. Sözdizimini, her elementin kabul ettiği global özellikleri, class ve id'yi, boolean özellikleri ve data-* özelliklerini öğren.
- HTML yorum satırıHTML yorumu, <!-- ile --> arasındaki ve tarayıcının göstermediği metindir. Sözdizimini, çok satırlı yorumları, kodu yoruma almayı, editör kısayolunu, yorumların neden iç içe yazılamadığını ve neden hiçbir zaman gizli olmadığını öğren.
- HTML div<div> etiketi, kendine ait bir anlamı olmayan genel bir blok kapsayıcıdır. İçeriği onunla gruplamayı, bir class ile stil vermeyi, div'ler ve flexbox ile yerleşim kurmayı ve ne zaman anlamsal bir etiketin ya da bir butonun daha iyi olduğunu öğren.
- HTML span<span> etiketi genel bir satır içi kapsayıcıdır: bir satırın içindeki birkaç kelimeyi sarar, böylece satırı bölmeden onlara stil verebilir ya da script ile ulaşabilirsin. Nasıl kullanıldığını, div'den farkını ve ne zaman daha belirli bir etiketin uygun olduğunu öğren.
Metin
- HTML başlıklarHTML'de sayfaya ana hatlarını veren altı başlık seviyesi vardır: <h1> ile <h6> arası. Varsayılan boyutları, başlıkların nasıl sıralanacağını, kaç tane h1 kullanılacağını, boyutlarının CSS ile nasıl değiştirileceğini ve ekran okuyucuların onları nasıl kullandığını öğren.
- Alt satıra geçmeBir metin bloğunun içinde yeni bir satır başlatmak için <br> kullan. <br> etiketinin ne zaman doğru, ne zaman paragrafın daha iyi olduğunu, metindeki satır sonlarını nasıl koruyacağını, uzun kelimelerin <wbr> ile nasıl bölüneceğini ve bir satırın bölünmesini nasıl engelleyeceğini öğren.
- HTML'de boşlukTarayıcılar HTML'deki art arda gelen boşlukları tek bir boşluğa indirir. ile fazladan boşluk eklemeyi, bölünmez boşluğun ne yaptığını, <pre> ve white-space ile boşlukları ve tab'ları korumayı ve CSS ile boşluk vermenin ne zaman daha iyi olduğunu öğren.
- Kalın ve italik yazıHTML'de metni <strong> ya da <b> ile kalın, <em> ya da <i> ile italik yap. Hangi etiketi ne zaman kullanacağını, kalın ve italiği nasıl birleştireceğini ve metni CSS ile nasıl kalın ya da italik yapacağını öğren.
- Altı çizili yazıHTML'de metnin altını <u> ya da CSS text-decoration ile çiz, üstünü <s> ya da <del> ile çiz. Her etiketin ne anlama geldiğini, <ins> ve <del> ile düzenlemelerin nasıl işaretlendiğini ve link olmayan bir metnin altını çizmenin okurları neden şaşırttığını öğren.
- Üst simgeÜst simge metni <sup>, alt simge metni <sub> ile yaz: üsler, sıra sayıları, dipnot işaretleri ve kimyasal formüller. Yaygın kullanımları, satırları birbirinden uzaklaştırmalarını nasıl engelleyeceğini ve ne zaman bir Unicode karakterin ya da MathML'in daha uygun olduğunu öğren.
- Yatay çizgiHTML'de <hr> etiketiyle yatay bir çizgi çiz. Ne anlama geldiğini, rengini, kalınlığını, genişliğini ve stilini CSS ile nasıl değiştireceğini, ortasında yazı olan bir ayırıcıyı nasıl yapacağını ve dikey bir çizgiyi nasıl çizeceğini öğren.
- Metni ortalamaHTML'de metni CSS text-align: center özelliğiyle ortala. Nereye yazılacağını, span üzerinde neden çalışmadığını, bir kutuda metni dikey olarak nasıl ortalayacağını, metni başa, sona ya da iki kenara nasıl hizalayacağını ve paragraflara nasıl girinti vereceğini öğren.
Bağlantılar ve görseller
- Link verme (a href)<a> elementi linkleri nasıl oluşturur: href özelliği, mutlak ve göreli URL'ler, #id ile sayfanın bir bölümüne atlama, indirme linkleri, kart linkleri ve linkleri bozan hatalar.
- Yeni sekmede açmaBir linki yeni sekmede açmak için ona target="_blank" ekle. Bu sayfa rel="noopener" ve noreferrer değerlerini, kullanıcılara linkin yeni sekmede açıldığını söylemeyi, diğer target değerlerini ve bunu JavaScript ile yapmayı anlatıyor.
- mailto linkihref="mailto:" ile yeni bir e-posta açan bir link yap, konuyu, gövdeyi, cc ve bcc alanlarını doldur, bunları doğru kodla ve tel: ile sms: kullanarak tıklayınca arayan linkler oluştur.
- Buton linkBaşka bir sayfaya giden bir butonun doğru yolu, buton gibi stil verilmiş bir linktir. Link içindeki bir butonun ve onclick ile yönlendirmenin neden bozulduğunu, ne zaman bir form butonunun doğru seçim olduğunu ve link butonlara nasıl stil verilip devre dışı bırakılacağını gör.
- Resim eklemeHTML'de <img> etiketiyle resim ekleme: src ve alt, width ve height ile resim boyutunu ayarlama, responsive resimler, object-fit ile kırpma, figure ile resim altı yazısı, lazy loading ve resimlerin altındaki boşluk.
Listeler ve tablolar
- HTML listelerHTML'de liste yapma: <ul> ile madde işaretleri, <ol> ile numaralı listeler (start, reversed, harfler ve Roma rakamları), iç içe listeler, tanım listeleri ve madde işaretlerine CSS ile stil verme ya da onları kaldırma.
- HTML tableHTML'de tablo oluşturma: <tr> ile satırlar, <td> ile hücreler, <th> ve scope ile başlık hücreleri, caption, thead, tbody ve tfoot, zebra çizgiler ve küçük ekranlarda kayan tablolar.
- Tablo kenarlığıCSS ile HTML tablosuna kenarlık ekleme: border-collapse ile tek çizgiler, border-spacing, yalnızca satır çizgileri, yalnızca iç kenarlıklar, yuvarlak köşeler ve border özelliğinin neden artık kullanılmadığı.
- colspan ve rowspanTablo hücrelerini colspan ile sütunlar boyunca, rowspan ile satırlar boyunca birleştir. Tablo düzgün kalsın diye hücreleri nasıl sayacağını, gruplanmış başlıklar kurmayı ve birleştirilmiş tabloları ekran okuyucular için okunur tutmayı öğren.
Formlar
- HTML formHTML'de form oluşturma: form elementi, name özellikleri, action ve method (GET ve POST), fieldset ve legend ile gruplama, required ve pattern ile yerleşik doğrulama ve gönderimi JavaScript ile işleme.
- Input türleriHTML <input> etiketinin tüm türleri tek yerde: text, email, password, number, range, date ve time, color, file, hidden ve diğerleri; her birinin neyi doğruladığı, telefonlarda hangi klavyeyi açtığı ve ortak özellikleri.
- HTML buttonHTML'de <button> elementiyle buton yapma: üç tür (submit, button, reset), formla birlikte değer gönderme, devre dışı butonlar, ikonlar ve odak halkasını koruyan CSS stilleri.
- HTML checkboxHTML'de <input type="checkbox"> ile checkbox yapma: label'lar, checked özelliği, işaretliyken ve değilken formun ne gönderdiği, checkbox grupları, indeterminate durumuyla tümünü seç ve stil verme.
- Radio butonHTML'de radio butonlar nasıl çalışır: name özelliğiyle gruplama, checked ile varsayılan seçim, zorunlu gruplar, seçilen değeri JavaScript'te okuma, klavye davranışı ve onlara özel daireler ya da kartlar olarak stil verme.
- Açılır liste (select)HTML'de <select> ve <option> ile açılır liste yapma: değerler, varsayılan ya da placeholder seçenek, required, seçenek grupları, çoklu seçim, değeri JavaScript'te okuma ve ayarlama, oka stil verme.
- HTML textarea<textarea> ile çok satırlı metin alanı yapma: rows ve cols, etiketlerin arasındaki varsayılan metin, yeniden boyutlandırma ve otomatik büyüme, karakter sayacıyla maxlength, gönderilen metindeki satır sonları ve stil verme.
- HTML label<label> elementi bir form alanını nasıl adlandırır: onu for ve id ile ya da sararak bağlama, checkbox ve radio'lar için daha büyük tıklama alanı, ipuçları ve hata mesajları, gizli label'lar ve bağlantıyı bozan hatalar.
Anlamsal HTML
- Semantik HTMLAnlamsal HTML, etiketleri içeriğin nasıl göründüğüne göre değil, ne olduğuna göre seçmek demektir. Anlamsal yerleşim etiketlerini (header, nav, main, article, aside, footer), ekran okuyuculara ve arama motorlarına ne kazandırdıklarını ve sayfa yapını nasıl kontrol edeceğini öğren.
- HTML header<header> elementi bir sayfanın ya da bölümün girişini tutar: bir logo, bir başlık, gezinme, bir yazar satırı. Bir site header'ı yapmayı, <header> etiketinin <head> ve başlıklardan farkını, makalelerin içinde nasıl kullanıldığını ve nasıl sabit (sticky) yapılacağını öğren.
- HTML footer<footer> elementi bir sayfayı ya da bölümü kapatır: telif hakkı, iletişim bilgileri, linkler, yazar bilgisi. Link sütunlarıyla bir site footer'ı yapmayı, kısa bir sayfada onu en altta tutmayı ve footer'ların makalelerin içinde nasıl çalıştığını öğren.
- HTML nav<nav> elementi başlıca gezinme linklerinden oluşan bir bloğu işaretler. <nav> ve bir listeyle gezinme çubuğu yapmayı, geçerli sayfayı işaretlemeyi, bir sayfadaki birkaç nav'ı etiketlemeyi ve mobil menü açma kapama butonu yapmayı öğren.
- HTML section<section> elementi tek bir temaya ait içeriği kendi başlığı altında gruplar. <section> etiketini ne zaman kullanacağını, ne zaman <article> ya da <div> etiketinin daha iyi olduğunu, üçünün nasıl iç içe yazıldığını ve etiketlenmiş bir section'ın nasıl landmark olduğunu öğren.
Head ve meta etiketleri
- title etiketi<title> elementi sayfayı tarayıcı sekmesinde, yer imlerinde ve arama sonuçlarında adlandırır. Nereye yazıldığını, ne kadar uzun olması gerektiğini, <h1> ve title özelliğinden farkını ve JavaScript ile nasıl değiştirileceğini öğren.
- Meta viewportViewport meta etiketi telefonlara sayfayı masaüstü genişliği yerine ekran genişliğinde yerleştirmelerini söyler. Standart etiketi, her değerin ne yaptığını, responsive CSS'in neden ona bağlı olduğunu ve hangi değerlerden kaçınman gerektiğini öğren.
- HTML yönlendirmeBir sayfayı düz HTML'de meta refresh etiketiyle, JavaScript ile ya da sunucuda başka bir sayfaya yönlendir. Meta refresh sözdizimini, bir sayfanın nasıl otomatik yenileneceğini, sunucudaki 301 yönlendirmesinin neden daha iyi olduğunu ve arama motorlarının her biriyle ne yaptığını öğren.
- Favicon eklemeFavicon, tarayıcı sekmesindeki küçük ikondur. Onu ekleyen link etiketini, hangi dosya ve boyutların gerektiğini (ICO, SVG, PNG, apple-touch-icon), SVG ya da emoji favicon yapmayı, onu JavaScript ile değiştirmeyi ve eski bir ikonun neden görünmeye devam ettiğini öğren.
- lang özelliğilang özelliği tarayıcılara, ekran okuyuculara ve çeviri araçlarına içeriğinin hangi dilde olduğunu söyler. Nereye yazılacağını, hangi kodların kullanılacağını (en, en-US, pt-BR, tr), başka dildeki bir ifadenin nasıl işaretleneceğini ve değiştirdiği görünür şeyleri öğren.
Medya ve etkileşimli öğeler
- HTML iframe<iframe> elementi senin sayfanın içinde başka bir web sayfası gösterir. Gereken özellikleri (src, title, width, height), YouTube videolarını ve haritaları yerleştirmeyi, bir iframe'i responsive yapmayı, sandbox'ın onun yapabileceklerini nasıl sınırladığını ve bazı sitelerin neden bir iframe içinde yüklenmeyi reddettiğini öğren.
- HTML video<video> elementi video dosyalarını tarayıcının kendi oynatıcısıyla oynatır. İşaretlemeyi, önemli özellikleri (controls, autoplay, muted, loop, playsinline, poster, preload), <source> ile yedek biçimleri, <track> ile altyazıları, responsive boyutlandırmayı ve oynatmayı JavaScript ile kontrol etmeyi öğren.
- HTML audio<audio> elementi ses dosyalarını tarayıcının yerleşik oynatıcısıyla çalar. İşaretlemeyi, özellikleri (controls, autoplay, loop, muted, preload), hangi biçimlerin kullanılacağını, sesli otomatik oynatmanın neden engellendiğini ve JavaScript ile kendi oynat butonunu yapmayı öğren.
- details ve summary<details> ve <summary> elementleri JavaScript olmadan açılır kapanır bir bölüm yapar: summary her zaman görünür ve ona tıklamak geri kalanı gösterir ya da gizler. İşaretlemeyi, open ve name özelliklerini, akordeonları, oka stil vermeyi ve toggle olayını öğren.
