Başlıkları Süslemek için Yazı Tiplerini, Kenarlıkları ve Resimleri Kullanın
Başlıklar çoğu web sayfasında yaygındır. Aslında, hemen hemen her metin belgesi en az bir başlığa sahip olma eğilimindedir, böylece okuduğunuz şeyin adını biliyorsunuzdur. Bu başlıklar, HTML başlık öğeleri - h1, h2, h3, h4, h5 ve h6 kullanılarak kodlanır.
Bazı sitelerde, başlıkların bu öğeleri kullanmadan kodlanmış olduğunu görebilirsiniz. Bunun yerine, başlıklar, kendilerine eklenen belirli sınıf özelliklerine veya sınıf öğelerine sahip bölümlere sahip paragrafları kullanabilir. Bu yanlış uygulama hakkında sık sık duyduğumun nedeni, tasarımcının "başlıkların görünüşünü beğenmiyor". Varsayılan olarak, başlıklar kalın harflerle gösterilir ve boyut olarak daha büyüktür, özellikle de bir sayfanın metninin geri kalanından çok daha büyük yazı tipi boyutu gösteren h1 ve h2 öğeleridir. Unutmayın, bu sadece bu unsurların varsayılan görünüşüdür! CSS ile, istediğiniz gibi başlık görünümü yapabilirsiniz! Yazı tipi boyutunu değiştirebilir, kalın ve daha fazlasını kaldırabilirsiniz. Başlıklar, bir sayfanın başlıklarını kodlamanın uygun yoludur. İşte bazı nedenler var.
DIV'lerden ve Şekillendirmeden Çok Neden Başlık Etiketlerini Kullanmalı?
Başlık Etiketleri Gibi Arama Motorları
Bu, başlıkları kullanmanın ve onları doğru sırada kullanmanın en iyi nedenidir (örn. H1, sonra h2, sonra h3, vb.). Arama motorları, başlık metninde bulunan metne en yüksek ağırlığı verir çünkü bu metne semantik bir değer vardır. Başka bir deyişle, sayfa başlığı H1'i etiketleyerek, arama motoru örümcekine bunun sayfanın # 1 odak noktası olduğunu söylersiniz. H2 başlıklarında # 2 vurgu var, vb.
Başlıklarınızı tanımlamak için hangi sınıfları kullandığınızı hatırlamak zorunda değilsiniz
Tüm Web sayfalarınızın, kalın, 2em ve sarı olan bir H1'e sahip olacağını bildiğinizde, bunu stil sayfanızda bir kez tanımlayıp tamamlayabilirsiniz. 6 ay sonra, başka bir sayfa eklediğinizde, sayfanızın başına bir H1 etiketi eklersiniz. Ana sayfayı tanımlamak için hangi stil kimliğini veya sınıfını kullandığınızı öğrenmek için diğer sayfalara geri dönmeniz gerekmez. başlık ve alt başlıklar.
Güçlü Bir Sayfa Anahat Sağlıyorlar
Anahatlar metni okumayı kolaylaştırır. Bu yüzden çoğu ABD okulu, öğrencileri kağıda yazmadan önce bir taslak yazmalarını öğretti. Başlık etiketlerini anahat biçiminde kullandığınızda, metniniz çok hızlı görünen net bir yapıya sahiptir. Ayrıca, bir özet sağlamak için sayfa anahatlarını inceleyebilen araçlar vardır ve bunlar anahat yapısı için başlık etiketlerine dayanır.
Sayfanız Çıkarılan Stillerde bile Mantıklı Olur
Herkes stil sayfalarını görüntüleyemez veya kullanamaz (ve bu da # 1'e geri döner - arama motorları sayfanızın içeriğini (metinlerini) görüntüler, stil sayfalarını değil). Başlık etiketlerini kullanırsanız, başlıklarınızı DIV etiketinin vermeyeceği bilgileri sağladığı için sayfalarınızı daha erişilebilir hale getiriyorsunuz.
Ekran Okuyucular ve Web Sitesi Erişilebilirliği İçin Faydalıdır
Başlıkların doğru kullanımı, bir belgeye mantıksal bir yapı oluşturur. Bu, ekran okuyucularının bir siteyi görme bozukluğu olan bir siteye "okumak" için kullanacakları ve sitenizi engelli kişiler için erişilebilir kılacak şeydir.
Başlıkların Metin ve Yazı Stilini Stil Edin
Başlık etiketlerindeki "büyük, cesur ve çirkin" sorundan uzaklaşmanın en kolay yolu, metni, onların görünmesini istediğiniz şekilde biçimlendirmektir. Aslında, yeni bir web sitesinde çalışırken, genellikle paragraf, h1, h2 ve h3 stillerini ilk olarak yazarım. Ben genellikle sadece yazı tipi ailesi ve boyutu / ağırlığı ile sopa. Örneğin, bu yeni bir site için bir ön stil sayfası olabilir (bunlar kullanılabilecek örnek stillerdir):
vücut, html {margin: 0; dolgu malzemesi: 0; } p {font: 1em Arial, Cenevre, Helvetica, sans-serif; } h1 {font: kalın 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Cenevre, Helvetica, sans-serif; }Başlığınızın yazı tiplerini değiştirebilir veya metin stilini veya hatta metin rengini değiştirebilirsiniz . Bunların hepsi "çirkin" başlığınızı daha canlı ve tasarımınıza uygun hale getirecek.
h1 {font: kalın italik 2em / 1em "Times New Roman", "MS Serif", "New York", serif; kenar boşluğu: 0; dolgu malzemesi: 0; renk: # e7ce00; }Sınırlar Headlines Up Headlines
Sınırlar, başlıklarınızı iyileştirmenin harika bir yoludur. Ve sınırları eklemek kolaydır. Ancak sınırları denemeyi unutmayın - başlığınızın her bir tarafına sınır gerekmez. Ve sadece düz sıkıcı sınırlardan daha fazlasını kullanabilirsiniz.
h1 {font: kalın italik 2em / 1em "Times New Roman", "MS Serif", "New York", serif; kenar boşluğu: 0; dolgu malzemesi: 0; renk: # e7ce00; kenarlık: katı # e7ce00 ortamı; kenar-alt: noktalı # e7ce00 ince; genişlik: 600 piksel; }Bazı görsel görsel stilleri tanıtmak için örnek başlığımın üst ve alt kenarlıklarını ekledim. İstediğiniz tasarım stiline ulaşmak istediğiniz herhangi bir şekilde sınırları ekleyebilirsiniz.
Daha fazla Pizazz için Başlıklarınıza Arka Plan Görüntüleri Ekleme
Birçok Web sitesinin, sayfanın üst kısmında, genellikle site başlığı ve bir grafik olmak üzere bir başlık içeren bir başlık bölümü vardır. Çoğu tasarımcı, bunu iki ayrı unsur olarak düşünür, ancak zorunda değilsiniz. Eğer grafik sadece başlığı süslemek için varsa, o zaman neden başlık stillerine eklemiyorsunuz?
h1 {font: kalın italik 3em / 1em "Times New Roman", "MS Serif", "New York", serif; arka plan: #fff url ("fancyheadline.jpg") tekrar-x alt; dolgu malzemesi: 0.5em 0 90px 0; metin hizalaması: merkez; kenar boşluğu: 0; kenar-alt: katı # e7ce00 0.25em; renk: # e7ce00; }Bu başlığın hilesi, resmimin 90 piksel uzunluğunda olduğunu bilmem. Bu yüzden 90px'lik başlığın altına dolgu ekledim (doldurma: 0,5 0 90px 0p;). Başlığın metnini tam olarak istediğiniz yerde göstermek için kenar boşlukları, çizgi yüksekliği ve dolgu ile oynayabilirsiniz.
Görüntüleri kullanırken hatırlamanız gereken bir şey, ekran boyutlarına ve cihazlara göre değişen bir düzen ile uyumlu bir web siteniz varsa (ki bunu yapmanız gerekir), başlığın her zaman aynı boyutta olmayacağıdır. Başlığınızın tam boyutta olması gerekiyorsa, bu sorunlara neden olabilir. Genelde arka plan resimlerini bazen manşetlere benzememenin nedenlerinden biri olarak görüyorum.
Başlıklardaki Görüntü Değiştirme
Bu, Web tasarımcıları için bir başka popüler tekniktir çünkü grafiksel bir başlık oluşturmanıza ve başlık etiketinin metnini bu görüntüyle değiştirmenize izin verir. Bu, web tasarımcılarının antika uygulamalarının çok az sayıda yazı tipine erişebildiğini ve işlerinde daha egzotik yazı tipleri kullanmak istediğini söylüyor. Web yazı tiplerinin yükselişi tasarımcıların sitelere nasıl yaklaştıklarını gerçekten değiştirdi. Artık başlıklar, artık gömülü olan yazı tipleriyle artık çok çeşitli yazı tiplerinde ve resimlerde ayarlanabilir. Bu nedenle, daha modern uygulamalarda henüz güncellenmemiş eski sitelerin başlıkları için yalnızca CSS görsellerinin yerini alacaksınız.
Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 9/6/17 tarihinde düzenlenmiştir