HTML Stilleri Nelerdir? Nasıl Kullanılır? (HTML Dersleri 4)

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

Bu bölümde HTML Stillerini inceleyeceğiz. Günümüzde internetin hayatımızdaki yeri her geçen gün artmakta ve web sayfalarının tasarımı da aynı şekilde önemini korumaktadır. Bu nedenle, web tasarımı yaparken HTML stillerinin kullanımı oldukça önemlidir. Bu makalede, HTML stilleri hakkında genel bir bilgilendirme yapılacak ve kodlama örnekleriyle kullanımı detaylandırılacaktır.

HTML Stilleri Nedir?

HTML, web sayfalarının yapılandırılmasında kullanılan bir dildir. HTML stilleri ise, HTML kodlarını okunaklı, anlaşılır ve estetik bir hale getirmeye yarayan bir yapıdır. Yani, HTML stilleri sayesinde web sayfalarının görünümü ve düzeni kolayca ayarlanabilir.

HTML Stilleri Nasıl Kullanılır?

HTML stilleri, CSS (Cascading Style Sheets) adı verilen bir dosya yardımıyla kullanılır. Bu dosyada, web sayfasındaki tüm stil özellikleri belirtilir ve HTML kodlarına bu dosya ile bağlantı kurulur.

Örneğin, aşağıdaki HTML kodu kullanarak bir başlık etiketi oluşturalım:


<h1>Bu bir başlıktır</h1>

Bu başlık etiketi şu şekilde görüntülenecektir:

Bu bir başlıktır

Ancak, stil özellikleri eklediğimizde bu başlık etiketi çok daha şık ve okunaklı hale gelecektir.


<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bu bir başlıktır</h1>
</body>

Ayrıca, styles.css dosyasında aşağıdaki kodu ekleyerek bu başlığı stil özellikleri ile güzelleştirebiliriz:


h1 {
  font-size: 32px;
  color: red;
  text-align: center;
}

Bu kodu eklediğimizde, başlık etiketi şu şekilde görüntülenecektir:

Bu bir başlıktır

Yukarıda ne yaptık?

Bir styles.css dosyası oluşturduk ve link rel ile bunun bir style dosyası olduğunu belirttik.
Bir önceki dersimizde öğrendiğimiz href etiketiyle style dosyamızın nerede bulunduğunu belirttik.
Ardından body bölgesine geçip <h1> ile sayfamızın başlığını attık.
Sonrasında oluşturduğumuz css dosyasına geçip, <h1> etiketimizin stil kodlarını oluşturduk.
font-size: oluşturduğumuz başlığın font büyüklüğünü belirlediğimiz stil dosyasıdır.
color: oluşturduğumuz başlığın font rengini belirlediğimiz stil dosyasıdır.
text-align: oluşturduğumuz başlığı istediğimiz bölgeye hizalamamızı sağlayan stil dosyasıdır.

Peki ya bu kodu ayrı styles.css dosyasında değil de HTML kodlarının içerisine yazmak istersek nasıl yazarız?

Örnek:


