วันพฤหัสบดีที่ 22 พฤษภาคม พ.ศ. 2557

figure และ figcaption ใน html5

<figure>

figure ซึ่งส่วนใหญ่จะคิดว่าเป็นแทกที่บ่งบอกภาพของเนื้อหาในเพจนั้นๆ เพียงอย่างเดียว ที่จริงมันไม่ใช่อย่างนั้นครับ ถูก แต่ถูกไม่หมด figure ยังใช้บ่งบอกความหมายนอกเหนือจากภาพได้ครับ

figure นั้นจะแสดงเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลัก เช่นรูปภาพประกอบเนื้อหา ซึ่งอาจจะวางตำแหน่งไว้ส่วนไหนของเพจก็ได้ 

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

figure นี้ใช้กับหลักๆ คือ

  1. บ่งบอกภาพในเพจ
  2. บ่งบอกโค๊ด โปรแกรมที่แสดงในเพจ
  3. บ่งบอกคติ หรือวลีของบทกลอนต่างๆ
  4. chart หรือ แผนผัง ไดอะแกรมต่างๆ


figcaptionนั้น ใช้อธิบายเพิ่มเติมเนื้อหาของ figure อีกทีนืงครับมีก็ได้ไม่มีก็ได้ ถ้ามีก็ ใส่ใน figure ได้เลยเช่น

<figure>
   <img src="images/box-img.png">
   <figcaption>ภาพแสดงรูปกล่อง</figcaption>
</figure>

หรือตัวอย่างนี้ใช้ figure กับกลอน
<figure>
   "คุณกำหนดคนที่จะเข้ามาในชีวิตคุณไม่ได้
แต่คุณเลือกตัดเขาออกไปจากชีวิตของคุณได้"
</figure>

หรือตัวอย่างนี้ใช้ figure กับ code คอมพิวเตอร์
<figure>
   $i = 10;
   $j = 20;
   echo $i+$j;
   <figcaption>ตัวอย่างการ echo ด้วยตัวแปรใน php</figcaption>
</figure>

ง่ายๆ นะครับ figure นั้น คืออะไรก็ได้  ที่เราบังคับเอากรอบใส่มันเป็นภาพ ไม่
ว่าจะเป็นตัวอักษร หรือโค๊ดโปรแกรม หรืออะไรก็ตาม
ให้คิดภาพว่า figure เป็นกรอบรูป แล้วเราเอากรอบรูปนี้ไปครอบกับอะำร
ก็ตาม สิ่งที่อยู่ในกรอบรูปจะกลายเป็นภาพทันที น่าจะพอเข้าใจได้บ้างแล้วนะครับ
และเมื่อเราครอบ figure หน้าที่ของสิ่งที่เราครอบจะกลาย
เป็นแค่ ภาพประกอบของบทความ หรือหน้าเพจก็เท่านั้น
เองครับ

วันอังคารที่ 20 พฤษภาคม พ.ศ. 2557

การใช้ NAV ใน HTML5

<nav>

nav แทกนี้มีไว้เพื่อแสดงลิ้งค์หลักๆ ของหน้าเพจ นั้นๆ ครับ ซึ่งเห็นได้ในส่วนรองลงมาจาก header ของเว้บไซต์ทั่วๆ ไป

แต่ก็ไม่จำเป็นว่า ทุกลิงค์ของหน้าเพจนั้นๆ จะต้องคลุมด้วย nav นะครับ แนะนำให้คลุมไว้ส่วน navigation ของหน้าหลักๆ ของเราเท่านั้นก็พอครับ

ตัวอย่างการใช้ nav tag
<nav>
 <a href="#">หน้าแรก </a> |
 <a href="#">สินค้า </a> |
 <a href="#">บริการ </a> |
 <a href="#">ติดต่อเรา </a> 
</nav>

หรืออีกอย่างหนึ่ง อาจนำ nav นี้ไปไว้ในลิงค์ตรง footer ก็ได้ครับ จุดสังเกตุคือ nav จะคลุมกลุ่มของลิงค์ในหน้านั้นๆ ครับ