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

Bu Makalede:HTML’ini Düzenlemeye HazırlanmakTek Renkli Bir Arka Plan AyarlamakGeçişli Bir Arka Plan YaratmakDeğişken Bir Arka Plan Yaratmak

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

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

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

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

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>
    

İ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.

Uyarılar

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

Makale Bilgisi

Kategoriler: Bilgisayar ve Elektronik Cihazlar

Diğer dillerde:

English: Set Background Color in HTML, Français: mettre une couleur de fond de page en HTML, Español: establecer el color de fondo en HTML, Bahasa Indonesia: Memasang Warna Latar Belakang HTML, Русский: задать цвет фона в HTML, Deutsch: In HTML die Hintergrundfarbe festlegen, Português: Configurar Cores de Fundo em HTML, Italiano: Impostare il Colore di Sfondo in HTML, ไทย: เปลี่ยนสีพื้นหลังเว็บด้วย HTML, Nederlands: De achtergrondkleur in HTML aanpassen, العربية: إدراج لون خلفية في لغة الترميز HTML, Tiếng Việt: Thiết lập màu nền trong HTML, 日本語: HTMLで背景色を指定する, 中文: 在HTML中设置网页背景颜色, 한국어: HTML 배경색 바꾸는 방법, हिन्दी: HTML में बैकग्राउंड कलर सेट करें (Set Background Color in HTML)

Bu sayfaya 87 defa erişilmiş.
Bu makale işine yaradı mı?