Website/Web App ประกอบไปด้วยภาษาอะไรบ้าง?

Wed Jun 27 03:33:46 2018 [6505 views]

Website/Web App ประกอบไปด้วยภาษาอะไรบ้าง?

เว็บทุกวันนี้มีความยุ่งยากซับซ้อนขึ้นกว่าแต่ก่อนมาก ทว่าภาษาโค้ดที่ใช้ในการสร้างเว็บก็ยังมีอยู่สามภาษาหลักๆ ที่ทุกเว็บต้องใช้

HTML (Hypertext Markup Language)

HTML เป็นภาษากำกับข้อความที่ใช้ในการจัดโครงสร้างหน้าเว็บ เปรียบเทียบง่ายๆ เหมือนใช้ Microsoft Word จัดหน้ากระดาษ พิมพ์หัวข้อเรื่องตัวใหญ่ๆ พิมพ์ย่อหน้า ใส่รูปภาพ แต่ไม่ได้ตกแต่งเพิ่มเติม

มันก็จะประมาณรูปข้างบนถ้าให้เปรียบกับ Microsoft Word ที่ทุกคนน่าจะเคยใช้กันอยู่แล้ว ทีนี้มาดูตัวโค้ดจริงๆกันบ้างว่าหน้าตามันจะเป็นยังไงในภาษา HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML คืออะไร?</title>
  </head>
  <body>
    <h1>HTML (Hypertext Markup Language)</h1>
    <p>
      HTML เป็นภาษากำกับข้อความที่ใช้ในการจัดโครงสร้างหน้าเว็บ เปรียบเทียบง่ายๆ
      เหมือนใช้ Microsoft Word จัดหน้ากระดาษ พิมพ์หัวข้อเรื่องตัวใหญ่ๆ พิมพ์ย่อหน้า ใส่รูปภาพ แต่ไม่ได้ตกแต่งเพิ่มเติม
    </p>
    <img src="images/HTML.png" alt="รูปภาพ HTML">
  </body>
</html>

หลายๆ คนเห็นโค้ดข้างบนคงคิดในใจแบบ "เฮ้ย! เพิ่งเริ่มเองทำไมโค้ดมาเต็ม" ใจเย็นๆก่อนครับ ผมไม่ได้กะจะให้เข้าใจทั้งหมดนี้แต่แรกเลย แค่อยากให้เห็นภาพว่าถ้าจะเขียนเว็บหน้าตาประมาณข้างบนโค้ดจะหน้าตาประมาณไหน
สิ่งที่ผู้อ่านต้องทำคือ

สร้างโฟลเดอร์ขึ้นมาหนึ่งอันชื่อ sample-html
เปิดโปรแกรม text editor ที่ชอบมาหนึ่งอัน
กลับมาที่หน้าเว็บนี้และก๊อปปี้โค้ดข้างบนในช่องสี่เหลี่ยมทั้งหมด
นำเอามันไปแปะไว้ที่โปรแกรม text editor ของเรา
ไปที่เมนู File กด Save as...
เซฟไปยังโฟลเดอร์ที่เราสร้างขึ้นมาที่ชื่อ sample-html แล้วตั้งชื่อไฟล์ที่จะเซฟว่า index.html
สร้างโฟลเดอร์อีกอันในโฟลเดอร์ sample-html แล้วตั้งชื่อว่า images
เซฟรูปด้านล่างนี้ไปใส่ในโฟลเดอร์ images ที่เพิ่งสร้างแล้วตั้งชื่อว่า HTML.png
เปิดไฟล์ index.html โดยบราวเซอร์ใดก็ได้ที่มีอยู่ในเครื่องคอม (Chrome, Firefox, Safari, Edge)
ก็จะได้ผลลัพธ์อย่างภาพด้านล่าง

เห็นไหมครับว่าการสร้างเว็บไม่ได้ยากกว่าที่คิดและผลลัพธ์ที่ได้ก็ไม่ต่างจากที่เราจัดหน้ากระดาษกันใน Microsoft Word เลย หลายๆคนอาจจะยังงงๆ กับโค้ดที่ให้ไปแต่ในบทความต่อไปจะมาอธิบายโครงสร้าง HTML และวิธีโค้ด

CSS (Cascading Style Sheets)

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

หน้าตาหลังจากตกแต่งโดย CSS แบบเบื้องต้น

ในบทความนี้ผมจะยังไม่ให้โค้ด CSS เพราะการที่โค้ด CSS แบบเป็นระบบได้นั้นจำเป็นต้องเข้าใจ HTML อย่างดีก่อน เพราะฉะนั้นอดใจรอกันก่อนนะครับผม

JavaScript

JavaScript น่าจะเป็นภาษาที่เข้าใจยากสุดในทั้งสามตัวนี้แล้ว เพราะถือว่าเป็นภาษาโปรแกรมมิ่งอย่างแท้จริง ซึ่งเป็นภาษาที่ทำให้เว็บที่ static(ไม่มีการเคลื่อนไหว) ที่เราโค้ดกันเบื้องต้นข้างบนนั้นเปลี่ยนมาเป็นเว็บที่ dynamic(มีการเคลื่อนไหว) ได้
เว็บทุกวันนี้แทบทุกเว็บต่างก็ใช้ภาษานี้ในการช่วยให้เว็บไม่ได้เป็นแหล่งที่ให้ข้อมูลเฉยๆ แต่ให้ทำงานซับซ้อนมากขึ้นได้เหมือนโปรแกรมคอมหรือแอปบนมือถือ เช่น เป็นเกมให้เราเล่น เป็นที่ให้เราจองโรงแรม เป็นที่ให้เราคุยงานกับเพื่อนร่วมงานแบบ real-time(ตามเวลาจริง) และอื่นๆอีกมากมาย ทั้งหมดที่ทำให้เว็บมีความสามารถมากขึ้นก็เพราะภาษา JavaScript นี้เลย

ตัวอย่างการใช้ JavaScript ในการทำให้สีพื้นหลังรูปภาพเปลี่ยนไปเรื่อยๆ เมื่อผู้ใช้คลิกหรือแตะรูปภาพ

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

ทิ้งท้าย

ผมหวังว่าผู้อ่านคงจะพอเข้าใจคร่าวๆ ว่าเว็บถูกสร้างด้วยภาษาอะไรบ้าง และแต่ละภาษามีความสำคัญอย่างไรกับเว็บนะครับ :) และคงให้ผู้อ่านที่ไม่เคยทำเว็บมาก่อนได้รู้สึกว้าวบ้าง ไม่มากก็น้อยจากแบบฝึกหัดในบทความนี้
แล้วเจอกันบทความหน้าที่จะเจาะลึกถึงภาษา HTML กันครับ!

ขอขอบคุณรูปภาพจาก Icons8 และ unDraw

เกี่ยวกับผู้เขียน

Pongpat Weesommai

เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom