Computer - ว23287 การสร้างเว็บเพจขั้นสูง1

Computer

จุดประสงค์การเรียนรู้

เมื่อสิ้นสุดการเรียนรู้เรื่อง “การสร้างเว็บเพจขั้นสูง” นักเรียนจะสามารถออกแบบและสร้างเว็บเพจของตัวเองได้อย่างถูกต้อง

ด้านความรู้ (Knowledge)

อธิบายหลักการทำงานของภาษา HTML, CSS และ JavaScript ได้อย่างถูกต้อง
อธิบายแนวคิดของโครงสร้างเว็บไซต์แบบ Responsive Design และการจัดการเลย์เอาต์ด้วย Flexbox หรือ Grid ได้
เข้าใจการนำโค้ดภายนอก เช่น ไฟล์ CSS, JavaScript หรือไลบรารีภายนอก (เช่น Bootstrap) มาใช้ร่วมกับเว็บเพจ

ด้านทักษะ/กระบวนการ (Skill/Process)

เขียนโค้ด HTML และ CSS เพื่อจัดโครงสร้างและตกแต่งเว็บเพจได้อย่างเหมาะสม
ประยุกต์ใช้ JavaScript เพื่อสร้างปฏิสัมพันธ์ (interactive elements) บนหน้าเว็บ เช่น ปุ่มสั่งงานหรือเมนูแบบเลื่อน
สร้างเว็บเพจที่แสดงผลได้ดีในหลายอุปกรณ์ (Responsive Web Design)
ตรวจสอบและแก้ไขข้อผิดพลาดของโค้ด (debugging) เบื้องต้นได้อย่างมีประสิทธิภาพ

ด้านคุณลักษณะอันพึงประสงค์ (Attitude/Disposition)

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

1. ทบทวนพื้นฐานการสร้างเว็บเพจ

ความรู้เบื้องต้นเกี่ยวกับ HTML และโครงสร้างของหน้าเว็บ
การใช้งานแท็กพื้นฐาน: html, head, body, div, span, a, img, table, form ฯลฯ
การแทรกภาพ ลิงก์ ตาราง และแบบฟอร์มเบื้องต้น

🧱 ความรู้เบื้องต้นเกี่ยวกับ HTML และโครงสร้างของหน้าเว็บ

1. 📘 HTML คืออะไร?

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

การสร้างเว็บไซต์ด้วยภาษา HTML

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

ไวยากรณ์ในภาษา HTML Feel free to change this text. ตัวอย่างโค้ดด้านบนเป็นโค้ดที่เขียนด้วยภาษา HTML ให้เราลองคัดลอกข้อความนี้ ไปใส่ใน โปรแกรม Notepad++ จากนั้นบันทึกไฟล์เป็นชื่อ test.html เมื่อเราเปิดไฟล์ test.html ขึ้นมา เราควรจะเห็นข้อความ Feel free to change this text. เป็นตัวหนา เราจะสังเกตว่าสิ่งที่ไม่ปรากฏในหน้าจอคือข้อความที่มีเครื่องหมาย < และ > ล้อมรอบอยู่ ซึ่งข้อความแบบนี้ คือค าสั่งในภาษา HTML และมีไวยากรณ์เป็นของตัวเอง เช่นเดียวกับภาษาที่เราใช้สื่อสารอยู่ประจำ

โครงสร้างหลักของเว็บเพจ

โครงสร้างหลักของเว็บเพจควรมีคำสั่ง ไว้ด้านบนสุดของไฟล์ เป็นการ บอกโปรแกรม IE/Firefox/Chrome ว่าก าลังอ่านไฟล์ HTML จากนั้นในบรรทัดถัดมาเรา ควรใช้คำสั่ง และบรรทัดสุดท้ายของไฟล์จะต้องใช้ค าสั่ง ลองพิมพ์ชื่อและนามสกุลของนักศึกษาเป็นภาษาอังกฤษไว้ ระหว่างคำสั่ง และ HTML

คำศัพท์พื้นฐาน

ก่อนที่เราจะเรียนรู้ภาษา HTML เพิ่มมากขึ้ น เราควรจะรู้จักคำศัพท์พื้นฐานก่อน

1. สิ่งที่อยู่ระหว่างเครื่องหมาย < และ > จะเรียกว่า แท็ก (Tag)

2. โดยส่วนมากแล้วแท็กจะมาเป็นคู่ ประกอบไปด้วย แท็กเปิด และ แท็กปิด

3. ตัวอย่างของแท็กเปิดได้แก่ </html> </strong>

4. ตัวอย่างของแท็กปิดได้แก่ แท็กมีลักษณะคล้ายกับวงเล็บ เมื่อมีการเปิดแท็กก็ควรจะมีการปิดแท็ก แท็กสามารถซ้อนกันได้แต่เราควรปิดแท็กที่เปิดหลังสุด

2. 🧩 โครงสร้างพื้นฐานของ HTML

ตัวอย่างโค้ด HTML พื้นฐาน:

<!DOCTYPE html>

<html>

<head>

<title>หน้าแรกของฉัน</title>

</head>

<body>

<h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h1>

<p>นี่คือตัวอย่างเว็บเพจ HTML เบื้องต้น</p>

</body>

</html>

Page updated

Google Sites

Report abuse