Accessibility Links

• Skip to Content
• Skip to Main Navigation
• Skip to thaicss.com Search
• Accessibility help
• Access keys help
• 

โครงสร้าง XHTML

โครงสร้างความเข้าใจ การเขียน XHTML

1. การสร้างแบบฟอร์มอย่างถูกวิธี 2

   Radiz 2008-07-22 17:51:57

   ความเดิมจากตอนที่แล้ว จากตัวอย่างเมื่อคราวที่แล้ว ขออนุญาติตอบคำถามของคุณ​ mabonic ก่อนนะครับ ว่าใน IE6 ถ้าไม่สามารถกำหนด attribute selector ได้จะทำอย่างไร คำตอบมีสอง Case ครับ Case1: คือ เขียน class selector เพื่อกำหนดคุณสมบัติให้มันครับ ส่วน Case2: ก็คือ ใช้ JavaScript ที่ชื่อ ie7-js สำหรับ reset ค่า default ต่าง ๆ ในการ render และ ทำให้มันรู้จักคำสั่งของ CSS level ใหม่ ๆ ที่มันไม่รู้จัก (อย่าลืมนะครับว่า IE6 มันแก่แล้ว) JavaScript ตัวนี้ให้กำเนิดโดย Dean Edwards แต่ข้อจำกัดหลายอย่างก็ยังมีอยู่ ถ้าผู้ใดสนใจเป็นหนึ่งในทีมพัฒนาก็สามารถเข้าร่วมได้นะครับ

   Tags:

   1. xhtml
   2. valid
   3. form

2. การสร้างแบบฟอร์มอย่างถูกวิธี

   Radiz 2008-05-29 12:28:09

   ผมติดมาไว้นานมากตั้งแต่ปีที่แล้ว ที่บอกว่าถ้ามีเวลาผมจะแนะแนวทางการใช้ form ให้ถูกต้อง สะอาด และ accessibility วันนี้ก็คิดว่าคงได้เวลาแล้วล่ะ เพราะกว่าจะว่างอีกคงนานแน่ ๆ เลย เพราะตอนนี้ผมเองก็ไปมุ่งศึกษาในส่วนของ Semantic Web และ Mobile Web Technology แล้วมากกว่า อีกอย่างฝันอยากจะทำ free PDF Magazine เกี่ยวกับการสร้างสรรค์ การจุดประกาย ส่งเสริมให้เกิดความคิดสร้างสรรค์ คิดต่อยอด ให้มีในประเทศไทยบ้างแต่คงจะเริ่มจากกรอบของสิ่งที่ผมทำอยู่ รู้จัก และ ถนัด ซึ่งคิดว่าคงจะได้เห็นกันในเร็ว ๆ วันนี้ แต่อย่างไรก็ตาม ผมก็จะมาบ่น ๆ แบบเรื่อย ๆ เอื่อย ๆ ของผมแบบนี้ ต้องขออภัยที่อาจจะทำให้ ThaiCSS ดูเงียบเหงาไป อาจจะเห็นผมคนเดียวอย่างนี้บ่อย ๆ เพราะพรคงอาจจะนาน ๆ แวะเข้ามาทีแล้ว เพราะมีหน้าที่รับผิดชอบอันยิ่งใหญ่กว่าไว้รอ Surprise กันในเร็ว ๆ วัน สำหรับคนที่รัก Tweeter สามารถพูดคุยกับผมได้ทั้งวันทั้งมีสาระ และ ไม่มีสาระได้เลย (อย่างหลังคงไม่บ่อย หะ หะ) ผมใช้ username ว่า radiz ชื่อผมนี่แหละครับ แนะนำว่าให้ใช้ SNS ในทางที่มีประโยชน์นะครับ อย่าเอามันมาทำลายเวลา และ ขดสมอง

   เข้าเรื่องกันดีกว่าครับ ก่อนเราจะเขียนโครงสร้างแบบฟอร์มใน xhtml นั้นเรามารู้จัก tag ต่าง ๆ ที่จะทำงานร่วมกับโครงสร้างแบบฟอร์มกันก่อนโดยผมจะกล่าวแบ่งตามประเภทของมันนะครับ (Block Element และ Inline Element) และ สิ่งที่ผมกล่าวถึงจะเป็นส่วนที่ทำงานเกี่ยวกับ Data Entry (การใส่ข้อมูล) ของแบบฟอร์มส่วนโครงสร้างร่วมอื่น ๆ ให้พิจารณาตามความเหมาะสมครับ บางคนอาจจะใช้ ul, ol หรือ dl ไม่แนะนำให้ใช้ table ในการจัด layout ของ form ครับผม มาทำความรู้จักกับ tag ที่ทำงานร่วมกับ Data Entry ต่าง ๆ กันเลยครับ

   Tags:

   1. xhtml
   2. valid
   3. form

