Metinler, Görseller, Bağlantılar ve Listeler
Metinleri başlıklar ve paragraflarla biçimlendirin, alt metinli görseller yerleştirin, köprüler oluşturun ve sıralı ve sırasız listeler hazırlayın.
Metinler, Görseller, Bağlantılar ve Listeler, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Başlıklar: h1'den h6'ya
HTML altı başlık düzeyi sağlar. Bunları metin boyutunu değiştirmek için değil, bir belge ana hattı oluşturmak için kullanın. <h1> sayfa başlığıdır (sayfa başına bir kez), <h2> ana bölümler, <h3> alt bölümler içindir ve bu şekilde devam eder.
<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>Paragraflar ve <br>
<p> öğesi bir metin paragrafını sarar. Tarayıcı üstte ve altta otomatik olarak boşluk ekler. <br> öğesini ölçülü kullanın — yalnızca adres veya şiirdeki gibi anlamlı satır sonları için; paragraflar arasına boşluk koymak için değil.
Satır İçi Metin Öğeleri
Metne anlam kazandırmak için satır içi öğeleri kullanın: önemli metinler için <strong> (kalın), vurgu için <em> (italik), kod parçacıkları için <code>, vurgulanmış metin için <mark> ve küçük puntolu metin için <small>.
<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>Görseller: <img> Öğesi
<img> öğesi bir görsel yerleştirir. src özniteliği URL'yi belirtir; alt ise ekran okuyucuları ve görsel yüklenemediğinde kullanılacak alternatif metni sağlar. Her zaman anlamlı bir alt değeri ekleyin.
<img src="/images/hero.webp"
alt="A developer typing code on a laptop"
width="800"
height="450">İyi Alt Metin Yazma
Alt metin, görselin içeriğini ve amacını aktarmalıdır. Dekoratif görsellerde (boşluk oluşturucular ve yalnızca süsleme amaçlı simgeler) ekran okuyucularının bunları atlaması için alt="" (boş dize) kullanın. Asla alt="image of" yazmayın — yalnızca görselin ne gösterdiğini açıklayın.
Bağlantılar: <a> Öğesi
<a>(çapa) öğesi bağlantılar oluşturur. href özniteliği hedef adresi belirler. Bağlantı metni hedefi açıklamalıdır — asla "buraya tıklayın" yazmayın.
<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Internal link -->
<a href="/courses">Browse Courses</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>target=_blank Güvenlik Notu
Bağlantıları target="_blank" ile yeni bir sekmede açarken her zaman rel="noopener noreferrer" ekleyin. Aksi durumda açılan sayfa, açan sayfanın pencere nesnesine erişebilir; bu, ters sekme ele geçirme adı verilen bir güvenlik açığıdır.
Sırasız Listeler: <ul>
Öğe sırasının önemli olmadığı durumlarda <ul> (sırasız liste) kullanın — özellikler, malzemeler ve gezinme bağlantıları gibi. Her öğe bir <li> olur. Tarayıcı varsayılan olarak madde işaretleri gösterir, ancak bunları neredeyse her zaman CSS ile biçimlendirirsiniz.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Sıralı Listeler: <ol>
Sıranın önemli olduğu durumlarda <ol> (sıralı liste) kullanın — öğreticideki adımlar, sıralamalar ve yönergeler gibi. Öğeler otomatik olarak numaralandırılır. Numaralandırmayı denetlemek için start ve reversed özniteliklerini kullanın.
<ol>
<li>Install Node.js</li>
<li>Create a new project</li>
<li>Run npm install</li>
</ol>Tanım Listeleri: <dl>
<dl> (tanım listesi), terimleri ve bunların tanımlarını veya açıklamalarını gruplar. Bunu sözlükler, üst veriler (yazar/tarih) ve anahtar-değer çiftleri için kullanın. <dt> terim, <dd> ise açıklamadır.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure layer.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>İç İçe Listeler
Hiyerarşileri göstermek için listeler iç içe yerleştirilebilir. Alt <ul> veya <ol> öğesini üst <li> öğesinin içine yerleştirin. Yalnızca girinti vermek için iç içe liste kullanmayın — bunun yerine CSS kullanın.
Hızlı Kontrol
Ekran okuyucuları için bir görselin metin açıklamasını hangi öznitelik sağlar?
Özet: Metin, Görseller, Bağlantılar ve Listeler
Belge yapısı için başlık öğelerini, paragraflar için p öğesini, anlamlı alt metin içeren görseller için img öğesini, gezinme için açıklayıcı bağlantı metnine sahip a öğesini ve liste içeriği için ul/ol/dl öğelerini kullanın. Anlamsallık, HTML'yi erişilebilir ve makineler tarafından okunabilir kılar.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Metinler, Görseller, Bağlantılar ve Listeler” dersi ücretsiz mi?
Evet — “Metinler, Görseller, Bağlantılar ve Listeler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Metinler, Görseller, Bağlantılar ve Listeler” dersinde ne öğreneceğim?
Metinleri başlıklar ve paragraflarla biçimlendirin, alt metinli görseller yerleştirin, köprüler oluşturun ve sıralı ve sırasız listeler hazırlayın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Metinler, Görseller, Bağlantılar ve Listeler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Belge Yapısı: DOCTYPE html head body
- Anlamsal Etiketler: header nav main article footer
- Metinler, Görseller, Bağlantılar ve Listeler
- Formlar: input label button