HTML'de Arka Plan Rengi Nasıl Ayarlanır?

Bu wikiHow makalesi sana bir web sitesinin arka plan rengini, sitenin HTML dosyasını düzenleyerek nasıl değiştirebileceğini öğretir.

Makalenin 1.Yöntemi:
HTML’ini Düzenlemeye Hazırlanmak
Düzenleniyor

  1. 1
    Kullanmak istediğin arka plan rengini belirle. HTML renkleri tona bağlı olarak şekilde kodlarla belirlenir. Kullanmak istediğin rengin (renklerin) kodunu (kodlarını) bulmak için W3Schools HTML’in ücretsiz renk seçicisini kullanabilirsin.
    • Bilgisayarının web tarayıcısında https://www.w3schools.com/colors/colors_picker.asp adresine git.
    • "Pick a Color (Bir Renk Seç)" bölümünde, kullanmak istediğin temel bir renge tıkla.
    • Sayfanın sağ tarafında bir ton seç.
    • Tonun sağındaki sayısal kodu not al.
  2. 2
    HTML dosyanı favori metin düzenleyicinde aç. HTML5 itibarıyla <bgcolor> HTML özniteliği artık desteklenmemekte. Arka plan renginin, sayfanın diğer tüm stil özellikleriyle birlikte CSS kullanılarak belirlenmesi gerekir.[1]
    • Notepad++ programını veya bir Windows bilgisayarda Not Defteri’ni kullanabilirsin. Mac kullanıcıları ise TextEdit veya BBEdit ile düzenleme yapabilirler.
  3. 3
    "html" başlığını dosyaya ekle. Sayfanın tüm stil bilgileri (arka plan rengi de dahil) <style></style> etiketleri arasına kodlanmalıdır:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    </style> 
    </head>
    </html>
    
  4. 4
    "style" etiketleri arasında boş bir satır yarat. <style> etiketinin altında ve </style> etiketinin üstünde, içerisine bilgi ekleyebileceğin bir satıra sahip olman gerekir.
  5. 5
    "body" elemanını ekle. <style></style> etiketleri arasına aşağıdaki kodu yaz:
    body { 
    }
    
    Advertisement

Makalenin 2.Yöntemi:
Tek Renkli Bir Arka Plan Ayarlamak
Düzenleniyor

  1. 1
    Belgenin "html" başlığını bul. Belgenin en üstüne yakın bir yerde olması gerekir.
  2. 2
    "body" elemanına "background-color" özelliğini ekle. Body parantezlerinin arasına background-color: yaz. Bu aşamada aşağıdaki "body" elemanına sahip olman gerekir:
    body {
        background-color: 
    }
    
    • Bu bağlamda "color" kelimesinin yalnızca bir türlü yazımı çalışır; burada "colour" kullanamazsın.
  3. 3
    İstediğin arka plan rengini "background-color" özelliğine ekle. Bunun için "background-color:" elemanının yanına seçtiğin rengin sayısal kodunu yaz ve sonrasında noktalı virgül koy. Örneğin; sayfanın arka planını pembe yapmak için aşağıdaki kodu yazarsın:
    body {
        background-color: #d24dff;
    }
    
  4. 4
    "style" bilgini incele. Bu noktada HTML belgenin başlığının aşağıdaki koda benzemesi gerekir:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: #d24dff
    }
    </style>
    </head>
    </html>
    
  5. 5
    Arka plan renklerini diğer elemanlara uygulamak için "background-color" özelliğini kullan. Body elemanında yaptığın gibi "background-color" özelliğini header ve paragraph gibi diğer elemanların arka planlarını belirlemek için kullanabilirsin. Örneğin; ana başlığa (<h1>) veya bir paragrafa (<p>) arka plan rengi uygulamak için aşağıdaki koda benzer bir kod yazarsın:[2]
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        background-color: #93B874;
    }
    h1 {
        background-color: #00b33c;
    }
    p {
        background-color: #FFFFFF);
    }
    </style>
    </head>
    <body>
    <h1>Yeşil Arka Planlı Başlık</h1>
    <p>Beyaz arka planlı paragraf</p>
    </body>
    </html>
    
    Advertisement

