Kenneth: /* HTML */

2025-06-14T18:58:30Z

HTML

← Older revision		Revision as of 18:58, 14 June 2025
Line 1:		Line 1:
			== Subpage Table of Contents ==

			{{Special:PrefixIndex/{{PAGENAME}}/}}

	== HTML ==		== HTML ==

Kenneth: /* HTML5 */

2025-03-03T21:04:41Z

HTML5

@@ Line 277: / Line 277: @@
 </select>
 </pre>
 == HTML5 ==

Kenneth: /* Page Break */

2020-12-15T16:38:50Z

Page Break

New page

== HTML ==

== Editors ==

[http://www.coffeecup.com/free-editor CoffeeCup Free HTML Editor - The Free HTML Editor is a Drag and Drop Editor with Built-In FTP]

[http://net2.com/nvu/ Nvu - Nvu Web Authoring Software]

[http://www.chami.com/html-kit/ HTML Kit - for more than editing HTML]
*[http://www.chami.com/html-kit/faq/pages/ftp_workspace.html How do I use the FTP Workspace to open, edit, preview and publish pages?]
*[http://greensweater.wordpress.com/2008/07/31/sftp-for-html-kit/ SFTP for HTML-Kit « A Clockwork Noodle] (a hack)

[http://en.wikipedia.org/wiki/Comparison_of_HTML_editors Comparison of HTML editors - Wikipedia, the free encyclopedia]
*Includes features and prices

== form causing line break ==

Solution:
<form style="display: inline;">...</form>

References:
* [http://stackoverflow.com/questions/535185/html-problem-form-causing-line-break-before-rails-button-to HTML Problem: form causing line break before (Rails button_to) - Stack Overflow]:
* [http://blogs.adobe.com/cantrell/archives/2003/05/git_rid_of_anno.html 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

<pre>
<META HTTP-EQUIV="Refresh" CONTENT="30; URL=http://www.example.net/some/place/">
</pre>

Note: the 'URL=' is important for IE to work correctly.

== break image caching ==

Append timestamp to images:

<pre>
<img src="picture.jpg?1222259157.415" alt="">
</pre>

<pre>
<img src="camera.jpg?<?php echo time(); ?>" />
</pre>

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 ==

<pre>
<img src="myimage.png" />
</pre>

Background image:
<pre>
<body background="bgimage.jpg">
</pre>

See also [[CSS#Background Image]]

== Hover Titles ==

Use the title attribute.
<pre>
<div title="text">hover me</div>
</pre>

or

<pre>
<span title="hoverin' words">hover me</span>
</pre>

[http://stackoverflow.com/questions/11022843/add-hover-text-without-javascript-like-we-hover-on-a-users-reputation]

== Redirect ==

<pre>
<meta http-equiv="REFRESH" content="0;url=http://www.the-domain-you-want-to-redirect-to.com">
</pre>

Note: the 'URL=' is important for IE to work correctly.

== Table ==

<pre>
<table border="1">
<tr><th>header 1</th><th>header 2</th></tr>
<tr><td>data 1</td><td>data 2</td></tr>
</table>
</pre>

Pretty version:
<pre>
<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>
</pre>

== Form ==

<pre>
<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>
</pre>

References:
* Forms in HTML documents - http://www.w3.org/TR/html4/interact/forms.html

== Upload File ==

<pre>
<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>
</pre>

== iframe ==

<pre>
<iframe src="camera.php" width="640" height="480" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</pre>

References:
* HTML iframe tag - http://www.w3schools.com/tags/tag_iframe.asp

---

Auto set iframe height: [http://www.sitepoint.com/forums/showthread.php?747398-IFRAME-Auto-Height]

<pre>
<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 )">
</pre>

== remove body margins ==

<pre>
<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
</pre>

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 ==

<pre>
<img src="test.png" alt="some title" title="some title" />
</pre>

== Audio ==

html - Play mp3 file with javascript onClick - Stack Overflowhttp://stackoverflow.com/questions/10766538/play-mp3-file-with-javascript-onclick

<pre>
<audio id="id1" src="01.mp3"></audio>
<button onClick="document.getElementById("id1").play()">Play</button>
<button onClick="document.getElementById("id1").pause()">Stop</button>
</pre>

Need it to loop:
<pre>
<audio loop>
</pre>

Javascript:
<pre>
<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();
}
}
</pre>

== Page Break ==

<pre>
<br><br><p style="page-break-before: always;">
</pre>

== Option Select ==

<pre>
<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>
</pre>

== HTML5 ==

See [[HTML5]]

== keywords ==

[[Category:Programming]]
[[Category:Web Development ‎]]

HTML - Revision history

Kenneth: /* HTML */

Kenneth: /* HTML5 */

Kenneth: /* Page Break */