XHTML Yapılandırma 2: W3school Yapılandırılmış İsimlendirmesi Örneği

Her durumda, bu bölümü atlamayın. Bu bölümü okumak, becerilerinizi artırır, web sitenizi zayıflatır ve etiket ile tasarım arasındaki farklara daha net bir şekilde sahip olmanızı sağlar. Bu bölümdeki fikirler kolay öğrenilebilir, ancak web sitenizin performansını büyük ölçüde artırabilir ve web sitesini tasarlamak, üretmek ve güncellemek kolaylaşır.

Bu bölümde, nasıl mantıklı ve sıkı etiketler yazabileceğinizi öğrenirsiniz, bu sayede geniş bant trafiğini yaklaşık %50 azaltabilirsiniz. Sunucu yükünü ve baskısını azaltırken, web sitenizin yükleme süresini de kısaltabilirsiniz. Gereksiz görsel unsurları kaldırarak ve zararlı alışkanlıkları değiştirerek, yukarıdaki hedeflere ulaşabiliriz.

Bu kötü alışkanlıklar, ağdaki birçok web sitesini rahatsız eder, özellikle CSS kodlarını temel olarak tablolar tabanlı düzenlerle karıştıran siteler. Bu yaklaşım, deneyimli tasarımcılar için de hantal ve maliyetlidir. Ayrıca, bu sorunun ortaya çıkma olasılığı, el yazısı kodlayan sitelerle veya Dreamweaver ve GoLive gibi görüntülü düzenleme araçları kullanarak oluşturulan siteler arasında eşittir.

Bu bölümde bu yaygın hataları ortaya çıkaracağız, böylece tanıyabilir ve önleyebilirsiniz ve hataları nasıl düzeltebileceğinizi öğrenebilirsiniz. Tekil tanımlayıcı özellik (id) hakkında ayrıntılı olarak anlatıyoruz ve bu özelliğin nasıl son derece sıkı XHTML kodları yazmanızı sağladığını ve hem karışık hem de saf CSS düzenleri oluşturduğunuzda nasıl yardımcı olduğunu gösteriyoruz.

Her öge yapılandırılmalı mı?

Önceki bölümden bahsettiğimiz gibi, her öge yapılandırılabilir, CSS sayesinde sıralı veya sırasız bir liste, baştan sona navigasyon çubuğu olarak görünebilir ve ters düğme etkisi de içerir. Dokümanın içeriği, belirli yapılandırılmış özellikler aracılığıyla işaretlenebilir ve bu özellikler, web sitesi tasarımında oynadıkları semantik rolü belirtir.

2006 yılında, CodeW3C.com'un ilk Çince test sürümünü oluşturduk. İlk andan itibaren CSS ile düzen kullanmaya başladık ve belgeleri yapılandırmak için XHTML kullandık. Tüm bu öğeler yapılandırılmıştır, başlıktan listelere, paragraflara kadar. CodeW3C'in her sayfasında, evrensel etkisi olan ana sayfa düğmesi ve ikincil menü düğmesi görebilirsiniz. Aşağıda, bu iki bileşenin XHTML kodları verilmiştir:

<div id="header"><h1><a href="/">codew3c在线教程</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html dersleri">html dersleri</a></li>
<li id="x"><a href="/x.asp" title="XML dersleri">XML dersleri</a></li>
<li id="b"><a href="/b.asp" title="tarayıcı betiği">tarayıcı betiği</a></li>
<li id="s"><a href="/s.asp" title="Sunucu Betikleri">Sunucu Betikleri</a></li>
<li id="d"><a href="/d.asp" title="dot net Eğitimleri">dot net Eğitimleri</a></li>
<li id="m"><a href="/m.asp" title="Multimedya Eğitimleri">Multimedya Eğitimleri</a></li>
<li id="w"><a href="/w.asp" title="Web Sitesi Kılavuzu">Web Sitesi Kılavuzu</a></li>
</ul>
</div>

