← Ödev Lobisi · Ödev 02

<html> 35 yıllık yolculuk.

1989'da CERN'in gri koridorlarında bir fizikçinin yazdığı küçük bir öneri belgesinden, bugün her tarayıcıda çalışan ve sürekli güncellenen bir dünya dilin hikâyesi.

Not: Bu sayfanın kendisi de o hikâyenin bir ürünü — her bir etiket, 35 yıllık evrimin bir meyvesi.

— Mike Sendall, CERN · Tim Berners-Lee'nin "Information Management: A Proposal" dokümanının üzerine yazdığı not, Mart 1989.
Bu not sayesinde proje onaylandı. Ve işte buradayız.
Problem

Neden HTML ortaya çıktı?

1980'lerin sonunda CERN (Avrupa Nükleer Araştırma Merkezi), dünyanın en büyük parçacık fiziği laboratuvarıydı. Binlerce bilim insanı, onlarca ülkeden, farklı bilgisayarlar üzerinde çalışıyordu. Problem şuydu:

Dağınık bilgi

Her araştırmacının notları, makaleleri, deneysel sonuçları farklı sistemlerde, farklı formatlarda tutuluyordu. Bir meslektaşın belgesine ulaşmak için ya ona yazmak ya da bilgisayarına fiziksel erişim gerekiyordu.

Bağlantı yok

İki belge arasında "bu konuda şunu da oku" demek için elle referans vermek gerekiyordu. Çapraz referanslar manuel, güncellenemez, kopuktu. Hypertext kavramı vardı ama evrensel bir uygulaması yoktu.

Platform karmaşası

Mac, PC, Unix, VMS, NeXT... her biri farklı. Birinin dokümanı diğerinde açılmıyor. Tim Berners-Lee'nin önerisi: işletim sisteminden bağımsız, düz metin tabanlı, evrensel bir format.

Çözüm

Tim Berners-Lee üç şey icat etti ve bunlar bugün hâlâ ayakta: HTML (içeriği işaretlemek için), HTTP (içeriği taşımak için), ve URL (içeriği adreslemek için). Web'in temeli bu üçlüdür.

Zaman çizelgesi

HTML'in versiyonları

Her versiyon kendi döneminin ihtiyaçlarını yansıtır. Aşağıda her era için o dönemde yazılmış gerçek HTML kodu ve onun çıktısını göreceksin.

1989–93
Doğuş

HTML Tags — İlk işaretleme

Mart 1989 → Haziran 1993 · "Information Management: A Proposal"

12 Mart 1989'da Tim Berners-Lee, CERN'de bir öneri belgesi yazar. Direktörü Mike Sendall notu okur ve kapağına "Vague, but exciting..." diye yazar. Bu belirsiz onayla proje başlar.

1990'ın Noel'inde Tim BL, NeXT bilgisayarında ilk web tarayıcısını ("WorldWideWeb") ve ilk sunucuyu yazar. 6 Ağustos 1991'de alt.hypertext newsgroup'una bir mesaj atar — bu dünyanın ilk web paylaşımıdır.

Ekim 1991'de "HTML Tags" adlı dokümanı yayınlar: 18 element. SGML'den ilham alınmıştır. Bu HTML 1.0 asla resmi bir standart olmadı; IETF taslağı olarak kaldı. Ama ilk 18 etiketin çoğu bugün hâlâ ayakta.

İlk 18 etiket
  • Başlıklar: <h1> → <h6> — belgenin iskeleti
  • Metin akışı: <p>, <br>, <hr>, <pre>
  • Listeler: <ul>, <ol>, <li>, <dl>, <dt>, <dd>
  • Çıpa: <a href="..."> — asıl devrim bu. Bir belgeden diğerine atlayabilmek.
  • Yapı: <title>, <address>, <blockquote>, <isindex>
<TITLE>CERN Bilgi Yönetimi</TITLE>
<H1>World Wide Web Projesi</H1>
<P>Bu, hypertext belgelerini bağlayan evrensel bir sistemdir.
<P>Daha fazla bilgi için <A HREF="info.html">buraya tıklayın</A>.
<UL>
  <LI>Belgeler arası bağlantı
  <LI>Platform bağımsızlığı
  <LI>Düz metin, okunabilir kaynak kod
