โครงสร้าง XHTML ชุดที่ 2: กรณีที่เป็นตัวอย่าง: การใช้การเขียนแบบทางโครงสร้างของ W3school

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

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

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

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

ควรจัดระเบียบองค์ประกอบทุกตัวหรือไม่?

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

เราได้สร้าง CodeW3C.com ฉบับที่สุดของภาษาจีนที่เรียกว่า ฉบับทดสอบเดี่ยวที่วางแผนในปี 2006 และใช้ CSS สำหรับติดตั้งตัวอย่างแรก และใช้ XHTML สำหรับจัดระเบียบเอกสาร ในแต่ละองค์ประกอบของเราทุกองค์ประกอบเป็นการจัดระเบียบ จากข้อหัวออกไปจนถึงรายการและปารากราฟ คุณสามารถเห็นปุ่มหน้าแรกที่มีปรากฎการ์ตันทันทีและปุ่มเมนูระดับที่สองบนแต่ละหน้าของ CodeW3C ด้านล่างนี้คือรหัส XHTML ของสององค์ประกอบนี้

<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 tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="สคริปต์เซิร์ฟเวอร์">สคริปต์เซิร์ฟเวอร์</a></li>
<li id="d"><a href="/d.asp" title="สอนวิชาการ dot net">สอนวิชาการ dot net</a></li>
<li id="m"><a href="/m.asp" title="สอนวิชาการสื่อสังคม">สอนวิชาการสื่อสังคม</a></li>
<li id="w"><a href="/w.asp" title="คู่มือสร้างเว็บไซต์">คู่มือสร้างเว็บไซต์</a></li>
</ul>
</div>

div, id และเชือดมืออื่นๆ

ถ้าถูกใช้งานอย่างถูกต้อง div สามารถเป็นเชือดมือที่ดีสำหรับการจัดระเบียบแสงหลัก และ id คือเครื่องมือที่น่าทึ่งที่มีความสามารถในการเขียน XHTML ที่มีความบริสุทธิ์สูงและใช้งาน CSS อย่างเป็นมานะ และยังสามารถเพิ่มพฤติกรรมที่ซับซ้อนและทันสมัยสำหรับเว็บไซต์ผ่านตัวแปรแบบเอกสารโอปเปอร์ตารี่ (DOM)

W3C ได้นิยาม div ในโมเดลโครงสร้าง XHTML ของ XHTML2 ฉบับที่สุดที่วางแผนไว้ว่า

div องค์ประกอบ โดยใช้ตัวแปร id, class และ role ในการให้กำหนดหลักความหมายของเนื้อหาเพิ่มเติมสำหรับเอกสารแบบทั่วไป องค์ประกอบนี้ไม่ได้กำหนดสไตล์ที่จะใช้กับเนื้อหา ดังนั้น ผู้สร้างสาระสามารถใช้องค์ประกอบนี้ร่วมกับสไตล์แบบ ภาษา xml:lang และตัวแปรอื่นๆ ในการปรับใช้ XHTML ตามความต้องการและรสชาติของตัวเอง

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

หลักที่ใช้เพื่อเพิ่มโครงสร้าง

ทุกคนที่เขียน HTML ตระหนักกับองค์ประกอบที่พบบ่อยเช่น ปาร์กราฟและหัวข้อ แต่บางคนอาจไม่เคยเห็น div มาก่อน ในการอธิบายของ W3C สามารถหาความเข้าใจองค์ประกอบ div ได้ "หลักที่ใช้เพื่อเพิ่มโครงสร้างทั่วไป"

บนหน้าเริ่มต้นของเว็บไซต์นี้ เราจะบำบัดรายการเลือกวิชาการใน div หนึ่ง เนื่องจากรายการเลือกวิชาการไม่ได้เป็นส่วนหนึ่งของเนื้อหาที่ไม่มีส่วนที่เกี่ยวข้อง องค์ประกอบ h2 ใช้เป็นสัญญาณของหัวข้อของวิชาการ และองค์ประกอบ ul ใช้เป็นรายการละเอียดของวิชาการ แต่ในหลักการที่เรียบเรียงมากยิ่งขึ้น รายการเลือกวิชาการนี้เล่นบทบาทของส่วนที่มีโครงสร้าง คือส่วนที่มีเนื้อหาเพื่อเน้นบทบาทนี้ เราใช้ id navsecond ที่แสดงว่านี้เป็น div

<div id="navsecond">
<h2>วิชาการ HTML</h2>
<ul>
<li><a href="/html/index.asp" title="วิชาการ HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="วิชาการ XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="วิชาการ CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="วิชาการ TCP/IP">TCP/IP</a></li>
</ul>
<h2>วิชาการ XML</h2>
<ul>
<li><a href="/xml/index.asp" title="วิชาการ XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL ภาษา">XSL</a></li>
... ...
... ...
</div>

