Make header of website page
CSS Header is not a specific term, but refers to the use of CSS (Cascading Style Sheets) to format the header of a web page, a section that is often at the top of a web page and contains logos, navigation menus, and other important information. CSS is used to characterize headers such as background colors, font size, layout, and other elements to make them look beautiful and orderly.
What is the header of a web page?
It is a component of the page at the top.
It stores important information of the website, such as logos, navigation menus, and text.
Use the < h1 > to < h6 > tags in HTML to determine the priority level of various topics.
It may be formatted with CSS to improve the overall design of the page.
What is the use of CSS with Header (Header)?
Defines style:
Use CSS properties to determine the nature of the header, such as:
Background-color for background color
Color for font color
Other features for size, alignment, and other styles
Structure:
Use CSS in conjunction with HTML to structure the header.
Added interest:
Using CSS makes headers more attractive and improves overall layout and design.
Example:
You can use CSS to set the background color of the header as follows:
Code
< header style = "background-color: darkblue;" >
< h1 > Welcome < / h1 >
< p > This is the website header. < / p >
< / head >
เวลาเริ่มทำเว็บ เรามักเจอคำถามว่า “ส่วนประกอบของเว็บไซต์มีอะไรบ้าง?” ส่วนตัวผมชอบแยกเป็น 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 ที่เป็นจุดเริ่มนำทางของทั้งเว็บครับ
