 |
Home | HTML | JavaScript | DOM | Data Types |
HTML Hacks
- Below is a wireframe for an HTML element you will create. A wireframe is a rough visual representation of HTML elements on a page and isn’t necessarily to scale or have the exact styling that the final HTML will have. Using the syntax above, try to create an HTML snippet that corresponds to the below wireframe.
- The “a tags” can contain any links that you want
%%html
<!-- First Div -->
<div>
<strong style="background-color: black; color: #00FF00;">Batman HTML Hacks By: Ronit Thomas, Aswhin Visvananth, Vance Reynolds, Jared Baza</strong><br>
</div><br>
<!-- Third Div -->
<div>
<body>
<head>
<title>Superhero Text Entry</title>
</head>
<p style="background-color: black; color: #00FF00;">Add your Superhero Information below:</p>
<form style="background-color: black; color: #00FF00;">
Enter your Name:<br> <input type="text" name="name">
<br>
Enter your Alias<br> <input type="text" name="alias">
<br>
Enter your Power:<br> <input type="text" name="power">
</form>
</body>
<!-- Third Div -->
<div><br>
<a href="https://www.youtube.com/" style="color: 00FF00; background-color: #0e2dde74;">Batman Youtube Video</a><br>
<a style="background-color: black; color: #00FF00;" href="https://www.youtube.com/shorts/4W1ztRlJ7D0">
<button onllick button style="background-color: #333333; color:#00FF00; border-radius: 10px">Batman Edit</button>
</a><br>
<button id="myButton" style="background-color: #333333; color:#00FF00; border-radius: 10px">Click For Luck</button><br>
<strong style="background-color: black; color: #00FF00;">The End</strong><br>
<script>
function buttonClick() {
alert('Luck Applied!');
}
var buttonElement = document.getElementById('myButton');
buttonElement.addEventListener('click', buttonClick);
</script>
</div>
Batman HTML Hacks By: Ronit Thomas, Aswhin Visvananth, Vance Reynolds, Jared Baza