Web dünyasına adım atarken karşılaşacağınız ilk ve en temel soru, web sayfalarının iskeletini oluşturan Html Nasıl Yapılır? sorusudur. HTML (HyperText Markup Language - Hiper Metin İşaretleme Dili), internetteki tüm web sitelerinin temel yapı taşıdır ve tarayıcılara içeriğin nasıl görüntüleneceğini söyler. Bu kapsamlı eğitim rehberinde, sıfırdan başlayarak tarayıcınızda çalışan modern ve standartlara uygun bir HTML sayfasını adım adım nasıl oluşturacağınızı öğreneceksiniz.

Bu makale, web geliştirme yolculuğuna yeni başlayanlar, web tasarımcıları ve kodlama dünyasında sağlam bir temel atmak isteyen herkes için hazırlanmıştır. Rehber boyunca öğreneceğiniz teknikler, 2026 yılının modern web standartlarına (HTML5) uygun, erişilebilir ve arama motoru dostu (SEO uyumlu) kodlama pratiklerini içermektedir. Adımları sırasıyla takip ederek ve kod örneklerini kendi bilgisayarınızda deneyerek HTML yazmayı kolayca öğrenebilirsiniz.

HTML öğrenmek, sadece kod yazmaktan ibaret değildir; aynı zamanda tarayıcıların (Chrome, Firefox, Safari vb.) web sayfalarını nasıl yorumladığını anlamaktır. Bu rehberin sonunda, kendi web sayfalarınızı tasarlayabilecek, formlar oluşturabilecek, görseller ve bağlantılar ekleyebilecek ve modern semantik (anlamsal) etiketleri kullanarak profesyonel bir web yapısı kurabileceksiniz.

Ön Hazırlık ve Gereksinimler

HTML yazmaya başlamak için karmaşık veya ücretli yazılımlara ihtiyacınız yoktur. Bilgisayarınızda halihazırda bulunan basit bir metin düzenleyici bile işinizi görebilir. Ancak, daha hızlı kod yazmak, hataları anında görmek ve modern standartları yakalamak için profesyonel araçlar kullanmanız önerilir.

HTML geliştirmek için ihtiyacınız olan temel araçlar şunlardır:

• Kod Editörü (IDE): Kodlarınızı yazmak ve düzenlemek için Visual Studio Code (VS Code), Sublime Text veya Atom gibi modern bir editör kullanmalısınız. Bu rehberde, sunduğu geniş eklenti desteği ve popülerliği nedeniyle VS Code kullanılması tavsiye edilmektedir.
• Modern Web Tarayıcısı: Yazdığınız kodları test etmek için Google Chrome, Mozilla Firefox, Microsoft Edge veya Safari gibi güncel bir tarayıcıya ihtiyacınız vardır. Tarayıcıların "Öğeyi Denetle" (Developer Tools) özelliği, kodlarınızı test etmede en büyük yardımcınız olacaktır.
• Live Server Eklentisi: VS Code kullanıyorsanız, yazdığınız kodların tarayıcıda anlık olarak güncellenmesini sağlayan "Live Server" eklentisini kurmanız, çalışma hızınızı büyük ölçüde artıracaktır.

Bu araçları hazırladıktan sonra, bilgisayarınızda "web-projem" adında yeni bir klasör oluşturun. Bu klasör, tüm HTML dosyalarınızı ve görsellerinizi barındıracak ana çalışma alanınız olacaktır.

Önemli Güvenlik Uyarısı: HTML dosyalarınızı oluştururken dosya adlarında Türkçe karakterler (ç, ğ, ı, ö, ş, ü), boşluk veya özel karakterler kullanmaktan kaçının. Dosya isimlerini her zaman küçük harflerle ve kelimeler arasına tire (-) koyarak yazın. Örneğin; "hakkimizda.html" veya "iletisim-formu.html" doğru adlandırma biçimleridir.

Adım 1: İlk HTML Dosyasını Oluşturma ve Temel Yapı

HTML yazmanın ilk adımı, tarayıcının tanıyabileceği bir dosya oluşturmaktır. Kod editörünüzü açın, yeni bir dosya oluşturun ve bu dosyayı index.html adıyla kaydedin. "index" ismi, web sunucularının bir klasöre girildiğinde otomatik olarak aradığı ve ilk yüklediği varsayılan ana sayfa adıdır.

Bir HTML belgesinin çalışabilmesi için belirli bir standart iskelete sahip olması gerekir. Bu iskelet, tarayıcıya belgenin türünü, dilini ve karakter kodlamasını bildirir. Aşağıdaki kod bloğu, modern bir HTML5 belgesinin sahip olması gereken en temel yapıyı göstermektedir.

    
    
    İlk HTML Sayfam - Kod Rehberi


    
    
Merhaba Dünya! İlk HTML sayfam başarıyla çalışıyor.

Yukarıdaki kod bloğunda yer alan her bir etiketin (tag) hayati bir görevi vardır. Şimdi bu etiketlerin ne işe yaradığını ve neden kullanıldığını detaylıca inceleyelim:

• : Tarayıcıya bu belgenin modern HTML5 standartlarında yazıldığını bildirir. Bu satırın eksik olması, tarayıcının sayfayı "uyumluluk modunda" (quirks mode) açmasına ve tasarım hatalarına yol açabilir.
• : Sayfanın ana dilinin Türkçe olduğunu belirtir. Arama motorları ve ekran okuyucu yazılımlar bu niteliği kullanarak sayfayı doğru şekilde indeksler ve seslendirir.
• : Sayfa hakkında teknik bilgilerin (meta veriler, başlık, CSS dosyaları vb.) yer aldığı, tarayıcıda doğrudan görünmeyen teknik bölümdür.
• : Sayfanın karakter kodlamasını UTF-8 olarak ayarlar. Bu ayar, Türkçe karakterlerin (ş, ğ, ç, ı, ö, ü) tarayıcıda bozulmadan, düzgün bir şekilde görüntülenmesini sağlar.
• : Sayfanın mobil cihazlar ve tabletlerle tam uyumlu (responsive) olarak ölçeklenmesini sağlar. Mobil öncelikli modern web tasarımının en kritik etiketidir.
• : Tarayıcı sekmesinde ve Google arama sonuçlarında görünecek olan sayfa başlığını tanımlar.
• : Web sayfasını ziyaret eden kullanıcıların göreceği tüm metinler, görseller, videolar ve formlar bu etiketin içerisine yazılır.

Bu kodu test etmek için index.html dosyasını kaydedin ve üzerine çift tıklayarak herhangi bir web tarayıcısında açın. Ekranda temiz bir beyaz arka plan üzerinde "Merhaba Dünya! İlk HTML sayfam başarıyla çalışıyor." yazısını göreceksiniz.

Adım 2: Metin Biçimlendirme ve Başlık Etiketleri Kullanımı

Web sayfalarında içeriğin hiyerarşik bir düzen içinde sunulması, hem kullanıcı deneyimi hem de SEO (Arama Motoru Optimizasyonu) açısından son derece önemlidir. HTML, başlıkları yapılandırmak için 1'den 6'ya kadar derecelendirilmiş başlık etiketleri sunar.

Aşağıdaki örnekte, başlık etiketlerinin hiyerarşik kullanımını ve metinleri biçimlendirmek için kullanılan temel paragraf ve vurgu etiketlerini görebilirsiniz.

HTML ile Metin Biçimlendirme Nasıl Yapılır?
Web sayfalarında paragraflar oluşturmak için p etiketini kullanırız. Paragraflar, metinlerin düzenli görünmesini sağlar.

Önemli Metinleri Vurgulama Yöntemleri
Bir kelimenin veya cümlenin çok önemli> olduğunu belirtmek için strong etiketini kullanırız. Bu etiket metni kalınlaştırır.
Eğer bir kelimeye hafif bir vurgu> veya italik görünüm kazandırmak istiyorsak em etiketini tercih ederiz.

Yukarıdaki kod yapısında dikkat edilmesi gereken en önemli kural, başlık etiketlerinin sırasıdır. Bir sayfada ana başlık olarak yalnızca bir adet

kullanılmalıdır. Alt başlıklar ise önem sırasına göre

Adım 3: Görsel ve Bağlantı (Link) Ekleme Nasıl Yapılır?

İnternetin temelini oluşturan en önemli özellik, sayfaların birbirine köprülerle (bağlantılarla) bağlı olmasıdır. HTML'de bağlantı oluşturmak için (anchor) etiketi, görsel eklemek için ise

(image) etiketi kullanılır.

Aşağıdaki kod örneğinde, harici bir web sitesine yönlendirme yapan güvenli bir bağlantı yapısı ile sayfaya optimize edilmiş bir görsel ekleme yöntemi gösterilmiştir.

Bağlantılar ve Görsel Ekleme Uygulaması

Daha fazla bilgi edinmek için W3C Resmi Web Sitesi adresini ziyaret edebilirsiniz.

Aşağıda, modern web standartlarına uygun olarak eklenmiş bir eğitim görseli yer almaktadır:

Bu kod bloğundaki kritik parametreleri ve güvenlik önlemlerini inceleyelim:

• href: Bağlantının yönlendirileceği hedef URL adresini belirtir.
• target="_blank": Bağlantının yeni bir tarayıcı sekmesinde açılmasını sağlar.
• rel="noopener noreferrer": Güvenlik açısından kritik bir niteliktir. Yeni sekmede açılan dış sitenin, sizin sitenizin tarayıcı geçmişine ve performansına müdahale etmesini (reverse tabnabbing saldırılarını) engeller.
• src: Görsel dosyasının bilgisayarınızdaki yolunu (path) veya internet üzerindeki doğrudan adresini belirtir.
• alt: Görselin neyi ifade ettiğini açıklayan alternatif metindir. Görsel yüklenemediğinde bu metin görünür. Ayrıca arama motorları görseli bu metinle anlar ve ekran okuyucular bu metni seslendirir.
• loading="lazy": Görselin yalnızca kullanıcı ekranı kaydırıp görsele yaklaştığında yüklenmesini sağlar. Sayfa açılış hızını ciddi oranda artıran modern bir performans özelliğidir.

Adım 4: Liste ve Tablo Yapıları ile Veri Düzenleme

Verileri düzenli gruplar halinde sunmak veya tablolar halinde organize etmek, web sayfalarının okunabilirliğini artırır. HTML'de listeler sırasız (noktalı) ve sıralı (numaralı) olmak üzere ikiye ayrılır. Tablolar ise satır ve sütun ilişkilerini göstermek için kullanılır.