Tag: เขียนเว็บไซต์ html css

HTML (HyperText Markup Language) คือภาษาที่ใช้ในการสร้างโครงสร้างของเว็บเพจ เช่น หัวข้อ ย่อหน้า รูปภาพ และลิงก์

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

การใช้งาน 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" คือการระบุว่าภาษาหลักของเอกสารคือภาษาไทย

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 มีส่วนประกอบหลัก ๆ ดังนี้

DOCTYPE Declaration

เป็นการประกาศประเภทของเอกสาร ซึ่งช่วยให้เบราว์เซอร์ทราบว่าเรากำลังใช้เวอร์ชัน HTML ใด

ตัวอย่างเช่น

<!DOCTYPE html>

นี่เป็นการประกาศว่าเอกสารนี้ใช้ HTML5 ซึ่งเป็นเวอร์ชันล่าสุดของ HTML

ส่วน <html>

ส่วนนี้คือโครงหลักของเอกสาร HTML ทั้งหมด จะครอบคลุมส่วนประกอบทั้งหมดของหน้าเว็บ

<html lang="en">
<!-- โค้ดทั้งหมดของ HTML จะอยู่ภายในแท็กนี้ -->
</html>

แอตทริบิวต์ lang="en" ใช้กำหนดภาษาของเอกสาร ซึ่งสามารถปรับเป็นภาษาอื่นได้ เช่น th สำหรับภาษาไทย

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 ของลิงก์