ทำส่วนหัว (header)ของหน้าเว็บไซต์

#พื้นฐานการเขียนเว็ปไซต์

#csshtml

CSS Header ไม่ใช่คำศัพท์เฉพาะเจาะจง แต่หมายถึงการใช้ CSS (Cascading Style Sheets) เพื่อจัดรูปแบบส่วนหัว (Header) ของเว็บเพจ ซึ่งเป็นส่วนที่มักอยู่ด้านบนสุดของหน้าเว็บและประกอบด้วยโลโก้, เมนูนำทาง, และข้อมูลสำคัญอื่นๆ โดย CSS จะถูกนำมาใช้เพื่อกำหนดลักษณะต่างๆ ของส่วนหัว เช่น สีพื้นหลัง, ขนาดตัวอักษร, การจัดวาง, และองค์ประกอบอื่นๆ เพื่อให้ดูสวยงามและเป็นระเบียบ.

ส่วนหัว (Header) ของเว็บเพจ คืออะไร?

เป็นส่วนประกอบของหน้าเว็บที่อยู่ด้านบนสุด.

ทำหน้าที่จัดเก็บข้อมูลสำคัญของเว็บไซต์ เช่น โลโก้, เมนูนำทาง (navigation menu), และข้อความต่างๆ.

ใช้แท็ก <h1> ถึง <h6> ใน HTML เพื่อกำหนดระดับความสำคัญของหัวข้อต่างๆ.

อาจมีการจัดรูปแบบด้วย CSS เพื่อปรับปรุงการออกแบบโดยรวมของหน้าเว็บ.

การใช้ CSS กับส่วนหัว (Header) คืออะไร?

กำหนดสไตล์:

ใช้คุณสมบัติ CSS เพื่อกำหนดลักษณะของส่วนหัว เช่น:

background-color สำหรับสีพื้นหลัง

color สำหรับสีตัวอักษร

คุณสมบัติอื่นๆ สำหรับขนาด, การจัดตำแหน่ง, และสไตล์อื่นๆ

จัดโครงสร้าง:

ใช้ CSS ร่วมกับ HTML เพื่อจัดโครงสร้างของส่วนหัว.

เพิ่มความน่าสนใจ:

การใช้ CSS ทำให้ส่วนหัวดูน่าสนใจยิ่งขึ้น และช่วยปรับปรุงเค้าโครงและดีไซน์โดยรวม.

ตัวอย่าง:

คุณสามารถใช้ CSS เพื่อตั้งค่าสีพื้นหลังของส่วนหัวได้ดังนี้:

โค้ด

<header style="background-color: darkblue;">

<h1>ยินดีต้อนรับ</h1>

<p>นี่คือส่วนหัวของเว็บไซต์</p>

</header>

2025/8/29 แก้ไขเป็น

... อ่านเพิ่มเติมเวลาเริ่มทำเว็บ เรามักเจอคำถามว่า “ส่วนประกอบของเว็บไซต์มีอะไรบ้าง?” ส่วนตัวผมชอบแยกเป็น 3 ส่วนหลัก ๆ เพื่อให้วางโครงสร้างง่ายและแก้ไขทีหลังสะดวก ได้แก่ Header, Main content และ Footer ซึ่งบทความนี้โฟกัสที่ Header แต่ขอเสริมภาพรวมให้ครบ เผื่อคุณกำลังทำเว็บหน้าแรก/ติดต่อเรา/เกี่ยวกับเราอยู่พอดี 1) Header (ส่วนหัวเว็บไซต์) Header คือพื้นที่ด้านบนสุดของหน้าเว็บ ใช้สื่อสารตัวตนของเว็บและช่วยให้คน “ไปต่อ” ได้ทันที โดยองค์ประกอบที่เจอบ่อยคือ - โลโก้/ชื่อเว็บ (มักอยู่ซ้าย) - เมนูนำทาง (Navigation) เช่น หน้าแรก, เกี่ยวกับเรา, ติดต่อเรา - ช่องค้นหา/ปุ่ม CTA (ถ้ามี) เช่น สมัครสมาชิก/สั่งซื้อ ทิปจากที่ลองทำเอง: อย่าใส่เมนูเยอะเกินไป 4–6 เมนูกำลังอ่านง่าย และควรทำให้กดได้ชัด (พื้นที่คลิกกว้างพอ) 2) Main (เนื้อหาหลัก) ส่วนนี้คือ “ตัวจริง” ของหน้า เช่น เนื้อหาบทความ สินค้า ฟอร์มติดต่อ แกลเลอรี ฯลฯ แนะนำให้ใช้แท็ก semantic เช่น <main>, <section>, <article> เพื่อให้โครงสร้างเว็บชัด ทั้งคนอ่านและ Google เข้าใจง่าย 3) Footer (ส่วนท้าย) Footer มักรวมข้อมูลที่คนหาในตอนท้าย เช่น ลิงก์ซ้ำของเมนู, ที่อยู่, โซเชียล, ลิขสิทธิ์, เงื่อนไข/นโยบาย ตัวอย่างโครงสร้าง Header ที่ใช้บ่อย (แยก HTML/CSS เป็นระบบ) HTML: <header class="site-header"> <div class="container"> <a class="brand" href="#">Slak</a> <nav class="nav"> <a href="#">หน้าแรก</a> <a href="#">ติดต่อเรา</a> <a href="#">เกี่ยวกับเรา</a> </nav> </div> </header> CSS: *{box-sizing:border-box;} .site-header{background:#0b2a6f;color:#fff;} .container{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;} .nav a{color:#fff;text-decoration:none;margin-left:16px;} .nav a:hover{text-decoration:underline;} จากที่ทำแล้วเห็นผลชัดคือ “จัดวางด้วย flex” จะทำให้โลโก้กับเมนูอยู่คนละฝั่งได้ง่ายมาก และควรใส่ box-sizing:border-box; ไว้ตั้งต้นเพื่อให้คุมขนาด/ระยะ padding ได้ไม่เพี้ยน ถ้าคุณอยากให้ Header ดูเป็นมืออาชีพขึ้นอีกนิด ลองเพิ่ม 2 อย่างนี้: - ทำเมนูให้เป็นปุ่ม/มีสถานะ active ของหน้าปัจจุบัน - ทำให้ responsive: จอเล็กค่อยเปลี่ยนเป็นเมนูแฮมเบอร์เกอร์ (หรืออย่างน้อยให้เมนูขึ้นบรรทัดใหม่ได้) สรุป: ถ้าเข้าใจ “ส่วนประกอบของเว็บไซต์” เป็น Header–Main–Footer แล้วค่อยลงรายละเอียดทีละส่วน จะทำเว็บได้ไวและเป็นระเบียบมากขึ้น โดยเฉพาะ Header ที่เป็นจุดเริ่มนำทางของทั้งเว็บครับ