HTML for Kids · Ders

Renkler ve Arka Planlar

Sayfanızı daha etkileyici hâle getirmek için renkler ve arka planlar ekleyin

Renkler ve Arka Planlar, CoddyKit'te ücretsiz bir HTML for Kids 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 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.

Renkler ve Arka Planlar

Bir sonraki derse hoş geldiniz! Bugün, web sayfanızı daha canlı ve görsel açıdan daha çekici hâle getirmek için renkleri ve arka planları nasıl ekleyeceğimizi öğreneceğiz.

Renkler ve Arka Planlar Neden Kullanılır?

Renkler ve arka planlar şunları sağlayabilir:

Web sayfanızı daha çekici hâle getirebilir.
Önemli içerikleri vurgulayabilir.
Sayfanızın havasını veya temasını belirleyebilir.

Bunları etkili bir şekilde nasıl kullanacağımızı öğrenelim!

Metin Rengini Değiştirme

color özelliğini kullanarak metnin rengini değiştirebilirsiniz. Şunları kullanabilirsiniz:

Renk adları: Örnek: red, blue.
Onaltılık kodlar: Örnek: #ff0000, #0000ff.
RGB değerleri: Örnek: rgb(255, 0, 0).

Örnek:

<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>

Arka Plan Rengi Ekleme

Bir öğenin arka plan rengini değiştirmek için background-color özelliği kullanılır.

Örnek:

<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
  This is a box with a gray background.
</div>

Tam Sayfa Arka Planı

background-color özelliğini <body> etiketine uygulayarak tüm sayfanın arka plan rengini değiştirebilirsiniz.

Örnek:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This page has a light blue background.</p>
  </body>
</html>

Arka Plan Görselleri Ekleme

background-image özelliğini kullanarak bir görseli arka plan olarak ayarlayabilirsiniz.

Örnek:

Bu örnekte:

background-size: cover; görselin tüm sayfayı kaplamasını sağlar.
background-repeat: no-repeat; görselin tekrarlanmasını önler.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url('background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This page has a background image.</p>
  </body>
</html>

Metin ve Arka Plan Renklerini Birleştirme

Görsel açıdan çekici tasarımlar oluşturmak için metin ve arka plan renklerini birleştirebilirsiniz. Metnin okunabilir olduğundan emin olun!

Örnek:

<p style="color: white; background-color: black; padding: 10px;">
  This is white text on a black background.
</p>

Kendiniz Deneyin

Renkler ve arka planlar kullanarak bir web sayfası oluşturalım. İşte bir örnek:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lavender;
      }
      h1 {
        color: darkblue;
      }
      p {
        background-color: lightyellow;
        padding: 10px;
        border: 1px solid darkgray;
      }
    </style>
  </head>
  <body>
    <h1>My Colorful Page</h1>
    <p>This paragraph has a light yellow background with a border.</p>
  </body>
</html>

Harika İş!

Tebrikler! Web sayfalarınızı daha canlı ve görsel açıdan daha çekici hâle getirmek için renkleri ve arka planları nasıl kullanacağınızı öğrendiniz. Bir sonraki derste metninize kalın, italik ve diğer efektleri eklemek için metin biçimlendirmesini ayrıntılı olarak inceleyeceğiz. Tasarım becerilerinizi geliştirmeye hazır olun!

Sıkça Sorulan Sorular

“Renkler ve Arka Planlar” dersi ücretsiz mi?

Evet — “Renkler ve Arka Planlar” 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.

“Renkler ve Arka Planlar” dersinde ne öğreneceğim?

Sayfanızı daha etkileyici hâle getirmek için renkler ve arka planlar ekleyin 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 3. dersidir.

“Renkler ve Arka Planlar” 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