HTML

From Omnia
Jump to navigation Jump to search

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


Comparison of HTML editors - Wikipedia, the free encyclopedia

  • Includes features and prices

form causing line break

Solution:

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

References:

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:

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>

[1]

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:

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:

---

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:

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

keywords