Automatically translated.View original post

Components of a website page

# Basic writing site

# css

# html

The main components of a website page generally have three parts: the Header, which contains the logo, website name and main menu, the Body / Content section, which displays core information such as text, images, videos and more, and the Footer section, which displays additional information such as contact information, copyright and other important links.

Main components of the website page

Header (Header)

Duty: Stay at the top of the page. Serves to impress and display important information.

Elements: Logo, Website Name, Navigation Bar used to link to pages

Body / Contents

Duty: It is the most important part to present the main information that visitors need.

Composition:

Text (Text): Main content, articles, goods / services details

Images & Video (Images & Videos): Helps Enhance Understanding and Make Content Interesting

Subheadings (Headings / Subheadings): Help organize content to be easier to read and more convenient to scan data.

Links: Links to other pages within the website or external resources

Call-to-Action Button (CTA Button): Encourage users to pursue objectives such as purchase, contact

Footer

Page: At the bottom of the page, it is often used to display summary or additional information.

Elements: contact information (address, phone number), copyright text (Copyright), information about website, map

Other elements that may contain

Sidebar:

For displaying group menus or other supplementary information

Widget:

Extensions that add display functions such as categories, social media.

2025/8/28 Edited to

... Read moreถ้ากำลังเริ่มทำเว็บแบบง่ายๆ สิ่งที่ช่วยให้ “เว็บดูเป็นเว็บ” มากขึ้น ไม่ใช่แค่จัดวางสวยอย่างเดียว คือการเข้าใจว่าเว็บไซต์มี “ประเภท” อะไร และควร “เพิ่มฟังก์ชัน” แบบไหนให้เหมาะกับเป้าหมายค่ะ (อันนี้ลองทำเองแล้วเวิร์กมาก) ประเภทของเว็บไซต์ที่พบบ่อย (เลือกให้ตรงเป้าหมายก่อน) 1) เว็บไซต์ให้ข้อมูล (Informational) เช่น เว็บบทความ/ความรู้/พอร์ตงาน จุดสำคัญคือเมนูต้องชัด หัวข้อย่อยอ่านง่าย และมีช่องทางติดต่อ 2) เว็บไซต์ขายของ (E-commerce) ต้องมีหน้าสินค้า ตะกร้า ระบบชำระเงิน/แจ้งโอน รีวิว และปุ่ม CTA อย่าง “สั่งซื้อเลย” เด่นๆ 3) เว็บไซต์องค์กร/บริษัท (Corporate) เน้นความน่าเชื่อถือ: About, บริการ, ผลงาน, ลูกค้า, แผนที่ และแบบฟอร์มติดต่อ 4) เว็บไซต์บล็อก/คอนเทนต์ครีเอเตอร์ (Blog) ควรมีหมวดหมู่ ค้นหา (Search) และบทความแนะนำ/ยอดนิยม 5) เว็บชุมชน/ฟอรั่ม (Community) จะโฟกัสระบบสมาชิก โปรไฟล์ การคอมเมนต์ และการแจ้งเตือน 6) เว็บอ่านนิยาย/คอนเทนต์ยาว (แนวที่คนชอบค้นหา “อ่านนิยาย”) ควรมีสารบัญตอน, ปุ่มไปตอนถัดไป/ก่อนหน้า, ที่คั่นหน้า (Bookmark) และปรับขนาดฟอนต์ (เช่น Roboto หรือฟอนต์อ่านง่าย) ไอเดีย “เพิ่มฟังก์ชันเว็บไซต์” ที่ทำให้ใช้งานดีขึ้น (ทำเพิ่มทีละอย่างก็ได้) - เมนูนำทางแบบ Sticky: เลื่อนแล้วเมนูยังอยู่ด้านบน ผู้ใช้ไม่หลง - ปุ่ม CTA ชัดเจน: เช่น “ติดต่อเรา”, “ซื้อ”, “สมัครสมาชิก” วางทั้งใน Header และท้ายบทความ - ช่องค้นหา + ตัวกรอง (Filter): เหมาะมากกับเว็บบทความ/เว็บนิยาย/เว็บสินค้า - ระบบสมาชิก: ล็อกอิน, โปรไฟล์, บันทึกสิ่งที่ชอบ/อ่านค้างไว้ - คอมเมนต์/เรตติ้ง: เพิ่มการมีส่วนร่วม ทำให้หน้าเว็บมีชีวิต - แชร์โซเชียล: ปุ่มแชร์ Facebook/X/Line ช่วยเพิ่มทราฟฟิก - ฟอร์มติดต่อ + แผนที่: ใน Footer ใส่ที่อยู่ เบอร์/อีเมล และ Google Map ฝัง - ปุ่มกลับขึ้นด้านบน (Back to top): หน้าเนื้อหายาวๆ ใช้แล้วสะดวกมาก ทริคจัด “ส่วนประกอบของเว็บไซต์” ให้ครบและดูโปร - Header: โลโก้ + เมนู 5-7 รายการพอ + ปุ่ม CTA 1 ปุ่ม - Body/Content: ใช้ Headings (H1/H2/H3) จัดหัวข้อย่อย ใส่ลิงก์ภายในไปหน้าที่เกี่ยวข้อง - Footer: สรุปช่องทางติดต่อ ลิงก์สำคัญ นโยบายความเป็นส่วนตัว และลิขสิทธิ์ สรุปคือ ถ้าเลือกประเภทเว็บให้ชัดก่อน แล้วค่อยเติมฟังก์ชันตามพฤติกรรมผู้ใช้ เว็บจะ “ใช้งานได้จริง” และดูน่าเชื่อถือขึ้นทันทีค่ะ