• Facebook
• Twitter
• Line

บทความนี้ผมอยากทำมาเพื่อสอนคนเริ่มต้นอยากเขียนเว็บโดยจะสอนอะไรที่จำเป็นสำหรับคนอยากเริ่มต้นนะครับ เช่น Designer หรือคนที่เขียน content หรือบุคคลที่สนใจครับ โดยบทความนี้จะเป็นการสอน html ซึ่งเป็นก้าวแรกของการเข้าสู่การเขียนเว็บครับ

เริ่มต้นกับ HTML ต้องรู้อะไรบ้าง ?

HTML ( ย่อมาจาก Hyper Text Markup Language ) เริ่มต้นอยากรู้ก่อนว่า Browser ( ที่เราใช้เปิดเว็บเนี้ยแหละ ) อ่านได้เลยแม้ว่าจะไม่มี internet ใช่ครับ  ไม่มี internet โดยการเริ่มต้นเรียนรู้ภาษานี้ นั้นไม่ยากและเหมาะกับผู้เริ่มต้น

โดยเจ้าตัว HTML มันมาจาก Hyper Text Markup Language อันนี้เรียกว่ารู้ไว้ประดับก่อน โดยในปัจจุบัน ณ เวลาที่เขียนบทความเป็นเวอร์ชั่น 5 ซึ่งสมัยก่อนเราต้องมานั่งบอกว่า version ที่เราใช้คืออันไหน ซึ่งจำยากมากกกกกกกกกกก ผมก็ไม่จำเอาจริงๆตอนนี้เป็นเวอร์ชั่น 5 ก็ยังไม่จำอยู่ดี ( แฮร่ ) แต่ไม่เป็นไรผมมีวิธีทำให้คุณจำง่ายอยู่แล้วครับไม่ต้องกลัวในบทความนี้แน่นอน

รูปแบบภาษา HTML ( syntax )

ให้จำไว้ก่อนว่าทุกภาษา programming ( บางคนอ่านเจอคำนี้แล้วจะผวา ฮ่าๆ ) มันจะมี กฎการเขียนของภาษานั้นๆอยู่ สิ่งที่เราต้องทำความเข้าใจคือต้องรู้ว่าภาษานั้นๆ มีหลักการเขียนอย่างไร ถ้าให้เปรียบเทียบมันเหมือนภาษาอังกฤษเราว่าจะเขียนบอกปัจจุบันต้องใช้

ประธาน + กริยา + กรรม

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

ในส่วนของ HTML นั้นเวลาเราจะเริ่มต้นรูปแบบที่ต้นแบบเป็นแบบนี้ครับ

เราจะเรียกรูปแบบ ว่า tag ครับ เพราะฉะนั้นต่อไปเราจะเรียกว่า tag เช่น tag strong ก็คือ โดยจะมีบ้าง tag เท่านั้นที่ใช้ไม่ต้องมี tag เปิดกับ tag ปิด

แล้ว tag เปิดคืออะไร สังเกตุว่าอย่างเช่นตัว tag b ที่เรายกตัวอย่างตะกี้เวลาใช้ต้องมี tag เปิดก่อนนั่นก็คือ และมี tag ปิดเสมอก็คือ เพื่อให้สามารถจะอ่านแล้วเอา code ส่วนนี้ไปแสดงใน browser อีกทีครับ

เวลาเรานึกไม่ออกให้ลองเรียกว่า Hamburger Text Markup Language เพราะอะไร ? เพราะมันมี tag เปิด/ปิด ต้องครอบเนื้อหาที่เราอยากให้มันแสดงผลเห็นตาจะเป็นอย่างนี้ครับ

ทดสอบตัวหนา
โดยเวลาจำเป็นแบบนี้

 <--- เหมือนตัวแผ่นแป้งที่ครอบตัวด้านบน
ทดสอบตัวหนา
 <--- เหมือนตัวแผ่นแป้งที่ครอบด้านล่าง

