imkopkap

#4 สร้างเว็บไซต์ภาษา html : การสร้าง list

ใช้เวลา 5 นาที 07/08/2014

ค่อยๆต่อยอดครับ ค่อยทำ วันละนิดวันละน้อย สักวันมันจะเป็นสิ่งที่ยิ่งใหญ่ครับ ผมอยากให้ทุกท่านที่เข้ามาดูเพื่อศึกษา เมื่อท่านกำลังดูแก๊ปอยากให้เปิดโปรแกรมและเขียนตามไปด้วยเลยครับ ( แก๊ปแนะนำ Sublime text ) ซึ่งก็จะมีโค้ดไม่เยอะมาก อยากให้แบบดูด้วยเขียนไปด้วยเลย แก๊ปคิดว่ามันน่าจะเป็นสิ่งที่ทำให้เราจำได้ดีกว่านั่งดูเฉยๆครับ

 

การสร้างเว็บไซต์ด้วย WordPress และการสร้าง Theme WordPress จำเป็นต้องเรียนรู้ html และ css เป็นอย่างมากและ php พอเป็น Basic สักเล็กน้อย ( สำหรับคนแค่อยากทำ Theme WordPress เป็น ) ถ้าอยากทำ Theme WordPress ให้เป็น Advanced แก๊ปแนะนำให้ php ขึ้น Advanced ไปเลยครับ 555 อันนี้ก็แล้วแต่ท่านเลย แต่หลักๆ html css ต้องได้ เพราะถ้าไม่รู้เรื่องของ html css ก็ยากที่จะเข้าใจภาษาของเว็บไต์จะแก้นู้นแก้นี่ ก็ไม่ได้ลำบากอีก ก็จะเป็นปัญหาถามนู้นถามนี่กับคนอื่น แก๊ปก็ได้จัดทำคลิปเพื่อพอเป็นแนวทางในการสร้างสรรค์ผลงานการสร้าง Theme WordPress หรือสร้างเว็บไซต์ต่อไป

 

 

list คืออะไร?

แก๊ปเชื่อว่าบางท่านยังไม่รู้จัก list เจ้า list ก็เหมือนกัน “รายการ” นั่นเอง ใช่ครับ! มันคือรายการที่มีแยะย่อยกันไป เช่น WordPress Joomla html css php อะไรแบบนี้เป็นต้น คือมันจะแบ่งๆไปว่ามีอะไรบ้าง ประมาณนี้ครับในส่วนของ list

List แบบแรกมีชื่อว่า Unordered Lists

 

What Unordered lists ?

เจ้านี้จะเป็น list แบบมีจุดสีดำๆ อยู่ข้างหน้าซึ่งจะเป็น Black Circles หรือจุดวงกลมๆ สีดำนั่นเองถ้าเราต้องการลบจุดสีดำออกเราสามารถใช้ Css ที่คำสั่งว่า  list-style : none; ถ้าบางคนติดใจก็ใช้ไปเลยไม่ต้องกำหนด Css ให้ยุ่งยากแต่แก๊ปเชื่อว่า หลายคนไม่ชอบใช้กัน 555

List แบบที่สองมีชื่อว่า Ordered Lists

 

What Ordered Lists ?

จะคล้ายๆกับ Unorderered Lists แต่ว่าข้างหน้าจะเป็นตัวเลขเฉยๆ ซึ่งเราสามารถลบตัวเลขออกได้โดยใช้โค้ดแบบเดียวกับ Unordered Lists ครับ

List แบบสุดท้านมีชื่อว่า Description Lists

 

What Description Lists ?

ตัวนี้จะไม่เหมือนกับสองตัวด้านบนครับ ตัวนี้เราสามารถกำหนดชื่อหัวข้อมันได้คล้ายๆกับ Table ที่ใช้แท็ก <th> แต่ว่า list แบบนี้จะใช้ได้ง่ายกว่านิดนึงโดยเราใช้แท็กว่า <dt> ซึ่งแท็กตัวนี้จะเป็นการกำหนดชื่อหัวข้อหรือชื่อ Title นั่นเอง ( มันย่อมาจาก Description Title ) ส่วนรายละเอียดตัวนี้ต้องดูได้ที่คลิปครับ

 

สรุปก็คือเจ้า list มีความจำเป็นอย่างมากในการสร้างเมนู การสร้างรายการย่อยๆ อะไรแบบนี้ครับแล้วแต่ใครจะใช้หรือประยุกต์กันแค่นั้นเอง ในส่วนต่อไปผมก็จะมาขึ้นในเรื่องของ การแบ่ง layout หรือใช้แท็ก <div> นั่นเองนะครับ  สำหรับวันนี้ขอบคุณทุกท่านที่เข้ามาชมกันครับ

บันทึกแนะนำ