HTML Academy · Ders

figure ve figcaption

Görselleri açıklamalarıyla birlikte anlamsal figure kapsayıcılarına almayı öğrenin.

figure ve figcaption, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. 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.

figure Nedir

<figure> elementi, ana metinde kendisine gönderme yapılan bağımsız içeriği işaretler:

Açıklamalı görseller
Kod listeleri
Diyagramlar, grafikler ve çizimler
Alıntılar

Temel özellik şudur: Ana akıştan çıkarılırsa çevresindeki metin yine de anlamlı olur.

figcaption ile figure

<figcaption>, figure için bir açıklama sağlar:

<figure>
  <img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
  <figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->

figcaption Konumu

<figcaption>, ana içeriğin öncesine veya sonrasına yerleştirilebilir:

<figure>
  <figcaption>Listing 1: Hello World in HTML</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;Hello, World!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Erişilebilirlik: alt ve figcaption

Aralarındaki farkı anlayın:

alt — ekran okuyucular ve bozuk görseller için görselin içeriğini açıklar
figcaption — bağlam, kaynak veya açıklama sağlayan görünür başlık

Farklı amaçlara hizmet ederler ve birbirlerinin aynısı olmamalıdırlar.

<figure>
  <img src="chart.png" alt="Line chart showing 45% growth from January to December">
  <figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>

figure İçinde Kod Listesi

Etiketli kod örnekleri için <figure> kullanın:

<figure>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
  <figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>

figure İçinde Alıntı

<figure>, <blockquote> ile çok iyi çalışır:

<figure>
  <blockquote>
    <p>The web is for everyone.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>

figure İçinde Birden Fazla Görsel

Bir figure, birbiriyle ilişkili birden fazla görsel içerebilir:

<figure>
  <img src="before.jpg" alt="Garden before renovation">
  <img src="after.jpg" alt="Garden after renovation">
  <figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>

figure ve div

<figure> ile <div> ne zaman kullanılır:

İçerik bir eke taşınabilecekse <figure> kullanın
Görünür bir açıklamaya ihtiyaç duyuyorsanız <figure> kullanın
Düzen kapsayıcıları veya bağımsız olmayan görsel grupları için <div> kullanın

Metin İçinde Figure'lara Bağlantı Verme

Ana metinden figure'lara gönderme yapın:

<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>

<figure id="fig1">
  <img src="growth.png" alt="Revenue growth chart 2020-2024">
  <figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>

Görseller için figure Zorunlu Değildir

Her görseli <figure> içine almanız gerekmez:

<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">

<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
  <img src="diagram.svg" alt="System architecture diagram">
  <figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>

figure ve figcaption Biçimlendirme

Figure'lar için yaygın CSS:

figure {
  margin: 2rem auto;
  max-width: 100%;
  text-align: center;
}

figcaption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}

Hızlı Kontrol

Alt metni ile figcaption arasındaki temel fark nedir?

Özet: figure ve figcaption

Figure'ın temel özellikleri:

<figure> — ana metinde kendisine gönderme yapılan bağımsız içerik
<figcaption> — figure'ın ilk veya son alt öğesi olan görünür açıklama
alt — ekran okuyucular için görünmez açıklama
figcaption — tüm kullanıcılar için görünür bağlam
Görseller, kodlar, alıntılar ve grafiklerle çalışır

Sıkça Sorulan Sorular

“figure ve figcaption” dersi ücretsiz mi?

Evet — “figure ve figcaption” 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.

“figure ve figcaption” dersinde ne öğreneceğim?

Görselleri açıklamalarıyla birlikte anlamsal figure kapsayıcılarına almayı öğ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 4. dersidir.

“figure ve figcaption” 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