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

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

50 สิ่งที่ต้องรู้เกี่ยวกับ HTML/CSS รากฐานของทุกเว็บไซต์ในโลก
50 สิ่งที่ต้องรู้เกี่ยวกับ HTML/CSS HTML และ CSS คือรากฐานของทุกเว็บไซต์ในโลก HTML กำหนดโครงสร้าง ส่วน CSS จัดการหน้าตาและเลย์เอาท์ Part 1 HTML พื้นฐาน 1. HTML ย่อมาจาก HyperText Markup Language ถูกสร้างขึ้นปี 1991 โดย Tim Berners-Lee ผู้สร้าง World Wide Web ขณะที่อยู่ CERN 2. HTML ไม่
NerdDailyDose

NerdDailyDose

ถูกใจ 35 ครั้ง

เขียนเว็บไซต์ โดยใช้ JavaScript เพียวๆ
#javascript #พื้นฐานการเขียนเว็ปไซต์ code หน้าเว็ปไซต์แสดงสินค้า เขียนด้วย javascript dom และตกแต่งด้วย css โดยไม่ใช้ html แน่นอนครับ! การสร้างโครงสร้างเว็บไซต์แสดงสินค้า โดยไม่ใช้ HTML โดยตรง แต่ใช้ JavaScript DOM ในการสร้างองค์ประกอบทั้งหมด และตกแต่งด้วย CSS สามารถทำได้ดังนี้ครับ เน
ขีดเขียน

ขีดเขียน

ถูกใจ 3 ครั้ง

ภาพมือถือซองกระดาษสีน้ำตาลผูกริบบิ้นสีแดงพร้อมป้ายรูปหัวใจเขียนว่า 'Just for you' มีข้อความว่า 'สร้างเว็บ!! เซอร์ไพรส์แฟน' ซึ่งเป็นไอเดียการสร้างเว็บไซต์เพื่อเซอร์ไพรส์คนรัก
ภาพหน้าจอเว็บไซต์ dif.link แสดงโลโก้ 'DifLink' และข้อความ 'CREATE YOUR ONLINE YOUR PASSION' พร้อมคำอธิบายภาษาไทยว่าใช้เว็บไซต์นี้ในการสร้างเว็บและต้องลงทะเบียน
ภาพหน้าจอแสดงตัวเลือกการจัดวางเนื้อหาบนเว็บไซต์ ได้แก่ 'Link / ลิงค์', 'Header / หัวข้อ', 'Page / หน้า' พร้อมคำอธิบายว่าส่วนใหญ่จะใช้หัวข้อ แต่สามารถเพิ่มลิงก์หรือเลือกการจัดวางได้
สร้างเว็บไซต์เก๋ๆเอง 🖥️❤️
ผมจะแปะลิ้งค์ไว้นะครับผม เว็บนี้ครับ : https://dif.link/th ทำได้ทุกรูปแบบเลยครับ แต่ว่า features ส่วนใหญ่ะจะมี แปะลิ้งค์ แนบรูปภาพ เขียนข้อความ แล้วก็เปลี่ยนฟอนต์ได้ ปรับสีพื้นหลัง จัดวางอะไรประมาณนี้ครับ จะไม่ได้มีลูกเล่นอะไรเยอะเหมือนเหมือนเว็บไซต์จริงๆ แต่แค่นี้ก็น่ารัก เก๋แล้วครับ เอาไว้ เซ
Kkxoapun

Kkxoapun

ถูกใจ 351 ครั้ง

ส่วนประกอบของหน้าเว็ปไซต์
#พื้นฐานเขียนเว็ปไซต์ #css #html ส่วนประกอบหลักของหน้าเว็บไซต์โดยทั่วไปมี 3 ส่วนคือ ส่วนหัว (Header) ซึ่งมีโลโก้ ชื่อเว็บไซต์ และเมนูหลัก, ส่วนเนื้อหา (Body/Content) ที่แสดงข้อมูลหลัก เช่น ข้อความ รูปภาพ วิดีโอ และอื่นๆ, และ ส่วนท้าย (Footer) ที่แสดงข้อมูลเพิ่มเติม เช่น ข้อมูลติดต่อ
ขีดเขียน

ขีดเขียน

ถูกใจ 8 ครั้ง

จากคนที่ไม่รู้ว่า Django คืออะไร… วันนี้สร้างเว็บไซต์แรกได้แล้ว 🚀
เมื่อไม่กี่เดือนก่อน ถ้ามีใครถามเราว่า Django คืออะไร, Python ใช้ทำอะไร หรือ VS Code คืออะไร คำตอบของเราคือ… “ไม่รู้เลย” เราไม่ได้จบสายคอมพิวเตอร์ ไม่มีพื้นฐานด้าน IT และไม่เคยเขียนโปรแกรมจริงจังมาก่อน ช่วงแรกยอมรับเลยว่า งงมาก 😅 งงตั้งแต่การสร้างโฟลเดอร์ การสร้างไฟล์ การติดตั้งโปรแกรม
Piqpalette

Piqpalette

ถูกใจ 5 ครั้ง

