สาระความรู้เกี่ยวกับคอมพิวเตอร์

บล็อกสาระความรู้เกี่ยวกับคอมพิวเตอร์ สร้างขึ้นเพื่อเป็นแหล่งแชร์ความรู้ทางคอมพิวเตอร์ เช่น ทำเว็บไซต์การเขียนโปรแกรมต่างๆ การทำ SEO และการแก้ปัญหาคอมพิวเตอร์ ...

วันจันทร์ที่ 9 กันยายน พ.ศ. 2556

10 หนทางในการทำเว็บสู่มาตรฐาน (ตอนที่ 2)

6. ใช้ HTML ให้ถูกต้อง
อักขระบางตัวเป็นอักขระที่ใช้ในโค้ดของ HTML เราไม่สามารถใช้มันภายในข้อความได้ เช่น & " < และ > แต่เราสามารถเปลี่ยนแปลงมันให้เป็น รหัสข้อความ เพื่อที่จะสามารถแสดงผลอย่างถูกต้องได้

* & ให้ใช้ & แทน
* " ให้ใช้ &quote; แทน
* < ให้ใช้ < แทน
* > ให้ใช้ > แทน
* ตัวอักษรอื่นๆ

โค๊ด:

<a href="http://www.example.com?page=1&amp;view=top">A &quot;Cool&quot; Link</a>

<code>&lt;div id=&quot;content&quot;&gt;Test information.&lt;/div&gt;</code>

7. ใช้ Tags และ Attributes เป็นตัวอักษรตัวพิมพ์เล็ก
tag และ attribute ต่างๆ รวมถึง event ต้องกำหนดให้เป็น ตัวอักษรตัวพิมพ์เล็กเท่านั้น เช่น <html> <table cellpadding="0"> <body onload="alert('xxx')">

โค๊ด:

<A href="#" onClick="doSomething();">Send us a message</A>

// ด้านบนเป็นโค้ดที่ไม่ถูกต้อง ชื่อ tag และ event ประกอบด้วยตัวอักษรตัวพิมพใหญ่

โค๊ด:

<a href="#" onclick="doSomething();">Send us a message</a>

// โค้ดที่แก้ไขแล้ว โดยเปลี่ยนเป็นตัวอักษรตัวพิมพ์เล็กทั้งหมด (ยกเว้น ภายใน Value และส่วนข้อความ)

8. ใช้ label ภายในฟอร์ม
element ต่างๆที่ต้องการการกรอกข้อมูลภายในฟอร์ม ต้องมีการกำหนดป้ายกำกับ หรือ label ที่สัมพันธ์กันไว้เสมอ ซึ่งป้ายกำกับนี้จะถูกใช้ในการอธิบายความหมายของสิ่งที่ต้องกรอกของเครื่อง อ่านสำหรับผู้พิการทางสายตา

* กำหนด label ให้กับทุก element ที่ต้องกรอก และมองเห็นได้ภายในฟอร์ม (ยกเว้น input แบบ hidden)
* กำหนด Attribute for ให้กับ label โดยสัมพันธ์กันกับ id ของ Element ที่ต้องกรอก

โค๊ด:

<p><label for="searchbox">Search: </label><input type="text" id="searchbox" /></p>

<p><input type="checkbox" id="remember" /><label for="remember"> Remember</label></p>

9. กำหนด alt ให้กับรูปภาพเสมอ
alt สำหรับใช้เป็นคำอธิบายที่เกี่ยวกับรูปภาพ และจะถูกใช้แสดงแทนเมื่อไม่สามารถแสดงรูปภาพได้ เราจำเป็นต้องการหนด alt โดยใช้ข้อความเพื่ออธิบายความหมายของรูปภาพ ไม่ควรปล่อยว่างไว้ และนอกจากนี้ เราควรกำหนด width และ height ที่ถูกต้องให้กับรูปภาพลงไปด้วย
ไม่ถูกต้อง :

โค๊ด:

<img src="picture.png" />

<img src="spacer.gif" alt="" />

ที่ถูกต้อง :

โค๊ด:

<img src="picture.png" alt="A warm sunset" width="450" height="350" />

10. ใช้ id และ class ให้ถูกต้อง
คุณสามารถกำหนดชื่อให้กับ id ได้เพียง tag เดียว ตลอดหน้าเพจ แต่สามารถกำหนด ค่าให้กับ class ในชื่อเดียวกันได้หลายๆครั้ง ตลอดทั้งหน้า

* id มักจะถูกใช้ โดย Javascript ดังนั้นเราควรกำหนด id เพียงหนึ่งเดียวบนหน้าเพจ เนื่องจาก หากมี id มากกว่าหนึ่ง javascript จะแสดงข้อความผิดพลาดได้
* class เราสามารถใช้ในการกำหนด style ให้ element นั้นๆได้ โดยที่ element ใดที่มีชื่อ class เดียวกันก็จะแสดงผลเหมือนๆกันตลอดทั้งหน้าเพจ

ไม่ถูกต้อง :

โค๊ด:

<p id="leftNav">Home</p>

<p id="leftNav">Contact</p>

ที่ถูกต้อง :

โค๊ด:

<p id="homeNav" class="leftNav">Home</p>

<p id="contactNav" class="leftNav">Contact</p>

บทสรุป เราสามารถตรวจสอบความถูกต้องของเว็บเพจเราได้ที่นี่

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.cynthiasays.com/
http://fae.cita.uiuc.edu/

ขอบคุณข้อมูลจาก : http://www.goragod.com/

ไม่มีความคิดเห็น :

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น ( Atom )