Yükleniyor...

HTML ve Node.js

HTML ve Node.js, modern web geliştirme dünyasında güçlü ve esnek bir ikilidir. HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan yapı taşlarını sağlar; yani başlıklar, paragraflar, listeler ve bağlantılar gibi içerik bileşenlerini tanımlar. Node.js ise JavaScript'i sunucu tarafında çalıştırmamıza imkân verir ve dinamik olarak HTML üretip istemcilere gönderebilir.
Bu kombinasyonu bir ev inşa etmeye benzetebiliriz: HTML, odaları ve duvarlarıyla evin iskeletidir; Node.js, bu odalara mektuplar yazar gibi içerik yerleştirir ve her ziyaretçiye özel bir deneyim sunar. Kişisel bir web sitesinde, Node.js ziyaretçilere güncel projeleri gösterir. Bir blogda, yeni yazılar otomatik olarak HTML’e dönüştürülür. E-ticaret sitelerinde ürünler ve fiyatlar dinamik olarak güncellenir. Haber sitelerinde ise son dakika haberleri, ziyaretçinin tarayıcısına gerçek zamanlı olarak iletilir.
Bu rehberde şunları öğreneceksiniz:

  1. Node.js ile temel bir HTML sunucusu oluşturmak.
  2. Dinamik içerik üretip, kişisel web sitesi, blog, e-ticaret veya haber sitesi gibi projelerde kullanmak.
  3. HTML’nin semantik, erişilebilir ve temiz kullanımını Node.js ile birleştirmek.
    Sonunda, statik bir sayfayı dinamik ve akıllı bir web uygulamasına dönüştürebilecek, sürdürülebilir ve genişleyebilir projeler oluşturabileceksiniz.

Temel Örnek

html
HTML Code 
<!-- Simple Node.js server serving HTML -->

<script>
// Import HTTP module
const http = require('http');

// Create a simple server
http.createServer((req, res) => {
res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'}); // response headers
res.end('<h1>Merhaba!</h1><p>HTML ve Node.js sunucunuz çalışıyor.</p>'); // send HTML
}).listen(3000);
</script>

Yukarıdaki kod, HTML ve Node.js’in birlikte nasıl çalıştığını gösteren basit bir örnektir.

  1. const http = require('http');
    Node.js’in yerleşik http modülünü projeye dahil eder. Bu modül, bir web sunucusu oluşturmak için kullanılır. Bunu postaneyi açmak gibi düşünebilirsiniz; burası gelen istekleri kabul edip yanıt gönderecek.

  2. http.createServer((req, res) => {...})
    Bu fonksiyon bir sunucu yaratır.

  • req (request) gelen talebi temsil eder; ziyaretçi hangi URL'ye gitti, hangi tarayıcıyı kullanıyor gibi bilgiler taşır.
  • res (response) yanıtın oluşturulduğu nesnedir; HTML içerik burada oluşturulup tarayıcıya gönderilir.
    3. res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'})
    HTTP durum kodunu 200 OK olarak ayarlar ve yanıtın HTML olduğunu tarayıcıya bildirir. UTF-8 kodlaması Türkçe karakterlerin sorunsuz görünmesini sağlar.
  1. res.end('<h1>...</h1>')
    Yanıtı sonlandırır ve HTML’i gönderir. Eğer res.end unutulursa, tarayıcı yanıtın tamamlanmasını bekler ve sayfa yüklenmez.
    Pratik kullanım: Bu temel yapı, kişisel web siteniz, basit bir blog veya test ortamları için idealdir. Yeni başlayanların aklına gelen ilk soru şudur: “Büyük sayfalar için hep böyle mi yazacağız?” Hayır; ileride şablon motorları veya Express.js gibi çerçevelerle içerik yönetimi daha kolay hale gelir.

Pratik Örnek

html
HTML Code 
<!-- Dynamic blog post list for a personal blog -->

<script>
const http = require('http');

http.createServer((req, res) => {
const posts = ['Node.js Giriş', 'HTML İpuçları', 'Dinamik Web Siteleri', 'E-Ticaret Stratejileri'];
const listHTML = posts.map(p => `<li>${p}</li>`).join('');
res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'});
res.end(`<h1>Son Blog Yazıları</h1><ul>${listHTML}</ul>`);
}).listen(3000);
</script>

En iyi uygulamalar ve sık yapılan hatalar
En iyi uygulamalar:

  1. Semantik HTML kullanın: <header>, <main>, <footer> gibi etiketler SEO ve erişilebilirliği artırır.
  2. Erişilebilirlik sağlayın: Resimlerde alt kullanın, formlarda label ile alanları ilişkilendirin.
  3. Temiz yapı oluşturun: Node.js tarafında veri ve HTML’yi mantıklı şekilde ayırın; okunabilir kod uzun vadede kolaylık sağlar.

  4. Doğru başlıklar gönderin: Content-Type ve charset ayarları hatasız bir kullanıcı deneyimi sunar.
    Sık yapılan hatalar:

  5. Tüm sayfayı <div>lerle doldurup semantik etiketleri yok saymak.

  6. <html> etiketinde lang="tr" belirtmemek.
  7. Etiketleri yanlış kapatmak veya iç içe yanlış yerleştirmek.
  8. UTF-8 kodlamasını unutarak Türkçe karakter sorunları yaşamak.
    Hata ayıklama ipuçları:
  • console.log(req.url) ile gelen URL’leri kontrol edin.
  • Tarayıcıda Ağ (Network) sekmesini inceleyin.
  • HTML kodunuzu W3C Validator ile doğrulayın.
    Pratik öneri:
    Küçük bir kişisel site veya blog ile başlayın, ardından e-ticaret veya haber sitelerine geçin. Kodunuzu düzenli ve semantik tutmak, uzun vadede bakım maliyetini düşürür.

📊 Hızlı Referans

Property/Method Description Example
http.createServer Node.js ile HTTP sunucusu oluşturur http.createServer((req,res)=>{})
res.writeHead HTTP durum kodu ve başlık ayarlar res.writeHead(200, {'Content-Type':'text/html'})
res.end HTML yanıtı gönderir ve bitirir res.end('<h1>Merhaba</h1>')
Array.map Dizi elemanlarını dönüştürür posts.map(p => <li>${p}</li>)
.join Dizi öğelerini birleştirerek string oluşturur array.join('')

Özet ve sonraki adımlar
Bu eğitimde şunları öğrendiniz:

  1. Node.js ile temel bir HTML sunucusu kurmayı.
  2. Dinamik içerik üretip ziyaretçilere sunmayı.
  3. HTML yazımında en iyi uygulamaları ve kaçınılması gereken hataları.
    CSS ve JavaScript ile bağlantı:
  • HTML sayfanın yapısını oluşturur.
  • CSS görsel tasarım ve düzen sağlar.
  • Tarayıcı tarafında JavaScript etkileşim kazandırır.

  • Node.js ise bu yapıyı dinamik içerik ve sunucu tarafı kontrolüyle güçlendirir.
    Önerilen sonraki konular:

  • Express.js ile gelişmiş yönlendirme ve şablon yönetimi.

  • EJS veya Pug gibi şablon motorları.
  • Node.js ile veritabanı bağlantısı (MongoDB, MySQL).
    Pratik tavsiye:
    Önce küçük projelerle deneyim kazanın. Ardından kullanıcı girişi, veri tabanı bağlantısı ve yönetim paneli ekleyerek adım adım tam özellikli web uygulamalarına geçin.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 31 / 51
Html Ders