Bir HTML web sayfası oluşturmak, web geliştirmeye giriş yapan herkesin attığı ilk somut adımdır. Modern dünyada React, Vue, Next.js gibi büyük framework'ler etrafta dolaşırken bile, hepsinin arkasında hâlâ aynı temel duruyor: tarayıcının okuduğu, açık metin halinde yazılmış bir HTML dosyası. Bu yazıda sıfırdan başlayarak .html uzantılı tek bir dosyadan, semantic etiketlere, CSS ile biçimlendirmeye, responsive tasarıma, form işlemeye, erişilebilirliğe ve sayfayı internete yayına almaya kadar tüm yolu adım adım gezeceğiz. Yazı bittiğinde elinizde başkasına gösterebileceğiniz, gerçek bir alan adında çalışan bir web sayfası olacak.
Bu rehber kimin için? Hiç kod yazmamış olsanız bile takip edebilmeniz için her komut ve örnek tam halinde verildi. Aynı zamanda bir framework geliştiricisi olarak HTML temellerinizi tazelemek isteyenler için 2026 standartlarına uygun semantic kullanım, <dialog>, :has(), container queries, fetchpriority gibi modern tarayıcı özelliklerini de tek tek inceledik. Hedefimiz basit bir merhaba dünya değil, üretime alınabilecek kalitede bir başlangıç sayfasıdır.
İlgili rehberler: Web sitesi nasıl kurulur · Web sitesi nedir · Web sitesi yazılımı seçimi · Sayfa tasarımı rehberi · Web site şablonları · Tailwind CSS sıfırdan
HTML Tam Olarak Ne, Ne Değildir?
HTML (HyperText Markup Language) bir programlama dili değildir; bir işaretleme (markup) dilidir. Yani değişken atamaz, döngü kurmaz, koşul yürütmez. Yaptığı tek şey vardır: metnin hangi bölümünün başlık, hangisinin paragraf, hangisinin liste, hangisinin link olduğunu tarayıcıya anlatmak. Tarayıcı bu işaretlemeyi okur, bir DOM ağacı (Document Object Model) inşa eder ve ekrana çizer. Etkileşim ve dinamizm JavaScript'in işidir; görsel biçim ise CSS'in. Bu üç katmanı (yapı / sunum / davranış) birbirinden ayrı düşünmek, web geliştirmenin en temel zihinsel modelidir.
HTML'in resmi standardı, WHATWG'nin (Web Hypertext Application Technology Working Group) yayınladığı yaşayan bir dokümandır: html.spec.whatwg.org. Eskiden HTML4, XHTML, HTML5 gibi sürüm numaraları kullanılırdı; 2014 sonrası HTML artık sürüm numarasız tek bir yaşayan standarttır. Yeni etiketler, attribute'lar ve API'ler tarayıcılarla beraber sürekli ekleniyor — caniuse.com üzerinden bir özelliğin desteklenip desteklenmediğini kontrol etmek pratik bir alışkanlık olmalı.
Geliştirme Ortamını Hazırlamak
HTML yazmak için gerçek anlamda kuruluma gerek yok — Notepad bile yeterli. Ancak ciddi bir editör size renklendirme, otomatik tamamlama, lint, format ve canlı önizleme verir. Visual Studio Code bugün ücretsiz, hafif ve eklenti desteği en geniş olan editördür. WebStorm (JetBrains) ücretli ama daha dolu kutuya sahip. Sublime Text ve Neovim deneyimli kullanıcılar için hâlâ keskin alternatifler.
- VS Code kurun: code.visualstudio.com
- Live Server eklentisi: dosyayı kaydettikçe tarayıcıyı otomatik yenileyen geliştirme sunucusu
- Prettier: kayıt anında HTML/CSS/JS otomatik formatlama
- HTML CSS Support: CSS class autocomplete
- Auto Rename Tag: açılış etiketini değiştirince kapanışı da değiştirir
- Error Lens: hataları satır içi gösterir
Tarayıcı tarafında Chrome veya Firefox DevTools (F12) yeterlidir. Geliştirme sürecinde mobil görünümü test etmek için DevTools içindeki device toolbar (Ctrl+Shift+M) çok faydalıdır. Üretim öncesi farklı tarayıcılarla mutlaka karşılaştırın — Safari'nin bazı CSS davranışları hâlâ ayrışıyor.
İlk HTML Dosyanız: hello.html
Klasik bir başlangıç. Boş bir klasör oluşturun (örneğin C:\projeler\ilk-site ya da ~/projects/ilk-site). İçinde index.html adında bir dosya açın ve aşağıdaki şablonu yapıştırın. Sonra dosyayı kaydedip tarayıcıya sürükleyin — ilk web sayfanız ekrana gelecek.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>İlk Sayfam</title>
<meta name="description" content="HTML ile oluşturduğum ilk web sayfası.">
</head>
<body>
<h1>Merhaba, dünya!</h1>
<p>Bu, sıfırdan yazdığım ilk HTML sayfası.</p>
</body>
</html>Bu yedi satırın her biri bilinçli bir tercihtir; ezberlemek yerine her birinin niye gerekli olduğunu anlayın. Aşağıda hepsinin kısa açıklaması var.
DOCTYPE Bildirimi
<!DOCTYPE html> dosyanın HTML5 (yaşayan standart) modunda işleneceğini tarayıcıya söyler. Bu satırı atlayan sayfalar tarayıcı tarafından quirks mode denilen geriye dönük uyumluluk modunda render edilir; CSS davranışları beklenmedik şekilde bozulur. Kuralı çok basittir: her HTML dosyasının ilk satırı bu olmalı.
<html lang> Attribute'u
lang="tr" sayfanın dilini belirtir. Görme engelli kullanıcıların ekran okuyucuları doğru telaffuz için bu attribute'u kullanır; arama motorları içeriği doğru dile indekslemek için okur; tarayıcı çevirmen tetikleyicileri buna bakar. SEO açısından da gözardı edilmemeli — detaylar için teknik SEO kontrol listesi yazımıza göz atın.
Karakter Kodlaması: UTF-8
<meta charset="UTF-8"> Türkçe karakterlerin (ç, ğ, ı, ö, ş, ü) doğru gösterilmesini garanti eder. UTF-8 dünyadaki tüm dilleri kapsayan tek standarttır; eski Windows-1254 veya ISO-8859-9 kodlamalarını 2026 yılında kullanmak için bir sebep kalmadı. Dosyanızı editör seviyesinde de UTF-8 olarak kaydettiğinizden emin olun (VS Code'un alt çubuğunda görürsünüz).
Viewport Meta Tag
Mobil tarayıcılar varsayılan olarak masaüstü genişliğinde (980px) sayfa render eder ve sonra ekrana sıkıştırır. <meta name="viewport" content="width=device-width, initial-scale=1"> bunu engeller; sayfa cihazın gerçek genişliğinde, normal zoom seviyesinde açılır. Bu satır olmadan responsive tasarım çalışmaz ve Google mobile-first indexing'de sıralama düşer.
HTML Dökümanının Anatomisi
Her HTML dosyası iki büyük bölgeye ayrılır: head (görünmez metadata) ve body (görünür içerik). Head'e sayfanın bilgi etiketi gibi bakın — başlık, kodlama, açıklama, sosyal medya kartları, link'ler, script referansları. Body ise kullanıcının ekranda gördüğü her şeydir.
<!DOCTYPE html>
<html lang="tr">
<head>
<!-- Karakter kodlaması ilk olmalı -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SEO temelleri -->
<title>Şirket — Hizmetler ve İletişim</title>
<meta name="description" content="60-160 karakter arası, sayfanın özünü anlatan açıklama.">
<link rel="canonical" href="https://www.ornek.com/hizmetler">
<!-- Open Graph: sosyal medya paylaşımları -->
<meta property="og:title" content="Şirket — Hizmetler">
<meta property="og:description" content="Açıklama metni">
<meta property="og:image" content="https://www.ornek.com/og.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.ornek.com/hizmetler">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- CSS -->
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<!-- görünür içerik -->
</body>
</html>Hangi meta etiketinin hangi sırayla geleceği ufak da olsa fark yaratır. charset ilk 1024 byte içinde olmalı, yoksa tarayıcı dosyayı baştan parse eder. viewport mümkün olduğu kadar erken gelmeli — JavaScript'ten önce. Open Graph etiketleri og: öneki ile, property attribute'u kullanır (name değil); bu küçük detay ekiplerin çoğunlukla yanlış yazdığı yerdir.
Semantic HTML: Anlam Yüklü Etiketler
Her şeyi <div> ile yazabilirsiniz; tarayıcı şikayet etmez. Ama semantic HTML kullanmak — yani içeriğin anlamına uygun etiket seçmek — üç büyük kazanç verir: erişilebilirlik (ekran okuyucu için), SEO (arama motorları için), bakım kolaylığı (insan için). HTML5 ile gelen semantic etiketler aşağıdaki gibidir:
- <header> — sayfanın veya bir bölümün başlığı (logo, ana başlık, navigasyon)
- <nav> — birincil navigasyon menüsü
- <main> — sayfanın ana içeriği (her sayfada tek olmalı)
- <article> — bağımsız, tek başına anlamlı içerik (blog yazısı, ürün kartı)
- <section> — başlığı olan tematik gruplama
- <aside> — yan içerik (ilgili yazılar, reklam, yan menü)
- <footer> — sayfanın veya bölümün altbilgisi
- <figure> / <figcaption> — başlıklı görsel veya kod örneği
- <time datetime="..."> — makine okunabilir tarih
- <mark> — vurgulanmış (highlighted) metin
- <details> / <summary> — açılır kapanır blok (JS gerektirmez)
<body>
<header>
<a href="/" class="logo">Şirket</a>
<nav aria-label="Ana menü">
<ul>
<li><a href="/">Ana Sayfa</a></li>
<li><a href="/hizmetler">Hizmetler</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/iletisim">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>HTML Web Sayfası Oluşturma</h1>
<p>Yazar: Editör · <time datetime="2026-05-06">6 Mayıs 2026</time></p>
</header>
<section>
<h2>Giriş</h2>
<p>HTML işaretleme dilinin temelleri…</p>
</section>
<section>
<h2>Adım Adım</h2>
<p>Önce DOCTYPE, sonra head, sonra body…</p>
</section>
<footer>
<p>Etiketler: <a href="/etiket/html">html</a></p>
</footer>
</article>
<aside aria-label="İlgili yazılar">
<h2>İlgili</h2>
<ul>
<li><a href="/blog/css-temelleri">CSS Temelleri</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Şirket — <a href="/gizlilik">Gizlilik</a></p>
</footer>
</body><div> ve <span> hâlâ var ve faydalı — ama yalnızca uygun semantic etiket bulunmadığında kullanılmalı. <div> blok seviyesinde, <span> satır içi (inline) generic kapsayıcılardır. Bir liste için <ul>/<li>, bir tablo için <table>, bir form için <form> kullanın — div içine div sarmak çoğu zaman hata kokusudur.
Başlıklar, Paragraflar ve Metin Biçimlendirme
Bir sayfada yalnızca tek bir h1 bulunmalı (modern tartışmalar olsa da en güvenli yaklaşım). Alt başlıklar h2, onların altındakiler h3 ve daha derin gider — h6'ya kadar. Başlık seviyelerinin atlanmaması (h1'den h3'e atlamak gibi) erişilebilirlik için önemlidir. Başlık metni gerçekten o bölümü temsil etmeli; SEO açısından anahtar kelimeyi h1 ve h2 içinde doğal şekilde geçirmek değerlidir.
<h1>Sayfa Başlığı</h1>
<p>Standart bir paragraf. Birden fazla satır olabilir; tarayıcı otomatik kaydırır.</p>
<h2>Bölüm Başlığı</h2>
<p>Önemli kelimeleri <strong>strong</strong> ile vurgulayın — bu sadece kalın değil, <em>anlamsal vurgu</em> demektir.</p>
<p>Tonlama farkı için <em>em</em> etiketi kullanın — italik gösterilir ama bu sadece sunum değildir.</p>
<h3>Alt Bölüm</h3>
<p>Kod parçaları için satır içi <code>backtick</code> yerine <code><code></code> etiketi kullanılır.</p>
<p>Bir alıntıyı <q>bu küçük tırnaktır</q> şeklinde gösterin; uzun alıntılar için <code><blockquote></code>.</p>
<blockquote cite="https://example.com">
Uzun bir alıntı, kaynağına bağlantı verilebilen.
</blockquote>
<p>Tarih: <time datetime="2026-05-06T14:30">6 Mayıs 2026, 14:30</time></p>strong ile <b>, em ile <i> arasındaki fark sıkça karıştırılır: ilk gruptaki etiketler anlam taşır (ekran okuyucu vurgular), ikinci gruptakiler sadece görsel sunumdur. Modern HTML'de tercihen anlamsal olanları kullanın; yalnızca görsel istek için CSS ile font-weight: bold yazın.
Bağlantılar ve Görseller
Web'i web yapan iki şey vardır: bağlantılar (hyperlink) ve görseller. <a href> başka bir kaynağa, <img src> bir görsele referans verir. Her ikisinin de tek satırlık doğru kullanımı saatlerce sorunu önler.
<!-- Aynı domain içi link -->
<a href="/hizmetler">Hizmetler</a>
<!-- Yeni sekmede açılan dış link — güvenlik notuyla -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Dış kaynak
</a>
<!-- Sayfa içi atlama -->
<a href="#bolum-3">Bölüm 3'e atla</a>
<h2 id="bolum-3">Bölüm 3</h2>
<!-- E-posta ve telefon -->
<a href="mailto:bilgi@ornek.com">bilgi@ornek.com</a>
<a href="tel:+902121234567">+90 212 123 45 67</a>
<!-- İndirilebilir dosya -->
<a href="/dosya.pdf" download>Dosyayı indir (PDF)</a>target="_blank" kullandığınızda mutlaka rel="noopener noreferrer" ekleyin: aksi halde yeni sekmedeki sayfa window.opener üzerinden orijinal sayfanıza referans tutar ve bu, eski tarayıcılarda phishing saldırılarına kapı açar. Modern Chrome/Firefox bunu otomatik noopener ile davranır ama yine de açıkça yazmak en sağlam yoldur.
Görsellerde Performans ve Erişilebilirlik
Görseller bir sayfanın ağırlığının ortalama %50-65'ini oluşturur. Yanlış kullanılmış tek bir hero görseli tüm performans bütçenizi yer. Aşağıdaki kural seti üretim sayfalarında her zaman uygulanmalı:
<!-- Modern, responsive, optimize edilmiş görsel -->
<picture>
<source
type="image/avif"
srcset="/img/hero-480.avif 480w,
/img/hero-960.avif 960w,
/img/hero-1920.avif 1920w"
sizes="(max-width: 600px) 480px,
(max-width: 1200px) 960px,
1920px">
<source
type="image/webp"
srcset="/img/hero-480.webp 480w,
/img/hero-960.webp 960w,
/img/hero-1920.webp 1920w"
sizes="(max-width: 600px) 480px,
(max-width: 1200px) 960px,
1920px">
<img
src="/img/hero-960.jpg"
alt="Bilgisayar ekranında kod editörü"
width="1920" height="1080"
loading="lazy"
decoding="async"
fetchpriority="high">
</picture>- alt: görsel yüklenmediğinde veya ekran okuyucuda okunacak metin. Süs amaçlı görseller için
alt=""(boş) bırakın, bilgi taşıyan görseller için tanımlayıcı yazın - width / height: görselin gerçek boyutları. CLS (Cumulative Layout Shift) önlemenin tek doğru yolu
- loading="lazy": ekrana girmeden indirilmez. Hero (LCP) görseli için kullanmayın
- fetchpriority="high": LCP görseli için kritik fetch önceliği
- WebP / AVIF: JPEG'e göre %25-50 daha küçük dosya
- srcset / sizes: tarayıcının cihaza uygun boyutu seçmesi
Görsel optimizasyonun derinine inmek için sayfa hızı ve Core Web Vitals 2026 yazımıza göz atın. Toplu WebP/AVIF dönüşümü için komut satırı cwebp ve avifenc araçları yeterlidir.
Listeler ve Tablolar
Sıralı veriler için doğru etiketi seçmek hem semantic hem de pratik açıdan önemlidir. <ul> sırasız (madde imli), <ol> sıralı (numaralandırılmış), <dl> tanım listesi içindir. Tablolar tablo verisi için kullanılmalı — düzen amaçlı (layout) tablolar 2026'da artık tabu sayılır.
<!-- Sırasız liste -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Sıralı liste -->
<ol>
<li>Editörü aç</li>
<li>Dosya oluştur</li>
<li>Tarayıcıda görüntüle</li>
</ol>
<!-- Tanım listesi -->
<dl>
<dt>HTML</dt>
<dd>Sayfanın yapısını tanımlayan işaretleme dili</dd>
<dt>CSS</dt>
<dd>Sayfanın görünümünü tanımlayan stil dili</dd>
</dl>
<!-- Erişilebilir veri tablosu -->
<table>
<caption>Tarayıcı pazar payları (2026 Q1)</caption>
<thead>
<tr><th scope="col">Tarayıcı</th><th scope="col">Pay</th></tr>
</thead>
<tbody>
<tr><th scope="row">Chrome</th><td>~64%</td></tr>
<tr><th scope="row">Safari</th><td>~19%</td></tr>
<tr><th scope="row">Edge</th><td>~6%</td></tr>
<tr><th scope="row">Firefox</th><td>~3%</td></tr>
</tbody>
</table>scope="col" ve scope="row" özellikleri ekran okuyucuların hücreleri doğru başlığa bağlamasını sağlar. <caption> tablonun anlamını özetler. Tabloya CSS ile sınır eklemek için border-collapse: collapse klasiktir.
Form Elementleri ve Doğrulama
Form, web'in kullanıcıdan veri aldığı tek standart yoldur. HTML5 ile gelen yeni input tipleri ve attribute'lar, eskiden JavaScript'le yapılması gereken doğrulamaların büyük kısmını sıfır kod ile çözer. Aşağıdaki form üretime hazır bir iletişim formudur:
<form action="/iletisim" method="post" novalidate>
<fieldset>
<legend>İletişim Formu</legend>
<p>
<label for="ad">Ad Soyad <abbr title="Zorunlu">*</abbr></label>
<input id="ad" name="ad" type="text"
required minlength="2" maxlength="60"
autocomplete="name">
</p>
<p>
<label for="eposta">E-posta <abbr title="Zorunlu">*</abbr></label>
<input id="eposta" name="eposta" type="email"
required autocomplete="email"
inputmode="email"
placeholder="ornek@alan.com">
</p>
<p>
<label for="telefon">Telefon</label>
<input id="telefon" name="telefon" type="tel"
autocomplete="tel"
pattern="[0-9 +()-]{7,20}">
</p>
<p>
<label for="konu">Konu</label>
<select id="konu" name="konu">
<option value="satis">Satış</option>
<option value="destek">Destek</option>
<option value="diger">Diğer</option>
</select>
</p>
<p>
<label for="mesaj">Mesaj</label>
<textarea id="mesaj" name="mesaj" rows="6"
required minlength="10" maxlength="2000"></textarea>
</p>
<p>
<label>
<input type="checkbox" name="kvkk" required>
KVKK aydınlatma metnini okudum.
</label>
</p>
<p>
<button type="submit">Gönder</button>
</p>
</fieldset>
</form>- label for="...": tıklanabilir etiket; ekran okuyucuda input ile bağlantı kurar
- autocomplete: tarayıcının form doldurma davranışı (kayıtlı bilgileri öner)
- inputmode="email": mobilde uygun klavye düzeni
- pattern="...": regex tabanlı doğrulama
- required: boş gönderimi engeller
- fieldset / legend: form bölümlerini gruplar (özellikle uzun formlarda)
Form üzerinden gerçek veri kabul ediyorsanız sunucu tarafında mutlaka tekrar doğrulama yapın — HTML doğrulaması yalnızca kullanıcı deneyimi içindir, güvenlik değildir. Backend'de ayrıca SQL injection ve XSS'e karşı korunma şarttır; detaylar için SQL injection önleme ve XSS ve CSP koruma rehberlerimizi inceleyin.
CSS ile Biçimlendirme: İlk Stiller
HTML iskeletini kurduktan sonra sıra CSS (Cascading Style Sheets) ile boyamaya gelir. CSS üç şekilde HTML'e bağlanır: harici <link> ile (önerilen), <style> blokları ile (sayfa içi), inline style attribute ile (genelde kaçınılmalı). Üretim sitesi her zaman harici dosya kullanmalı — cache'lenir, kod tekrarı azalır, bakım kolaylaşır.
<!-- index.html başında -->
<link rel="stylesheet" href="/styles.css">/* styles.css — modern bir başlangıç */
/* 1. Modern reset (Josh Comeau'dan esinlenme) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
font-family: system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
color: #1a1a1a;
background: #fafafa;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* 2. Layout container */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}
/* 3. Header */
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid #eaeaea;
}
header nav ul {
display: flex;
gap: 1.5rem;
list-style: none;
padding: 0;
}
header a { color: #1a1a1a; text-decoration: none; }
header a:hover { color: #0066cc; }
/* 4. Hero */
.hero {
padding: 4rem 0;
text-align: center;
}
.hero h1 {
font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
line-height: 1.1;
}clamp() fonksiyonu CSS'in en güzel modern eklemelerinden biridir: bir min/preferred/max değeri tek satırda yazıp font boyutunu, padding'i veya genişliği akıcı şekilde ölçeklendirebilirsiniz. clamp(2rem, 4vw + 1rem, 3.5rem) ifadesi mobilde 2rem, masaüstünde 3.5rem değerinde sorunsuz büyür.
Modern Layout: Flexbox ve Grid
15 yıl boyunca CSS'te düzen kurmak float, position ve sayısız hile gerektirirdi. Flexbox (2015) ve Grid (2017) tüm bunu radikal şekilde basitleştirdi. Bugün hâlâ float ile layout yazıyorsanız, son 10 yılı kaçırmışsınız demektir.
/* Flexbox: 1 boyutlu yönlendirme */
.cards {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.card { flex: 1 1 280px; }
/* Grid: 2 boyutlu yerleşim */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
/* Karmaşık dergi düzeni — adlandırılmış alanlar */
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"head head"
"side main"
"foot foot";
min-height: 100vh;
}
.layout > header { grid-area: head; }
.layout > aside { grid-area: side; }
.layout > main { grid-area: main; }
.layout > footer { grid-area: foot; }Pratik kural: tek eksende sıralanan öğeler (navbar, kartlar) için Flexbox, gerçek bir 2D düzen (sayfa şablonu, resim galerisi, dashboard) için Grid. İki teknik birlikte de kullanılabilir; iç içe geçer.
Responsive Tasarım: Media Queries
Mobile-first yaklaşımı benimseyin: önce küçük ekran için yazın, sonra min-width ile büyük ekranlara genişletin. Bu yaklaşım hem CSS'i daha kısa tutar, hem de düşük güçlü mobil cihazların yanlışlıkla masaüstü için tasarlanmış ağır CSS yüklemesini önler.
/* Mobile-first base */
.menu { display: none; }
.menu-toggle { display: block; }
.grid {
display: grid;
gap: 1rem;
}
/* Tablet ve üzeri */
@media (min-width: 768px) {
.menu { display: flex; }
.menu-toggle { display: none; }
.grid { grid-template-columns: 1fr 1fr; }
}
/* Masaüstü */
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
/* Geniş masaüstü */
@media (min-width: 1440px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}
/* Karanlık mod */
@media (prefers-color-scheme: dark) {
body { background: #0d0d0d; color: #e6e6e6; }
}
/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}prefers-color-scheme ve prefers-reduced-motion kullanıcı tercihine saygı gösterir; modern siteler bunları varsayılan olarak destekler. Ayrıca container queries (2023) artık tüm büyük tarayıcılarda destekleniyor — viewport yerine bileşenin kendi kapsayıcısının boyutuna göre stil yazmanıza olanak tanır.
Web Fontları ve Tipografi
İyi tipografi sayfayı profesyonel gösterir; kötü font seçimi ucuzlatır. Sistem fontları (system-ui) en hızlı çalışır ve çoğu zaman yeterlidir. Özel font istiyorsanız WOFF2 formatında, self-host edilmiş ve preload edilmiş olmalı:
<!-- index.html head -->
<link rel="preload"
href="/fonts/inter-var-latin-ext.woff2"
as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var-latin-ext.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+011E-011F, U+0130,
U+015E-015F, U+0152-0153;
}
body { font-family: 'Inter', system-ui, sans-serif; }
</style>font-display: swap font yüklenene kadar sistem fontunu gösterir, hazır olduğunda değiştirir — FOIT (Flash of Invisible Text) yerine FOUT (Flash of Unstyled Text) tercih edilir. Türkçe karakterler için unicode-range ile latin-ext aralığını dahil etmek şarttır; aksi halde ı, ğ, ş glifleri eksik olur.
JavaScript: Sayfaya Davranış Kazandırmak
HTML iskelet, CSS giysidir; JavaScript ise hareket. Basit bir karanlık mod toggle, modal açma, form gönderim animasyonu için 10-20 satır JavaScript yeterlidir. JavaScript'i her zaman <body> sonunda veya defer attribute ile yükleyin — yoksa parser bloklanır.
<!-- En sondaysa defer'a gerek yok ama iyi alışkanlık -->
<script src="/app.js" defer></script>// app.js — temel etkileşimler
document.addEventListener('DOMContentLoaded', () => {
// 1. Mobil menü toggle
const toggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
toggle?.addEventListener('click', () => {
const open = menu.classList.toggle('open');
toggle.setAttribute('aria-expanded', String(open));
});
// 2. Smooth scroll for hash links
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const id = a.getAttribute('href').slice(1);
const el = document.getElementById(id);
if (el) {
e.preventDefault();
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// 3. Lazy form submit (fetch API)
const form = document.querySelector('form#iletisim');
form?.addEventListener('submit', async e => {
e.preventDefault();
const data = new FormData(form);
const res = await fetch(form.action, {
method: form.method,
body: data
});
const text = await res.text();
form.outerHTML = `<p class="ok">${text}</p>`;
});
});Vanilla JavaScript (kütüphanesiz JS) günümüzde inanılmaz güçlü — fetch, querySelector, ES modules, async/await, optional chaining gibi özellikler 5 yıl önce kütüphane gerektiriyordu. Küçük siteler için React/Vue/Svelte gibi framework'lere gerek olmayabilir; gerek varsa React modern web uygulaması, Vue 3 Composition API ya da Next.js 15 App Router rehberlerimizi inceleyebilirsiniz.
Erişilebilirlik (a11y): Herkesin Kullanabilmesi
Erişilebilirlik bir lüks değil, hak. Türkiye'de görme engelli kullanıcı sayısı 700.000'i aşıyor; renk körlüğü, motor bozukluk, geçici (ameliyat sonrası tek elle), durumsal (parlak güneş altında) engelleri de eklediğinizde her sitenin kullanıcı kitlesinin önemli bir kısmı erişilebilirlik özelliklerinden faydalanır. WCAG 2.2 (Web Content Accessibility Guidelines) günümüzdeki standarttır.
- Anlamlı alt metni: bilgi taşıyan görseller için her zaman
- Klavye erişimi:
tabile tüm interaktif öğelere ulaşılabilmeli - Focus görünürlüğü:
:focus-visibleile belirgin outline - Renk kontrastı: normal metin için minimum 4.5:1, büyük metin için 3:1
- aria-label / aria-labelledby: ikon-only butonlar için açıklama
- Heading hiyerarşisi: h1 → h2 → h3, atlama yok
- Form etiketleri: her input'un bir
<label>'ı olmalı - Animasyonlar:
prefers-reduced-motion'a saygı
<!-- İkon-only buton — erişilebilir hali -->
<button type="button" aria-label="Menüyü kapat">
<svg aria-hidden="true" width="24" height="24">
<path d="M6 6l12 12M18 6l-12 12"/>
</svg>
</button>
<!-- Ekran okuyucuya özel görünmez metin -->
<style>
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
</style>
<a href="#main" class="sr-only sr-only-focusable">Ana içeriğe atla</a>Sayfanızı WAVE veya Chrome DevTools'un Lighthouse aksesibilite raporu ile test edin. Ayrıca klavye-only navigasyon denemesi (mouse'a hiç dokunmadan tüm sayfayı dolaşmak) en hızlı gerçek dünya testidir.
Dosya ve Klasör Yapısı
İlk birkaç dosyada yapı önemsiz görünür; sayfa sayısı 5'i geçince organize bir klasör yapısı zaman kazandırır. Klasik bir küçük site için aşağıdaki düzen sade ve genişlemeye uygundur:
ilk-site/
├── index.html
├── hakkimizda.html
├── hizmetler.html
├── iletisim.html
├── 404.html
├── robots.txt
├── sitemap.xml
├── favicon.ico
├── styles/
│ ├── reset.css
│ ├── base.css
│ ├── layout.css
│ └── components.css
├── scripts/
│ ├── app.js
│ └── form.js
├── images/
│ ├── hero.avif
│ ├── hero.webp
│ └── logo.svg
├── fonts/
│ └── inter-var.woff2
└── docs/
└── katalog.pdfSayfa sayısı arttıkça blog/, urunler/ gibi alt klasörler eklenir. Linkleri her zaman kök dizinden mutlak verin (/styles/base.css) — relative path (../styles/base.css) sayfayı taşıyınca kırılır.
SEO Temelleri: Sayfanızı Bulunabilir Yapın
Sayfayı yazdınız, yayınladınız — şimdi Google'ın bulması gerekiyor. SEO'nun büyük resmi için arama motoru ve SEO rehberi yazısına bakın; burada HTML seviyesinde önemli detayları toparlayalım:
- title: 50-60 karakter, anahtar kelime önde
- meta description: 120-160 karakter, click-through'u artıran
- h1: sayfanın ana başlığı, sayfa başına bir tane
- canonical link: aynı içeriğin birden fazla URL'de göründüğü durumlar için
- structured data (JSON-LD): Article, BreadcrumbList, FAQPage gibi schema'lar
- sitemap.xml ve robots.txt: indeksleme yönlendirmesi
- Open Graph + Twitter Card: sosyal medya paylaşım kartları
- hreflang: çok dilli site için dil sürümleri arasında bağ
<!-- Article schema (JSON-LD) — head içinde -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Web Sayfası Oluşturma Rehberi",
"description": "Sıfırdan HTML web sayfası…",
"datePublished": "2026-05-06",
"dateModified": "2026-05-06",
"author": {
"@type": "Organization",
"name": "Şirket"
},
"image": "https://www.ornek.com/og.jpg",
"mainEntityOfPage": "https://www.ornek.com/blog/html-rehberi"
}
</script>Yapısal veri test edilmeden eklenmemeli — Rich Results Test Google'ın resmi doğrulayıcısıdır.
Site Haritası ve robots.txt
Arama motoru botlarının siteyi tarayabilmesi için iki dosya kritik: sitemap.xml sayfaların listesi, robots.txt hangi yolların taranabilir olduğunun beyanı. Detaylı için arama motorlarına site ekleme rehberi 2026 ve web sitesi nasıl kurulur rehberi faydalı olacaktır.
# robots.txt — kök dizinde
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /search
Sitemap: https://www.ornek.com/sitemap.xml<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.ornek.com/</loc>
<lastmod>2026-05-06</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.ornek.com/hizmetler</loc>
<lastmod>2026-05-04</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>Geçerlilik Kontrolü ve Lint
HTML hataları sessiz kalır — tarayıcı yanlış da olsa render eder. Ama yanlış kapatılmış etiketler, geçersiz nesting (<div> içine <p> içine başka <div>) sonradan beklenmedik bug'lara yol açar. W3C HTML Validator standarda göre tüm hataları listeler.
# CLI ile HTML validation
npm install -g html-validate
html-validate index.html
# Tüm HTML dosyalarını lint
html-validate "**/*.html"
# Prettier ile otomatik format
npm install -g prettier
prettier --write "**/*.{html,css,js}"CI/CD pipeline'ında her commit'te otomatik HTML/CSS/JS lint çalıştırmak küçük hataları erken yakalar — yapı kurma rehberimiz GitHub Actions ile CI/CD bu konuyu detaylı işliyor.
Yayına Alma: HTML Dosyanızı İnternete Koymak
Yerelde çalışan sayfayı dünyaya açmak için web hosting ve domain gerekir. Static HTML siteleri için 2026'da pek çok ücretsiz veya ucuz seçenek var. Hosting seçimi için hosting nedir, türleri nelerdir ve web hosting paket karşılaştırması kaynaklarına bakın. Domain için domain nedir ve alan adı nasıl alınır rehberleri tam yol gösterir.
- Static hosting: Cloudflare Pages, Netlify, Vercel, GitHub Pages — ücretsiz katmanlar bile çoğu küçük site için yeterli
- Paylaşımlı hosting (cPanel/Plesk): aylık 30-150 TL, yaklaşık (sağlayıcıya göre değişir, 2026 verisi)
- VPS: aylık 150-500 TL, Linux sunucu yönetimi gerekir — Linux sunucu yönetimi temelleri
- Cloud (AWS S3 + CloudFront, Hetzner): kullanım bazlı, küçük sitelerde aylık 5-20 USD
- Yerel sağlayıcılar: Türkiye'deki Natro, Turhost, GuzelHosting, İsimTescil gibi firmalar TL fiyatlandırma + Türkçe destek sunar
FTP/SFTP ile Klasik Yükleme
Paylaşımlı hosting paketi aldıysanız klasik yöntem FTP'dir. FileZilla ücretsiz ve güvenilir bir istemcidir. SFTP (port 22) FTP'ye (port 21) tercih edilmeli — şifreli kanal sağlar.
# Komut satırından SFTP ile yükleme (Linux/Mac/WSL)
sftp kullanici@sunucum.com
# İçeride:
cd public_html
put -r./ilk-site/*
bye
# rsync ile çok daha hızlı (sadece değişen dosyalar)
rsync -avz --delete -e ssh \
./ilk-site/ \
kullanici@sunucum.com:/var/www/ilk-site/Git Tabanlı Modern Deploy
GitHub Pages, Cloudflare Pages, Netlify, Vercel gibi servisler git push'la otomatik deploy yapar. Yerel değişikliği commit edip push ettiğiniz an site güncellenir — FTP'ye geri dönmek istemezsiniz.
# 1. Git repo başlat
git init
git add.
git commit -m "İlk yayın"
# 2. GitHub'a yükle
git remote add origin https://github.com/kullanici/ilk-site.git
git branch -M main
git push -u origin main
# 3. Cloudflare Pages'e bağla
# - Cloudflare Dashboard > Pages > Create > Connect to Git
# - Repo seç, build command boş bırak (statik HTML)
# - Output dir: / (kök)
# - Custom domain: ornek.com
# 30 saniye sonra siteniz canlıdırGerçek alan adı eklemek için DNS ayarları gerekir. DNS nedir, nasıl değiştirilir rehberi A kaydı, CNAME, TTL, propagation gibi kavramları tek tek açıklıyor.
HTTPS / SSL Sertifikası
2026'da HTTPS olmayan bir site Chrome'da "Güvenli değil" uyarısıyla açılır, Google sıralamada düşürür ve modern API'lerin (geolocation, service worker, push) çoğu çalışmaz. Sertifika almak ücretsiz ve otomatik: Let's Encrypt + Certbot 2 dakikada bitirir. Detay için Let's Encrypt ile ücretsiz SSL.
# Ubuntu/Debian üzerinde Nginx + Let's Encrypt
sudo apt update
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d ornek.com -d www.ornek.com
# Otomatik yenileme (zaten cron'a ekleniyor)
sudo certbot renew --dry-runCloudflare gibi CDN kullanıyorsanız sertifika otomatik gelir; origin sunucuya da Cloudflare Origin Certificate kurulumu ekstra güvenlik katmanıdır. HTTPS ve TLS 1.3 rehberi modern yapılandırma seçeneklerini ele alıyor.
Performans: Hızlı Yükleyen Bir Sayfa
Static HTML siteleri zaten doğal olarak hızlıdır — ama yanlış konfigürasyon (uncompressed, no-cache, blocking JS) yine de sayfayı yavaşlatır. Aşağıdaki kontrol listesi en yaygın yanlışları temizler:
- Brotli/gzip sıkıştırma sunucu seviyesinde aktif olmalı
- HTTP/2 veya HTTP/3: tüm modern sunucularda mevcut
- Cache-Control: max-age=31536000, immutable — versiyonlu asset'ler için
- preconnect / preload: kritik kaynaklar için
- Render-blocking JS/CSS yok: defer/async kullan
- Görseller: WebP/AVIF + width/height + lazy load
- Font subset + preload + display: swap
- 3rd party script audit: gereksiz pixel/widget kaldır
- CDN: Cloudflare, Bunny, Fastly — global edge cache
Nasıl ölçülür? PageSpeed Insights, Chrome DevTools Lighthouse, WebPageTest üçlüsü uçtan uca tablo verir. Hedef: Lighthouse Performance skoru 90+, LCP < 2.5s, CLS < 0.1, INP < 200ms. Daha derin için site optimizasyonu nasıl yapılır yazımız tüm katmanları örtüyor.
Güvenlik: Header'lar ve Best Practice
Tek bir HTML sayfası bile yanlış header'larla XSS, clickjacking, MIME sniffing saldırılarına açık olabilir. Sunucu yapılandırmanızda aşağıdaki güvenlik header'ları her response'a eklenmeli:
# Nginx security headers
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "geolocation=(), camera=(), microphone=()" always;
add_header Content-Security-Policy "default-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; script-src 'self'" always;securityheaders.com üzerinden A+ skor hedefleyin. CSP konfigürasyonu zor olabiliyor; yanlış yazılmış CSP sayfayı kırar — önce Content-Security-Policy-Report-Only ile test edin. Detay için XSS ve CSP koruma.
Yaygın Hatalar ve Tuzaklar
- DOCTYPE'ı atlamak → quirks mode → CSS bozulur
- charset eksikliği → Türkçe karakterler bozuk görünür
- viewport meta yok → mobilde sayfa minik açılır
- img'de width/height yok → CLS yüksek, layout zıplar
- label-input bağlantısı yok → erişilebilirlik fail, click area küçük
- Birden fazla h1 → SEO ve a11y kafası karışır
- Inline style spam → bakımı imkansız
- External CSS sayfa sonunda → FOUC (stilsiz görüntü)
- JavaScript head'de blocking → render bloklanır
- 3rd party script audit'siz → analytics + chat + pixel toplamı 1.5MB JS
- Karakter kodlaması yanlış → ç ğ ı ş ü ö patlaması
- Mutlak path yerine relative → sayfa taşıyınca link kırılır
- HTTP'den HTTPS'e mixed content → modern tarayıcılar bloklar
- Form action eksik → submit bir yere gitmez
Tek Sayfadan Çok Sayfaya: Linklerle Bağlama
Site genişledikçe sayfalar arasında tutarlı bir navigasyon ve breadcrumb gerekir. <nav aria-label="breadcrumb"> ile yapısal veri birlikte verilmeli:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li><a href="/">Ana Sayfa</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">HTML Web Sayfası Oluşturma</li>
</ol>
</nav>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type":"ListItem","position":1,"name":"Ana Sayfa","item":"https://www.ornek.com/"},
{"@type":"ListItem","position":2,"name":"Blog","item":"https://www.ornek.com/blog"},
{"@type":"ListItem","position":3,"name":"HTML Web Sayfası Oluşturma"}
]
}
</script>Statik HTML mı, CMS mi, Framework mi?
5 sayfalık tanıtım sitesi için statik HTML idealdir: hızlı, ucuz, güvenli, neredeyse hiç bakım gerektirmez. Ancak içerik düzenli güncellenecekse, bir CMS (içerik yönetim sistemi) işi kolaylaştırır. Karar verirken şu eksenlere bakın:
- Statik HTML: 1-15 sayfa, içerik az değişir, geliştirici dokunuşuna uygun
- WordPress: blog/içerik ağırlıklı, herkesin bildiği panel — WordPress SEO plugin önerileri
- Static Site Generator (Astro, Hugo, Eleventy): blog + içerik, build-time render
- Framework (Next.js, Nuxt, SvelteKit): dinamik / dashboard / web app
- Headless CMS + Frontend: enterprise içerik akışı
Kararsız kaldıysanız web sitesi yazılımı seçim rehberi sizi bütün opsiyonlara taşır.
Sürdürülebilirlik: Kodu Düzenli Tutmak
Bugün yazdığınız HTML 6 ay sonra başkasının (veya gelecekteki sizin) elinde olacak. Aşağıdaki alışkanlıklar tek geliştirici projelerinde bile zaman kazandırır:
- Tutarlı indentation: 2 boşluk, sekme veya 4 — hangisi olursa olsun aynı
- Yorum satırları: bir bölümün niyetini açıkla, sadece ne yaptığını değil
- Class isimlendirme: BEM (block__element--modifier) veya utility-first (Tailwind tarzı)
- Asset versioning:
/styles.css?v=20260506ile cache busting - README.md: kurulum, deploy, yapı açıklaması
- Version control: git ile her değişikliği commit
- Backup: hosting yedeği yetmez, ayrı yerel veya cloud kopya tut — yedekleme stratejileri
İlerleme Yolu: Sıradaki Adımlar
Bir HTML sayfası ve bir CSS dosyasıyla bu yazıdaki temelleri kavradığınızda, tipik bir geliştirici şu sıraya devam eder:
- 1. CSS derinleşmesi: custom properties, animasyonlar, transitions
- 2. JavaScript temelleri: DOM API, event'lar, fetch
- 3. Utility-first CSS: Tailwind CSS sıfırdan ve Tailwind v4 yenilikleri
- 4. Static Site Generator: Astro veya Eleventy ile çoklu sayfa
- 5. Framework: React, Vue 3 veya Next.js 15
- 6. Backend: Node.js ile REST API
- 7. DevOps: Docker ile deploy, CI/CD pipeline
- 8. Performans ve SEO: Core Web Vitals
Pratik Mini Proje: Tek Sayfa Portfolyo
Tüm öğrendiklerinizi bir araya getirmek için klasik bir egzersiz: tek sayfa kişisel portfolyo. Hero bölümü, hakkımda, projeler grid'i, iletişim formu, footer. Aşağıdaki taslak başlangıç noktası olabilir — kendi tarzınızla değiştirin.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ahmet Yılmaz — Web Geliştirici</title>
<meta name="description" content="İstanbul'da çalışan frontend geliştirici. React, TypeScript, Node.js.">
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header class="site-header container">
<a href="/" class="logo">Ahmet Yılmaz</a>
<nav aria-label="Ana menü">
<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 class="hero container">
<h1>Web'de fikirleri ürüne çeviriyorum.</h1>
<p>5 yıllık deneyimli frontend developer.</p>
<a href="#projeler" class="btn">Projelerimi gör</a>
</section>
<section id="hakkimda" class="container">
<h2>Hakkımda</h2>
<p>Boğaziçi Üniversitesi mezunuyum…</p>
</section>
<section id="projeler" class="container">
<h2>Projeler</h2>
<div class="grid">
<article class="card">
<h3>E-ticaret Dashboard</h3>
<p>React + TypeScript + Tailwind</p>
</article>
<article class="card">
<h3>Blog Platformu</h3>
<p>Next.js + Postgres + Prisma</p>
</article>
<article class="card">
<h3>Mobil PWA</h3>
<p>Vue 3 + Workbox + Vite</p>
</article>
</div>
</section>
<section id="iletisim" class="container">
<h2>İletişim</h2>
<form action="/api/iletisim" method="post">
<p><label>İsim<br><input name="isim" required></label></p>
<p><label>E-posta<br><input name="eposta" type="email" required></label></p>
<p><label>Mesaj<br><textarea name="mesaj" rows="5" required></textarea></label></p>
<p><button type="submit">Gönder</button></p>
</form>
</section>
</main>
<footer class="site-footer container">
<p>© 2026 Ahmet Yılmaz</p>
</footer>
</body>
</html>Kodu klonlayın, kendi metinlerinizi koyun, GitHub'a push edip Cloudflare Pages'a bağlayın — 15 dakikada gerçek bir alan adında yayında olur.
Mobil ve PWA: Daha İleri Bir Adım
Static HTML siteniz çalışıyorsa, ek 100 satır kod ile Progressive Web App'e (PWA) dönüştürebilirsiniz: ana ekrana eklenebilir, çevrimdışı çalışır, push notification destekler. manifest.webmanifest dosyası ve bir service worker yeter:
// /sw.js — temel service worker
const CACHE = 'v1';
const ASSETS = ['/', '/styles.css', '/app.js', '/img/logo.svg'];
self.addEventListener('install', e => {
e.waitUntil(caches.open(CACHE).then(c => c.addAll(ASSETS)));
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(r => r || fetch(e.request))
);
});{
"name": "İlk Sitem",
"short_name": "Site",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0066cc",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Tarayıcı Uyumluluğu ve Eski Tarayıcılar
2026'da Internet Explorer artık tamamen tarihte; Chrome, Firefox, Safari, Edge ve mobil sürümleri evergreen (kendiliğinden güncellenir) tarayıcılar. Yine de bazı kurumsal ortamlarda eski Safari (iOS 15-) veya kurumsal Edge sürümleri görülür. CSS feature query (@supports) ile yeni özelliği destekleyenlere yeni stil, desteklemeyenlere fallback verebilirsiniz:
/* Container query — sadece destekleyen tarayıcılarda */
@supports (container-type: inline-size) {
.card-container { container-type: inline-size; }
@container (min-width: 600px) {
.card { display: flex; }
}
}
/* Modern aspect-ratio fallback */
.video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
@supports (aspect-ratio: 16 / 9) {
.video {
aspect-ratio: 16 / 9;
padding-bottom: 0;
height: auto;
}
}Sıkça Sorulan Sorular
Tek bir HTML dosyası site sayılır mı?
Evet — bir index.html bile internet üzerinde yayınlandığında bir web sitesidir. Kişisel kartvizit, etkinlik landing page'i, küçük tanıtım sayfaları çoğu zaman tek dosyadır. Sayfa sayısı ihtiyaca göre büyür.
HTML öğrenmek ne kadar sürer?
Temelleri (etiketler, head/body, semantic) bir hafta içinde kavranabilir. Akıcı CSS ve responsive tasarımla beraber 1-2 ay içinde gerçek projeler yapılabilir. Mastery yıllar alır — ama üretken hale gelmek hızlıdır.
HTML için hangi sürümü öğrenmeliyim?
HTML artık sürümsüz, yaşayan bir standart (WHATWG). "HTML5" terimi hâlâ kullanılır ama 2026 itibariyle herkesin bahsettiği aynı standarttır. Yeni özellikler tarayıcı desteği geldikçe eklenir.
WordPress yerine HTML mi yazmalıyım?
İçeriği kendiniz düzenli güncelleyecekseniz ve teknik bilginiz sınırlıysa WordPress mantıklı. Sayfalarınız büyük ölçüde sabitse veya geliştirici desteğiniz varsa statik HTML daha hızlı ve güvenli. Ortası: Astro, Eleventy gibi static site generator'lar.
HTML sayfası yapmak ücretsiz mi?
Yazmak tamamen ücretsiz: editör (VS Code), tarayıcı, kod yerel makinenizde. Yayınlamak için domain (yıllık ~50-300 TL, yaklaşık) ve hosting (ücretsiz seçenekler var) gerekir. Ayrıntılar: web sitesi fiyatları ve ücretsiz domain ve hosting veren siteler.
HTML ile dinamik site yapılabilir mi?
Saf HTML statiktir. Form gönderimi, kullanıcı girişi, içerik filtreleme gibi dinamik özellikler için JavaScript (frontend) + backend (Node.js, PHP, Python) gerekir. Statik bir HTML üzerine 50-100 satır JavaScript ile küçük dinamik özellikler eklenebilir.
Kaynaklar
- MDN Web Docs — HTML: kapsamlı, sürekli güncel referans
- WHATWG HTML Standard: yaşayan resmi standart
- web.dev: Google'ın modern web rehberi
- caniuse.com: özellik tarayıcı destek tablosu
- W3C HTML Validator: dokümanın geçerliliği
- WAVE: erişilebilirlik testi
- PageSpeed Insights: performans ve Core Web Vitals
- Google Rich Results Test: yapısal veri kontrolü
- securityheaders.com: güvenlik header denetimi
- SSL Labs: TLS yapılandırma testi
İlgili Yazılar
- Web Sitesi Nasıl Kurulur Rehberi — sıfırdan kuruluma uçtan uca
- Web Sitesi Nedir? 2026 Kapsamlı Rehber
- Web Sitesi Yazılımı Seçim Rehberi
- Sayfa Tasarımı Rehberi
- Web Site Şablonları Rehberi
- Core Web Vitals 2026 Optimizasyonu
- Teknik SEO Kontrol Listesi 2026
- Tailwind CSS Sıfırdan
- React ile Modern Web Uygulaması
- Next.js 15 App Router Rehberi
Domain seçimi, hosting önerisi, SSL kurulumu ve canlı yayın için adım adım yönlendirme almak için iletişime geçin