div, id ve diğer yardımcılar

Düzgün kullanıldığında, div yapılandırılmış etiketlerin iyi bir yardımcısı olabilir, id ise şaşırtıcı bir araçtır, bu araçla son derece sıkı XHTML yazabilirsiniz ve CSS'yi akıllıca kullanabilir, bu da web sitesine karmaşık ve zarif davranışlar eklemenizi sağlar.

W3C, en son XHTML2 taslağında div'yi şu şekilde tanımlar:

div ögesi, id, class ve role özellikleri ile birlikte kullanılarak, belgeye ek yapısal mekanizmalar eklemek için genel bir mekanizma sağlar. Bu öge, içeriğe tarz belirlemeyi içermez. Bu yüzden, yaratıcılar bu ögeyi tarz tablosu, xml:lang ve özellikler gibi kullanarak, XHTML'yi kendi ihtiyaçlarına ve tatlarına uyacak şekilde ayarlayabilirler.

div, division'un kısaltmasıdır. Division, bölme, alan, grup anlamına gelir. Örneğin, bir dizi bağlantıyı bir araya getirdiğinizde, belgenin bir divisionu oluşturulur.

Yapılandırma Eklenmesi için Genel Mekanizma

HTML yazan herkes paragraflar ve başlıklar gibi yaygın elementlere aşina, ancak bazıları div'e aşina olmayabilir. W3C'nin açıklamalarında div elementini anlamak için anahtar bulabiliriz, "Yapılandırma eklemek için genel bir mekanizma."

Bu sitesinin ana sayfasında, eğitim dizinini bir div içinde özlüyoruz, çünkü eğitim dizini metnin herhangi bir bileşeninin bir parçası değildir. Burada, h2 elementi her eğitim başlığını, ul liste elementi ise her eğitimin ayrıntılı listesini işaretler. Ancak, daha geniş ve daha spesifik bir anlamda, bu eğitim dizini bir yapılandırılmış rol oynar, yani ikincil navigasyon bileşeni. Bu rolü vurgulamak için navsecond bu id'yi kullanıyoruz.

<div id="navsecond">
<h2>HTML Eğitimi</h2>
<ul>
<li><a href="/html/index.asp" title="HTML Eğitimi">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML Eğitimi">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS Eğitimi">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP Eğitimi">TCP/IP</a></li>
</ul>
<h2>XML Eğitimi</h2>
<ul>
<li><a href="/xml/index.asp" title="XML Eğitimi">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL Dil">XSL</a></li>
... ...
... ...
</div>

Herhangi bir isim kullanabilirsiniz. "Gladys" ve "orangebox" tamamen XHTML isimlendirme kurallarına uygundur. Ancak, semantik (semantic) veya meta-structural (meta-structural) isimlendirme en iyisidir (yani, içindeki bileşenlerin gerçekleştirdiği işlevi açıklayan isimler).

Müşteri mavi kullanmaya karar verdiğinde, site bir kısmının

Bu nedenle, id'yi "menu", "content" veya "searchform" olarak

id'e karşı class

id özelliği XHTML için yeni değil; class özelliği veya div

<div id="searchform">Arama formu bileşenleri buraya gelecek. Bu
sayfanın bir bölümü benzersizdir.</div>
<div class="blogentry">
   <h2> Bugünkü blog yazısı</h2>
   <p> Blog içeriği buraya gelecek.</p>
   <p> Blog içeriğinin bir başka paragrafı burada.</p>
   <p> Sayfada birçok paragraf olabilir gibi, aynı şekilde
   bir blog'da birçok girdi olabilir. Bir blog sayfası
   class "blogentry" (veya diğer herhangi bir)
   class).</p>
