LÀM THẾ NÀO ĐỂ

HowTo Home

Thực đơn

Thanh biểu tượng Biểu tượng Menu Accordion Các tab Tab dọc Tiêu đề tab Các tab toàn trang Các Tab Di chuột Điều hướng hàng đầu Topnav đáp ứng Thanh điều hướng với các biểu tượng Menu Tìm kiếm Thanh tìm kiếm Thanh bên cố định Điều hướng trang Thanh bên đáp ứng Điều hướng toàn màn hình Menu Off-Canvas Di chuột Sidenav Buttons Thanh bên có các biểu tượng Menu cuộn ngang Menu dọc Điều hướng dưới cùng Điều hướng phía dưới đáp ứng Liên kết điều hướng đường viền dưới cùng Các liên kết menu căn phải Liên kết menu ở giữa Các liên kết menu có chiều rộng bằng nhau Menu cố định Thanh trượt xuống khi cuộn Ẩn thanh điều hướng trên cuộn Thu nhỏ thanh điều hướng khi cuộn Thanh điều hướng dính Thanh điều hướng trên hình ảnh Di chuột thả xuống Nhấp vào Trình đơn thả xuống Xếp tầng thả xuống Thả xuống trong Topnav Trình đơn thả xuống trong Sidenav Phản hồi thanh điều hướng thả xuống Menu Subnavigation Dropup Menu Mega Menu di động Menu rèm Thanh bên đã thu gọn Đã thu gọn bảng điều khiển Phân trang Breadcrumbs Nhóm nút Nhóm nút dọc Sticky Social Bar Điều hướng viên thuốc Tiêu đề đáp ứng

Hình ảnh

trình chiếu Thư viện trình chiếu Hình ảnh phương thức Hộp đèn Lưới hình ảnh đáp ứng Lưới hình ảnh Thư viện tab Làm mờ lớp phủ hình ảnh Trang trình bày Lớp phủ Hình ảnh Thu phóng lớp phủ hình ảnh Tiêu đề lớp phủ hình ảnh Biểu tượng Lớp phủ Hình ảnh Hiệu ứng hình ảnh Hình ảnh đen trắng Văn bản Hình ảnh Khối văn bản hình ảnh Văn bản Hình ảnh Trong suốt Hình ảnh Toàn trang Biểu mẫu trên hình ảnh Hình ảnh anh hùng Làm mờ hình nền Thay đổi Bg trên cuộn Hình ảnh cạnh nhau Hình ảnh làm tròn Hình đại diện Hình ảnh đáp ứng Hình ảnh trung tâm Hình thu nhỏ Đường viền xung quanh hình ảnh Gặp gỡ đội Hình ảnh dính Lật hình ảnh Lắc hình ảnh Thư viện danh mục đầu tư Danh mục đầu tư với bộ lọc Thu phóng hình ảnh Kính lúp hình ảnh Thanh trượt so sánh hình ảnh Favicon

nút

Các nút cảnh báo Các nút phác thảo Nút tách Các nút hoạt hình Fading Buttons Nút trên hình ảnh Các nút mạng xã hội Đọc thêm Đọc ít hơn Các nút đang tải Tải xuống các nút Các nút thuốc Nút thông báo Các nút biểu tượng Các nút tiếp theo / trước Nút khác trong điều hướng Các nút khối Các nút văn bản Các nút tròn Nút cuộn lên đầu

Các hình thức

mẫu đăng nhập Biểu mẫu đăng ký Biểu mẫu thanh toán Mâu liên hệ Biểu mẫu đăng nhập mạng xã hội Đăng ký biểu mẫu Biểu mẫu với các biểu tượng Bản tin Biểu mẫu xếp chồng lên nhau Biểu mẫu đáp ứng Biểu mẫu bật lên Mẫu nội tuyến Xóa trường nhập Ẩn Mũi tên Số Sao chép văn bản vào khay nhớ tạm Tìm kiếm hoạt hình Nút tìm kiếm Tìm kiếm toàn màn hình Trường nhập trong thanh điều hướng Biểu mẫu đăng nhập trong Navbar Hộp kiểm tùy chỉnh / Đài Lựa chọn tùy chỉnh Nút chuyển đổi Kiểm tra Hộp kiểm Phát hiện Caps Lock Nút kích hoạt khi Enter Xác thực mật khẩu Chuyển đổi chế độ hiển thị mật khẩu Biểu mẫu nhiều bước Tự động hoàn thành Tắt tự động hoàn thành Tắt kiểm tra chính tả Nút tải lên tệp Xác thực đầu vào trống

Bộ lọc

Danh sách bộ lọc Bộ lọc bảng Các phần tử bộ lọc Bộ lọc thả xuống Sắp xếp danh sách Bảng chính tả

Những cái bàn

Bàn sọc ngựa vằn Bảng trung tâm Bảng toàn chiều rộng Bảng cạnh nhau Bảng đáp ứng Bảng so sánh

Hơn

