วิธีทำ

ฮาวทูโฮม

เมนู

ไอคอนบาร์ ไอคอนเมนู หีบเพลง แท็บ แท็บแนวตั้ง ส่วนหัวของแท็บ แท็บเต็มหน้า วางเมาส์เหนือแท็บ การนำทางยอดนิยม ตอบสนอง Topnav แถบนำทางพร้อมไอคอน ค้นหาเมนู แถบค้นหา แถบด้านข้างคงที่ การนำทางหน้า แถบด้านข้างที่ตอบสนอง การนำทางแบบเต็มหน้าจอ เมนูออฟแคนวาส เลื่อนปุ่ม Sidenav แถบด้านข้างพร้อมไอคอน เมนูเลื่อนแนวนอน เมนูแนวตั้ง การนำทางด้านล่าง การนำทางด้านล่างที่ตอบสนอง ลิงค์นำทางด้านล่าง ลิงค์เมนูชิดขวา ลิงค์เมนูตรงกลาง ลิงค์เมนูความกว้างเท่ากัน เมนูคงที่ แถบเลื่อนลงบน Scroll ซ่อนแถบนำทางบน Scroll ย่อแถบนำทางบน Scroll แถบนำทางติดหนึบ แถบนำทางบนรูปภาพ วางเมาส์เหนือรายการแบบเลื่อนลง คลิกเมนูแบบเลื่อนลง Cascading Dropdown ดรอปดาวน์ใน Topnav เมนูแบบเลื่อนลงใน Sidenav ตอบสนอง Navbar ดรอปดาวน์ เมนูการนำทางย่อย Dropup เมนูเมก้า เมนูมือถือ เมนูผ้าม่าน ยุบแถบด้านข้าง แผงข้างที่ยุบ การแบ่งหน้า เกล็ดขนมปัง กลุ่มปุ่ม กลุ่มปุ่มแนวตั้ง Sticky Social Bar การนำทางยา ส่วนหัวที่ตอบสนอง

รูปภาพ

สไลด์โชว์ แกลเลอรี่ภาพสไลด์ รูปภาพโมดอล ไลท์บ็อกซ์ ตารางภาพที่ตอบสนอง ตารางรูปภาพ แท็บแกลลอรี่ ภาพซ้อนทับจาง สไลด์ภาพซ้อนทับ ซูมภาพซ้อนทับ ชื่อภาพซ้อนทับ ไอคอนภาพซ้อนทับ เอฟเฟกต์ภาพ ภาพขาวดำ ข้อความรูปภาพ บล็อกข้อความรูปภาพ ข้อความรูปภาพโปร่งใส ภาพเต็มหน้า แบบฟอร์มบนรูปภาพ ภาพฮีโร่ ภาพพื้นหลังเบลอ เปลี่ยน Bg บน Scroll ภาพเคียงข้างกัน รูปภาพโค้งมน รูปภาพอวาตาร์ รูปภาพที่ตอบสนอง เซ็นเตอร์ อิมเมจ รูปขนาดย่อ ชายแดนรอบรูปภาพ พบกับทีม ภาพติดหนึบ พลิกภาพ เขย่าภาพ Portfolio Gallery ผลงานที่มีการกรอง ซูมภาพ แว่นขยายภาพ ตัวเลื่อนเปรียบเทียบรูปภาพ Favicon

ปุ่ม

ปุ่มแจ้งเตือน ปุ่มเค้าร่าง ปุ่มแยก ปุ่มเคลื่อนไหว ปุ่มซีดจาง ปุ่มบนรูปภาพ ปุ่มโซเชียลมีเดีย อ่านเพิ่มเติม อ่านน้อยลง กำลังโหลดปุ่ม ดาวน์โหลดปุ่ม ปุ่มยา ปุ่มแจ้งเตือน ปุ่มไอคอน ปุ่มถัดไป/ก่อนหน้า ปุ่มเพิ่มเติมในการนำทาง บล็อกปุ่ม ปุ่มข้อความ ปุ่มกลม เลื่อนไปที่ปุ่มด้านบน

