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: สรุปช่องทางติดต่อ ลิงก์สำคัญ นโยบายความเป็นส่วนตัว และลิขสิทธิ์ สรุปคือ ถ้าเลือกประเภทเว็บให้ชัดก่อน แล้วค่อยเติมฟังก์ชันตามพฤติกรรมผู้ใช้ เว็บจะ “ใช้งานได้จริง” และดูน่าเชื่อถือขึ้นทันทีค่ะ

Related posts

Website design
Design a website in minutes #websitedesign #canvatutorials
KENDRAKREATEDIT📲

KENDRAKREATEDIT📲

973 likes

Anatomy of a URL
A URL is the structured address you use to reach something on the web—built from pieces like the protocol, domain, and path. Let’s break down what each part of a typical URL actually does 😎👆 Find high-res pdf books with all my networking related infographics at https://study-notes.org #te
Learn Linux with Dan

Learn Linux with Dan

13 likes

How To Create A Website Using Canva 🤯
#lemon8diarychallenge How To Create A Landing Page Using Canva! In Today’s Canva Design Hack, I Will Show You How Easy It Is To Create A Stunning Landing Page For Your Business Using Canva! 🥰 #canvatips #canvadesign #canvahacks #canvatemplates #canvatutorial #canvaforbusines
Inuri

Inuri

570 likes

Pages I've made on Neocities so far!
Surprisingly only took me like a week to make too. I've still got a lot of learning to do, but this made me really excited to learn web development!! I've got a lot of pages in mind! #Lemon8Diary #websitesforcreatives #websiteideas #programming #developer
KirbyDreamr

KirbyDreamr

14 likes

BUILD YOUR PAGE & LINK WITH ABOUT ME 🫶🏻
Searching for a apps that can help you put all your social media link, your product or any kind of link that you want to share with other people but you can design it freely? I have great apps for you, it’s called ‘About Me’. About Me app is a user-friendly tool designed to help individuals create
qeen ⋆.˚꣑ৎ

qeen ⋆.˚꣑ৎ

67 likes

A website displaying 'teppy's layouts + sozai' with layout templates, including a 'manga page layout'. It features navigation for 'how to use these layouts' and 'other stuff' like backgrounds and graphics, all within a pink monster-themed frame.
A website titled 'PetraPixel CODING Tools' featuring a 'Layout Generator'. It describes generating HTML, CSS, and JavaScript for responsive websites, listing features like customizable width, sidebars, colors, and fonts, with a 'layout generator' overlay.
Two frames, one pink and one green, each containing a black box with 'words words words' and a code snippet '<div style="wi'. A large text overlay reads 'DIV Boxes', illustrating basic HTML div elements.
Website resources!
1♡ teppyslayouts.neocities.org 2☆ petrapixel.neocities.org 3♡ beelzebabe.neocities.org #websiteideas #socialmedia #neocities
🩷💣BEELZEBABE💣🩷

🩷💣BEELZEBABE💣🩷

10 likes

An overhead view of a laptop, magazine, coffee, and water on a bed, with text overlay 'HOW TO CREATE A FREE UGC PORTFOLIO WEBSITE' and a Lemon8 watermark.
The same bed setup with a laptop and coffee, featuring a bookmark icon and text 'SAVE THIS SO YOU DON'T FORGET' to remind users.
The bed scene with an overlay showing Canva's 'Create a design' and 'Create a team' options, instructing users to 'USE CANVA.COM > CREATE DESIGN'.
FREE UGC PORTFOLIO SITE TUTORIAL 💻📸
A UGC website portfolio is MUCH MORE professional than having reps looking through a PDF presentation. Canva allows you to create a FREE website of any kind, SAVE THIS POST SO YOU DONT FORGET ✨ If you are in the beginning stages of UGC, you found LPA just in time. LPA is my UGC Academy calle
Monica Silva

Monica Silva

673 likes