และถ้าหากเราอยากทำ ตัวหนา และ ตัวเอียง ด้วยล่ะ ? ก็สามารถทำได้โดยการใช้ tag ครอบเข้าไปครับหน้าตาจะเป็นแบบนี้

ประโยคนี้คือตัวหนา และมี ตัวเอียง  ด้วยกัน

วิธีการจำอันนี้ผมมาจากเว็บ Designil.com นะครับเคยไปช่วยฝึกสอนเลยได้ความรู้นี้มาครับผมโดยการแสดงผลลัพธ์ของการเขียน เราจะใส่ tag ทั้งหมดอยู่ภายใต้ tag body นะครับ เพราะเนื้อหาในเว็บจะแสดงผลภายใต้ tag body ครับ แล้ว head tag เราจะมาอธิบายกันอีกทีหลังนะครับ แต่ตอนนี้ใช้แค่ title tag ที่ผมใส่ไว้ให้เพื่อเปลี่ยนชื่อ title ของเว็บเราครับคุณสามารถทดลองเปลี่ยนเป็นคำอื่นดู tag title เนี้ยสำคัญเหมือนกัน ณ ตอนนี้ให้คุณจำไว้แค่ว่า bot google จะดูตรงนี้เป็นส่วนประกอบในการค้นหาด้วยยกตัวอย่างเช่นถ้าคุณเปลี่ยนเป็นแบบ code ข้างล่าง

ขอเพิ่มเติมอีกนิดสำหรับบาง tag ที่เขาไม่มีเนื้อหาอยู่ระหว่าง tag เราจะใช้ tag เดียวแล้วใส่ “/” ก่อนจะปิด “>” ซึ่งจะเป็น tag เดียวๆครับตัวอย่างเช่น

ตัวอย่างคือ tag img เราไม่จำเป็นต้องใส่เนื้อหาอะไรอยู่ระหว่าง tag img เราก็ทำการปิดจบในตัวเองได้เลยครับ อันนี้รู้ไว้ก่อนเดี๋ยวเราค่อยไปเจอจริงๆอีกทีตอนอธิบายลงรายละเอียดครับ

  



  ทดสอบตัวแนา

พวก tag ต่างๆที่อยู่ภายใต้ tag head ตอนนี้อย่าเพิ่งสนใจนะครับ ให้สนใจ body เป็นหลักก่อนครับ tag head เป็นเกี่ยวกับพวกข้อมูลของหน้าเพจเรา หรือการประกาศบางอย่างเพื่อให้ตัว browser ทำงานได้ถูกต้องกับการแสดงผลครับ

อธิบายเพิ่มเติมเกี่ยวกับการอ่านบทความนี้นะครับ ถ้าเจอบรรทัดที่เขียนว่า Ex แบบว่าเป็นแบบฝึกหัดนะครับจะมีการถามคำตอบให้คุณทำการเขียนคำตอบไว้ที่ไหนก็ได้ เก็บไว้แล้วไปอ่านเฉลยท้ายบทความโดยคุณอาจจะ comment ไว้ก็ได้ ผิดถูกไม่สำคัญว่าคุณได้เรียนรู้อะไร เพราะฉะนั้นผมจะได้รู้ว่าการอธิบายของผมทำได้ดีแค่ไหน คุณเขียนไว้แล้วอ่านเฉลยเสร็จผมอยากให้คุณ comment คำตอบแรกที่คุณเขียนนะครับ อย่างที่ผมบอกว่าผิดหรือถูกไม่ว่า แค่นี้ถือว่าคุณได้ช่วยผมในการปรับปรุงแล้วครับ

Ex: 1. เนื้อหาที่แสดงอยู่ในเว็บนั้นอยู่ภายใต้ Tag ชื่อว่าอะไร

Ex: 2. Syntax หรือรูปแบบการเขียนในภาษา html เป็นอย่างไร

Ex: 3. การเขียน html ไฟล์ต้องใช้ internet หรือไม่ ?

มาเริ่มสร้างไฟล์กันเถอะ

