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:
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:
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?
styles.cssdosyası oluşturmayı ve dosyayı HTML içerisine eklemeyiHTMLdosyası içerisindestyles.cssdosyası kullanmadanstyleetiketi kullanarak stil yüklemeyicolorstil etiketinin renk verdiğinifont-sizestil etiketinin metin boyutunu ayarladığınıbackground-colorstil etiketinin arka plan rengini ayarladığınıborderstil etiketinin bir kenar çizgisi eklediğinitext-alignstil etiketinin metini hizalamaya yaradığını öğrendik.
