HTML Academy · Ders

img Öğesi: src, alt, width ve height

Gerekli tüm özniteliklerle görselleri doğru biçimde yerleştirmeyi öğrenin.

img Öğesi: src, alt, width ve height, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. 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.

img Öğesi

<img> öğesi, sayfaya bir görsel yerleştirir:

<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->

src Özniteliği

src özniteliği, görselin kaynağını belirtir:

<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">

<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">

<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">

<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">

alt Özniteliği

alt özniteliği, görseller için alternatif metin sağlar:

Görsel yüklenemediğinde gösterilir
Ekran okuyucular tarafından sesli okunur
Arama motorları tarafından dizine eklenir
Erişilebilirlik için gereklidir (WCAG)

İyi alt Metni Yazma

Etkili alt metni nasıl yazılır:

<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->

<!-- Functional image (button/link): describe the action -->
<a href="/">
  <img src="logo.png" alt="Go to homepage">
</a>

Genişlik ve Yükseklik Öznitelikleri

Görsellerde her zaman width ve height belirtin:

<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
     This prevents layout shift (CLS) — a Core Web Vital metric -->

En-Boy Oranı ve CSS

Genişlik ve yüksekliği HTML'de belirtmek, CSS'in en-boy oranını hesaplamasını sağlar:

<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">

<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
  width: 100%;
  height: auto;  /* auto preserves the aspect ratio -->
}
-->

Web'deki Görsel Biçimleri

Yaygın görsel biçimleri ve kullanım alanları:

JPEG/JPG — fotoğraflar ve çok sayıda renk içeren karmaşık görseller
PNG — saydamlık gerektiren görseller
WebP — modern biçim: JPEG/PNG'den daha küçük, saydamlığı destekler
AVIF — yeni nesil biçim: WebP'den bile daha iyi sıkıştırma
SVG — simgeler ve çizimler (vektörel, sınırsız ölçeklenebilir)
GIF — basit animasyonlar (çoğunlukla videonun yerini almıştır)

Yükleme Özniteliği

Görsellerin ne zaman yükleneceğini loading özniteliğiyle denetleyin:

<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">

<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">

<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->

decoding Özniteliği

decoding özniteliği, görsel kodunun çözülme davranışını denetler:

<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->

fetchpriority Özniteliği

fetchpriority özniteliği, görsel yükleme önceliğine ilişkin bir ipucu verir:

<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">

<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
     loading="lazy" width="400" height="300">

Eksiksiz img Örneği

Erişilebilirliği tam ve performans için iyileştirilmiş bir görsel:

<img
  src="/images/team-photo.jpg"
  alt="The Coddy team gathered at a conference table in 2024"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Hızlı Kontrol

img öğelerinde neden her zaman width ve height özniteliklerini belirtmelisiniz?

Özet: img Öğesi

Görsel yerleştirmenin temel noktaları:

src — görsel URL'si (göreli veya mutlak)
alt — gerekli açıklama; dekoratif görseller için boş bırakılır
width ve height — yerleşim kaymasını önlemek için her zaman belirtilmelidir
Ekranın alt kısmında kalan görseller için loading="lazy"
Doğru biçimi seçin: fotoğraflar için WebP/AVIF, simgeler için SVG

Sıkça Sorulan Sorular

“img Öğesi: src, alt, width ve height” dersi ücretsiz mi?

Evet — “img Öğesi: src, alt, width ve height” 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.

“img Öğesi: src, alt, width ve height” dersinde ne öğreneceğim?

Gerekli tüm özniteliklerle görselleri doğru biçimde yerleştirmeyi öğ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 1. dersidir.

“img Öğesi: src, alt, width ve height” 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