HTML - วิธีการใช้งานฉบับสมบูรณ์แบบเจาะลึก (ภาษาไทย)

HTML (Hyper Text Markup Language) คือ

ภาษาโปรแกรมที่ใช้สำหรับการสร้าง และจัดโครงสร้างหน้าเว็บ โดยใช้แท็ก (tags) ในการระบุองค์

ประกอบส่วนต่าง ๆ ของเนื้อหา ภาษา HTML นั้นจะถูกเขียนในไฟล์ที่มีนามสกุล .html

และสามารถเปิดดูผ่านเว็บเบราว์เซอร์ได้

เว็บเบราว์เซอร์ (Web Browser) คือ

โปรแกรมซอฟต์แวร์ที่ใช้สำหรับเข้าถึงและแสดงผลข้อมูลจากอินเทอร์เน็ต โดยเบราว์เซอร์จะทำการดาวน์โหลดและแปลข้อมูลที่ได้จากเซิร์ฟเวอร์ให้เป็นรูปแบบที่ผู้ใช้สามารถเห็นและโต้ตอบได้ เช่น หน้าเว็บ (web pages), รูปภาพ, วิดีโอ, และข้อมูลมัลติมีเดียอื่น ๆ

คุณสมบัติและการทำงานพื้นฐานของเว็บเบราว์เซอร์

1. การร้องขอข้อมูล (Request): เมื่อผู้ใช้ป้อน URL (Uniform Resource Locator) หรือที่อยู่เว็บไซต์ในแถบที่อยู่ (address bar) ของเบราว์เซอร์ เบราว์เซอร์จะส่งคำขอ (request) ไปยังเซิร์ฟเวอร์ที่เกี่ยวข้อง

2. การตอบกลับข้อมูล (Response): เซิร์ฟเวอร์จะตอบกลับด้วยข้อมูลของเว็บเพจในรูปแบบของ HTML, CSS, JavaScript และไฟล์สื่ออื่น ๆ

3. การแปลและแสดงผล (Rendering): เบราว์เซอร์จะทำการแปลข้อมูลที่ได้รับมาและแสดงผลเป็นหน้าเว็บที่ผู้ใช้สามารถมองเห็นและโต้ตอบได้

4. การจัดการการโต้ตอบ (Interaction): เบราว์เซอร์ช่วยให้ผู้ใช้สามารถโต้ตอบกับหน้าเว็บ เช่น การกรอกแบบฟอร์ม, การคลิกปุ่ม, และการเลื่อนหน้าจอ

ตัวอย่างเว็บเบราว์เซอร์ที่นิยมใช้

• Google Chrome: พัฒนาโดย Google เป็นเบราว์เซอร์ที่ได้รับความนิยมมากที่สุด

• Mozilla Firefox: พัฒนาโดย Mozilla Foundation มีความเป็นอิสระและเปิดกว้าง

• Microsoft Edge: พัฒนาโดย Microsoft เป็นเบราว์เซอร์ที่มาพร้อมกับ Windows 10

• Safari: พัฒนาโดย Apple ใช้สำหรับอุปกรณ์ของ Apple เช่น iPhone และ Mac

• Opera: มีฟีเจอร์พิเศษหลายอย่าง เช่น VPN ในตัวและตัวบล็อกโฆษณา

ความสามารถเพิ่มเติมของเว็บเบราว์เซอร์

• บุ๊กมาร์ก (Bookmarks): จัดเก็บลิงก์ไปยังเว็บไซต์ที่ชื่นชอบ

• ประวัติการเข้าชม (Browsing History): เก็บบันทึกเว็บไซต์ที่เคยเข้าชม

• ส่วนขยาย (Extensions): เพิ่มฟีเจอร์พิเศษให้กับเบราว์เซอร์

• โหมดไม่ระบุตัวตน (Incognito Mode): ใช้เพื่อเรียกดูเว็บโดยไม่เก็บประวัติการเข้าชม

เว็บเบราว์เซอร์เป็นเครื่องมือสำคัญที่ช่วยให้เราสามารถเข้าถึงข้อมูลและบริการต่าง ๆ บนอินเทอร์เน็ตได้อย่างสะดวกและรวดเร็ว

ประเภทของ Web Developer

1. Front-end Developer: รับผิดชอบในการพัฒนาส่วนที่ผู้ใช้มองเห็นและโต้ตอบบนเว็บไซต์

