21 Nisan 2026
Kerem Kırbıyık
Web tasarımı öğrenmenin ilk adımı HTML. Görkemli framework’ler, modern JavaScript kütüphaneleri, hepsi sonunda HTML’e dönüşüyor. HTML temellerini bilmeden modern web tasarımı yapmak; alfabe öğrenmeden roman yazmaya benziyor.
Bu yazıda sıfırdan HTML ile web sayfası nasıl yapılır, hangi etiketler önemli, ilk siteyi nasıl yayınlarsınız adım adım anlatacağız.
HTML Nedir?
HTML (HyperText Markup Language); web sayfalarının yapısını tanımlayan işaretleme dilidir. Web sayfasının “iskeleti”dir. Tarayıcı HTML dosyasını okur, içerikteki öğeleri (başlık, paragraf, görsel, link) yorumlar ve ekrana basar.
HTML Programlama Dili Mi?
Hayır, HTML bir programlama dili değildir. İşaretleme dilidir. Mantıksal işlem yapmaz, sadece içeriği etiketler. Programlama JavaScript ile gelir, görsel CSS ile gelir.
İlk HTML Sayfanızı Yapma
Adım 1: Bir Editör İndirin
Ücretsiz seçenekler:
- VS Code (en popüler, ücretsiz)
- Sublime Text
- Notepad++ (Windows)
Adım 2: Yeni Bir Klasör Açın
Bilgisayarınızda “ilk-sitem” gibi bir klasör oluşturun.
Adım 3: index.html Dosyası Oluşturun
Klasör içinde “index.html” adında bir dosya oluşturun.
Adım 4: Temel HTML İskeletini Yazın
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu benim ilk web sayfam.</p>
</body>
</html>Adım 5: Tarayıcıda Açın
Dosyayı çift tıklayarak açın. İlk web sayfanız hazır.
HTML Temel Etiketleri
Yapısal Etiketler
| Etiket | Açıklama |
|---|---|
<!DOCTYPE html> | Belgenin HTML5 olduğunu belirtir |
<html> | Tüm sayfayı kapsar |
<head> | Meta bilgiler (görünmez) |
<body> | Sayfanın görünen içeriği |
Başlık Etiketleri
<h1>En büyük başlık</h1>
<h2>İkinci seviye başlık</h2>
<h3>Üçüncü seviye başlık</h3>
<h4>...</h4>
<h5>...</h5>
<h6>En küçük başlık</h6>Her sayfada sadece bir <h1> olmalı (SEO için kritik).
Paragraf ve Metin
<p>Bu bir paragraftır.</p>
<strong>Kalın yazı</strong>
<em>İtalik yazı</em>
<br> <!-- Satır arası -->
<hr> <!-- Yatay çizgi -->Linkler
<a href="https://www.example.com">Bu bir linktir</a>
<a href="iletisim.html">İletişim sayfası</a>
<!--email_off-->
<a href="mailto:[email protected]">E-mail gönder</a>
<!--/email_off-->Görseller
<img src="resim.jpg" alt="Resim açıklaması" width="300" height="200">alt özelliği erişilebilirlik ve SEO için kritik.
Listeler
<!-- Sıralı liste -->
<ol>
<li>Birinci madde</li>
<li>İkinci madde</li>
<li>Üçüncü madde</li>
</ol>
<!-- Sırasız liste -->
<ul>
<li>Madde</li>
<li>Madde</li>
<li>Madde</li>
</ul>Tablo
<table>
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hücre 1</td>
<td>Hücre 2</td>
</tr>
</tbody>
</table>Form
<form action="/submit" method="POST">
<label for="ad">Ad:</label>
<input type="text" id="ad" name="ad" required>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<textarea name="mesaj" rows="4"></textarea>
<button type="submit">Gönder</button>
</form>Semantic HTML5 Etiketleri
Modern web tasarımı için semantic etiketler şart:
<header>Site başlığı</header>
<nav>Menü</nav>
<main>
<article>
<h1>Makale başlığı</h1>
<p>İçerik...</p>
</article>
<aside>Yan içerik</aside>
</main>
<footer>Alt bilgi</footer>Semantic etiketler hem SEO hem erişilebilirlik için önemli.
HTML’e CSS Ekleme
CSS olmadan HTML çıplak görünür. Stil eklemek için:
Inline CSS (Önerilmez)
<p style="color: red; font-size: 18px;">Kırmızı yazı</p>Internal CSS
<head>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>External CSS (Önerilen)
<head>
<link rel="stylesheet" href="style.css">
</head>style.css dosyasında:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
p {
line-height: 1.6;
color: #666;
}Tam Bir HTML Sayfa Örneği
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Kişisel web sitemin açıklaması">
<title>Kerem Kırbıyık | Web Geliştirici</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#hakkimda">Hakkımda</a></li>
<li><a href="#projeler">Projeler</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<section id="hakkimda">
<h1>Merhaba, Ben Kerem</h1>
<p>Web geliştirici ve SEO uzmanıyım.</p>
</section>
<section id="projeler">
<h2>Projelerim</h2>
<article>
<h3>Proje 1</h3>
<p>Açıklama...</p>
</article>
</section>
<section id="iletisim">
<h2>İletişim</h2>
<form>
<input type="text" name="ad" placeholder="Adınız" required>
<input type="email" name="email" placeholder="E-mail" required>
<textarea name="mesaj" placeholder="Mesajınız"></textarea>
<button type="submit">Gönder</button>
</form>
</section>
</main>
<footer>
<p>© 2026 Kerem Kırbıyık. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>HTML Web Sayfasını Yayınlama
1. Domain Adı Satın Alma
GoDaddy, Namecheap, Hostinger, Natro üzerinden domain alın. Detay için domain ve hosting yazımızı inceleyin.
2. Hosting Satın Alma
Hostinger, Bluehost, Natro, Turhost gibi sağlayıcılar.
3. Dosyaları Sunucuya Yükleme
FTP (FileZilla) veya hosting paneli üzerinden HTML, CSS, JS dosyalarını yükleyin.
4. Ücretsiz Yayın Alternatifleri
- GitHub Pages: Ücretsiz, basit HTML siteler için
- Netlify: Sürükle-bırak ile yayın
- Vercel: Modern siteler için
- Cloudflare Pages: Hızlı CDN ile
HTML SEO Temelleri
1. Meta Etiketler
<title>Sayfa başlığı (60 karakter altı)</title>
<meta name="description" content="Sayfa açıklaması (155 karakter altı)">
<meta name="keywords" content="anahtar, kelimeler">2. Open Graph (Sosyal Medya)
<meta property="og:title" content="Sayfa başlığı">
<meta property="og:description" content="Sayfa açıklaması">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">3. Görsel Alt Text’ler
Tüm görsellerde anlamlı alt text:
<img src="kedi.jpg" alt="Pencerede oturan turuncu tekir kedi">4. Semantic HTML
<div> yerine <article>, <section>, <nav> kullanın.
Detay için teknik SEO yazımızı inceleyin.
HTML Öğrenme Kaynakları
Ücretsiz Kaynaklar
- MDN Web Docs: En kapsamlı ve güncel referans
- freeCodeCamp: İnteraktif HTML/CSS eğitimi
- W3Schools: Klasik referans + örnekler
- YouTube: Traversy Media, Web Dev Simplified, Mosh Hamedani
Türkçe Kaynaklar
- BTK Akademi (ücretsiz)
- Patika.dev (ücretsiz HTML/CSS yolları)
- Tayfun Erbilen YouTube kanalı
- Sadık Turan YouTube kanalı
Sertifikalı Kurslar
- Udemy (kampanyalı dönemde 100-200 TL)
- Coursera, edX (üniversite seviye)
HTML Öğrenme Sonrası Adımlar
HTML temellerini bitirdikten sonra:
1. CSS Öğrenin
Görsel tasarım için zorunlu. Flexbox ve Grid layout sistemleri.
2. JavaScript Öğrenin
İnteraktivite ve dinamik özellikler için.
3. Responsive Tasarım
Media queries ile mobil uyumlu tasarım. Detay için mobil uyumlu web tasarım yazımızı inceleyin.
4. Modern Framework’ler
React, Vue, Astro, Svelte gibi framework’leri öğrenin.
5. Versiyon Kontrol
Git ve GitHub ile çalışma.
HTML İle İlgili Sık Yapılan Hatalar
- Etiketleri kapatmayı unutmak (
<p>açık ama</p>yok) <h1>etiketini birden fazla kullanmak (sayfada bir tane olmalı)alttext yazmamak (erişilebilirlik ve SEO sorunu)- Inline CSS kullanmak (bakım zorlaşır)
- Semantic etiket yerine sadece
<div>kullanmak - Karakter encoding belirtmemek (
<meta charset="UTF-8">) - Viewport meta tag yazmamak (mobil uyumsuz görünür)
- Form’larda
labeletiketini kullanmamak
Sıkça Sorulan Sorular
HTML web sayfası nasıl yapılır?
Beş adımda yapılabilir: (1) VS Code gibi bir editör indir, (2) Yeni klasör ve içinde index.html dosyası oluştur, (3) Temel HTML iskeletini yaz (DOCTYPE, html, head, body), (4) İçeriği h1, p, img, a gibi etiketlerle ekle, (5) Tarayıcıda dosyayı aç. İlk web sayfan 10 dakikada hazır olur.
HTML programlama dili mi?
Hayır, HTML bir programlama dili değil, işaretleme dilidir. Mantıksal işlem yapmaz, koşullu ifade veya döngü yoktur. İçeriği etiketler ve yapılandırır. Programlama mantığı JavaScript ile, görsel stil CSS ile gelir. HTML, CSS, JavaScript birlikte web sayfasını oluşturur.
HTML öğrenmek ne kadar sürer?
Temel HTML 1-2 hafta günlük 1-2 saat çalışmayla öğrenilir. Tüm etiketleri ve formları kapsayan profesyonel HTML için 1 ay yeterli. CSS ile birlikte 2-3 ay, JavaScript ile birlikte 6-12 ay sonunda profesyonel web geliştirici seviyesine gelinebilir. Detay için web geliştirici yazımızı inceleyin.
HTML web sayfasını nasıl yayınlarım?
Üç yol: (1) Domain + hosting satın alıp FTP ile dosyaları yüklemek, (2) GitHub Pages ile ücretsiz (GitHub repo + ayarlar), (3) Netlify veya Vercel’e sürükle-bırak. Ücretsiz başlangıç için GitHub Pages veya Netlify ideal, profesyonel kullanım için kendi domain + hosting önerilir.
HTML için en iyi editör hangisi?
Visual Studio Code (VS Code) en popüler ve kapsamlı seçenek. Ücretsiz, hızlı, Live Server, Prettier, Auto Rename Tag gibi binlerce eklenti var. Alternatifler: Sublime Text, WebStorm (ücretli), Atom (artık güncellenmiyor), Notepad++ (Windows için basit). Yeni başlayanlar için VS Code + Live Server eklentisi mükemmel kombinasyon.
HTML5 ile eski HTML farkı nedir?
HTML5 modern HTML versiyonu. Yenilikleri: semantic etiketler (<header>, <nav>, <article>, <section>, <footer>), yerel video/audio desteği (<video>, <audio>), gelişmiş form özellikleri (type="email", type="date"), Canvas ve SVG, Geolocation API, Local Storage, daha basit DOCTYPE (<!DOCTYPE html>).
HTML ile tek başına web sitesi yapılabilir mi?
Evet, ama görsel olarak çok basit kalır. Profesyonel görünüm için CSS şart. İnteraktivite için JavaScript ekstra gerekir. Statik basit siteler (kişisel portfolyo, landing page) HTML + CSS ile yapılabilir. Modern dinamik siteler için React, Vue, Astro gibi framework’ler kullanılır.
HTML semantic etiketler neden önemli?
Üç ana sebep: (1) SEO için Google semantic etiketleri okuyup içeriği daha iyi anlar, (2) Erişilebilirlik açısından screen reader kullanan görme engelli kullanıcılar için kritik, (3) Bakım kolaylığı sağlar; kod okunabilir ve bakımı kolay olur. <div class="header"> yerine <header> kullanmak modern web tasarımının standardı.
HTML öğrendikten sonra ne öğrenmeli?
Sıralama: (1) CSS (görsel tasarım, layout, responsive design), (2) JavaScript (interaktivite, DOM manipülasyonu), (3) Git/GitHub (versiyon kontrol), (4) Modern framework (React veya Vue), (5) Backend (Node.js veya Python), (6) Veritabanı (SQL). HTML, CSS ve JavaScript üçlüsü web geliştirmenin temeli.
Sonuç
HTML; web tasarımının temel yapı taşı, öğrenmesi kolay ve hızlı sonuç veren bir işaretleme dili. Bir hafta günlük 1-2 saat çalışmayla temel HTML öğrenilebilir. CSS ve JavaScript ile birlikte profesyonel web geliştirme yolculuğunun başlangıcı.
Profesyonel web tasarım veya geliştirme hizmeti için Seobify hizmetlerimizi inceleyebilir, iletişim sayfamızdan ulaşabilirsiniz.