home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

สร้าง Navigation Bar แบบมืออาชีพด้วย HTML: บทช่วยสอนขั้นตอนง่ายๆ

การเรียนรู้วิธีสร้างแถบนำทาง (navigation bar) ใน HTML จะช่วยให้คุณยืนหยัดเท้าในการสร้างและพัฒนาเว็บไซต์ อินเทอร์เน็ตกลายเป็นพื้นฐานของข่าวสารทั้งส่วนตัวและมืออาชีพด้วยผู้ใช้งานอินเทอร์เน็ตที่ใช้งานอยู่ 4.66 พันล้านคนทั่วโลก ดังนั้นการเข้าใจ HTML และฟังก์ชันของมันจึงจำเป็นสำหรับผู้ประกอบการหนุ่มสาว

HTML เป็นหนึ่งในภาษาการเขียนโปรแกรมที่นำหน้าระดับโลกในปี 2021 ด้วยสัดส่วน 56% ของโปรแกรมเมอร์ที่บอกว่าพวกเขาใช้ HTML ด้วยการทำตามขั้นตอนง่ายและกระชับเหล่านี้ในการสร้างแถบนำทางใน HTML คุณจะสามารถสร้างแถบนำทางแบบง่าย 配色 (color scheme) และพื้นหลังได้

แถบนำทาง หรือ navbar ใน HTML เป็นส่วนอินเทอร์เฟซผู้ใช้ โดยทั่วไปอยู่บนสุดของเว็บไซต์ ที่ช่วยให้ผู้ใช้สำรวจและเข้าถึงข้อมูล แถบนำทางมาในรูปแบบเมนูแบบดรอปดาวน์ (dropdown menu) หรือ collapse navbar ที่มีชื่อคลาส แอปพลิเคชันที่มีคุณสมบัติการนำทางอาจใช้ HTML และ CSS เป็นภาษาการเขียนโปรแกรมเพื่อเขียนโค้ดองค์ประกอบของแอปพลิเคชัน

การใช้งานของแถบนำทางใน HTML

  • การจัดระเบียบ (Organization): การมีเมนูนำทางสำหรับเว็บไซต์ของคุณทำให้แน่ใจว่ารายการรายการ (list items) สำหรับเมนูดรอปดาวน์ได้รับการจัดระเบียบและสูตรสมการอย่างมีเหตุผล ลิงก์นำทางที่จัดระเบียบแล้วดูน่าสนใจสำหรับผู้เยี่ยมชมเว็บไซต์
  • ความสะดวกในการใช้งาน (Ease of Use): การนำทางรายการลิงก์ที่ไม่มีลำดับ (unordered list) ไม่สะดวกและอาจทำให้トラフィก (traffic) ห่างหายจากเว็บไซต์ของคุณ แถบนำทางที่จัดระเบียบดีและใช้งานง่ายให้ประสบการณ์ที่สะดวกสำหรับผู้ที่เยี่ยมชมเว็บไซต์ของคุณ
  • การเข้าถึง (Accessibility): แถบนำทางที่ดูดีให้การเข้าถึงข้อมูลที่ง่ายขึ้น ทำให้เกิดประสบการณ์ผู้ใช้ที่ลื่นไหล

การสร้างแถบนำทาง: ขั้นตอนทีละขั้น

  1. เปิดตัวแก้ไขข้อความ (Text Editor)
  2. สร้างแท็ก <nav>
  3. กำหนดแท็ก <ul>
  4. กำหนดแท็ก <style>
  5. เปลี่ยนการออกแบบ
  6. ปิดแท็ก

ขั้นตอนการสร้างแถบนำทาง: รายละเอียดลึก

สร้าง Navigation Bar แบบมืออาชีพด้วย HTML: บทช่วยสอนขั้นตอนง่ายๆ

ด้านล่างคือขั้นตอนที่คุณต้องทำตามเพื่อทำแถบนำทางที่ตอบสนอง (responsive) ได้ โดยการเรียนรู้เกี่ยวกับเทมเพลต CSS ที่คุณต้องการ และการทำตามตัวอย่างบล็อกองค์ประกอบ (block element) คุณจะสามารถสร้างเมนูนำทางที่จะช่วยคุณสร้างแถบนำทางได้

