==========================================
WELCOME TO MY HTML NOTES/////////////////
||||||||||||||||||||||||||||||||||||||||
          |||||||||||||||||
              |||||||
              
    .
    
    
    
    QUICK TAGS'---------
    -------------------
    3<sup>rd</sup>   -- SUPERSCRIPT^
    .
    <sub>asdfasdf</sub> -- subscript
    .
    <input type=color>PICK A COLOR DAMMIT!
    \
    <label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#e66465">
                                                      
                                                (Value is default)
    .
    
    TITLE TOOLTIP
    <span title=”See, this is the tooltip. :)”>Move your mouse over me!</span>
    .
    
    CONTENT EDITABLE
    <div contenteditable="true">
  User can edit this div!
</div>

    .
    REFRESH EVERY 3 SEC
    
    <meta http-equiv="refresh" content="3">
    
    REDIRECT
    
    <meta http-equiv="refresh" content="3; url=https://google.com/">
    .
    
    .
    
    .
    
    .
    
    .
    
    .
    
    .
    
    .
    
    .
    
    .
    
    
    
    
Symbol	Name	  Number
<	      lt	    60
>	      gt  	  62
&	      amp	    38
©	      copy	  169
»	      raquo	  187
«       laquo	  171
½	      frac12	189

&dagger; or &#8224;

    
    
    
    .
    [[comments]]
    
    <!-- Maybe this would be better as a list but we won't
learn how to do those until section 9 -->

/* alskdfalsjf
*/


    
    
    
    .
    
    [email link]
    <a href="mailto:ryan@nowhere.net">Email me</a>
    
    <a href="mailto:ryan@nowhere.net?subject=An important message&body=Not really that important">Email me</a>
Email with the subject and body predefined
    
    .
    
    [link titles] (hover tooltip style)
    
    <a href="http://todolistme.net" title="Keep yourself organised">todolistme.net</a>
    .
    
    .
    
    .
    
    
    
___________________________________________________________
///////////////////////////////////////////////////////////
                /////////////////////
    *********************************************
    [[[[[THE <template> TAG (Hidden on load]]]]]
    *********************************************
_________________________________________________________    
==> Use <template> to hold some content that will be 
hidden when the page loads. Use JavaScript to display it:
_________________________________________________________



<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  let temp = document.getElementsByTagName("template")[0];
  let clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>


'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

/
/
/
/
/
/
/











___________________________________________________________
///////////////////////////////////////////////////////////
                /////////////////////
    *********************************************
    [[[[[[[[[[[[[[[[[[LIST TYPES]]]]]]]]]]]]]]]]]
    *********************************************



Changing the List Type
If we were limited to just decimal numbers and round bullets 
that would be kinda boring. Fortunately we can change things
up a little. We do this using the attribute type.

<ol type="a" >

Here are the possible values for Ordered lists ( ol ):

Type	Effect
a	    Alphanumeric - a. b. c.
A	    Uppercase Alphanumeric - A. B. C.
i	    Roman numerals - i. ii. iii.
I	    Uppercase Roman Numerals - I. II. III.



Here are the possible values for Unordered lists ( ul ):

Type	  Effect
square	
         Square Bullets
disk	
        Disc Bullets
circle	
        Circle Bullets

\\\\\\\\\\\
It's also possible to change the starting number 
for our ordered lists. This can be useful if your 
lists are broken up into separate sections. 
To achieve this we use the start attribute.

<ol start="4" >
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
Maybe we wish to count down rather than up. We can achieve this with the reversed attribute. This is an attribute which doesn't have a value to go with it.

<ol reversed >
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\



It's possible to alter the numbering mid list if required. You do this by adding the value attribute to the required list item.

<li value="9" > </li>

-=-=-=-=-=-=-=-=-=-=-=

<body>
  <p>How to count to 100 quickly:</p>
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Miss a few</li>
      <li value="99" >Ninety Nine</li>
      <li>One Hundred</li>
    </ol>
</body>






'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

/
/
/
/
/
/
/






___________________________________________________________
///////////////////////////////////////////////////////////
                /////////////////////
    *********************************************
    [[[[[[[[[[[[[[[[[[TABLES]]]]]]]]]]]]]]]]]]]]
    *********************************************




<table>
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>



so.....



<table>
  <tr>
    <th>Movie</th>
    <th>Year</th>
    <th>Quote</th>
  </tr>
  <tr>
    <td>Monty Python and the Holy Grail</td>
    <td>1975</td>
    <td>Well, she turned me into a newt!</td>
  </tr>
  <tr>
    <td>Monty Python's Life of Brian</td>
    <td>1979</td>
    <td>He's not the Messiah, he's a very naughty boy!</td>
  </tr>
  <tr>
    <td>Monty Python's The Meaning of Life</td>
    <td>1983</td>
    <td>And get the machine that goes 'ping'!</td>
  </tr>
</table>


https://ryanstutorials.net/html-tutorial/html-tables.php

also <thead> <tbody> <tfoot>  !!!!!!!!!!!!!!!!!!!!!!!!!!!

<table>
<thead>
<tr>
<th>Planet</th>
<th>Diameter</th>
<th>Known Moons</th>
</tr>
</thead>
<tbody>
<tr>
<td>Earth</td>
<td>12,756Km</td>
<td>1</td>
</tr>
<tr>
<td>Mars</td>
<td>6,794Km</td>
<td>2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Average</td>
<td>9775Km</td>
<td>1.5</td>
</tr>
</tfoot>
</table>
</body>











'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

/
/
/
/
/
/
/



[[[[[[[[[STICKY HEADER]]]]]]]]]]]]

<head>
<style>

@import "compass/css3";

@import "compass/css3";
@import "compass/reset";
*{
	@include box-sizing(border-box);
}

body{
	background-color: #ecf0f1;
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	padding-top: 330px;
	@include transition(padding-top .5s ease);
}
header{
	width: 100%;
	height: 300px;
	background-color: #3498db;
	text-align: center;
	position: relative;
	position: fixed;
	top: 0;
	overflow: hidden;
	@include transition(all .5s ease);
	h1{
		font-size: 42px;
		color: #fff;
		line-height: 230px;
		text-transform: uppercase;
		font-weight: 100;
		@include transition(all .3s ease);
	}
	nav{
		position: absolute;
		bottom: 0;
		height: 60px;
		line-height: 60px;
		width: 100%;
		background-color: rgba(0,0,0,.1);
		a{
			color: #fff;
			display: inline-block;
			padding: 10px 15px;
			line-height: 1;
			text-decoration: none;
       @include border-radius(2px);
        &:hover{
          @include box-shadow(0 0 0 1px #fff);
        }
		}
	}
}
	
</style>

<body>
<header>
    <h1>Sticky Header Pow!</h1>
    <nav>
      <a href="">Home</a>
      <a href="">About</a>
      <a href="">Gallery</a>
      <a href="">Contact</a>
    </nav>
  </header>




https://codepen.io/sarahwfox/pen/pNrYGb
sparkle trail dust cursor javascript



https://tholman.com/cursor-effects/
90's Cursor Effects



https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf
stanford html cheatsheat





https://ascii.cl/htmlcodes.htm
ASCII CODES TABLE^^


http://www.htmlfreecodes.com/





















 <li><a href="zzz" target=_blank>back</a></li><br>