HTML Örnekleri
- Önceki Sayfa HTML5 SSE
- Sonraki Sayfa HTML Testi
HTML temel etiket örnekleri
- Basit bir HTML dosyası
- Bu örnek, mümkün olduğunca az HTML etiketi kullanan çok basit bir HTML dosyasıdır. Tarayıcı tarafından body elementindeki içeriğin nasıl gösterildiğini size gösterir.
- Basit paragraf
- Bu örnek, paragraf elementindeki metnin tarayıcı tarafından nasıl gösterildiğini gösterir.
- Daha fazla paragraf
- Bu örnek, paragraf elementlerinin bazı öntanımlı davranışlarını gösterir.
- Şiir sorunu
- Bu örnek, HTML formatlama bazı sorunlarını gösterir.
- Satır kesme
- Bu örnek, HTML belgesinde satır kesme kullanımını gösterir.
- Başlık
- HTML belgesinde başlıkların nasıl görüneceğini gösterir.
- Ortada yerleştirilmiş başlık
- Bu örnek, ortada yerleştirilmiş bir başlık gösterir.
- Yatay çizgi
- Bu örnek, nasıl bir yatay çizgi ekleyeceğinizi gösterir.
- Gizli yorum
- HTML kaynak koduna nasıl gizli yorum ekleyeceğinizi gösterir.
- Arka plan rengi
- Bu örnek, HTML sayfasına nasıl arka plan rengi ekleyeceğinizi gösterir.
HTML metin biçimlendirme örneği
- Metin biçimlendirme
- HTML dosyasında nasıl metin biçimlendireceğinizi gösterir.
- Ön biçimlendirme metni
- pre etiketini kullanarak nasıl boş satırları ve boşlukları kontrol edeceğinizi gösterir.
- "Bilgisayar çıktısı" etiketleri
- Farklı "bilgisayar çıktısı" etiketlerinin nasıl görüneceğini gösterir.
- Adres
- HTML dosyasında nasıl adres yazılacağını gösterir.
- Kısaltmalar ve baş harf kısaltmaları
- Kısaltmalar ve baş harf kısaltmaları nasıl oluşturulur
- Metin yönü
- Metin yönünü nasıl değiştireceğinizi gösterir.
- Düzyazı alıntı
- Uzunluk farklı olan alıntıları nasıl oluşturulacağını gösterir.
- Silme etkisi ve ekleme etkisi
- Bu örnekte, nasıl silme ve ekleme metinlerini işaretleneceğini gösterir.
HTML bağlantısı örneği
- Süper bağlantı oluşturma
- Bu örnek, HTML belgesinde nasıl bağlantı oluşturulacağını gösterir.
- Resmi bağlantı olarak kullanma
- Bu örnek, nasıl bir resmi bağlantı olarak kullanacağınızı gösterir.
- Yeni tarayıcı penceresinde bağlantı açma
- Bu örnek, bir sayfayı yeni bir pencerede açarak nasıl ziyaretçilerin sitenizi terk etmeksizin bağlantıya ulaşabileceğini gösterir.
- Aynı sayfanın farklı yerlerine bağlantı kurma
- Bağlantıların sayfanın farklı yerlerine nasıl bağlanacağını gösterir.
- Çerçeveden çıkma
- Bu örnek, sayfanız çerçeve içinde sabitlenmişse, çerçeveden nasıl çıkılacağını gösterir.
- E-posta bağlantısı oluşturma
- Bu örnek, nasıl bir e-postaya bağlantı kurulacağını gösterir. (Bu örnek, e-posta istemci programı kurulduktan sonra çalışır.)
- E-posta bağlantısı oluşturma 2
- Daha karmaşık e-posta bağlantılarını nasıl oluşturacağınızı gösterir.
HTML çerçeve örneği
- Dikey çerçeve
- Bu örnek, üç farklı belge kullanarak nasıl bir dikey çerçeve oluşturulacağını gösterir.
- Yatay çerçeve
- Bu örnek, üç farklı belge kullanarak nasıl bir yatay çerçeve oluşturulacağını gösterir.
- <noframes> etiketini nasıl kullanılır
- Bu örnek, <noframes> etiketini nasıl kullanacağınızı gösterir.
- Karışık çerçeve yapısı
- Bu örnek, üç belge içeren bir çerçeve yapısını nasıl oluşturacağınızı ve onları satır ve sütun içinde karıştırarak nasıl yerleştireceğinizi gösterir.
- noresize="noresize" özelliğine sahip çerçeve yapısı
- Bu örnek, noresize özelliğini gösterir. Bu örnekte, çerçeve boyutlandırılamaz. Çerçeve arasındaki çerçevelerin kenarlarında fareyi sürüklediğinizde, kenarların hareket ettirilemediğini fark edeceksiniz.
- Navigasyon çerçevesi
- Bu örnek, nasıl navigasyon çerçevesi oluşturulacağını gösterir. Navigasyon çerçevesi, ikinci çerçevenin hedef olarak alındığı bir bağlantı listesini içerir. "contents.htm" adlı dosya üç bağlantı içerir.
- İç çerçeve
- İç çerçeve (HTML sayfasındaki çerçeve) nasıl oluşturulacağını gösterir.
- Çerçevede belirtilen bir bölüme nasıl geçilir
- Bu örnek, iki çerçeveyi gösterir. Bir çerçeve, diğer bir dosya içinde belirtilen bölüme yönlendirici bağlantıları içerir. Bu "link.htm" dosyasında belirtilen bölümler, <a name="C10"> ile işaretlenmiştir.
- Belirtilen bölüme çerçevelerle nasıl geçilir
- Bu örnek, iki çerçeveyi gösterir. Sol navigasyon çerçevesi, bir bağlantı listesini içerir ve bu bağlantılar ikinci çerçeveyi hedef olarak alır. İkinci çerçeve, bağlantılara yönlendirilen belgeleri gösterir. Navigasyon çerçevesindeki bağlantılar, hedef dosya içinde belirtilen bölümlere yönlendirir.
HTML tablo örneği
- Tablo
- Bu örnekte, HTML belgesinde nasıl tablo oluşturulacağını gösterir.
- Tablo kenar çizgileri
- Farklı türdeki tablo kenar çizgilerini gösterir.
- Kenar çizgisi olmayan tablo
- Kenar çizgisi olmayan bir tablo
- Tablo başlıkları(Heading)
- Bu örnek, tablo başlıklarını nasıl gösterileceğini gösterir.
- Boş hücre
- Bu örnek, içeriği olmayan hücreleri nasıl işlediğini gösterir.
- Başlık içeren tablo
- Başlık (caption) içeren bir tablo
- Satır veya sütun geçişli tablo hücreleri
- Bu örnek, satır veya sütun geçişli tablo hücrelerini nasıl tanımlanacağını gösterir.
- Tablo içindeki etiketler
- Farklı elementler içinde elementlerin nasıl gösterileceğini gösterir.
- Hücre kenar boşluğu(Cell padding)
- Hücre içeriği ile kenar çizgisi arasındaki hava boşluğunu oluşturmak için Cell padding kullanımı
- Hücre arası mesafe(Cell spacing)
- Hücre arası mesafeyi artırmak için Cell spacing kullanımı
- Tabloya arka plan renk veya arka plan görseli eklenmesi
- Tabloya arka plan renk veya arka plan görseli eklenmesi
- Tabloya arka plan renk veya arka plan görseli eklenmesi
- Bir veya daha fazla tablo hücresine arka plan eklenmesi nasıl yapılır.
- Tablo hücrelerinde içerik düzenlemesi
- Bu örnek, "align" özelliğini kullanarak hücre içeriklerini nasıl düzenleyebileceğinizi ve güzel bir tablo oluşturduğunu gösterir.
- Çerçeve(frame) özelliği
- Bu örnek, "frame" özelliğini kullanarak tabloya etrafını kontrol etmeyi gösterir.
HTML liste örneği
- Sırasız liste
- Bu örnek, sırasız listeleri nasıl gösterileceğini gösterir.
- Sıralı liste
- Bu örnek, sıralı listeleri nasıl gösterileceğini gösterir.
- Farklı türdeki sırasız listeler
- Bu örnek, bir sırasız listeyi gösterir.
- Farklı türdeki sıralı listeler
- Bu örnek, farklı türdeki sıralı listeleri gösterir.
- İç içe liste
- Bu örnek, nasıl iç içe listeler oluşturulacağını gösterir.
- İç içe liste 2
- Bu örnek, daha karmaşık iç içe listeleri gösterir.
- Tanımlama listesi
- Bu örnek, bir tanımlama listesini gösterir.
HTML form ve giriş örnekleri
- 文本域(Text fields)
- 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
- Metin alanı (Text fields)
- Bu örnek, HTML sayfasında nasıl metin alanı oluşturulacağını gösterir. Kullanıcı metin alanına metin yazabilir.
- Parola alanı
- Bu örnek, HTML'de nasıl parola alanı oluşturulacağını gösterir.
- Çift seçenek kutusu
- Bu örnek, HTML sayfasında nasıl çift seçenek kutusu oluşturulacağını gösterir. Kullanıcı çift seçenek kutusunu seçebilir veya seçebilir.
- Tek seçenek düğmesi
- Bu örnek, HTML'de nasıl tek seçenek düğmesi oluşturulacağını gösterir.
- Basit açılır menü
- Bu örnek, HTML sayfasında nasıl basit bir açılır menü kutusu oluşturulacağını gösterir. Açılır menü kutusu bir seçenek listesidir.
- Başka bir açılır menü
- Bu örnek, nasıl bir basit önceden seçili değer içeren açılır menü oluşturulacağını gösterir. (Yazarın notu: önceden seçili değer, önceden belirlenen bir tercih demektir.)
- Metin alanı (Textarea)
- Bu örnek, nasıl bir metin alanı (çok satırlı metin giriş kontrolü) oluşturulacağını gösterir. Kullanıcı metin alanına metin yazabilir. Metin alanında yazılabilir karakter sayısı sınırsızdır.
- Düğme oluşturma
- Bu örnek, nasıl düğme oluşturulacağını gösterir. Düğme üzerindeki metni özelleştirebilirsiniz.
Veri etrafında çerçeve
- Bu örnek, veri etrafına başlıklı bir çerçeve nasıl çizileceğini gösterir.
- Form örneği
- Giriş kutusu ve onay düğmesi içeren form
- Bu örnek, sayfaya nasıl form eklenirğini gösterir. Bu form iki giriş kutusu ve bir onay düğmesi içerir.
- Çift seçenek kutusu içeren form
- Bu form iki çift seçenek kutusu ve bir onay düğmesi içerir.
- Seçenek kutusu içeren form
- Bu form iki seçenek kutusu ve bir onay düğmesi içerir.
Formdan e-posta gönderme
- Bu örnek, formdan e-posta nasıl gönderileceğini gösterir.
- HTML resim örneği
- Resim ekleme
- Web sayfasında resim gösterme
- Farklı konumlardan resim ekleme
- Bu örnek, farklı klasörler veya sunuculardaki resimleri web sayfasına nasıl eklenirğini gösterir.
- Arka plan resmi
- Bu örnek, HTML sayfasına nasıl arka plan resmi eklenirğini gösterir.
- Resim yerleştirme
- Bu örnek, metin içinde resmin nasıl yerleştirileceğini gösterir.
- Kaydırma resmi
- Bu örnek, nasıl resmi paragrafın soluna veya sağına kaydırılacağını gösterir.
- Resim boyutunu ayarlama
- Bu örnek, resmin nasıl farklı boyutlara ayarlanacağını gösterir.
- Resim bağlantısı oluşturma
- Bu örnek, resmi bir bağlantı olarak nasıl kullanılacağını gösterir.
- Resim haritası oluşturma
- Bu örnek, tıklanabilir alanlar içeren bir resim haritası nasıl oluşturulduğunu gösterir. Her bir alan bir bağlantıdır.
- Resmi harita haritasına dönüştürme
- Bu örnek, normal bir resmi nasıl harita haritası olarak ayarladığını gösterir.
HTML arka plan örneği
- Düzenlenmiş arka plan ve renkler
- Arka plan ve metin rengi düzenlenmiş bir örneği, sayfadaki metni okumayı kolaylaştırır.
- Düzenlenmemiş arka plan ve renkler
- Bir Arka Plan Renkleri ve Metin Renkleri Kombinasyonu, Sayfa Metnini Okumayı Zorlaştıran Örnekler.
- Kullanılabilirlik Yüksek Arka Plan Resmi
- Arka Plan Resmi ve Metin Renkleri, Sayfa Metnini Okumayı Kolaylaştıran Örnekler.
- Kullanılabilirlik Yüksek Arka Plan Resmi 2
- Bir Diğer Arka Plan Resmi ve Metin Renkleri, Sayfa Metnini Okumayı Kolaylaştıran Örnekler.
- Kullanılabilirlik Düşük Arka Plan Resmi
- Arka Plan Resmi ve Metin Renkleri, Sayfa Metnini Okumayı Zorlaştıran Örnekler.
HTML Stili (style) Örneği
- HTML'deki Stiller
- Bu örnek, <head> bölümüne eklenen stil bilgileri ile HTML'yi nasıl biçimlendireceğinizi gösterir.
- Altı Olmayan Bağlantı
- Altı Olmayan Bir Bağlantı Yapmak İçin Styl Atama
- Harici Bir Stil Sheetse Bağlanma
- Bu örnek, <link> etiketi ile harici bir stil sheetse nasıl bağlanılacağını gösterir.
HTML Başlığı (head) Örneği
- Belgenin Başlığı
- Başlık bilgisi, tarayıcı penceresinde görüntülenmez.
- Bir target, tüm bağlantılar
- Bu örnek, tüm etiketlerin yeni bir pencerede açılmasını sağlamak için base etiketini nasıl kullanacağınızı gösterir.
HTML Meta Bilgileri (meta) Örneği
- Belge Açıklaması
- Meta öğesindeki bilgiler, HTML belgesini tanımlayabilir.
- Belge Anahtar Kelimeleri
- Meta öğesindeki bilgiler, belgenin anahtar kelimelerini tanımlayabilir.
- Yönlendirme
- Bu örnek, adres değiştirildiğinde kullanıcıyı başka bir adrese yönlendirmeyi gösterir.
HTML Betiği (Script) Örneği
- Bir Betik Ekleme
- Bu örnek, betikleri HTML belgesine nasıl ekleyeceğinizi gösterir.
- Betiği Desteklemeyen Tarayıcılar
- Bu örnek, betik desteklemeyen tarayıcılarla nasıl başa çıkılacağını gösterir.
- Önceki Sayfa HTML5 SSE
- Sonraki Sayfa HTML Testi
