เรียนเขียนเว็บ Archives - Page 4 of 4

การใช้งาน Elements HTML

HTML (Hypertext Markup Language) เป็นภาษาหลักที่ใช้ในการสร้างโครงสร้างของเว็บเพจ โดย HTML จะประกอบด้วย “องค์ประกอบ” หรือ “elements” ซึ่งใช้ในการจัดระเบียบและกำหนดเนื้อหาภายในเว็บเพจ องค์ประกอบเหล่านี้จะประกอบด้วย “แท็ก” ที่เริ่มและจบการทำงาน (ยกเว้นบางกรณีที่เป็น self-closing) มาดูกันว่า HTML elements ที่สำคัญและพื้นฐานมีอะไรบ้าง

<!DOCTYPE html>

เป็นการประกาศว่าเอกสารนี้ใช้ HTML5 ซึ่งเป็นเวอร์ชันล่าสุดของ HTML
คำสั่งนี้ไม่ได้เป็น element แต่เป็น declaration ที่บอกเบราว์เซอร์ให้แสดงผลเนื้อหาโดยใช้มาตรฐานของ HTML5

<html>

เป็น root element ที่ครอบคลุมเนื้อหาทั้งหมดของเว็บเพจ
องค์ประกอบทุกอย่างในเว็บเพจต้องอยู่ภายในแท็ก <html> นี้

<html>
   <!-- Content goes here -->
</html>

การใช้แท็ก html head และ body ใน HTML

ในเอกสาร HTML มีแท็กหลักๆ ที่ทำหน้าที่ในการจัดโครงสร้างของเอกสาร ได้แก่ <html>, <head>, และ <body> แต่ละแท็กมีบทบาทที่สำคัญแตกต่างกันไป ซึ่งสามารถอธิบายได้อย่างละเอียดดังนี้

แท็ก <html>

แท็ก <html> เป็นแท็กหลักสุดที่ครอบคลุมเนื้อหาทั้งหมดของหน้าเว็บ มันเป็น “ราก” ของเอกสาร HTML และบอกเบราว์เซอร์ว่าข้อมูลทั้งหมดภายในแท็กนี้คือเอกสาร HTML

โครงสร้าง

<html>
  <!-- ส่วนต่างๆ ของ HTML จะอยู่ในนี้ -->
</html>

หน้าที่หลัก

ครอบคลุมทุกเนื้อหาที่เกี่ยวข้องกับ HTML ในหน้าเว็บ
ช่วยให้เบราว์เซอร์เข้าใจว่าเอกสารนี้เป็นไฟล์ HTML
โดยทั่วไป จะมีการกำหนดภาษาของเอกสารในแท็ก <html> เช่น

<html lang="th">
  <!-- เนื้อหาของ HTML จะอยู่ในนี้ -->
</html>

lang="th" คือการระบุว่าภาษาหลักของเอกสารคือภาษาไทย

PHP คืออะไร?

PHP (Hypertext Preprocessor) เป็นภาษาโปรแกรมแบบฝั่งเซิร์ฟเวอร์ (server-side scripting language) ที่ถูกออกแบบมาเพื่อพัฒนาเว็บไซต์และแอปพลิเคชันบนเว็บ โดย PHP สามารถฝังเข้าไปใน HTML และทำงานบนเซิร์ฟเวอร์เว็บเพื่อตอบสนองการร้องขอของผู้ใช้งาน

ลักษณะสำคัญของ PHP

ฝังใน HTML ได้ PHP สามารถเขียนร่วมกับ HTML ได้ ซึ่งทำให้สามารถสร้างหน้าเว็บที่มีความยืดหยุ่นและโต้ตอบกับผู้ใช้ได้

<html>
<body>
   <?php
   echo "Hello, world!";
   ?>
</body>
</html>

ตัวอย่างนี้จะแสดงผลคำว่า “Hello, world!” ในหน้าเว็บ

รันบนเซิร์ฟเวอร์ เมื่อผู้ใช้เรียกดูเว็บเพจที่มี PHP โค้ดเหล่านี้จะถูกรันบนเซิร์ฟเวอร์ก่อน และผลลัพธ์ที่ได้ (เช่น HTML หรือข้อมูล) จะถูกส่งกลับไปยังผู้ใช้ ขณะที่โค้ด PHP จะไม่สามารถมองเห็นได้ในฝั่งผู้ใช้

jQuery คืออะไร?

jQuery เป็นไลบรารี JavaScript ที่ถูกสร้างขึ้นเพื่อช่วยให้การทำงานกับ JavaScript ง่ายและรวดเร็วขึ้น โดยเฉพาะการจัดการกับเอกสาร HTML, จัดการอีเวนต์, จัดการอนิเมชัน, การใช้ Ajax, และการโต้ตอบกับ API ต่างๆ การใช้ jQuery ทำให้การเขียนโค้ดที่ทำงานกับ DOM (Document Object Model) มีประสิทธิภาพมากขึ้นและลดความซับซ้อนของโค้ด

จุดเด่นของ jQuery

ใช้งานง่ายและโค้ดกระชับ jQuery มีรูปแบบการเขียนโค้ดที่สั้นและง่ายกว่า JavaScript ปกติ ทำให้สามารถจัดการกับองค์ประกอบในหน้าเว็บได้อย่างรวดเร็ว โดยไม่ต้องเขียนโค้ดยาวหรือซับซ้อน เช่น การซ่อนแสดงองค์ประกอบในเว็บ การเรียกใช้อีเวนต์ หรือการทำให้หน้าต่าง Pop-up แสดงผล

