Paragraflar, em, strong, b ve i
Düzyazıyı anlamsal vurgulama ve kalın yazı etiketleriyle işaretlemeyi öğrenin.
Paragraflar, em, strong, b ve i, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Paragraf Öğesi
<p> öğesi, bir metin bloğunu paragraf olarak işaretler:
<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>Anlamsal Vurgu: em
<em> öğesi, metni anlamı değiştiren sözcüğü vurgulayacak şekilde işaretler:
<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->Anlamsal Önem: strong
<strong> öğesi, metni özellikle önemli olarak işaretler:
<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->em ve i Karşılaştırması
<em> ve <i> varsayılan olarak italik görüntülenir, ancak anlamları farklıdır:
<em>— anlamsal vurgu (çoğunlukla bunu kullanın)<i>— görsel amaçlı italik: teknik terimler, başlıklar ve yabancı ifadeler
<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>strong ve b Karşılaştırması
<strong> ve <b> varsayılan olarak kalın görüntülenir, ancak anlamsal açıdan farklıdır:
<strong>— anlamsal önem (çoğunlukla bunu kullanın)<b>— önem belirtmeden dikkat çekme: anahtar sözcükler, ürün adları
<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>em ve strong Öğelerini İç İçe Yerleştirme
Birleşik bir etki oluşturmak için vurgu öğelerini iç içe yerleştirebilirsiniz:
<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->Paragraflar İç İçe Yerleştirilemez
Bir <p> öğesi başka bir <p> öğesi içeremez:
<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>
<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>Paragraflarda Satır İçi ve Blok Öğeleri
<p>, yalnızca satır içi öğeler içerebilen bir blok öğesidir:
<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>
<!-- INVALID: block element inside p -->
<p>
<div>A div inside p is invalid</div>
</p>Vurgunun Erişilebilirliği
Anlamsal işaretlemenin yardımcı teknolojiler açısından önemi:
- Ekran okuyucular, bazı uygulamalarda
<em>öğesini değişen tonlamayla seslendirir <strong>ek vurguyla okunabilir- Yalnızca CSS ile uygulanan kalın veya italik biçimlendirme (örneğin bir span üzerindeki
font-style: italic), ekran okuyucular için anlamsal bir anlam taşımaz
Yaygın Hatalar
Şu yaygın metin işaretleme hatalarından kaçının:
<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph
<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>
<!-- Bad: bold for visual style only -->
<b>Heading Text</b>
<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>Her Öğenin Kullanım Zamanı
Hızlı karar rehberi:
- Düzyazı metni parçası →
<p> - Anlamı değiştiren bir sözcüğü vurgulama →
<em> - Kritik bilgiyi işaretleme →
<strong> - Bir başlığı veya teknik terimi italik yapma →
<i> - Önem belirtmeden bir anahtar sözcüğü öne çıkarma →
<b>
Hızlı Kontrol
Metni kritik derecede önemli olarak işaretlemek için hangi öğeyi kullanmalısınız?
Özet: Metin Anlamları
Metin işaretleme özeti:
<p>— düzyazı paragrafları<em>— cümlenin anlamını değiştiren vurgu<strong>— güçlü önem<i>— görsel amaçlı italik (başlıklar, terimler)<b>— önem belirtmeden dikkat çekme- Paragraflar arasındaki boşluk için hiçbir zaman
<br><br>kullanmayın
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
- 40
- Dersler
- 159
Sıkça Sorulan Sorular
“Paragraflar, em, strong, b ve i” dersi ücretsiz mi?
Evet — “Paragraflar, em, strong, b ve i” 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Paragraflar, em, strong, b ve i” dersinde ne öğreneceğim?
Düzyazıyı anlamsal vurgulama ve kalın yazı etiketleriyle işaretlemeyi öğrenin. HTML 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.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML 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 2. dersidir.
“Paragraflar, em, strong, b ve i” 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML 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
- Başlıklar h1-h6 ve Hiyerarşileri
- Paragraflar, em, strong, b ve i
- br, hr, blockquote ve pre
- span ve div Öğeleri