A computer monitor displays a website for "Suzi Antoinette Designs" with a book cover portfolio. The screen also shows browser tabs for various website builders, with the text "WEBSITE BUILDERS FOR CREATIVES" overlaid.
A computer monitor displays the Shopify website, featuring "Start an online store for free" and showcasing various product images. The text "SHOPIFY" is overlaid on the image.
A computer monitor displays the Wix website, featuring the slogan "Create a website without limits" and various design elements. The text "WIX" is overlaid on the image.
Website Builders for Creatives
Over the past 2 years I’ve tried a variety of different website builders and so far my favorite is Wix it’s easy to use and allows for you to add plenty of extras. Though as a creative there are plenty of options. I loved using Carrd but i did end up growing out of the simple portfolio style once I
Suzi 🖤🤍🖤

Suzi 🖤🤍🖤

38 likes

How I designed my website 👩🏻‍💻💞
I love my personal website. For a long time I just had one because I thought you were supposed to, but I was never proud of it. I didn't feel like it represented me as an artist. Last year, when I got covid and was stuck in bed, I decided to give the site a major overhaul. I chose a basic S
catdookie

catdookie

38 likes

Important details when designing your website 😉
Your website being responsive has a lot to do with how good of a web developer you are, the more creative you are with responsive the better your website will be for your reputation. Always remember, make everything easy and different in a good way for the user.😎 #lemon8diarychallenge #websited
Feibertord ⚡️

Feibertord ⚡️

24 likes

One Feature Every Functional Website Must Have
#webdesigntips #websitenavigation #codingforbeginners #smallbusinesswebsites #functionalwebsites
Aysha

Aysha

6 likes

Powerful Websites
#fyplemon8 # #fypシ #websites #fy #websiteideas
Tha Smoke Websites

Tha Smoke Websites

229 likes

The image displays the title "DESIGN TRICKS I USE TO INSTANTLY LEVEL UP ANY WEBSITE" above a graphic showing a plain website transforming into a more visually appealing one. The text below reads "No fluff — just what actually works."
The image illustrates the concept of using more white space in web design. It shows a "BEFORE" example with tight spacing and an "AFTER" example with increased padding, emphasizing that spacing provides breathing room and prevents cluttered designs.
This image highlights the importance of alignment in design. It presents "OFF-GRID" and "ALIGNED" examples of website layouts, demonstrating how proper alignment of text, buttons, and icons creates a clean and organized appearance.
Design Tricks I Use to Level Up Any Website
#WebDesignTips #CodeWithAysha #UIDesign #DesignGlowUp #FreelanceWebDesigner
Aysha

Aysha

8 likes

A promotional image for "Tag a Day with Aysha" on Day 23, focusing on the `<img>` HTML tag. It features the title, the tag, a code icon, and the phrase "Bring visuals to life on your webpage!" with "Code With Aysha" at the bottom.
An educational slide explaining "What is the <img> Tag?". It shows an example of the `<img>` tag with `src` and `alt` attributes, alongside its visual output. Text defines it as a self-closing tag requiring `src` for source and `alt` for accessibility.
A slide titled "Why It Matters" illustrating the benefits of the `<img>` tag. Icons for Image, Accessibility, and SEO point to `<img>`, explaining that it makes content engaging, improves accessibility with `alt` text for screen readers, and helps SEO.
What Is the <img> Tag? | HTML Explained
Learn how to use the <img> tag in HTML! The <img> tag is used to embed images into your webpage. In today’s Tag a Day with Aysha (Day 23), we’ll explore the syntax, attributes like src and alt, and why adding images with proper descriptions improves both accessibility and SEO. #Lea
Aysha

Aysha

0 likes

Breaking Down The Most Important Features Of A Website
Breaking Down The Most Important Features Of A Website Most people build websites. Very few build websites that convert. Get the breakdown at Stackmode.net #WebDesign #OnlineBusiness
stackmodechris

stackmodechris

0 likes

A laptop displays a Canva design featuring four phone frames showcasing video clips, with text overlay 'how I created this website graphic in Canva'. A vase of pink flowers sits behind the laptop.
A laptop shows a Canva interface with four empty phone frames, illustrating the step of creating a blank file and searching for 'phone frame gray' elements to arrange the layout.
A laptop displays a Canva design where video clips have been imported and placed into four phone frames, demonstrating the final step of creating an aesthetic videography portfolio.
aesthetic website graphic design in Canva?? 🤭
I recently updated my website and this is 1000% my favorite addition! It literally takes less than 5 minutes to create in Canva and I love being able to update it regularly (a mini videography portfolio) 🩷 What are you using this Canva design for?? 👀 #lemon8partner #canvapro #websitede
Allie Marie 🧚🏻

Allie Marie 🧚🏻

90 likes

Alibaba just put an AI agent inside a webpage, and it doesn't need a browser extension, Python, or a headless browser to work. #github #opensource #coding #tech #ai
Kirbyhatguytech

Kirbyhatguytech

0 likes

7 QUESTIONS YOUR WEBSITE HOME PAGE SHOULD ANSWER
Your website home page is the front runner. It will ALWAYS be the space that captures the majority of your traffic so it is SO important to answer all of their questions right away, all in the same place to establish trust and credibility right from the get go. Anyone who visits your site needs to
Kayla Bressler

Kayla Bressler

6 likes

How to create your website! 🦋
Embark on an exciting journey of creating your own website! Follow these essential steps to bring your vision to life. 🚀 1. Define your website's purpose and target audience: Think about what you want to achieve with your website and who you want to reach. 2. Choose a domain name: Select a
ZLovebug

ZLovebug

90 likes

A computer screen displays a UGC portfolio website featuring hair product demonstrations and client testimonials, with the headline 'LET YOUR HAIR DO THE TALKING.'
A computer screen shows the Canva 'Create a design' menu, with 'web' typed in the search bar and 'Website 1366 x 768 px' highlighted for selection.
A computer screen displays the Canva website design interface with a blank canvas, and a hand points towards the center of the screen.
Turn your UGC Portfolio into a Website for FREE 💻
There’s no doubt that a website is better than emailing a pdf file of your ugc portfolio. 💻Tutorial Here 👇🏼 > go to Canva.com > create design — website > start customizing your website — add page: to add pages — add notes: use this feature to name your pages > click Publish
Monica Silva

Monica Silva

470 likes

Powerful Websites
#software #fy #fyplemon8 #designsoftware #fyp
Tha Smoke Websites

Tha Smoke Websites

202 likes

Build your own Website for free!
Cozy content creators, bloggers, business owners, or someone who wants to establish a personal brand! 🔊 You’ve got to build a website ~ not only is it fun, it allows you to showcase your work, build an audience, and potentially generate income. ☺️ ➤ It's a tool for building a digital pre
Cozyosities 🪭

Cozyosities 🪭

22 likes

3 Powerful Websites
#designsoftware #software #fyp #fyplemon8 #freewebsite
Tha Smoke Websites

Tha Smoke Websites

3924 likes

A laptop, coffee mug, and notebook on a desk, with text overlay "How To Start Your Own Business" and user handle.
A laptop keyboard and pen, with text outlining steps for "Logo": picking a name, creating a logo, and choosing theme colors.
A laptop keyboard and pen, with text outlining steps for "Product": what to sell, how many options, and who to sell to.
How To Start Your Own Business 📊
Based on my experience! #businessidea #bussiness #businessplantemplate #businesstipsandtricks #businesstip #businessplan #entrepreneur
TheRealRosana 🦋

TheRealRosana 🦋

2747 likes

A pink-themed room features a white bookshelf filled with books and decorative items. A vase with pink blossoms stands on the left. The text 'Website Building' is prominently displayed in pink script, with the Lemon8 logo and username '@cutnsnipcreations' in the bottom left corner.
Website Building 👷‍♂️
It has been difficult to set up my website while taking care of little ones 🤪 They decided a no nap day was needed. The best news though, I'm able to create a "mini website" through Shopify for $5!!! I will have a product page and other pages like a full website and have access to s
Heather

