
[HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน
HTML5 นั้นมี element หลายตัวที่เพิ่มเข้ามา เมื่อนับรวมกับของเดิมแล้ว จะมีอยู่ 109 elements แล้วคิดว่าคุณจำมันหมดหรือเปล่า มาลองทดสอบกันดีกว่าครับ

HTML5 นั้นมี element หลายตัวที่เพิ่มเข้ามา เมื่อนับรวมกับของเดิมแล้ว จะมีอยู่ 109 elements แล้วคิดว่าคุณจำมันหมดหรือเปล่า มาลองทดสอบกันดีกว่าครับ

เวลาหัดทำ CSS เราคงอยากหาความรู้เพิ่มเติมให้มากที่สุด วันนี้ผมมี Slide มา 5 อัน ดูแล้วน่าจะเข้าใจ CSS มากขึ้นนะครับ

คราวนี้มีเว็บมาแนะนำครับ เป็นเว็บที่มีตัวอย่างการเขียน CSS3 ไว้เรียบร้อยให้เราสามารถนำไปปรับใช้งานได้ เว็บนั้นก็คือ CSS3 Click Chart by Impressive Webs ลักษณะของเว็บก็เป็นแบบนี้ครับ

ในการทำเว็บนั้น เราอาจจะเจอกรณีที่ layout ต้องเปลี่ยนไปตามความกว้าง เช่น เวลาทำเว็บที่เป็น responsive หรือเวลาที่สั่งพิมพ์ทางเครื่องพิมพ์ ตามปรกติแล้ว เราจะเคลียร์ค่า float หรือ width

ในการทำเว็บ เชื่อว่าหลาย ๆ คนต้องรู้จักกับ Lorem Ipsum ถ้าใครยังไม่รู้จักก็ไปดูที่นี่เลยครับ lipsum.com ให้เปรียบเทียบ Lorem Ipsum ก็เหมือนกับข้อความตัวอย่าง

สำหรับ tag ของ HTML นั้น มีชุดของ tag อยู่ชุดนึง ที่ใช้สำหรับบอกถึงความเป็นรายการ หรือ list ซึ่ง tag ที่เกี่ยวกับรายการนั้นจะมีดังนี้ (คำภาษาไทยเนี่ย ผมคิดเองนะครับ ไม่ได้เป็นคำที่เป็นทางการอะไร)

ในการจะเรียนรู้ HTML CSS นั้น ผมคิดว่าในตอนนี้ไม่น่าจะเป็นเรื่องยากแล้ว เพราะมีข้อมูลความรู้มากมายในอินเตอร์เน็ตให้เราค้นหา ให้เราศึกษา และนี่ก็เป็น 1 ในนั้น มันคือ วิดีโอที่ทาง Google ได้ทำขึ้นเพื่อสอนพื้นฐานของ HTML CSS Javascript เรามาดูกันเลยดีกว่าครับ

เพิ่งไปเจอมา เลยเอามาเขียนไว้เผื่อใครยังไม่รู้ จริง ๆ แล้วเราสามารถกำหนด Stylesheet ให้กับตัว Facebook Like Box ได้นะครับ

ผมว่าตอนนี้ HTML CSS น่าจะเป็นความรู้เรื่องแรก ๆ ที่คนทำเว็บ หรือทำเว็บแอพจำเป็นต้องเรียนรู้ แล้วมันจะดีแค่ไหน ถ้ามีให้เราเรียนกันฟรี ๆ เลย

เชื่อว่าหลาย ๆ คนที่เขียน CSS กันมา ต้องเจอปัญหาว่า ทำไมเขียน CSS มาแล้ว แต่ละ Browser ถึงแสดงผลมาไม่เหมือนกัน และในบรรดา Browser ทั้งหลาย Browser ที่มีปัญหามากที่สุด ก็คงไม่พ้น Internet Explorer หรือที่เราเรียกกันว่า IE

วันนี้เราจะมาเรียนรู้วิธีการใช้ Firebug กันนะครับ โดยในการทำ CSS เนี่ย เวลาเราจะเช็คว่า CSS ที่เราเขียนมานั้น มันผิดตรงไหนหรือเปล่า หรืออยากลองแก้ CSS ดูก่อน

หลายครั้งหลายหน ที่อยากจะจัดการให้ div ตัวนี้ div ตัวนั้นอยู่กึ่งกลาง แต่จะทำยังไงละ มีวิธีมาแนะนำครับ แต่ต้องเป็นกรณีที่เรารู้ความกว้าง และความสูงของ div ตัวนั้นนะครับ

การเขียน CSS แบบ Shorthand นั้น คือ การเขียน CSS ของเราให้กระชับ เป็นระเบียบกว่าเดิม และทำให้ CSS ของเรามีขนาดที่เล็กลง

ในการเขียน CSS เราคงสงสัยว่าทำไมถึงมีการเขียนแยกเป็น ID เป็น class จะใช้ ID อย่างเดียวเลยได้มั้ย หรือจะใช้ class อย่างเดียวเลยได้มั้ย มาไขข้อข้องใจกันดีกว่า

ทำงานกับ CSS มาซักพัก น่าจะได้พบเจอกับ Position กันบ้าง แต่เข้าใจการใช้งานมันกันขนาดไหน เอาเป็นว่า เรามาทำความเข้าใจไปด้วยกันเลยนะครับ CSS : Position นั้นมีอะไรบ้าง

หลายคนอาจจะสงสัยว่า CSS Reset มันมีไว้ทำอะไร มีไว้เพื่ออะไร งั้นเรามาทำความรู้จักกับมันกัน CSS Reset นั้นก็มีไว้สำหรับล้างค่า style ต่าง ๆ ของแต่ละ element ซึ่งก็จะมีคำถามตามมาว่า แล้วเราจะล้างค่ามันทำไม สาเหตุมันก็มาจากว่า แต่ละ Browser ที่เราใช้ ๆ กันอยู่นั้น จะมีค่าเริ่มต้นของแต่ละ element ไม่เหมือนกันครับ ถ้ายังงง ๆ อยู่ มาดูตัวอย่างกันนะครับ

เมื่อวันที่ 3 - 5 ตุลาคมที่ผ่านมา ที่ลอนดอนประเทศอังกฤษมีงานประชุม Future of Web Apps ซึ่งคุณ Chris Coyier นั้นพูดในหัวข้อ Writing Better HTML & CSS เราจึงนำ Slide ที่เค้าใช้ในงานมาแบ่งปันกันครับ

คนที่ศึกษา CSS มาซักพัก น่าจะเจอกับคำว่า z-index ครั้งนี้ผมจะมาแนะนำว่า z-index นั้นใช้ทำอะไรกันแน่ แล้วมันใช้งานอย่างไร

ปรกติทุกวันก็นั่งดูเว็บนั่นเว็บนี่ หาความรู้ใส่ตัว แล้ววันนึงก็ไปสะดุดกับ Banner ตัวนึง แน่นอนว่าไม่รีรอที่จะคลิ๊กเข้าไปดู แล้วก็พบว่ามันเป็นการแข่งกันทำ CSS >_<

หลาย ๆ คนใช้งาน CSS มาอาจจะเคยใช้ inherit บางคนอาจจะเคยเห็นแต่ไม่เคยใช้ บางคนอาจจะไม่เคยเห็นเลยด้วยซ้ำ มาทำความรู้จักกับ inherit ดีกว่าว่ามันคืออะไรนะ

สำหรับคนทำงานเกี่ยวข้องกับ CSS แล้ว Float เป็นทั้งตัวช่วย และตัวปัญหา ดังนั้นเรามาทำความรู้จัก Float กันดีกว่า