3. เมื่อ Crawler ต้องเจอ XHTML ป่วยๆ

   พร อันทะ 2008-03-03 00:59:59

   ผมนึกถึงตอนที่ผมหัดเขียน CSS เมื่อสองสามปีที่ผ่านมา ตอนนั้นคิดอยู่อย่างเดียวว่า ต้องเขียนให้มันแสดงผลได้ใน IE ก่อน แต่พอศึกษาไป เรื่อยๆ กลับกลายเป็น ต้องเขียนให้ดูได้บน Modern Browsers ก่อน IE ค่อยตามมา ผ่านไปเกือบปี ถึงรู้ว่า ก่อนจะเขียน CSS ให้ไปหัดเขียน XHTML ใหม่เสียก่อน

   Tags:

   1. crawler
   2. xhtml
   3. markup

4. HTML5 XHTML2 และ อนาคตของเวป (3)

   Radiz 2007-12-03 23:09:27

   W3C ได้เปิดโอกาสให้กลุ่มผู้พัฒนาอื่น ๆ ที่สนใจได้เข้ามาพัฒนา HTML ต่อจากตัว W3C เอง ซึ่งทาง W3C เองนั้นจะเริ่มการพัฒนา XHTML 2 ต่อ โดยกลุ่มที่นำ HTML ไปพัฒนาต่อนี้ได้แยกออกจาก W3C โดยสิ้นเชิง

   Tags:

   1. xhtml
   2. html5
   3. xhtml2

5. HTML5 XHTML2 และ อนาคตของเวป (2)

   Radiz 2007-11-30 22:46:27

   XHTML ส่วนใหญ่ในเวปที่เราเห็น ๆ กันอยู่นั้นใช้ content type แบบ text/html พูดง่าย ๆ มันก็ยังเป็น ต้มยำ tag ที่ทำงานในแบบ XML ไม่ได้เป็น XML ไปเสียทีเดียว

   Tags:

   1. xhtml
   2. html5
   3. xhtml2

6. HTML5 XHTML2 และ อนาคตของเวป (1)

   Radiz 2007-11-21 09:37:13

   เพื่อน ๆ หลาย ๆ คนที่ทำงานในสายงานเดียวกันกับผม (หมายถึง ใน field งานของเวปทั้งหมด) รู้ตัวหรือไม่ว่าเรา ได้ทำงานร่วมกับเทคโนโลยี ที่พัฒนากันมาเนิ่นนาน อย่างไม่รู้เนื้อรู้ตัว

   Tags:

   1. xhtml
   2. html5
   3. xhtml2

7. List หรือ ข้อมูลที่เป็นลิสต์ (ol, ul, dl)

   พร อันทะ 2007-10-01 20:13:31

   ในขั้นต้นของการคิดวิเคราะห์ข้อมูลที่จะนำมาทำเป็น list ในรูปแบบต่างๆ ความเข้าใจในพื้นฐานของความเป็น list คือสิ่งสำคัญ เราจะรู้ได้อย่างไรว่าอันไหนคือ list ที่ต้องเรียงลำดับ (ol) อันไหนคือ list ที่ไม่ต้องเรียงลำดับ (ul)

   Tags:

   1. xhtml
   2. ol
   3. ul

8. Web Accessibility กับการติดอันดับต้น ๆ ของ Search Engine (SEO)

   Mr. ผ่านมา 2007-08-21 10:38:27

   จากที่ได้อีเมลล์คุยกันไป-มาหลายรอบกับ Mr.ผ่านมา วันนี้ก็ได้ฤกษ์ได้เพลา ปล่อยของซะที บทความที่เกี่ยวกับ Web Accessibility (WAI, WCAG) และความเกี่ยวเนื่องกับ Search Engine (SEO) ชิ้นนี้

   Tags:

   1. web Accessibility
   2. Web Standards
   3. SEO

