ทำส่วนหัว (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 ที่เป็นจุดเริ่มนำทางของทั้งเว็บครับ

โพสต์ที่เกี่ยวข้อง

ทำระบบ เว็บไซต์ prototype ไม่ต้องง้อโปรแกรมเมอร์
ทำระบบ เว็บไซต์ prototype ไม่ต้องง้อโปรแกรมเมอร์ หรือ นักออกแบบ
โมชิคับ SHIPPOP

โมชิคับ SHIPPOP

ถูกใจ 48 ครั้ง

Google ขึ้น ไม่สามารถเข้าถึงเว็บไซต์นี้
Google ขึ้น ไม่สามารถเข้าถึงเว็บไซต์นี้ วิธีแก้ไข ทำง่ายๆ #เข้าเว็บไม่ได้ #โจ้ออนไลน์
โจ้ออนไลน์

โจ้ออนไลน์

ถูกใจ 20 ครั้ง

หน้าจอแสดงระบบเว็บไซต์สำหรับทำเนียบผู้ผ่านการอบรมฯ ที่สร้างด้วย Canva AI และเชื่อมต่อกับ Google Sheet มีช่องค้นหา กรองข้อมูล และตารางแสดงข้อมูลผู้เข้าอบรม
หน้าจอแสดงภาพรวมข้อมูลผู้เข้าอบรมทั้งหมด 899 คน จาก 23 จังหวัด 12 เขตตรวจราชการ และ 689 สถานศึกษา พร้อมช่องค้นหาและตัวกรองข้อมูล
ส่วนหนึ่งของหน้าจอแสดงสรุปข้อมูลผู้เข้าอบรมแยกตามเขตตรวจราชการ โดยมีจำนวนผู้เข้าอบรมในแต่ละเขตแสดงอยู่
Promtระบบเว็บไซต์ด้วย Canva AI เชื่อมข้อมูล Google sheet
🍋 สร้างเว็บไซต์ง่ายๆ ไม่ต้องเขียนโค้ด! ด้วย Canva AI & Google Sheet ✨ เบื่อไหมกับการสร้างระบบเว็บไซต์ที่ต้องเสียเวลาเขียนโค้ด? 😩 วันนี้มาแชร์ทางลัดสุดปัง! ที่ช่วยให้คุณมี เว็บแอป ส่วนตัวได้ง่าย ๆ แถมไม่ต้องแตะโค้ดเลย! 💻 💡 ขั้นตอนง่าย ๆ ที่ใครก็ทำได้: ออกแบบใน Canva: ใช้ Canva AI ช่วยออกแบบ
vxxwpc._

vxxwpc._

ถูกใจ 11 ครั้ง

ภาพหน้าปกแสดงหัวข้อ “รวมเว็บไซต์กราฟฟิกต้องรู้ รู้ไว้ ดีต่อใจ” พร้อมภาพประกอบจากเว็บไซต์ต่างๆ ที่เกี่ยวข้องกับงานกราฟฟิก
เว็บไซต์ Freepik (www.freepik.com) แหล่งรวมรูปภาพ Vector Video ไฟล์ PSD, AI, EPS คุณภาพสูง มีทั้งแบบฟรีและเสียเงิน เหมาะสำหรับสายกราฟฟิก
เว็บไซต์ Flaticon (www.flaticon.com) แหล่งรวมไอคอนจำนวนมาก หลากหลายสไตล์ ทั้งแบบ Fill, Outline, ขาวดำ และมีสี เหมาะสำหรับนักพัฒนาและนักออกแบบ
รวมเว็บไซต์กราฟฟิกต้องรู้!
อีกอย่างเลยที่ช่วยให้งานเร็วเสร็จเร็วขึ้น คือเว็บไซต์ elements ต่างๆนี่แหละ บอกเลยว่าแต่ละผมใช้จริงทั้งนั้น55 และงานมันง่ายและเร็วขึ้นจริงๆนะคับ เพื่อนลองดูเป็นไอเดียกันได้นะ หรือใครใช้แล้วก็มาแชร์กันคับบ #ติดเทรนด์ #งานกราฟฟิก #กราฟฟิกครีเอเทอร์ #รวม
พี่หมีแว่นเหลือง

พี่หมีแว่นเหลือง

ถูกใจ 395 ครั้ง

ปิด 4 จุดเสี่ยงโดนดึงข้อมูลส่วนตัวและพิกัดตอนค้นหาเว็บ ทำตามนี้ปลอดภัยและไม่มีใครตามรอยได้แน่นอนครับ
ปิด 4 จุดเสี่ยงโดนดึงข้อมูลส่วนตัวและพิกัดตอนค้นหาเว็บ ทำตามนี้ปลอดภัยและไม่มีใครตามรอยได้แน่นอนครับ #ไอทีเล่ามือถือบอก2 #ความปลอดภัยมือถือ #สอนใช้มือถือ #ทริคไอโฟน #แอบติดตาม
ไอทีเล่ามือถือบอก

ไอทีเล่ามือถือบอก

ถูกใจ 7 ครั้ง

ภาพอินโฟกราฟิกแสดงคู่มือ 5 ขั้นตอนจัดหน้าวิทยานิพนธ์ด้วย Microsoft Word อย่างมืออาชีพ ได้แก่ การตั้งค่าหน้ากระดาษ, การใช้ Styles กำหนดหัวข้อ, การกำหนดระยะบรรทัดและย่อหน้า, การจัดการเลขหน้าและส่วนหัว, และการสร้างสารบัญอัตโนมัติ เพื่อให้งานเรียบร้อยและประหยัดเวลา.
5 เคล็ดลับจัดหน้าวิทยานิพนธ์ให้จบไว! ได้เล่มสวยงาม
ช่วงนี้ใครกำลังปั่นวิทยานิพนธ์/ดุษฎีนิพนธ์อยู่บ้าง? 😥 เข้าใจเลยว่าแค่เนื้อหาก็หนักแล้ว ยังต้องมาเครียดเรื่องจัดหน้าเล่มให้ถูกระเบียบมหาวิทยาลัยอีก! ทั้งเลขหน้าไม่รัน สารบัญกระโดด ขอบกระดาษไม่ได้สัดส่วน... ปัญหาสารพัดทำเอาปวดหัวจนอยากจะถอดใจ วันนี้เรามี "โพยลับ 5 ขั้นตอนจัดหน้าวิทยานิพนธ์
M

M

ถูกใจ 19 ครั้ง

ภาพหน้าปกแสดงผู้หญิงชี้ไปที่ไอคอน Word พร้อมข้อความ 'เลขหน้าเพี้ยนใน Word แก้ยังไง? เช็ก 5 จุดก่อนแปลง PDF' สำหรับนักเขียนที่จัดหน้านิยายเอง
ภาพแสดงปัญหาเลขหน้า Word ที่พบบ่อย: เลขหน้าหาย, เริ่มใหม่เอง, ไม่ต้องการเลขหน้าแรกของบท, และแก้หน้าหนึ่งแล้วหน้าอื่นรวน ซึ่งมักเกี่ยวข้องกับ Section/Header/Footer
ภาพอธิบายจุดที่ 1: การเช็ก Section Break ใน Word โดยใช้สัญลักษณ์ ¶ เพื่อดูจุดแบ่ง Section ซึ่งอาจทำให้เลขหน้าเริ่มนับใหม่เอง และควรตรวจสอบความจำเป็น
5 จุดเช็กเมื่อ “เลขหน้าใน Word เพี้ยน” 📄✨
5 จุดเช็กเมื่อ “เลขหน้าใน Word เพี้ยน” 📄✨ สำหรับนักเขียนที่กำลังจัดหน้านิยายเอง ปัญหาเลขหน้าใน Word เป็นหนึ่งในจุดที่ทำให้หลายคนเสียเวลามากที่สุดค่ะ เพราะบางทีเราคิดว่าแค่ “ลบเลขหน้า” หรือ “ใส่เลขหน้าใหม่” ก็น่าจะจบ แต่ความจริง Word ไม่ได้คิดแบบนั้นเสมอไป 😅 โดยเฉพาะถ้าเอกสารถูกแบ่งเป็นหลาย
bookylayout

bookylayout

ถูกใจ 4 ครั้ง

ดูเพิ่มเติม