แบบฟอร์ม

แบบฟอร์มเข้าสู่ระบบ แบบฟอร์มลงทะเบียน แบบฟอร์มการชำระเงิน แบบฟอร์มการติดต่อ แบบฟอร์มเข้าสู่ระบบโซเชียล แบบฟอร์มลงทะเบียน แบบฟอร์มที่มีไอคอน จดหมายข่าว แบบฟอร์มซ้อน แบบฟอร์มตอบสนอง แบบฟอร์มป๊อปอัป แบบฟอร์มอินไลน์ ล้างช่องป้อนข้อมูล ซ่อนลูกศรตัวเลข คัดลอกข้อความไปยังคลิปบอร์ด ค้นหาเคลื่อนไหว ปุ่มค้นหา ค้นหาแบบเต็มหน้าจอ ช่องป้อนข้อมูลใน Navbar แบบฟอร์มเข้าสู่ระบบใน Navbar กำหนดเอง ช่องทำเครื่องหมาย/วิทยุ เลือกเอง สวิตช์สลับ เลือกช่องทำเครื่องหมาย ตรวจจับ Caps Lock ปุ่มทริกเกอร์บน Enter การตรวจสอบรหัสผ่าน สลับการเปิดเผยรหัสผ่าน แบบฟอร์มหลายขั้นตอน เติมข้อความอัตโนมัติ ปิดการเติมข้อความอัตโนมัติ ปิดการตรวจตัวสะกด ปุ่มอัพโหลดไฟล์ การตรวจสอบความถูกต้องของอินพุตที่ว่างเปล่า

ตัวกรอง

รายการตัวกรอง ตารางตัวกรอง องค์ประกอบตัวกรอง กรองรายการแบบเลื่อนลง เรียงรายการ ตารางการสะกด

โต๊ะ

โต๊ะลายม้าลาย โต๊ะกลาง ตารางเต็มความกว้าง โต๊ะข้างเคียง ตารางตอบสนอง ตารางเปรียบเทียบ

มากกว่า

วิดีโอแบบเต็มหน้าจอ กล่องโมดอล ลบ Modal เส้นเวลา ตัวบ่งชี้การเลื่อน แถบความคืบหน้า แถบทักษะ ตัวเลื่อนช่วง เคล็ดลับเครื่องมือ แสดงองค์ประกอบ Hover ป๊อปอัพ พับได้ ปฏิทิน HTML รวม รายการสิ่งที่ต้องทำ รถตัก ระดับดาว คะแนนของผู้ใช้ เอฟเฟกต์ภาพซ้อนทับ ติดต่อชิป การ์ด พลิกการ์ด การ์ดโปรไฟล์ บัตรผลิตภัณฑ์ การแจ้งเตือน โทรออก หมายเหตุ ป้าย แวดวง สไตล์ HR คูปอง รายการกลุ่ม รายการที่ไม่มีสัญลักษณ์แสดงหัวข้อย่อย ข้อความตอบสนอง ข้อความคัตเอาท์ ข้อความเรืองแสง แก้ไขส่วนท้าย องค์ประกอบเหนียว ความสูงเท่ากัน Clearfix ลอยตัวตอบสนอง สแน็คบาร์ หน้าต่างเต็มหน้าจอ วาดเลื่อน เลื่อนเรียบ เลื่อน Bg ไล่ระดับ ติดหัว ย่อส่วนหัวบน Scroll ตารางราคา พารัลแลกซ์ อัตราส่วนภาพ Iframes ที่ตอบสนอง สลับชอบ/ไม่ชอบ สลับซ่อน/แสดง สลับโหมดมืด สลับข้อความ สลับคลาส เพิ่มคลาส ลบคลาส คลาสที่ใช้งาน วิวต้นไม้ ลบทรัพย์สิน การตรวจจับออฟไลน์ ค้นหาองค์ประกอบที่ซ่อนอยู่ เปลี่ยนเส้นทางหน้าเว็บ ซูมโฮเวอร์ พลิกกล่อง ตั้งศูนย์ในแนวตั้ง ปุ่มกลางใน DIV การเปลี่ยนแปลงเมื่อวางเมาส์เหนือ ลูกศร รูปร่าง ลิ้งค์ดาวน์โหลด องค์ประกอบความสูงเต็ม หน้าต่างเบราว์เซอร์ แถบเลื่อนแบบกำหนดเอง ซ่อนแถบเลื่อน แสดง/บังคับแถบเลื่อน ดูอุปกรณ์ เส้นขอบที่แก้ไขได้ ตัวยึดสี สีการเลือกข้อความ สีกระสุน เส้นแนวตั้ง วงเวียน ไอคอนเคลื่อนไหว นาฬิกาจับเวลาถอยหลัง เครื่องพิมพ์ดีด เร็วๆ นี้ เพจ ข้อความแชท หน้าต่างแชทแบบป๊อปอัป หน้าจอแยก ข้อความรับรอง ส่วนเคาน์เตอร์ สไลด์โชว์คำคม รายการที่ปิดได้ เบรกพอยต์อุปกรณ์ทั่วไป องค์ประกอบ HTML ที่ลากได้ JS Media Queries ปากกาเน้นข้อความ JS Animations JS String Length JS การยกกำลัง JS พารามิเตอร์เริ่มต้น รับ URL ปัจจุบัน รับขนาดหน้าจอปัจจุบัน รับองค์ประกอบ Iframe

