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

Yöntem 1 / 4:
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

Yöntem 2 / 4:
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

Yöntem 3 / 4:
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

Yöntem 4 / 4:
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

Android'de Güvenli Mod Nasıl KapatılırAndroid'de Güvenli Mod Nasıl Kapatılır?
Birisinin Numaranı Whatsapp'ına Kaydettiği Nasıl AnlaşılırBirisinin Numaranı Whatsapp'ına Kaydettiği Nasıl Anlaşılır?
Google Güvenli Arama Nasıl KapatılırGoogle Güvenli Arama Nasıl Kapatılır?
Snapchat Puanı Nasıl Hızlı ArttırılırSnapchat Puanı Nasıl Hızlı Arttırılır?
Akıllı Saat Android'le Nasıl EşleştirilirAkıllı Saat Android'le Nasıl Eşleştirilir?
Resimler JPEG Formatına Nasıl DönüştürülürResimler JPEG Formatına Nasıl Dönüştürülür?
AirPod Pil Durumu Nasıl Kontrol EdilirAirPod Pil Durumu Nasıl Kontrol Edilir?
Smart TV'ye Uygulama Nasıl EklenirSmart TV'ye Uygulama Nasıl Eklenir?
Hoşlanılan Kişiye Mesaj Nasıl AtılırHoşlanılan Kişiye Mesaj Nasıl Atılır?
Ağ Yazıcısı Nasıl KurulurAğ Yazıcısı Nasıl Kurulur?
Resim Kullanarak Biri Kolayca Nasıl Araştırılır ve BulunurResim Kullanarak Biri Kolayca Nasıl Araştırılır ve Bulunur?
Android'de Spotify Çalma Listeni Kimin Takip Ettiği Görülür Mü (2021)Android'de Spotify Çalma Listeni Kimin Takip Ettiği Görülür Mü (2021)?
Twitter'da Takipçi Nasıl SilinirTwitter'da Takipçi Nasıl Silinir?
SIM'den Telefon Numarası Nasıl ÖğrenilirSIM'den Telefon Numarası Nasıl Öğrenilir?
Reklam

Bu wikiHow makalesi hakkında

JL
Ortak yazarlar :
Teknoloji Yazarı ve Editör
Bu makaledeki ortak yazarlar Jack Lloyd. Jack Lloyd wikiHow’da bir wikiHow’da Teknoloji Yazarı ve Editör’dür. Yazı yazma ve teknolojiyle ilgili makaleleri düzenleme konusunda iki yıldan fazla deneyime sahiptir. Jack bir teknoloji meraklısı ve İngilizce öğretmenidir. Bu makale 37.853 defa görüntülenmiştir.
Bu sayfaya 37.853 defa erişilmiş.

Bu makale işine yaradı mı?

Reklam