HTML'le İlk Buluşma – Gerçekçi Rehber

HTML Nedir? – Hemen Öğrenelim!

HTML yani Hyper Text Markup Language… Adı uzun olunca çoğu kişi kısaca “HTML” deyip geçiyor zaten. Web sayfalarının temelini oluşturuyor. Ben ilk öğrendiğimde “bu kadar basit olamaz” diye düşünmüştüm. Sonra CSS’le tanıştım ve dedim ki: “Tamam, asıl mücadele şimdi başlıyor!” 😄

İlk HTML Dosyası: “Merhaba Dünya” Klasiği

İşte klasik bir örnek. (Not: bazıları <html> yerine başka doctype falan dener ama hiç gerek yok.)


<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8">
    <title>İlk HTML Dokümanım</title>
  </head>
  <body>
    <h1>Merhaba Dünya!</h1>
    <p>Bunu yazınca tarayıcıda gerçekten göründü, ufak bir zafer hissi yaşadım.</p>
    <!-- Not: Bu kısım tamamen nostaljik -->
  </body>
</html>

Temel HTML Etiketleri

Şimdi gelelim temel taşlara. (Evet, bunları ezberlemek yerine anlayın derim)

Etiket	Açıklama
<!DOCTYPE>	Tarayıcıya "HTML5 kullanıyorum" sinyali. Aslında eksik olsa da çoğu tarayıcı affediyor.
<html>	Bütün sayfayı saran kılıf. Not: “kök etiket” diyenler de var, kulağa bilimsel geliyor.
<head>	Meta bilgiler, başlık ve stil dosyaları burada. İlk günlerde “neden görünmüyor” diye bakıp durmuştum.
<title>	Sekmede görünen başlık. Eğlenceli bir şey yazarsan arkadaşların şaşırır.
<body>	İçerik alanı. Yani asıl sahne burası.
<p>	Paragraf etiketi. Basit ama vazgeçilmez.
<a>	Link verir. (Pro tip: `target="_blank"` ile yeni sekmede açtırabilirsin.)
<img>	Resim ekler. Bazen resim çıkmaz; genelde yol hatalıdır. 😅
<div>	Kapsayıcı kutu. Modern dünyada yerine `<section>` da olabilir.

Modern HTML Etiketleri Şunlar

Artık <div> yığını yerine şunları kullanmak çok daha mantıklı:

<header> – Sayfanın üst bölümü, logo genelde burada saklanır.
<nav> – Menü alanı. Kullanıcı kaybolmasın diye var.
<section> – İçeriği bölümlere ayırır. (Göz yormaz.)
<article> – Tek başına anlamlı bir yazı parçasıdır.
<footer> – Alt kısım. Telif, iletişim ya da “siteyi kim yaptı” yazıları.

CSS ile Ufak Dokunuş

Burası sihirli kısım. CSS olmadan HTML biraz “Word belgesi” gibi görünür.


<style>
  /* Basit CSS ile sayfayı biraz toparlıyoruz */
  body { background: #f4f4f4; font-family: Arial, sans-serif; color: #333; padding: 15px; }
  h1 { color: #444; text-align: center; }
  p { font-size: 16px; line-height: 1.6; }
  table { width: 100%; margin: 10px 0; }
  td, th { padding: 8px; }
</style>

Not: İlk CSS denememde her şeyi yeşil yaptım. İtiraf ediyorum: felaketti. 🙈 O yüzden diyorum ki: basit başla, sonra süsleme yap.

Popular Tags

Yazarlar

Blog Yazılarımız

Blog

"Yeni Makalelerle İlham Alın"

Django Mülakat Soruları

Django mülakat soruları için 5 gerçek case: ORM performansı, transaction & race condition, Celery idempotensi, caching ve prod güvenliği.

Daha Fazla

Python Requests Session Kullanımı

Python requests kütüphanesinde Session nesnesinin get yerine nasıl ve neden kullanılacağını öğrenin. Daha hızlı, güvenli ve verimli HTTP istekleri için Ses

Daha Fazla

Django HTML Düzenleme Scripti

Django projelerinde HTML dosyalarındaki asset yollarını otomatik olarak {% static %} etiketine çeviren Python scripti. Zaman kazandıran pratik çözüm.

Daha Fazla

Bize Ulaşın

HTML Temel Kodlar ve Anlamları

HTML Nedir? – Hemen Öğrenelim!

İlk HTML Dosyası: “Merhaba Dünya” Klasiği

Temel HTML Etiketleri

Modern HTML Etiketleri Şunlar