HTML Web Sayfası Yapma | Sıfırdan HTML Web Sitesi

HTML kodu ekranı ve web sayfası tasarımı

Web tasarımı öğrenmenin ilk adımı HTML’dir. Framework’ler ve JavaScript kütüphaneleri üretimde ne kadar güçlü olursa olsun, tarayıcıya giden çıktı yine HTML iskeleti üzerinden gider. Temeli atlamak, ileride hata ayıklama (debug) ve erişilebilirlik tarafında size pahalıya patlar.

Aşağıda sıfırdan bir web sayfası nasıl kurulur, hangi etiketler günlük işinizde öne çıkar ve dosyayı nasıl yayınlarsınız adım adım anlatıyoruz. Altyapı ve barındırma kararları için Web Geliştirme kategorisindeki rehberlere göz atabilirsiniz.

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, bağlantı) 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 tek bir <h1> kullanmak iyi bir alışkanlıktır. Google birden fazla <h1> etiketini sorun olarak görmediğini açıkladı; tek <h1> daha çok başlık hiyerarşisini okuyucu ve ekran okuyucular için netleştirir.

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 -->

Bağlantılar (Linkler)

<a href="https://www.example.com">Bu bir linktir</a>
<a href="iletisim.html">İletişim sayfası</a>
<!--email_off-->
<a href="mailto:info@example.com">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 gereklidir.

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>

Semantik HTML5 Etiketleri

Modern web tasarımı için semantik 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>

Semantik etiketler hem SEO hem erişilebilirlik için önemlidir.

HTML’ye 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 Sayfası Ö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>&copy; 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; seçim kriterleri domain ve hosting rehberinde.

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"> etiketini eklemenize gerek yok: Google Search Central bu etiketin Google Arama’da kullanılmadığını ve dizine eklemeye ya da sıralamaya etkisi olmadığını belirtiyor.

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 Metinleri

Tüm görsellerde anlamlı alt metin kullanın:

<img src="kedi.jpg" alt="Pencerede oturan turuncu tekir kedi">

4. Semantik HTML

<div> yerine <article>, <section>, <nav> kullanın.

Yayın öncesi maddeleri teknik SEO kontrol listesinden işaretleyerek ilerleyin.

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
Coursera, edX (üniversite seviyesinde)

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; breakpoint mantığını mobil uyumlu web tasarım rehberi örneklerle açıyor.

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)
Başlık hiyerarşisini atlamak (örneğin <h1> sonrasında doğrudan <h4> kullanmak veya başlıkları sadece yazı boyutu için seçmek)
alt metni yazmamak (erişilebilirlik ve SEO sorunu)
Inline CSS kullanmak (bakım zorlaşır)
Semantik etiket yerine sadece <div> kullanmak
Karakter kodlamasını belirtmemek (<meta charset="UTF-8">)
Viewport meta etiketini yazmamak (mobil uyumsuz görünür)
Formlarda label etiketini 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 indirin, (2) yeni bir klasör ve içinde index.html dosyası oluşturun, (3) temel HTML iskeletini yazın (DOCTYPE, html, head, body), (4) içeriği h1, p, img, a gibi etiketlerle ekleyin, (5) dosyayı tarayıcıda açın. İlk web sayfanız 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. Rol ve maaş tarafını merak ediyorsanız web geliştirici yazısı devamı niteliğinde.

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 iyi bir başlangıç kombinasyonudur.

HTML5 ile eski HTML farkı nedir?

HTML5 modern HTML versiyonu. Yenilikleri: semantik 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 semantik etiketleri okuyup içeriği daha iyi anlar, (2) erişilebilirlik açısından ekran okuyucu (screen reader) kullanan görme engelli kullanıcılar için önemlidir, (3) 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.

Özet

Temel HTML’yi günde 1-2 saat çalışarak 1-2 haftada öğrenebilirsiniz. Sonraki adım CSS, ardından JavaScript’tir. İlk sayfanızı yukarıdaki iskeletle kurup GitHub Pages veya Netlify üzerinden ücretsiz yayınlayabilirsiniz.

Profesyonel web tasarım veya geliştirme hizmeti için Seobify hizmetlerimizi inceleyebilir, iletişim sayfamızdan ulaşabilirsiniz.

Bu yazı faydalı oldu mu?