HTML Dersleri: Arka Plana Resim Ekleme ve Buton Ayarlama
HTML (HyperText Markup Language), web sayfaları oluşturmak için kullanılan bir işaretleme dilidir. Arka plana resim eklemek ve düğmeler oluşturmak, web sayfalarınıza görsel ilgi ve etkileşim katmanın önemli yollarıdır. Bu makalede, HTML kullanarak arka plana resim ekleme ve düğme ayarlama adımlarını ayrıntılı olarak açıklayacağız.
Arka Plana Resim Ekleme
Arka plana resim eklemek için <body> etiketine background-image özelliğini kullanabilirsiniz. Bu özellik, resmin URL’sini veya dosya yolunu alır. Örneğin:
“`html
“`
Bu kod, “bg.jpg” adlı bir resmi arka plan olarak ayarlayacaktır. Resmi tekrar ettirmek için `background-repeat` özelliğini kullanabilirsiniz. Örneğin:
“`html
“`
Bu kod, resmi yatay ve dikey olarak tekrarlayacaktır. Resmin konumunu `background-position` özelliğiyle ayarlayabilirsiniz. Örneğin:
“`html
“`
Bu kod, resmi arka planın ortasına yerleştirecektir.
### Düğme Ayarlama
HTML’de düğmeler `
“`html
“`
Bu kod, “Tıkla Beni” metnine sahip bir düğme oluşturacaktır. Düğmenin boyutunu, rengini ve diğer stillerini CSS (Cascading Style Sheets) kullanarak ayarlayabilirsiniz. Örneğin:
“`css
button {
width: 100px;
height: 50px;
background-color: #000;
color: #fff;
border: none;
}
“`
Bu CSS, düğmenin genişliğini 100 piksel, yüksekliğini 50 piksel, arka plan rengini siyah, metin rengini beyaz ve kenarlığını yok olarak ayarlayacaktır.
### Faydalı Kaynaklar
* [HTML Arka Plan Resimleri](https://www.w3schools.com/html/html_background.asp)
* [HTML Düğmeleri](https://www.w3schools.com/html/html_buttons.asp)
* [CSS Düğme Stilleri](https://www.w3schools.com/css/css_buttons.asp)
### Sonuç
Arka plana resim eklemek ve düğmeler oluşturmak, web sayfalarınıza görsel ilgi ve etkileşim katmanın etkili yollarıdır. Bu makalede açıklanan adımları izleyerek, HTML kullanarak kolayca arka plan resimleri ekleyebilir ve düğmeleri özelleştirebilirsiniz.