Web Sitesi Kodlama Eğitimi – 1:
Sıfırdan Web Geliştirmeye Giriş
Web sitesi kurmak, bir bina inşa etmeye benzer. Bu eğitim serisinin ilk bölümünde, binamızın temelini atacak ve iskeletini (HTML) oluşturmayı öğreneceğiz. SEO uyumlu bir kod yapısı, sitenizin Google’da üst sıralara çıkması için hayati önem taşır. Bu kodlama eğitimi rehberinde, karmaşık terimlerden uzak durarak adım adım ilerleyeceğiz.
1. Web Dünyasının Temelleri: İnternet Nasıl Çalışır?
Kodlama Eğitimi nde, kod yazmaya başlamadan önce, yazdığınız kodların nerede ve nasıl çalıştığını bilmelisiniz.
İstemci ve Sunucu (Client-Server): Siz bir web sitesine girdiğinizde (İstemci), bir bilgisayara “bana bu sayfayı göster” dersiniz. O bilgisayar (Sunucu) ise size HTML dosyalarını gönderir.
Domain ve Hosting: Domain sitenizin tapusu (adresi), Hosting ise sitenizin dosyalarının durduğu arsadır. SEO açısından hızlı bir hosting ve kısa, öz bir domain seçimi her zaman avantajdır.
2. Geliştirme Ortamının Hazırlanması: Profesyonel Araçlar
Kodlama Eğitimi: – 1 Kod yazarken sadece metin yazmayız; hatalarımızı gösteren ve bizi hızlandıran araçlar kullanırız.
VS Code Kurulumu: En popüler ücretsiz editör olan Visual Studio Code’u kurun.
Önemli Eklenti (Live Server): Kodda yaptığınız her değişikliği anında tarayıcıda görmek için “Live Server” eklentisini yüklemelisiniz. Bu, geliştirme sürecinde size inanılmaz bir hız kazandırır.
Dosya Yapısı: Proje klasörünüzde dosya isimlerinde Türkçe karakter (ş, ı, ü, ö, ç, ğ) ve boşluk kullanmamaya özen gösterin. (Örn: ilk-sayfam.html doğru, ilk sayfam.html yanlıştır).
3. HTML Nedir? İşaretleme Dilinin Mantığı
HTML (HyperText Markup Language), bir programlama dili değildir; tarayıcıya (Chrome, Safari) sayfanın hangi kısmının başlık, hangi kısmının paragraf olduğunu söyleyen bir etiketleme sistemidir.
Etiket (Tag) Yapısı: Genellikle <etiket> ile başlar ve </etiket> ile biter.
Örnek: <strong>Bu yazı kalın görünür</strong> etiketi tarayıcıya metni vurgulamasını söyler.
4. Standart Sayfa Yapısı: Kodun DNA’sı
Boş bir HTML sayfasına direkt yazı yazılmaz. Her sayfa şu standart iskeletle başlamalıdır:
HTML
<!DOCTYPE html> <html lang=”tr”> <head>
<meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Web Kodlama Eğitimi 1 – Giriş</title> </head>
<body>
</body>
</html>
5. Metin Etiketleri: SEO’nun Bel Kemiği
Google botları sayfanızı okurken metin etiketlerine göre konuyu anlar.
Başlıklar (H1 – H6):
<h1>: Sayfanın ana konusudur. Her sayfada yalnızca 1 adet kullanılmalıdır.
<h2> – <h3>: Alt başlıklar için kullanılır. Kitaplardaki bölüm ve alt bölüm mantığı gibidir.
Paragraflar (<p>): Tüm metin içerikleri bu etiketin içinde olmalıdır. Etiketsiz yazılan metinler SEO açısından zayıf kabul edilir.
6. Listeleme ve Linkler: Bağlantı Kurma
Kodlama Eğitiminte unutmamamız gerekenlerden biride, internet, birbirine bağlı sayfalardan oluşur. Bu bağlantıyı linkler sağlar.
Link Etiketi (<a>): href parametresi ile hedef adresi belirtiriz.
Örnek: <a href=”https://hddijitalajans.com” target=”_blank”>Ajansımızı Ziyaret Et</a>
target=”_blank” kodu, linkin yeni sekmede açılmasını sağlar.
Listeler:
<ul>: Sırasız (noktalı) listeler.
<ol>: Sıralı (1, 2, 3…) listeler.
<li>: Listenin her bir elemanını temsil eder.
Kodlama Eğitimi: – 1 Uygulama Ödevi: Kendinize bir index.html dosyası oluşturun, yukarıdaki iskeleti kopyalayın ve <body> içine bir adet <h1>, iki adet <h2> ve bunlara bağlı paragraflar ekleyerek ilk sayfanızı tarayıcıda görüntüleyin!
Web Sitesi Kodlama Hakkında Sıkça Sorulan Sorular
Soru 1: Hiç matematik bilmeden web kodlama öğrenebilir miyim?
Cevap: Kesinlikle evet. Web tasarımının temelini oluşturan HTML ve CSS, matematiksel formüllerden ziyade görsel bir yerleşim mantığına dayanır. Daha ileri seviye JavaScript aşamalarında temel mantık becerisi gerekse de, üst düzey matematik bilgisi bir zorunluluk değildir.
Soru 2: Web sitesi kodlamak için en iyi bilgisayar hangisidir?
Cevap: Web kodlama (özellikle başlangıç seviyesinde) yüksek sistem gereksinimleri istemez. İnternete bağlanan, bir tarayıcı çalıştıran ve VS Code gibi bir editörü açabilen herhangi bir bilgisayar yeterlidir. SEO ve performans çalışmaları için hızlı bir internet bağlantısı bilgisayar gücünden daha kritiktir.
Soru 3: HTML öğrenmek ne kadar sürer?
Cevap: HTML’in temel mantığını kavramak ve kendi sayfanızın iskeletini oluşturmak yaklaşık 1-2 gününüzü alır. Ancak tüm etiketlere ve SEO uyumlu kullanım pratiklerine tam anlamıyla hakim olmak birkaç haftalık uygulama gerektirir.
Soru 4: Yazdığım kodları başkaları nasıl görebilir?
Cevap: Bilgisayarınızda oluşturduğunuz .html dosyalarını sadece siz görebilirsiniz. Kodlarınızın dünya genelinde erişilebilir olması için bir Hosting hizmeti almalı ve dosyalarınızı bir sunucuya yüklemelisiniz. Eğitim serimizin 10. bölümünde bu konuyu detaylıca işleyeceğiz.
Soru 5: Sadece HTML ile profesyonel bir site kurulur mu?
Cevap: Sadece HTML ile kurulan bir site, 90’lı yılların başındaki siyah-beyaz ve düz metinlerden oluşan sitelere benzer. Modern, renkli ve etkileşimli bir site için HTML (iskelet), CSS (elbiseler) ve JavaScript (hareketler) üçlüsünü birlikte kullanmalısınız.
Uzmanından İpuçları ve Sık Yapılan Hatalar
Hata: Dosya isimlerinde GirisSayfasi.html gibi büyük harf veya boşluk kullanmak.
Çözüm: Her zaman küçük harf ve kelime aralarına tire koyun: giris-sayfasi.html.
İpucu: Kod yazarken mutlaka girintileme (indentation) yapın. Bu, kodun okunabilirliğini artırır ve hata yapma riskinizi azaltır. VS Code’da Alt + Shift + F tuş kombinasyonu kodlarınızı otomatik olarak düzenleyecektir.
Bölüm Özeti ve Gelecek Ders
Bu bölümde internetin altyapısını öğrendik, geliştirme ortamımızı kurduk ve ilk HTML etiketlerimizi yazdık. Artık bir web sayfasının nasıl doğduğunu biliyorsunuz.
Eğitim 2’de bizi ne bekliyor?
Bir sonraki dersimizde bu kuru iskeleti canlandıracağız. Sayfamıza nasıl resim ekleyeceğimizi, videoları nasıl gömeceğimizi ve en önemlisi CSS dünyasına giriş yaparak renklerin büyülü dünyasına nasıl adım atacağımızı keşfedeceğiz.