</UL>
<!-- Kapanış etiketleri opsiyoneldi, büyük harf stilin kendisiydi -->
↑ Dönemin gri arkaplan + Times New Roman + mavi altı çizili link estetiği. CSS henüz yok.
1995
HTML 2.0

İlk resmi standart

Kasım 1995 · IETF RFC 1866

Web patlar. 1993 Eylül'de NCSA Mosaic 1.0 çıkar ve resim gösterebilen ilk yaygın tarayıcı olur. 1994 Nisan'da Netscape kurulur, aynı yıl W3C MIT'de kurulur (Tim BL yönetiminde).

Ortalık karışmıştı: her tarayıcı kendi etiketlerini uyduruyordu. IETF'nin HTML Working Group'u bir araya gelip ilk resmi standardı yazdı: HTML 2.0, RFC 1866 (Kasım 1995). Mevcut uygulamayı belgeleyen pragmatik bir dokümandı.

Büyük yenilik

Form'lar! İlk defa kullanıcı bir web sayfasına veri gönderebiliyordu. Login kutuları, arama alanları, anketler — hepsi bu dönemin icadı.

Yenilikler
  • Form'lar: <form>, <input>, <select>, <option>, <textarea>
  • Belge yapısı resmileşti: <html>, <head>, <body> standart hâle geldi
  • Image maps — bir resmin farklı bölgelerinde farklı linkler
  • Character entities — &amp;, &lt;, &gt; gibi özel karakterler
<HTML>
<HEAD><TITLE>Üyelik Formu</TITLE></HEAD>
<BODY>
  <H2>Siteye kayıt olun</H2>
  <FORM ACTION="/kayit.cgi" METHOD="POST">
    İsim: <INPUT TYPE="text" NAME="ad"><BR>
    E-posta: <INPUT TYPE="text" NAME="mail"><BR>
    Şehir:
    <SELECT NAME="sehir">
      <OPTION>İstanbul<OPTION>Ankara<OPTION>İzmir
    </SELECT><BR>
    <INPUT TYPE="submit" VALUE="Kayıt Ol">
  </FORM>
</BODY></HTML>
↑ Hâlâ gri arkaplan + Times. Ama artık form var — web etkileşimli olmaya başlıyor.
1997
HTML 3.2

Tablolarla "tasarım" dönemi

14 Ocak 1997 · W3C'nin ilk HTML Recommendation'ı

Tarayıcı savaşları başlamıştı: Netscape ve Internet Explorer birbirine özel etiketler ekliyordu. HTML 3.0 çok iddialı olduğu için reddedildi. HTML 3.2 ise pragmatikti — hâlâ yaygın olarak kullanılanı belgeledi.

CSS Level 1 bir ay önce (Aralık 1996) yayınlanmıştı ama tarayıcılar daha onu düzgün desteklemiyordu. Bu yüzden görsel tasarım için HTML'in kendisi kullanıldı: tablolarla layout, <font> ile tipografi, bgcolor ve align gibi stil nitelikleri.

Garip gerçek

Bu dönemde bir sayfanın görünümünü kontrol etmek için iç içe tablolar kullanılırdı — bazen 4-5 seviye derinlikte. Kaynağa bakmak kabustu. Grid? Flexbox? Rüyadaydılar.

Yenilikler
  • Tablolar: <table>, <tr>, <td>, <th>, <caption> — layout'un belkemiği
  • Görsel etiketler: <font>, <center>, <basefont>, <big>, <small>, <strike>, <u>
  • Java applet'leri: <applet> — artık ölü ama o zaman büyüydü
  • Script etiketi: <script> — JavaScript dünyaya giriyor
  • Nitelikler: bgcolor, text, link, vlink — <body>'ye renk
