HTML ve CSS Nedir?

Bir web sayfasını ev gibi düşünebilirsin: HTML duvarları ve odaları, CSS boyayı ve mobilyayı, JavaScript ise elektrik tesisatını, yani etkileşimi sağlar.

HTML: yapı ve içerik

HTML (HyperText Markup Language), içeriği etiketlerle işaretler:

<h1>Fotoğraf Stüdyomuz</h1>
<p>Vesikalık ve düğün çekimi yapıyoruz.</p>
<a href="/iletisim">Bize ulaşın</a>
<img src="studyo.jpg" alt="Stüdyonun içi">

• <h1> ana başlık, <p> paragraf, <a> bağlantı, <img> resimdir.
• alt metni, resmi göremeyen kullanıcılar ve arama motorları için resmin ne olduğunu anlatır.
• Doğru etiket kullanmak (başlık için başlık etiketi gibi) hem erişilebilirliği hem de arama motorlarında görünürlüğü iyileştirir.

CSS: görünüm

CSS (Cascading Style Sheets), HTML öğelerinin nasıl görüneceğini belirler:

h1 {
  color: #1f7a4d;
  font-size: 2rem;
  text-align: center;
}

Bu kural bütün ana başlıkları yeşil, büyük ve ortalı yapar. CSS ile renkler, yazı tipleri, boşluklar, yerleşim ve animasyonlar ayarlanır.

Duyarlı (responsive) tasarım

Aynı sayfa telefonda, tablette ve bilgisayarda farklı genişliklerde açılır. CSS'teki medya sorguları ve esnek yerleşim araçları (flexbox, grid) sayesinde sayfa ekran boyutuna göre kendini düzenler. Bugün ziyaretlerin büyük bölümü telefondan geldiği için bu çok önemlidir.

Nereden başlanır?

1. Bir metin düzenleyicide index.html dosyası oluştur.
2. Birkaç başlık ve paragraf yaz, dosyayı tarayıcıda aç.
3. Bir style.css dosyası ekleyip renk ve yazı tipini değiştir.
4. Tarayıcının geliştirici araçlarıyla (F12) sayfadaki öğeleri inceleyip denemeler yap.

Özet

• HTML içeriği ve yapıyı, CSS görünümü tanımlar.
• Doğru etiketler erişilebilirlik ve arama görünürlüğü sağlar.
• Duyarlı tasarım sayfayı her ekrana uydurur.