< Back
Run >
JavaScript
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Page Title</title> <meta name="This is a Meta" content="This is its content" /> <meta charset="UTF-8" /> <!--This is a Character Set--> <meta name="Viewport" content="width=device-width, initial-scale=1" /> <!--This is a Viewport--> <link rel="icon" href="icon.png" /> <!--This imports an icon, icons must be exacly square (have the same height and width)--> <link rel="stylesheet" href="styles.css" /> <!--This links to an external stylesheet--> <style> img { border-radius:25px ; box-shadow: 5px 5px 10px black ; } .navbar { overflow: hidden; background-color: #333; transition:0.5s ; background-color:transparent ; border: 1px solid black ; } .navbar:hover { background-color:yellowgreen ; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; transition:0.5s ; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } </style> <script> alert('Hello!'); let what = prompt('What do you want to say?'); alert('You said "' + what + '"!'); alert("You can check out document.getElementById in Example Features: second to last and last."); </script> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <br> <summary> Drodown <details>Link 1<br> Link 2<br> Link 3 </details> </summary> <!--I am a comment, I do not display in the output.--> <h1>I am a Heading</h1> <h6>We go all the way Down to Heading 6 Size</h6> <p>I am a paragraph.</p> <!--Line Breaks and Horizontal Rules--> <br> <hr> <br> <fieldset> <legend>I am a fielset and inside of me here, we have text types...</legend> <p><strong>I am bold.</strong></p> <p><em>I am italic.</em></p> </fieldset> <br> <img src="banner.png" alt="I am an Image" width="500px" /> <br> <a href="learnToCode.html">I am a Link</a><br> <a href="index.html" target="_blank.asp"> I am an Image within a link! <img src="icon.png" alt="I am an Image within a link!" width="100px" /> </a><br> <a href="#linkTo">I am a Relative Link</a> <figure> <img src="background.png" alt="I am a Figure" width="500px" /> <figcaption>I am a Figure</figcaption> </figure> <br><br><br><br><br> <fieldset id="linkTo"> <legend contenteditable="">I am a legend inside of a field set with a form inside me! And I am content editable!</legend> <label for="name"> Name: <input type="text" name="name" placeholder="E.G. John O. Doe" /> </label> <label for="age"> Age: <input type="number" name="age" placeholder="E.G. 40" /> </label> <label for="password"> Password: <input type="password" name="password" placeholder="E.G. Geronimo1230233#40" /> </label><br> <label for="email"> Email: <input type="email" name="email" placeholder="E.G. JohnOlegDoe118" /> </label> <label for="date"> Date: <input type="date" name="date" /> </label> <label for="time"> Time: <input type="time" name="time" /> </label> <label for="radio"> Radio: <input type="radio" name="radio" /> </label> <label for="radio"> Radio: <input type="radio" name="radio" /> </label> <label for="checkbox"> Checkbox: <input type="checkbox" name="checkbox" /> </label> <label for="range"> Range: <input type="range" name="range" /> </label> <label for="color"> Color: <input type="color" name="color" value="#00FF00" /> </label> <button>Submit</button> <ol> <li>I</li> <li>am</li> <li>an</li> <li>ordered</li> <li>list</li> </ol> <ul> <li>I</li> <li>am</li> <li>an</li> <li>un-ordered</li> <li>list</li> </ul> </fieldset> </body> </html>