Bu yazımızda sizlere, HTML Arka Plan Tasarımı konusunu anlatacağım.
Web sitenin içeriğinin arka plan rengi varsayılan olarak beyaz biçimdedir. Bunu istediğimiz rengi belirleyerek değiştirebiliriz. Renk haricinde isteğinize göre resim ekleyebilir web sitenizi daha zengin hale getirebilirsiniz.
Renkleri ayarlarken renklerin hex koduna göre, rgb değerlerine göre veya isimlerine göre ayarlamalar yapabiliriz. Eğer ki html renk kodlarını bilmiyorsanız, buraya tıklayarak html renk kodlarını öğrenebilirsiniz :)
Web sitelerimizi HTMLile zenginleştirirken arka plan tasarımı çok önemlidir. Html arka plan tasarımı yaparken oldukça basit kodlar kullanmaktayız.. Arka plan biçimlendirme işlemlerini bgcolor ve background kodlarıyla yapmaktayız Yazacağımız bu kodlar içerik kısmını etkilediği için body etiketleri altında yazmamız gerekmekte.
1 2 3 4 5 6 7 | <html> <head> </head> <body> ARKA PLAN KODU BURADA OLACAK </body> </html> |
Arka plan rengi değiştirme kodları
1 2 3 | <body bgcolor="#FF0000"> Arka plan rengini hex koduyla değiştirme <body bgcolor="rgb(255,0,0)"> Arka plan rengini rgb renk değerleriyle değiştirme <body bgcolor="red"> Arka plan rengini renk ismiyle değiştirme |
Arka plana resim ekleme kodları
Arka plana resim eklerken, bilgisayar dizininde bulunmakta olan bir görseli klasör adresiyle ekleyebiliriz. Örneğin kodkampusu klasörü içerisinde var olan resim.jpg dosyasını arka plan yapmak için kodkampusu/resim.jpg yazmaktayız. Eğer eklenecek olan resim masaüstünde ise direkt olarak resim.jpg yazmamız yeterli olacaktır.
Bu arada resim.jpg tanımlamasında ekleyeceğiniz resmin adını yazmalısınız. Sizin ekleyeceğiniz resimin adı ve uzantısı ne ise ona göre yazmalısınız. (Örnek: arkaplan.jpg , asdasd.png , deneme.jpeg , qwewqe.gif)
1 | <body background="kodkampusu/resim.jpg"> |
Aynı zamanda resimi bir link yoluyla ekleyebiliriz. Google üzerinde website texture, background, site arka planı gibi aratarak çeşitli arka plan görsellerine ulaşabilirsiniz. Bu resimlerin bağlantı adresini kopyalayıp html kodu üzerine yapıştırdığınızda seçmiş olduğunuz arka plan olmuş olacaktır :)
1 | <body background="https://i.hizliresim.com/YdrH7C.png"> |
