Background Color code:
<div style="background-color:GreenYellow;width:200px;border:1px solid black;padding:15px;"><p>HTML background code is actually CSS!</p>
</div>
To See Output Copy The Whole Code And Past HERE
Backgrounds for the Whole Page:
<!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body style="background-color:yellowgreen;color:white;">
...content goes here...
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- CSS -->
<style>
textarea {
width: 180px;
height: 90px;
padding: 2%;
font: 1.4em/1.6em cursive;
background-color: greenyellow;
border: 1px solid yellowgreen;
}
::-webkit-scrollbar {
width: 18px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
}
::-webkit-scrollbar-track {
background: background: yellowgreen;
border-left: 1px solid yellowgreen;
}
::-webkit-resizer {
background: yellowgreen;
}
</style>
</head>
<body>
<!-- HTML -->
<textarea name="comments" id="comments">
Hey... say something long enough for this comment box to grow scrollbars!
</textarea>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<!-- CSS -->
<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 200%;
}
/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #88ba1c;
}
</style>
</head>
<body>
<!-- HTML -->
<div class="myBox">
Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.
</div>
</body>
</html>
<h3 style="cursor:help">Hover over me... "Help"</h3>
<h3 style="cursor:pointer">Hover over me... "Pointer"</h3>
<h3 style="cursor:wait">Hover over me... "Wait"</h3>
<h3 style="cursor:crosshair">Hover over me... "Crosshair"</h3>
<h3 style="cursor:move">Hover over me... "Move"</h3>
<marquee style="z-index:2;position:absolute;left:81;top:3;font-family:Cursive;font-size:22pt;color:ffcc00;height:429;"scrollamount="3" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:183;top:52;font-family:Cursive;font-size:22pt;color:ffcc00;height:75;"scrollamount="5" direction="down">Text... or snow?!</marquee><marquee style="z-index:2;position:absolute;left:61;top:21;font-family:Cursive;font-size:22pt;color:ffcc00;height:320;"scrollamount="5" direction="down">Text... or snow?!</marquee>
To See Output Copy The Whole Code And Past HERE
Slide Show Code:
<---- just provide a image link image.jpg is an example only----.>
<div align=center>
<table width=400 border=0 align=center>
<tr>
<td>
<marquee width=400>
<img src=image.jpg/>
<img src=image.jpg />
<img src=image.jpg/>
</marquee>
</td>
</tr>
</table>
</div>
To See Output Copy The Whole Code And Past HERE
HTML Music Codes:
<audio src="http://www.hindimp3online.com/Sunn%20Raha%20Hai%20(Female).mp3" controls>
<p>Fallback content goes here.</p>
</audio>
To See Output Copy The Whole Code And Past HERE
HTML Video Codes:
<video src="video link place here" controls>
<p>If you are reading this, it is because your browser does not support the 'video' element. Try using the 'object' element listed further down the page.</p>
</video>
To See Output Copy The Whole Code And Past HERE
Form with No Styles:
<form method="get" enctype="application/x-www-form-urlencoded" action="">
<p>
<label>Name
<input type="text" name="customer_name" required>
</label>
</p>
<p>
<label>Phone
<input type="tel" name="phone_number">
</label>
</p>
<p>
<label>Email
<input type="email" name="email_address">
</label>
</p>
<fieldset>
<legend>Which taxi do you require?</legend>
<p><label> <input type="radio" name="taxi" required value="car"> Car </label></p>
<p><label> <input type="radio" name="taxi" required value="van"> Van </label></p>
<p><label> <input type="radio" name="taxi" required value="tuktuk"> Tuk Tuk </label></p>
</fieldset>
<fieldset>
<legend>Extras</legend>
<p><label> <input type="checkbox" name="extras" value="baby"> Baby Seat </label></p>
<p><label> <input type="checkbox" name="extras" value="wheelchair"> Wheelchair Access </label></p>
<p><label> <input type="checkbox" name="extras" value="tip"> Stock Tip </label></p>
</fieldset>
<p>
<label>Pickup Date/Time
<input type="datetime-local" name="pickup_time" required>
</label>
</p>
<p>
<label>Pickup Place
<select id="pickup_place" name="pickup_place">
<option value="" selected="selected">Select One</option>
<option value="office" >Taxi Office</option>
<option value="town_hall" >Town Hall</option>
<option value="telepathy" >We'll Guess!</option>
</select>
</label>
</p>
<p>
<label>Dropoff Place
<input type="text" name="dropoff_place" required list="destinations">
</label>
<datalist id="destinations">
<option value="Airport">
<option value="Beach">
<option value="Fred Flinstone's House">
</datalist>
</p>
<p>
<label>Special Instructions
<textarea name="comments" maxlength="500"></textarea>
</label>
</p>
<p><button>Submit Booking</button></p>
</form>
To See Output Copy The Whole Code And Past HERE
HTML Frames Code:
<div style="overflow:auto;width:50px;height:120px;background:#ccc;float:left;left:0;top:0;padding:3px;">
<p>Left Frame.</p>
</div>
<div style="overflow:auto;width:150px;height:120px;background:#eee;float:left;left:200px;top:0;padding:3px;">
<p>Right Frame.</p>
<p>This div has more content than it can hold. Therefore, scrollbars appear to allow the user to scroll. To create a frames based website, simply create a div for each frame, and specify 'scroll', 'auto', or 'hidden' to determine whether the user can scroll or not.</p>
</div>
To See Output Copy The Whole Code And Past HERE
HTML Special Characters:
<!DOCTYPE html>
<title>Character Set Example</title>
<style>
td:last-child { font-size: 3em; }
tr:first-child td:last-child { font-size: 1em; }
th { text-align: left; font-weight: normal; }
</style>
<table>
<tr>
<th>Unicode Character Name:
<td>CHECK MARK
<tr>
<th>Hexadecimal:
<td>✓
<tr>
<th>Decimal:
<td>✓
<tr>
<th>HTML5 Named Entity:
<td>✓
<tr>
<th>HTML5 Named Entity:
<td>✓
</table>
To See Output Copy The Whole Code And Past HERE
Triggering a Script:
<!DOCTYPE html>
<title>My Example</title>
<input type="button" value="Click me..." onclick="alert('Thanks, I feel better now!');">
To See Output Copy The Whole Code And Past HERE
HTML Absolute Size:
<p style="font-size:xx-small;">Absolute size - xx-small</p>
<p style="font-size:x-small;">Absolute size - x-small</p>
<p style="font-size:small;">Absolute size - small</p>
<p style="font-size:medium;">Absolute size - medium</p>
<p style="font-size:large;">Absolute size - large</p>
<p style="font-size:x-large;">Absolute size - x-large</p>
<p style="font-size:xx-large;">Absolute size - xx-large</p>
To See Output Copy The Whole Code And Past HERE
HTML Link TO New Window:
<a href="http://www.loremipsudoler.com" target="_blank">Quackit homepage</a>
To See Output Copy The Whole Code And Past HERE
HTML Link TO Email Link:
<a href="mailto:homer@example.com?Subject=Yello">Send an email to Homer now!</a>
<form action="" method="post">
<textarea name="comments" id="comments" style="width:91%;height:150px;padding:2%;font-size:1.2em;border-top:1px dotted #000000;border-right:20px solid #9CE75A;border-bottom:4px solid #9CE75A;border-left:10px solid #6DB72C;">
Enter your comments here...
...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
To See Output Copy The Whole Code And Past HERE
Ridged Border:
<form action="" method="post">
<textarea name="comments" id="comments" style="width:92%;height:140px;padding:2%;font-size:1.2em;border:12px ridge #6DB72C;">
Enter your comments here...
...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
To See Output Copy The Whole Code And Past HERE
Outset Border:
<form action="" method="post">
<textarea name="comments" id="comments" style="width:92%;height:140px;padding:2%;font-size:1.2em;border:12px outset #6DB72C;">
Enter your comments here...
...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
To See Output Copy The Whole Code And Past HERE
Inset Border:
<form action="" method="post">
<textarea name="comments" id="comments" style="width:92%;height:140px;padding:2%;font-size:1.2em;border:12px inset #6DB72C;">
Enter your comments here...
...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<form action="mailto:name@example.com?subject=Website Feedback" method="post" enctype="text/plain">
Email Adress:<br />
<input type="text" name="email_address" value="" maxlength="100" /><br />
Comments:<br />
<textarea rows="5" cols="20" name="comments"></textarea><br />
<input type="submit" value="Submit" />
</form>
To See Output Copy The Whole Code And Past HERE
HTML Button with Image And Description:
<button type="button" onclick="JavaScript:alert('Once upon a time, there lived a princess and a frog. They both got married and lived happily ever after. The end.')">
<img src="place a image here" alt="Read book" />
<br />Read Book!</button>
<form action="" method="get">
<p><b>Preferred Color:</b></p>
<input type="radio" name="preferred_color" value="Red" /> Red<br />
<input type="radio" name="preferred_color" value="Blue" /> Blue<br />
<input type="radio" name="preferred_color" value="Green" /> Green<br />
<p><b>Preferred Item:</b></p>
<input type="radio" name="preferred_item" value="Car" /> Car (The latest Aston Martin!)<br />
<input type="radio" name="preferred_item" value="House" /> House (Waterfront Mansion)<br />
<input type="radio" name="preferred_item" value="Coffee Machine" /> Coffee Machine (umm...but it's a really good one...)<br />
<input type="submit" value="Submit">
</form>
<div style="overflow:auto;width:50px;height:120px;background:#ccc;float:left;left:0;top:0;padding:3px;">
<p>Left Frame.</p>
</div>
<div style="overflow:auto;width:150px;height:120px;background:#eee;float:left;left:200px;top:0;padding:3px;">
<p>Right Frame.</p>
<p>This div has more content than it can hold. Therefore, scrollbars appear to allow the user to scroll. To create a frames based website, simply create a div for each frame, and specify 'scroll', 'auto', or 'hidden' to determine whether the user can scroll or not.</p>
</div>
<div contenteditable>
Try editing this content... go on... select me with your cursor then write over the top of me!
</div>
To See Output Copy The Whole Code And Past HERE
No comments:
Post a Comment
Hey, It's Been Grabbed