<BODY BGCOLOR="#FFFFCC" TEXT="#000080">
  <CENTER>
    <FONT SIZE="6" COLOR="#CC0000" FACE="Arial">
      ★ KEMAL'İN HOMEPAGE'İ ★
    </FONT>
  </CENTER>
  <HR SIZE="4" COLOR="#CC0000">
  <TABLE WIDTH="100%" BORDER="1" CELLPADDING="8">
    <TR>
      <TD BGCOLOR="#CCCCFF">
        <B>Menü</B><BR>
        · Hakkımda<BR>· Linkler<BR>· İletişim
      </TD>
      <TD>
        Hoş geldiniz! Bu sitem hâlâ <BLINK>yapım aşamasında</BLINK>.
      </TD>
    </TR>
  </TABLE>
</BODY>
↑ 90'lar sonu klasik "homepage" estetiği. <blink> Netscape'in uydurması, resmi standart olmadı.
1999
HTML 4.01

Yapı ile stil ayrılıyor

24 Aralık 1999 · Üç tat: Strict · Transitional · Frameset

HTML 4.0 (Aralık 1997) ve küçük düzeltmelerle gelen HTML 4.01 (Aralık 1999) büyük bir felsefi dönüşüm getirdi: "HTML yapıyı tanımlar, CSS stili". Bu dönemde CSS yavaş yavaş tarayıcılarda düzgün çalışmaya başladı, <font> ve <center> gibi etiketler deprecated ilan edildi.

Üç DOCTYPE çeşidi vardı:
· Strict — modern, sadece yapısal etiketler
· Transitional — eski etiketlere izin veren geçiş sürümü
· Frameset — <frameset> ile sayfayı bölme (sonradan ölen bir fikir)

Yenilikler
  • Semantic etiketler çoğaldı: <div>, <span>, <abbr>, <acronym>, <cite>, <q>, <ins>, <del>
  • Form iyileştirmeleri: <label>, <fieldset>, <legend>, <button>, <optgroup>
  • Tablolara yapı: <thead>, <tbody>, <tfoot>
  • Erişilebilirlik: alt, title, accesskey, tabindex öznitelikleri önemsendi
  • Internationalization: <bdo>, lang, dir — çok dilli içerik desteği
  • Script ve stil ayrımı: <script src="">, <link rel="stylesheet"> yaygınlaştı
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="tr">
<head>
  <title>Modern Blog</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <h1>Blog Yazım</h1>
  </div>
  <div class="content">
    <p>Artık <em>yapı</em> HTML'de,
       <em>stil</em> CSS'de.</p>
    <p>Yazar: <abbr title="World Wide Web">WWW</abbr>'in babası.</p>
  </div>
</body></html>
↑ CSS ayrı dosyada. Verdana modası başladı. Mavi header + beyaz içerik yıllarca standart oldu.
2000
XHTML 1.0

XML'in katı disiplini

26 Ocak 2000 · HTML'i XML olarak yeniden formüle etme girişimi

W3C 2000'de bir fikir buldu: HTML'i XML kurallarına uyacak şekilde yeniden yazalım. Böylece daha disiplinli, makine-okunabilir ve genişletilebilir olacaktı. İsmini XHTML koydular.

Kurallar katıydı: bütün etiketler kapanmalı, küçük harfle yazılmalı, öznitelikler tırnaklı olmalı, self-closing etiketler /> ile bitmeli. Bir virgül unutsan sayfa kırmızı XML hatası veriyordu.

Başarısızlık hikâyesi

W3C sonra bir adım daha ileri gitmek istedi: XHTML 2.0. Geriye dönük uyumsuz, radikal bir dönüşüm. Topluluk reddetti. 2004'te Apple + Mozilla + Opera ayrıldı ve WHATWG'yi kurdu. 2009'da W3C XHTML 2.0 projesini resmen kapatıp HTML5'e döndü.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr">
<head>
  <title>XHTML Sayfası</title>
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
</head>
<body>
  <p>Her etiket küçük harfli olmalı.</p>
  <p>Her etiket kapanmalı — hatta <br /> bile.</p>
  <img src="foto.jpg" alt="foto" />
  <!-- Nitelikler mutlaka çift tırnaklı -->
