XHTML Yapısallaştırma 1: XHTML ile Web Sitesi Yeniden Yapılandırma

Bu bölüm için yazdığımız başlık, 'XHTML: Basit Kurallar, Kolay Yönergeler' olmuştur. Neden mi? Bu bölümde tartışılan kurallar ve yönergeler basit ve kolaydır. İkincisi, basit ve kolay bir WEB tasarım kitabı, süpermarketlerdeki yeni ücretsiz ürünler gibi, yaygın olmasına rağmen dikkat çekici olabilir ve insanların ilgisini çekebilir, insanları denemeye teşvik edebilir.

Bu bölümün içeriğinin sizi heyecanlandırmayı ve sizi denemeye teşvik etmeyi umuyorum. Neden bu kadar umutluyum? Çünkü bu bölümde yer alan basit ve kolay anlaşılır fikirleri öğrendiğinizde, web sayfalarının nasıl çalıştığını yeniden düşünmeye başlayacaksınız ve onları oluşturma yöntemlerinizi değiştirmeye başlayacaksınız. Ancak, sadece kodları yeniden yazdığınızı ummuyorum. Gerçekten de farklı bir şekilde düşünmek ve çalışmayı umuyorum.

Diğer yandan, yeniden yapılandırma XHTML'in gerçek anlamıdır.

Bu bölümde, yapılandırılmış etiket mekanizmasını ve anlamını inceleyeceğiz. Web standartlarını geliştirme projelerine entegre etmeyi planlıyorsanız, bu bölümün içeriği sizi biraz tanıdık gelebilir. Ancak, bu konudaki uzmanlar bile bu bölümde beklenmedik kazançlar bulabilir.

XHTML Kuralları Özeti

Geleneksel HTML'yi XHTML 1.0'a dönüştürmek hızlı ve ağrısızdır, yalnızca bazı basit kurallar ve kolay yönergelerle dikkat ederseniz. HTML kullanmış olup olmadığınıza bakmaksızın, XHTML kullanmanızı engellemeyecektir.

  • Uygun belge türü bildirimi ve alan adını kullanın
  • İçeriğinizi belirtmek için meta elementi kullanın
  • Tüm elementleri ve özellikleri küçük harflerle yazın
  • Tüm özellik değerlerine çift tırnak ekleyin
  • Tüm özelliklere değer atayın
  • Tüm etiketleri kapatın
  • Boş etiketleri boşluk ve çizgili olarak kapatın
  • Yorumlarda çift alt çizgi yazmayın
  • Küçük kümesi ve ve işaretini < ve & olarak belirleyin

Unicode ve diğer karakter kümesi

XML, XHTML ve HTML 4.0 belgelerinin varsayılan karakter kümesi Unicode'dır, bu bir Unicode Birliği tarafından tanımlanan standarttır. Unicode, her karaktere belirli bir benzersiz numara sağlayan kapsamlı bir karakter kümesidir, ne platform, ne program ne de dil. Unicode, bir alfabedir, bir harf haritasıdır, bir numara haritasıdır.

Unicode, web belgelerinin varsayılan karakter kümesidir, ancak geliştiriciler, daha uygun diğer karakter kümeslerini serbestçe seçebilirler. Örneğin, ABD ve Batı Avrupa siteleri genellikle ISO-8859-1 (Latin-1) kodlamasını kullanırken, Çin Halk Cumhuriyeti'nin ulusal standartı gb2312'dir.

Belgeyi temsil için işaretlemek, değil tarz için

Unutmayın: Lütfen en fazla CSS kullanarak düzenlemeyi yapın. Web standartları dünyasında, XHTML işaretleri, temsille ilgilidir, sadece belge yapıyla ilgilidir.