หลังจากเราเรียนรู้แล้วคราวๆว่ามันทำงานแบบไหน เรามาลองสร้างไฟล์แรกที่จะเป็นไฟล์ html จริงๆกันเถอะครับ อย่างแรกให้คุณสร้างไฟล์ index.html ขึ้นมาก่อน โดยต้องเปิดผ่านเครื่องมือสำหรับการพิมพ์ code หรือเราเรียกว่า IDE คำถามคือ พิมพ์ด้วย microsoft word หรือ notepad ใน window ได้ไหม ? คำตอบคือ ได้ครับแต่พวกเครื่องมือในการช่วยเหลือการพิมพ์ code จะทำให้เราสามารถพิมพ์ได้ถูกต้องและช่วยเหลือเราให้คำแนะนำว่าเราควรจะพิมพ์อะไรยังไง เพราะบางครั้งผมเคยเจอพิมพ์ใน note ของ mac เนี้ยแหละแล้วมันอ่านตัว ฟันหนูเป็นตัวคำพูดเลยทำให้อ่าน code ไม่ได้ครับ

เอาล่ะใครยังไม่มีไม่ต้องกลัวไป download ที่นี่เลย ในบทเรียนนี้เราจะใช้เครื่องมือที่เรียกว่า vscode นะครับวิธีการติดตั้งก็ install ทั่วไปครับ ถ้าใครติดตรงนี้ถามได้ใน comment เลยครับ

หลังจากเราลงเสร็จก็ทำการเลือก new > file เลยครับแล้ว copy code ด้านล่างใส่ไปเลยครับ

  


  สวัสดีชาวโลก

หลังจากคุณ copy ใส่ไปแล้วให้ save ไฟล์ครับชื่อว่า index.html save ไว้ที่ไหนก็ได้หลังจาก save แล้วให้คุณไปเปิด folder ที่เราทำการ save แล้ว double click ที่ตัวไฟล์ครับถ้าไม่มีอะไรผิดพลาดจริงๆมันจะขึ้นหน้าเว็บแล้วมีคำว่า สวัสดีชาวโลก เป็นตัวหนาก็ถือว่าคุณได้ผ่านก้าวแรกของการเขียน code ภาษา html แล้วครับ !!! ยินดีด้วยตบมือ

หลังจากตรงนี้ไปถ้าคุณ coyp code แล้วก็ทำการกด file > save หรือถ้าใน window กด ctrl + s ถ้าใน mac ก็ command + s ได้เลยครับถ้า save แล้วให้เราไปหน้าเว็บที่เปิดไฟล์นี้แล้ว refresh page ได้เลยจะเห็นการเปลี่ยนแปลงครับ

HTML tag เกี่ยวกับตัวอักษร

ต่อมาเราจะมารู้จักเกี่ยวกับพวก Tag เกี่ยวกับตัวหนังสือกันก่อนนะครับ Tag ที่ใช้กันหลักๆ มีดังนี้ครับ h1 – h6 โดย H1 จะใหญ่ที่สุดครับและ google bot จะให้ความสำคัญกับ Tag h1 ก่อนเวลาใช้ลองใส่โค้ดตามนี้ดูครับ

  


  
นี่คือ H1
  
นี่คือ H2
  
นี่คือ H3
  
นี่คือ H4
  
นี่คือ H5
  
นี่คือ H6

ต่อมาจะเป็นเกี่ยวกับ tag p ย่อมาจาก พารากราฟนั่นเองหรือย่อหน้า เวลาที่เราพิมพ์ๆใน WordPress พวกตรงเนื้อหาก็จะถูกครอบคลุมด้วย tag p เสมอ ต่อมาก็จะเป็นพวก tag ตัวหนา ตัวเอียง ตัว link โดยเรียงตามนี้เลยนะครับ

  


  
ตรงนี้เป็นพารากราฟ
  ตัวหนา
  ตัวเอียง
  ใส่ link เพื่อไปหน้าอื่น

