Welcome to the Playground!

I see that it's your first time here. Please consider doing a few lessons first if you are not familiar with Codemoji and in no time you'll be able to come back and master the playground!

This area is called the playground. You can use it to play around with the different tags, building whatever webpage you would like. There are no rules! Simply drag the emojis from the Emoji Box into the text editor on the left and then add text to see what you can create.

As always, press the blue "Run Code" button in the bottom left corner of the screen to run your code, then press the purple "View Code" button that appears to see what you've created!

If you forget your task (to play!) or would like a refresher as to how the playground works, simply click the white triangle in the bottom left corner of the screen and this tip will reappear.

Code Example

index.html

<html>
<head>
<title>Your Title Here</title>
</head>
<body>
<h1>Your Main Heading Here</h1>
<p>Your paragraph content here.</p>
<div>Your division content here.</div>
<br>
<strong>Your strong text here.</strong>
<span>Your span content here.</span>
<img src="https://www.example.com/image.jpg" alt="An example image">
<a href="https://www.example.com">Click here for more.</a>
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
</ul>
<blockquote>This is a quoted text.</blockquote>
<table>
    <tr>
        <td>Table data</td>
    </tr>
</table>
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>

style.css

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
}

Emoji Examples

Smiley Emojis

Tags Overview

HTML - This is the tag. All HTML documents start and stop with this tag.
HEAD - This is the tag, containing metadata.
TITLE - This is the tag, giving order to your document.</li> <li><strong>BODY</strong> - This is the <body> tag, where your content is placed.</li> <li><strong>P</strong> - This is the <p> tag for paragraphs.</li> <li><strong>DIV</strong> - This is the <div> tag, used for division in content.</li> <li><strong>BR</strong> - This is the <br> tag, creating breaks in content.</li> <li><strong>STRONG</strong> - This is the <strong> tag for emphasis.</li> <li><strong>IMG</strong> - This is the <img> tag for images.</li> <li><strong>A</strong> - This is the <a> tag for links.</li> <li><strong>BLOCKQUOTE</strong> - This is the <blockquote> tag for quotations.</li> <li><strong>TABLE</strong> - This is the <table> tag for structure.</li> <li><strong>AUDIO</strong> - This is the <audio> tag for sound content.</li> <li><strong>VIDEO</strong> - This is the <video> tag for video content.</li> </ul> <h3>Conclusion</h3> <p>Now you have an overview of basic HTML structure and some examples to start playing around in the Codemoji playground!</p> </section> </article> </main> <footer> <p>Original source: <a href="https://www.codemoji.com/playground.php?id=263">https://www.codemoji.com/playground.php?id=263</a></p> </footer> </body> </html>