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

Ortak yazarlar 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.

Yöntem 1

Yöntem 1 / 4:
HTML’ini Düzenlemeye Hazırlanmak

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
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]
X
Kaynağı araştır}
- Notepad++ programını veya bir Windows bilgisayarda Not Defteri’ni kullanabilirsin. Mac kullanıcıları ise TextEdit veya BBEdit ile düzenleme yapabilirler.
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
"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 { 
}
```
- CSS’te "body" elemanına yaptığın her şey tüm sayfayı etkiler.
- Geçişli bir renk uygulamak istiyorsan bu adımı atla.
Reklam

Yöntem 2

Yöntem 2 / 4:
Tek Renkli Bir Arka Plan Ayarlamak

1
Belgenin "html" başlığını bul. Belgenin en üstüne yakın bir yerde olması gerekir.
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
İ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
"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
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]
X
Kaynağı araştır}
```
<!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

Yöntem 3 / 4:
Geçişli Bir Arka Plan Yaratmak

1
Belgenin "html" başlığını bul. Belgenin en üstüne yakın bir yerde olması gerekir.
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]
X
Kaynağı araştır}
```
background: linear-gradient(yön/açı, renk1, renk2, renk3 vb.);
```
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
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]
X
Kaynağı araştır}
```
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
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
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

Yöntem 4 / 4:
Değişken Bir Arka Plan Yaratmak

1
Belgenin "html" başlığını bul. Belgenin en üstüne yakın bir yerde olması gerekir.
2
"body" elemanına animasyon özelliğini ekle. "body {" parantezinin altına ve kapatma parantezinin üstüne aşağıdaki kodu yaz:^{[5]
X
Kaynağı araştır}
```
    -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
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]
X
Kaynağı araştır}
```
@-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
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