İyi yapılandırılmış belgeler, cebinizdeki cihazlardan modaya uygun masaüstü grafik tarayıcılar kadar çeşitli tarayıcılara en fazla anlamı iletmektedir. İyi yapılandırılmış belgeler, eski tarayıcılar veya kullanıcıların CSS'yi kapattığı modern tarayıcılar da dahil olmak üzere, kullanıcıya görselleştirilmiş anlamı iletmektedir.

Her site hemen HTML tablo düzeninden kurtulamıyor. CSS'nin mucidi W3C, 2002 Kasım ayına kadar resmi web sitesini CSS düzenine dönüştürdü. Ancak, ısrarcı standart yanlısı kişiler bile, en azından XHTML 1'de, görüntüyü yapıdan tamamen ayırmakta zorlanıyordu. Ancak şimdi, temsilatı yapıdan ayırarak (ya da veriyi tasarımdan), (karmaşık geleneksel düzenler bile) bu işlemden fayda görebilir hale geldik.

Aşağıdaki ipuçları, daha yapılandırılmış bir şekilde düşünmenize yardımcı olabilir:

Özet içindeki renkler

Dil okulunda çoğumuzun standart özet formatını kullanarak makale yazmaya zorlandığı bir dönemdeyiz. Şimdi, tasarımcılar olarak, özetin sınırlarından özgürce kurtulabilir ve (belki tanıtım broşürlerimiz ve ticari sitelerimiz o kadar benzersiz ve kişisel değilse de) benzersiz bireysel ifade serbest alanına atlayabiliriz. Ancak en azından özetle ilgili sorunlarla karşı karşıya kalmayacağız.

Aslında, HTML'e göre, içerik yapılandırmasını organize edilmiş seviyelere dönüştürmeliyiz. CSS'yi desteklemeyen tarayıcılar döneminde, aynı anda satışa sunulacak düzeni sağlarken bu işlemi yapamadık. Ancak bugün, tasarımlarımızı eksiksiz olarak uygularken, iç yapı olarak iyi durumda olan belgeler sunma yeteneğimize sahibiz.

Ağ için kullanılacak metni işaretlerken veya mevcut bir metin belgesini web sayfasına dönüştürürken, geleneksel özetin bu girişlerini düşünün.

我的主题


介绍性文字


补充性的观点


相关文字

同时，避免使用已被废弃的 HTML 元素比如 ，或者无语义的元素比如
，来模拟其实不存在的逻辑结构。

比如，不要像这样做：

我的主题

介绍性文字


补充性的观点

相关文字

根据它们的意义使用元素，而不是根据它们的外观

我们中一些人已经陷在了一个坏习惯中，当我们仅仅需要一个大号字的文本时使用h1，或者在我们需要在前面加一个圆点符号时使用 li。就像我们在前面的章节讨论过的，浏览器一直都习惯于将设计属性强加于 HTML 元素之上。我们都一直习惯于认为，h1 意味着大号字，而li意味着圆点，或者 blockquote 意味着文本缩进。我们中的大多数人还在使用结构化元素模拟表现效果的方式来胡乱地写作 HTML。

同样地，假如设计师希望所有的标题使用相同的字号，她会将所有的标题设置为 h1，即使这么做毫无结构化语义可言。

这是主标题，在我将文本按照提纲格式组织的情况下。


这不是主标题，但是我希望它与上面的标题使用一样的字体，但是我不知该如何使用CSS。


这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体，以达到我希望的，
如果我了解CSS，就可以在不打乱文档结构的情况下达到这个设计。

我们必须把我们的小把戏放到一边，然后开始根据元素的语义来使用它们，而不是根据它们看上去的样子。实际上，h1可以成为你希望的任何样子。通过 CSS，h1 可以成为非粗体的小号的罗马字体，而 p 文本可以成为粗体的大号字，li 也可以没有圆点（你或者可以使用小猫小狗或者公司标志的 PNG,GIF 或者 JPEG 图片取而代之）等等。

