HTML for Kids · Ders

Görseller: Sayfanıza Resim Ekleme

Web sayfanıza görseller ekleyip biçimlendirin

Görseller: Sayfanıza Resim Ekleme, CoddyKit'te ücretsiz bir HTML for Kids 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 for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 4 dersten oluşur.

Görseller: Sayfanıza Resim Ekleme

Sonraki derse hoş geldiniz! Bugün web sayfalarınıza nasıl görsel ekleyeceğinizi öğreneceğiz. Resimler sayfalarınızı daha ilgi çekici ve eğlenceli hâle getirir!

HTML'de Görseller Nedir?

Görseller web sayfalarına <img> etiketi kullanılarak eklenir. Bu, kapanış etiketi gerektirmeyen, kendi kendine kapanan bir etikettir; yani </img> gibi bir kapanış etiketine ihtiyaç duymaz.

Şimdi nasıl kullanıldığını öğrenelim!

Görsel Ekleme

Görsel eklemek için görsel dosyasının konumunu belirtmek üzere src özniteliğini kullanın.

Örnek:

Bu örnekte:

src: Görsel dosyasını belirtir.
alt: Görsel görüntülenemezse alternatif metin sağlar.

<img src="https://www.w3.org/html/logo/img/html5-display.png" 
alt="A beautiful view" />

Alternatif Metin (alt Özniteliği)

alt özniteliği görseli açıklar. Erişilebilirlik açısından önemlidir ve arama motorlarının görselinizi anlamasına yardımcı olur.

Örnek:

Görsel yüklenmezse bunun yerine "A beautiful sunset over the ocean" metni görünür.

<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />

Görsel Boyutlarını Ekleme

width ve height özniteliklerini kullanarak görselinizin boyutunu kontrol edebilirsiniz.

Örnek:

Bu örnekte görselin genişliği 300 piksel, yüksekliği 200 piksel olarak ayarlanır.

<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />

Görsellere Bağlantı Verme

Bir görseli <a> etiketinin içine yerleştirerek tıklanabilir bir bağlantıya dönüştürebilirsiniz.

Örnek:

Görsele tıklandığında kullanıcı https://example.com adresine yönlendirilir.

<a href="https://example.com">
  <img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>

Çevrim İçi Görselleri Kullanma

src özniteliğinde URL'lerini belirterek çevrim içi barındırılan görselleri kullanabilirsiniz.

Örnek:

<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />

Kendiniz Deneyin

Görseller içeren basit bir web sayfası oluşturalım. İşte bir örnek:

<!DOCTYPE html>
<html>
  <head>
    <title>My Image Page</title>
  </head>
  <body>
    <h1>Welcome to My Gallery</h1>
    <img src="cat.jpg" alt="A cute cat" width="400" />
    <p>This is my adorable cat!</p>
    <img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
    <p>This is a friendly dog from the internet!</p>
  </body>
</html>

Harika İş!

Tebrikler! Web sayfalarınıza görsel eklemeyi, görsellerin boyutlarını ayarlamayı ve hatta onları diğer sayfalara bağlamayı öğrendiniz. Görseller web sayfalarınızı daha ilgi çekici ve görsel açıdan etkileyici hâle getirir. Sonraki derste verileri düzenlemek için tablo oluşturmayı öğreneceğiz. Sayfalarınızı daha işlevsel hâle getirmeye hazır olun!

Görseller: Sayfanıza Resim Ekleme — resim 9

Sıkça Sorulan Sorular

“Görseller: Sayfanıza Resim Ekleme” dersi ücretsiz mi?

Evet — “Görseller: Sayfanıza Resim Ekleme” 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 for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 4 dersten oluşur.

“Görseller: Sayfanıza Resim Ekleme” dersinde ne öğreneceğim?

Web sayfanıza görseller ekleyip biçimlendirin HTML for Kids 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 for Kids öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, 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.

“Görseller: Sayfanıza Resim Ekleme” 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 for Kids dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML for Kids 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 for Kids Sayfasına Dön