HTML Web Sitesi Projenizi Kurmak: Adım Adım Kapsamlı Rehber

Bir web sitesi projesine başlamak, heyecan verici ve yaratıcı bir süreçtir. Ancak, bu sürecin ilk adımı olan proje kurulumu, çoğu zaman göz ardı edilen veya hafife alınan kritik bir aşamadır. Doğru bir başlangıç yapmak, projenizin gelecekteki ölçeklenebilirliğini, yönetilebilirliğini ve genel başarısını doğrudan etkiler. Bu rehberde, sıfırdan bir HTML web sitesi projesini nasıl kuracağınızı, hangi araçlara ihtiyacınız olacağını ve en iyi uygulamaları takip ederek sağlam bir temel oluşturmanın yollarını ayrıntılı bir şekilde ele alacağız. İster ilk web sitenizi yapıyor olun ister mevcut bilginizi tazelemek isteyin, bu kapsamlı rehber size yol gösterecektir.

Temel Kavramlar ve Ön Hazırlık

Web sitesi projenize başlamadan önce, bazı temel kavramları anlamak ve gerekli araçları hazırlamak önemlidir. Bu ön hazırlık, geliştirme sürecinizin daha sorunsuz ve verimli olmasını sağlayacaktır.

Web Sitesi Nedir?

En basit tanımıyla, bir web sitesi, internet üzerinden erişilebilen ve bir dizi web sayfasından oluşan bir koleksiyondur. Bu sayfalar genellikle HTML (HyperText Markup Language) ile yapılandırılır, CSS (Cascading Style Sheets) ile görsel olarak biçimlendirilir ve JavaScript ile etkileşimli hale getirilir.

* HTML: Bir web sayfasının iskeletini oluşturur. Başlıklar, paragraflar, görseller, bağlantılar gibi tüm içerik elemanları HTML etiketleri kullanılarak tanımlanır.
* CSS: Web sayfasının stilini belirler. Renkler, yazı tipleri, düzen (layout), boşluklar gibi görsel özellikler CSS kuralları ile kontrol edilir.
* JavaScript: Web sayfasına dinamiklik ve etkileşim katar. Form doğrulama, animasyonlar, kullanıcı etkileşimine tepki veren öğeler gibi işlevler JavaScript ile gerçekleştirilir.

Bu üç teknoloji, “front-end” veya “istemci tarafı” olarak adlandırılan ve kullanıcıların doğrudan etkileşimde bulunduğu web sitesi bölümünü oluşturur. Sunucu tarafı (back-end) ise veritabanı işlemleri, kullanıcı kimlik doğrulama gibi daha karmaşık işlevleri yönetir, ancak basit bir HTML projesi için genellikle doğrudan bir back-end’e ihtiyaç duyulmaz.

Gerekli Araçlar

Verimli bir web geliştirme deneyimi için doğru araçlara sahip olmak çok önemlidir. İşte başlangıç için ihtiyacınız olacak temel araçlar:

* Metin Düzenleyici / Kod Editörü: Kod yazmak ve düzenlemek için özel olarak tasarlanmış bir yazılımdır. Sıradan bir not defterinden çok daha fazlasını sunar:
* VS Code (Visual Studio Code): Microsoft tarafından geliştirilen, ücretsiz, açık kaynaklı ve son derece popüler bir kod editörüdür. Geniş eklenti desteği, entegre terminali ve güçlü özellikleri sayesinde web geliştiricileri için vazgeçilmezdir. Bu rehberde VS Code kullanımını temel alacağız.
* Sublime Text: Hızlı, hafif ve güçlü bir başka popüler seçenektir.
* Atom: GitHub tarafından geliştirilen, özelleştirilebilir ve modern bir editördür.
Neden Önemli? Syntax vurgulama (kodun farklı bölümlerini renklendirme), otomatik tamamlama, kod formatlama gibi özellikler sayesinde hataları azaltır ve kod yazma hızınızı artırır.
* Web Tarayıcısı: Yazdığınız kodu görüntülemek ve test etmek için bir web tarayıcısına ihtiyacınız olacak.
* Google Chrome: Geliştirici araçları (Developer Tools) açısından en zengin ve en sık kullanılan tarayıcılardan biridir.
* Mozilla Firefox: Chrome’a benzer şekilde güçlü geliştirici araçlarına sahiptir ve iyi bir alternatiftir.
Neden Önemli? Tarayıcılar, yazdığınız HTML, CSS ve JavaScript kodunu yorumlayarak görsel bir web sayfası haline getirir. Geliştirici araçları, sayfanızdaki hataları ayıklamanıza, CSS kurallarını anlık olarak değiştirerek test etmenize ve performans sorunlarını tespit etmenize olanak tanır.
* Terminal / Komut İstemi (Opsiyonel ama Faydalı): Dosya ve dizin işlemleri, sürüm kontrol sistemleri (Git gibi) veya paket yöneticileri (npm gibi) ile etkileşim kurmak için kullanılır.
* Windows: Komut İstemi (CMD) veya PowerShell
* macOS / Linux: Terminal
Neden Önemli? Komut satırı arayüzünü kullanmak, belirli görevleri otomatikleştirmek ve geliştirme sürecinizi hızlandırmak için güçlü bir yoldur.
* Sürüm Kontrol Sistemi (Git): Projenizdeki değişiklikleri takip etmek, farklı sürümler arasında geçiş yapmak ve ekip üyeleriyle işbirliği yapmak için kullanılır.
* Git: Dağıtık bir sürüm kontrol sistemidir.
* GitHub / GitLab / Bitbucket: Git depolarını barındırmak için kullanılan platformlardır.
Neden Kullanmalıyız? Yanlışlıkla bir şeyi silseniz bile önceki bir sürüme geri dönebilirsiniz. Ekip çalışmasında herkesin aynı anda farklı özellikler üzerinde çalışmasına olanak tanır ve değişiklik çakışmalarını yönetmeye yardımcı olur.

Proje Yapısı Planlaması

İyi bir proje yapısı, projeniz büyüdükçe düzeni korumanın anahtarıdır. Başlangıçtan itibaren mantıklı bir dizin (klasör) yapısı oluşturmak, dosyalarınızı kolayca bulmanızı ve yönetmenizi sağlar.

* Ana Dizin (Root Folder): Tüm projenizin bulunduğu ana klasördür. Projenizin adını taşımalıdır (örn. benim-web-sitem).
* Alt Dizinler:
* css/: Tüm CSS dosyalarınızı içerir (örn. style.css, responsive.css).
* js/: Tüm JavaScript dosyalarınızı içerir (örn. script.js, main.js).
* img/: Tüm görsellerinizi içerir (örn. logo.png, banner.jpg).
* pages/ (İsteğe Bağlı): Eğer projeniz çok sayıda HTML sayfası içeriyorsa, bunları bu klasör altında toplayabilirsiniz (örn. pages/hakkimizda.html). Basit projeler için HTML dosyaları genellikle ana dizinde bulunur.
* assets/ (İsteğe Bağlı): Fontlar, ikonlar, küçük video dosyaları gibi diğer genel varlıkları barındırabilir.
* Dosya İsimlendirme Kuralları:
* Küçük harf kullanın: Tüm dosya ve klasör isimlerinde küçük harf kullanmak iyi bir uygulamadır.
* Boşluk yerine tire kullanın: benim-resmim.jpg yerine benim resmim.jpg kullanmaktan kaçının. Boşluklar URL’lerde sorunlara neden olabilir.
* Anlamlı isimler verin: resim1.jpg yerine ana-sayfa-banner.jpg gibi açıklayıcı isimler kullanın.

Proje Dizini Oluşturma

Şimdi, planladığımız proje yapısını somutlaştırma zamanı. İlk olarak ana proje dizinimizi ve ardından gerekli alt dizinleri oluşturacağız.

Ana Dizin (Root Folder) Oluşturma

Projenizin tüm dosyalarını barındıracak olan ana klasörü oluşturun. Bu klasör, projenizin adını taşımalıdır.

* Grafik Arayüz Kullanarak (Tüm İşletim Sistemleri):
1. Bilgisayarınızda web projelerinizi saklamak istediğiniz bir konuma gidin (örn. Belgelerim, Masaüstü veya özel bir “Web Projeleri” klasörü).
2. Sağ tıklayın, “Yeni” -> “Klasör” seçeneğini seçin.
3. Klasöre anlamlı bir isim verin, örneğin: ilk-web-sitem veya proje-adi.
* Terminal / Komut İstemi Kullanarak:
1. Terminali (macOS/Linux) veya Komut İstemi/PowerShell’i (Windows) açın.
2. cd komutu ile projenizi oluşturmak istediğiniz dizine gidin. Örneğin:

cd Documents/WebProjects

3. mkdir komutu ile ana dizini oluşturun:

mkdir ilk-web-sitem

4. Yeni oluşturduğunuz dizine girin:

cd ilk-web-sitem

Bu adımlardan sonra, ilk-web-sitem adında bir klasörünüz olacak ve tüm projeniz bu klasörün içinde yer alacak.

Temel Alt Dizinleri Oluşturma

Ana dizininizin içine, projenizin düzenini sağlamak için gerekli alt dizinleri oluşturun.

* Grafik Arayüz Kullanarak:
1. ilk-web-sitem klasörünü açın.
2. Klasör içinde sağ tıklayın, “Yeni” -> “Klasör” seçeneğini seçin ve sırasıyla şu klasörleri oluşturun:
* css
* js
* img
* Terminal / Komut İstemi Kullanarak (Ana dizin içindeyken):

mkdir css js img

Bu komut, ilk-web-sitem klasörünün içine css, js ve img adında üç yeni klasör oluşturacaktır.

Şu anda proje yapınız aşağıdaki gibi görünmelidir:

ilk-web-sitem/
├── css/
├── js/
└── img/

Bu yapı, projenizin büyüklüğüne ve karmaşıklığına göre genişletilebilir. Örneğin, çok sayıda HTML sayfanız varsa pages/ klasörü ekleyebilirsiniz.

Temel HTML Dosyalarını Oluşturma

Proje dizinimizi oluşturduktan sonra, web sitemizin temelini oluşturan HTML dosyalarını oluşturmaya başlayabiliriz. Her web sitesinin bir giriş noktası vardır ve bu genellikle index.html dosyasıdır.

index.html Dosyası

index.html, bir web sitesine tarayıcı üzerinden erişildiğinde otomatik olarak yüklenen ana sayfadır. Bu dosya, projenizin ana dizininde (yani ilk-web-sitem/ klasörünün doğrudan içinde) bulunmalıdır.

* Dosyayı Oluşturma:
1. VS Code’u açın.
2. “Dosya” -> “Klasörü Aç…” seçeneğini kullanarak ilk-web-sitem klasörünüzü açın.
3. VS Code’un sol kenar çubuğundaki gezgin (Explorer) bölümünde ilk-web-sitem klasörüne sağ tıklayın ve “Yeni Dosya” seçeneğini seçin.
4. Dosyaya index.html adını verin ve Enter tuşuna basın.
* Temel HTML İskeleti:
index.html dosyanıza aşağıdaki temel HTML iskeletini yazın. VS Code’da, boş bir HTML dosyasında ! yazıp Tab tuşuna basarak bu iskeleti otomatik olarak oluşturabilirsiniz (Emmet kısayolu).

    
    
        
        
        
        
        
    
    
        
        
        
Bu benim ilk HTML web sitem.

        
        
    
    

* : Bu, belgenin HTML5 standardını kullandığını tarayıcıya bildirir. Her HTML belgesinin en üstünde yer almalıdır.
* : Tüm HTML içeriğini saran kök elementtir. lang="tr" niteliği, sayfanın içeriğinin Türkçe olduğunu belirtir, bu da arama motorları ve ekran okuyucular için faydalıdır.
* : Sayfanın meta bilgilerini içerir. Bu bilgiler tarayıcıda doğrudan görünmez ancak sayfanın nasıl işleneceği hakkında önemli bilgiler sağlar.
* : Karakter kodlamasını belirtir. Türkçe karakterler de dahil olmak üzere çoğu karakterin doğru görüntülenmesi için UTF-8 kullanmak en iyisidir.
* : Duyarlı (responsive) tasarım için önemlidir. Sayfanın cihazın genişliğine göre ölçeklenmesini sağlar.
* : Tarayıcı sekmesinde veya pencere başlığında görünen sayfa başlığıdır. Arama motoru optimizasyonu (SEO) için de önemlidir.
* : Bu etiket, CSS dosyamızı HTML belgemize bağlar. href niteliği, CSS dosyasının yolunu belirtir.
* : Web sayfasında kullanıcıların gördüğü tüm içeriği (metin, görseller, bağlantılar, videolar vb.) içerir.
* : Bu etiket, JavaScript dosyamızı HTML belgemize bağlar. Genellikle kapanış etiketinden hemen önce yerleştirilir, böylece HTML içeriği yüklenmeden JavaScript çalışmaya başlamaz ve DOM (Document Object Model) üzerinde işlem yapabilir.

