โครงสร้าง XHTML แบบเข้าข้อมูล 1: การปรับเปลี่ยนเว็บไซต์ด้วย XHTML

หัวข้อที่เราเขียนขึ้นมาสำหรับบทนี้คือ：“XHTML : กฎที่ง่าย แนวทางที่ง่ายต่อตัวเอง” สาเหตุหนึ่งคือ กฎและแนวทางที่เราอธิบายในบทนี้เป็นสิ่งที่ง่ายและง่ายต่อตัวเอง สาเหตุที่สองคือ หนังสือที่ง่ายและง่ายต่อตัวเองในการออกแบบเว็บไซต์ ที่เหมือนสินค้าฟรีที่มีในตลาด แม้ว่าจะมีบ่อยครั้งแต่ก็สามารถดึงดูดความสนใจและให้ความเป็นดุลงานให้คนอื่นได้ และสร้างความสนใจให้คนอื่นที่จะพยายาม

ฉันชอบดีที่จะบอกว่าเนื้อหาของบทนี้จะสร้างความสนใจและให้ความเป็นดุลงานให้คุณ ทำไมเรียกว่านั้น มันเพราะเมื่อคุณทราบแนวทางที่ง่ายและง่ายต่อตัวเองที่บทนี้มี คุณจะต้องการที่จะคิดถึงวิธีที่เว็บไซต์ทำงาน และเริ่มเปลี่ยนวิธีที่คุณทำงาน แต่ฉันไม่ต้องการให้คุณเพียงแค่เขียนรหัสเดิมอีกครั้ง ฉันต้องการให้คุณคิดและทำงานในวิธีที่ต่างออกไป

ในทางตรงกันข้าม การปรับปรุงเป็นสิ่งที่มีความหมายของ XHTML มากที่สุด

ในบทนี้ เราจะศึกษาทฤษฎีและความหมายของการใช้แทร็กที่มีความเข้มงวด หากคุณกำลังนำมาตรฐานของเว็บไซต์เข้าสู่โครงการพัฒนาของคุณ คุณอาจจะรู้สึกว่าเนื้อหาของบทนี้มีบางส่วนที่คุณรู้แล้ว แต่แม้ว่าจะเป็นผู้เชี่ยวชาญในสาขานี้ก็จะพบกับข้อมูลที่น่าสนใจ

สรุปกฎของ XHTML

การเปลี่ยนแปลง HTML สามารถทำได้เร็วและไม่มีปัญหาเลย กับเงื่อนไขที่ง่ายและแนวทางที่ง่ายต่อตัวเอง ไม่ว่าจะใช้ HTML มาก่อนหน้านี้หรือไม่ จะไม่ขัดขวางคุณในการใช้ XHTML

  • ใช้การประกาศประเภทเอกสารและชื่อช่วงที่เหมาะสม
  • ใช้องค์ประกอบ meta ประกาศประเภทเนื้อหาของคุณ
  • ใช้ตัวอักษรเล็กเขียนทุกๆ องค์ประกอบและคุณสมบัติ
  • ใส่วางลักษณ์อักษรวรรษงในค่าของทุกๆ คุณสมบัติ
  • จัดสรรค่าแก่ทุกๆ คุณสมบัติ
  • ปิดทุกแทร็ก
  • ใช้ช่องว่างและเส้นโค้งปิดแทร็กตัวว่าง
  • ไม่ควรเขียนเส้นใต้สองขีดในหมายเหตุ
  • ใช้เลขอักษรย่อยและอักษรเอ็นดับเพื่อระบุ < และ &

Unicode และตัวอักษรตัวอื่น

XML และ XHTML และเอกสาร HTML 4.0 มีตัวอักษรตัวเดียวที่ใช้เป็นของอิสระโดยมาตรฐาน Unicode ซึ่งเป็นมาตรฐานที่ถูกกำหนดโดย Unicode Consortium

ถึงแม้ว่า Unicode จะเป็นตัวอักษรตัวเดียวที่ใช้เป็นของอิสระในเอกสารเว็บ แต่นักพัฒนายังสามารถเลือกตัวอักษรตัวอื่นที่เหมาะสมกับตน ตัวอย่างเช่น เว็บไซต์ของสหรัฐและยุโรปมักใช้ ISO-8859-1 (Latin-1) และมาตรฐานของสาธารณรัฐประชาชนจีนคือ gb2312

