HTML Academy · Ders

br, hr, blockquote ve pre

Satır sonlarını, tematik ayraçları, alıntıları ve önceden biçimlendirilmiş metni denetlemeyi öğrenin.

br, hr, blockquote ve pre, CoddyKit'te ücretsiz bir HTML 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, 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.

br Öğesi

  öğesi, metin içeriğine bir satır sonu ekler:

<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->

br Ne Zaman Kullanılır

  öğesini yalnızca satır sonlarının içeriğin bir parçası olduğu durumlarda kullanın:

Posta adresleri
Belirli satır sonlarına sahip şiirler
Şarkı sözleri

Paragraflar arasına görsel boşluk eklemek için   kullanmayın — bu CSS'nin görevidir.

hr Öğesi

<hr> öğesi, içerik arasındaki tematik ayrımı temsil eder:

<p>Chapter One begins here and introduces the characters.</p>

<hr>

<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->

hr Öğesini CSS ile Biçimlendirme

<hr> tamamen biçimlendirilebilir:

<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">

<!-- Or in CSS: -->
<!--
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1.5rem 0;
}
-->

blockquote Öğesi

<blockquote> öğesi, başka bir kaynaktan alıntılanan bir bölümü işaretler:

<blockquote cite="https://example.com/article">
  <p>The best time to plant a tree was 20 years ago.
     The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->

q ile Satır İçi Alıntılar

Kısa satır içi alıntılar için <blockquote> yerine <q> kullanın:

<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->

pre Öğesi

<pre> öğesi, metni sabit genişlikli bir yazı tipiyle görüntüler ve boşlukları tam olarak korur:

<pre>
function hello() {
    console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->

pre ve code Birlikte

Kod blokları için <pre> ve <code> öğelerini birlikte kullanın:

<pre><code>
const greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->

pre İçinde Özel Karakterleri Kaçırma

<pre> içindeki özel HTML karakterleri yine de kaçırılmalıdır:

<pre><code>
<!-- These must be escaped: -->
&lt;div class="box"&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
<!-- &lt; = <   &gt; = >   &amp; = & -->
</code></pre>

Boşlukların Birleştirilmesi

Normal HTML, boşlukları birleştirir — birden çok boşluk ve satır sonu tek bir boşluğa dönüşür:

<p>This    has    extra    spaces.</p>
<!-- Renders as: "This has extra spaces." -->

<pre>This    keeps    all    spaces.</pre>
<!-- Renders exactly as written -->

<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved&#10;newlines</p>

Boşluk Öğelerinin Özeti

Hızlı başvuru:

  — satır içi satır sonu (adresler, şiir)
<hr> — tematik bölüm ayrımı
<blockquote> — blok düzeyinde alıntı
<q> — satır içi alıntı
<pre> — boşlukları koruyan, önceden biçimlendirilmiş metin
<code> — satır içi kod parçacığı

Hızlı Kontrol

Boşluklar ve satır sonları da dahil olmak üzere tüm boşlukları yazıldığı hâliyle koruyan öğe hangisidir?

Özet: br, hr, blockquote ve pre

Boşluk ve alıntı öğeleri:

  — içerik içinde satır sonu (boşluk oluşturmak için kullanılmaz)
<hr> — tematik içerik ayrımı (yalnızca görsel değil, anlamsal)
<blockquote cite> — kaynağı belirtilen blok alıntısı
<q> — satır içi alıntı
<pre><code> — biçimlendirilmiş kod blokları

Sıkça Sorulan Sorular

“br, hr, blockquote ve pre” dersi ücretsiz mi?

Evet — “br, hr, blockquote ve pre” 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.

“br, hr, blockquote ve pre” dersinde ne öğreneceğim?

Satır sonlarını, tematik ayraçları, alıntıları ve önceden biçimlendirilmiş metni denetlemeyi öğ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 3. dersidir.

“br, hr, blockquote ve pre” 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

← HTML Academy Sayfasına Dön