</body>
</html>

XHTML'in katı 5 kuralı

  • 1. Her açılan etiket kapanmalı: <p>...</p>
  • 2. Self-closing etiketler /> ile biter: <br />, <img />
  • 3. Tüm etiketler küçük harf: <TABLE> ❌ → <table> ✓
  • 4. Tüm nitelikler çift tırnaklı: width=100 ❌ → width="100" ✓
  • 5. İç içe geçmede sıralama bozulamaz: <b><i>x</b></i> ❌

Bir karakter hata = tüm sayfa patlıyor. Geliştiriciler çıldırdı. İnternet "forgiving" olmaya alışmıştı.

2014
HTML5

Modern web'in doğuşu

28 Ekim 2014 · W3C Recommendation · 10 yıllık çalışmanın meyvesi

WHATWG 2004'te başladı — W3C'nin XHTML 2 saplantısına karşı bir protesto hareketi. Apple, Mozilla, Opera (sonra Google) bir araya geldi ve "Web Applications 1.0" diye bir çalışma başlattı. Bu zamanla HTML5 oldu.

W3C 2007'de aynı yöne döndü ve WHATWG ile beraber çalışmaya başladı. On yıl sonra, 28 Ekim 2014'te HTML5 resmi W3C Recommendation oldu.

HTML5 sadece yeni etiketler değildi — web'i uygulama platformuna çevirdi. Flash ve Java applet'leri öldü. Video, ses, çizim, offline çalışma, konum, bildirimler — hepsi native oldu.

Yeni DOCTYPE

HTML 4.01'in uzun DOCTYPE'ı yerine sadece: <!DOCTYPE html>. Hepsi bu. Dünyanın en kısa doctype'ı.

Semantic etiketler

Artık <div class="header"> değil — gerçek anlamı olan etiketler:

  • <header>, <footer>, <nav>, <main>, <aside> — sayfa iskeleti
  • <article>, <section> — içerik blokları
  • <figure>, <figcaption> — görsel + altyazı
  • <mark>, <time>, <meter>, <progress> — anlamsal işaretleme
  • <details>, <summary>, <dialog> — etkileşim
Multimedya + grafik
  • <video> + <audio> — Flash öldü. Native video geldi.
  • <canvas> — JavaScript ile piksel düzeyinde çizim
  • <svg> inline — vektör grafikleri HTML içinde
  • <picture>, srcset — responsive görseller
Form devrimi
  • Yeni input tipleri: email, url, tel, number, range, date, color, search
  • Yeni öznitelikler: required, pattern, placeholder, autocomplete — tarayıcı validasyonu
  • <datalist>, <output> — autocomplete ve hesap sonucu
JavaScript API'leri (HTML5 ailesinin parçası)
  • LocalStorage, SessionStorage — cookie'siz veri saklama
  • Geolocation — konum izni iste
  • Web Workers — arka planda JS çalıştır
  • WebSocket — gerçek zamanlı iletişim
  • Drag & Drop, File API, History API
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Blog</title>
</head>
<body>
  <header>
    <h1>Teknoloji Blog</h1>
    <nav>
      <a href="/">Ana</a>
      <a href="/hakkimda">Hakkımda</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>HTML5 ile tanışın</h2>
      <time datetime="2014-10-28">28 Ekim 2014</time>
      <p>Artık <mark>anlamsal</mark> yazıyoruz.</p>
      <video src="tanitim.mp4" controls></video>
    </article>
  </main>
  <footer>© 2014</footer>
</body></html>
↑ Semantic HTML. Her bölümün bir anlamı var. Flat tasarım dönemi.
2019–?
Living Standard

Yaşayan standart

28 Mayıs 2019 · W3C ve WHATWG anlaştı · Artık versiyon numarası yok

28 Mayıs 2019'da büyük barış antlaşması: W3C ve WHATWG, "Memorandum of Understanding" imzaladı. WHATWG'nin HTML Living Standard'ı tek resmi standart oldu. W3C kendi ayrı HTML standardını üretmeyi bıraktı.