จะสังเกตุว่าเนื้อหาภายใต้ tag p ทำไมมันอยู่ข้างบน เพราะว่า tag p มันจะยาวจนเต็มหน้าจอนั่นแหละ แต่พวก tag b ,i,a นั้นจะกว้างเท่ากับตัวอักษรที่พิมพ์ แต่พวกนี้จะสามารถควบคุมได้หลังจากเราเรียนเกี่ยวกับ CSS นะครับ

แล้วเราจะขึ้นบรรทัดใหม่ยังไง ? เราก็จะไปรู้จัก tag ต่อไป tag ขึ้นบรรทัดใหม่เราใช้ tag br ครับแต่ tag นี้มีข้อพิเศษตรงที่ไม่ต้องมี tag ปิดเพราะเป็น tag ที่ไม่มีเนื้อหาในระหว่าง tag เวลาใช้งานเราแค่
หรือ
แต่ใน reference ปัจจุบันเขาแนะนำให้ใช้
ก็ได้ครับ เราจะลองเอา tag br ไปใส่ตัวอย่างข้างบนดูนะครับ

  


  
ตรงนี้เป็นพารากรอฟ


  ตัวหนา

  ตัวเอียง

  ใส่ link เพื่อไปหน้าอื่น

เราจะสังเกตุว่าตัว tag a ในตัวอย่างที่ copy เราจะมีส่ิงใหม่โผล่มาที่เขียนว่า href โดยเราจะเรียกสิ่งที่เพิ่มเข้ามาใน tag เหล่านี้ว่า attribute ( แอดทริบิ้วท์ ) โดย href เป็น 1 attribute ของ tag a นั่นเองแต่ไม่หมายความว่าทุก tag จะมี href นะครับจะมีบาง tag เท่านั้นที่มีแบบนี้ tag a เป็นตัวอย่างที่ดีสำหรับกรณีนี้ครับ

ในตัวอย่างผมได้ใส่ค่า “#” ใน attribute href อันนี้เป็นการใส่ link แบบไม่ให้ link ไปที่ไหนเลยครับ ตัว tag a นั้นจะเป็นการพาเราไปยังหน้าอื่นๆเหมือนเวลาเราคลิกแล้ว link ไปที่อื่นๆนั่นแหละ โดยเราจะมาลองปรับเปลี่ยนค่ากันหน่อยและไปรู้จัก attribute อื่นๆใน tag a เพิ่มขึ้นด้วยครับ โดยเปลี่ยนจากค่า # เป็น //www.google.com ดูครับหน้าตา code จะเป็นอย่างนี้ครับ

  


  
ตรงนี้เป็นพารากราฟ


  ตัวหนา

  ตัวเอียง

  ใส่ link เพื่อไปหน้าอื่น

ผลลัพธ์ในหน้าจอจะเหมือนเดิมจนกระทั่งเราไปคลิกที่ “ใส่ link เพื่อไปหน้าอื่น” พอเรากดตรงนั้นมันจะพาเราไปหน้าเว็บ google.com ทันทีครับ

โดยหากเราใส่แค่ www.google.com ระบบจะพาเราไปหน้า file not found หรือหาไม่เจอนั่นเองเหตุผลเพราะเราไม่ได้ใส่ “//” หรือ “//” นั่นเองครับ ใน internet เราต้องระบุ protocal ในการเรียกด้วยซึ่งถ้าเป็นพวกเว็บไซท์เราจะใช้อยู่สองตัวนี้หลักๆ ไว้เราเก่งค่อยไปเรียนรู้อันอื่นกันครับตอนนี้ก็รู้สองอย่างนี้ไปก่อนครับ

สังเกตุว่าถ้าเรากดแล้วหน้าที่เราดูปัจจุบันจะเปลี่ยนเป็นหน้าเว็บของ google ซึ่งถ้าเราอยากให้เปิด tab ใหม่หรือหน้าอื่นเพื่อให้ user ยังอยู่หน้าเราได้ก็สามารถเพิ่ม attribute ว่า target และค่าเป็น _blank ครับตามนี้

  


  
ตรงนี้เป็นพารากราฟ


  ตัวหนา

  ตัวเอียง

  ใส่ link เพื่อไปหน้าอื่น

Ex: 4. เราควรจะใช้ tag h1 มากสุดกี่อันใน 1 บทความ

Ex: 5. ถ้าหากเรามี tag หน้าตาแบบนี้ ตรง aaa เราเรียนสิ่งนี้ว่าอะไร ?

tag รูปภาพ

ต่อไปเราไปรู้จักกับ tag ที่ใช้ประจำเช่นกันคือ tag img ครับมาจากคำว่า image หรือรูปภาพนั่นเอง วิธีใช้ตัว tag img จะไม่มี tag ปิดอีกเช่นกันครับ เพราะตัวมันเองไม่จำเป็นต้องมีเนื้อหาระหว่าง tag โดยหลักๆจะมี attribute สำคัญก็คือ src ครับวิธีใช้ไปดูกันเลย !!

อย่างแรกเลยให้เราทำการสร้าง folder ใหม่ในที่เดียวกับ file index.html ของเราครับเข้าไปที่ folder แล้วกด new folder ตั้งชื่อว่า images นะครับแล้วทำการเซฟภาพด้านล่างไปเก็บไว้ครับ

ตอนนี้เรามาใส่ภาพให้กับไฟล์ index.html กันดีกว่าครับโดย code จะเป็นแบบด้านล่างครับ

  


  
ทดสอบการใส่รูปด้วย tag img
  

จากที่เราได้เรียนรู้มาเรื่อง tag สามารถซ้อนกันได้ เราจะลองผสมการซ้อนกันเช่น ในตัวอย่างของ tag img ถ้าสมมติเรามีโจทย์ว่า อยากให้คลิกที่รูปแล้วไปยังเว็บ google เราจะทำยังไง ?

ใช่แล้ว !! เราก็แค่เอา tag a ไปครอบ tag img อีกทียังไงล่ะ เอาล่ะเรามาลองกันดีกว่าครับเราจะเพิ่มเติม code ตามด้านล่างครับ

  


  
ทดสอบการใส่รูปด้วย tag img
  
    
  

ถ้าสังเกตุผมจะ จัดระยะของ tag ซ้อนกัน เช่นในตัวอย่าง code ข้างบนเราใช้ tag a ครอบ tag img เราก็จะจัดระยะ ให้มันขยับเข้าไปข้างในเพื่อเวลาเรามองจะมองง่ายและเข้าใจว่า tag ไหนเป็นลูกของ tag อะไร เราเรียกการจัดระยะว่า indent ( คือ การกด tab หรือกด space bar เลือกเอาแต่ส่วนใหญ่จะกด tab แล้ว set up ว่าจะให้เลื่อนเป็นระยะ tab เท่าไรหรือว่าเป็น space เท่าไรครับ อยู่ตรงขวาล่างของโปรแกรม vscode )

tag เกี่ยวกับรายการ ( list )

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

โดย tag ที่เราจะไปรู้จักกันต่อคือ tab ul ครับโดย tag ul จะพิเศษตรงที่ว่าจะใช้ tag นี้ต้องมี tag li เป็นลูกภายใต้ tag ul เสมอครับหน้าตาการใช้งานจะเป็นแบบนี้ครับ

 
รายการที่อยากจะแสดง

โดย ul จะย่อมาจาก unorder list หรือรายการที่แบบไม่มีเลขกำกับ ในทางกลับกันเราก็มีรายการแบบมีตัวเลขเหมือนกันคือ ol ( order list ) นั่นเองหรือ li ก็คือ List item นั่นเองครับเราไปดู code เหมือนภาพในตัวอย่างรายการกันครับ

  


  
รายการอาหาร
  

    
หมูกรอบผัดพริกแกง
    
ไข่เจียวกุ้งสับ
    
กะเพราไก่ไข่ดาว
  

แล้วเราจะลองใช้ tag ol ด้วยเช่นกันตามตัวอย่างข้างล่างเลยครับ

  


  
รายการอาหาร
  

    
หมูกรอบผัดพริกแกง
    
ไข่เจียวกุ้งสับ
    
กะเพราไก่ไข่ดาว
  
  
ขั้นตอนการสั่งอาหารที่ร้าน
  

    
หยิบกระดาษ ปากกา เมนูที่ตะกร้า
    
เขียนและวางที่โต๊ะด้านน้ำร้าน
    
น้ำบริการตัวเองนะคะ :)
  

ผลลัพท์จะเป็นแบบนี้ครับ

ซึ่งจริงๆแล้ว tag ul นั้นปกติเราจะเอาไปใช้ทำพวกเมนูในเว็บครับ ซึ่งตอนนี้คุณยังทำแบบนั้นไม่ได้เพราะว่าเราต้องเรียนรู้ css ก่อนถึงจะทำได้แต่ตอนนี้ให้คุณรู้ไว้ก่อนว่าจะใช้งานเราก็จะใช้แบบนี้ครับ

Ex: 6. หากต้องการสร้างรายการแบบมีตัวเลขบอกลำดับเราต้องใช้ tag ชื่อว่าอะไร ?

Tag เกี่ยวกับ form

Tag ต่อไปที่เราจะไปเรียนกันนั้นเป็นเกี่ยวกับเรื่องการรับค่าจาก user ให้กรอกข้อมูลโดยการรับค่าก็มีหลากหลายโดยผมจะให้คุณเรียนรู้การใช้งานไม่เยอะมากเพราะอาจจะงงว่าอะไรใช้ยังไง และปัจจุบันมันมีการใช้งานหลายแบบมากเอาล่ะไม่พูดมากไปดูกันเลยดีกว่า

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

ซึ่งตอนนี้เราอาจจะไม่ใช้แต่อยากให้รู้ไว้ก่อนครับเพราะว่าถ้าเรายังเขียน javascript ไม่เป็นการส่งค่าต่างๆเราคงต้องเขียนแบบเดิมกันก่อนครับไว้เราเขียนรู้ javascript แล้วค่อยว่ากันครับ
tag แรกที่เราจะไปรู้จักกันคือ tag input นะครับหน้าตาของ tag input จะเป็นแบบนี้ครับ
โดยจากที่เราเรียนรู้มาแล้วเกี่ยวกับเรื่อง attribute ด้วย tag input จะมี attribute เยอะมากอันนี้ผมตัดมาแล้วเหลืออันที่ใช้จริงๆนะครับ อธิบายคือ
type กำหนดว่า input อันนี้เราจะให้รับข้อมูลแบบไหน โดยปัจจุบันใน html5 มีเยอะมากกกกกก แต่ให้คุณรู้ไว้ก่อนว่ามันเป็นตัวกำหนดชนิดของการรับข้อมูลครับ ไม่ต้อง งงเดี๋ยวเราไปทำกันในบทความครับ
name อันนี้คือ attribute สำหรับใช้อ้างอิงค่าเวลาเราส่งค่าไปให้ทางฝั่ง back-end หรือหลังบ้าน ณ ตอนนี้ยังไม่ใช้แต่ถ้าเราจะเขียนรับค่ายังไงก็ต้องรู้ไว้ครับ เพื่อเวลาส่งข้อมูลปลายทางเขาจะได้รู้ว่า ตัวแปรชื่ออะไร ที่ฉันต้องหยิบเพื่อเอามาใช้เก็บ ชื่อจริง เขาก็จะเอาค่าจาก name เนี้ยแหละครับ ในตัวอย่างเขาก็จะหยิบ first_name
value ค่าที่กรอกใส่ input ตัวนี้
placeholder ค่าที่จะแสดงเมื่อ input นี้ยังไม่ถูกกรอก
เอาล่ะหลังจากเรียนรู้กันไปแหละเรามาลองใส่ input ตัวแรกกันดีกว่าครับ



  


  
กรอกข้อมูลของท่าน
  
    
  



 ตัว tag form ที่ครอบจะไม่แสดงผลอะไรนะครับใช้ครอบเพื่อให้รู้ว่าพวก tag input ภายใต้มันจะส่งค่าทั้งหมดไปไหนครับ
