Web geliştirme, modern dünyanın vazgeçilmez bir parçası haline gelmiştir. İster bir blog yazarı, ister bir e-ticaret şirketi sahibi, isterse de bir yazılım mühendisi olun, web teknolojileriyle ilgili temel bilgilere sahip olmak önemlidir. Bu kapsamlı rehberde, web geliştirmenin temel yapı taşları olan HTML, CSS, JavaScript, DOM ve React'i derinlemesine inceleyeceğiz.

1. HTML: Web'in Temel Yapısı

1.1. HTML'ye Giriş

HTML (HyperText Markup Language), web sayfalarının temel yapısını tanımlayan işaretleme dilidir. Tarayıcılar, HTML kodunu yorumlayarak web sayfalarını görsel olarak oluşturur. HTML, bir dizi etiket (tag) kullanarak içeriği yapılandırır ve anlamlandırır.

1.2. Temel HTML Etiketleri

HTML'de kullanılan en temel etiketlerden bazıları şunlardır:

<html>: HTML belgesinin kök elemanıdır.
<head>: Belgeyle ilgili meta bilgileri (başlık, stil tanımları, karakter seti vb.) içerir.
<title>: Tarayıcı sekmesinde veya pencere başlığında görünen belge başlığını tanımlar.
<body>: Web sayfasının içeriğini (metin, resim, bağlantılar vb.) içerir.
<h1> - <h6>: Başlık etiketleridir. <h1> en önemli başlığı, <h6> ise en az önemli başlığı temsil eder.
<p>: Paragraf etiketidir.
<a>: Köprü (link) etiketidir.
<img>: Resim etiketidir.
<ul> ve <ol>: Sırasız ve sıralı liste etiketleridir.
<li>: Liste öğesi etiketidir.
<div>: Bölüm etiketidir.
<span>: Satır içi (inline) bölüm etiketidir.

1.3. HTML Örneği


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Basit Bir HTML Sayfası</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu, basit bir HTML sayfasıdır.</p>
    <a href="https://www.example.com">Example.com'a Git</a>
</body>
</html>

1.4. HTML5'in Getirdiği Yenilikler

HTML5, HTML'nin en son sürümüdür ve web geliştirme alanında önemli yenilikler getirmiştir. Yeni semantik etiketler (<article>, <aside>, <nav>, <header>, <footer> vb.), video ve ses desteği (<video> ve <audio> etiketleri), tuval (<canvas>) ve yerel depolama (local storage) gibi özellikler, HTML5 ile birlikte gelmiştir.

2. CSS: Web Sayfalarına Stil Verme

2.1. CSS'ye Giriş

CSS (Cascading Style Sheets), HTML elemanlarının nasıl görüntüleneceğini tanımlayan bir stil dilidir. CSS, renkler, yazı tipleri, düzenler ve diğer görsel özellikleri kontrol etmek için kullanılır. CSS, HTML'den ayrılarak, stil tanımlarının merkezi bir yerde tutulmasını ve web sayfalarının daha kolay yönetilmesini sağlar.

2.2. CSS Seçicileri

CSS seçicileri, stil uygulanacak HTML elemanlarını belirlemek için kullanılır. En yaygın CSS seçicileri şunlardır:

Eleman Seçiciler: HTML elemanının adını kullanarak (örneğin, p, h1, a).
Sınıf Seçiciler: . ile başlayan ve belirli bir sınıfa sahip elemanları seçen seçiciler (örneğin, .baslik).
ID Seçiciler: # ile başlayan ve belirli bir ID'ye sahip elemanı seçen seçiciler (örneğin, #ana-baslik).
Öznitelik Seçiciler: Belirli bir özniteliğe veya öznitelik değerine sahip elemanları seçen seçiciler (örneğin, a[href], input[type="text"]).

2.3. CSS Sözdizimi

CSS kuralları, seçici ve bildirim bloğu olmak üzere iki bölümden oluşur. Bildirim bloğu, özellik-değer çiftlerinden oluşur.


seçici {
    özellik: değer;
    diğer-özellik: diğer-değer;
}

2.4. CSS Örneği


h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

.uyari {
    color: red;
    font-weight: bold;
}

2.5. CSS'i HTML'e Uygulama Yöntemleri

CSS'i HTML'e uygulamak için üç temel yöntem vardır:

Satır İçi (Inline) Stil: HTML elemanının style özniteliği kullanılarak stil tanımlanır.
Dahili (Internal) Stil: HTML belgesinin <head> bölümünde <style> etiketi içinde stil tanımlanır.
Harici (External) Stil: CSS kuralları ayrı bir .css dosyasında tanımlanır ve HTML belgesine <link> etiketi ile bağlanır.

En iyi uygulama, CSS kurallarını harici bir dosyada tutmaktır. Bu, kodun daha düzenli ve yönetilebilir olmasını sağlar.

3. JavaScript: Web Sayfalarına Etkileşim Katma

3.1. JavaScript'e Giriş

JavaScript, web sayfalarına etkileşim ve dinamizm katan bir programlama dilidir. Kullanıcı etkileşimlerine yanıt verme, veri doğrulama, animasyonlar oluşturma ve sunucuyla iletişim kurma gibi birçok işlem JavaScript ile yapılabilir.

3.2. Temel JavaScript Kavramları

Değişkenler: Verileri saklamak için kullanılan alanlardır (var, let, const).
Veri Tipleri: Sayılar, metinler (string), boolean (true/false), null, undefined.
Operatörler: Aritmetik operatörler (+, -, *, /), karşılaştırma operatörleri (==, !=, >, <), mantıksal operatörler (&&, ||, !).
Kontrol Yapıları: if, else, for, while döngüleri.
Fonksiyonlar: Tekrar kullanılabilir kod blokları.
Olaylar (Events): Kullanıcı etkileşimleri (tıklama, fare hareketi, tuşa basma vb.).

3.3. JavaScript Örneği


<button onclick="showAlert()">Uyarı Göster</button>

<script>
function showAlert() {
    alert("Merhaba Dünya!");
}
</script>

3.4. DOM Manipülasyonu

JavaScript, DOM (Document Object Model) aracılığıyla HTML elemanlarına erişebilir ve onları değiştirebilir. Bu, web sayfalarının dinamik olarak güncellenmesini sağlar.


<p id="demo">İlk Metin</p>

<script>
document.getElementById("demo").innerHTML = "Yeni Metin";
</script>

3.5. JavaScript Kütüphaneleri ve Çatıları

JavaScript ekosistemi, web geliştirmeyi kolaylaştıran birçok kütüphane ve çatı (framework) içerir. jQuery, React, Angular ve Vue.js en popülerlerinden bazılarıdır.

4. DOM: Web Sayfalarının Yapısı

4.1. DOM'a Giriş

DOM (Document Object Model), web sayfasının içeriğini ve yapısını temsil eden bir programlama arayüzüdür. HTML belgesini bir ağaç yapısı olarak ele alır ve JavaScript gibi dillerin bu yapıya erişmesini ve onu değiştirmesini sağlar.

4.2. DOM Ağacı

DOM ağacında, her HTML etiketi bir düğüm (node) olarak temsil edilir. Kök düğüm (root node) <html> etiketidir. Diğer düğümler, eleman düğümleri (element nodes), metin düğümleri (text nodes) ve öznitelik düğümleri (attribute nodes) olabilir.

Görsel Açıklama: HTML belgesi bir ağaç yapısı şeklinde düşünülür. En tepede <html> etiketi, onun altında <head> ve <body> etiketleri yer alır. Her bir etiket, kendi içindeki diğer etiketleri ve metinleri içeren bir düğümü temsil eder.

4.3. DOM'a Erişim ve Manipülasyon

JavaScript, DOM'a erişmek ve onu değiştirmek için çeşitli yöntemler sunar:

document.getElementById(id): Belirli bir ID'ye sahip elemanı seçer.
document.getElementsByClassName(className): Belirli bir sınıfa sahip tüm elemanları seçer.
document.getElementsByTagName(tagName): Belirli bir etikete sahip tüm elemanları seçer.
document.querySelector(selector): CSS seçicisine uyan ilk elemanı seçer.
document.querySelectorAll(selector): CSS seçicisine uyan tüm elemanları seçer.

DOM'u değiştirmek için kullanılan yöntemlerden bazıları:

element.innerHTML: Elemanın içeriğini değiştirir.
element.setAttribute(attribute, value): Elemanın bir özniteliğini ayarlar.
element.removeAttribute(attribute): Elemanın bir özniteliğini siler.
element.appendChild(node): Elemana bir çocuk düğümü ekler.
element.removeChild(node): Elemandan bir çocuk düğümü siler.

4.4. DOM Olayları (Events)