<head>
<style> 
h1 {
  font-size: 32px;
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1>Bu bir başlıktır</h1>
</body>

Görünüm:

Bu bir başlıktır

Eğer bir styles.css dosyası oluşturmayıp HTML dosyasının içerisinde css kodlarını yazmak istersek, <style> css kodları </style> etiketi arasında yazmamız yeterli olacaktır.

Kodlama Örnekleriyle HTML Stilleri

HTML stillerini kullanarak web sayfası tasarımına uygun birçok farklı özellik ekleyebiliriz. Örneğin, metin boyutu, renkleri, çizgi stilleri, arka plan rengi, gibi birçok özellik ekleyebiliriz. Aşağıda, HTML stilleri kullanarak yapılabilecek örnekleri görebilirsiniz:

1. Metin boyutu değiştirme:

Örnek:


<h1 style="font-size: 24px;">Bu bir başlıktır</h1>

Yukarıda, <h1> ile bir başlık attık ve başlık için bir metin boyutu kodu girişi yapıp 24px'e başlığı sabitledik.

Görünüm:

Bu bir başlıktır

2. Renk değiştirme:

Örnek:


<h2 style="color: red;">Bu bir alt başlıktır</h2>

Yukarıda <h2> ile bir alt başlık belirleyip, <h2> etiketimize style ile bir renk belirledik.

Görünüm:

Bu bir alt başlıktır

3. Arka plan rengi ayarlama:

Örnek:


<p style="background-color: yellow;">Bu bir paragraftır</p>

Yukarıda <p> paragraf etiketimizi açarak içerisine stil belirtip arkaplan rengini sarı olarak belirledik.

Görünüm:

Bu bir paragraftır

4. Kenar çizgisi ekleme:

Örnek:


<div style="border: 1px solid black;">Bu bir div etiketidir</div>

Yukarıda bir div etiketi belirleyip, div'e stil olarak bir kenar çizgisi ekledik.

Örnek:

Bu bir div etiketidir

5. Metin hizalama:

Örnek:


 <p style="text-align: center;">Bu bir paragraftır</p>
 

Yukarıda bir paragraf etiketi oluşturduk ve metni hizalamak için bir stil dosyası yükledik, center kullanarak metni kullandığımız bölüm içerisinde ortaladık.

Görünüm:

Bu bir paragraftır

5 Stili Birleştirelim

Şimdi bugün öğrendiğimiz tüm stilleri tek bir div üzerinde deneyelim mi?


 <div class="eadiv">Bu bir yazıdır.  </div>
 <style>
.eadiv{
    font-size:24px;
    color:red;
    background-color:yellow;
    border:1px solid black;
    text-align:center;
}
</style>
 

Yukarıda bir div oluşturduk ve bir önceki dersimizde öğrendiğimiz class niteliği ile div'i bir bölüme ayırdık.

Ardından, bir bölüme ayırdığımız div'in css dosyamızda bulunan adını class niteliğinin içerisine yerleştirdik.

Görünüm:

Bu bir yazıdır.

Gördüğümüz gibi, yukarıda bulunan 5 örneği tek bir div içerisine bir bölümde birleştirdik.

HTML Stilleri ve SEO

Web sayfalarının SEO uyumlu olması, sayfanın görünürlüğünü arttırmak açısından oldukça önemlidir. HTML stilleri, web sayfalarının SEO uyumlu olmasında da rol oynayabilir.

Örneğin, sayfa başlığı (h1 etiketi) anahtar kelime içermeli ve sayfa içindeki alt başlıklar (h2, h3 etiketleri) hiyerarşik yapıda kullanılmalıdır. Bu etiketlerin kullanımı, sayfanın SEO uyumlu olmasına yardımcı olur.

Bu nedenle, bu makalede de h1 etiketi sayfa başlığı için kullanılmıştır. Ayrıca, h2 etiketi alt başlık olarak kullanılmıştır.

Sonuç olarak, HTML stilleri web sayfası tasarımında oldukça önemli bir rol oynar. HTML kodlarına stil özellikleri ekleyerek sayfanın görünümünü kolay bir şekilde değiştirebiliriz. Ayrıca, sayfanın SEO uyumlu olması için de doğru etiket kullanımına dikkat etmek gerekir.

Bu derste neler öğrendik?

  1. styles.css dosyası oluşturmayı ve dosyayı HTML içerisine eklemeyi
  2. HTML dosyası içerisinde styles.css dosyası kullanmadan style etiketi kullanarak stil yüklemeyi
  3. color stil etiketinin renk verdiğini
  4. font-size stil etiketinin metin boyutunu ayarladığını
  5. background-color stil etiketinin arka plan rengini ayarladığını
  6. border stil etiketinin bir kenar çizgisi eklediğini
  7. text-align stil etiketinin metini hizalamaya yaradığını öğrendik.

Sizin İçin Önerdiklerimiz

Blog Resim
HTML Yazı Elementleri ve Kullanım Örnekleri (Ders-5)

HTML

Merhabalar! 5. Bölüme Hoşgeldiniz, bu bölümde HTML yazılarının elementleri ve kullanım örneklerini göstereceğiz. HTML (Hyper Text Markup Language)..

Devamını Oku
Blog Resim
HTML'de CSS Nasıl Kullanılır? Örnekleriyle (Ders-8)

HTML

Günümüzde web siteleri, birçok kişi için önemli bir gelir kaynağı olmaktadır. Web siteleri, kullanıcıların ihtiyaçlarına göre tasarlanır ve bu tasarımın..

Devamını Oku
Blog Resim
HTML Renkleri Nelerdir? Nasıl Kullanılır? (Ders-7)

HTML

HTML renkleri, önceden tanımlanmış renk adlarıyla veya RGB, HEX, HSL, RGBA veya HSLA değerleriyle belirtilir. HTML'de, bir renk adı kullanılarak:..

Devamını Oku
Blog Resim
HTML (h1, h2, h3) Başlık Etiketleri ve Kullanımı

HTML

HTML başlık etiketleri, bir web sayfasının içeriği hakkında bilgi verir ve arama motorlarına içeriğin neyle ilgili olduğunu açıklar. Bu nedenle, başlık etiketlerinin..

Devamını Oku