ลิงก์: เชื่อมโยงโลกเว็บ
เรียนรู้วิธีสร้างลิงก์ที่คลิกได้
ลิงก์: เชื่อมโยงโลกเว็บ เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
ลิงก์: การเชื่อมโยงเว็บ
ยินดีต้อนรับสู่บทเรียนถัดไป! วันนี้เราจะเรียนรู้วิธีสร้างลิงก์ใน HTML ลิงก์ช่วยเชื่อมโยงหน้าเว็บต่าง ๆ และช่วยให้ผู้ใช้ไปยังส่วนต่าง ๆ ของอินเทอร์เน็ตได้อย่างง่ายดาย
ลิงก์คืออะไร
ลิงก์คือองค์ประกอบบนหน้าเว็บที่สามารถคลิกได้ และจะนำคุณไปยังหน้าอื่น ส่วนใดส่วนหนึ่งโดยเฉพาะ หรือแม้แต่ไฟล์
ลิงก์สร้างขึ้นโดยใช้แท็ก <a> ซึ่งย่อมาจาก “anchor” หรือจุดยึด
มาสร้างลิงก์อย่างง่ายกัน!
การสร้างลิงก์พื้นฐาน
หากต้องการสร้างลิงก์ ให้ใช้แท็ก <a> พร้อมแอตทริบิวต์ href โดย href จะระบุปลายทางของลิงก์
ตัวอย่าง:
<a href="https://www.google.com">
Visit Google</a>
การเปิดลิงก์ในแท็บใหม่
คุณสามารถทำให้ลิงก์เปิดในแท็บใหม่ได้โดยเพิ่มแอตทริบิวต์ target="_blank" ให้กับแท็ก <a>
ตัวอย่าง:
<a href="https://www.wikipedia.org"
target="_blank">Open Wikipedia in a New Tab</a>
การเชื่อมโยงไปยังหน้าอื่น
ลิงก์ยังสามารถเชื่อมโยงไปยังหน้าอื่นบนเว็บไซต์ของคุณได้ ให้ใช้ URL แบบสัมพัทธ์ (ชื่อไฟล์) แทนที่อยู่เว็บแบบเต็ม
ตัวอย่าง:
<a href="about.html">About Us</a>
การเชื่อมโยงไปยังส่วนที่ระบุ
คุณสามารถเชื่อมโยงไปยังส่วนที่ระบุของหน้าเดียวกันได้โดยใช้ ID เพิ่ม ID ให้กับองค์ประกอบที่ต้องการเชื่อมโยงไป จากนั้นใช้ #id ในแอตทริบิวต์ href
ตัวอย่าง:
<!-- Link -->
<a href="#contact">Go to Contact Section</a>
<!-- Section -->
<h2 id="contact">Contact Us</h2>
<p>Email us at contact@example.com</p>
การเชื่อมโยงไปยังที่อยู่อีเมล
คุณสามารถสร้างลิงก์ที่เปิดแอปพลิเคชันอีเมลของผู้ใช้ได้โดยใช้ mailto: ในแอตทริบิวต์ href
ตัวอย่าง:
<a href="mailto:hello@example.com">
Send an Email</a>
การเพิ่มคำแนะนำเครื่องมือให้ลิงก์
คุณสามารถเพิ่มคำแนะนำเครื่องมือที่ปรากฏเมื่อผู้ใช้เลื่อนตัวชี้ไปบนลิงก์ได้โดยใช้แอตทริบิวต์ title
ตัวอย่าง:
<a href="https://www.python.org"
title="Visit the Python website">Learn Python</a>
ทำได้ดีมาก!
ขอแสดงความยินดี! คุณได้เรียนรู้วิธีสร้างลิงก์ เปิดลิงก์ในแท็บใหม่ เชื่อมโยงไปยังส่วนที่ระบุ และแม้แต่เชื่อมโยงไปยังที่อยู่อีเมลแล้ว ลิงก์คือโครงสร้างสำคัญของเว็บที่เชื่อมโยงทุกสิ่งเข้าด้วยกัน ในบทเรียนถัดไป เราจะเรียนรู้วิธีเพิ่มรูปภาพลงในหน้าเว็บ เตรียมทำให้หน้าเว็บของคุณมีสีสันยิ่งขึ้นได้เลย!
คำถามที่พบบ่อย
บทเรียน “ลิงก์: เชื่อมโยงโลกเว็บ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ลิงก์: เชื่อมโยงโลกเว็บ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ลิงก์: เชื่อมโยงโลกเว็บ”
เรียนรู้วิธีสร้างลิงก์ที่คลิกได้ คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “ลิงก์: เชื่อมโยงโลกเว็บ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- หัวเรื่องและย่อหน้า
- รายการแบบมีลำดับและไม่มีลำดับ
- ลิงก์: เชื่อมโยงโลกเว็บ
- รูปภาพ: เพิ่มรูปลงในหน้าเว็บ