Makalenin 3.Yöntemi:
Geçişli Bir Arka Plan Yaratmak
Düzenleniyor

  1. 1
    Belgenin "html" başlığını bul. Belgenin en üstüne yakın bir yerde olması gerekir.
  2. 2
    Bu işlemin temel sözdizimini anla. Geçişli bir renk oluştururken iki bilgiye ihtiyacın olur: başlangıç noktası/açısı ve geçiş yapılacak renkler. Hepsinin arasında geçiş yapılabileceği birden fazla renk seçebilirsin ve geçiş için bir yön veya açı seçebilirsin.[3]
    background: linear-gradient(yön/açı, renk1, renk2, renk3 vb.);
    
  3. 3
    Dikey bir geçiş yarat. Bir yön belirlemezsen geçiş yukarıdan aşağı doğru olur. Kendi geçişini oluşturmak için aşağıdaki kodu <style></style> etiketlerinin arasına ekle:
    html {
        min-height: 100%; 
    }
    body {
        background: -webkit-linear-gradient(#93B874, #C9DCB9); 
        background: -o-linear-gradient(#93B874, #C9DCB9); 
        background: -moz-linear-gradient(#93B874, #C9DCB9); 
        background: linear-gradient(#93B874, #C9DCB9); 
        background-color: #93B874; 
    }
    
    • Farklı tarayıcılar farklı geçiş uygulama fonksiyonlarına sahiptir; bu yüzden kodun birkaç farklı sürümünü eklemen gerekir.
  4. 4
    Yönlü bir geçiş yarat. Dikey olmayan bir geçiş yaratmayı tercih edersen, renk geçişinin oluşma yönünü değiştirmek için geçişe yön ekleyebilirsin. Bunun için <style></style> etiketleri arasına aşağıdaki kodu yaz:[4]
    html {
        min-height: 100%;
    }
     
    body {
        background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
        background: -o-linear-gradient(right, #93B874, #C9DCB9); 
        background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
        background: linear-gradient(to right, #93B874, #C9DCB9); 
        background-color: #93B874; 
    }
    
    • Geçişte farklı yönler denemek için "left" (sol) ve "right" (sağ) etiketleriyle oynayabilirsin.
  5. 5
    Geçişi ayarlamak için diğer özellikleri kullan. Geçişler üzerinde yapabileceğin birçok şey vardır.
    • Örneğin; ikiden fazla renk ekleyebilmenin yanı sıra her renkten sonra bir yüzde ekleyebilirsin. Bu, her renk diliminin ne kadar alana sahip olacağını ayarlamanı sağlar. İşte bu prensibe uygun örnek bir geçiş:
      background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
      
    • Renklerine şeffaflık ekle. Bu rengin solmasını sağlar. Solmanın farklı bir renge doğru olmaması için aynı rengi kullan. Rengi belirlemek için rgba() fonksiyonunu kullanman gerekir. Bitiş değeri şeffaflığı belirler: opak için 0, şeffaf için 1 kullanılır.
      background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));
      
  6. 6
    Tamamlanan kodunu incele. Web sitenin arka planında bir renk geçişi yaratma kodu şuna benzer:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    html {
        min-height: 100%;
    }
     
    body {
        background: -webkit-linear-gradient(left, #93B874, #C9DCB9); 
        background: -o-linear-gradient(right, #93B874, #C9DCB9);
        background: -moz-linear-gradient(right, #93B874, #C9DCB9); 
        background: linear-gradient(to right, #93B874, #C9DCB9); 
        background-color: #93B874; 
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    
    Advertisement

Makalenin 4.Yöntemi:
Değişken Bir Arka Plan Yaratmak
Düzenleniyor

  1. 1
    Belgenin "html" başlığını bul. Belgenin en üstüne yakın bir yerde olması gerekir.
  2. 2
    "body" elemanına animasyon özelliğini ekle. "body {" parantezinin altına ve kapatma parantezinin üstüne aşağıdaki kodu yaz:[5]
        -webkit-animation: colorchange 60s infinite; 
        animation: colorchange 60s infinite;
    
    • Üstteki satır Chromium tabanlı tarayıcılar için yazılmışken, alttaki satır diğer tarayıcılar içindir.
  3. 3
    Renklerini animasyona ekle. Bu aşamada geçiş yapılacak olan arka plan renklerini ve her bir rengin sayfada ne kadar kalacağını belirlemek için @keyframes kuralını kullanacaksın. Farklı tarayıcılar için yine farklı girdiler gerekecek. Kapalı olan "body" parantezinin altına aşağıdaki kod satırlarını gir:[6]
    @-webkit-keyframes colorchange {
         0%  {background: #33FFF3;}
        25%  {background: #78281F;}
        50%  {background: #117A65;}
        75%  {background: #DC7633;}
        100% {background: #9B59B6;}
    }
    @keyframes colorchange {
         0%  {background: #33FFF3;}
        25%  {background: #78281F;}
        50%  {background: #117A65;}
        75%  {background: #DC7633;}
        100% {background: #9B59B6;}
    }
    
    • (@-webkit-keyframes ve @keyframes kurallarının aynı arka plan renklerine ve yüzdelerine sahip olduklarını unutma. Tüm tarayıcılarda aynı deneyimin yaşanması adına tutarlılığı sağlamak için bunlara ihtiyacın olur.
    • (0%, 25% vb.) yüzdeleri animasyonunu toplam uzunluğunun (60s) yüzdeleridir. Sayfa yüklendiği zaman 0%'da arka plan belirlenen renge (#33FFF3) döner. Animasyon 60 saniyenin yüzde 25'i oranında oynadığı zaman arka plan #7821F rengine döner. Bu böyle devam eder.
    • İstediğin sonucu elde etmek için zamanları ve renkleri değiştirebilirsin.
  4. 4
    Kodunu incele. Değişken arka plan rengi için yazdığın kodun tamamının aşağıdakine benzemesi gerekir:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
        -webkit-animation: colorchange 60s infinite; 
        animation: colorchange 60s infinite;
    }
    @-webkit-keyframes colorchange {
         0%  {background: #33FFF3;}
        25%  {background: #78281F;}
        50%  {background: #117A65;}
        75%  {background: #DC7633;}
        100% {background: #9B59B6;}
    }
    @keyframes colorchange {
         0%  {background: #33FFF3;}
        25%  {background: #78281F;}
        50%  {background: #117A65;}
        75%  {background: #DC7633;}
        100% {background: #9B59B6;}
    }   
    </style>
    </head>
    <body>
    </body>
    </html>
    
    Advertisement

İpuçlarıDüzenleniyor

  • HTML kodunda temel renkleri kullanmak istersen, HTML renk kodunu kullanmak yerine kare işareti (#) olmadan renklerin adlarını yazabilirsin. Örneğin; turuncu bir arka plan yaratmak için buraya background-color: orange; yazarsın.
  • HTML ile web sitenin arka planına bir resim de koyabilirsin.

UyarılarDüzenleniyor

  • Web sitende yaptığın herhangi bir değişikliği, siteyi çevrimiçi olarak yayınlamadan önce test ettiğinden emin ol.

Bu makale işine yaradı mı?

Evet
Hayır