2. Back-end Developer: รับผิดชอบในการพัฒนาส่วนของเซิร์ฟเวอร์และการจัดการฐานข้อมูล เพื่อให้เว็บไซต์สามารถประมวลผลข้อมูลและทำงานได้อย่างถูกต้อง

3. Full-stack Developer: มีความรู้และความสามารถทั้งในด้าน Front-end และ Back-end สามารถทำงานได้ครบวงจรทั้งส่วนที่ผู้ใช้มองเห็นและส่วนที่อยู่เบื้องหลัง

Web Developer (นักพัฒนาเว็บ) คือ

ผู้ที่มีหน้าที่ในการสร้างและพัฒนาเว็บไซต์ โดยใช้เทคโนโลยีและเครื่องมือต่าง ๆ เพื่อให้เว็บไซต์นั้นทำงานได้ตามความต้องการและมีประสิทธิภาพสูงสุด

หน้าที่หลัก

1. การพัฒนา Front-end: พัฒนา และออกแบบส่วนของเว็บไซต์ที่ผู้ใช้มองเห็นและโต้ตอบ

2. การพัฒนา Back-end: พัฒนา และดูแลส่วนที่เกี่ยวข้องกับการประมวลผลข้อมูลหรือส่วนที่เรียกว่าเซิฟเวอร์ และการจัดการฐานข้อมูล

3. การจัดการฐานข้อมูล: การออกแบบและดูแลฐานข้อมูลที่เก็บข้อมูลของเว็บไซต์

4. การทดสอบและแก้ไขบัก: การทดสอบเว็บไซต์เพื่อหาข้อผิดพลาดและแก้ไขบักที่พบเจอ เพื่อให้มั่นใจว่าเว็บไซต์ทำงานได้อย่างราบรื่นและปลอดภัย

5. การดูแลและบำรุงรักษาเว็บไซต์: การอัปเดตและดูแลเว็บไซต์หลังจากที่เว็บไซต์เปิดใช้งานแล้ว เพื่อให้มั่นใจว่าเว็บไซต์ยังคงทำงานได้อย่างมีประสิทธิภาพและปลอดภัยจากการโจมตีทางอินเทอร์เน็ต

ทักษะและเครื่องมือที่ Web Developer ใช้

• ภาษาโปรแกรม: HTML, CSS, JavaScript, PHP และอื่นๆ

• เฟรมเวิร์ก: React, Angular, Vue.js, Express และอื่นๆ

• ระบบจัดการฐานข้อมูล: MySQL, PostgreSQL, MongoDB, SQLite และอื่นๆ

• เครื่องมือการพัฒนา: Git, GitHub, Docker, Webpack, Visual Studio Code และอื่นๆ

Web Developer เป็นบทบาทที่สำคัญในยุคดิจิทัล เนื่องจากเว็บไซต์และเว็บแอปพลิเคชันเป็นสิ่งที่ผู้คนใช้งานกันอย่างแพร่หลายในชีวิตประจำวัน ไม่ว่าจะเป็นการทำธุรกิจ การศึกษา หรือความบันเทิง

ทำไมต้องเรียน HTML ก่อน CSS และ JavaScript มีเหตุผลหลายประการ ดังนี้:

1.HTML ป็นภาษาที่ใช้ในการสร้างโครงสร้างพื้นฐานของเว็บไซต์ ทุกเว็บไซต์ต้องมีโครงสร้างที่ถูกต้องเพื่อให้เบราว์เซอร์สามารถแสดงผลได้ถูกต้อง

2.การเข้าใจการใช้งาน HTML จะช่วยให้คุณรู้ว่าเนื้อหาแต่ละส่วนของเว็บไซต์อยู่ที่ไหนและมีความหมายอย่างไร

3.การที่คุณมีความรู้พื้นฐานเกี่ยวกับ HTML จะทำให้คุณสามารถเข้าใจการใช้งาน CSS ได้ง่ายขึ้น เนื่องจากคุณรู้ว่า CSS จะใช้กับองค์ประกอบ HTML ที่ไหน

4.การเรียนรู้ HTML และ CSS ก่อนจะช่วยให้คุณมีพื้นฐานในการสร้างโครงสร้างและรูปแบบของเว็บไซต์ ซึ่งจะทำให้คุณสามารถเข้าใจการนำ JavaScript มาใช้กับองค์ประกอบเหล่านั้นได้ง่ายขึ้น