เว็บไซต์

สร้างเว็บไซต์ฟรี ทำเว็บไซต์ สร้างเว็บไซต์แบบคงที่ สร้างเว็บไซต์ (W3.CSS) สร้างเว็บไซต์ (BS3) สร้างเว็บไซต์ (BS4) สร้างเว็บไซต์ (BS5) สร้างและดูเว็บไซต์ สร้างเว็บไซต์ลิงค์ทรี สร้างผลงาน สร้างเรซูเม่ ทำเว็บไซต์ร้านอาหาร ทำเว็บไซต์ธุรกิจ ทำเว็บบุ๊ก เว็บไซต์ศูนย์ ส่วนติดต่อ เกี่ยวกับเพจ หัวโต ตัวอย่างเว็บไซต์

กริด

เค้าโครง 2 คอลัมน์ เค้าโครง 3 คอลัมน์ เค้าโครง 4 คอลัมน์ ขยายกริด แสดงรายการมุมมองกริด เค้าโครงคอลัมน์แบบผสม การ์ดคอลัมน์ เค้าโครงซิกแซก เค้าโครงบล็อก

Google

Google Charts Google Fonts การจับคู่แบบอักษรของ Google Google ตั้งค่า Analytics

ตัวแปลงสัญญาณ

แปลงน้ำหนัก แปลงอุณหภูมิ แปลงความยาว แปลงความเร็ว

บล็อก

รับงานนักพัฒนา มาเป็น Front-End Dev

How TO - สร้างเว็บไซต์ฟรี


สร้างและโฮสต์เว็บไซต์ของคุณด้วย W3Schools Spaces

เริ่มต้นกับเว็บไซต์ฟรีของคุณในไม่กี่คลิก

ทุกสิ่งที่คุณต้องการในเบราว์เซอร์

ใช้งานง่าย - ลองเลย!

เริ่มต้นใช้งานฟรี »

สร้างเว็บไซต์แรกของคุณด้วย W3Schools Spaces

W3Schools Spacesเป็นสถานที่ส่วนตัวที่คุณสามารถสร้างและทดลองโค้ดและโฮสต์เว็บไซต์ของคุณเองได้

