HTML
HTML
Editors
CoffeeCup Free HTML Editor - The Free HTML Editor is a Drag and Drop Editor with Built-In FTP
Nvu - Nvu Web Authoring Software
HTML Kit - for more than editing HTML
- How do I use the FTP Workspace to open, edit, preview and publish pages?
- SFTP for HTML-Kit « A Clockwork Noodle (a hack)
Comparison of HTML editors - Wikipedia, the free encyclopedia
- Includes features and prices
form causing line break
Solution:
<form style="display: inline;">...</form>
References:
- HTML Problem: form causing line break before (Rails button_to) - Stack Overflow:
- Christian Cantrell: Git Rid Of Annoying Line Breaks From Form Tags
META-Refresh
Dan's Web Tips: Auto-Refreshing Pages - http://webtips.dan.info/refresh.html
<META HTTP-EQUIV="Refresh" CONTENT="30; URL=http://www.example.net/some/place/">
Note: the 'URL=' is important for IE to work correctly.
break image caching
Append timestamp to images:
<img src="picture.jpg?1222259157.415" alt="">
<img src="camera.jpg?<?php echo time(); ?>" />
References:
- html - How to force a web browser NOT to cache images - Stack Overflow - http://stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images
Images
<img src="myimage.png" />
Background image:
<body background="bgimage.jpg">
See also CSS#Background Image
Hover Titles
Use the title attribute.
<div title="text">hover me</div>
or
<span title="hoverin' words">hover me</span>
Redirect
<meta http-equiv="REFRESH" content="0;url=http://www.the-domain-you-want-to-redirect-to.com">
Note: the 'URL=' is important for IE to work correctly.
Table
<table border="1"> <tr><th>header 1</th><th>header 2</th></tr> <tr><td>data 1</td><td>data 2</td></tr> </table>
Pretty version:
<style>
/* pretty tables */
table, th, td {
border-collapse: collapse;
border: 1px solid #A0A0A0;
padding: 0.2em 0.4em;
}
th {
background-color: #F2F2F2;
text-align: center;
}
</style>
Form
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
References:
- Forms in HTML documents - http://www.w3.org/TR/html4/interact/forms.html
Upload File
<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>HTML File Upload</legend>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
<label for="fileselect">Files to upload:</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
</div>
<div id="submitbutton">
<button type="submit">Upload Files</button>
</div>
</fieldset>
</form>
iframe
<iframe src="camera.php" width="640" height="480" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
References:
- HTML iframe tag - http://www.w3schools.com/tags/tag_iframe.asp
---
Auto set iframe height: [2]
<script type='text/javascript'>
function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
var ifDoc, ifRef = document.getElementById( iframeId );
try
{
ifDoc = ifRef.contentWindow.document.documentElement;
}
catch( e )
{
try
{
ifDoc = ifRef.contentDocument.documentElement;
}
catch(ee)
{
}
}
if( ifDoc )
{
ifRef.height = 1;
ifRef.height = ifDoc.scrollHeight;
/* For width resize, enable below. */
// ifRef.width = 1;
// ifRef.width = ifDoc.scrollWidth;
}
}
</script>
<iframe id = "myIframe" onload = "setIframeHeight( this.id )">
remove body margins
<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
References:
- How to remove and set margins for HTML documents and elements. - http://www.designplace.org/tutorials.php?page=1&c_id=3
image tooltip
<img src="test.png" alt="some title" title="some title" />
Audio
html - Play mp3 file with javascript onClick - Stack Overflowhttp://stackoverflow.com/questions/10766538/play-mp3-file-with-javascript-onclick
<audio id="id1" src="01.mp3"></audio>
<button onClick="document.getElementById("id1").play()">Play</button>
<button onClick="document.getElementById("id1").pause()">Stop</button>
Need it to loop:
<audio loop>
Javascript:
<input type="image" id="annoy" src="startbutton.png" onclick="annoy(); return false;" />
...
function getel(id) {
return document.getElementById(id)
}
var annoy_state = 0;
function annoy() {
btn = getel("annoy");
mp3 = getel("annoymp3");
if (annoy_state == 0) {
annoy_state = 1;
btn.src="stopbutton.png";
mp3.play();
} else {
annoy_state = 0;
btn.src="startbutton.png";
mp3.pause();
}
}
Page Break
<br><br><p style="page-break-before: always;">
Option Select
<label for="cars">Choose a car:</label> <select id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="vw">VW</option> <option value="audi" selected>Audi</option> </select>
HTML5
See HTML5