การตั้งค่าหน้า HTML แรกของคุณ
เขียนโค้ด HTML แรกของคุณด้วยโปรแกรมแก้ไขข้อความอย่างง่าย
การตั้งค่าหน้า HTML แรกของคุณ เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
การตั้งค่าหน้า HTML หน้าแรก
ยินดีต้อนรับสู่ส่วนที่น่าตื่นเต้นที่สุดของการเรียนรู้ HTML วันนี้เราจะสร้างหน้า HTML หน้าแรกของคุณตั้งแต่เริ่มต้น เตรียมพร้อมดูโค้ดของคุณมีชีวิตขึ้นมา
เครื่องมือที่ต้องใช้
ในการสร้างหน้า HTML คุณต้องมีเพียงสองสิ่ง:
- โปรแกรมแก้ไขข้อความ: ตัวอย่างเช่น Notepad (Windows), TextEdit (Mac) หรือโปรแกรมแก้ไขอื่น ๆ เช่น VS Code
- เว็บเบราว์เซอร์: Chrome, Firefox หรือเบราว์เซอร์ใดก็ได้สำหรับดูหน้าเว็บ
มาเริ่มเขียนโค้ดกัน
เปิดโปรแกรมแก้ไขข้อความ
ขั้นตอนที่ 1: เปิดโปรแกรมแก้ไขข้อความ
1. เปิดโปรแกรมแก้ไขข้อความของคุณ เช่น Notepad หรือ VS Code
2. บันทึกไฟล์ใหม่เป็น index.html อย่าลืมใส่นามสกุล .html
ตอนนี้เราพร้อมเพิ่มโค้ด HTML แล้ว
เขียนโครงสร้างพื้นฐาน
ขั้นตอนที่ 2: เขียนโครงสร้างพื้นฐาน
หน้า HTML ทุกหน้าต้องมีโครงสร้างพื้นฐาน ให้พิมพ์โค้ดต่อไปนี้ลงในไฟล์ของคุณ:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>เพิ่มหัวเรื่อง
ขั้นตอนที่ 3: เพิ่มหัวเรื่อง
ภายในแท็ก <body> ให้เพิ่มหัวเรื่องลงในหน้าเว็บของคุณ:
<h1>Welcome to My First Web Page!</h1>
เพิ่มย่อหน้า
ขั้นตอนที่ 4: เพิ่มย่อหน้า
ใต้หัวเรื่อง ให้เพิ่มย่อหน้าที่อธิบายหน้าเว็บของคุณ:
<p>This is my first web page, and I’m learning HTML. It’s so much fun!</p>
บันทึกและเปิดหน้าเว็บ
ขั้นตอนที่ 5: บันทึกและเปิดหน้าเว็บ
1. บันทึกไฟล์หลังจากเขียนโค้ดเสร็จ
2. เปิดเบราว์เซอร์
3. ลากไฟล์ index.html ไปวางในหน้าต่างเบราว์เซอร์
เรียบร้อย หน้าเว็บหน้าแรกของคุณพร้อมใช้งานแล้ว
หน้า HTML ฉบับสมบูรณ์ของคุณ
โค้ดสุดท้ายของคุณควรมีลักษณะดังนี้:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My First Web Page!</h1>
<p>This is my first web page, and I’m learning HTML. It’s so much fun!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
ทำได้ดีมาก
ขอแสดงความยินดีกับการสร้างหน้า HTML หน้าแรกของคุณ คุณได้เรียนรู้วิธีสร้างโครงสร้างพื้นฐาน เพิ่มหัวเรื่อง และเขียนย่อหน้าแล้ว ในบทเรียนถัดไป เราจะเรียนรู้วิธีเพิ่มองค์ประกอบที่น่าสนใจยิ่งขึ้น เช่น รูปภาพและลิงก์ลงในหน้าเว็บของคุณ ทำต่อไปให้ยอดเยี่ยม
คำถามที่พบบ่อย
บทเรียน “การตั้งค่าหน้า HTML แรกของคุณ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตั้งค่าหน้า HTML แรกของคุณ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่าหน้า HTML แรกของคุณ”
เขียนโค้ด HTML แรกของคุณด้วยโปรแกรมแก้ไขข้อความอย่างง่าย คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การตั้งค่าหน้า HTML แรกของคุณ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- HTML คืออะไร
- โครงสร้าง HTML: องค์ประกอบพื้นฐาน
- แท็กและองค์ประกอบ HTML
- การตั้งค่าหน้า HTML แรกของคุณ