HTML'de Arka Plan Rengi Nasıl Ayarlanır - WikiHow

Có thể bạn quan tâm

Anasayfa
Rastgele
Makaleleri Tara
wikiHow Hakkında

Giriş yap / Kaydol

Terms of UseHTML'de Arka Plan Rengi Nasıl Ayarlanır?

Makaleyi İndir Ortak yazarlar Jessica Andzouana

Referanslar

Makaleyi İndir X

Bu makale ortak yazarlarımızdan biri olan Jessica Andzouana ile ortaklaşa yazılmıştır. wikiHow makalelerinin ortak yazarları içeriğimizin mümkün olduğunca tam ve kapsamlı olmasını sağlamak için editörlerimizle yakın bir şekilde çalışırlar. Bu makale 89.842 defa görüntülenmiştir.

Bu Makalede: HTML’ini Düzenlemeye Hazırlanmak Tek Renkli Bir Arka Plan Ayarlamak Geçişli Bir Arka Plan Yaratmak Değişken Bir Arka Plan Yaratmak 1 tane daha göster... Daha az göster... İlgili Makaleler Referanslar

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

Adımlar

Yöntem 1 Yöntem 1 / 4:

HTML’ini Düzenlemeye Hazırlanmak

Makaleyi İndir

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e8\/2609629-1-2.jpg\/v4-460px-2609629-1-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e8\/2609629-1-2.jpg\/v4-728px-2609629-1-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 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.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b8\/2609629-2-2.jpg\/v4-460px-2609629-2-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b8\/2609629-2-2.jpg\/v4-728px-2609629-2-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 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.

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/2609629-5-2.jpg\/v4-460px-2609629-5-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/2609629-5-2.jpg\/v4-728px-2609629-5-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 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

1 Belgenin "html" başlığını bul. Belgenin en üstüne yakın bir yerde olması gerekir.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/55\/2609629-7-2.jpg\/v4-460px-2609629-7-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/55\/2609629-7-2.jpg\/v4-728px-2609629-7-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 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] <!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

Makaleyi İndir

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] background: linear-gradient(yön/açı, renk1, renk2, renk3 vb.);
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/27\/2609629-13-2.jpg\/v4-460px-2609629-13-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/27\/2609629-13-2.jpg\/v4-728px-2609629-13-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 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.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/74\/2609629-14-2.jpg\/v4-460px-2609629-14-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/74\/2609629-14-2.jpg\/v4-728px-2609629-14-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 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.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c2\/2609629-15-2.jpg\/v4-460px-2609629-15-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c2\/2609629-15-2.jpg\/v4-728px-2609629-15-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 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

Makaleyi İndir

1 Belgenin "html" başlığını bul. Belgenin en üstüne yakın bir yerde olması gerekir.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1d\/2609629-18-2.jpg\/v4-460px-2609629-18-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1d\/2609629-18-2.jpg\/v4-728px-2609629-18-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 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.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/2609629-19-2.jpg\/v4-460px-2609629-19-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/2609629-19-2.jpg\/v4-728px-2609629-19-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 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

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

Grand Theft Auto (GTA) V'te Kız Arkadaş Nasıl Bulunur?

Herhangi Bir Sitedeki Video Nasıl Ücretsiz İndirilir?

Deep Web'e Nasıl Erişilir?

Resim Kullanarak Biri Kolayca Nasıl Araştırılır ve Bulunur?

Kalpli Gülen Yüz Emojisi 🥰 Ne Anlama Gelir?

Instagram Gönderileri Belli Takipçilerden Nasıl Gizlenir?

İltifat Mesajına Karşılık Vermek?

EPUB Dosyaları Nasıl Açılır?

Torrent Nasıl İndirilir?

HDMI Televizyona Nasıl Bağlanır? İki El Emojisi Ne Anlama Gelir

İki El Emojisi 🙌🙏 Ne Anlama Gelir?

Numaranın Engellendiği Nasıl Anlaşılır?

Bilgisayarın BIOS Ayarları Nasıl Değiştirilir?

Gmail Nasıl Hack'lenir? Reklam

Referanslar

↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
↑ http://www.w3schools.com/css/css_background.asp
↑ https://css-tricks.com/css3-gradients/
↑ http://www.w3schools.com/css/css3_gradients.asp
↑ https://codepen.io/metagrapher/pen/tgcLl
↑ http://www.w3schools.com/css/css3_animations.asp

Bu wikiHow makalesi hakkında

Ortak yazarlar : Jessica Andzouana Bu makale ortak yazarlarımızdan biri olan Jessica Andzouana ile ortaklaşa yazılmıştır. wikiHow makalelerinin ortak yazarları içeriğimizin mümkün olduğunca tam ve kapsamlı olmasını sağlamak için editörlerimizle yakın bir şekilde çalışırlar. Bu makale 89.842 defa görüntülenmiştir. Kategoriler: Bilgisayar ve Elektronik Cihazlar Diğer dillerde İngilizce Fransızca İspanyolca Endonezce Rusça Almanca Portekizce İtalyanca Tayca Felemenkçe Arapça Vietnamca Japonca Çince Korece Hintçe Farsça