Web Sitesi Kodlama Eğitimi – 2: Görselleştirme ve Stil Dünyası
Web Sitesi Kodlama Eğitimi ilk dersimizde web sitemizin iskeletini (HTML) oluşturmayı öğrenmiştik. Ancak sadece HTML ile hazırlanan bir site, boyasız ve dekorasyonsuz bir bina gibidir. Bu eğitimde, sitemize medya öğeleri ekleyerek onu zenginleştirecek ve CSS kullanarak estetik bir görünüm kazandıracağız.
1. Medya Yönetimi ve SEO Odaklı Görsel Kullanımı
Web sitenizdeki görseller, kullanıcı deneyimini artırırken doğru optimize edilmediğinde siteyi yavaşlatabilir.
Resim Ekleme (<img>): Görseller için <img src=”resim-adresi.jpg” alt=”Açıklama”> etiketi kullanılır.
Alt Etiketi Gerekliliği: alt niteliği, görselin ne olduğunu arama motorlarına ve ekran okuyucularına anlatır. SEO için bu alanı boş bırakmamalısınız.
Format Seçimi: Modern web için yüksek kaliteli ancak düşük boyutlu olan WebP formatı tercih edilmelidir.
2. Video ve Iframe Yerleştirme
Sitenize etkileşim katmanın en iyi yolu video içerikleridir.
Video Etiketi: Kendi sunucunuzdaki videolar için <video> etiketini kullanabilirsiniz.
Iframe ile YouTube: Site hızını korumak için videoları YouTube üzerinden “Yerleştir” (Embed) koduyla (<iframe>) eklemek en profesyonel yöntemdir.
3. CSS Dünyasına Giriş: Stil ve Tasarımın Temeli
CSS (Cascading Style Sheets), HTML elementlerinin nasıl görüneceğini belirleyen dildir. Renkler, yazı tipleri ve yerleşimler CSS ile yönetilir.
CSS Nasıl Çalışır? Bir “Seçici” (Selector) belirlenir ve bu seçiciye bir “Özellik” (Property) atanır.
Örnek: p { color: red; } kodu tüm paragrafları kırmızı yapar.
4. CSS Uygulama Yöntemleri
CSS kodlarını projenize üç farklı şekilde dahil edebilirsiniz:
Satır İçi (Inline): Doğrudan etiketin içine yazılır (style=”…”). Tavsiye edilmez.
Dahili (Internal): <head> bölümünde <style> etiketleri arasına yazılır.
Harici (External): En profesyonel yöntemdir. .css uzantılı ayrı bir dosya oluşturulur ve HTML’e <link> etiketiyle bağlanır.
5. Seçiciler (Selectors): Class ve ID Farkı
Elementlere hükmetmek için onları doğru isimlendirmelisiniz:
Class (Sınıf): Bir sayfada birden fazla elemente verilebilir. CSS’te nokta (.) ile çağrılır. (Örn: .mavi-buton)
ID (Kimlik): Bir sayfada sadece bir elemente verilebilir. Kare (#) ile çağrılır. (Örn: #ana-baslik)
6. Renk Teorisi ve Tipografi
Web tasarımında profesyonelliği detaylar belirler.
Renk Kodları: CSS’te renkler isimle (red), HEX koduyla (#FF5733) veya RGB (255, 87, 51) ile tanımlanır.
Google Fonts: Sitenizin yazı tipini modernleştirmek için harici font kütüphanelerini nasıl bağlayacağınızı bilmek, tasarımınızı bir üst seviyeye taşır.
Web Sitesi Kodlama Eğitimi – 2
Uzmanından İpuçları ve Sık Yapılan Hatalar
Hata: Çok büyük boyutlu görseller yükleyerek siteyi yavaşlatmak.
Çözüm: Görsellerinizi yüklemeden önce TinyPNG gibi araçlarla sıkıştırın.
İpucu: CSS yazarken kodlarınızı düzenli tutmak için yorum satırları (/* yorumunuz */) kullanın. Bu, ileride kodları okurken size zaman kazandırır.
Sıkça Sorulan Sorular (SSS)
Soru 1: CSS öğrenmeden web sitesi yapamaz mıyım? Cevap: Yapabilirsiniz ancak siteniz 1990’lı yıllardan kalma, sadece düz metinlerden oluşan bir görünüme sahip olur. Estetik bir kullanıcı deneyimi için CSS şarttır.
Soru 2: Resimlerin “alt” etiketi neden bu kadar önemli? Cevap: Google görselleri “göremez”, sadece kodları okur. Alt etiketi sayesinde Google, görselin ne hakkında olduğunu anlar ve sizi ilgili aramalarda üst sıralara çıkarır.
Soru 3: Harici CSS dosyası kullanmak neden daha iyidir? Cevap: Yüzlerce sayfalık bir siteniz olduğunu düşünün. Harici CSS kullandığınızda, sadece bir dosyada yapacağınız değişiklik tüm sayfalara aynı anda yansır. Bu hem hız hem de yönetim kolaylığı sağlar.
Soru 4: CSS öğrenmek HTML’den daha mı zor? Cevap: CSS’in mantığı basittir ancak çok fazla özellik barındırdığı için pratik yapma süresi daha uzundur. Görsel sonuçları anında gördüğünüz için öğrenmesi oldukça keyiflidir.
Web Sitesi Kodlama Eğitimi – 2
Bölüm Özeti ve Gelecek Ders
Bu bölümde iskeletimizi medya öğeleriyle zenginleştirmeyi ve CSS ile ilk stil dokunuşlarımızı yapmayı öğrendik. Artık renkleri ve görselleri yönetebiliyorsunuz!
Eğitim 3’te bizi ne bekliyor? Sıradaki dersimizde web tasarımının en kritik konusu olan “Düzen ve Yerleşim (Layout)” konusuna gireceğiz. Elementlerin sayfada nasıl yan yana geleceğini, kutu modelini (Box Model) ve modern hizalama tekniği olan Flexbox‘ı keşfedeceğiz.
Uygulama Ödevi: İlk derste oluşturduğunuz index.html dosyasına bir görsel ekleyin ve CSS kullanarak ana başlığınızın (H1) rengini en sevdiğiniz renk ile değiştirin!
Görsel 1: HTML Medya Etiketleri ve SEO Yapısı
Bu şema, bir web sayfasına resim ve video eklerken kullanılan kodları ve tarayıcının bu kodları nasıl işlediğini gösterir. Özellikle SEO için kritik olan alt etiketinin önemini vurgular.
Web Sitesi Kodlama Eğitimi – 2