ทำเว็บไซต์-front-end

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

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



ทำเว็บไซต์ เริ่มเขียน HTML
เราเรียกนักพัฒนาเว็บไซต์ที่เขียนเว็บด้วยภาษา html,css และ javascript ว่าเป็น front end developer การพัฒนาเว็บไซต์โดยใช้ 3 ภาษาข้างต้นจะเป็นการพัฒนาเว็บไซต์แบบ static page คือยังไม่มีการติดต่อกับฝั่ง server side script และ database อย่างภาษา PHP หรือ MySQL โดยโครงสร้างหลัก ๆ ของการทำงานส่วน front end จะประกอบไปด้วย 3 ภาษาหลัก ๆ ที่ได้รับความนิยมมากที่สุดคือ


  • 1. ภาษา HTML ( Hypertext Markup Language )
    ภาษา HTML จะทำหน้าที่ในการจัดการโครงสร้างและรูปร่างของเว็บไซต์ เปลียบได้กับร่างกายของมนุษย์ ที่มีส่วนหัว ตัว แขนและขา จะประกอบไปด้วย tag ต่าง ๆ มากมายเช่น


  • 2. ภาษา CSS ( Cascading Style Sheets )
    ภาษา CSS จะทำหน้าที่ตกแต่งหน้าเว็บไซต์ให้สวยงามเปรียบได้กับการใส่เสื้อผ้า แต่งหน้า ทำผม ใส่รองเท้า ทำให้เว็บไซต์แต่ละเว็บไซต์มีองค์ประกอบและความสวยงามที่แตกต่างกันออกไป ตัวอย่าง CSS tag


  • 3. ภาษา Javascript ( หรือปัจจุบันมักใช้ jQuery ซึ่งเป็น javascript ที่ถูกพัฒนาเป็น framework )
    ภาษา Javascript จะทำหน้าที่เพิ่มความสามารถหรือเพิ่มคุณสมบัติพิเศษให้กับเว็บไซต์ ทำให้เว็บไซต์สามารถ interactive กับผู้ใช้งานหรือ user ได้ดีขึ้น ถ้าเปรียบเว็บไซต์กับคนก็ตัวอย่างเช่น ทำให้คนนี้สามารถเล่นดนตรีได้ ทำให้คนนี้สามารถเล่นกีฬาได้ แต่ถ้าเป็นเว็บไซต์ก็ตัวอย่างเช่น ทำให้เว็บไซต์เปลี่ยนสีได้เมื่อมีการคลิก ลบเนื้อหาที่ไม่ต้องการเมื่อคลิกที่ปุ่ม delete โหลดข้อมูลจากเว็บไซต์อื่นมาแสดง เป็นต้น ตัวอย่างการเขียน Javascript


วิธีเขียนงานร่วมกัน 3 ภาษา


  • 1. สร้างไฟล์ทั้ง 3 ไฟล์โดยให้ตั้งชื่อดังนี้
    index.html ไว้เก็บโค๊ด html ทั้งหมด
    style.css ไว้ปรับแต่งหน้าตาของหน้าเว็บไซต์
    main.js ไว้สำหรับจัดการ interactive และ movement ในหน้าเว็บไซต์

  • 2. เรียกใช้งาน css และ js ในไฟล์ index.html
    เปิดไฟล์ index.html ด้วยโปรแกรม editor ทั่วไปเช่น notepad, editplus หรือ dreamweaver ทำการเรียกใช้งานไฟล์ style.css และ main.js ดังนี้


  • 3. เขียนคำสั่งใน style.css
    เขียนคำสั่งเพื่อกำหนด สีตัวหนังสือ สีพื้นหลังและขนาดของ container ใน style.css ดังนี้


  • 3. เขียนคำสั่งใน main.js
    จากนั้นให้เขียนโค๊ดในไฟล์ main.js เพื่อเปลี่ยนสีของตัวหนังสือและพื้นหลังเมื่อมีการคลิกที่ปุ่มเปลี่ยนสี เขียนโค๊ดดังนี้

  • 4. ทดสอบการทำงาน
    ให้ทดสอบการทำงานโดยเปิดไฟล์ index.html ผ่านโปรแกรมเว็บเบราว์เซอร์ เราจะเห็นหน้าตาของเว็บไซต์ โดยที่สีพื้นเป็นสีฟ้าและสีฟ้อนเป็นสีเหลือง ซึ่งเป็นคำสั่งจาก CSS ไฟล์ style.css ดังรูปด้านล่าง


    เริ่มเขียน html


    และถ้าเราทดสอบโดยการคลิกที่ปุ่ม “เปลี่ยนสี” หน้าเว็บจะเปลี่ยนพื้นหลังเป็นสีดำและตัวหนังสือเป็นสีขาว โดยอาศัยความสามารถของ Javascript ที่เขียนคำสั่งไว้ในไฟล์ main.js


    เริ่มเขียน html

กระทู้ใกล้เคียง

ทำเว็บไซต์ ให้มี notification แบบ facebook... ทำเว็บไซต์ ให้มี notification และ badge number แบบ facebook ทำเว็บไซต์ ให้มี notification สำหรับเว็บไซต์บางเว็บอาจจะมีเมนูการแจ้งเตือนการอัพเดทข้อ...
HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง... HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง อีกหนึ่งเทคนิคการทำเว็บไซต์สมัยใหม่ที่นิยมทำกันมากมายในปัจจุบัน เป็นลูกเล่นการทำเว็บไซต์ที่ดึงดูดผู้เข้าชมเว็บไ...
Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยช... Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยชน์ Lazy Load คือคำเรียกของการจัดการกับทรัพยากร ( Resource ) บนเว็บไซต์เพื่อเพิ่มศักยภาพการทำงานขอ...
เว็บไซต์สมัยใหม่ กับ 5 องค์ประกอบหลักที่ควรมี... เว็บไซต์สมัยใหม่ กับ 5 องค์ประกอบหลักที่ควรมี ปฏิเสธไม่ได้ว่า ปัจจุบันสื่อออนไลน์ในรูปแบบต่าง ๆ เว็บไซต์ สื่อสังคม ออนไลน์แอพพลิเคชั่น ก้าวเข้ามามี...