Video toàn màn hình Hộp phương thức Xóa phương thức Mốc thời gian Chỉ báo cuộn Thanh tiến trình Thanh kỹ năng Thanh trượt Phạm vi Chú giải công cụ Di chuột phần tử hiển thị Cửa sổ bật lên Có thể thu gọn Lịch HTML bao gồm Những việc cần làm Máy xúc lật Đánh giá sao Đánh giá của người dùng Hiệu ứng lớp phủ Liên hệ với chip thẻ Thẻ lật Thẻ hồ sơ Thẻ sản phẩm Cảnh báo Gọi ra Ghi chú Nhãn Vòng kết nối Phong cách HR Phiếu mua hàng Danh sách nhóm Danh sách không có dấu đầu dòng Văn bản đáp ứng Văn bản cắt ra Văn bản phát sáng Chân trang cố định Yếu tố dính Chiều cao bằng nhau Clearfix Pha nổi đáp ứng Snackbar Cửa sổ toàn màn hình Bản vẽ cuộn Cuộn mượt mà Cuộn Gradient Bg Tiêu đề dính Thu nhỏ tiêu đề khi cuộn Bảng giá Thị sai Tỷ lệ khung hình Iframe đáp ứng Chuyển đổi Thích / Không thích Chuyển đổi Ẩn / Hiện Chuyển sang chế độ tối Chuyển đổi văn bản Chuyển đổi lớp học Thêm lớp Xóa lớp Lớp học hoạt động Chế độ xem cây Xóa thuộc tính Phát hiện ngoại tuyến Tìm phần tử ẩn Trang web chuyển hướng Thu phóng Di chuột Hộp lật Căn giữa theo chiều dọc Nút trung tâm trong DIV Chuyển đổi trên Di chuột Mũi tên Hình dạng Liên kết tải xuống Phần tử chiều cao đầy đủ Cửa sổ trinh duyệt Thanh cuộn tùy chỉnh Ẩn thanh cuộn Hiển thị / Buộc thanh cuộn Giao diện thiết bị Đường viền có thể nội dung Màu trình giữ chỗ Màu lựa chọn văn bản Màu gạch đầu dòng Đường dọc Ngăn cách Hoạt hình các biểu tượng Đồng hồ đếm ngược Máy đánh chữ Trang sắp ra mắt Tin nhắn trò chuyện Cửa sổ trò chuyện bật lên Màn hình chia nhỏ Lời chứng thực Bộ đếm phần Trích dẫn Trình chiếu Các mục trong danh sách có thể đóng lại Điểm ngắt thiết bị điển hình Phần tử HTML có thể kéo Truy vấn phương tiện JS Công cụ đánh dấu cú pháp Hoạt ảnh JS Độ dài chuỗi JS Luỹ thừa JS Tham số mặc định JS Nhận URL hiện tại Nhận kích thước màn hình hiện tại Nhận phần tử iframe

Trang mạng

Tạo một trang web miễn phí Tạo một trang web Tạo một trang web tĩnh Tạo trang web (W3.CSS) Tạo trang web (BS3) Tạo trang web (BS4) Tạo trang web (BS5) Tạo và xem một trang web Tạo trang web cây liên kết Tạo một danh mục đầu tư Tạo sơ yếu lý lịch Tạo trang web nhà hàng Tạo trang web kinh doanh Tạo sách web Trang web Trung tâm Phần liên hệ Giới thiệu về Trang Tiêu đề lớn Trang web mẫu

Lưới điện

Bố cục 2 cột Bố cục 3 cột Bố cục 4 cột Mở rộng lưới Danh sách Chế độ xem Lưới Bố cục cột hỗn hợp Thẻ cột Bố cục Zig Zag Bố cục Blog

Google

Google Charts Phông chữ Google Ghép nối phông chữ của Google Google Thiết lập phân tích

Người chuyển đổi

Chuyển đổi trọng lượng Chuyển đổi nhiệt độ Chuyển đổi độ dài Chuyển đổi tốc độ

Blog

Nhận công việc nhà phát triển Trở thành Front-End Dev.

CÁCH LÀM - Tạo một trang web miễn phí


Xây dựng và lưu trữ trang web của bạn với W3Schools Spaces.

Bắt đầu với trang web miễn phí của bạn trong một vài cú nhấp chuột.

Mọi thứ bạn cần ngay trong trình duyệt.

Nó rất dễ sử dụng - hãy thử nó!

Bắt đầu miễn phí »

Tạo trang web đầu tiên của bạn với W3Schools Spaces

W3Schools Spaces là một nơi cá nhân, nơi bạn có thể xây dựng và thử nghiệm với mã và lưu trữ trang web của riêng bạn.

Với W3Schools Spaces, bạn có thể xây dựng bằng HTML, CSS và JavaScript.

Chỉnh sửa mã trực tiếp trong trình duyệt của bạn.

Tải lên và lưu trữ các tệp và hình ảnh của bạn.

Bắt đầu phát triển sự hiện diện trực tuyến của bạn ngay hôm nay!


Tại sao nên xây dựng với W3Schools Spaces?

Spaces được tạo ra bởi các nhà phát triển web dành cho các nhà phát triển web.

  1. Giao diện đơn giản và dễ sử dụng.
  2. Lưu trữ và chỉnh sửa tệp của bạn ngay trong trình duyệt.
  3. Mẫu miễn phí.

Nó là miễn phí để bắt đầu và bạn không cần phải nhập thẻ tín dụng của bạn.


Chỉnh sửa và xem trước mã

Trình chỉnh sửa rất dễ sử dụng - giúp bạn tập trung vào những thứ quan trọng nhất.

Kiểm tra khả năng đáp ứng của trang web của bạn bằng các lựa chọn thay thế xem trước khác nhau.

Xem trước các thay đổi trên trang web của bạn, trực tiếp!


Xây dựng từ mọi nơi

Lưu trữ các tệp và hình ảnh của bạn trên đám mây.

Giữ tổ chức bằng cách tạo cấu trúc với các thư mục.

Mọi thứ bạn cần ngay trong trình duyệt.


Mẫu miễn phí

Duyệt và sử dụng các mẫu trang web đáp ứng của chúng tôi.

Sửa đổi, lưu, chia sẻ và sử dụng chúng trong các dự án của bạn.

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