ด้วย W3Schools Spaces คุณสามารถสร้างด้วย HTML, CSS และ JavaScript

แก้ไขรหัสโดยตรงในเบราว์เซอร์ของคุณ

อัปโหลดและโฮสต์ไฟล์และรูปภาพของคุณ

เริ่มขยายสถานะออนไลน์ของคุณวันนี้!


ทำไมต้องสร้างด้วย W3Schools Spaces?

Spaces สร้างโดยนักพัฒนาเว็บสำหรับนักพัฒนาเว็บ

  1. อินเทอร์เฟซเรียบง่ายและใช้งานง่าย
  2. โฮสต์และแก้ไขไฟล์ของคุณในเบราว์เซอร์
  3. แม่แบบฟรี

เริ่มต้น ได้ฟรีและไม่ต้องใส่บัตรเครดิต


แก้ไขและดูตัวอย่างโค้ด

เครื่องมือแก้ไขนี้ใช้งานง่าย - ซึ่งช่วยให้คุณจดจ่อกับสิ่งที่สำคัญที่สุดได้

ตรวจสอบการตอบสนองของไซต์ของคุณด้วยตัวเลือกการแสดงตัวอย่างต่างๆ

ดูตัวอย่างการเปลี่ยนแปลงบนเว็บไซต์ของคุณ ถ่ายทอดสด!


สร้างได้จากทุกที่

โฮสต์ไฟล์และรูปภาพของคุณในคลาวด์

จัดระเบียบด้วยการสร้างโครงสร้างที่มีโฟลเดอร์

ทุกสิ่งที่คุณต้องการในเบราว์เซอร์


เทมเพลตฟรี

เรียกดูและใช้เทมเพลตเว็บไซต์ที่ตอบสนองของเรา

แก้ไข บันทึก แบ่งปัน และใช้ในโครงการของคุณ

The templates are powered by W3.CSS


What Do I Need to Know to Get Started?

HTML, CSS and JavaScript are the foundational languages to build a website.

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML »
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS »
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript »

Do not worry if you do not know how to code. The most important thing is to get hands on, early on. Learning how to code is best done with getting practical. Start to build something today!


Lets Get Started in a Few Steps

Do you already have a W3Schools Account? If so, skip the first step


Step One: Sign Up For an Account

To be able to use Spaces you need to sign up and get your account.

Lets get you set up!

Go to - Click "Sign up" and enter your email and password, then click the "Sign up for free" button.

Remember to validate your account in your email. Check the spam filter if you cannot find the validation email in your inbox.

Get more information about how to sign up in our article - How to sign up


Step Two: Start with a template or HTML skeleton

Go to

Select one of the options and click the "Continue" button.

Do not worry too much about this decision. You can reset your Space and start over again whenever you want.


Step Three: Give your space a name

Personalize your Space by giving it an amazing name.

You can not use special letters in the name, such as (#, ! or :). The only exception is dash ( - )

The name will be the link that you share with others to see your site. For example: yourname.w3spaces.com


Step Four: Enter your space

Great job! you made it to the dashboard.

In the dashboard you get an overview of your spaces and usage.

Enter your space and its File Overview by clicking somewhere on the space's row or click the button with the three dots to the right inside the row.

You can only have one space with the free plan. However, you can always upgrade to get more spaces.


Step Five: Edit code or upload files

This is where the magic happens!

Start to edit code or upload files

  • Edit code by clicking on the "Pen icon" to the right of the file that you want to edit.
  • Create new files by clicking on the "New file" button.
  • Upload files by clicking on the "Upload files" button.

Step Six: Publish your site and share it with someone

This is the start of building your online presence.

Learn, test, build, and go live with your space.

Create your website and share it with others.

Note: Your space name with the .w3spaces.com extension is your shareable link. Read more about how to share your space in this article How can I share my space?


W3Schools Spaces

W3Schools Spaces

Build your own website with W3Schools Spaces.

Get Started for Free