.

* bölümü, web sayfasının kendisi hakkında meta bilgileri (sayfa başlığı, karakter kodlaması, harici CSS dosyalarına bağlantılar vb.) içerir. Bu bölümdeki bilgiler doğrudan tarayıcıda görünmez, ancak sayfanın nasıl işleneceğini ve arama motorları tarafından nasıl indeksleneceğini etkiler. Örneğin, tarayıcı sekmesinde görünen başlık etiketi içinde yer alır.
* bölümü ise web sayfasının asıl içeriğini barındırır. Kullanıcıların tarayıcıda gördüğü tüm öğeler (metinler, görseller, videolar, bağlantılar vb.) bu bölümün içine yazılır.

Temel HTML Etiketleri ve Kullanım Alanları

HTML, içeriği yapılandırmak için çeşitli etiketler sunar. İşte en sık kullanılanlardan bazıları:

* Başlıklar (Headings): Bir sayfanın ana başlıklarını ve alt başlıklarını belirtmek için

‘den

‘ya kadar etiketler kullanılır.

en önemli başlığı temsil ederken,

en az önemli başlığı temsil eder.

        
Ana Başlık
        
Alt Başlık
        
Daha Küçük Alt Başlık
      

* Paragraflar (Paragraphs): Metin bloklarını oluşturmak için

etiketi kullanılır.

        
Bu, bir paragraf metnidir. Web geliştirmenin temellerini öğrenmek oldukça heyecan verici.
      

* Bağlantılar (Links): Bir sayfadan başka bir sayfaya veya aynı sayfa içinde farklı bir bölüme gitmek için (anchor) etiketi kullanılır. href özelliği, bağlantının gideceği URL’yi belirtir.

        Örnek Bir Siteye Git
      

* Görseller (Images): Web sayfalarına görsel eklemek için etiketi kullanılır. src özelliği görselin yolunu, alt özelliği ise görselin alternatif metnini (erişilebilirlik ve SEO için önemlidir) belirtir.

* Listeler (Lists): Bilgileri düzenli bir şekilde sunmak için listeler kullanılır.
* Sırasız listeler (unordered lists) için

ve liste öğeleri için
• .
  * Sıralı listeler (ordered lists) için
  ve liste öğeleri için
• .

  
          
  
            
  HTML
            
  CSS
            
  JavaScript
          
  
          
  
            
  Birinci Adım
            
  İkinci Adım
            
  Üçüncü Adım
          
        

  * Semantik Etiketler: Modern HTML5 ile birlikte gelen

  , ,

  ,

  ,

  , ve gibi etiketler, sayfa içeriğinin anlamsal yapısını daha net belirtmeye yardımcı olur. Bu etiketler, hem arama motorları hem de ekran okuyucular gibi erişilebilirlik araçları için büyük önem taşır. Örneğin, bir web sayfasının üst kısmındaki logo ve menü genellikle

  ve etiketleri içinde yer alır. Ana içerik

  etiketiyle çevrelenirken, her bir makale veya blog yazısı

  etiketiyle belirtilebilir.

  HTML, web sayfalarının temelini oluşturarak içeriğe anlam ve yapı kazandırır. Bu etiketleri doğru ve anlamlı bir şekilde kullanmak, sadece görsel bir düzen sağlamakla kalmaz, aynı zamanda sayfanızın erişilebilirliğini ve arama motoru optimizasyonunu (SEO) da doğrudan etkiler. Bu temel yapı taşlarını anlamak, web geliştirme yolculuğunuzda atacağınız en sağlam adımdır.

  CSS Nedir ve Web Sayfalarımızı Nasıl Güzelleştiririz?

  HTML, bir web sayfasının iskeletini oluştururken, CSS (Cascading Style Sheets – Basamaklı Stil Sayfaları) bu iskelete estetik bir görünüm kazandıran, renkleri, yazı tiplerini, düzeni ve diğer görsel özellikleri belirleyen dildir. HTML olmadan bir web sayfası sadece düz metin ve bağlantılardan ibaretken, CSS ile bu sayfa canlı, etkileşimli ve görsel olarak çekici bir hale gelir.

  Neden CSS Kullanmalıyız?

  CSS kullanmanın birçok önemli faydası vardır:

  * İçerik ve Tasarımı Ayırma: CSS, içeriği (HTML) sunumdan (tasarım) ayırır. Bu, HTML dosyasının daha temiz ve okunabilir olmasını sağlar, tasarım değişikliklerini çok daha kolay hale getirir ve aynı HTML yapısına farklı CSS dosyaları uygulayarak farklı temalar oluşturmanıza olanak tanır.
  * Tutarlılık ve Verimlilik: Bir CSS dosyasıyla birden fazla web sayfasının stilini kontrol edebilirsiniz. Bu, web sitenizdeki tüm sayfaların tutarlı bir görünüme sahip olmasını sağlar ve tek bir değişiklik yaparak sitenizin genel tasarımını güncellemenize olanak tanır.
  * Daha Hızlı Yükleme Süreleri: CSS kodları genellikle tarayıcılar tarafından önbelleğe alınır. Bu, bir kullanıcının sitenizin farklı sayfalarını ziyaret ettiğinde stil dosyalarını tekrar indirmesine gerek kalmaması anlamına gelir, bu da sayfa yükleme sürelerini hızlandırır.
  * Erişilebilirlik ve Duyarlılık: CSS, web sayfalarını farklı cihaz boyutlarına ve ekran tiplerine (masaüstü, tablet, mobil) uyumlu hale getirmek için kullanılır. Bu, duyarlı tasarım (responsive design) ilkelerinin temelini oluşturur.

  CSS’i HTML’e Bağlama Yolları

  CSS kodlarını HTML belgesine dahil etmenin üç temel yolu vardır:

  1. Harici Stil Sayfaları (External Style Sheets): En çok tercih edilen ve önerilen yöntemdir. CSS kodları ayrı bir .css uzantılı dosyada saklanır ve HTML belgesine etiketi aracılığıyla bağlanır.

  Bu yöntem, içeriği ve tasarımı tamamen ayırır, bakımı kolaylaştırır ve sitenin genelinde tutarlılık sağlar.
  2. Dahili Stil Sayfaları (Internal Style Sheets): CSS kodları, HTML belgesinin bölümünde yer alan