DOM olayları, web sayfasında meydana gelen olaylara (kullanıcı etkileşimleri, sayfa yüklemesi vb.) yanıt vermek için kullanılır. JavaScript, olay dinleyicileri (event listeners) aracılığıyla olayları yakalar ve belirli bir kod bloğunu çalıştırır.

Örneğin, bir düğmeye tıklama olayını yakalamak için:


<button id="myButton">Tıkla!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
    alert("Düğmeye Tıklandı!");
});
</script>

5. React: Modern Web Uygulamaları Geliştirme

5.1. React'e Giriş

React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri (UI) oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Bileşen tabanlı mimarisi, sanal DOM (Virtual DOM) ve deklaratif yaklaşımı sayesinde, React ile yüksek performanslı ve ölçeklenebilir web uygulamaları geliştirmek mümkündür.

5.2. React Bileşenleri

React uygulamaları, küçük, bağımsız ve tekrar kullanılabilir parçalar olan bileşenlerden oluşur. Her bileşen, kendi verisini (state) ve arayüzünü (UI) yönetir. Bileşenler, diğer bileşenlerle birleştirilerek daha karmaşık arayüzler oluşturulabilir.

Adım Adım Talimat: Bir React bileşeni oluşturmak için, öncelikle bir JavaScript fonksiyonu veya sınıfı tanımlanır. Bu fonksiyon veya sınıf, bileşenin arayüzünü tanımlayan JSX kodunu döndürür. JSX, HTML benzeri bir sözdizimidir ve React bileşenlerinin daha kolay yazılmasını sağlar.

5.3. JSX

JSX (JavaScript XML), JavaScript içinde HTML benzeri sözdizimi kullanmaya olanak tanıyan bir uzantıdır. React bileşenlerinin arayüzünü tanımlamak için kullanılır. JSX kodu, derleme aşamasında JavaScript koduna dönüştürülür.


const element = <h1>Merhaba, React!</h1>;

5.4. React State ve Props

State (Durum): Bir bileşenin içindeki veriyi temsil eder. State, bileşenin davranışı ve arayüzü üzerinde doğrudan etkiye sahiptir. State değiştiğinde, bileşen otomatik olarak yeniden render edilir.

Props (Özellikler): Bir bileşene dışarıdan geçirilen veriyi temsil eder. Props, bileşenin davranışını ve arayüzünü özelleştirmek için kullanılır. Props, bileşen tarafından değiştirilemez (readonly).

5.5. React Örneği


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>Arttır</button>
    </div>
  );
}

export default Counter;

5.6. React Router

React Router, React uygulamalarında farklı sayfalar (views) arasında geçiş yapmayı sağlayan bir kütüphanedir. Tek sayfa uygulamaları (SPA) oluşturmak için kullanılır. Web Yazılım Hizmetleri sunan firmalar genellikle React Router gibi teknolojileri kullanarak modern ve kullanıcı dostu web uygulamaları geliştirir.

6. Web Geliştirme Araçları ve Kaynakları

6.1. Kod Düzenleyiciler (Code Editors)

Web geliştirme için kullanılan en popüler kod düzenleyiciler şunlardır:

Visual Studio Code (VS Code)
Sublime Text
Atom
Notepad++

6.2. Tarayıcı Geliştirici Araçları (Browser Developer Tools)

Tüm modern tarayıcılar, web sayfalarını incelemek, hataları ayıklamak ve performansı analiz etmek için kullanılan geliştirici araçlarına sahiptir. Bu araçlar, HTML, CSS ve JavaScript kodunu incelemek, ağ isteklerini izlemek ve konsol mesajlarını görüntülemek için kullanılabilir.

6.3. Versiyon Kontrol Sistemleri (Version Control Systems)

Git, web geliştirme projelerinde kullanılan en popüler versiyon kontrol sistemidir. Git, kod değişikliklerini takip etmek, farklı sürümleri yönetmek ve işbirliğini kolaylaştırmak için kullanılır. GitHub, GitLab ve Bitbucket gibi platformlar, Git depolarını barındırmak ve işbirliği yapmak için kullanılır.

6.4. Paket Yöneticileri (Package Managers)

npm (Node Package Manager) ve Yarn, JavaScript projelerinde kullanılan paket yöneticileridir. Bu araçlar, projeye bağımlılıkları (dependencies) yüklemek, güncellemek ve yönetmek için kullanılır.