ทำการทำเครื่องหมายเอกสารเพื่อความหมายทางภาษา ไม่ใช่เพื่อรูปแบบ

จำเป็นต้องจดจำ: ใช้ CSS ในการจัดแบบที่สูงสุด

เอกสารที่มีโครงสร้างดีสามารถส่งมาซึ่งความหมายทางภาษาที่มากที่สุดให้กับเบราเซอร์ ไม่ว่าเบราเซอร์จะอยู่บนเครื่องคอมพิวเตอร์หรือเบราเซอร์กราฟิกที่แซงสมัย

ไม่ทุกเว็บไซต์สามารถที่จะทิ้งการใช้ตาราง HTML ได้ทันที

ด้านล่างนี้มีบางคำแนะนำที่ช่วยให้คุณทำการคิดตามรูปแบบที่มีโครงสร้าง

สีด้านในรายการ

ในโรงเรียนภาษาวิทยา คนส่วนใหญ่ของเราถูกบังคับใช้มาตรฐานของรายการที่ใช้ในการเขียนบทความ

ในตากล่าว HTML พวกเราควรจัดเรียงโครงสร้างของเนื้อหาในรูปแบบที่มีระบบลำดับที่มีประสงค์ในตา

เมื่อคุณทำการทำเครื่องหมายข้อความที่ใช้สำหรับเครือข่าย หรือเมื่อคุณเปลี่ยนแปลงเอกสารทางข้อความที่มีอยู่เป็นเว็บไซต์ โปรดคิดถึงข้อความดังกล่าวตามรายการที่ใช้ในแบบสุนัขนิยม

<h1>ประเด็นหลักของฉัน</h1>
<p>ข้อความนำ</p>
<h2>ความเห็นที่เสริม</h2>
<p>ข้อความที่เกี่ยวข้อง</p>

พร้อมด้วย หลีกเลี่ยงการใช้องค์ประกอบ HTML ที่เคยถูกเลิกใช้ เช่น <font> หรือองค์ประกอบที่ไม่มีความหมายเชิงโครงสร้าง เช่น <br /> ที่แสดงลักษณะทางเรียงเรียงที่ไม่มีความมีความมั่นใจ

ตัวอย่างเช่น หยีกเหล่านี้ไม่ควรทำ

<font size="7">ประเด็นหลักของฉัน</font><br />
ข้อความนำ<br /><br />
<font size="6">ความเห็นที่เสริม</font><br />
ข้อความที่เกี่ยวข้อง<br />

ใช้องค์ประกอบตามความหมายของมัน ไม่ใช่ตามรูปแบบของมัน

บางคนจากเรานั้นเข้าใจแล้วว่าการใช้ h1 เมื่อต้องการข้อความขนาดใหญ่ หรือใช้ li เมื่อต้องการจุดหรืออย่างแบบ blockquote ในการเรียงข้อความที่เล็กกว่า ตามที่เราอธิบายในบทก่อนหน้านี้ บราวเซอร์ทั้งหมดเข้าใจแบบเลยว่าการใช้เอนไทป์หรือรูปแบบเพื่อหน้าที่ต่างๆ อย่างเช่น h1 หมายถึงตัวหนาขนาดใหญ่ หรือ li หมายถึงจุด หรือ blockquote หมายถึงข้อความที่มีส่วนย่อย และส่วนใหญ่ของเรายังคงใช้องค์ประกอบโครงสร้างในการแสดงรูปแบบที่ไม่ถูกต้องเพื่อเขียน HTML

เช่นเดียวกัน หากผู้ออกแบบต้องการให้หัวข้อทุกตัวมีขนาดตัวหนาใหญ่เหมาะกัน คงจะตั้งหัวข้อทุกตัวเป็น h1 แม้ว่าจะไม่มีความหมายเชิงโครงสร้าง

นี่คือหัวข้อหลัก หรือบ้างที่จะจัดเรียงข้อความตามรูปแบบของเนื้อหา
มันไม่ใช่หัวข้อหลัก แต่ฉันอยากให้มันใช้สไตล์ที่เหมาะกับหัวข้อที่ขึ้นมาก่อน แต่ฉันไม่ทราบว่าจะใช้ CSS ได้อย่างไร
มันไม่ใช่แนวเขียนหัวข้อ แต่ฉันมองว่าข้อความในหน้าเว็บควรใช้สไตล์ที่เดียวกัน เพื่อให้ได้รับรูปแบบที่ฉันต้องการ
หากฉันทราบ CSS ฉันสามารถได้ผลการออกแบบนี้โดยไม่ทำลายโครงสร้างของเอกสาร