คุณสามารถใช้ชื่อที่คุณต้องการ "Gladys" และ "orangebox" มีความสอดคล้องกับกฎการตั้งชื่อของ XHTML อย่างเต็มที่ แต่ชื่อที่มีความหมาย (semantic) หรือ meta-structural คือที่ดีที่สุด (คือชื่อที่สามารถอธิบายถึงฟังก์ชันขององค์ประกอบของมัน)

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

ดังนั้น การระบุ id ว่า "menu"、"content" หรือ "searchform" จะช่วยความจำของคุณ. พิจารณาเพิ่มเติม การทำสัญลักษณ์ไม่เท่ากับการออกแบบ หน้าที่มีโครงสร้างที่ดี สามารถจัดรูปแบบให้เป็นที่ต้องการได้. ผลลัพธ์ที่ได้มาจากการกระทำนี้คือ ไม่ว่าคุณจะใช้เครื่องมือระบบเครื่องรางแบบ CSS หรือระบบเครื่องมือระบบเครื่องรางแบบผสม คุณจะทำลายการใช้แสดงรูปแบบในการคิดและสร้าง.

id ต่อ class

คุณสมบัติ id ไม่ใช่สิ่งใหม่สำหรับ XHTML; คุณสมบัติ class หรือตัวองค์ประกอบ div ก็เช่นกัน。เขาทั้งหมดสามารถหาย้อนกลับไปยังยุค HTML อย่างง่าย ๆ คุณสมบัติ id จะมอบชื่อเดี่ยวเดียวแก่ตัวองค์ประกอบหนึ่ง. ชื่อแต่ละชื่อจะสามารถใช้ได้เพียงครั้งเดียวบนหน้าที่มอบไปใช้. (ตัวอย่างเช่น หากหน้าของคุณมี div ที่มี id ชื่อ content แล้ว ตัว div หรือองค์ประกอบอื่นๆ ไม่สามารถใช้ชื่อนี้ได้. ขณะที่คุณสมบัติ class สามารถใช้ได้หลายครั้งในหน้า (ตัวอย่างเช่น ห้าย่อหน้าในหน้านี้สามารถใช้ชื่อ class ชื่อ "small" หรือ "footnote" ได้). สัญลักษณ์ด้านล่างนี้จะช่วยชี้แจงความแตกต่างระหว่าง id และ class:

<div id="searchform">องค์ประกอบของฟอร์มการค้นหาจะมาที่นี่. นี่
บางส่วนของหน้านี้มีความเป็นเดียวกัน.</div>
<div class="blogentry">
   <h2>บล็อกของวันนี้</h2>
   <p>เนื้อหาบล็อกนั้นจะมาที่นี่.</p>
   <p>นี่คือย่อหน้าอีกของเนื้อหาบล็อก.</p>
   <p>เช่นเดียวกับที่สามารถมีหลายย่อหน้าบนหน้าเดียวกัน ดังนั้น
   อาจมีหลายรายการในบล็อก. หน้าบล็อกอาจใช้
   มีหลายตัวแปลของชั้น "blogentry" (หรือในแง่กว้างที่สุด)
   class).</p>
</div>
<div class="blogentry">
   <h2>Yesterday's blog post</h2>
   <p>In fact, here we are inside another div of class
   "blogentry."</p>
   <p>They reproduce like rabbits.</p>
   <p>If there are ten blog posts on this page, there might
   be ten divs of class "blogentry" as well.</p>
</div>

ในตัวอย่างนี้ div ที่มีชื่อ searchform ถูกใช้เพื่อบรรจุพื้นที่หน้าเว็บที่มีฟอร์มการค้นหา และ div class="blogentry" ถูกใช้เพื่อบรรจุบทความในบล็อกทุกบทความ ในหน้าเว็บมีฟอร์มการค้นหาเพียงฟอร์มเดียว ดังนั้นเราเลือกที่จะใช้ id ที่ทำหน้าที่แสดงตัวองค์ประกอบที่เดี่ยวเดียวนี้ แต่บล็อกมีบทความมากมาย ดังนั้นเราใช้ property class ในกรณีนี้ รวมทั้งเว็บไซต์ข่าวที่มี div หลาย div และ class ของนั้นอาจเรียกว่า "newsitem" หรืออื่น ๆ

แต่ไม่ทุกเว็บไซต์ต้องการ div แบบนี้ เว็บไซต์ blog อาจใช้ h1, H2, และ H2 ของส่วนหัวและ <p>ปาร์กราฟเพียงแค่นั้น และเว็บไซต์ข่าวก็เช่นเดียว ในที่นี้เราแสดง div ที่มี class ชื่อ blogentry ไม่ได้มีจุดมุ่งหมายที่จะทำให้คุณทำให้เว็บไซต์ของคุณมี div มากมาย แต่เพียงแค่เพื่อแสดงหลักการที่ว่า ในเอกสาร HTML หนึ่งไฟล์ คุณสามารถใช้ class หลายครั้ง แต่สามารถใช้ id ได้เพียงหนึ่งครั้งเท่านั้น