การทำงานข้ามเบราว์เซอร์ (Cross-Browser Compatibility) jQuery ถูกออกแบบมาเพื่อแก้ปัญหาความแตกต่างของการทำงานของ JavaScript ในเบราว์เซอร์ต่างๆ เช่น Internet Explorer, Firefox, Chrome, Safari และ Opera ทำให้โค้ดเดียวสามารถทำงานได้บนหลายแพลตฟอร์ม

Ajax ง่ายขึ้น jQuery มีฟังก์ชันที่ช่วยในการดึงข้อมูลจากเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชหน้า (Asynchronous JavaScript and XML – Ajax) ซึ่งช่วยให้การสร้างเว็บแอปพลิเคชันที่สามารถดึงข้อมูลแบบเรียลไทม์สะดวกขึ้น

มีปลั๊กอินมากมาย jQuery มีชุมชนขนาดใหญ่และมีปลั๊กอินจำนวนมากที่พัฒนาโดยนักพัฒนาในชุมชนเหล่านั้น เพื่อเพิ่มความสามารถให้กับ jQuery ทำให้สามารถเพิ่มฟีเจอร์ในเว็บไซต์ เช่น สไลด์โชว์, การเลื่อนหน้า, และการทำงานอื่นๆ ได้อย่างง่ายดาย

JavaScript คืออะไร?

JavaScript (JS) คือภาษาการเขียนโปรแกรมที่ถูกออกแบบมาเพื่อใช้ในการพัฒนาเว็บแอปพลิเคชันแบบอินเทอร์แอคทีฟ โดยเป็นภาษาที่ทำงานฝั่งไคลเอนต์ (client-side) หมายความว่ามันทำงานบนเบราว์เซอร์ของผู้ใช้งานโดยตรง ต่างจากภาษาอื่นๆ อย่าง PHP ที่ทำงานฝั่งเซิร์ฟเวอร์ (server-side)

จุดกำเนิดและการพัฒนา

JavaScript ถูกพัฒนาขึ้นครั้งแรกในปี 1995 โดย Brendan Eich ขณะที่เขาทำงานที่ Netscape Communications (ผู้พัฒนาเว็บเบราว์เซอร์ Netscape) เป้าหมายหลักของมันคือการทำให้หน้าเว็บมีการโต้ตอบและตอบสนองมากขึ้น ซึ่งในช่วงแรกนั้นมีชื่อว่า LiveScript แต่ภายหลังถูกเปลี่ยนเป็น JavaScript เนื่องจากความนิยมของภาษา Java ในช่วงเวลานั้น แม้จะมีชื่อคล้ายกัน แต่ JavaScript กับ Java เป็นสองภาษาที่แตกต่างกันอย่างสิ้นเชิง

CSS คืออะไร?

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

โครงสร้างของ CSS

CSS ใช้ “กฎ” (Rules) เพื่อบอกว่าองค์ประกอบ HTML ใดจะได้รับรูปแบบอย่างไร กฎแต่ละกฎประกอบไปด้วยสองส่วนหลัก

ตัวเลือก (Selector) ระบุว่าองค์ประกอบใดใน HTML ที่จะถูกปรับแต่ง

คุณสมบัติ (Property) และค่า (Value) เป็นคู่ข้อมูลที่กำหนดว่าจะเปลี่ยนลักษณะขององค์ประกอบอย่างไร

ตัวอย่าง

h1 {
    color: blue;
    font-size: 24px;
}

ในตัวอย่างนี้ h1 เป็น selector ที่บอกว่าให้เปลี่ยนแปลงรูปแบบของหัวข้อ h1 โดยมีการเปลี่ยนสีเป็นสีฟ้า (color: blue;) และขนาดของตัวอักษรเป็น 24 พิกเซล (font-size: 24px;)

HTML คืออะไร?

HTML (HyperText Markup Language) คือภาษาที่ใช้ในการสร้างโครงสร้างพื้นฐานของเว็บเพจ เปรียบเสมือนโครงกระดูกที่รองรับเนื้อหาต่างๆ บนเว็บไซต์ ทำให้เว็บเบราว์เซอร์สามารถตีความและแสดงผลข้อมูลเหล่านั้นออกมาเป็นหน้าเว็บที่เราเห็นได้

HTML ทำงานอย่างไร?

แท็ก (Tag) HTML ใช้แท็กในการกำหนดโครงสร้างของเอกสาร แท็กจะอยู่ในรูปของคำสั่งที่อยู่ระหว่างวงเล็บเหลี่ยม เช่น <html>, <head>, <body>, <h1>, <p>, <a>, ฯลฯ แต่ละแท็กจะมีหน้าที่แตกต่างกันไป
องค์ประกอบ (Element) แท็กจะรวมกันเป็นองค์ประกอบ (Element) ซึ่งประกอบด้วยแท็กเปิด (เปิดด้วยวงเล็บเหลี่ยม) และแท็กปิด (ปิดด้วยวงเล็บเหลี่ยมและสแลช) เช่น <p>นี่คือย่อหน้า</p>
แอตทริบิวต์ (Attribute) แท็กบางตัวจะมีแอตทริบิวต์ที่ใช้ในการกำหนดคุณสมบัติเพิ่มเติม เช่น <a href="https://www.example.com">ไปที่เว็บไซต์</a> แอตทริบิวต์ href ใช้สำหรับกำหนด URL ของลิงก์