Heather

5 likes

Making mood boards for your website vibe
It’s those beginning stages that really bring everything together. The nitty gritty. Soooooo…let’s talk mood boards, and how they help tie everything together for your website 🖤 1. Here, we will catch your overall vibe for your brand 2. They help narrow down design options to fit your brand/bus
Kayla Bressler

Kayla Bressler

5 likes

A collage showcasing an author's website created with Canva, featuring sections like Home, About, Services, Feedback, and Contact. It includes a photo of author Andrielle Giscombe and character art for 'Lotus of Obsession'.
The author's website 'Home' and 'About' pages, featuring Andrielle Giscombe's headshot, character spotlight for 'Lotus of Obsession' with Izaak Lin and Aura Grant, and a Kindle customer review.
The author's website 'Rave Reviews' and 'Reviews & Quotes' sections, displaying Kindle customer feedback, the 'Lotus of Obsession' book cover, and a brief author bio with astrological signs.
How I used Canva to Create my Author Website.
I f*cking love Canva. Their templates eat the girls up every time. While looking for an authors page template I couldn’t find one that I like, so I decided to get creative. I’m into the end result, real bad. 🤞🏾👅😈 What have you used Canva for? SN: check out my book #lotusofobsess
andrielle, the oracle chef

andrielle, the oracle chef

68 likes

Website hack
The fear every engineering student feels when building their first website—what you imagine just never looks the same in reality. I spent years trying to design a decent site, and it still never felt quite right 😅 But this time, thanks to Gamma—omg—it turned my rough idea into a clean, profession
studywithemmane

studywithemmane

77 likes

A Squarespace website template for fashion and influencers, titled 'THE INFLUENCER'. It showcases beauty products, lifestyle content, and fashion tips, with sections like 'Hey There!' and 'My Everyday Makeup Routine'. 'Check out your new website' is overlaid on the left.
Squarespace Website Template
Website template for fashion and influencers hosted on squarespace Linked in my bio complete website to plug in your info and start shsring your professional look 💁🏼‍♀️ https://liketk.it/4HYv2
Christina Albin

Christina Albin

3 likes

Website softwares
The only thing better than a website is a landing page. The only thing better than a landing page is a comprehensive funnel behind it. These are my favorite software! I currently pay for Go High Level and just switched to systems.io for funnels because it's much cheaper even though in love high
Curlyssa

Curlyssa

27 likes

Powerful Website
Check this out #websites
Tha Smoke Websites

Tha Smoke Websites

707 likes

A laptop screen displays a Chrome browser with a 'Replace font on: Pinterest' pop-up, demonstrating a font changer extension. The image is titled 'Chrome extensions to increase web accessibility' with a 'SWIPE TO VIEW' overlay, set against a background of a pink heart mirror and plush toys.
The image showcases the 'Dark Reader' Chrome extension, with its Web Store page and screenshots. It illustrates how the extension transforms a website (Wikipedia) from light to dark mode, accompanied by text stating, 'Turn any website into dark mode in a click of a button!'.
This image features the 'Vertical Tabs in Side Panel' Chrome extension. It displays the extension's Web Store page and screenshots showing browser tabs organized vertically in a sidebar. The accompanying text explains, 'Now you can switch your tabs to a vertical view in the browser sidebar.'.
increase web accessibility with these extensions ✨
‧°𐐪♡𐑂°‧₊ 🍓 Here’s part 1 of some chrome extensions to help you enhance your browser’s visual layout and design. 🌸 Dark Reader: I think this is a great, easy-to-use extension to make any web page from light to dark mode since this capability is still missing on many websites. You can also adju
peachiesuga ♡

peachiesuga ♡

218 likes

Easiest way to design a website for FREE
If you’re starting a business or side hustle and think you need thousands of dollars for a website… you don’t. There are free tools that let you build a clean, professional site in minutes — no coding, no tech skills. This is exactly how I started when I launched my business. Start simple, ge
Shelby • Mobile Bar Coach

Shelby • Mobile Bar Coach

2 likes

Most Website Owners Don’t Know This Is Free…
If you own a website, you don’t have to pay for everything. There are free tools that can help you: • Track visitors • Track links • Monitor website health • Check for viruses • Improve SEO • Speed up your site • Protect your site • See where your traffic comes from • Store important we
Global Vibes Hub

Global Vibes Hub

49 likes

How I Turn Wireframe into Fully Functional Website
My web design process doesn’t start in code — it starts with a pencil. From layout sketches to styled interfaces and clean, responsive code, here’s the workflow I follow every time. Steal it if it helps 🙌 #WebDesignProcess #CodeWithAysha #UIDesignWorkflow #WireframeToWebsite #HTMLCS
Aysha

Aysha

3 likes

Notion Tutorial - How To Build A Website For Free
Notion Tutorial For Beginners - How To Build A Website For Free Using Notion. In Today’s Notion Tip, I’ll Show You How To Create A Beautiful Media Kit For Free On Notion. This Notion Hack Is Going To Be A Game Changer For New Content Creators On A Budget 😎 Did You Know About This? Let M
Inuri

Inuri

193 likes

The image displays the title '5 STYLISH LOGIN PAGES' and a sample login form with fields for email, password, and options for forgotten password or signing up. It also asks, 'Want to level up your login page designs?'.
This image presents 'LOGIN FORM 1', a login interface titled 'MyApp' with a welcome message, fields for username or email and password, a login button, and a sign-up option for new users.
The image shows 'LOGIN FORM 2', featuring a clean login form with 'Welcome Back', email and password fields, and a login button. Below the form, a blue section states, 'Secure Access to Your Dashboard Starts Here'.
5 Stylish Login Pages
#html #css #login #webdevelopment #coding
Aysha

Aysha

5 likes

Powerful Websites
#fyp #fyplemon8 #websites #digitalresources #fy
Tha Smoke Websites

Tha Smoke Websites

758 likes

A dark blue graphic introduces "TAG A DAY WITH AYSHA" for Day 22, focusing on the HTML <link> tag. It states the tag helps "Bring external resources into your webpage!" and features a code icon.
This image explains the <link> tag, showing HTML code for linking stylesheets and favicons within the <head> section. It defines the tag's role in connecting HTML to external resources like CSS, favicons, and fonts.
A graphic titled "Why It Matters" illustrates the benefits of the <link> tag: Design, Reuse, and Performance. It explains that the tag separates HTML from CSS, allows reusable stylesheets, and improves performance through preloading.
What Is the <link> Tag? | HTML Explained
Learn how to use the <link> tag in HTML! The <link> tag connects your webpage to external resources like CSS stylesheets, favicons, and fonts. #LearnToCode #HTMLForBeginners #WebDevelopment #htmltags #codewithaysha
Aysha

Aysha

1 like

A MacBook Air displays the Coolors.co website, showing a pink color palette with hex codes. The image has an overlay text 'Creative websites you need to know SWIPE TO VIEW', introducing tools for creative projects.
A screenshot of Coolors.co displays a generated pink color palette with hex codes. The text highlights its function to 'Find the HEX code to any color or generate a palette to use for creative projects'.
A screenshot of the Wix website shows its homepage promoting website creation and an example of an e-commerce site. The text describes Wix as 'A free and simple website building tool' for various projects.
💡 free websites to try for creative projects
🍡 Some free websites to try for creative/personal projects! Some of these are more and less known, but I use these often as a UX design student and have found them useful for projects beyond my line of study too so I thought to share! 🍬 Coolors.co is a color palette tool - which has a random ge
peachiesuga ♡

peachiesuga ♡

2282 likes

See more