Diğer HTML Sayfaları

Web siteniz genellikle birden fazla sayfadan oluşur (örn. “Hakkımızda”, “İletişim”, “Hizmetlerimiz”). Bu sayfaları da benzer şekilde oluşturabilirsiniz.

* Örnek: about.html ve contact.html dosyalarını ana dizinde oluşturun.
* about.html içeriği:

        
        
            
            
            
            
        
        
            
            
Bu sayfa, web sitemiz hakkında bilgiler içerir.
            Ana Sayfaya Dön
            
        
        

* contact.html içeriği:

        
        
            
            
            
            
        
        
            
            
Bize ulaşmak için lütfen aşağıdaki formu kullanın veya e-posta gönderin.
            Ana Sayfaya Dön
            
        
        

* Bağlantı Kurma ( etiketi): Sayfalar arasında gezinmeyi sağlamak için (anchor) etiketini kullanırız. href niteliği, hedeflenen sayfanın yolunu belirtir.
* index.html dosyanıza aşağıdaki navigasyon bağlantılarını ekleyebilirsiniz (örneğin

etiketinden sonra):

Şu anda proje yapınız aşağıdaki gibi görünmelidir:

ilk-web-sitem/
├── css/
├── js/
├── img/
├── index.html
├── about.html
└── contact.html

CSS ve JavaScript Dosyalarını Entegre Etme

HTML iskeletimizi oluşturduktan sonra, web sitemizin görsel tasarımını ve etkileşimini sağlayacak CSS ve JavaScript dosyalarını oluşturup HTML belgemize bağlayacağız.

CSS Dosyaları

CSS (Cascading Style Sheets), web sayfanızın görünümünü ve düzenini belirler. Tüm stil kurallarınızı tek bir harici dosyada tutmak, kodunuzu daha düzenli hale getirir ve yönetimi kolaylaştırır.

* style.css Oluşturma:
1. VS Code’da css/ klasörüne sağ tıklayın ve “Yeni Dosya” seçeneğini seçin.
2. Dosyaya style.css adını verin.
* Temel CSS Kuralları Ekleme:
style.css dosyanıza basit stil kuralları ekleyerek HTML sayfanızın görünümünü değiştirebilirsiniz.

/ style.css /
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 20px;
        background-color: #f4f4f4;
        color: #333;
    }

    h1 {
        color: #0056b3;
    }

    p {
        margin-bottom: 10px;
    }

    nav ul {
        list-style: none;
        padding: 0;
        background: #333;
        overflow: hidden;
    }

    nav li {
        float: left;
    }

    nav a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    nav a:hover {
        background-color: #ddd;
        color: black;
    }

* HTML’e Bağlama (Tekrar Hatırlatma):
Daha önce index.html, about.html ve contact.html dosyalarımızın bölümüne aşağıdaki satırı eklemiştik:

Bu satır, tarayıcıya css/style.css dosyasını bulmasını ve sayfanın stilini uygulamak için kullanmasını söyler. href="css/style.css" yolu, HTML dosyasının bulunduğu dizinden css klasörünün içindeki style.css dosyasına giden göreceli yolu belirtir.

JavaScript Dosyaları

JavaScript, web sitenize etkileşim ve dinamik işlevsellik katmanızı sağlar.

* script.js Oluşturma:
1. VS Code’da js/ klasörüne sağ tıklayın ve “Yeni Dosya” seçeneğini seçin.
2. Dosyaya script.js adını verin.
* Temel JavaScript Kodu Ekleme:
script.js dosyanıza basit bir JavaScript kodu ekleyerek tarayıcınızın konsolunda bir mesaj görüntüleyebilirsiniz.

// script.js
    console.log("Web sitemiz yüklendi!");

    // Örnek: Bir butona tıklama olayını dinleme
    // document.addEventListener('DOMContentLoaded', function() {
    //     const myButton = document.createElement('button');
    //     myButton.textContent = 'Bana Tıkla!';
    //     document.body.appendChild(myButton);

    //     myButton.addEventListener('click', function() {
    //         alert('Butona tıkladınız!');
    //     });
    // });

