Your first web page · หน้าเว็บแรกของคุณ
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · หน้านี้ต้องใช้เบราว์เซอร์ล่าสุด (รองรับ SharedArrayBuffer) กรุณาอัปเดต Chrome, Edge, Firefox หรือ Safari เป็นเวอร์ชันล่าสุด
English
Welcome to the web
- A web page is made with HTML.
- HTML is just text with tags around it.
- You write HTML here and watch it appear — nothing to install.
ไทย
ยินดีต้อนรับสู่เว็บ
- หน้าเว็บ ถูกสร้างด้วย HTML
- HTML คือ ข้อความ ที่มี tags ห่อหุ้มอยู่
- คุณเขียน HTML ที่นี่และดูผลลัพธ์ปรากฏขึ้น — ไม่ต้องติดตั้งอะไรทั้งนั้น
English
How this page works
- Type in the box, then press ▶ to see your page.
- Press ✓ Check to see if your task is correct.
- Stuck? Press 💡 for a hint. Press ↻ to start over.
- Read each step, then press Continue.
ไทย
หน้างานนี้ทำงานอย่างไร
- พิมพ์ลงในช่อง แล้วกด ▶ เพื่อดูหน้าเว็บของคุณ
- กด ✓ Check เพื่อดูว่าการงานของคุณถูกต้องหรือไม่
- ข้างทาง? กด 💡 เพื่อรับ Hint. กด ↻ เพื่อเริ่มใหม่
- อ่านแต่ละขั้นตอน แล้วกด ดำเนินการต่อ
English
Tags wrap your words
- A tag is a word inside angle brackets, like
<p>. - Most tags come as a pair: an opening
<p>and a closing</p>. - A
<p>makes a paragraph — a block of text.
ไทย
แท็กห่อหุ้มข้อความของคุณ
- Tag คือคำที่อยู่ภายในวงเล็บมุม เช่น
<p> - ส่วนใหญ่ Tags มาเป็น คู่: Tag เปิด
<p>และ Tag ปิด</p> - Tag
<p>สร้าง ย่อหน้า — กลุ่มของข้อความ
<p>Hello! This is my first web page.</p>
English
More than one paragraph
- Put each paragraph in its own pair of
<p>tags. - The browser shows them one after another, top to bottom.
ไทย
มากกว่าหนึ่งย่อหน้า
- วางแต่ละย่อหน้าในคู่ของ Tag
<p>แยกต่างหาก - เว็บเบราว์เซอร์จะแสดงผลตามลำดับจากบนลงล่าง
<p>I am learning HTML.</p>
<p>This is fun.</p>
English
Common mistakes
- Tags go in angle brackets; the text you see goes between them.
- Most tags come in pairs, like
<p>...</p>.
ไทย
ข้อผิดพลาดที่พบบ่อย
- Tags อยู่ภายในวงเล็บมุม ส่วนข้อความที่คุณมองเห็นจะอยู่ระหว่างมัน
- ส่วนใหญ่ Tags มาเป็นคู่ เช่น
<p>...</p>
English
Now you try
- Below are two small tasks. Type your HTML and press ▶ to see it.
- Press ✓ Check when you think it is right. You can try as many times as you like.
ไทย
ลองดูเลย
- ด้านล่างมีงานเล็กๆ สองชิ้น ให้พิมพ์ HTML ของคุณแล้วกด ▶ เพื่อดูผลลัพธ์
- กด ✓ Check เมื่อ你认为ว่าถูกต้อง คุณสามารถลองได้หลายครั้งตามใจชอบ
Explore · สำรวจ
HTML is a tree of nodes · HTML คือต้นไม้ของโหนด
Tags nest inside tags — the browser builds a tree (the DOM). · Tag嵌套ใน Tag — เบราว์เซอร์สร้าง ต้นไม้ (DOM)
Write a paragraph that says Hello, world! — type your text between the <p> and </p> tags. · เขียน ย่อหน้า ที่บอก สวัสดีโลก! — พิมพ์ข้อความของคุณระหว่างแท็ก <p> และ </p>
Add a second paragraph below the first one. Make it say I made this. (Use a new pair of <p> … </p> tags.) · เพิ่ม ย่อหน้าที่สอง ใต้ย่อหน้าแรก ทำให้มันบอกว่า ฉันสร้างสิ่งนี้ (ใช้แท็ก <p> … </p> คู่ใหม่)