</div>
<div class="blogentry">
   <h2>Geçen günki blog yazısı</h2>
   <p>Aslında, burada bir diğer div'in içindeyiz, sınıfı
   "blogentry."</p>
   <p> Yavru tavşanlar gibi ürerler.</p>
   <p> Bu sayfada on blog yazısı varsa,
   class="blogentry" olan on div de olabilir.</p>
</div>

Bu örnekte, searchform adlı div, arama formunu içeren sayfa bölgesini sarmak için kullanılır, div class="blogentry" ise blogdaki her makale giriş noktasını sarmak için kullanılır. Sayfada sadece bir arama formu var, bu yüzden bu tek bileşeni işaretlemek için id'yi seçtik. Ancak, blog birçok (makale) giriş noktasına sahiptir, bu yüzden bu durumda sınıf özelliği kullanılır. Aynı şekilde, haber siteleri genellikle birden fazla div kullanır, bu div'lerin sınıfları "newsitem" veya başka bir isim olabilir.

Ancak, tüm siteler div gerektirmez. Blog siteleri sadece h1, H2 ve h2 başlıkları ve <p> paragraflarını kullanabilir. Burada blogentry sınıfına sahip div'i gösteriyoruz, sitenize div doldurmayı teşvik etmiyoruz, sadece bu prensibi göstermek için. Aynı HTML belgesinde birden fazla sınıf kullanabilirsiniz, ancak id sadece bir kez kullanılabilir.

Yapışkan Etiket Teorisi

id özelliğini yapışkan etiketlere benzeterek düşünmek yardımcı olabilir. Donerinde bir yapışkan etiketle, sütunda bir yapışkan etiketle, bir müşterinin ödemesini geciktirdiğini hatırlatmak için. Ayrıca, bu ayın 15'inden önce ödeme yapmam gerektiğini hatırlatmak için defter cildi üzerine bir yapışkan etiket de var.

id, belge içindeki özel bölgeleri işaretlemek için kullanılır, hangi bölgenin özel bir işlem gerektiğini hatırlatmak için. Bu noktada, id özelliği yapışkan etiketlerle benzerdir. Special işlem için adlandırılan özel bir id kullanarak tarayıcıda birkaç kural yazmanız veya JavaScript dosyasına birkaç satır kod eklemeniz gerekebilir. Örneğin, CSS dosyanızda bazı belirli kurallar varsa, bu kurallar sadece id adı searchform olan div içindeki öğelere uygulanır.

当某一 id 属性作为一个有磁性的东西（磁铁）被用于一系列特定的 CSS 规则时，它被称为CSS选择器。有许多Seçici oluşturmayöntemleri, ancak id kolay kullanılır ve çok amaçlıdır.

id gücü

id özelliği hayret verici derecede güçlüdür. Aşağıdaki yeteneklere sahiptir:

  • Stil sheet seçicileri olarak, ince ve azaltılmış XHTML yaratmamıza olan yeteneği artırır.
  • Geçmiş name özelliğinin yerini alan hipertекст hedefi olarak.
  • DOM tabanlı betiklerden belirli elementleri belirlemek için bir yöntem olarak.
  • Nesne elementinin adı olarak.
  • Genel amaçlı işleme (genel amaçlı işleme) aracı olarak (W3C örneğinde, "HTML sayfasından veriyi veritabanına çıkarmak veya HTML belgesini diğer formatlara dönüştürmek gibi durumlarda, alan tanıma aracı olarak kullanılır.")

id kuralları

id değerleri harf veya alt çizgi ile başlamalı; rakamla başlamamalı. W3C doğrulama bu hatayı yakalayamasa da, XML çözümlücüsü yakalar. Ayrıca, JavaScript ile formda id kullanıyorsanız, id adı ve değeri geçerli bir JavaScript değişkeni olmalıdır. Boşluk ve tireler, özellikle tireler izin verilmez. Ayrıca, class veya id adlarında alt çizgi kullanmak iyi bir fikir değildir, bu da CSS2.0 (ve bazı tarayıcılar) sınırlamaları nedeniyle budur.