console.log() mesajı, tarayıcınızın geliştirici araçlarındaki “Konsol” sekmesinde görünecektir. Bu, JavaScript kodunuzun çalışıp çalışmadığını kontrol etmek için harika bir yoldur.
* HTML’e Bağlama (Tekrar Hatırlatma):
index.html, about.html ve contact.html dosyalarımızın kapanış etiketinden hemen önce aşağıdaki satırı eklemiştik:

Bu satır, tarayıcıya js/script.js dosyasını yüklemesini ve içindeki kodu çalıştırmasını söyler. JavaScript dosyalarının etiketinden önce yerleştirilmesi, HTML içeriğinin önce yüklenmesini ve işlenmesini sağlar, böylece JavaScript DOM elemanlarına güvenli bir şekilde erişebilir ve manipüle edebilir.

Varlık Yönetimi: Görseller ve Diğer Medyalar

Web siteleri genellikle görseller, videolar, ses dosyaları gibi medya varlıklarını içerir. Bu varlıkları düzenli bir şekilde yönetmek, projenizin karmaşıklığını azaltır ve bakımı kolaylaştırır.

Görsel Dosyaları

Görseller, bir web sitesinin görsel çekiciliğini artıran önemli öğelerdir.

* img/ Dizinine Yerleştirme:
1. Kullanmak istediğiniz görselleri (örn. logo.png, banner.jpg, profile.webp) img/ klasörüne kopyalayın.
2. Dosya isimlerinin küçük harf ve tirelerle olduğundan emin olun.
* HTML’de Kullanma ( etiketi):
Görselleri HTML sayfanıza eklemek için etiketini kullanırsınız.

* src (source): Görsel dosyasının yolunu belirtir. Bu, HTML dosyanızdan img/ klasöründeki görselin göreceli yoludur.
* alt (alternative text): Görselin yüklenememesi durumunda veya ekran okuyucular tarafından kullanılan açıklayıcı bir metindir. SEO ve erişilebilirlik için kritik öneme sahiptir.
* width ve height (isteğe bağlı): Görselin genişliğini ve yüksekliğini piksel cinsinden belirtir. Bu nitelikler, tarayıcının görsel için yer ayırmasına yardımcı olur ve sayfa düzeni kaymalarını azaltabilir. Ancak genellikle görsellerin boyutlandırılması ve duyarlı hale getirilmesi CSS ile yapılır.
* Dosya Boyutları ve Optimizasyonun Önemi:
* Büyük boyutlu görseller, web sitenizin yavaş yüklenmesine neden olabilir.
* Görselleri web için optimize etmek (sıkıştırmak, uygun formatı seçmek – JPEG, PNG, WebP) önemlidir. Çevrimiçi araçlar veya grafik düzenleme yazılımları bu konuda yardımcı olabilir.
* WebP gibi modern formatlar, daha küçük dosya boyutlarıyla daha iyi kalite sunar.

Video/Ses Dosyaları (Eğer Kullanılacaksa)

Eğer projenizde video veya ses dosyaları kullanacaksanız, bunları da benzer şekilde ayrı bir klasörde (örn. video/ veya audio/ ya da genel assets/ klasörü altında) saklamak iyi bir uygulamadır.

* HTML’de Kullanım:

controls niteliği, oynatma/duraklatma gibi standart medya kontrollerini sağlar.

Geliştirme Süreci ve İpuçları

Projenizin temelini attıktan sonra, geliştirme sürecini daha verimli hale getirecek bazı araçlar ve ipuçları bulunmaktadır. Bu araçlar, kod yazma, hata ayıklama ve değişiklikleri yönetme konusunda size yardımcı olacaktır.

Canlı Sunucu (Live Server) Kullanımı

Geleneksel olarak, HTML dosyasında yaptığınız her değişiklikten sonra tarayıcıya gidip sayfayı yenilemeniz gerekir. Bu, zaman alıcı ve sıkıcı olabilir. Canlı sunucu, bu süreci otomatikleştirir.