คราวนี้เราจะมาลองปรับเปลี่ยนตัว input ให้เป็นแบบอื่นๆอีกครับ ใน html5 เนี้ยมันมี input type ใหม่ๆมาเยอะเพื่อให้เราใช้งานได้ง่ายขึ้นครับเราไปดูกันดีกว่าว่ามีอะไรอีกบ้างครับ
input type ต่อมาที่เราจะใช้คือ type email ครับ เวลาที่เราต้องการอยากให้ user กรอกรูปแบบที่เข้ามาเป็น email โดยตัว input นั้นจะช่วยเช็คให้เราครับ หน้าตาการใช้งานเป็นแบบนี้ครับ
โดยการใช้งานเราจะไม่เห็นการตรวจรูปแบบถ้าเราไม่ใช่ input อีกตัวช่วยเหลือครับ นั่นคือ input type submit ซึ่งมันจะทำให้ ทุกๆ tag input ภายใต้ form ส่งค่าไปยัง attribute action ของ form ครับ หน้าตาการใช้งานจะเป็นแบบนี้ครับ
หน้าตาจะเป็นปุ่มนั่นเองเอาล่ะ เราจะเอาสอง input นี้มาใช้งานพร้อมกันครับ code ตัวอย่างจะเป็นแบบนี้



  


  
กรุณากรอกอีเมล
  

    
      
  
  



หน้าตาที่เราจะได้เป็นแบบนี้ครับ
เมื่อเรากดปุ่ม “สมัครสมาชิก” เราจะไม่เกิดอะไรขึ้นเพราะเรายังไม่ได้ให้ input ตรวจสอบเรื่องการส่งค่าว่างครับ แต่ถ้าหากเราลองใส่ค่าลงไปแล้วลองกดปุ่ม สมัครสมาชิก ใหม่จะได้แบบนี้ครับ
โดยสมัยก่อนนั้นมันไม่มีระบบการตรวจสอบข้อมูลเราต้อง เขียนการตรวจสอบเอง ซึ่งแต่ก่อนต้องเรียนรู้ด้าน javascript ก่อนถึงจะทำได้นะครับ แต่ html5 ตรงนี้ช่วยเหลือเราระดับหนึ่งแล้ว แต่การตรวจสอบเป็นแบบทั่วๆไปถ้าหากเราต้องการตรวจสอบเองอีกก็ต้องเขีัยน javascript มาช่วยเหลืออีกทีครับ
คราวนี้เราสามารถลอง type ของ input ได้หลายแบบตามนี้เลย //www.w3schools.com/html/html_form_input_types.asp
เอาไปลองกันดูนะครับ
attribute ตัวต่อไปสำหรับการเรียนรู้ของเราคือ placeholder หรือเวลาที่ input ตัวนี้ยังไม่ถูกกรอกเราจะให้แสดงอะไรอย่างในตัวอย่างที่ผ่านมาจะเห็นว่า input มันจะแสดงว่า “your email” ซึ่งเราสามารถเขียนบอกให้คนเข้าชมเว็บรู้ได้ว่า input นี้ต้องใส่อะไรครับ
input ต่อมาที่เราต้องรู้คือ textarea tag ที่เป็นช่องให้กรอกแบบหลายบรรทัดเราไปลองใช้กันดูครับหน้าตา code จะเป็นแบบนี้ครับ



  


  
กรุณากรอกรายละเอียดของท่าน
  

    ที่อยู่:

    

    
  




