ทำเว็บไซต์ เขียน HTML, CSS และ Javascript และทำความเข้าใจ

<h3>ทำเว็บไซต์ เริ่มเขียน HTML&comma; CSS และ Javascript และทำความเข้าใจ<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ทำเว็บไซต์ เริ่มเขียน HTML<&sol;strong><br &sol;>&NewLine;เราเรียกนักพัฒนาเว็บไซต์ที่เขียนเว็บด้วยภาษา html&comma;css และ javascript ว่าเป็น front end developer การพัฒนาเว็บไซต์โดยใช้ 3 ภาษาข้างต้นจะเป็นการพัฒนาเว็บไซต์แบบ static page คือยังไม่มีการติดต่อกับฝั่ง server side script และ database อย่างภาษา PHP หรือ MySQL โดยโครงสร้างหลัก ๆ ของการทำงานส่วน front end จะประกอบไปด้วย 3 ภาษาหลัก ๆ ที่ได้รับความนิยมมากที่สุดคือ <&excl;--more--><&sol;p>&NewLine;<ul>&NewLine;<&sol;br><&sol;p>&NewLine;<li><strong>1&period; ภาษา HTML &lpar; Hypertext Markup Language &rpar;<&sol;strong><br &sol;>&NewLine;ภาษา HTML จะทำหน้าที่ในการจัดการโครงสร้างและรูปร่างของเว็บไซต์ เปลียบได้กับร่างกายของมนุษย์ ที่มีส่วนหัว ตัว แขนและขา จะประกอบไปด้วย tag ต่าง ๆ มากมายเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;<html> &NewLine;<head> &NewLine;<title>ข้อความไตเติ้ล<&sol;title> &NewLine;<&sol;head> &NewLine;<body> &NewLine;&Tab;<div> &NewLine; &Tab;<p>เนื้อหาเว็บไซต์จะอยู่ส่วนนี้<&sol;p> &NewLine; <&sol;div> &NewLine;<&sol;body> &NewLine;<&sol;html> &NewLine;<&sol;pre>&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>2&period; ภาษา CSS &lpar; Cascading Style Sheets &rpar;<&sol;strong><br &sol;>&NewLine;ภาษา CSS จะทำหน้าที่ตกแต่งหน้าเว็บไซต์ให้สวยงามเปรียบได้กับการใส่เสื้อผ้า แต่งหน้า ทำผม ใส่รองเท้า ทำให้เว็บไซต์แต่ละเว็บไซต์มีองค์ประกอบและความสวยงามที่แตกต่างกันออกไป ตัวอย่าง CSS tag<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&period;header&lbrace; &NewLine; color&colon;&num;000000&semi; &NewLine; background-color&colon;&num;FFAAFF&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>3&period; ภาษา Javascript &lpar; หรือปัจจุบันมักใช้ jQuery ซึ่งเป็น javascript ที่ถูกพัฒนาเป็น framework &rpar;<&sol;strong><br &sol;>&NewLine;ภาษา Javascript จะทำหน้าที่เพิ่มความสามารถหรือเพิ่มคุณสมบัติพิเศษให้กับเว็บไซต์ ทำให้เว็บไซต์สามารถ interactive กับผู้ใช้งานหรือ user ได้ดีขึ้น ถ้าเปรียบเว็บไซต์กับคนก็ตัวอย่างเช่น ทำให้คนนี้สามารถเล่นดนตรีได้ ทำให้คนนี้สามารถเล่นกีฬาได้ แต่ถ้าเป็นเว็บไซต์ก็ตัวอย่างเช่น ทำให้เว็บไซต์เปลี่ยนสีได้เมื่อมีการคลิก ลบเนื้อหาที่ไม่ต้องการเมื่อคลิกที่ปุ่ม delete โหลดข้อมูลจากเว็บไซต์อื่นมาแสดง เป็นต้น ตัวอย่างการเขียน Javascript<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >var header &equals; document&period;getElementById&lpar;"header"&rpar;&semi; &NewLine;header&period;style&period;color &equals; "&num;FFFFFF"&semi; &NewLine;header&period;style&period;backgroundColor &equals; "&num;FF0000"&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>วิธีเขียนงานร่วมกัน 3 ภาษา<&sol;h4>&NewLine;<ul>&NewLine;<&sol;br><&sol;p>&NewLine;<li><strong>1&period; สร้างไฟล์ทั้ง 3 ไฟล์โดยให้ตั้งชื่อดังนี้<&sol;strong><br &sol;>&NewLine;index&period;html ไว้เก็บโค๊ด html ทั้งหมด<br &sol;>&NewLine;style&period;css ไว้ปรับแต่งหน้าตาของหน้าเว็บไซต์<br &sol;>&NewLine;main&period;js ไว้สำหรับจัดการ interactive และ movement ในหน้าเว็บไซต์&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>2&period; เรียกใช้งาน css และ js ในไฟล์ index&period;html<&sol;strong><br &sol;>&NewLine;เปิดไฟล์ index&period;html ด้วยโปรแกรม editor ทั่วไปเช่น notepad&comma; editplus หรือ dreamweaver ทำการเรียกใช้งานไฟล์ style&period;css และ main&period;js ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"index&period;html"> &NewLine;<html> &NewLine;<head> &NewLine;<title>ข้อความไตเติ้ล<&sol;title> &NewLine;<link rel&equals;"stylesheet" href&equals;"style&period;css"> &NewLine;<&sol;head> &NewLine;<body> &NewLine;&Tab;<div id&equals;"container"> &NewLine; &Tab;<p id&equals;"content">เนื้อหาเว็บไซต์จะอยู่ส่วนนี้<&sol;p> &NewLine; <&sol;div> &NewLine; <input onClick&equals;"changeColor&lpar;&rpar;&semi;" type&equals;"button" value&equals;"เปลี่ยนสี"> &NewLine; &NewLine;<script type&equals;"text&sol;javascript" src&equals;"main&period;js"><&sol;script> &NewLine;<&sol;body> &NewLine;<&sol;html> &NewLine;<&sol;pre>&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>3&period; เขียนคำสั่งใน style&period;css<&sol;strong><br &sol;>&NewLine;เขียนคำสั่งเพื่อกำหนด สีตัวหนังสือ สีพื้นหลังและขนาดของ container ใน style&period;css ดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true" title&equals;"style&period;css"> &NewLine;&commat;charset "UTF-8"&semi; &NewLine;&num;container&lbrace; &NewLine;&Tab;background-color&colon;&num;09C&semi; &NewLine;&Tab;width&colon;600px&semi; &NewLine;&Tab;height&colon;200px&semi; &NewLine;&Tab;text-align&colon;center&semi; &NewLine;&rcub; &NewLine;&num;content&lbrace; &NewLine;&Tab;color&colon;&num;FFFF00&semi; &NewLine;&Tab;font-size&colon;20px&semi; &NewLine;&Tab;font-weight&colon;400&semi; &NewLine;&Tab;padding-top&colon;80px&semi; &NewLine;&rcub; &NewLine;<&sol;pre>&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>3&period; เขียนคำสั่งใน main&period;js<&sol;strong><br &sol;>&NewLine;จากนั้นให้เขียนโค๊ดในไฟล์ main&period;js เพื่อเปลี่ยนสีของตัวหนังสือและพื้นหลังเมื่อมีการคลิกที่ปุ่มเปลี่ยนสี เขียนโค๊ดดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >function changeColor&lpar;&rpar;&lbrace; &NewLine;&Tab;var container &equals; document&period;getElementById&lpar;"container"&rpar;&semi; &NewLine;&Tab;var content &equals; document&period;getElementById&lpar;"content"&rpar;&semi; &NewLine;&Tab;container&period;style&period;backgroundColor &equals; "&num;000000"&semi; &NewLine;&Tab;content&period;style&period;color &equals; "&num;FFFFFF"&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li><strong>4&period; ทดสอบการทำงาน<&sol;strong><br &sol;>&NewLine;ให้ทดสอบการทำงานโดยเปิดไฟล์ index&period;html ผ่านโปรแกรมเว็บเบราว์เซอร์ เราจะเห็นหน้าตาของเว็บไซต์ โดยที่สีพื้นเป็นสีฟ้าและสีฟ้อนเป็นสีเหลือง ซึ่งเป็นคำสั่งจาก CSS ไฟล์ style&period;css ดังรูปด้านล่าง<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;เริ่มขียน-html-1&period;png" alt&equals;"เริ่มเขียน html" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;และถ้าเราทดสอบโดยการคลิกที่ปุ่ม <strong>&&num;8220&semi;เปลี่ยนสี&&num;8221&semi;<&sol;strong> หน้าเว็บจะเปลี่ยนพื้นหลังเป็นสีดำและตัวหนังสือเป็นสีขาว โดยอาศัยความสามารถของ Javascript ที่เขียนคำสั่งไว้ในไฟล์ main&period;js<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;เริ่มขียน-html-2&period;png" alt&equals;"เริ่มเขียน html" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;