Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Tablolar (Başlangıç) adlı yazımızda HTML'de tablo kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 6 - Tablolar (Başlangıç) linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML'de Stil parametrelerin kullanımını öğreneceğiz.
Bu derslerimize kadar yaptığımız tüm örneklerde hiç bir stil ve estetik yoktu. HTML'de yazdığımız kodların çıktılarını daha afilli ve düzenli bir hale getirmek için etiketlerde Türkçe anlamı stil olan "style" parametresini kullanırız. Style parametresi sayesinde yazılarımızın rengini,yazı karakterlerini,boyutlarını değiştirebilir,sitemizin arka plan renkleri ile oynamak gibi bir çok işlevi yapabilirsiniz. Bunun için style parametresi içerisine CSS kodları yazmamız gerekiyor. CSS kodları derken gözünüz korkmasın tamamen İngilizce kelimelerin belli kurallara göre yazılmasından ibarettir.
HTML'de stil vermek için "style" parametresi kullanılır ve söz dizimi kuralı şu şekildedir ;
<etiket style="nitelik:değer;">
Nitelik dediğimiz kısım CSS'de kullanılan niteliklerdir. Değer kısmı ise niteliklerimizin karşılığı olan değerlerdir.
İlerleyen derslerimizde CSS hakkında daha çok bilgi edineceğiz.
Şimdi temel olarak kullandığımız stil parametre örneklerine bakalım ;
background-color niteliği , bir HTML etiketinin arka plan rengini tanımlar. Background-color niteliğinin değeri olarak , renk kodu veya ingilizce renk isimleri girilebilir.
Örnek ;
<body style="background-color:Aquamarine;">
<h1>Birinci Paragraf</h1>
<p style="background-color:white;">İkinci paragraf.</p>
</body>
Örneğimizde en dışta ki etiketimiz olan body'in style parametresine , background-color niteliğini verdik ve değer olarakta "aquamarine" girdik. Dikkat edilmesi gereken bir nokta ise , h1 etiketinin arka plan rengi olmadığı için , kendisinden üstteki html etiketinin değerini alması. Bu konuyu daha iyi ayırt etmeniz için p etiketine de arka plan rengi verdik. Eğer etiketin kendi background-color stil parametresi var ise onu gösterir yok ise atasında ki değeri alır. Sıralama özelden genele şekildedir.
color niteliği, bir HTML etiketi içerisinde ki yazının rengini belirlemek için kullanılır. Color niteliğinin değeri olarak , renk kodu veya ingilizce renk isimleri girilebilir.
Örnek;
<p style="color:blue;">Mavi Renkli Yazı</p> <p style="color:red;">Kırmızı Renkli Yazı</p>
Çıktısı;
Mavi Renkli Yazı
Kırmızı Renkli Yazı
font-family niteliği, bir HTML etiketi içerisinde ki yazının , yazı karakterini belirlemek için kullanılır. Font-family niteliğinin değeri olarak , yazı karakterlerinin isimleri girilir. Hangi yazı karakterlerini kullanabileceğinizi görmek için internet üzerinden arama yapabilirsiniz.
Örnek;
<p style="font-family:courier;">Courier fontu ile yazılmış yazı.</p> <p style="font-family:verdana;">Verdana fontu ile yazılmış yazı.</p>
Courier fontu ile yazılmış yazı.
Verdana fontu ile yazılmış yazı.
font-size niteliği, bir HTML etiketi içerisinde ki yazının boyutunu belirlemek için kullanılır. Font-size niteliğinin değeri olarak , piksel , yüzde gibi ölçü birimleri ile oluşturabilirsiniz. Font-size değeri olarak neleri kullanabileceğinizi görmek için tıklayınız !
Örnek ;
<p style="font-size:small;">Küçük Yazı</p> <p style="font-size:18px;">18 piksellik yazı</p>
Çıktısı ;
Küçük Yazı
18 piksellik yazı
text-align niteliği, bir HTML etiketi içerisinde ki yazının hizasını belirlemek için kullanılır. Text-align niteliğinin değeri olarak , center , left , right , justify , initial gibi değerler girebilirsiniz.Bu değerlerin kullanımını görmek için tıklayınız!
Örnek ;
<p style="text-align:center;">Ortalanmış Paragraf.</p> <p style="text-align:right;">Sağ tarafa hizalanmış paragraf.</p>
Çıktısı ;
Ortalanmış Paragraf.
Sağ tarafa hizalanmış paragraf.
Tebrikler! Bu derste HTML’de Stil oluşturmayı , sitenizde ki yazıların renklerini , yazı karakterlerini , yazı boyutlarını , yazı hizalamalarını , arka plan renklerini oluşturmayı öğrendiniz. Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.
HTML Derslerinin yedinci kısmı olan dersimizde , HTML’de Stil (Style) Kullanımını öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !
Bir sonraki derse “HTML Dersleri 8 – Renkler (Colors)” geçmek için tıklayınız !