Html ile Web İşlemleri 9 - Başlık Etiketleri
BAŞLIK ELEMANLARI
Sayfa gövdesinde yer alan görsel ögeler genel olarak iki kategoride sınıflandırılabilir:
• Satır içi HTML etiketleri (a, span, em vb.)
Blok HTML etiketleri; sayfada konumlandıklarında sağ ve sol taraflarında diğer ögelerin konumlanmasına izin vermezler. HTML başlık etiketleri de blok HTML etiketidir. Başlık etiketlerinden sonra eklenen ögeler bir alt satırdan devam eder. CSS kullanarak blok etiketlerinin genişlik, yükseklik, kenar boşluğu, dolgu ve kenar gibi görsel özellikleri değiştirilebilir fakat satır içi HTML etiketlerde bu değişiklikler yapılmaz.
1. <h1> - <h6> Başlık Etiketleri
Başlık etiketleri; <h1>, <h2>, <h3>, <h4>, <h5>, <h6>’dır. Başlık kelimesinin İngilizce karşılığı olan heading kelimesinin baş harfi kullanılarak oluşturulmuş anlamsal etiketlerdir. <h1> ... <h6> etiketleri HTML başlıkları tanımlamak için kullanılır. Başlık etiketleri arasında kullanılan metin altında ve üstünde otomatik oluşan boş satırlar ile diğer metinlerden ayrılır ve tek satırda gösterilir. <h1> en büyük başlığı, <h6> en küçük başlığı ifade etmek için kullanılır. Başlık etiketleri aynı rakama sahip kapama etiketi ile kullanılır.
Uygulama - 5
Başlık etiketleriyle içerik oluşturma işlemini yönergeler doğrultusunda gerçekleştiriniz.
2. Adım: <body> etiketi içine aşağıdaki başlık etiketlerini yazınız.
3. Adım: HTML belgesini kaydediniz ve tarayıcı ekranında görüntüleyiniz.
Görsel 3.10: <hx> kullanımı
<h2>Türkiye</h2>
<h3>Türkiye</h3>
<h4>Türkiye</h4>
<h5>Türkiye</h5>
<h6>Türkiye</h6>
 |
| Görsel 3.10. <hx> kullanımı |
NOT: Görsel 3.10’da ekran çıktısı verilen yukarıdaki örnekte <h1> en büyük başlığı, <h6> ise en küçük başlığı temsil eder.
2. Başlık Etiketlerinin Kullanım Sebepleri
Başlık etiketleri, görsel açıdan web içeriği ve web makalelerini daha okunaklı ve anlaşılır hâle getirir. HTML5 ile gelen HTML5 anlamsal etiketlerini kullanmak arama motorları açısından büyük önem taşır. Oluşturulan içerikleri HTML anlamsal etiketleri içinde sunmak, web sitesini indekslemeye gelen arama motorlarına içerik ile alakalı daha anlamlı bilgiler sunar.
<h1> etiketi de anlamsal etikettir. <h1> etiketi ile oluşturulan başlığın nasıl göründüğünden çok hangi anlamda bilgi sunduğu önemlidir. <h1> etiketi kullanılarak oluşturulan başlığın büyüklüğü farklı yöntemler kullanılarak da oluşturulabilir fakat arama motorları görselliği yorumlayamadığı için HTML anlamsal kodları ile sunulmalıdır.
3. Başlık Kullanımı
h başlıklar, h1’den h6’ya kadar olsa bile herhangi bir içerikte h4’ten sonraki başlıklar genellikle kullanılmaz. Gereğinden fazla alt başlık kullanımı web okuyucularının dikkatini dağıtır, bir metnin başlıklara bölünmesindeki temel amaç olan kullanıcı deneyimini olumsuz etkiler.
Görsel olarak güzel olduğu düşünülerek h1 başlığından sonra direkt h3 başlık oluşturulmamalı, bunun yerine h başlıkları anlamsal olarak kullanılmalıdır. Herhangi bir metne biçimsel özelliklerini kazandırmak için CSS kullanılmalıdır.
<h1> etiketi içine yazılan başlık, HTML sayfasının en önemli özet bilgisi olarak algılanır ve sayfada bir tane kullanılmalıdır. Alt başlıklar bu başlığı takip edecek şekilde hiyerarşik olarak kullanılır.
Sıra Sizde
Başlık etiketlerini kullanarak bir HTML belgesi oluşturunuz. Kullandığınız başlık etiketlerini arkadaşlarınızın kullandıklarıyla karşılaştırınız.
Modüler Sistem Konuları
4.2. Sayfa Dışı Bağlantı Oluşturma
Hazırlamış olduğunuz web sayfaları arasında bağlantılar tanımlayarak başka sayfalar, dokümanlar, resimler arasında geçiş yapabilirsiniz. Sayfa dışına herhangi bir bağlantı (link, köprü) oluşturmak için <a href>…</a> html etiketleri kullanılır.
Herhangi bir web sayfasına bağlantı oluşturmak;
<a href=”http://www.meb.gov.tr”> Milli Eğitim Bakanlığı</a>
“Milli Eğitim Bakanlığı”, yazısına tıkladığınız zaman “www.meb.gov.tr “ internet sitesi açılacaktır.
Hazırlamış olduğumuz site içerisinde link vermek;
<a href=”index.html”>Ana Sayfa</a>
“Ana Sayfa” yazısına tıkladığımız zaman hazırlamış olduğumuz ve bilgisayarımızda kayıtlı olan “index.html” sayfasına bağlantı oluşturulacaktır.
Herhangi bir yazıya tıkladığınız zaman resim açılması için; <a href=”okul.jpg”>Okulumuzun Resmini Görmek İçin Tıklayınız</a>
Herhangi bir dosyaya link vermek için; <a href=”portlar.pdf”>Portlar modülünü indirmek için tıklayınız…</a>
<a href=”resimler.zip”>Bilgisayarınıza indirmek için tıklayınız</a>
Target parametresini kullanarak, açılacak olan sayfa, resim veya dosyanın açılacağı pencereyi belirtebiliriz.
<a href="..." target="..." > </a>
target="_blank": Bağlantının, yeni bir pencerede açılmasını sağlar.
target="_self": Bağlantının, aynı pencere içerisinde açılmasını sağlar.
target="_top": Bağlantının, aynı pencere içerisinde en üstten itibaren açılmasını sağlar.
target="_parent" : Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerinde açılmasını sağlar.
target="çerçeve(frame) adı": Bağlantının, adı verilen çerçevede açılmasını sağlamak için kullanılır.
<a href=http://www.meb.gov.tr target=”_blank”> Milli Eğitim Bakanlığı</a>
Hiç yorum yok