* VS Code Live Server Eklentisi:
1. VS Code’u açın.
2. Sol kenar çubuğundaki “Uzantılar” (Extensions) simgesine tıklayın (veya Ctrl+Shift+X / Cmd+Shift+X).
3. Arama kutusuna “Live Server” yazın.
4. “Ritwick Dey” tarafından geliştirilen “Live Server” eklentisini bulun ve yükleyin.
* Nasıl Kullanılır:
1. VS Code’da index.html dosyanızı açın.
2. Sağ tıklayın ve “Open with Live Server” seçeneğini seçin. Alternatif olarak, VS Code’un sağ alt köşesindeki “Go Live” düğmesine tıklayabilirsiniz.
3. Tarayıcınızda otomatik olarak projeniz açılacaktır.
Neden Önemli? Live Server, kodunuzda yaptığınız değişiklikleri kaydettiğiniz anda tarayıcıda otomatik olarak yeniler. Bu, geliştirme sürecinizi hızlandırır ve anlık geri bildirim almanızı sağlar.

Tarayıcı Geliştirici Araçları

Modern web tarayıcıları (Chrome, Firefox, Edge vb.) güçlü geliştirici araçlarıyla birlikte gelir. Bu araçlar, web sitenizi incelemek, hata ayıklamak ve performansını analiz etmek için vazgeçilmezdir.

* Nasıl Açılır:
* Sayfadayken sağ tıklayın ve “İncele” (Inspect) seçeneğini seçin.
* F12 tuşuna basın (Windows/Linux) veya Cmd+Option+I (macOS).
* Temel Sekmeler ve Kullanımları:
* Elements (Öğeler): Sayfanın HTML yapısını ve uygulanan CSS stillerini görüntülemenizi ve anlık olarak düzenlemenizi sağlar. HTML elementlerinin üzerine gelerek veya seçerek ilgili CSS kurallarını görebilir ve değişiklikleri canlı olarak test edebilirsiniz.
* Console (Konsol): JavaScript hatalarını ve console.log() ile yazdırdığınız mesajları görüntüler. JavaScript kodunuzda hata ayıklamak için kritik bir araçtır.
* Sources (Kaynaklar): JavaScript kodunuzda kesme noktaları (breakpoints) ayarlayarak adım adım hata ayıklama yapmanızı sağlar.
* Network (Ağ): Sayfanın yüklenmesi sırasında yapılan tüm ağ isteklerini (HTML, CSS, JS dosyaları, görseller vb.) ve bunların yüklenme sürelerini gösterir. Performans sorunlarını tespit etmek için kullanışlıdır.
* Application (Uygulama): Yerel depolama (localStorage), oturum depolama (sessionStorage), çerezler (cookies) gibi istemci tarafı verilerini incelemenizi sağlar.
Neden Önemli? Geliştirici araçları, web sitenizin “kaputunun altına” bakmanızı sağlar. Hataları bulmak, stilleri ayarlamak ve sayfanızın nasıl çalıştığını anlamak için olmazsa olmazdır.

Sürüm Kontrolü (Git ve GitHub)

Git, projenizdeki değişiklikleri takip etmenizi sağlayan bir sürüm kontrol sistemidir. GitHub (veya GitLab, Bitbucket gibi platformlar), Git depolarınızı çevrimiçi olarak barındırmanıza ve diğer geliştiricilerle işbirliği yapmanıza olanak tanır.

* Neden Kullanmalıyız?
* Değişiklik Geçmişi: Kodunuzdaki her değişikliği kaydeder. İstediğiniz zaman önceki bir sürüme geri dönebilirsiniz.
* Yedekleme: Kodunuzu çevrimiçi bir depoda saklayarak veri kaybını önler.
* İşbirliği: Birden fazla geliştiricinin aynı proje üzerinde eş zamanlı olarak çalışmasını kolaylaştırır.
* Deneysel Özellikler: Yeni özellikler üzerinde “dallanma” (branching) yaparak ana kod tabanını etkilemeden güvenle çalışabilirsiniz.
* Temel Git Komutları (Kısa Giriş):
1. Git Kurulumu: Henüz yüklü değilse, Git’i resmi web sitesinden indirip kurun.
2. Depo Başlatma: Proje ana dizininizde (örn. ilk-web-sitem) terminali açın ve Git deposunu başlatın:

git init

3. Değişiklikleri Sahneleme: Yaptığınız değişiklikleri Git’in takip etmesi için sahneleme alanına ekleyin:

git add .
        # veya belirli bir dosya için: git add index.html

. (nokta) tüm değişiklikleri sahneleme alanına ekler.
4. Değişiklikleri Kaydetme (Commit): Sahneleme alanındaki değişiklikleri bir “commit” olarak kaydedin ve açıklayıcı bir mesaj ekleyin:

git commit -m "İlk kurulum: HTML, CSS ve JS dosyaları eklendi"

5. Uzak Depoya Yükleme (Push – GitHub için):
* GitHub’da yeni bir boş depo oluşturun.
* Yerel deponuzu uzak depoya bağlayın:

git remote add origin https://github.com/kullanici-adiniz/depo-adiniz.git

* Değişiklikleri uzak depoya gönderin:

git push -u origin master
            # veya main, GitHub'ın yeni varsayılan dal adı

Bu adımlar, projenizi sürüm kontrolü altına almanın temelini oluşturur.

Kod Düzenleme ve Temizlik

Okunabilir ve bakımı kolay kod yazmak, hem sizin hem de gelecekte projede çalışacak diğer kişiler için önemlidir.

* Girintileme: Kodunuzu tutarlı bir şekilde girintileyin (genellikle 2 veya 4 boşluk). VS Code gibi editörler otomatik girintileme özelliğine sahiptir.
* Yorum Satırları: Karmaşık veya kritik kod bölümlerini açıklayan yorumlar ekleyin.

/ Genel sayfa stilleri /
    body { ... }

// Butona tıklama olayını dinle
    myButton.addEventListener('click', function() { ... });

* Anlamlı İsimler: Değişkenlere, fonksiyonlara, CSS sınıflarına ve ID’lere açıklayıcı ve anlamlı isimler verin. div1 veya resim yerine main-header, user-profile-image gibi isimler kullanın.
* Kod Formatlayıcılar: VS Code için Prettier gibi eklentiler, kodunuzu otomatik olarak belirli bir stile göre formatlayarak tutarlılığı sağlar.

Projeyi Yayınlama (Deploy Etme)

Web sitenizi yerel makinenizde geliştirirken harika görünse de, onu başkalarıyla paylaşmak için internette yayınlamanız gerekir. Bu işleme “deploy etme” veya “yayınlama” denir. HTML, CSS ve JavaScript’ten oluşan statik bir web sitesini yayınlamak oldukça kolaydır.

Statik Web Sitesi Barındırma

Statik web siteleri, sunucu tarafında herhangi bir işlem gerektirmeyen (veritabanı, sunucu tarafı kodlama vb.) sitelerdir. HTML, CSS ve JavaScript dosyalarını doğrudan bir sunucuya yükleyerek yayınlanabilirler.

* GitHub Pages:
* Eğer projenizi Git ve GitHub ile yönetiyorsanız, GitHub Pages, statik web sitelerinizi ücretsiz olarak barındırmak için mükemmel bir seçenektir.
* Yapmanız gereken tek şey, projenizin ana dalını (genellikle main veya master) GitHub’a yüklemek ve deponuzun ayarlarından GitHub Pages’ı etkinleştirmektir.
* kullanici-adiniz.github.io/depo-adiniz/ şeklinde bir URL üzerinden sitenize erişebilirsiniz.
* Netlify / Vercel:
* Bu platformlar, modern geliştiriciler için tasarlanmış güçlü ve kullanımı kolay barındırma hizmetleridir.
* GitHub/GitLab/Bitbucket depolarınızla entegre olurlar. Kodunuzu push ettiğinizde, sitenizi otomatik olarak oluşturur ve yayınlarlar (CI/CD).
* Ücretsiz katmanları genellikle küçük ve orta ölçekli statik web siteleri için yeterlidir.
* Özel alan adı bağlama, otomatik SSL sertifikaları gibi birçok ek özellik sunarlar.
* Firebase Hosting:
* Google’ın Firebase platformunun bir parçasıdır. Hızlı, güvenli ve ölçeklenebilir statik web sitesi barındırma hizmeti sunar.
* CLI (Komut Satırı Arayüzü) üzerinden kolayca deploy edilebilir.
* FTP ile Yükleme (Geleneksel Yöntem):
* Bir barındırma sağlayıcısından (Hostinger, GoDaddy, Namecheap vb.) web alanı satın alırsınız.
* FTP (File Transfer Protocol) istemcisi (örn. FileZilla) kullanarak yerel bilgisayarınızdaki proje dosyalarını sunucudaki public_html veya www klasörüne yüklersiniz.
* Bu yöntem hala geçerli olsa da, modern CI/CD (Continuous Integration/Continuous Deployment) yöntemleri (GitHub Pages, Netlify vb.) genellikle daha hızlı ve otomatiktir.