จะเห็นว่าเราจะมี attribute ใหม่มาอีกสองตัวสำหรับ textarea คือ cols และ rows โดยอธิบายดังนี้ครับ
cols ย่อมาจาก columns หรือจำนวนของตัวอักษรในแนวตั้ง ถ้ามองคือจำนวนตัวอักษรต่อหนึ่งแถวนั่งเอง
rows อันนี้ไม่ได้ย่อเป็นคำแปลตรงๆคือ แถว ถ้าเราเพิ่มจำนวนของค่านี้เราจะได้ textarea ที่ยาวลงมาข้างล่างเยอะ
บางคือบอกว่า เคยปรับพวกค่านี้แล้วมันกว้างยาวไม่ถูกใจอย่าเพิ่งหงุดหงิดครับเพราะการจะทำแบบนั้นได้เราต้องเรียนรู้ CSS ก่อนครับ
Ex: 7. ให้ลองทำผลลัพธ์ออกมาตามภาพด้านล่างเอา code มาแปะเป็นคำตอบ
HTML5 มี tag อะไรใหม่
หลังจากเราเรียนรู้กันมาในบทความนี้แล้วเรามาเรียนรู้อีกหน่อยนะอย่าเพิ่งท้อ เพราะอันนี้สำคัญสิ่งที่เราต้องรู้จัก Tag ใน HTML5 นั่นก็คือ Tag ดังนี้ครับ
header tag โดยการใช้งานก็เหมือน tag ทั่วๆไปในคลุมเพื่อบอกว่าตรงนี้เป็นพื้นส่วนบนของเว็บซึ่งแต่ก่อนมันไม่มี ถามว่าประโยชน์มันดียังไงก็คือตัว tag เองบอกแค่ผู้พัฒนาหรือว่าพวก bot ของ google ว่าตรงนี้เป็นส่วนไหนของเว็บครับ

   .....
footer tag ทำงานเหมือน header tag เลยเป็นการบอกว่าตรงจุดนี้เป็นพื้นที่ส่วนล่างของเว็บ
section กับ article tag สองอย่างนี้ใช้เหมือนกันจะเอาอะไรคลุมอะไรก็ได้ไว้บอกว่าตรงนี้เป็นส่วนเนื้อหาของเว็บนะ แล้วสามารถซ้อนกันได้อีกด้วย แต่แนะนำว่าใช้ article ก่อนจะสื่อความหมายได้ดีกว่าครับ

  

    บทความเกี่ยวกับการเรียนรู้ html ในเว็บ oxygenyoyo.com
  
  

    html5 คือ ....
  
nav tag ใช้เพื่อบอกว่าสิ่งที่มันคลุมอยู่เป็นตัวนำทางในเว็บควรเอาไปครอบพวก Navigation ต่างๆ เช่น ส่วนเมนูหลัก เมนูรอง ปุ่ม next / previous ทำนองนี้ครับ
เฉลย
Body
มี tag เปิด / ปิด
ไม่
1
Attribute
ข้อ 7 เป็น code ข้างล่างครับ



  


  
สมัครสมาชิก
  

    กรอกอีเมล: 

    

    รหัสผ่าน: 

     

    ชื่อ-นามสกุล: 

    

    วันเกิด: 

    

    อายุ: 

    

    เว็บไซ​ต์: 

    

    ที่อยู่: 

    

    
  




สุดท้ายก่อนจากกัน
ในบทความนี้ไม่ใช่ว่าคุณอ่านเสร็จแล้วจะเป็นเลย ยังคงต้องฝึกฝนเพิ่มเติมถ้าหากสงสัยหรือไปฝึกทำเองแล้วติดปัญหาอะไรก็อยากให้ comment มาถามกันว่าในเพจหรือในเว็บ แต่อยากให้ถามในบทความนี้เพราะถ้าหากคนอื่นที่กำลังอ่านติดเหมือนคุณจะได้ช่วยเหลือกันไปอีกด้วย
หากคุณคิดว่าบทความเป็นประโยชน์สำหรับคุณและคนใกล้ตัวที่กำลังสนใจการเขียนเว็บแล้วล่ะก็ผมอยากให้คุณกรอก email ด้านล่างและ share บทความนี้ไปยังไป social ของคุณ ก็เป็นกำลังใจมากๆสำหรับผมแล้วครับเพื่อรับข่าวสารและผมจะทำบทความสอนกับมีคอร์สสำหรับคนเริ่มต้นทำเว็บให้คุณสามารถหารายได้ด้วยตัวเองครับ
กลับไปหน้าสารบัญ
สารบัญเริ่มต้นเขียนเว็บ
Facebook
Twitter
Line