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"

Flask Rehber

Flask, hafif bir WSGI web uygulama frameworkudur. Karmaşık uygulamalara ölçeklenebilme özelliğiyle hızlı ve kolay bir başlangıç yapmak için tasarlanmıştır.

Daha Fazla

Python & MongoDB

MongoDB, PostgreSQL - MySQL gibi ilişkisel veritabanlarından farklı olarak NoSQL veritabanı olarak sınıflandırılan bir veritabanıdır.

Daha Fazla

HTML Nedir ve Ne İşe Yarar?

HTML nedir, ne işe yarar? HTML etiketleri, SEO uyumu, erişilebilirlik ve web geliştirmedeki rolünü adım adım öğrenin. 2025 güncel rehber.

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