5.การที่คุณเข้าใจ HTML และ CSS จะช่วยให้คุณสามารถระบุปัญหาที่เกิดขึ้นกับเว็บไซต์ได้ง่ายขึ้น เมื่อคุณต้องทำงานร่วมกับ JavaScript และต้องทำการดีบัก คุณจะสามารถระบุได้ว่าเป็นปัญหาที่เกิดจากโครงสร้าง HTML หรือรูปแบบการแสดงผลจาก CSS

การเรียนรู้ HTML ก่อน CSS และ JavaScript จึงเป็นขั้นตอนที่เหมาะสมและสำคัญในการเรียนรู้การพัฒนาเว็บไซต์อย่างมีประสิทธิภาพ

Visual Studio Code (VS Code): Editor ที่ได้รับความนิยมมากที่สุดในปัจจุบัน มีฟีเจอร์ที่หลากหลาย รวมถึงการเติมโค้ดอัตโนมัติ (IntelliSense), การดีบักโค้ด, และส่วนเสริม (Extensions) มากมายที่สามารถเพิ่มฟังก์ชันการทำงานได้

Sublime Text: Editor ที่รวดเร็วและมีประสิทธิภาพสูง มีฟีเจอร์หลายอย่างเช่น การเลือกและแก้ไขหลายจุดพร้อมกัน, การค้นหาและแทนที่ทั่วทั้งโปรเจกต์ และการปรับแต่งด้วยปลั๊กอิน

Atom: Editor จาก GitHub ที่เน้นการปรับแต่งและความยืดหยุ่น มีส่วนเสริมที่มากมายและสามารถปรับแต่งได้ตามความต้องการของผู้ใช้

Brackets: Editor ที่ถูกออกแบบมาโดยเฉพาะสำหรับการพัฒนาเว็บ มีฟีเจอร์เฉพาะเช่น Live Preview ที่ช่วยให้เห็นการเปลี่ยนแปลงของโค้ดในเบราว์เซอร์ทันที

Notepad++: Editor ที่ง่ายและเบา มีฟีเจอร์พื้นฐานที่เพียงพอสำหรับการเขียนโค้ด HTML และรองรับหลายภาษาโปรแกรม

<!DOCTYPE html>: ประกาศชนิดเอกสาร บอกให้เบราว์เซอร์รู้ว่าเอกสารนี้เป็น HTML5

<html>: แท็กนี้ครอบคลุมเนื้อหาทั้งหมดของหน้าเว็บ

<head>: ส่วนนี้ประกอบด้วยข้อมูลเมตา (metadata) เช่น ชื่อเรื่อง (title), การเข้ารหัสอักขระ (charset), และการรวมสไตล์ชีท (CSS)

<title>: กำหนดชื่อของหน้าเว็บ ซึ่งจะแสดงบนแท็บของเบราว์เซอร์

<body>: ส่วนนี้ประกอบด้วยเนื้อหาที่จะแสดงบนหน้าเว็บ เช่น หัวเรื่อง (heading), ย่อหน้า (paragraph), รูปภาพ (image), และลิงก์ (link)

<h1>: แท็กหัวเรื่องระดับ 1 ใช้สำหรับแสดงหัวเรื่องใหญ่สุด

<p>: แท็กย่อหน้า ใช้สำหรับแสดงข้อความในรูปแบบย่อหน้า

<a>: แท็กลิงก์ ใช้สำหรับสร้างลิงก์ไปยัง URL อื่น

HTML elements ประกอบด้วย tags, attributes, และเนื้อหาภายในที่อยู่ระหว่างคู่ของ tags

องค์ประกอบของ HTML Element:

1. Opening Tag: เริ่มต้นด้วยเครื่องหมาย < และสิ้นสุดด้วย > เช่น <p> เป็นการบ่งบอกจุดเริ่มต้นของย่อหน้า

2. Content: เนื้อหาภายใน tags เช่น <p>This is a paragraph.</p> ซึ่ง This is a paragraph. เป็นเนื้อหา

3. Closing Tag: เริ่มต้นด้วย </ และสิ้นสุดด้วย > เช่น </p> เป็นการบ่งบอกจุดสิ้นสุดของย่อหน้า

แอตทริบิวต์คือ การระบุข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ และองค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ได้ แอตทริบิวต์จะถูกระบุในแท็กเริ่มต้นเสมอ (Start tag) แอตทริบิวต์มักจะมาในรูปแบบคู่ที่ประกอบด้วย ชื่อ/ค่า เช่น: name="value"

<tagname name=”value”>Content goes here...</tagname>

