HTML Dersleri 7 – Stiller (Styles)

stil

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 STİL PARAMETRESİ

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 ;

HTML Arkaplan Rengi | background-color

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>

Çıktısı ;

HTML Arkaplan Rengi

Ö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.

HTML YAZI RENGİ | color

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ı

HTML YAZI KARAKTERLERİ | font-family

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>

Çıktısı ;

Courier fontu ile yazılmış yazı.
Verdana fontu ile yazılmış yazı.

HTML YAZI BOYUTU | font-size

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ı

HTML METİN HİZALAMASI | text-align

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 !

Test’e katıl öğrendiklerini pekiştir !

TESTE BAŞLAMAK İÇİN TIKLAYINIZ!

Bir sonraki derse  “HTML Dersleri 8 – Renkler (Colors)” geçmek için tıklayınız !

Beğendiysen makaleyi paylaşarak destek olabilirsiniz!

2 Yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir