วันศุกร์ที่ 7 สิงหาคม พ.ศ. 2563

ภาษา HTML, CSS และ JavaScript แตกต่างกันอย่างไร

 

ภาษา HTML, CSS และ JavaScript แตกต่างกันอย่างไร ? เลือกใช้ตัวไหนสร้างเว็บเพจดี ?
HTML, CSS และ JavaScript แตกต่างกันอย่างไร ?หลายคนคงทราบกันดีว่า HTML, CSS และ JavaScript ล้วนเป็นภาษาที่ใช้ในการพัฒนาเว็บเพจ ซึ่งทั้งหมดสามารถใช้งานได้ในโปรแกรมแบบเดียวกัน และแสดงผลบน โปรแกรมเปิดเว็บ หรือ เว็บเบราว์เซอร์ (Web Browser) เหมือนกัน แล้วความแตกต่างของทั้ง 3 ภาษาคืออะไร มาดูกันเลย
ภาษา HTML คืออะไร ?ภาษา CSS คืออะไร ?ภาษา JavaScript คืออะไร ?ตัวอย่างเว็บเพจที่สร้างจากภาษา HTML, CSS และ JavaScriptแนะนำโปรแกรมเขียนเว็บ สร้างเว็บข้อดี และ ข้อเสีย ของ ภาษา HTML, CSS และ JavaScriptภาษา HTML คืออะไร ?ภาษา HTML หรือที่ชื่อเต็มๆ คือ "Hypertext Markup Language" เป็นภาษาคอมพิวเตอร์ที่ใช้ในการพัฒนาเว็บเพจ ใช้สร้างเค้าโครง หรือใส่เนื้อหาข้อความต่างๆ ในหน้าเว็บ โดยใช้ Tag <> เป็นตัวกำหนดจุดเริ่มต้น และ < / > กำหนดจุดสิ้นสุดการทำงาน 
HTML เริ่มพัฒนาโดย Tim Berners Lee ในปี ค.ศ. 1980 (พ.ศ. 2523) เพื่อเสนอต้นแบบสำหรับนักวิจัยใน CERN สำหรับแลกเปลี่ยนเอกสาร ข้อมูลด้านการวิจัย ในปี ค.ศ. 1990 (พ.ศ. 2533) Tim ได้เขียนโปรแกรม และทดลองรันบนเซิร์ฟเวอร์ที่พัฒนาขึ้น ต่อมาเพื่อกำหนดมาตรฐานให้ดีขึ้น W3C (World Wide Web Consortium) จึงเป็นผู้กำหนดสเปกทั้งหมดของ HTML และได้พัฒนารูปแบบไปเป็น XHTML ซึ่งมีการกำหนดความสามารถและมาตรฐานที่รัดกุมมากขึ้น โดยอยู่ภายใต้การควบคุมของ W3C

ตัวอย่างคำสั่งใน HTML  < html > กำหนดจุดเริ่มต้นและจุดสิ้นสุดการทำงานในโปรแกรม< head > กำหนดส่วนหัวเรื่อง< title > กำหนดชื่อจะไปแสดงที่ Title Bar< body > กำหนดเนื้อหาที่จะแสดงบนหน้าเว็บ< h1 - h6 > กำหนดหัวข้อตัวอักษรจะมีขนาดใหญ่และเล็กลงตามลำดับหัวข้อ< i > ตัวอักษรเอียง< p > ขึ้นย่อหน้าใหม่
ภาษา CSS คืออะไร ?ภาษา CSS หรือที่ชื่อเต็มๆ คือ "Cascading Style Sheets" มันเป็นภาษาที่ใช้พัฒนาลักษณะรูปแบบ ใส่พื้นหลัง หรือเพิ่มกรอบข้อความ ของหน้าเว็บ เพื่อเพิ่มความสวยงามให้หน้าเว็บของเรา CSS สามารถกำหนดรูปแบบพร้อมกันทีเดียวได้ ทำให้เวลาแก้ไขไม่ต้องคอยแก้ทีละส่วน
CSS เริ่มพัฒนาในปี ค.ศ. 1994 ถูกกำหนดมาตรฐานโดย W3C การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ซอสโค้ด (Source Code) ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น
การพัฒนา CSS ในแต่ละรุ่นรุ่น ปีที่พัฒนาCSS1 1996 (พ.ศ. 2539)CSS2 1998 (พ.ศ. 2541)CSS3 2011 (พ.ศ. 2554)CSS4 เริ่มพัฒนาตั้งแต่ 2009 (พ.ศ. 2552) แต่ยังไม่มีเบราว์เซอร์รองรับการใส่ CSS ใน HTMLแบบ Inline Stylesเขียนแทรกลงไปในบรรทัดที่ต้องการแก้ไขที่ไฟล์ HTML ได้เลย

แบบ Internal CSS Style 

แยก CSS ออกจาก HTML แต่อยู่ในหน้าเดียวกันกับไฟล์ HTML โดยแทรก CSS เอาไว้ที่ < head >< /head >

แบบ External Style Sheet 

สร้าง CSS เป็นไฟล์ .css ต่างหาก แล้วนำไปใช้ในหน้าเว็บด้วยการเพิ่ม < link rel="stylesheet" href="ชื่อไฟล์.css" type="text/css" / > ไว้ที่ส่วน < head >< /head > ในหน้า HTML


ตัวอย่างคำสั่งใน CSS

font-weight: ขนาดตัวอักษร;  กำหนดความหนาตัวอักษร

text-align : ตำแหน่งตัวอักษร;  กำหนดตำแหน่งตัวอักษร

color : สีตัวอักษร; กำหนดสีตัวอักษร

font-family: 'รูปแบบตัวอักษร'; กำหนดรูปแบบตัวอักษร

background-color : สีพื้นหลัง; ใส่สีพื้นหลัง

ภาษา Javascript คืออะไร ?เป็นภาษาคอมพิวเตอร์ที่ใช้พัฒนาเว็บเพจร่วมกับ HTML ที่ทำให้หน้าเว็บมีความเคลื่อนไหว อาจจะใช้ตรวจสอบความถูกต้องของข้อมูลที่ผู้ใช้งานกรอก หรือใช้เพื่อให้เกิดความเปลี่ยนแปลงบนหน้าเว็บ และเพิ่มลูกเล่นให้เว็บสามารถโต้ตอบกับผู้ใช้งานได้
JavaScript เริ่มพัฒนาโดย Brender Eich พนักงาน บริษัท เน็ตสเคป เดิม JavaScript ใช้ชื่อว่า Mocha และภายหลังได้เปลี่ยนชื่อมาเป็น Live Script และในปี ค.ศ. 1995 (พ.ศ. 2538) ได้ปรับปรุงแล้วตั้งชื่อใหม่ว่า JavaScript จนถึงปัจจุบัน รูปแบบการเขียนภาษาที่ใช้คล้ายคลึงกับ ภาษา C   
การพัฒนา JavaScript ในแต่ละรุ่นรุ่น ปีที่พัฒนาecmascript1 1997 (พ.ศ. 2540)ecmascript2 1998 (พ.ศ. 2541)ecmascript3 1999 (พ.ศ. 2542)ecmascript4 2000 (พ.ศ. 2543)ecmascript5 2009 (พ.ศ. 2552)ecmascript6 เริ่มปี 2015 (พ.ศ. 2558) และปรับปรุงทุกปีการใส่ JavaScript ใน HTMLแบบ Inlineคำสั่งจะอยู่ในหน้าเดียวกับ HTML โดยจะใช้ < script >< /script > กำหนดขอบเขตคำสั่งของ JavaScript 

แบบ External  





chiangraicom

บทความต่างๆในเว็บเป็นประสบการณ์ล้วนๆแอดมินเขียนใว้เป็นวิทยาทานสำรับมือใหม่เรื่องบางเรื่องอาจเก่าแล้วก็ปรับเอาเองนะครับ Facebook & chiangraicom.in.th

  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...