footer ส่วนท้ายหน้าเว็บไซต์
#footer #css #html #พื้นฐานการเขียนเว็ปไซต์ #เว็ปไซต์ ง่ายๆ Footer (ฟุตเตอร์) คือ ส่วนท้ายของเว็บไซต์ ที่อยู่ด้านล่างสุดของทุกหน้าเว็บ และจะแสดงเหมือนกันในทุกหน้าเว็บไซต์ ทำหน้าที่เป็นที่รวมข้อมูลสำคัญที่ผู้เข้าชมอาจต้องการ เช่น ข้อมูลติดต่อ, ลิงก์โซเชียลมีเดีย, ลิงก์เมนูย่อย, ข้อม
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

ส่วนคอนเทนต์ หน้าเว็ปไซต์
#พื้นฐานการเขียนเว็ปไซต์ #css _ html #content Content หน้าเว็บ คือ ข้อมูลที่อยู่ในรูปแบบต่าง ๆ เช่น ข้อความ รูปภาพ วิดีโอ เสียง ที่สร้างขึ้นเพื่อแสดงให้ผู้เข้าชมเว็บไซต์ได้รับทราบ ก่อให้เกิดความเข้าใจ ให้ความบันเทิง หรือเพื่อโน้มน้าวใจ ซึ่งประกอบด้วยองค์ประกอบหลัก ได้แก่ หัวข้อเรื่อง
ขีดเขียน

ขีดเขียน

ถูกใจ 2 ครั้ง

พบมัลแวร์ขโมยข้อมูลบนส่วนเสริม Chrome อีก 108 ตัว
ตรวจพบมัลแวร์ขโมยข้อมูลบนส่วนเสริม Chrome อีก 108 ตัว กระทบเหยื่อกว่า 2 หมื่นราย ส่วนเสริมบนเว็บเบราว์เซอร์ หรือ Extension นั้นอาจเป็นสิ่งที่ช่วยให้เว็บเบราว์เซอร์สามารถทำงานได้อย่างหลากหลาย สร้างความสะดวกให้กับผู้ใช้งาน แต่ปัจจุบันนั้นกลับมีการตรวจพบส่วนเสริมปลอมแฝงมัลแวร์จำนวนมาก ที่อาจทำให้ผู
FreedomHack 󱢏

FreedomHack 󱢏

ถูกใจ 1 ครั้ง

มาทำความรู้จักกับ HTTP: หัวใจของการท่องเว็บไซต์! 🌐
เคยสงสัยไหมว่าเวลาเราเข้าเว็บไซต์ ข้อมูลมันเดินทางไปมาหากันได้ยังไง? คำตอบก็คือ HTTP (Hypertext Transfer Protocol) นั่นเอง! มาดูกันว่าโปรโตคอลพื้นฐานนี้ทำงานยังไงบ้าง HTTP คืออะไร? เปรียบง่ายๆ HTTP ก็เหมือนเป็น "ภาษา" ที่ใช้คุยกันระหว่าง เว็บเบราว์เซอร์ ของเรา (Client) กับ เว็บเซิร์ฟเวอ
TechTalk by Taa

TechTalk by Taa

ถูกใจ 1 ครั้ง

EP.39 วิธีทำให้เนื้อหาในเว็บไซต์ของคุณกลายเป็นคำตอบใน Generative AI
หลายองค์กรทุ่มงบทำ SEO มาตลอด แต่กลับเห็นทราฟฟิกหดลงเพราะผู้ใช้หันไปถาม AI แทนการคลิกลิงก์จาก Search Engine ปัญหาส่วนใหญ่ไม่ได้อยู่ที่อันดับบนหน้าค้นหาตกลง แต่อยู่ที่คอนเทนต์บนเว็บไซต์ไม่ได้ถูกออกแบบให้ AI ดึงไปใช้เป็นคำตอบอ้างอิง EP นี้ SUFFIX ชวนยกระดับเว็บไซต์ด้วยแนวคิด Generative Engine Opti
suffixworks

suffixworks

ถูกใจ 0 ครั้ง

มัลแวร์ Chernobyl มีความสามารถทำลายล้างกว่า
มัลแวร์ Chernobyl มีความสามารถทำลายล้างที่มัลแวร์ใหม่สู้ไม่ได้ ด้วยการแฟลช BIOS มัลแวร์เก่า ๆ หลายตัวนั้นความสามารถในการทำลายล้างมักจะด้อยกว่ามัลแวร์ใหม่ ๆ ทั้งในด้านการทำลายระบบล้วน ๆ และการแทรกซึมมักจะสู้มัลแวร์ใหม่ ๆ ไม่ได้ ทว่าบางตัว กลับสามารถทำในสิ่งที่มัลแวร์ใหม่ ๆ ไม่สามารถทำได้ จากรา
FreedomHack 󱢏

FreedomHack 󱢏

ถูกใจ 2 ครั้ง

