การกำหนด header (h1,h2,h3,…) ใน HTML

ความสำคัญของการกำหนด Header นั้นจะช่วยระให้เอกสาร HTML ของเราว่าเป็นเอกสารเกี่ยวกับ อะไร เรื่องอะไร เป็นประโยชน์ให้ Search engine ทั้งหลายนำเอกสารเราไป index เมื่อมีคนเข้ามาเซิช

โดยการระบุจะใช้หลักการนี้

Header หมายถึง หัวของเอกสาร โดยหน้าแรกเราจะระบุ h1 ไว้ที่โลโก้ โดยอาจจะซ่อนชื่อเว็บไซด์ไว้ด้วย และหน้าอื่นๆใส่ h1 ตามความหมายของหน้านั้น ส่วน h2 h3 ก็เป็นหัวข้อรองลงมาทื่อยู่ในหน้านั้นๆ

 

 

สอน CCS การเขียน CCS ติดจรวดแบบย่อ โดยใช้ Emmet

Share the joy
  •  
  •  
  •  
  •  
  •  

ความสามารถของ Emmet จะช่วยให้เราเขียน property ของ CCS แบบย่อได้จากปกติเราต้องเขียน เช่นเขียน CSS ว่า margin: 10 px แต่ถ้าใช้ Emmet คุณเขียนแค่ m10 เท่านั้น แล้วสั่งให้มัน expand แล้วถ้าคุณต้องการกำหนดหลายๆ property ล่ะ เช่นต้องการ margin:10px 20px คุณก็แค่ใช้ – แยกระหว่างค่าเป็น m10-20 แล้วถ้าต้องการค่าติดลบก็เพิ่ม – เข้าไปอีกครั้ง เช่น m-10- -20 expand เป็นmargin:-10px -20px;   การย่อหน่วยค่า (Value) โดยปกติถ้าไม่ระบบค่าจะออกมาเป็น px (pixel) ถ้าคุณต้องการหน่วยอื่นๆนอกเหนือจาก px คุณก็ระบุตัวย่อต่อท้ายตัวเลขได้ เช่น w100p = width:100%, โดยใช้ตัวย่ออื่นๆมีดังนี้ p –>…

Details

สอนเขียนโปรแกรม โดยการตั้งชื่อตามมาตฐาน “หลังอูฐ”

ผู้ที่เคยเขียนโปรแกรมคงคุ้นเคยกับการตั้งชื่อไฟล์หรือตัวแปรหลังอูฐมาแล้ว เช่น aboutUs, firstName, lastName,  btnCheck

ท่านคงคิดว่ามันคงทำตามๆกันมา แต่จริงๆแล้วมันมีทีมาที่ไปครับ วิธีเขียนคือแต่ละคำเขียนติดกันโดยใช้ต้วใหญ่นำหน้า ยกเว้นตัวแรก โดยเป็นมาตฐานในการตั้งชื่อของทาง ไมโครซอฟที่เค้ากำหนดขึ้นมา ซึ่งมี 2 มาตฐาน

  • Pascal case
  • Camel case

ซึ่ง pascal case จะแตกต่างจาก camel case คือ ตัวแรกจะเป็นตัวใหญ่ด้วยครับ เช่น AboutUs

CSS Vertical align center จัดกึ่งกลางในแนวตั้ง

การจัดการรูปแบบกึ่งกลาง ปกติในแนวนอนก็สามารถทำได้ง่ายๆโดยใช้คำสั่ง CSS text-align:center แต่ในแนวตั้งนี่สิปัญหา

พรอพเพอตี้ที่ต้องใช้คือ vertical-align:middle สิ่งสำคัญต้องกำหนดความสูงให้อิลีเม้น และกำหนด display:table-cell ด้วย

.box{

display:table-cell;
vertical-align:middle;
height:100px;

}

 

CSS Box sizing ใส่ border และ padding ด้านใน

Share the joy
  •  
  •  
  •  
  •  
  •  

box-sizing:border-box คือ ทำให้การกำหนด border หรือ padding แล้วไม่ไปเปลี่ยนความกว้างและความสูงของอีลีเม้นท์ เช่น ปกติเมื่อเรากำหนดความกว้างให้อีลีเม้น 100px และเราก็ใส่ padding:0 5px; (เพิ่ม padding ซ้ายขวา ข้างละ 5px) ความกว้างของอีลีเม้น จะเป็น 110px ประโยชน์ของมันก็เห็นชัดก็ตอนทำ responsive นี่แหล่ะครับ เช่น เรามี 2 อีลีเม้นซึ่งต้องการจะทำเป็น 2 คอลัมน์ เราก็ใส่ width เป็น 50 % แล้ว float:left ก็จะได้ 2 คอลัมน์ตามภาพ แต่คราวนี้ก็ถึงคราวที่เราจำเป็นต้องใส่ข้อมูลโดยให้มีระยะห่างจากขอบแต่ละด้าน 10px โดยการใส่ padding:10px ผลปรากฎมีระยะระหว่างคอนเท้นสวยงาม แต่มันปลิ้นลงมาสิครับ กระเพราะความกว้างมันเท่ากับ 50%+20px (ซ้ายขวาข้างละ 10px)   แล้วพระเอกอย่าง box-sizing ก็เข้ามาแก้ปัญหาโดยมันจะ padding…

Details