Attribute สามารถแบ่งออกเป็นประเภทหลัก ๆ ได้สองประเภท ได้แก่ Global Attributes และ Event Attributes

แต่ละ attribute เหล่านี้มีวัตถุประสงค์และวิธีการใช้งานที่แตกต่างกัน

Global Attributes:

Global attributes เป็น attribute ที่สามารถใช้ได้กับแท็ก HTML ทุกประเภท รวมถึง <header> ด้วย มีดังนี้:

1. accesskey: ใช้กำหนดคีย์ลัดสำหรับการเข้าถึงองค์ประกอบ

example: <tagname accesskey="h">

2. class: ใช้กำหนดชื่อคลาสสำหรับ CSS หรือ JavaScript

example: <tagname class="main-header">

3. contenteditable: กำหนดว่าเนื้อหาภายในแท็กสามารถแก้ไขได้หรือไม่ (true หรือ false)

example: <tagname contenteditable="true">

4. data-*: ใช้เก็บข้อมูลที่กำหนดเองในรูปแบบของ attribute ชื่อขึ้นต้นด้วย data-

example: <tagname data-user="admin">

5. dir: กำหนดทิศทางของข้อความ (ltr จากซ้ายไปขวา, rtl จากขวาไปซ้าย)

example: <tagname dir="ltr">

6. draggable: กำหนดว่าองค์ประกอบนี้สามารถลากได้หรือไม่ (true หรือ false)

example: <tagname draggable="true">

7. hidden: กำหนดว่าองค์ประกอบนี้ถูกซ่อนหรือไม่

example: <tagname hidden>

8. id: ใช้กำหนด ID ที่เป็นเอกลักษณ์สำหรับองค์ประกอบ

example: <tagname id="main-header">

9. lang: กำหนดภาษาของเนื้อหาภายในแท็ก

example: <tagname lang="en">

10: style: ใช้กำหนดสไตล์ CSS ภายในแท็ก

example: <tagname style="background-color: lightblue;">

11: tabindex: กำหนดลำดับการนำทางด้วยคีย์บอร์ด

example: <tagname tabindex="1">

12. title: ให้ข้อมูลเพิ่มเติมเมื่อผู้ใช้เลื่อนเมาส์ไปที่แท็ก

example: <tagname title="Main Header">

Event Attributes

Event attributes เป็น attribute ที่กำหนด JavaScript ที่จะถูกเรียกใช้เมื่อเกิดเหตุการณ์ต่าง ๆ บนองค์ประกอบ มีดังนี้:

1. onclick: เรียกใช้ JavaScript เมื่อคลิกที่องค์ประกอบ

example: <tagname onclick="alert('Header clicked!')">

2. ondblclick: เรียกใช้ JavaScript เมื่อดับเบิ้ลคลิกที่องค์ประกอบ

example: <tagname ondblclick="alert('Header double-clicked!')">

3. onmousedown: เรียกใช้ JavaScript เมื่อกดปุ่มเมาส์ลงที่องค์ประกอบ

example: <tagname onmousedown="alert('Mouse down!')">

4. onmouseup: เรียกใช้ JavaScript เมื่อปล่อยปุ่มเมาส์ที่องค์ประกอบ

example: <tagname onmouseup="alert('Mouse up!')">

5. onmouseover: เรียกใช้ JavaScript เมื่อเลื่อนเมาส์ผ่านองค์ประกอบ

example: <tagname onmouseover="alert('Mouse over!')">

6. onmouseout: เรียกใช้ JavaScript เมื่อเลื่อนเมาส์ออกจากองค์ประกอบ

example: <tagname onmouseout="alert('Mouse out!')">

7. onmousemove: เรียกใช้ JavaScript เมื่อเคลื่อนย้ายเมาส์ภายในองค์ประกอบ

example: <tagname onmousemove="alert('Mouse moving!')">

8. onkeydown: เรียกใช้ JavaScript เมื่อกดแป้นพิมพ์ลงที่องค์ประกอบ

example: <tagname onkeydown="alert('Key down!')">

9. onkeypress: เรียกใช้ JavaScript เมื่อกดแป้นพิมพ์ที่องค์ประกอบ

example: <tagname onkeypress="alert('Key press!')">

10: onkeyup: เรียกใช้ JavaScript เมื่อปล่อยแป้นพิมพ์ที่องค์ประกอบ

example: <tagname onkeyup="alert('Key up!')">

Basic html โครงสร้างเริ่มต้นพื้นฐานของ html

ชุด source code ตัวอย่างการ coding