HTML reference
PAGE structure
<!doctype html>
<html>
<head>
<title>Put title here</title>
<meta name="author" content="YourName">
<meta charset="UTF-8">
<--
Description of what this page is meant to do
Created: 10. Feb 2015
Modified: 16. Feb 2015 - added ...
-->
<style>
/* put CSS code in here */
</style>
<script>
/* put Javascript code in here */
</script>
</head>
<body>
<!-- put HTML code in here -->
<h1>Heading</h1>
<p>First paragraph</p>
</body>
</html>
BLOCK elements & text containers
<div class="cssClass">text division</div> — CSS styled text container
<h1>Largest heading</h1> — Largest heading
<h2>Heading 2</h2> — Second largest heading
<h3>Heading 3</h3> — Third largest heading
<h4>Heading 4</h4> — Fourth largest heading
<p>This is a paragraph.</p> — paragraph text
<ul><li>unordered list item</li></ul> — • bulleted item
<ol><li>ordered list item</li></ol> — 1. numbered item
<table> <!-- DO NOT use tables for layout -->
<caption>Table caption</caption>
<tr> <!-- new row -->
<th>Table heading 1</th>
<th>Table heading 2</th>
</tr>
<tr> <!-- new row -->
<td>Table data 1</td>
<td>Table data 2</td>
</tr>
</table>
INLINE elements & text formatting
<span class="cssClass">group formatted text</span> — text labeled with a general CSS class
<span id="cssId">uniquely formatted text</span> — text labeled with an individual CSS id
<a href="anotherpage.html">click here</a> — linked text
<img src="img/smiley.png"> — embed an image: 
<strong>strong text</strong> — strong text
<em>emphasized text</em> — emphasized text
— — long dash (—)
d — displays the character of Unicode #100 (d)
▬ — displays the character of Unicode #9644 (▬)
<br /> — line break
<hr /> — horizontal rule
FORM elements & inputs
<input type="text" id="inputText" name="inputText size="5">
—
<input type="number" id="inputNumber" name="inputNumber" min="0" max="100">
—
<input type="range" id="inputRange" name="inputRange" min="0" max="100">
—
<button type="button" id="helloButton" name="helloButton">Click me!</button>
—
<output id="outputBlock" name="outputBlock">
— Creates an html element into which you can put result code
autofocus="true"
— Makes sure the cursor starts in the form element that contains autofocus=...
CSS reference
CSS selectors
h1 {} — select by HTML tag
.cssClass {} — select by HTML class="cssClass" attribute
#cssId {} — select by HTML id="cssId" attribute
h1:hover {} — select by HTML tag when user hovers over something
Text formatting
font-family: "Gill Sans"; — which typeface to use
font-style: italic; — or normal
font-weight: bold; — or normal
font-size: 1em; — or 15pt or 15px
color: red; — or #FFFFFF or rgb(0,0,255)
background-color: white; — or #000000 or rgb(255,255,255)
Javascript reference
Functions
function mathyAdder(variable1, variable2, ...) {;
function code in here...
it can refer and use information passed on by the variables.
return variable1 + variable2;
}
Events
onclick="someFunction();" — triggers a JS function when an HTML element is clicked
ondblclick="someFunction();" — triggers a function when an HTML element is double clicked
onmouseover="someFunction();" — triggers a function when the cursor goes over an HTML element
onload="someFunction();" — triggers a function if the element loads successfully
onerror="someFunction();" — triggers a function if the element fails to load
onkeypress="someFunction(event);" — triggers a function if a key is pressed inside the element
var characterPressed = event.which || event.keyCode — returns the Unicode of key pressed;
DOM — Document Object Model
document.getElementById("someID") - gets a reference to the HTML element with id="someID"
elementReference.innerHTML - refers to the code inside an html element
elementReference.value - refers to the value inside an html form element
Data types
Boolean data types
var amirite =true;
var amITheFairestOfThemAll =false;
Number data types
var answerToLifeTheUniverseAndEverything =42;
var americanDollarstoCanadianRate =1.10;
String data types
var lastName ="Dumbledore";
var firstLine ="It was the best of times, it was the worst of times.";
Array data types
var languages =["C++", "perl", "python", "js"];
var cardNumbers =["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K" ];
var cardPoints =[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 10, 10];
Object data types
var heroesOfProgramming ={
firstName: "Ada",
lastName: "Lovelace",
accomplishment: "first computer programmer",
born: 1815,
died: 1852};
Methods and operators
Boolean
var amirite =true;
var amITheFairestOfThemAll =false;
Number methods
var piNum =3.141592654; — equals 3.14
piNum.toFixed(2);
piNum.toPrecision(5);
piNum.toString();
piNum.parseInt(); — equals 3
42 + 1; — equals 43
42 - 1;
42 * 2;
42 / 2;
42 % 10;
42++;
42--;
Math methods
Math.random(); — returns a random number between 0 and 1
Math.min(-8, 50 ,0 , 42, -7); — equals -8 (lowest number of arguments)
Math.max(-8, 50 ,0 , 42, -7); — equals 50 (largest number of arguments)
Math.round(3.14); — equals 3 (rounds normally)
Math.pow(2,8); — equals 2^8 or 2 to the power of 8
String methods
var alphabet ="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; — equals 26
alphabet.length();
alphabet.charAt(4);
alphabet.indexOf("D");
concat("foo", "bar");
var dramaticLine ="Luke, I am your father.";
dramaticLine.replace("father", "server this evening");
dramaticLine.search("your father");
dramaticLine.substr(1, 5);
dramaticLine.split("");
dramaticLine.toLowerCase();
dramaticLine.toUpperCase();
\' =single quote, \" =double quote, \\ =backslash, \n =newline, \r =carriage return, \t =tab, \b =backspace, \f =formfeed
Array methods
var languages =["C++", "perl", "python", "php"];
languages.length(); — equals 4
languages.[languages.length] ="javascript"; — adds "javascript" to array
languages.toString(); — equals "C++,perl,python,php"
languages.join("$"); — equals "C++$perl$python$php"
languages.sort(); — equals ["C++", "perl", "php", "python"]
languages.reverse(); — equals ["php", "python", "perl", "C++"]
Objects
var heroesOfProgramming ={
firstName: "Ada",
lastName: "Lovelace",
accomplishment: "first computer programmer",
born: 1815,
died: 1852};