ภาพหน้าจอส่วนเสริม Firefox ชื่อ Free VPN ซึ่งเป็นหนึ่งในส่วนเสริมที่ถูกระบุว่ามีมัลแวร์ GhostPoster โดยมีผู้ใช้งาน 16,583 ราย และได้คะแนนรีวิว 3.3 ดาวจาก 33 รีวิว
พบมัลแวร์ GhostPoster บนส่วนเสริม Firefox ถึง17ตัว
พบมัลแวร์ GhostPoster บนส่วนเสริม Firefox ถึง 17 ตัว มีเหยื่อกว่า 5 หมื่นรายแล้ว เว็บเบราว์เซอร์ในยุคสมัยปัจจุบันนั้น มักจะมีส่วนเสริม (Add-On หรือ Extension) มาเสริมในการทำงานของตัวเบราว์เซอร์อย่างมากมาย และส่วนนี้ก็นับว่าเป็นจุดอ่อนด้วยเนื่องจากแฮกเกอร์สามารถใช้งานส่วนเสริมเว็บเบราว์เซอร์มาปล่
FreedomHack 󱢏

FreedomHack 󱢏

ถูกใจ 0 ครั้ง

หญิงสาวกำลังยิ้มพร้อมแล็ปท็อปและข้อความโฆษณาคอร์ส "สร้างเว็บไซต์ในแบบของคุณ" พร้อมรายละเอียดการติดต่อสำหรับผู้สนใจ
ภาพเมืองและแม่น้ำ พร้อมข้อความ "DATA INTELLIGENCE PLATFORM" และ "ยินดีต้อนรับ ฐานข้อมูลเชิงลึกทุกจังหวัดของประเทศไทย" สำหรับเจ้าของธุรกิจ นักการตลาด และนักลงทุน
เมนูเว็บไซต์แสดงตัวเลือกต่างๆ เช่น หน้าแรก เกี่ยวกับเรา บริการ เชียงใหม่-โอกาสงานและธุรกิจ ราคา และติดต่อ
ทำแค่นี้ ก็สร้างเว็บไซต์ได้ง่ายๆ
#เทรนด์วันนี้ "เว็บไซต์" หมายถึงแหล่งรวบรวมข้อความ รูปภาพ เสียง และวิดีโอ ซึ่งจัดเก็บอยู่บนอินเทอร์เน็ต หลายๆ หน้าที่เชื่อมกัน เพื่อนำเสนอข้อมูลสินค้า บริการต่างๆ เอาล่ะ วิชาการพอไว้เท่านี้ เรามาเข้าเรื่องกันดีกว่า สร้างเว็บไซต์ .. "ไม่ยาก" ถ้าคุณเข้าใจหลัก ราคาค่าจ้างออก
VIP

VIP

ถูกใจ 1 ครั้ง

รวมเว็บไซต์แหล่ง หางานทำจากที่บ้าน WFH
การหางาน Work From Home ไม่ได้ขึ้นอยู่กับว่า “รู้จักเว็บสมัครงานเยอะแค่ไหน”🍊 แต่ขึ้นอยู่กับว่า “คุณพร้อมแค่ไหนให้บริษัทเลือก” ถ้ายังไม่มีสกิลหรือผลงาน ต่อให้สมัคร 100 ที่ ก็อาจจะเงียบกริบ! แต่ถ้ามีของจริง สมัครไม่กี่ที่ ก็มีโอกาสได้เช่นกันค่ะ โลก WFH ไม่ได้ใจร้าย แต่มันเลือกคนมากกว่าส
Lizzy Share ลาออกวันไหน🍀

Lizzy Share ลาออกวันไหน🍀

ถูกใจ 1288 ครั้ง

รวมเหตุผล ทำไมทำเว็บไซต์เองหรือทำแพลตฟอร์มใหม่ไปก็สู้เจ้าใหญ่ยาก
ร้านดิฉัน 👉 @CANTABILE | คันตาบิเล่ #ผู้เสียหายจากแพลตฟอร์ม #ค่าธรรมเนียม #เศรษฐกิจ #ขายออนไลน์ #เจ้าของแบรนด์
CANTABILE | คันตาบิเล่

CANTABILE | คันตาบิเล่

ถูกใจ 3 ครั้ง

ภาพแสดงเว็บไซต์ ChartBase ที่ช่วยสร้างกราฟจาก Notion Database ฟรี พร้อมตัวอย่างกราฟและข้อความเชิญชวน 'ใครสายฟรีต้องเซฟไว้เลย!!' โดยมีโลโก้ ChartBase และไอคอนกราฟประกอบ
ChartBase เว็บไซต์ใช้ทำกราฟแสดงใน notion ฟรี!! ✨📈
ChartBase เว็บไซต์สำหรับใช้ทำกราฟแสดงใน notion ฟรี!! ใครสายฟรีต้องเซฟไว้เลย!! ChartBase คืออะไร? แพลตฟอร์มที่จะช่วยแปลงข้อมูลจาก Notion Database ให้กลายเป็น กราฟสวยงาม (Data Visualization) ได้ในไม่กี่คลิก ซึ่งออกแบบมาเพื่อแก้ปัญหาคนใช้ Notion ที่อยากดูสรุปข้อมูลเป็นภาพ แต่ไม่อยากจ่ายเงินอัปเกรด
FTproductiveflow

FTproductiveflow

ถูกใจ 82 ครั้ง

ดูเพิ่มเติม