20 แท็ก HTML ที่ถูกลืม(นำไปใช้) ตอนที่ 2

มาตรฐาน
20 แท็ก HTML ที่ถูกลืม(นำไปใช้) ตอนที่ 1

กลับมาอีกครั้งกับตอนที่ 2 ของ 20 แท็ก HTML ที่ถูกลืม(นำไปใช้) ที่เห็นบนกราฟิกบนหัวเรื่องเขียนเป็น 20+1 เพราะมีเพิ่มเติมเข้ามาอีก 1 แท็กเพื่อให้เนื้อความมีความสมบูรณ์มากขึ้น ดังนั้นจึงมีอยู่ 12 แท็กที่ผมจะแนะนำในบทความตอนที่ 2 นี้ และเพื่อไม่ให้เนื้อหายาวเกินความจำเป็นและเข้าใจการนำไปใช้ได้ง่ายขึ้น หลายๆแท็กผมจะอธิบายรวมกันไปเลยเพราะเป็นชุดที่ใช้ร่วมกันอยู่แล้วอย่างแท็ก <caption>, <thead>, <tfoot> และ <tbody> ที่ใช้อยู่ในกลุ่มเดียวกันในแท็ก <table> เป็นต้น เอาล่ะครับถ้าพร้อมแล้วก็ไปกันเลย
Read the rest of this entry

Advertisements

20 แท็ก HTML ที่ถูกลืม(นำไปใช้) ตอนที่ 1

มาตรฐาน
20 แท็ก HTML ที่ถูกลืม(นำไปใช้) ตอนที่ 1

ก่อนที่เราจะสามารถเขียนหน้าเว็บ html ที่มีโครงสร้างที่สื่อความหมายหรือที่ฝรั่งเขาเรียกกันว่า semantic web page ได้ เราจะต้องรู้ก่อนว่ามีแท็ก html อะไรที่ให้เราใช้ในการสื่อความหมายได้บ้าง เพื่อให้เราสามารถเลือกใช้ได้ถูกต้อง ซึ่งนอกจากแท็ก <h1> ถึง <h6> และแท็ก <p> ที่เราใช้กันบ่อยๆแล้ว ยังมีแท็กอื่นๆที่น่าเอาใช้อีกมากที่เราไม่รู้ว่ามี โดยในที่นี่ผมขอแนะนำ 20 แท็ก html ที่ถูกลืม(นำไปใช้) ให้ลองนำไปใช้เขียนกันนะครับ แต่เนื่องจากเนื้อหายาวมากจะเขียนรวดเดียวคงไม่ไหว เลยขออนุญาตแบ่งเป็น 2 ตอนนะครับ ถ้าพร้อมแล้วก็ไปกันเลยครับ Read the rest of this entry

มาประยุกต์ใช้ comments ใน CSS อย่างมืออาชีพกันเถอะ

มาตรฐาน

Creatively Use Comments in CSS

แรกเริ่มเดิมทีแล้วการใช้ comments ในงานเขียนโปรแกรมนั้นมีมานานมากแล้ว จุดประสงค์หลักก็เพื่อให้เหล่าโปรแกรมเมอร์ทั้งหลายสามารถแทรกข้อความลงไปในโค๊ตเพื่อใช้อธิบายโค๊ตที่เขียนไว้, ใช้เป็นบันทึกช่วยจำในการปรับแต่งโค๊ตในอนาคต หรือปิดซ่อนโค๊ตบางส่วนไว้ชั่วคราวไม่ให้ทำงาน สำหรับใน CSS ก็มีให้เขียน comments ลงไปในโค๊ตได้เหมือนกันครับ แต่เรามาดูกันว่าเหล่ามืออาชีพทั้งหลายเขามีวิธีประยุกต์ใช้ comments ในงานได้อย่างสร้างสรรค์ที่อยู่นอกเหนือจากจุดประสงค์ที่กล่าวมาข้างต้นกันยังไงบ้างนะครับ Read the rest of this entry

ฝึกเขียนโค๊ต html และ css ให้ถูกต้องด้วย Markup Validation Services จาก W3C

มาตรฐาน

Validate your code with W3C Validation Services