Anlamcası işaretler ve kullanılabilirlik

Şimdi, geniş kullanım alanına sahip XHTML elementlerini (özellikle div ve id) tartışmış olduğumuzdan, bu sitedeki ana sayfa hakkında bir örnek görelim. Öncelikle, başlık bölümündeki bu menüyü gözden geçirelim:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html dersleri">html dersleri</a></li>
<li id="x"><a href="/x.asp" title="XML dersleri">XML dersleri</a></li>
<li id="b"><a href="/b.asp" title="tarayıcı betiği">tarayıcı betiği</a></li>
<li id="s"><a href="/s.asp" title="Sunucu Betikleri">Sunucu Betikleri</a></li>
<li id="d"><a href="/d.asp" title="dot net Eğitimleri">dot net Eğitimleri</a></li>
<li id="m"><a href="/m.asp" title="Multimedya Eğitimleri">Multimedya Eğitimleri</a></li>
<li id="w"><a href="/w.asp" title="Web Sitesi Kılavuzu">Web Sitesi Kılavuzu</a></li>
</ul>
</div>

Yedi bağlantıya sahibiz ve her bir bağlantıya ilgili içeriği karşılayan bir id atanmıştır: örneğin, h adlı id HTML eğitimine karşılık gelir, benzer şekilde devam eder. Ayrıca, bu bağlantılar menu adlı liste elemanı içinde kaplıdır, menu adlı id, bu listmanın işlevini - bir menü listesi - belirtirken, daha dıştaki menufirst adlı div, sayfadaki bu bölümü (section) işaretlemek için kullanılır ve bu, içerik (maincontent), kenar çubuğu (sidebar) ve altbilgiler (footer) gibi elementlerden ayrılır.

div ve ul iki elementi, gerçek bir yapı sunar, yani içindeki içeriğin işlevini (navigasyon çubuğu) ve belgedeki konumunu (sayfanın başlık konumu) belirtir. Tam tersine, geleneksel tablo düzeni, verilerle ilgili herhangi bir semantik bilgi sağlayamaz ve kolayca üç kat band genişliği tüketir.

Bu etiketler img etiketlerini içermez, bu yüzden width, height, background veya border gibi özelliklere dahil değildir. Ayrıca, tablo hücrelerini kullanmadığı için ilgili bir dizi özellikle de ilgilidir. Oldukça temiz ve küçük, tüm anlamını anlamak için gerekli tüm bilgileri sağlar.

CSS ile birlikte kullanıldığında, bu etiketler ziyaretçilere güvenilir ve hızla yüklenen bir düzen sunar. Ayrıca, ziyaretçilere daha esnek ve çeşitli bir görünüm yaratma olasılığını da sağlar. CSS'siz bir ortamda bile, iyi yapılandırılmış etiketler, tüm içeriği karışıklık yaşamadan sunabilir.

Gözlem gücü yüksek okuyucular, a elementi içinde bulunan metnin tarayıcı tarafından gösterilmediğini fark etmiş olabilir. Bu, yapılandırılmış etiketlerle CSS'nin mükemmel uyumu sayesinde, birkaç satır CSS kuralı ile bir tetikleme mekanizması tanımlayabilmemize bağlıdır. Kullanıcılar grafik tarayıcı kullanırlarsa, güzel navigasyon düğmelerini görebilirler, kullanıcılar ise temiz metin okuyucularını kullanırlarsa, tüm metni alabilirler. Bu şekilde, tüm kullanıcılar için içerik aynıdır.

Ve, etiketlerin resim ve tablo birimlerini içermemesi nedeniyle, bu navigasyon bileşeni yapıyı değiştirmeksizin sitenin herhangi bir sayfası tarafından referans alınabilir ve farklı görsel etkilerle donatılabilir. Kısacası, kodu modülize ederek kodun tekrar kullanılabilirliğini artırdık.