Try It Yourself

Tryit Home

W3Schools Online Code Editor

With W3Schools online code editor, you can edit HTML, CSS and JavaScript code, and view the result in your browser.

Run » Result Size:


<!DOCTYPE html>
<title>Page Title</title>
body {
  background-color: black;
  text-align: center;
  color: white;

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<img src="avatar.png" alt="Avatar" style="width:200px">


This is a Heading

This is a paragraph.

来试试吧 »

Click on the "来试试吧" button to see how it works.

网页编辑器 Explained

The window to the left is editable - edit the code and click on the "Run" button to view the result in the right window.

The "Result Size" returns the width and the height of the result window in pixels (even when you resize the browser window).

You can control the size of a window with the bar in between the windows (draggable gutter).

The icons are explained in the table below:

Icon Description
Go to
Menu button for more options
Save your code (and share it with others)
Change orientation (horizontally or vertically)
Change color theme (dark or light)

Learn to Code

If you are new to coding, we suggest that you start with HTML, and move on to CSS and JavaScript:

HTML Tutorial CSS Tutorial JavaScript Tutorial

W3Schools is optimized for learning, testing, and training. 示例 might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.