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.


HTML Elements Guide

1. The HTML Tag

This is the tag. Before you can get going, you need a green light. All HTML documents start and stop with the so drop one in to begin, and to end your document.

2. The Head Tag

This is the tag. You'll find the brains of the operation, at the start, in the panda's head - not seen on the page. You might want to add a title within the head.

3. The Title Tag

This is the tag. Turtles love <strong>titles</strong>. They like to put order to things and give them a name.</p> <h3>4. The Body Tag</h3> <p>This is the <body> tag. Lots of things get layered to make a perfect <strong>body</strong>. Within the buns of a perfect burger, all of the content will be layered in the <strong>body</strong>.</p> <h3>5. The Paragraph Tag</h3> <p>This is the <p> tag. Need a new <strong>paragraph</strong>? Newspapers are filled with them. Drop a newspaper in to get a new paragraph.</p> <h3>6. The Div Tag</h3> <p>This is the <div> tag. Just like buses that have to come to a complete stop before starting up again, a <div> is a division in the content, separating things in the <strong>body</strong>.</p> <h3>7. The H1 Tag</h3> <p>This is the <h1> tag. Just like swirls on a soft serve ice cream cone, <strong>H1</strong> to <strong>H6</strong> tags are here. The most important ones are the <strong>H1</strong>, and the least important ones <strong>H6</strong>.</p> <h3>8. The Break Tag</h3> <p>This is the <br> tag. It creates a <strong>break</strong> between lines of text.</p> <h3>9. The Strong Tag</h3> <p>This is the <strong> tag. Sometimes you need to emphasize something and say it <strong>strongly</strong>.</p> <h3>10. The Image Tag</h3> <p>This is the <img> tag. If you need to add an <strong>image</strong> to your page, just use an <img> and select the picture you'd like.</p> <h3>11. The Map Tag</h3> <p>This is the <map> tag. Add a <strong>map</strong> to your document by selecting a country.</p> <h3>12. The Unordered List Tag</h3> <p>This is the <ul> tag. Unordered lists don't have any order, just drop in the checkmark.</p> <h3>13. The List Item Tag</h3> <p>This is the <li> tag. <strong>Lists</strong> are a great way to add some order to things.</p> <h3>14. The Bold Tag</h3> <p>This is the <b> tag. Go <strong>boldly</strong> where no one has gone before!</p> <h3>15. The Italics Tag</h3> <p>This is the <i> tag. Use italics for special text like book titles.</p> <h3>16. The Span Tag</h3> <p>This is the <span> tag. Just like a scroll, <strong>span</strong> is a section in the document.</p> <h3>17. The Anchor Tag</h3> <p>This is the <a> tag. <strong>Links</strong> connect the internet and allow you to connect to various sources.</p> <h3>18. The Blockquote Tag</h3> <p>This is the <blockquote> tag. Good books are filled with <strong>quotes</strong>.</p> <h3>19. The Table Tag</h3> <p>This is the <table> tag. Structure makes things easier to understand. Add a <strong>table</strong> when you need rows and columns.</p> <h3>20. The Audio Tag</h3> <p>This is the <audio> tag. Life is always better with some music.</p> <h3>21. The Video Tag</h3> <p>This is the <video> tag. Who can resist popcorn when watching a video?</p> </section> </article> </main> <footer> <p>Original source: <a href="https://www.codemoji.com/playground.php?id=281">https://www.codemoji.com/playground.php?id=281</a></p> </footer> </body> </html>