ทฤษฎีติ๊กเก็ตสติ๊กกะ

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

id จะทำหน้าที่ที่ชี้แสดงพื้นที่พิเศษในเอกสารเพื่อเตือนคุณว่าใครบางพื้นที่ต้องทำการประมวลผลพิเศษ ในประเด็นนี้ ตัวแปร id มีความเหมือนกับติ๊กเก็ตสติ๊กกะทางที่นี้ สำหรับประมวลผลพิเศษที่เรียกว่า คุณจะต้องใช้ตัวแปร id นี้เขียนกฎระเบียบบางตัวในไฟล์ที่มีการจัดการสไตล์ หรือเพิ่มบรรทัดรหัสบางบรรทัดในไฟล์ JavaScript ตามไปนี้ ตัวอย่าง มีกฎระเบียบบางกฎระเบียบในไฟล์ CSS ของคุณ ซึ่งมีการใช้งานกฎระเบียบเพียงหนึ่งตัวเท่านั้น และมีการใช้กฎระเบียบนี้ในองค์ประกอบที่มี id ชื่อ searchform ของ div

When an id attribute is used as a magnetic thing (magnet) for a series of specific CSS rules, it is called a CSS selector. There are manyCreate selectormethod, but id is easy to use and has many uses.

The power of id

The id attribute is incredibly powerful. It has the following capabilities:

  • As a selector in style sheets, enabling us to create compact and minimized XHTML.
  • As the target anchor of hyper text, replacing the outdated name attribute.
  • As a method to locate a specific element from script based on DOM.
  • As the name of an object element.
  • As a tool for general purpose processing (in the example of W3C, 'used as a domain identification tool when extracting data from HTML pages to databases, or converting HTML documents to other formats, etc.').

Rules of id

The id value must start with a letter or underscore; it cannot start with a number. Although W3C validation will not catch this error, an XML parser will. At the same time, if you use id with JavaScript in a form, the id name and value must be a valid JavaScript variable. Spaces and hyphens, especially hyphens, are not allowed. Moreover, using an underscore for class or id names is not a good idea, due to the limitations in CSS2.0 (and some browsers).

Semantic markup and accessibility

Now, we have discussed the widely used XHTML elements (especially div and id), let's take a look at an example about the homepage of this site. First, let's review the menu located at the header position:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="สคริปต์เซิร์ฟเวอร์">สคริปต์เซิร์ฟเวอร์</a></li>
<li id="d"><a href="/d.asp" title="สอนวิชาการ dot net">สอนวิชาการ dot net</a></li>
<li id="m"><a href="/m.asp" title="สอนวิชาการสื่อสังคม">สอนวิชาการสื่อสังคม</a></li>
<li id="w"><a href="/w.asp" title="คู่มือสร้างเว็บไซต์">คู่มือสร้างเว็บไซต์</a></li>
</ul>
</div>

เรามีลิงก์เจ็ดราย แต่ละลิงก์ถูกแบ่งประเภทด้วย id ที่ตรงกันข้ามกับเนื้อหาที่เกี่ยวข้องของมัน: ตัวอย่างเช่น id ที่ชื่อ 'h' ตรงกันข้ามกับวิชาการ HTML ตามไปตามนั้น และเหล่านี้ถูกทำให้เป็นส่วนหนึ่งของเซ็กชันที่ชื่อ 'menu' ซึ่งid ที่ชื่อ 'menu' กำหนดฟังก์ชันของรายการที่เป็นเนื้อหา - รายการเมนู และ div ที่ชื่อ 'navfirst' ที่ใช้ในการหมายเหตุเซ็กชันนี้ในหน้า และแยกมันจากอีกองค์ประกอบเช่นเนื้อหาหลัก (maincontent) ด้านข้าง (sidebar) และท้ายหน้า (footer)

ตัวแอลกอริทึม div และ ul ทั้งสองมีโครงสร้างที่แท้จริง หมายความว่ามีการกำหนดฟังก์ชันของสิ่งที่อยู่ภายใน (ดาช์บอร์ด) และตำแหน่งของมันในเอกสาร (ตำแหน่งหัวของหน้า) ขณะที่รูปแบบตารางทางเดิมไม่สามารถให้ข้อมูลที่มีความหมายเชิงวิเคราะห์เกี่ยวกับข้อมูลใดๆ และยังจะใช้บริเวณวงกว้างขึ้นสามเท่า

โปรดทราบว่าสัญลักษณ์นี้ไม่มีแท็ก img ดังนั้นจึงไม่มีส่วนที่เกี่ยวข้องกับคุณสมบัติเช่น width, height, background หรือ border และมันไม่ใช้แท็กตารางเซลล์ดังนั้นจึงไม่มีส่วนที่เกี่ยวข้องกับคุณสมบัติที่เกี่ยวข้องกับตารางเซลล์ มันสะอาดและเล็ก และยังมีทุกข้อมูลที่จำเป็นเพื่อให้เข้าใจมัน

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

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

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