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

Ortak yazar: wikiHow Kadrosu

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

  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. 6
    "body" elemanını ekle. <style></style> etiketleri arasına aşağıdaki kodu yaz:
    body { 
    }
    
    Reklam

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

  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>
    
    Reklam

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

  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>
    
    Reklam

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

  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>
    
    Reklam

İpuçları

  • 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.
Reklam

Uyarılar

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

Bununla İlgili wikiHow'lar

wikiHow

Netflix Ücretsiz Üyelik Nasıl Yapılır?

wikiHow

Windows 7’de Ekran Parlaklığı Nasıl Ayarlanır?

wikiHow

Bilgisayarın Bluetooth Özelliği Olup Olmadığı Nasıl Anlaşılır?

wikiHow

Word'de Boş Bir Sayfa Nasıl Kaldırılır?

wikiHow

Birinin Seni Facebook Messenger'da Engellediği Nasıl Anlaşılır?

wikiHow

Bir Web Sitesinin Güvenilir Olup Olmadığı Nasıl Anlaşılır?

wikiHow

Bir Yazıcı Bilgisayara Nasıl Bağlanır?

wikiHow

Instagram Hesabı Nasıl Yeniden Etkinleştirilir?

wikiHow

AirPod Pil Durumu Nasıl Kontrol Edilir?

wikiHow

Spotify Premium Nasıl Ücretsiz Kullanılır?

wikiHow

Bluetooth Hoparlör Dizüstü Bilgisayara Nasıl Bağlanır?

wikiHow

AdBlock Nasıl Devre Dışı Bırakılır?

wikiHow

Film Nasıl İndirilir?

wikiHow

Google Chrome'da Bir İnternet Sitesi Nasıl Engellenir?
Reklam

Bu wikiHow makalesi hakkında

Ortak Yazar:
wikiHow Editör Ekibi
Bu makale editörler ve araştırmacılardan oluşan, makalenin doğruluğu ile kapsamlılığını onaylayan, eğitimli bir ekip tarafından ortaklaşa yazılmıştır.

Bu makale işine yaradı mı?

Evet
Hayır
Reklam