Artık "HTML 5.3", "HTML 6" yok. HTML sürekli güncellenen, canlı bir doküman: html.spec.whatwg.org. Yeni özellikler eklendikçe spec değişir, tarayıcılar implement eder.

Modern eklemeler (2015 →)
  • <dialog> — native modal, showModal() API'si (2022'de tüm tarayıcılarda)
  • <template>, <slot> — Web Components desteği
  • loading="lazy" — <img> ve <iframe> için native tembel yükleme
  • <picture>, <source> ile media, type — gelişmiş responsive
  • Yeni input tipleri + widget'lar: <input type="file" webkitdirectory>, color picker, date picker tutarlılığı
  • Accessibility öznitelikleri: ARIA entegrasyonu — aria-label, role yaygın kullanım
  • Popover API: popover özniteliği (2023-2024, tüm modern tarayıcılarda)
  • Container Queries, :has() — CSS tarafında ama HTML'in yapısal kullanımını etkiledi
Felsefi değişim

HTML artık versiyonlu bir doküman değil, bir organizma. "Hangi HTML'i öğreneyim?" sorusu artık yanlış soru. HTML Living Standard'ı öğrenirsin — ve zamanla büyür.

İki organizasyon

W3C vs WHATWG — 15 yıllık sessiz savaş

HTML'in bugün nasıl olduğunu anlamak için iki organizasyonun hikâyesini bilmek lazım.

1994 — bugün

World Wide Web Consortium

Tim Berners-Lee tarafından kuruldu. MIT, ERCIM ve Keio Üniversitesi tarafından yönetilir. Akademik, resmi, standartlar üzerinde oylamayla ilerler.

  • Kurucu: Tim Berners-Lee (1994, MIT)
  • Yaklaşım: Formal, Recommendation sürecinde oylama
  • Üye: 400+ organizasyon
  • Standartlar: HTML, CSS, SVG, WAI (erişilebilirlik), WebRTC
  • 2000'ler: XHTML 2.0 saplantısı → kriz
2004 — bugün

Web Hypertext Application Technology Working Group

W3C'nin XHTML 2'ye saplanmasından sıkılan Apple, Mozilla ve Opera 2004'te ayrı bir grup kurdu. Pragmatik, hızlı, tarayıcı üreticileri odaklı.

  • Kurucular: Apple + Mozilla + Opera (sonra Google)
  • Yaklaşım: Pragmatik, "neyi tarayıcı destekliyorsa o standarttır"
  • Lider: Ian Hickson (uzun yıllar HTML spec editor'ü)
  • Standartlar: HTML, DOM, Fetch, Streams, URL
  • Felsefe: Living Standard — versiyonsuz, sürekli güncel

28 Mayıs 2019 — Barış. W3C ve WHATWG resmi anlaşma imzaladı (Memorandum of Understanding). HTML ve DOM için WHATWG tek resmi kaynak oldu. W3C kendi HTML Review Draft'larını üretmeyi bıraktı. 15 yıllık ayrı yoldan sonra tek bir HTML.

Tarayıcı savaşları

HTML'i şekillendiren tarayıcılar

HTML'in evrimi tarayıcıların savaşıyla iç içe. Her tarayıcı kendi etiketlerini dayattı, standartlar sonradan toparladı.

1993 NCSA Mosaic İlk Grafik Tarayıcı

Marc Andreessen ve ekibi NCSA'da yazdı. İlk resim gösterebilen yaygın tarayıcı. <img> etiketi Mosaic sayesinde popüler oldu — bugün hâlâ öyle yazıyoruz.

1994 Netscape Navigator Web'i yaygınlaştırdı

Andreessen Mosaic'ten ayrılıp Netscape'i kurdu. Navigator çok hızlı yayıldı, '95-'97 arası tarayıcı pazarının %90'ını aldı. <blink>, <layer> gibi kendi etiketlerini uydurdu. JavaScript de 1995'te Netscape'te doğdu.

1995 Internet Explorer İlk savaş

Microsoft Windows 95'in Plus! paketinde IE 1.0'ı yayınladı. Mosaic kodundan lisanslıydı. Birinci tarayıcı savaşı başladı. IE kendi etiketlerini ekledi: <marquee>, <bgsound>. Netscape ve IE birbirine özel özellikler eklerken standartlar zarar gördü.

2001 Internet Explorer 6 Monopolun zirvesi

IE 6, Windows XP'nin varsayılan tarayıcısı olarak geldi. Pazarın %95'ini aldı. Microsoft rakipsiz görünce 5 yıl boyunca IE'yi geliştirmedi. Bu dönem web'in karanlık çağı: standartlara uyum berbat, geliştiriciler IE'ye özel hack'ler yazıyordu.

2004 Mozilla Firefox 1.0 İkinci savaş başlıyor

Netscape 1998'de kodunu açık kaynak yaptı (Mozilla projesi). 6 yıl sonra Firefox 1.0 çıktı. Hızlı, güvenli, sekmeli — IE 6'ya kıyasla devrim. 2008'e kadar pazarın %30'una ulaştı. Standart savaşını kazanmaya başladı.

2003 Apple Safari KHTML / WebKit

Apple KDE'nin KHTML motorundan fork'ladı, WebKit'i yarattı. 2007'de iPhone ile Safari mobile web'in temel taşı oldu.

2008 Google Chrome Oyun değişti

Google kendi tarayıcısını çıkardı. V8 JavaScript motoru rakiplerinden 10x hızlı. WebKit'i (sonra Blink'e fork etti) kullandı. 4 yıl içinde pazar lideri oldu. Hızlı güncelleme döngüsü (6 hafta) web standartlarını hızlandırdı.