ปัญหาอย่างหนึ่งที่มือใหม่หัดเขียนโค๊ตหน้าเว็บต้องเจอกันเป็นประจำก็คือ ไม่รู้ว่าหน้าเว็บที่เราเขียนนั้นมีความถูกต้องมากน้อยแค่ไหน และมีส่วนไหนที่จะต้องได้รับการปรับปรุง จากประสบการณ์ผมพบว่าแต่ละคนจะมีรูปแบบการเขียนที่ผิดบ่อยๆไม่เหมือนกัน เช่น บางคนอาจจะชอบเขียนสะกดผิด, บางคนชอบลืมเขียนแท็กปิด หรือบางคนมักจะลืมใส่ค่า attribute สำคัญของแท็กอย่างแท็ก <img> หรือ <a> ซึ่งตัวผมเองก็ประสบกับปัญหาต่างๆอย่างนี้เหมือนกัน แล้ววันหนึ่งผมก็พบว่าเครื่องมือที่จะช่วยดัดนิสัยการเชียนโค๊ตแบบผิดๆของเราได้ดีที่สุดคือ การเอาหน้าเว็บที่เราเขียนไปตรวจสอบความถูกต้องบนเว็บของ W3C* นั่นเอง Read the rest of this entry

ยันต์แท็ก META มีติดหน้าเว็บแล้วจะดี… จริงรึ?

มาตรฐาน

meta tag - Why do we need it?

ส่วนตัวผมเองก็เคยงงๆกับการใช้แท็ก <meta> มานานเหมือนกันครับ ประมาณว่าใส่ไปแล้วจะได้อะไรจำเป็นต้องใส่ขนาดนั้นเลยเหรอ ซึ่งจริงๆผมเชื่อว่าคนเขียนเว็บไซต์ทุกคนรู้ว่าแท็ก <meta> สำคัญและควรใส่ แต่ไม่รู้ว่าอะไรบ้างและแค่ไหนดีถึงจะเหมาะสม ในบทความนี้จะมาเจาะรายละเอียดเกี่ยวกับการใช้แท็ก <meta> กันครับ Read the rest of this entry

ความสำคัญของแท็ก DOCTYPE และวิธีการเลือกใช้

มาตรฐาน

!DOCTYPE How important it is?

อีกแท็กหนึ่งที่มีความสำคัญมากๆสำหรับการเขียนหน้าเว็บตามหลัก Web Standards คือแท็ก DOCTYPE เพราะเป็นแท็กที่บอกให้เว็บบราวเซอร์รู้ว่าหน้าเว็บของคุณเป็นหน้าเว็บแบบไหนและควรจะใช้กฏเกณฑ์ไหนในการแสดงผลบนหน้าจอให้ถูกต้องที่สุด ซึ่งจะมีส่วนช่วยให้การเขียน CSS ของคุณแสดงผลได้ถูกต้องมากยิ่งขึ้นด้วยครับ Read the rest of this entry

ID ปะทะ Class จะเลือกใช้อะไรดี?

มาตรฐาน

ID vs. Class
ปัญหาอย่างหนึ่งสำหรับผู้หัดเขียน CSS ใหม่ๆก็คือ ไม่รู้ว่าเมื่อไหร่ควรจะเลือกใช้ ID และเมื่อไหร่ถึงสมควรจะเลือกใช้ Class และไม่รู้ด้วยว่าการเลือกใช้อย่างใดอย่างหนึ่งมีข้อดีข้อเสียอย่างไรบ้าง ด้วยเหตุนี้จึงทำให้เหล่ามือใหม่หัดเขียน CSS (ซึ่งผมก็เคยเป็นหนึ่งในนั้น) ใช้ ID และ Class มั่วกันไปหมด บางคนชอบใช้ Class ก็ใช้แหลกโดยไม่คำนึงถึงความเหมาะสม หรือบางท่านชอบใช้ ID ก็ใช้กับทุกอย่างเหมือนกับไม่มี Class บนโลกนี้ ในบทความนี้ผมจึงอยากช่วยแนะนำวิธีการเลือกใช้ ID และ Class ที่ถูกต้องให้ได้ทราบกันครับ โดยก่อนอื่นเราต้องมาดูกันว่าเจ้า ID และ Class จะมีไว้เพื่ออะไร และทั้งสองตัวมีความแตกต่างกันอย่างไรบ้างกันครับ Read the rest of this entry