HTML5 Dersleri adlı kategorimizde bu yazılı ve videolu içeriğimiz de ise HTML5 Stillerine bir göz atacağız. Bir önce ki yazılı ve videolu ders içeriğimiz de ise hatırlayacağınız gibi HTML5 Paragraf Etiketlerine değinmiştik.
HTML5 ile oluşturacağımız internet sitesinde girmiş olacağımız yazıları daha okunabilir ve internet sayfasını göze hoş gelebilecek şekilde oluşturmak için bazı stiller ekleyebiliriz. Bu stiller sayesinde yazının boyutunu, rengini hatta ve hatta fontunu değiştirebiliriz. Bunun yanında internet sitemizin arkaplanını ‘da değiştirebilme gibi bir çok göze hoş gelecek olan özellikler ekleyebiliriz. Aşağıda öğreneceğiniz HTML Stilleri ise :
- HTML5 Sayfa Arkaplan Rengi Değiştirme
- HTML5 Yazının Rengini Değiştirme
- HTML5 Yazının Arkaplan Rengini Değiştirme
- HTML5 Yazıyı Ortalama
- HTML5 Yazının Boyutunu Değiştirme
- HTML5 Yazının Yazı Tipini Değiştirme
Şuanda HTML5 ‘e eklemiş olacağımız Stiller CSS’te basit bir kısımdır ve bu CSS ‘in eklenme biçimlerine göre “inline” olarak adlandırılır. Daha da açar isek CSS etiketlerinin satır içine eklenmesi anlamına gelir. Şuanda HTML5 sayfasına ekleyeceğimiz HTML5 sayfasına uygulayabileceğimiz inline biçimde olan CSS etiketlerini size aşağıda sırası ile göstereceğim.
HTML5 Sayfa Arkaplan Rengi Nasıl Değiştirilir ?
Öncelikle kullanmış olduğunuz kod editörünü açarak temel olan HTML5 kodlarını yazın. Daha sonrasında HTML5 arkaplan rengi değiştirmek için ise aşağıda vermiş olduğum kodu yazın.
<body style="background-color:blue;">
Body etiketinin içine yazmış olacağınız bu kod sayesinde HTML5 ile oluşturulacak olan internet sayfasının arkaplan rengini mavi olarak belirlemiş olabilirsiniz. HTML5 sayfa arkaplan rengi değişitirmek için İngilizce olarak kelimeleri kullanmak yerine renk kodlarını da kullanmanız durumunda internet sitenizin arkaplan rengi değişmiş olacaktır.
HTML5 Yazının Rengi Nasıl Değiştirilir ?
İnternet sitenizi HTML5 yazılım programlama dili ile oluşturmayı tercih ettiyseniz internet sitenizi oluşturma işleminde yada bazı yazıların içlerinde ki başlıkların renginin değişik olması göze hoş gelebilir. HTML5 yazının rengini değiştirme işlemi ise yazmış olacağınız etiketinin içine bir still eklemekten geçer.
<h1 style="color:blue;">Yazı
Yukarıda yer alan kod her hangi bir başlık yada paragraf etiketinin içine yazdığınızda yazının rengini değiştirebilirsiniz.
HTML5 Yazının Arkaplan Rengi Nasıl Değiştirilir ?
Daha öncesinde HTML5 etiketleri ile oluşturulan bir sayfada arkaplan rengini değiştirmeyi öğrenmiştik. Şimdi ise HTML5 yazıya arkaplan rengi ekleme işlemini gerçekleştireceğiz.
<p style="background-color:blue;">Yazı
Yukarıda yer alan Background Color kodunu her hangi bir başlık yada paragraf etiketi içerisine eklediğimizde yazının arkaplan rengi değişmiş olacaktır. HTML5 yazının arkaplan rengini değiştirme işlemini yapmak istiyor iseniz ise yapmanız gereken tek şey blue yazan yere istediğiniz bir renk kodunu yada rengin İngilizce karşılığını yazmak yeterli olacaktır.
HTML5 Yazı Nasıl Ortalanır ?
Bir sayfanın içinde yer alan her hangi bir yazıyı sayfayı ortalamasını istiyor iseniz bunun içinde ekleyeceğiniz kod çok basittir. HTML5 yazıyı ortalamak için ise kullanacağınız kod :
<p style="text-align:center;">Yazı
şeklinde olmalıdır. Eğer ki yazıyı ortalamak yerine sağa yaslamak istiyor iseniz bunun içinde “Center” yerine “Right” yazarak yazının sağ tarafa yerleşmesini sağlayabilirsiniz.
HTML5 Yazının Boyutu Nasıl Değiştirilir ?
HTML5 ile oluşturacağınız internet sitesinde bazen kullanmış olduğunuz başlık yada paragraf etiketlerinin boyutu sizlere yeterli gelmeyebilir. Kullanacağınız yere göre istediğiniz paragraf yada başlık etiketlerinin boyutunu istediğiniz ölçüde arttırabilir yada azaltabilirsiniz. HTML5 yazı boyutu değiştirme etiketleri için ise aşağıda yer alan koda bir göz atınız.
<p style="font-size:200px">Yazı
Eğer ki piksel değerinde yazının boyutunu büyültmek istemiyor iseniz bize başka bir seçenek sunan HTML5 sayesinde “px” yazan yere “%” işaretini koyarak yüzde değerinde yazının büyütme işlemini tamamlayabilirsiniz.
HTML5 Yazı Tipi Nasıl Değiştirilir ?
Bize bir çok farklı göze hitap etmesini sağlayan değişiklik yapmamıza izin veren HTML5 sayesinde ile HTML5 yazı tipi değiştirme işlemini de gerçekleştirebiliriz. İnternet sitenizi oluşturacağınız da her hangi bir yerde yer alan başlık yada paragraf etiketi içine yazılmış olan yazının yazı tipini aşağıda ki kod sayesinde değiştirebilirsiniz.
<p style="font-family:verdena;">Yazı
Yukarıda yer alan kodlar arasında “Verdana” yazan yere istediğiniz bir yazı tipinin ismini yazdığınızda internet sitesinde o font ile gösterilecektir.