9. XHTML กับ CSS แล้วมันดีกับ Search Engine (SEO)ยังไง

   Mr. ผ่านมา 2007-08-21 10:38:44

   หลายท่านคงยังงเรื่อง SEO หรือ Search Engine Optimize เผอิญมีหนุ่มนิรนาม ผู้ซึ่งมีความสามารถและให้ความสนใจ แถมอยากถ่ายทอดพลังให้คนตาดำๆ ทั่วๆ ไปอย่างเราให้ทราบด้วย

   มาโพสต์ข้อความแสดงความคิดเห็นไว้ตาม บทความต่างๆ ที่ผมเขียน ก็เลยถือโอกาสเอามาแปะให้อ่านเพิ่มรอยหยักกัน ซะหน่อยครับ กับ XHTML, CSS, WCAG มันเกี่ยวกับ SEO ยังไง เซิญแซ่บ

   เห็นด้วยกับทุกท่านครับ ดีใจที่เห็นคนไทยมีคนสนใจ XHTML กับ CSS และพยายามใช้ให้ถูกต้อง เพราะประเทศอื่น ๆ เขาไปกันไกลแล้ว จริง ๆ ผมเคยคิดที่จะทำเว็บเช่นนี้เหมือนกัน แต่ไม่มีเวลา ก็เลยล้มเลิกไป แต่ตัวผมเองนั้นก็ศึกษา XHTML, CSS และ WCAG 1.0 + WCAG 2.0 มามากกว่า 5 ปีแล้ว (พอดีว่าทำงานในองค์กรคนพิการ แล้วเขามีข้อบังคับว่า ต้องรู้จัก 3 ตัวนี้ซึ่งมีส่วนช่วยให้คนพิการเข้าถึงข้อมูลข่าวสารจากเว็บได้สะดวกขึ้น)

   Tags:

   1. xhtml
   2. css
   3. seo

10. XHTML DOCTYPE เขียนเว็บภายใต้การทำงานของ DTD และ Box Model

    พร อันทะ 2007-08-21 10:39:19

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

    Tags:

    1. xhtml
    2. DTD
    3. box model

11. div หรือ table

    พร อันทะ 2007-08-31 07:14:00

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

    เรื่องมันมีอยู่ว่า

    ด้วยเหตุแห่งยุคแรกเริ่มเดิมทีที่เหล่า เว็บดีไซเนอร์ พากันเรียกใช้ <table> ซึ่งเป็นตัวจัดการวางข้อมูล ออกมาใช้เป็นตัวจัดการโครงสร้างของเว็บทั้งหมด ด้วยเหตุที่ง่ายและยังไม่มีวิธีใดที่ดียิ่งกว่า TABLE จึงแพร่หลายและถูกใช้อย่างผิดๆ มาตั้งแต่นั้น

    ปัจจุบัน คำว่า Tableless Design หรือการทำเว็บแบบพึ่งพา table ให้น้อยที่สุด หรือไม่ต้องใช้เลย อาจจะแพร่กระหลายในหมู่คนทำเว็บต่างประเทศอื่นๆ โดยเฉพาะฝั่งยุโรป แต่ในเมืองไทยยังไม่เป็นที่นิยมมากนัก เพราะต้องการใช้เวลาในห้วงระยะหนึ่งในการทำความเข้าใจ เรียนรู้มากพอสมควร ทั้งในเรื่องของ XHTML, XML เพื่อที่จะสามารถเข้าใจหลักการทำงานพื้นฐานได้ ถึงแม้โครงสร้างภาษาจะไม่แตกต่างจาก HTML มากมายก็ตาม

    ต้องใช้ DIV ทั้งเว็บใช่หรือไม่

    คำตอบคือ ใช่ และไม่ใช่

    อย่างไร

    ถ้ากรณีที่เว็บของเราที่ทำขึ้นมานั้น ไม่ได้มีการแสดงผล แบบเป็นตารางข้อมูล สถิติ คล้ายๆ เอกสารแบบ Excel ก็คงไม่จำเป็นต้องมี table ครับ แค่ DIV และ อย่างอื่น ก็ทำเว็บได้

    แต่ ถ้าเมื่อใดที่เราต้องแสดงผลแบบเป็นแถว เป็นคอลัมน์ เรายังต้องใช้ table อยู่ นั่นเอง

    ด้วยคุณสมบัติและลักษณะที่แตกต่าง จึงไม่สามารถเอามาใช้แทนกันได้

    Tags:

    1. div
    2. table
    3. tableless

1. {CAT_TITLE}

Unknown Version Unknown