Web geliştirme dünyasına adım atmak isteyen herkesin bilmesi gereken iki temel teknoloji vardır: HTML ve CSS. Bu iki dil, web sitelerinin iskeletini ve görünümünü oluşturur. HTML (HyperText Markup Language) içeriği yapılandırırken, CSS (Cascading Style Sheets) bu içeriğin nasıl görüntüleneceğini belirler. Bu makalede, HTML ve CSS'in temellerini, önemini ve nasıl kullanıldıklarını detaylı bir şekilde inceleyeceğiz.

HTML Nedir?

HTML, web sayfalarının temelini oluşturan bir işaretleme dilidir. HTML etiketleri, metin, resim, bağlantılar ve diğer içerik öğelerini yapılandırmak için kullanılır. Her HTML etiketi, tarayıcıya içeriğin nasıl görüntülenmesi gerektiğini söyler. HTML, bir web sayfasının iskeletini oluşturur, içeriğin anlamını ve yapısını tanımlar.

Temel HTML Etiketleri

HTML'de birçok farklı etiket bulunur, ancak bazıları daha temel ve sık kullanılır. İşte en önemlilerinden bazıları:

<html>: HTML belgesinin kök etiketidir.
<head>: Belge hakkında meta verileri içerir (başlık, karakter seti, stil dosyaları vb.).
<title>: Tarayıcı sekmesinde görünen başlığı tanımlar.
<body>: Web sayfasının içeriğini (metin, resim, bağlantılar vb.) içerir.
<h1> - <h6>: Başlıkları tanımlar (<h1> en büyük başlık, <h6> en küçük başlık).
<p>: Paragrafları tanımlar.
<a>: Köprüleri (linkleri) tanımlar. href özelliği hedef URL'yi belirtir.
<img>: Resimleri tanımlar. src özelliği resim dosyasının URL'sini belirtir. alt özelliği, resim yüklenemediğinde veya ekran okuyucular tarafından kullanılan alternatif metni belirtir.
<ul> ve <li>: Sırasız listeleri (unordered lists) tanımlar. <li> etiketleri liste öğelerini belirtir.
<ol> ve <li>: Sıralı listeleri (ordered lists) tanımlar. <li> etiketleri liste öğelerini belirtir.
<div>: Bölümleri (divisions) tanımlar. İçeriği gruplandırmak ve stil uygulamak için kullanılır.
<span>: Metin parçalarını (spans) tanımlar. Metin içinde belirli bir bölümü stil uygulamak için kullanılır.

HTML Örneği

Aşağıdaki örnek, basit bir HTML belgesinin yapısını göstermektedir:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basit HTML Belgesi</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu, basit bir HTML belgesidir.</p>
    <a href="https://www.example.com">Örnek Web Sitesi</a>
    <img src="resim.jpg" alt="Açıklayıcı Resim">
</body>
</html>

CSS Nedir?

CSS (Cascading Style Sheets), HTML ile oluşturulan web sayfalarının görünümünü kontrol etmek için kullanılan bir stil dilidir. CSS, renkler, yazı tipleri, düzen, animasyonlar ve diğer görsel özellikleri tanımlar. CSS, HTML'den ayrılarak içeriğin sunumunu kontrol etmeyi kolaylaştırır ve web sitelerinin tutarlı bir görünüme sahip olmasını sağlar.

CSS Seçicileri ve Özellikleri

CSS'de stil kuralları, seçiciler ve özellikler kullanılarak tanımlanır. Seçiciler, hangi HTML öğelerinin stil uygulanacağını belirtirken, özellikler bu öğelerin nasıl görüneceğini tanımlar.

Seçiciler: HTML öğelerini hedeflemek için kullanılır (örneğin, p (paragraf öğeleri), .class-adı (sınıf adı olan öğeler), #id-adı (id adı olan öğeler)).
Özellikler: Öğelerin görünümünü kontrol etmek için kullanılır (örneğin, color (metin rengi), font-size (yazı boyutu), background-color (arka plan rengi), margin (kenar boşluğu), padding (iç boşluk)).

CSS Kullanım Yöntemleri

CSS, HTML belgesine üç farklı şekilde uygulanabilir:

Satır İçi (Inline) CSS: HTML etiketlerinin içinde style özelliği kullanılarak doğrudan stil tanımlanır. Genellikle önerilmez, çünkü kodun okunabilirliğini ve bakımını zorlaştırır.
Dahili (Internal) CSS: <style> etiketi içinde, <head> bölümünde stil tanımlanır. Küçük projeler için uygun olabilir.
Harici (External) CSS: Ayrı bir .css dosyası oluşturulur ve HTML belgesine <link> etiketi ile bağlanır. En iyi uygulama yöntemidir, çünkü kodun düzenli ve yönetilebilir olmasını sağlar.

CSS Örneği

Aşağıdaki örnek, harici bir CSS dosyasının nasıl kullanıldığını ve temel stil özelliklerini göstermektedir:

HTML (index.html):


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Örneği</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu, CSS ile stilize edilmiş bir paragraftır.</p>
</body>
</html>

CSS (style.css):


body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
}

HTML ve CSS Birlikteliği

HTML ve CSS, birlikte çalışarak web sitelerinin hem yapısını hem de görünümünü oluşturur. HTML içeriği tanımlarken, CSS bu içeriğin nasıl görüntüleneceğini belirler. Bu ayrım, web geliştiricilerin içeriği ve sunumu ayrı ayrı yönetmelerini sağlar, bu da web sitelerinin daha kolay güncellenmesini ve bakımının yapılmasını mümkün kılar.

Responsive Tasarım

Günümüzde, web sitelerinin farklı cihazlarda (masaüstü, tablet, mobil) düzgün bir şekilde görüntülenmesi önemlidir. Responsive tasarım, CSS kullanarak web sitelerinin ekran boyutuna göre otomatik olarak uyum sağlamasını sağlar. Media queries, CSS'de farklı ekran boyutları için farklı stil kuralları tanımlamak için kullanılır.

Örnek Media Query:


/* Küçük ekranlar için stil kuralları */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 2em;
    }
}

/* Büyük ekranlar için stil kuralları */
@media (min-width: 992px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 2.5em;
    }
}

Sonuç ve Özet

HTML ve CSS, web geliştirmenin temel taşlarıdır. HTML, web sayfalarının yapısını ve içeriğini tanımlarken, CSS bu içeriğin nasıl görüntüleneceğini belirler. Bu iki dilin birlikte kullanımı, web geliştiricilerin etkileyici, kullanıcı dostu ve erişilebilir web siteleri oluşturmasını sağlar. HTML ve CSS'i öğrenmek, web geliştirme dünyasına adım atmak için atılacak en önemli adımdır. Bu makalede, HTML ve CSS'in temellerini, önemini ve nasıl kullanıldıklarını inceledik. Web geliştirme yolculuğunuzda başarılar dileriz!