1. เปิดตัวแก้ไขข้อความ

เปิดตัวแก้ไขข้อความใหม่ หรือไฟล์ CSS ที่มีอยู่ในโฟลเดอร์แอป แทรกชุดองค์ประกอบระดับบล็อก (block-level elements) ต่อไปนี้ เนื่องจากพวกเขาจะเป็นพื้นฐานสำหรับแถบนำทางพื้นฐานของคุณ องค์ประกอบบรรทัด (inline elements) เหล่านี้เป็นฐานของแถบนำทางของคุณและจะรับรองความทำงานของมัน

  1. <!Doctype Html>
  2. <Html>
  3. <Head>
  4. <Title>
  5. Make a Navigation Bar
  6. </Title>
  7. </Head>
  8. <Body>
  9. </Body>
  10. </Html>

2. สร้างแท็ก <nav>

แทรกแท็ก <nav> ภายในแท็ก <body> ของไฟล์ CSS ของคุณ แท็ก <nav> เป็นองค์ประกอบที่จะบอกคอมพิวเตอร์ว่าคุณกำลังทำแถบนำทาง

  1. <Body>
  2. <nav>
  3. </nav>
  4. </Body>
  5. </Html>

3. กำหนดแท็ก <ul>

แท็ก <ul> รวบรวมและจัดลำดับตัวเลือกทั้งหมดที่คุณจะใส่ในแถบนำทาง ตัวเลือกเหล่านี้นำไปสู่หน้าที่กำหนดผ่าน absolute หรือ relative path แท็ก <a> path เป็นรูปแบบของแท็กลิงก์ (anchor tags) ไปยังแอตทริบิวต์ href ที่อนุญาตให้คุณแทรกลิงก์นำทางภายในคุณสมบัติ CSS

  1. <Body>
  2. <nav>
  3. <ul>
  4. <li>
  5. <a href=”#”> Home </a>
  6. </li>
  7. <li>
  8. <a href=”#”> Blog </a>
  9. </li>
  10. <li>
  11. <a href=”#”> About </a>
  12. </li>
  13. <li> <a href=”#”> Contact </a>
  14. </li>
  15. </ul>
  16. </nav>
  17. </Body>
  18. </Html>

หากคุณรันแท็ก <ul> มันจะแสดงแถบนำทางแนวตั้ง (vertical navigation bar) อัตโนมัติ หน้าปลายทางของลิงก์นำทางเหล่านี้ถูกเขียนโค้ดผ่านแท็ก <li>

4. กำหนดแท็ก <style>

แท็ก <style> ตั้งค่าสไตล์เฉพาะให้กับแถบนำทางของคุณ กฎสไตล์ CSS อนุญาตให้แถบนำทางของคุณมีหลักการออกแบบพื้นฐานที่คุณต้องการ เช่น ขนาดหน้าจอ, สไตล์โต้ตอบ และสไตล์พื้นหลังสำหรับเมนู

  1. <Head>
  2. <Title>
  3. Make a Navigation Bar
  4. </Title>
  5. <style type=text/css>
  6. </style>
  7. </Head>

5. เปลี่ยนการออกแบบ

ในส่วนนี้ คุณจะทำการเปลี่ยนแปลงในการแสดงผลของแท็กลิงก์ (anchor display) ของรหัสสีและคุณสมบัติ background-color คุณสามารถเปลี่ยนการจัดตำแหน่งภายใน navbar และวางตำแหน่งให้พวกเขาอยู่ที่คุณต้องการ การจัดระยะสี (Color spacing) ก็เป็นแท็กคลาสเพิ่มเติมที่คุณสามารถแก้ไขได้

  1. <style type=text/css>
  2. body
  3. {
  4. height: 125vh;
  5. margin-top: 80px;
  6. padding: 30px;
  7. background-size: cover;
  8. font-family: sans-serif;
  9. }
  10. header {
  11. background-color: blue;
  12. position: fixed;
  13. left: 0;
  14. right: 0;
  15. top: 5px;
  16. height: 30px;
  17. display: flex;
  18. align-items: center;
  19. box-shadow: 0 0 25px 0 black;
  20. }
  21. header * {
  22. display: inline;
  23. }
  24. header li {
  25. margin: 20px;
  26. }
  27. header li a {
  28. color: white;
  29. text-decoration: none;
  30. }
  31. </style>