2015 Microsoft Edge IE öldü

Microsoft IE'yi gömdü. Yerine EdgeHTML motorlu Edge geldi. 2020'de Microsoft kendi motorundan vazgeçip Chromium tabanlı yeni Edge'i çıkardı. Haziran 2022'de IE 11 resmi olarak kaldırıldı. 27 yıllık hikâye sona erdi.

Bugün Blink Monokültürü Tartışmalı

Chrome, Edge, Opera, Brave, Arc, Vivaldi — hepsi aynı motoru (Blink) kullanıyor. Pazarın ~%85'i Blink. Firefox (Gecko) ve Safari (WebKit) hâlâ dayanıyor ama azınlıkta. "Monopol tehlikesi" tartışması sürüyor.

Etiket arşivi

Hangi etiket, hangi versiyonda eklendi?

Her etiketin bir doğum yılı var. Bazıları ölü, bazıları hâlâ hayatta.
Arama kutusuna yazarak filtrele.

Etiket Versiyon Durum Ne işe yarar
— etiket gösteriliyor —
Hadi deneyelim

Canlı HTML editörü

Sol tarafa HTML yaz, sağ tarafta anında render edildiğini gör. Hazır örneklerden birini seç ya da sıfırdan başla.

index.html
● HTML   UTF-8   ·   LF Satır 1, Sütun 1
ÇIKTI
< ile tag önerileri açılır Ctrl+Space otomatik tamamla Tag yazınca kapanış otomatik eklenir Tab girinti
Kaynaklar

Daha derine inmek için

w3.org

W3C — A Little History

Tim Berners-Lee'nin kendi anlatımıyla web'in doğuşu.
whatwg.org

HTML Living Standard

HTML'in bugünkü resmi tanımı. Sürekli güncellenir.
developer.mozilla.org

MDN HTML Rehberi

Geliştiriciler için en güvenilir referans. Her etiket + canlı örnekler.
info.cern.ch

İlk web sayfası (restore edilmiş)

Dünyanın ilk web sayfası — CERN sunucusunda hâlâ yayında.
w3.org/TR

HTML 4.01 Specification

Aralık 1999 — hâlâ online. O dönemin ruhunu okumak için.
whatwg.org

WHATWG FAQ

"Living Standard neden iyi fikir?" sorusunun resmi cevapları.