เราต้องทิ้งการเล่นเกมส์ของเราไว้และเริ่มใช้งานเพื่อประโยชน์ขององค์ประกอบทางความหมาย ไม่ใช่ตามหน้าที่ของพวกเขา โดยที่ตามตัวอย่าง h1 สามารถกลายเป็นรูปแบบที่คุณต้องการได้ ด้วย CSS สามารถทำให้ h1 มีตัวหนาและขนาดเล็กในแบบโรมัน และข้อความ p สามารถกลายเป็นตัวหนาขนาดใหญ่ หรือ li สามารถไม่มีจุดหรือสามารถใช้ภาพ PNG, GIF หรือ JPEG ของแมวหรือหมาหรือสัญลักษณ์ของบริษัทแทนได้ และอื่นๆ อีกมากมาย

จากวันนี้เป็นต้นไป เราจะใช้ CSS ในการตัดสินรูปแบบขององค์ประกอบ และเรายังสามารถเปลี่ยนรูปแบบของพวกเขาได้เพื่อให้เหมาะกับตำแหน่งของพวกเขาในหน้าเว็บหรือที่สถานีของพวกเขา。 CSS สามารถถอดความแสดงออกจากโครงสร้างอย่างเต็มที่ และอนุญาตให้คุณจัดระเบียบองค์ประกอบตามสไตล์ที่คุณชื่นชอบ。

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;
	}

你为什么要这么做呢？这么做的目的是为了在图形浏览器中获得品牌化的外观和感觉的同时，在文本浏览器、无线设备、HTML 格式的电子邮件中，文档的结构得到保留。

我们并不想在关于 XHTML 的章节讲述更多 CSS 方面的技术。我们只是希望展示文档结构和可视表达是两个完全不同的事物，并且结构化元素应被用来转换文本，而不是强加显示效果。

使用结构化元素，而不是无意义的垃圾

由于我们已经忘记或者根本不知道 HTML 和 XHTML 的用途是传达结构化的意义，许多 HTML 争论者这样使用标签来插入列表：

项目一

项目二

项目三

考虑一下使用有序或者无序列表取而代之：

    

  • 项目一
    • 

  • 项目二
    • 

  • 项目三
    •

"但是li给我一个圆点，而我不需要圆点！"你也许会这么说。根据上面的章节，CSS不对元素被期望的外观做任何假定。它等待你来告诉它你所期待的元素外观。关闭圆点是 CSS 的最基本的能力。它有能力使列表看起来和普通文本没有两样，也可以使列表看起来像图形导航栏，具有完整的反转效果。

所以，请使用列表元素来标记列表。相似地，使用 strong 来代替 b，使用 em 代替 i，等等。在大多数桌面浏览器缺省状态下，strong 的显示效果和 b 相同，而 em 和 i 相同，同时也可以在不破坏文档结构的情况下创建你期待的视觉效果。

แม้ว่า CSS จะไม่มีข้อเสนอให้แสดงแบบแบ่งที่แน่ชัดในทุกองค์ประกอบสามัญ แต่เบราเซอร์ก็ทำข้อเสนออย่างมากมาย และเรายังไม่เคยบังคับบัญชาให้แสดง strong ในรูปแบบอื่นนอกจากหนา (เว้นเสียแต่ถูกมีคำสั่งด้วย CSS ที่เห็นด้วยที่แสดงอย่างอื่น). ถ้าคุณหวาดกลัวว่าเบราเซอร์ที่ไม่เคยเห็นก่อนจะแสดง strong ในรูปแบบหนา คุณสามารถเขียนกฎ CSS ดังนี้:

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

视觉元素和结构

web 标准不仅要求我们使用何种科技，而且还要遵守使用这些技术的方式。使用 XHTML 来编写标记，同时使用 CSS 来处理一部分或者全部的布局，并不一定会使站点更易用更轻便，同时节约多少带宽。就像我们在早期使用的技术那样，XHTML 和 CSS 也会被误用和滥用。冗长的 XHTML 和冗长的 HTML 一样，都会浪费用户的带宽和时间。冗长的过度的 CSS 也不能完全的代替表现 HTML 代码；这只不过是一种糟糕的东西被另一种代替了而已。