📻 show / hide whimpy player

space invaders frogger fun html5 games donkey kong lemmings

show / hide tilderadio 📻

📄 show / hide js notes

transparent textures CSS3 Patterns Gallery patternify

html-tuts websemantics calc result simple html guide

× my simple html cheetsheet tabs

 
Heading    <h1></h1>  <h2></h2> <h3></h3>   

paragraph    <p></p>  

Line Break    <br>   

 non-breaking space    &nbsp;&nbsp;

Unordered, bullet-point list     <ul> <li>  </li> </ul>

 Horizontal Line   <hr> 

underlined text      <u></u>   

preformatted text    <pre> </pre>

Basic  Structure    <!DOCTYPE html>
<html>
    <head>
<title></title>
    </head>
    <body>
        
    </body>
</html>

catworms Unofficial Neocities Tutorial Site

    
 Basic Link    <a href=""></a> 

 opens in new tab    <a href="" target="_blank"></a> 

open in inline frame        <a href="" target="framename"></a> 

email      <a href="mailto:you@mail.net"></a>

image link + new tab
<a href="" target="_blank"><img src=""></a>
  
image       <img src="">

  image + alt & size        <img src="" alt="" width="" height="" />

    audio
   <audio controls>
<source src="sound.ogg" type="audio/ogg"> 
<source src="sound.mp3" type="audio/mpeg">
No audio support. </audio> 

autoplay & loop
<audio autoplay loop
  <source src=".mp3" type="audio/mpeg">
</audio>

video
<video width="200" height="150" controls>
	<source src="vid.mp4" type="video/mp4">
	<source src="vid.ogg" type="video/ogg">
	No video support.   </video>

    
   <div>  </div>
    
<div style="background-color:#;color:black;width: 100%;padding:0%;">    </div> 

  <div style="background-image: url(/);
background-repeat: repeat ;color:green;width: 100%;padding:0;"></div>

 Tables     <table>   </table>
  

Simple Table
<table>
  <tr>
    <td> </td>
    <td>  </td>
  </tr>
  <tr>
    <td>  </td>
    <td>  </td>
  </tr>
</table>

2 col table with header
<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

inline frames

<iframe src=""></iframe>

<iframe src="" name="frame1" scrolling="yes" frameborder="no"
align="center" height="" width=""></iframe>

    
for use in head of html  page      <style type="text/css">   </style>

links 
   a:link,a:visited {
   color: lime;
   background-color:black;
   text-decoration: none;   
  }
  a:hover {
   color: red;
   background-color: green;
   text-decoration: underline;   
  }

background image repeat
body {
background-image: url();
background-repeat: repeat ;
}

background image no-repeat
body {
  background-image: url("");
  background-repeat: no-repeat;
}


background color
body {
background-color:  ;  
}

background graidents
Top to Bottom
body {  
  background-color: yellow; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow); 
}

Left to Right
body { 
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow); 
}

repeating linear gradients
body {  
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 
}

body {  
  background-color: green; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); 
}

radial gradients
body {  
  background-color: yellow; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green); 
}

body {  
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(circle, red, yellow, green); 
}

    
head tags
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="/styles.css">
<script src="/script.js"></script>
<link rel="shortcut icon" href="" />

<!-- HTML Comment -->

Arrow symbols
left  &larr;   right  &rarr;
up  &uarr;   down   &darr;

basic google search
<!-- Search Google -->
<form method="get" action="https://www.google.com/search">
<input type="hidden" name="ie" value="UTF-8" />
 <input type="hidden" name="oe" value="UTF-8" />
<table bgcolor="#FFFFFF">
<tr>
<td>
<a href="https://www.google.com/">
<img src="https://www.google.com/logos/Logo_40wht.gif" border="0"
alt="Google" align="absmiddle" /></a> <input type="text" name="q" size="25"
maxlength="255" value="" /> <input type="submit"
name="btnG" value="Google Search" />
</td>
</tr>
</table>
</form>
<!-- Search Google -->

Google pacman code

Interactive cheet sheet Peeks, Pokes and Pointers hackr.io cheet sheet