7. Gerçek Hayattan Örnekler ve Vaka Çalışmaları

7.1. E-ticaret Web Sitesi Geliştirme

Bir e-ticaret web sitesi geliştirirken, HTML ürün sayfalarını yapılandırmak, CSS ile site tasarımını oluşturmak, JavaScript ile sepet işlemlerini ve ödeme sistemlerini entegre etmek ve React ile dinamik kullanıcı arayüzleri oluşturmak gibi birçok farklı teknolojiyi kullanmanız gerekebilir.

7.2. Blog Platformu Geliştirme

Bir blog platformu geliştirirken, HTML makaleleri yapılandırmak, CSS ile blog tasarımını oluşturmak, JavaScript ile yorum sistemlerini ve arama işlevlerini entegre etmek ve React ile kullanıcı dostu bir yönetici paneli oluşturmak gibi adımlar izleyebilirsiniz.

7.3. Sosyal Medya Uygulaması Geliştirme

Bir sosyal medya uygulaması geliştirirken, HTML kullanıcı profillerini ve gönderileri yapılandırmak, CSS ile uygulama tasarımını oluşturmak, JavaScript ile gerçek zamanlı mesajlaşma ve bildirim sistemlerini entegre etmek ve React Native ile mobil uygulamalar geliştirmek gibi karmaşık süreçlerle karşılaşabilirsiniz.

8. Sık Sorulan Sorular

8.1. Web geliştirme öğrenmeye nereden başlamalıyım?
Web geliştirme öğrenmeye HTML, CSS ve JavaScript ile başlamak en iyisidir. Bu temel teknolojileri öğrendikten sonra, React gibi daha ileri düzeydeki kütüphanelere ve çatılara geçebilirsiniz.
8.2. Hangi kod düzenleyiciyi kullanmalıyım?
Visual Studio Code (VS Code), web geliştirme için popüler ve güçlü bir seçenektir. Ücretsizdir ve birçok eklentiyle özelleştirilebilir.
8.3. React öğrenmek zor mu?
React'in öğrenme eğrisi biraz dik olabilir, ancak temel JavaScript bilgisine sahipseniz, React'i öğrenmek mümkündür. Bol pratik yaparak ve örnek projeler geliştirerek React'i daha iyi anlayabilirsiniz.
8.4. Web geliştirme için hangi kaynakları kullanabilirim?
MDN Web Docs, W3Schools, freeCodeCamp ve Udemy gibi platformlar, web geliştirme öğrenmek için harika kaynaklardır.

9. Karşılaştırmalı Tablolar

9.1. Frontend Framework Karşılaştırması

Framework	Avantajları	Dezavantajları	Kullanım Alanları
React	Bileşen tabanlı, sanal DOM, geniş topluluk	Öğrenme eğrisi, JSX	Tek sayfa uygulamaları, dinamik UI'lar
Angular	Tam çerçeve, TypeScript, güçlü mimari	Karmaşık, büyük boyut	Büyük ölçekli uygulamalar, kurumsal projeler
Vue.js	Kolay öğrenme, esnek, hafif	Daha küçük topluluk, daha az kaynak	Küçük ve orta ölçekli projeler, prototipler

9.2. CSS Preprocessor Karşılaştırması

Preprocessor	Avantajları	Dezavantajları	Özellikler
Sass	Değişkenler, iç içe kurallar, miksinler, fonksiyonlar	Derleme gerektirir	Büyük projeler için ideal
Less	Değişkenler, iç içe kurallar, miksinler, fonksiyonlar	Derleme gerektirir	Daha basit sözdizimi
Stylus	Esnek sözdizimi, değişkenler, fonksiyonlar	Daha az popüler	Minimalist projeler için uygun

10. Sonuç ve Özet

Bu kapsamlı rehberde, web geliştirmenin temel yapı taşları olan HTML, CSS, JavaScript, DOM ve React'i derinlemesine inceledik. HTML ile web sayfalarının yapısını oluşturmayı, CSS ile stil vermeyi, JavaScript ile etkileşim katmayı, DOM ile HTML elemanlarına erişmeyi ve React ile modern web uygulamaları geliştirmeyi öğrendik. Web geliştirme sürekli gelişen bir alan olduğundan, öğrenmeye devam etmek ve yeni teknolojileri takip etmek önemlidir. Başarılar dileriz!

Özel Sunucu Hizmetleri

Standart Sunucular

Bilgi Bankası