Alan Adı ve SSL

* Alan Adı (Domain Name): Web sitenizin internetteki adresidir (örn. benimsitem.com). Profesyonel bir görünüm için kendi alan adınızı satın almanız önerilir. Alan adları, alan adı kayıt şirketlerinden (GoDaddy, Namecheap, Türk Telekom vb.) satın alınabilir.
* SSL Sertifikası (HTTPS): Web siteniz ile kullanıcılarınız arasındaki iletişimi şifreleyen bir güvenlik protokolüdür. https:// ile başlayan URL’ler güvenlidir. SSL sertifikaları, kullanıcıların sitenize olan güvenini artırır ve arama motoru sıralamaları için de önemli bir faktördür. Çoğu modern barındırma hizmeti (GitHub Pages, Netlify, Vercel) ücretsiz SSL sertifikalarını otomatik olarak sağlar (Let’s Encrypt aracılığıyla).

Sonuç ve İleri Adımlar

Tebrikler! Bu kapsamlı rehberi tamamlayarak, bir HTML web sitesi projesini sıfırdan kurmak için gerekli tüm temel adımları öğrenmiş oldunuz. Artık sağlam bir proje yapısına, temel HTML, CSS ve JavaScript dosyalarına sahipsiniz ve geliştirme sürecinizi optimize edecek araçları tanıyorsunuz.

Özetle, öğrendikleriniz:

* Bir web sitesinin temel bileşenleri (HTML, CSS, JavaScript).
* Gerekli geliştirme araçları (kod editörü, tarayıcı, Git).
* Mantıklı bir proje dizini yapısı oluşturma.
* index.html ve diğer HTML sayfalarını oluşturma.
* CSS ve JavaScript dosyalarını entegre etme.
* Görsel ve diğer medya varlıklarını yönetme.
* Canlı sunucu ve tarayıcı geliştirici araçları ile verimli geliştirme.
* Git ile sürüm kontrolü yapma.
* Statik web sitenizi yayınlama seçenekleri.

Bu adımlar, web geliştirme yolculuğunuzun sadece başlangıcıdır. Temel bir HTML projesi kurmak, web dünyasına atılan ilk ve en önemli adımdır.

Bir Sonraki Adımlar:

Bilginizi ve becerilerinizi daha da geliştirmek için aşağıdaki konulara yönelebilirsiniz:

* Duyarlı Tasarım (Responsive Design): Web sitenizin farklı ekran boyutlarında (masaüstü, tablet, mobil) iyi görünmesini sağlamak için CSS Media Queries ve esnek düzenler kullanmayı öğrenin.
* CSS Frameworkleri: Tailwind CSS, Bootstrap gibi framework’ler, önceden tanımlanmış bileşenler ve stil sınıfları sunarak hızlı ve tutarlı tasarımlar yapmanızı sağlar.
* JavaScript Kütüphaneleri/Frameworkleri: jQuery, React, Vue.js, Angular gibi kütüphaneler ve framework’ler, daha karmaşık ve etkileşimli web uygulamaları geliştirmek için kullanılır.
* Erişilebilirlik (Accessibility): Web sitenizi engelli kullanıcılar dahil herkesin kullanabileceği şekilde tasarlamayı öğrenin (ARIA nitelikleri, semantik HTML).
* Arama Motoru Optimizasyonu (SEO): Web sitenizin arama motorlarında daha üst sıralarda yer alması için meta etiketleri, anlamlı içerik ve site haritası gibi teknikleri öğrenin.
* Web Performansı: Sayfa yükleme sürelerini optimize etmek için görsel sıkıştırma, kod küçültme (minification) ve önbellekleme (caching) gibi teknikleri araştırın.
* Backend Geliştirme: Eğer web sitenize veritabanı, kullanıcı kimlik doğrulama veya sunucu tarafı işlevsellik eklemek isterseniz Node.js, Python (Django/Flask), PHP gibi backend teknolojilerini öğrenmeye başlayabilirsiniz.

Web geliştirme alanı sürekli gelişen dinamik bir alandır. Sürekli öğrenmeye ve pratik yapmaya devam ederek becerilerinizi geliştirebilir, daha karmaşık ve etkileyici projeler oluşturabilirsiniz. Başarılar dileriz!