Bugün itibarıyla, elementlerin görünümünü belirlemek için CSS kullanmaya başlayacağız. Ayrıca, elementlerin sayfada veya sitedeki konumuna göre görünümünü değiştirebiliriz. CSS, yapısından tamamen ayrı tutulabilir ve herhangi bir elementi istediğiniz tarzda biçimlendirmenize olanak tanır.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	}

Bunu neden yapıyorsunuz? Bu, grafik tarayıcılar için markalı bir görünüm ve his alırken, metin tarayıcıları, mobil cihazlar, HTML formatlı e-postalar, belge yapısının korunmasını sağlamak içindir.

XHTML hakkında daha fazla CSS tekniklerinden bahsetmek istemiyoruz. Sadece belge yapısı ve görsel ifade arasında iki tamamen farklı şeyin olduğunu ve yapılandırılmış elementlerin metni dönüştürmek için, gösterim etkilerini zorlamak için kullanılması gerektiğini göstermek istiyoruz.

Anlamlı yapısal elementler kullanın, anlamsız atık yerine

HTML ve XHTML'nin yapılandırılmış anlamı iletilmek için kullanıldığını unuttuğumuz veya根本不知道, birçok HTML tartışmacısı bu etiketleri listeleri eklemek için kullanır:

Birinci proje<br />
İkinci proje<br />
Üçüncü proje<br />

Sıralı veya sırasız listeleri kullanmayı düşünün:

<ul>
<li>Birinci proje</li>
<li>İkinci proje</li>
<li>Üçüncü proje</li>
</ul>

"Ama li bana bir nokta veriyor, ama nokta gerekmiyor!" der gibi bir şey söylenebilir. Yukarıdaki bölüme göre, CSS elementlerin beklendiği görüntü hakkında herhangi bir varsayım yapmaz. Size beklediğiniz element görünümünü söylemenizi bekler. Kapanış noktası, CSS'nin en temel yeteneklerinden biridir. Listelerin sıradan metinle aynı görünmesini sağlama yeteneğine sahiptir ve listeleri tamamen ters çevirerek grafik navigasyon panelleri gibi görünmesini sağlayabilir.

Bu yüzden, listeleri işaretlemek için liste elemanlarını kullanın. Benzer şekilde, b yerine strong, i yerine em kullanın, vb. Çoğu masaüstü tarayıcı'nın varsayılan durumunda, strong'un görüntülenmesi b ile aynıdır, em ve i ile aynı, ve belge yapısını bozmadan beklediğiniz görsel etkileri oluşturabilirsiniz.

CSS herhangi bir elemanın görüntüsü hakkında bir varsayım yapmaz, ancak tarayıcılar birçok varsayım yapar ve strong'u kalın harf olmayan başka bir efektle gösteren bir tarayıcıya rastlamadık (daha farklı bir şekilde gösterilmesi için tasarımcı tarafından oluşturulan CSS yönergeleri dışında). Eğer bilinmeyen bir tarayıcının strong'u kalın harf olarak göstermeyeceğinden endişeleniyorsanız, şu gibi bir CSS kuralı yazabilirsiniz:

strong {
	font-weight: bold;
	font-style: normal;
	}

Görsel Elemanlar ve Yapı

Web standartları, kullanacağımız teknolojiyi sadece değil, bu teknolojileri kullanma şeklimizi de gerektirir. Markaları yazarken XHTML kullanmak ve bir kısmı veya tamamını CSS ile işlemek, siteyi daha kullanışlı ve hafif hale getirmeyi veya ne kadar band genişliğini tasarruf etmek zorunda değil, aynı zamanda. Erken kullanılan teknolojiler gibi, XHTML ve CSS de yanlış veya aşırı kullanılabilir. Uzun XHTML ve uzun HTML gibi, kullanıcıların band genişliğini ve zamanını boşa harcayabilir. Uzun aşırı CSS de tamamen performans HTML kodunu değiştiremez; bu sadece kötü bir şeyin başka bir şeyle değiştirilmesi anlamına gelir.