6. ปิดแท็ก

ด้านล่างคือตัวอย่างโค้ดว่าของคุณอาจจะมีลักษณะอย่างไร แถบนำทางง่ายจะง่ายต่อการนำทางและเข้าใจ

  1. <!Doctype Html>
  2. <Html>
  3. <Head>
  4. <Title>
  5. Make a Navigation Bar
  6. </Title>
  7. <style type=text/css>
  8. body
  9. {
  10. height: 125vh;
  11. margin-top: 80px;
  12. padding: 30px;
  13. background-size: cover;
  14. font-family: sans-serif;
  15. }
  16. header {
  17. background-color: blue;
  18. position: fixed;
  19. left: 0;
  20. right: 0;
  21. top: 5px;
  22. height: 30px;
  23. display: flex;
  24. align-items: center;
  25. box-shadow: 0 0 25px 0 black;
  26. }
  27. header * {
  28. display: inline;
  29. }
  30. header li {
  31. margin: 20px;
  32. }
  33. header li a {
  34. color: white;
  35. text-decoration: none;
  36. }
  37. </style>
  38. </Head>
  39. <Body>
  40. <header>
  41. <nav>
  42. <ul>
  43. <li>
  44. <a href=”#”> Home </a>
  45. </li>
  46. <li>
  47. <a href=”#”> Blog</a>
  48. </li>
  49. <li>
  50. <a href=”#”> About </a>
  51. </li>
  52. <li> <a href=”#”> Contact </a>
  53. </li>
  54. </ul>
  55. </nav>
  56. </header>
  57. </Body>
  58. </Html>

วิธีเรียนรู้เพิ่มเติมเกี่ยวกับ HTML

  • ลองคอร์สออนไลน์: มีคอร์ส HTML ออนไลน์ คลาส และการฝึกอบรมที่คุณสามารถเข้าร่วมได้เพื่อช่วยคุณในการเดินทางสู่การเชี่ยวชาญ HTML คอร์สพัฒนาเว็บสำหรับผู้เริ่มต้นอาจช่วยคุณเรียนรู้เพิ่มเติมเกี่ยวกับ HTML และแง่มุมต่างๆ ของมัน
  • สะสมประสบการณ์ปฏิบัติจริง: ทดสอบความรู้และพัฒนาทักษะใน HTML โดยการได้ประสบการณ์ปฏิบัติจริง ด้วยการลองโครงการและสร้างเว็บไซต์ คุณสามารถสร้างพอร์ตโฟลิโอ HTML ที่คุณสามารถแสดงให้ลูกค้าหรือนายจ้างในอนาคตเห็น
  • สมัครบูทแคมป์เขียนโค้ด: การเข้าร่วมบูทแคมป์เขียนโค้ดชั้นนำเป็นวิธีที่ยอดเยี่ยมในการเรียนรู้เพิ่มเติมเกี่ยวกับ HTML และการใช้งานของมัน บูทแคมป์สามารถสอนทักษะปฏิบัติจริงที่ต้องการในตลาดแรงงานเพื่อให้คุณเชี่ยวชาญ HTML อย่างรวดเร็วและมีประสิทธิภาพ

คำถามที่พบบ่อย: การสร้างแถบนำทางใน HTML

การเรียน HTML คุ้มค่าไหม?

การเรียน HTML ยากไหม?

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

HTML คืออะไร?

Hypertext Markup Language (HTML) เป็นภาษาออนไลน์ที่ใช้ในการสร้างเว็บไซต์หรือแอปพลิเคชันเรียบง่าย มันคือภาษาที่ให้โครงสร้างและรูปแบบกับเว็บไซต์ มันวางพื้นฐานการเขียนโค้ดพื้นฐานและอนุญาตให้ภาษาอื่นๆ เพิ่มคุณสมบัติที่ซับซ้อนมากขึ้น

ทำไมเราต้องการแถบนำทาง?

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