ค้นหาบทความที่นี่

บทความทั้งหมด

[ESP8266 ตอน 10] บทแทรก Part 2 - HTML

6 ปีที่ผ่านมา

โดย เจ้าของร้าน

ในตอนที่เราทำ ESP8266 Web Server นั้น มีบางส่วนที่เราต้องทำการเขียนหน้าเว็บ ซึ่งเราต้องใช้ภาษา HTML ในการเขียนขึ้นมา แน่นอนว่าลูกค้าร้านเราบางท่านนั้นก็เพิ่งจะเข้ามาเล่น Arduino เพิ่งเริ่มหัดเขียนภาษาซี ก้าวเข้ามาใช้ ESP8266 ก็ปวดหัวกับ IP Address, Port, Host, Server ต่างๆนานามากพอแล้ว ยังต้องมาเจอกับ HTML อีกหรอ เอาเป็นว่าไหนๆมันก็จำเป็นต้องใช้งาน ก็มีความจำเป็นต้องรู้แหละครับ ก็จะอธิบายแบบง่ายๆเบื้องต้นพอใช้งานได้ก็แล้วกันครับ จะอธิบายแบบสั้นมากๆ ก็อปไปใส่ในโปรแกรม Arduino เปลี่ยนหัวข้อเปลี่ยนชื่อก็ใช้งานได้ ส่วนเรื่องอื่นๆจะทิ้งลิงก์ไว้ให้ไปศึกษาเองครับ (เจ้าของร้านเองก็ใช้เว็บนี้อ้างอิงในการเขียน HTML อ่อนแอเหมือนกันครับ)

HTML ย่อมาจาก HyperText Markup Language เป็นภาษาหลักในปัจจุบันที่ใช้ในการสร้างเว็บ หรือการเรียกดูข้อมูลผ่านเว็บเบราเซอร์ ในเว็บต่างๆไม่ว่าจะเว็บหน้าตาขาวๆอย่าง google.com หรือเว็บโซเชียลมีเดียอย่าง facebook.com ล้วนเขียนด้วยภาษา HTML ทั้งสิ้น โดยในปัจจุบัน HTML ได้พัฒนามาถึงรุ่นที่ 5 ที่เรียกว่า HTML5 ซึ่งได้ประกาศใช้เมื่อปี ค.ศ.2014 ปัจจุบันได้พัฒนาเพิ่มเติมเป็นรุ่น 5.2 ที่ประกาศใช้ในปี ค.ศ.2017 และกำลังมีการพัฒนารุ่น 5.3

โครงสร้างพื้นฐานของ HTML
HTML จะต่างจากภาษาซีที่เราเขียนกันตรงที่โค้ดของ HTML จะถูกครอบด้วยสิ่งที่เรียกว่า tag เช่น ส่วนหัวของเว็บ tag คือ header และปิดด้วย /header อยู่หลังสุด โดย tag ทุกตัวนั้นจะต้องอยู่ในวงเล็บสามเหลี่ยม < > โดยโครงสร้างพื้นฐานจะประกอบด้วย header, body และ footer

หากเขียนเป็นโค้ดง่ายๆ จะได้ตามนี้

ส่วน !DOCTYPE เป็นการประกาศว่าเป็นไฟล์ HTML ให้เบราเซอร์ได้รู้ และทั้งหน้าต้องถูกครอบด้วย tag html ในส่วน header นั้นจะมี tag ย่อยคือ h1 ตรงนี้ h1 h2 h3 มันจะเป็นหัวข้อย่อยๆลงไป ความใหญ่ของตัวอักษรก็จะต่างกัน ในส่วน body นั้น tag p คือ paragraph เป็นส่วนให้ใส่ข้อความลงไป และ tag button ก็คือปุ่มกดนั่นเอง

สำหรับใครที่ต้องการเพิ่มเติมเรื่อง tag ต่างๆ เพื่อให้เขียนอยางอื่นได้มากขึ้น สวยงามขึ้น สามารถคลิกดูได้ที่นี่ครับ เป็นภาษาอังกฤษ แต่ไม่ยากครับ อธิบาย tag ต่างๆไว้เข้าใจง่ายเลย
ส่วนเขียนแล้วต้องเขียนใส่ Arduino อัพโหลด เปิดมือถือดูหน้าเว็บว่าโค้ดเราถูกรึเปล่ามันก็จะดูยุ่งยากไปใช่มั๊ยครับ ภาษา HTML นั้นเขียนได้ง่ายๆ notepad ที่มีในเครื่อง Windows ก็สามารถเขียนได้ เพียงแค่ save เป็นไฟล์นามสกุล .html หรือจะใช้ HTML editor ที่มีให้เลือกมากมายทั้ง online, offline ทั้งฟรีหรือเสียเงิน หรือจะใช้โปรแกรมเขียนเว็บอย่าง Adobe Dreamweaver หรือ Adobe Muse สร้างหน้าเว็บขึ้นมาแล้วก็อปปี้ HTML ไปใส่ใน Arduino ก็ได้ครับ

จบไปแล้วสั้นๆ(อันที่จริงจากการนับคำของเครื่องมือสร้างบทความนี้ก็ยาวพอๆกับทุกตอนที่ผ่านมา) หวังว่าทุกท่านคงสามารถนำไปใช้ได้ อีกทั้ง ESP8266 นั้นก็คิดว่าได้อธิบายถึงเรื่องการใช้งานเบื้องต้นไปหมดแล้ว ซึ่งการใช้งานนั้นยังมีการใช้งานขั้นสูงที่ซับซ้อนที่น่าสนใจอีกมาก ทั้งการใช้งานร่วมกับฐานข้อมูล Firebase การใช้งานร่วมกับ Google Assistant สำหรับสั่งงานด้วยเสียง และอื่นๆอีกมาก โดยจะได้ทำเป็นซีรีส์บทความเป็นชุดๆต่อไป สำหรับซีรีส์นี้คงต้องขอจบไว้เท่านี้ 10 ตอนบริบูรณ์ หากข้อมูลตรงจุดไหนผิดพลาด หรือสงสัยตรงจุดไหน สามารถสอบถามหรือแจ้งให้แก้ไข เพื่อความสมบูรณ์ของบทความต่อไป

ESP8266, IoT, Internet of Things, html