HTML Codes to copy and paste

Just select a block of code, then copy and paste it in de Sandbox from the url here below:
Open the link in a new tab page to switch easy between the tab pages of the Snandbox and HTML codes

Go to the Sandbox to play with Codes
    

    

    

    <!-- Headlines -->
    <h1>Topic 1</h1><br>
    <h3>Sub topic 1 </h3><br>
    <h6>Sub topic 2 </h6><br>
    

    

    

    <!-- Paragraph -->
    <p>The diversity of aquatic plants in nature is Beautiful</p>		
    

    

    


    <!-- Div -->
    <div>Aquatic plants can grow quickly<div>
    

    
 
    

 <!-- Span -->
<p><span style="font-weight: bold;">The  diversity  of  aquatic  plants is  great.<span></p>
 

    

    

    <!-- Bullet List -->
    <ul> 
        <li>aquatic plant 1</li>
        <li>aquatic plant 2</li>
        <li>aquatic plant 3</li> 
    </ul>
    

    

    

    <!-- Numbered List -->
    <ol>
        <li>Aquatic plant 1</li>
        <li>Aquatic plant 2</li>
        <li>Aquatic plant 3</li> 
    </ol>
    

    

    

    <!-- Display a line -->
    <br><br>
    <hr>
    

    

    

    <!-- Display a red-colored line -->
    <hr color="red" width="800" size="10">
    

    

    

    <!-- Notes -->
    Chapter about aquatic plants
    

    

    

    <!-- Create a table -->
    <table border="1" width="20%" height="10%"> 
        <tr><td>Roses</td><td>Tulips</td></tr> 
        <tr><td>Small</td><td>Small</td></tr>
        <tr><td>Large</td><td>Large</td></tr> 
    </table>
    

    

    

    <!-- Link to another webpage -->
    <a href="aquaticplants.html">Go to aquatic plants page</a>
    

    

    

    <!-- Display an image -->
    <img src="aquaticplant1.jpg" alt="aquatic plant 1" height="175" width="175">
    or:
    <figure>
        <img src="aquaticplant1.jpg" height="175" width="175">
        <figcaption>Image aquatic plant 1</figcaption>
    </figure>
    

    

    

    <!-- Highlight text -->
    <mark>Small aquatic plants</mark>
    

    

    

    <!-- Marquee Text -->
    <marquee behavior="scroll" direction="left">
        <p><h1>Beautiful aquatic plants</h1></p>
    </marquee>
    

    

    <!-- Images in marquee -->
    <marquee behavior="scroll" direction="left">
        <img src="aquaticplant1.jpg" alt="aquatic plant 1" height="125" width="340">
        <img src="aquaticplant2.jpg" alt="aquatic plant 2" height="125" width="340">
        <img src="aquaticplant3.jpg" alt="aquatic plant 3" height="125" width="340">
    </marquee>
    

    

    

    <!-- Display a video -->
    <figure>
        <figcaption>Video about small aquatic plants</figcaption>
        <iframe width="420" height="315" src="aquaticplants.mp4" allowfullscreen></iframe>
    </figure>
    

    

    

        
    <!-- Link to other external webpages -->
    <a href="https://facebook.com" target="_blank">Link to Facebook</a><br>
    <a href="https://instagram.com" target="_blank">Link to Instagram</a><br>
    <a href="https://snapchat.com" target="_blank">Link to SnapChat</a><br>
    <a href="https://youtube.com" target="_blank">Link to YouTube</a>
     
           








Home