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

Bu How.com.vn 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

Makaleyi İndir

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]XKaynağı 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

Makaleyi İndir

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]XKaynağı araştır}
```
<!DOCTYPE html><html><head><style>body {    background-color: #216fdb;}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

Makaleyi İndir

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]XKaynağı araştır}
```
background: linear-gradient(yön/açı, renk1, renk2, renk3 vb.);
```

How.com.vn Türkçe: Step 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(#216fdb, #C9DCB9);     background: -o-linear-gradient(#216fdb, #C9DCB9);     background: -moz-linear-gradient(#216fdb, #C9DCB9);     background: linear-gradient(#216fdb, #C9DCB9);     background-color: #216fdb; }

Farklı tarayıcılar farklı geçiş uygulama fonksiyonlarına sahiptir; bu yüzden kodun birkaç farklı sürümünü eklemen gerekir.

How.com.vn Türkçe: Step 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]XKaynağı araştır}

html {    min-height: 100%;}body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);     background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }

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));

How.com.vn Türkçe: Step 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, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);    background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }</style></head><body></body></html>

Reklam

Yöntem 4

Yöntem 4 / 4:

Değişken Bir Arka Plan Yaratmak

Makaleyi İndir

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]XKaynağı 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]XKaynağı 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.

How.com.vn Türkçe: Step 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