Web geliştirme dünyasına adım attığınızda, HTML’in web sitelerinin temel iskeletini oluşturduğunu öğrenirsiniz. Ancak sadece temel HTML etiketleri kullanılarak oluşturulan bir web sayfası, siyah metinler ve beyaz bir arka plandan ibaret, oldukça sade bir görünüme sahip olur. Bir web sayfasının göze hitap etmesi, kullanıcı dostu olması ve markanızın kimliğini yansıtması için bu iskeletin giydirilmesi ve boyanması gerekir. İşte bu noktada HTML Stiller (Styles) ve CSS (Cascading Style Sheets – Basamaklı Stil Şablonları) devreye girer.
Bu rehberde, ilk defa web tasarımı yapacak biri olarak HTML belgelerinize nasıl stil ekleyebileceğinizi, temel stil özelliklerini ve modern web dünyasında SEO (Arama Motoru Optimizasyonu) açısından stillerin nasıl kurgulanması gerektiğini örneklerle öğreneceğiz.
Geçmişten Günümüze HTML’de Stil Kullanımı
Eski HTML sürümlerinde (Örneğin HTML 3.2 ve HTML 4), metinleri renklendirmek veya hizalamak için doğrudan HTML etiketleri kullanılırdı. Örneğin bir metni kırmızı yapmak için <font color="red"> veya ortalamak için <center> gibi sunumsal (presentational) etiketler mevcuttu.
Ancak modern HTML5 standartları ile birlikte bu sunumsal etiketler tamamen kullanımdan kaldırılmış (deprecated) ve reddedilmiştir. Bunun çok önemli bir nedeni vardır: İçerik (HTML) ile görsel tasarımın (Stil/CSS) birbirinden ayrılması gerekliliği. İçerik ve tasarımın birbirinden ayrılması; kodun arama motorları tarafından çok daha hızlı okunmasını, sitenin daha hızlı yüklenmesini ve görme engelli bireylerin kullandığı ekran okuyucuların siteyi daha iyi anlamasını sağlar. Artık bir HTML elementine görsel bir özellik katmak istediğimizde bunu sadece “Stiller” aracılığıyla yapıyoruz.
HTML Belgesine Stil Eklemenin 3 Farklı Yolu
HTML sayfalarınızı şekillendirmek için üç temel yöntem bulunur. İhtiyacınıza ve projenizin büyüklüğüne göre bunlardan birini seçebilirsiniz:
1. Satır İçi Stiller (Inline Styles)
Satır içi stiller, doğrudan HTML etiketinin içerisine style niteliği (attribute) eklenerek yazılır. Hızlı bir test yapmak veya sayfadaki tek bir elemente özel, benzersiz bir stil atamak istediğinizde kullanılır.
- Örnek Kullanım:
<h1 style="color: red; text-align: center;">Büyük Kırmızı Başlık!</h1>. - Avantajı: Diğer tüm stil kurallarını ezer ve en yüksek önceliğe sahiptir.
- Dezavantajı: Her HTML etiketine ayrı ayrı
styleyazmak HTML kodunuzu inanılmaz derecede şişirir, kod kalabalığı yaratır ve sitenin bakımını (örneğin ileride kırmızı rengi mavi yapmak isterseniz) bir kabusa dönüştürür.
2. Dahili Stiller (Internal / Embedded Styles)
Dahili stiller, HTML belgenizin beyni olan <head> bölümünün içerisine <style> etiketleri açılarak yazılır. Bu yöntem, sadece o an üzerinde çalıştığınız tek bir HTML sayfasını şekillendirmek için kullanılır.
- Örnek Kullanım:
<head> <style type="text/css"> p { color: blue; font-size: 16px; } </style> </head> - Avantajı: Satır içi stillere göre çok daha düzenlidir ve HTML etiketlerini karmaşadan kurtarır.
- Dezavantajı: Web sitenizde 50 farklı sayfa varsa ve hepsindeki paragrafların rengini değiştirmek isterseniz, 50 sayfanın da
<head>kısmındaki kodu tek tek değiştirmeniz gerekir.
3. Harici Stiller (External Styles) – En İyi Uygulama
Modern web geliştirmenin altın kuralı harici stiller kullanmaktır. Bu yöntemde tüm stil kodları .css uzantılı ayrı bir metin dosyasına (örneğin stil.css) yazılır. Daha sonra bu dosya, HTML sayfasının <head> bölümüne bir <link> etiketi aracılığıyla bağlanır.
- Örnek Kullanım:
<link rel="stylesheet" href="stil.css" type="text/css">. - Avantajı: “DRY (Don’t Repeat Yourself – Kendini Tekrar Etme)” prensibine en uygun yöntemdir. Tek bir
.cssdosyasında yapacağınız ufak bir renk değişikliği, o dosyaya bağlı binlerce HTML sayfasını anında günceller. Ayrıca tarayıcılar bu harici dosyayı önbelleğe (cache) alır, böylece sitenizin sayfaları arasında gezen bir kullanıcı için sayfalar çok daha hızlı yüklenir. Bu hız artışı, Google’ın sitenizi SEO açısından ödüllendirmesini sağlar.
HTML style Niteliğinin Anatomisi ve Kullanımı
Eğer HTML içinde style niteliğini kullanıyorsanız, belirli bir yazım kuralına (syntax) uymanız gerekir. Genel kural şöyledir: özellik: değer;.
Bir HTML elementine birden fazla stil kuralı uygulayacaksanız, aralarına mutlaka noktalı virgül (;) koymalısınız. Örnek: <p style="color: blue; font-size: 18px; font-family: Arial;">Bu bir paragraftır.</p>.
Başlangıç İçin Bilmeniz Gereken Temel HTML Stil Özellikleri
Web sayfanızı şekillendirmeye başlarken en sık kullanacağınız stil özellikleri şunlardır:
1. Arka Plan Rengi (background-color): Bir elementin veya tüm sayfanın arka planını renklendirmek için kullanılır. Örnek: <body style="background-color: black;"> kodunu kullanırsanız, tüm web sayfanızın arka planı siyah olur.
2. Metin Rengi (color): HTML elementinin içindeki metnin (yazının) rengini değiştirir. Renkleri İngilizce kelimelerle (red, blue), onaltılık (hexadecimal) kodlarla (#FF0000) veya RGB değerleriyle (rgb(255,0,0)) belirtebilirsiniz. Örnek: <h2 style="color: #FF5733;">Turuncu Alt Başlık</h2>
3. Yazı Tipi Ailesi (font-family): Yazılarınızın hangi karakter tipiyle gösterileceğini seçmenizi sağlar. Tarayıcının bir yazı tipini bulamaması ihtimaline karşı genellikle birden fazla yazı tipi virgülle ayrılarak yazılır. Örnek: <p style="font-family: Arial, sans-serif;">Düz ve okunaklı bir metin.</p>.
4. Yazı Boyutu (font-size): Metnin büyüklüğünü ayarlamak için kullanılır. Genellikle px (piksel) veya em / rem gibi göreceli birimler kullanılır. Örnek: <h1 style="font-size: 36px;">Büyük Ana Başlık</h1>.
5. Metin Hizalama (text-align): Metinleri sağa, sola veya ortaya hizalamak için kullanılır. Örnek: <h3 style="text-align: center;">Ortalanmış Başlık</h3>.
6. HTML Kutu Modeli (Box Model) Stilleri: HTML’deki her element görünmez bir dikdörtgen kutu içindedir. Bu kutuları yönetmek için şu stilleri sıkça kullanırsınız:
padding(İç Boşluk): İçerik ile çeper (kenarlık) arasındaki boşluktur.border(Kenarlık): Elementin etrafına çizgi çeker. Örnek:border: 1px solid black;.margin(Dış Boşluk): Elementin diğer elementlerle arasındaki dış mesafedir.
Kaskad (Cascade) Mantığı ve Stillerin Çakışması
HTML’de stiller uygularken bilmeniz gereken en hayati kavram “Cascading” yani basamaklı/şelale mantığıdır. Bir web sayfasına birden fazla kaynaktan stil kuralı gelebilir. Örneğin, tarayıcının kendi varsayılan stilleri, sizin yazdığınız harici .css dosyasındaki stiller ve doğrudan HTML içine yazdığınız satır içi (inline) stiller aynı anda var olabilir.
Eğer bu kurallar birbiriyle çakışırsa (Örneğin harici dosya “paragraflar mavi olsun” derken, HTML içindeki kural “kırmızı olsun” diyorsa), tarayıcı hangisini seçeceğine bir öncelik algoritması ile karar verir. Bu öncelik sırasında kural şudur: HTML etiketine en yakın olan kural kazanır. Yani, doğrudan HTML elementinin içine yazdığınız satır içi (style="...") kurallar, harici veya dahili dosyalardaki tüm kuralları ezer ve en yüksek önceliğe sahiptir.
Stillerin SEO ve Erişilebilirliğe Etkisi
Bir içeriği sadece ziyaretçilerinize değil, Google botlarına ve özel gereksinimli bireylere de doğru sunmanız gerekir. HTML içinde karmaşık ve yoğun bir şekilde satır içi stil (inline style) kullanmak HTML dosyanızın boyutunu şişirir. Temiz ve sade bir HTML kodu, arama motorlarının içeriğinizi analiz etmesini (crawling) çok daha kolay hale getirir. Ağır dosyalar sayfa hızını düşürür; sayfa hızının düşmesi ise günümüzde SEO sıralamalarınızı doğrudan ve negatif yönde etkileyen en önemli faktörlerden biridir (Core Web Vitals metrikleri).
Ayrıca HTML yapısını (<h1>, <article>, <nav> gibi semantik etiketlerle) doğru kurup, tüm görsel makyajı (stilleri) harici CSS dosyalarına bırakmak; görme engellilerin kullandığı ekran okuyucular (screen readers) için içeriğin pürüzsüz bir şekilde sese dönüştürülmesini sağlar.
Özetle: HTML web sitenizin taşıyıcı kolonları ve duvarlarıdır; stiller (CSS) ise o duvarların boyası, tabloları ve ışıklandırmasıdır. HTML kodlarınızı yazarken mümkün olduğunca görsel müdahalelerden kaçının, temiz bir HTML iskeleti oluşturun ve tüm estetik kurallarınızı harici stil dosyalarıyla bağlayarak hem Google’ın hem de ziyaretçilerinizin bayılacağı hızlı, erişilebilir ve SEO dostu bir platform inşa edin. Yukarıdaki style örneklerini kendi bilgisayarınızda oluşturduğunuz basit bir HTML dosyasında deneyerek ilk pratiklerinizi kolayca yapabilirsiniz.
Bir Yorum
I go to see day-to-day some sites and blogs to read content, however
this website gives quality based content.