Embedded Files
HTML Başlık Etiketleri
Hazırlayan: Özge GENÇ
HTML belgelerinde başlıklar (İngilizce headings kelimesinden gelir) <h1> etiketinden <h6> etiketine kadar olan başlık etiketleri ile tanımlanır.
<header> etiketi, HTML sayfası içerisinde ya da HTML sayfasının bölümlerinden herhangi birsinin içerisinde başlığın geleceği yeri belirten ögedir. bölümü içerisinde firmaya özgü logo, başlık vb. bilgilerin sıklıkla rastlandığı kısımdır.
<header>
<h1> Başlık kısmı </h1>
<img src=”logo.png”>
</header>
<h1>,<h2>…<h6> etiketi, HTML ile web sitemize başlık eklemek istediğimizde kullandığımız ögedir
HTML'de başlıklar, belgenin yapısını ve içeriğini açıklamak için kullanılan etiketlerdir.
Başlıklar sayfamızın içeriği ile ilgili hem web sitemizi ziyaret eden kullanıcılara hem de arama motorlarına bilgi verir.
Sayfanın yapısını belirlemeye yardımcı olur ve kullanıcıların içeriği hızlıca taramasına ve anlamasına olanak tanır.
İngilizcede heading yani metin başlığının kısaltması olan h harfi ve birlikte kullanıldığı rakamla ters orantılı olarak boyut kaybedecek şekilde kullanılır yani sağdaki rakam ne kadar büyükse boyut o kadar küçülür.
Varsayılan olarak, tarayıcılar başlıkları normal metinden daha büyük ve daha kalın yazı tipiyle görüntüler. Ayrıca h1 başlıklar en büyük yazı tipinde, h6 başlıklar en küçük yazı tipinde görüntülenir.
Html başlık etiketlerinin kullanımında önemli olan bu etiketlere yüklenen anlamlardır. h1 etiketi sayfanın en önemli vurgulanan başlığıdır ki sayfa 1 kere kullanılması önerilir. Örneğin h2 etiketi önem açısından bir aşağıda bulunan ve sayfada en fazla 4 kez kullanılması önerilen başlık etiketidir.
Bunlara uymamız sayfalarımızın arama motorlarında (google) çıkması açısından önemlidir. Sonuç olarak burada oluşturulan etiketlerinin font büyüklüklerini istediğimiz zaman değiştirebiliriz ama dikkat etmemiz gereken noktanın yazı boyutu değil onlara yüklenen anlamlardır.
Html başlık etiketleri h1,h2,h3,h4,h5,h6 olmak üzere 6 tanedir ve aşağıda görüldüğü gibi başlık etiketleri herhangi bir stil (yazı boyutu yazı kalınlığı gibi) uygulanmadan tarayıcıların varsayılan olarak atadıkları font büyüklükleri ile sayfada gösterilebilirler.
<!DOCTYPE html>
<html>
<body>
<h1> Başlık Seviyesi 1 </h1>
<h2> Başlık Seviyesi 2 </h2>
<h3> Başlık Seviyesi 3 </h3>
<h4> Başlık Seviyesi 4 </h4>
<h5> Başlık Seviyesi 5 </h5>
<h6> Başlık Seviyesi 6 </h6>
</body>
</html>
<hr> Etiketi:
<hr> etiketi, Bu etiket HTML belgelerinde içerikleri birbirinden ayırmak için kullanılır. Web sitemize yatayda bir çizgi oluşturur ve bu çizgi HTML belgesindeki farklı konuları birbirinden ayırmak için kullanılır.Bu etiketinde <br> etiketi gibi sonlandırıcısı yoktur. Yani bu etiket bir yorum aralığı belirtmez.Bu etiket ile tanımlanabilecek üç değişik özellik vardır. Bunlar Aşağıdaki gibidir.
Bu kod,
<hr width="100%" color="#0000F8" size="4">
sayfa genişliğinde kalın ve mavi bir çizgi çizer.
<!DOCTYPE html>
<html>
<head>
<title>Sayfa başlığı</title>
</head>
<body>
<h1>Bu sayfanın en önemli başlığı 1</h1>
<p>İçerik metni</p>
<hr>
<h2>Bu sayfadaki ikinci önemli başlık 2</h2>
<p>İçerik metni</p>
<hr>
</body>
</html>
Başlık Etiketlerine Uygulanabilecek Biçim Özellikleri:
Font(Yazı Tipi):Başlık etiketlerine kullanılan yazı tipi , sayfanın genel tasarımına uygun olmalıdır.
Yazı Boyutu : Başlık etiketlerinin boyutu ,diğer metinlerden daha büyük olmalıdır , böylece kullanıcıların önemli olduğunu anlamaları kolaylaşır. Ancak , aşırı büyük boyutlar okunabilirliği azaltabilir.
Renk: Başlık etiketlerinde kullanılan renk , sayfanın genel tasarımına uygun olmalıdır.
Stil : Başlık etiketlerinde kullanılan renk , sayfanın genel tasarımına uygun olmalıdır.
Uzaklık: Başlık etiketleri, sayfadaki diğer metinlerden yeterince uzak olmalıdır . Ayrıca zıt renkler kullanılarak başlıkların daha belirgin hale getirilmesi önemlidir.
Hiyerarşi: Sayfadaki başlık etiketleri , önem düzeylerine göre sıralanmalıdır. Bunu zaten yukarda detaylı açıklamıştık. Şimdi diğer özellikleri inceleyelim.
<h1 style="font-size: 36px; font-weight: bold; color: #333;">Bu benim en önemli başlığım</h1>
<h2 style="font-size: 30px; font-weight: bold; color: #666;">Bu benim ikinci en önemli başlığım</h2>
<h3 style="font-size: 24px; font-weight: bold; color: #999;">Bu benim üçüncü en önemli başlığım</h3>
<h4 style="font-size: 20px; font-weight: bold; color: #ccc;">Bu benim dördüncü en önemli başlığım</h4>
Bu örnekte, her başlık için style özelliği kullanılarak yazı tipi boyutu ve kalınlığı belirlenir. Ancak, bu yöntem CSS kullanmaktan daha az esnek ve yönetilebilir olabilir. CSS kullanarak tüm başlıkların stilini tek bir yerde değiştirebilirsiniz, ancak bu örnekte her başlık için ayrı ayrı stil özellikleri belirtmeniz gerekir, her başlık için farklı boyutlarda, kalınlıkta ve renkte stil özellikleri belirtilmiştir.
<h1 style="text-align: center;">Bu benim merkezde olan başlığım</h1>
<h2 style="text-align: left;">Bu benim sola hizalı başlığım</h2>
<h3 style="text-align: right;">Bu benim sağa hizalı başlığım</h3>
Bu örnekte, başlık metninin hizalanması için text-align özelliği kullanılmıştır.
<h1 style="background-color: #f1f1f1; padding: 10px;">Bu benim arka plan rengi olan başlığım</h1>
Bu örnekte, başlığın arka plan rengi ve dolgusu için background-color ve padding özellikleri kullanılmıştır.
İNTERNET
Örneğin, bir makale başlığı ve alt başlıkları için biçimlendirme özellikleri verilebilir.
Makale Başlığı: "İNTERNET"
Font (Yazı Tipi): Makale başlığı için arial yazı tipi kullanılabilir.
Yazı boyutu: Makale başlığı için 30 punto boyutu uygun olabilir.
Renk: Makale başlığı için koyu mavi renk kullanılabilir.
Stil: Makale başlığı, kalın veya italik stil seçeneklerinden biri ile vurgulanabilir.
Uzaklık: Makale başlığı, üst ve alt kenar boşlukları ile 20 piksel mesafeli bir şekilde yazılabillir.
Hiyerarşi: Makale başlığı, en önemli başlık olduğu için H1 etiketi ile işaretlenebilir.
İNTERNET
WEB TASARIM
Alt Başlık 1: "WEB TASARIM"
Font (Yazı Tipi): Alt başlık için aynı arial yazı tipi kullanılabilir.
Yazı boyutu: Alt başlık için 24 punto boyutu uygun olabilir.
Renk: Alt başlık için zümrüt yeşil renk kullanılabilir.
Stil: Alt başlık, kalın veya italik stil seçeneklerinden biri ile vurgulanabilir.
Uzaklık: Alt başlık, üst kenar boşluğu ile 10 piksel mesafeli bir şekilde yazılabilir.
Hiyerarşi: Alt başlık, makalenin en önemli alt konusu olduğu için H2 etiketi ile işaretlenebilir.
İNTERNET
WEB TASARIM
Web Tasarım Uygulamaları
Alt Başlık 2: "Web Tasarım Uygulamaları"
Font (Yazı Tipi): Alt başlık için aynı sans-serif yazı tipi kullanılabilir.
Yazı boyutu: Alt başlık için 18 punto boyutu uygun olabilir.
Renk: Alt başlık için koyu kırmızı renk kullanılabilir.
Stil: Alt başlık, kalın seçeneklerinden vurgulanabilir.
Uzaklık: Alt başlık, üst kenar boşluğu ile 10 piksel mesafeli bir şekilde yazılabilir.
Hiyerarşi: Alt başlık, makalenin önemli bir alt konusu olduğu için H3 etiketi ile işaretlenebilir.
Page updated
Report abuse