Wed Jun 27 03:33:46 2018 [6855 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 แบบเป็นระบบได้นั้นจำเป็นต้องเข้าใจ HTML อย่างดีก่อน เพราะฉะนั้นอดใจรอกันก่อนนะครับผม
JavaScript
JavaScript น่าจะเป็นภาษาที่เข้าใจยากสุดในทั้งสามตัวนี้แล้ว เพราะถือว่าเป็นภาษาโปรแกรมมิ่งอย่างแท้จริง ซึ่งเป็นภาษาที่ทำให้เว็บที่ static(ไม่มีการเคลื่อนไหว) ที่เราโค้ดกันเบื้องต้นข้างบนนั้นเปลี่ยนมาเป็นเว็บที่ dynamic(มีการเคลื่อนไหว) ได้
เว็บทุกวันนี้แทบทุกเว็บต่างก็ใช้ภาษานี้ในการช่วยให้เว็บไม่ได้เป็นแหล่งที่ให้ข้อมูลเฉยๆ แต่ให้ทำงานซับซ้อนมากขึ้นได้เหมือนโปรแกรมคอมหรือแอปบนมือถือ เช่น เป็นเกมให้เราเล่น เป็นที่ให้เราจองโรงแรม เป็นที่ให้เราคุยงานกับเพื่อนร่วมงานแบบ real-time(ตามเวลาจริง) และอื่นๆอีกมากมาย ทั้งหมดที่ทำให้เว็บมีความสามารถมากขึ้นก็เพราะภาษา JavaScript นี้เลย
อย่างที่เห็นจากตัวอย่างด้านบนว่าการใช้ JavaScript กับเว็บทำให้เว็บดูน่าสนุกขึ้นเยอะเลย! แต่ผมยังไม่แปะโค้ดของตัวอย่างนี้นะครับ เนื่องจากเป็นอย่างสุดท้ายเลยที่เราจะเรียนกัน สำหรับหัวข้อพื้นฐาน Web
ทิ้งท้าย
ผมหวังว่าผู้อ่านคงจะพอเข้าใจคร่าวๆ ว่าเว็บถูกสร้างด้วยภาษาอะไรบ้าง และแต่ละภาษามีความสำคัญอย่างไรกับเว็บนะครับ :) และคงให้ผู้อ่านที่ไม่เคยทำเว็บมาก่อนได้รู้สึกว้าวบ้าง ไม่มากก็น้อยจากแบบฝึกหัดในบทความนี้
แล้วเจอกันบทความหน้าที่จะเจาะลึกถึงภาษา HTML กันครับ!
เว็บทุกวันนี้มีความยุ่งยากซับซ้อนขึ้นกว่าแต่ก่อนมาก ทว่าภาษาโค้ดที่ใช้ในการสร้างเว็บก็ยังมีอยู่สามภาษาหลักๆ ที่ทุกเว็บต้องใช้
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 แบบเป็นระบบได้นั้นจำเป็นต้องเข้าใจ HTML อย่างดีก่อน เพราะฉะนั้นอดใจรอกันก่อนนะครับผม
JavaScript
JavaScript น่าจะเป็นภาษาที่เข้าใจยากสุดในทั้งสามตัวนี้แล้ว เพราะถือว่าเป็นภาษาโปรแกรมมิ่งอย่างแท้จริง ซึ่งเป็นภาษาที่ทำให้เว็บที่ static(ไม่มีการเคลื่อนไหว) ที่เราโค้ดกันเบื้องต้นข้างบนนั้นเปลี่ยนมาเป็นเว็บที่ dynamic(มีการเคลื่อนไหว) ได้
เว็บทุกวันนี้แทบทุกเว็บต่างก็ใช้ภาษานี้ในการช่วยให้เว็บไม่ได้เป็นแหล่งที่ให้ข้อมูลเฉยๆ แต่ให้ทำงานซับซ้อนมากขึ้นได้เหมือนโปรแกรมคอมหรือแอปบนมือถือ เช่น เป็นเกมให้เราเล่น เป็นที่ให้เราจองโรงแรม เป็นที่ให้เราคุยงานกับเพื่อนร่วมงานแบบ real-time(ตามเวลาจริง) และอื่นๆอีกมากมาย ทั้งหมดที่ทำให้เว็บมีความสามารถมากขึ้นก็เพราะภาษา JavaScript นี้เลย
อย่างที่เห็นจากตัวอย่างด้านบนว่าการใช้ JavaScript กับเว็บทำให้เว็บดูน่าสนุกขึ้นเยอะเลย! แต่ผมยังไม่แปะโค้ดของตัวอย่างนี้นะครับ เนื่องจากเป็นอย่างสุดท้ายเลยที่เราจะเรียนกัน สำหรับหัวข้อพื้นฐาน Web
ทิ้งท้าย
ผมหวังว่าผู้อ่านคงจะพอเข้าใจคร่าวๆ ว่าเว็บถูกสร้างด้วยภาษาอะไรบ้าง และแต่ละภาษามีความสำคัญอย่างไรกับเว็บนะครับ :) และคงให้ผู้อ่านที่ไม่เคยทำเว็บมาก่อนได้รู้สึกว้าวบ้าง ไม่มากก็น้อยจากแบบฝึกหัดในบทความนี้
แล้วเจอกันบทความหน้าที่จะเจาะลึกถึงภาษา HTML กันครับ!
เกี่ยวกับผู้เขียน
Pongpat Weesommai
เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom
แสดงความคิดเห็น
Pongpat Weesommai
เคยทำงานเป็นวิศวกรซอฟต์แวร์อยู่ที่ไต้หวัน และเคยทำงานfreelance ให้บริษัทต่างๆ เช่น aCommerce SoftbankTelecom