Web sitesi yapmanın sayısız yolu var: hazır site kurucular, içerik yönetim sistemleri, özel yazılımlar. Ama hepsinin altında sonunda tarayıcının anladığı aynı iki dil çalışır: HTML ve CSS. Bu iki dilin mantığını öğrenmek, kendi sitenizde küçük bir düzeltme yapmaktan yazılımcıyla daha rahat konuşmaya kadar pek çok işinize yarar.
HTML ve CSS nedir?
HTML sayfanın içeriğini ve yapısını belirler: Burası başlık, burası paragraf, burası görsel der. CSS ise bu içeriğin nasıl görüneceğini söyler: renk, boyut, boşluk, yerleşim. Bir evi düşünürseniz HTML duvarlar ve odalardır, CSS ise boya ve dekorasyon.
Bu ikisi tek sayfalık tanıtım siteleri için yeterlidir. Üye girişi, sipariş ya da veri kaydı gibi işler içinse JavaScript ve sunucu tarafı yazılım gerekir.
Neye ihtiyacınız var?
- Bir kod editörü: Ücretsiz Visual Studio Code iyi bir seçenektir. Windows'taki Not Defteri ile de olur ama yazım hatalarını görmek zorlaşır.
- Bir tarayıcı: Chrome, Edge, Firefox ya da Safari.
- Bir klasör: Masaüstünde ilk-sitem adlı bir klasör açın. Tüm dosyalar orada duracak.
1. Adım: Dosyaları oluşturun
Klasörün içinde iki dosya oluşturun: index.html ve stil.css. Ana sayfa dosyasına index adı verilmesinin sebebi, sunucuların bir adrese girildiğinde genellikle bu adlı dosyayı aramasıdır. Bir de gorseller adlı alt klasör açın.
Dosya adlarında Türkçe karakter ve boşluk kullanmayın. Bilgisayarınızda çalışan bir bağlantı, sunucuda bu yüzden bozulabilir.
2. Adım: Sayfanın iskeletini yazın
index.html dosyasına aşağıdaki satırları sırayla yazın:
- <!DOCTYPE html>
- <html lang="tr">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Ayşe Pastanesi</title>
- <link rel="stylesheet" href="stil.css">
- </head>
- <body>
- <!-- İçerik buraya gelecek -->
- </body>
- </html>
Bu satırların ne yaptığını kısaca bilin. head bölümü ziyaretçiye görünmeyen ayarları taşır. charset satırı Türkçe karakterlerin düzgün görünmesini, viewport satırı sayfanın telefonda doğru ölçeklenmesini sağlar. title tarayıcı sekmesindeki addır ve arama sonuçlarında da kullanılabilir. link satırı ise CSS dosyasını sayfaya bağlar. Görünen her şey body içine yazılır. Buradaki pastane adı örnektir, kendi işletmenizin adını yazın.
3. Adım: İçeriği ekleyin
body etiketlerinin arasına şunları yazın:
- <header><h1>Ayşe Pastanesi</h1><p>Siparişe özel pasta ve kurabiye</p></header>
- <main><h2>Neler yapıyoruz?</h2><p>Doğum günü pastaları ve toplu siparişler.</p>
- <img src="gorseller/pasta.jpg" alt="Çilekli doğum günü pastası"></main>
- <footer><a href="tel:+905550000000">Bizi arayın</a></footer>
Dikkat edilecek birkaç nokta var:
- Sayfada bir ana başlık (h1) olsun, alt başlıklar için sırayla h2 ve h3 kullanın. Başlıkları yazı boyutu için değil, yapıyı anlatmak için seçin.
- Her görsele görseli anlatan bir alt yazısı ekleyin. Görme engelli kullanıcılar ve arama motorları için önemlidir.
- header, main, footer gibi anlamlı etiketler, kodun hem okunmasını hem anlaşılmasını kolaylaştırır.
- Örnekteki telefon numarasını kendi numaranızla değiştirin.
index.html dosyasına çift tıklayıp tarayıcıda açın. Sade, biçimsiz ama çalışan bir sayfa göreceksiniz. Asıl ilerleme tam olarak budur.
4. Adım: CSS ile görünümü düzenleyin
stil.css dosyasına şu kuralları yazın:
- body { font-family: Arial, sans-serif; margin: 0; color: #222; line-height: 1.6; }
- header { background: #7a2e3a; color: #fff; padding: 40px 20px; text-align: center; }
- main { max-width: 760px; margin: 0 auto; padding: 20px; }
- img { max-width: 100%; height: auto; }
- footer { text-align: center; padding: 20px; }
Her kural aynı biçimdedir: seçici, süslü parantez, sonra özellik ve değer. Örneğin max-width: 760px yazı alanının çok geniş ekranlarda aşırı uzamasını önler. img kuralı görsellerin ekrandan taşmamasını sağlar, telefonda düzgün görünümün büyük kısmı bu basit kurala bağlıdır. Dosyayı kaydedip tarayıcıda sayfayı yenileyin. Renkleri ve değerleri değiştirip sonucu izlemek, CSS öğrenmenin en hızlı yoludur.
5. Adım: Hataları bulun
Sayfa beklediğiniz gibi görünmüyorsa panik yapmayın. En sık karşılaşılan sebepler şunlardır:
- Kapatılmamış etiket veya unutulmuş tırnak işareti
- CSS'te eksik noktalı virgül ya da süslü parantez
- Dosya adı veya yolunda yazım farkı (Pasta.jpg ile pasta.jpg sunucuda farklı sayılabilir)
- Dosyayı kaydetmeden tarayıcıyı yenilemek
Tarayıcıda sayfaya sağ tıklayıp İncele seçeneğini kullanarak hangi kuralın uygulandığını görebilirsiniz. Bu geliştirici araçları ücretsizdir ve öğrenme sürecinde çok işe yarar.
6. Adım: Siteyi yayına alın
Sitenin başkaları tarafından görülebilmesi için dosyaların internete açık bir sunucuda durması gerekir. İki yaygın yol vardır:
- Ücretsiz statik barındırma: GitHub Pages veya benzeri servisler deneme ve kişisel sayfalar için uygundur.
- Alan adı ve hosting: İşletme için kendi alan adınızı alıp bir hosting paketinin dosya yöneticisi veya FTP ile dosyaları yükleyebilirsiniz. Dosyalar genellikle public_html klasörüne atılır.
Yayına aldıktan sonra sitenizi telefonda da açın, bağlantıları tek tek deneyin ve görsellerin yüklendiğinden emin olun. Bilgisayarınızda dosya değiştirdiğinizde sunucudaki kopyanın kendiliğinden güncellenmediğini de unutmayın, her düzeltmeden sonra dosyayı yeniden yüklemeniz gerekir.
Sonra ne öğrenmeli?
Bu sayfa çalıştıktan sonra Flexbox ile yan yana yerleşim yapmayı, medya sorgularıyla farklı ekranlara uyum sağlamayı öğrenin. Ardından ikinci bir sayfa ekleyip menü oluşturun.
Elle kod yazmak öğrenmek için çok değerlidir. Düzenli güncellenecek, sipariş alacak bir site gerektiğinde ise alpinnext.tr adresinden AlpinNext'e danışabilirsiniz.