Cheet sheet for anyone to use-update as you'd like! HTML Basic Tags
Creates an HTML document Sets off the title and other information that isn’t displayed on the web page itself Sets off the visible portion of the document Body Attributes Sets the background color, using name or hex value Sets the text color, using name or hex value Sets the color of links, using name or hex value Sets the color of followed links, using name or hex value Sets the color of links on click Disallows text selection with the mouse and keyboard Text Tags Creates preformatted text Creates the largest headline Creates the smallest headline Creates bold text Creates italic text Creates teletype, or typewriter-style text Creates a citation, usually italic Emphasizes a word (with italic or bold) Emphasizes a word (with italic or bold) Sets size of font, from 1 to 7 Sets font color, using name or hex value Links Creates a hyperlink Creates a mailto link Aligns a paragraph to the left (default), right, or center.
Inserts a line break
Inserts a horizontal rule
Sets size (height) of rule
Sets width of rule, in percentage or absolute value
Creates a rule without a shadow Tables
| Sets alignment for cell(s) (left, center, or right) | ||||
| Sets vertical alignment for cell(s) (top, middle, or bottom) | Sets number of columns a cell should span (default=1) | Sets number of rows a cell should span (default=1) | Prevents the lines within a cell from being broken to fit
Frames
Replaces the tag in a frames document; can also be nested in other framesets
Defines the rows within a frameset, using number in pixels, or percentage of width
Defines the columns within a frameset, using number in pixels, or percentage of width
Defines a single frame — or region — within a frameset
<noframes></noframes> Defines what will appear on browsers that don’t support frames
Frames Attributes
Specifies which HTML document should be displayed
Names the frame, or region, so it may be targeted by other frames
Defines the left and right margins for the frame; must be equal to or greater than 1
Defines the top and bottom margins for the frame; must be equal to or greater than 1
Sets whether the frame has a scrollbar; value may equal “yes,” “no,” or “auto.” The default, as in ordinary documents, is auto.
Prevents the user from resizing a frame
Forms
For functional forms, you’ll have to run a script. The HTML just creates the appearance of a form.
Creates all forms
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
Sets off each menu item
Creates a pulldown menu
Sets off each menu item
<textarea name="NAME" cols=40 rows=8></textarea name> Creates a text box area. Columns set the width; rows set the height.
Creates a checkbox. Text follows tag.
Creates a radio button. Text follows tag
Creates a one-line text area. Size sets length, in characters.
Creates a Submit button
Submit Creates an actual button that is clicked
Creates a Submit button using an image
Creates a Reset button
CSS
External File
Within HTML Header
<style type="text/css">
h1 {
color:red;
}
</style>
Inline in HTML File
Some red text SelectorsUniversal Selector* {} Type Selectorh1, h2 ,h3 {} Child Selectorul > li {} Descendant Selectorp a {} Class Selector.class {} ID Selector#id {} Adjacent Sibling Selectorh1 + p {} General Sibling Selectorh1 ~ p {} Attribute Selector[attribute="SomeValue"] {} Pseudo Selectors Mouse Over Selectora:hover {} Active Link Selectora:active {} Focus Selectorinput:focus {} Visited Links Selectora:visited {} Link Selector.class:link {} Checked elements selectorinput:checked {} Disabled elements selectorinput:disabled {} Enabled elements selectorinput:enabled {} Not a Specified Element Selector:not(p) {} First Line Selectorp::first-line {} First Letter Selectorp::first-letter {} First Child Selectorp:first-child {} Last Child Selectorp:last-child {} :nth-child Selectorp:nth-child() {} First Element of its Parent Selectorp:first-of-type {} Elements that have no Children Selector (including text nodes)p:empty {} Font Styling Font stylefont-style: normal | italic | oblique Font Variantfont-variant: normal | small-caps Font Weightfont-weight: normal | bold | bolder | lighter | 100 - 900 Vertical Alignmentvertical-align: baseline | 10px | sub | super | top | text-top | middle | bottom | text-bottom | initial Font Sizefont-size: 12px | 0.8em | 80% Text Transformtext-transform: capitalise | lowercase | uppercase Space Between Charactersletter-spacing: normal | 4px Line Heightline-height: normal | 3em | 34% Horizontal Alignmenttext-align: left | right | center | justify Text Decorationtext-decoration: none | underline | overline | line-through Indent First Linetext-indent: 25px Font Familyfont-family: 'Open Sans', sans-serif Position Positionposition: static | relative | absolute | fixed | sticky Left Positionleft: 10px | 10% | auto Top Positiontop: 10px | 10% | auto Float Elementfloat: left | right | none Clear Floating Elementsclear: none | left | right | both Z Indexz-index: 3 | auto | inherit Background Background Imagebackground-image: url() Background Repeatbackground-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat Background Attachmentbackground-attachment: scroll | fixed | local | initial | inherit Background Colorbackground-color: #2AA9E0 Background Positionbackground-position: top | right | bottom | left | center Box properties Marginmargin-top: 2pxmargin-right: 4px | automargin-bottom: 6pxmargin-left: 8px | automargin: 2px 4px 6px 8px | 0 auto Paddingpadding-top: 2pxpadding-right: 4px | autopadding-bottom: 6pxpadding-left: 8px | autopadding: 2px 4px 6px 8px | 0 auto Border Colorborder-color: #2AA9E0 Border Styleborder-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset Border Widthborder-width: 10px List Styling List Typelist-style-type: disc | circle | square | none List Positionlist-style-position: inside | outside List Imagelist-style-image: url(); Javascript Trivial expressions blah A plain word refers to a variable in the current environment. "blah" A quoted word is a string, a value containing piece of text. 12 A number value. -12 1.5 3.4e10 Other ways to write numbers (negative, fractional, with exponent). true Boolean (yes/no) value. true for yes, false for no. Operator expressions a + b Binary operator applied to two values. + to add, - to subtract, * to multiply, / to divide. (a + b) * c Parenthesis for explicit grouping. a < b Comparison operators ==, != (not equal), <, >, <= (less or equal), >=. a = b Assignment, set variable a to value b. Not to be confused with == comparison. a += b is a shorthand for a = a + b, also for -= etc. a && b Logical operators — && for AND, || for OR. -a Unary (one-operand) operator. - to negate, ! for boolean negation. Composite expressions a[b] Subscript, fetch the field named by b from value a. a.x Shorthand for a["x"]. a(b) Function call. Call the function value a with b as argument. Zero or more argument expressions can be given, separated by spaces. a(1, 2, 3, 4) a.x(b) Method call. Call the function found in field x of value a, and pass a as the thisargument. [1, 2, 3, 4] Array value with zero or more elements. {a: 1, b: 2} Object value with zero or more name: value field definitions. function(arg1, arg2) { /* ... body ... / } Function value. Zero or more argument names. Any statements may appear in body. Statements a; Any expression, followed by a semicolon, is a statement. {a; b; c;} A series of statements, wrapped in braces, form a composite statement. var a = b; Variable definition. The variable with name a is defined and given value b. Value is optional. var a; sets a to undefined. function foo(arg1, arg2) { / ... body ... / } Function definition. Defines variable foo to have a function value. Zero or more arguments, any statements may appear in body. if (a) { / ... / } else { / ... / } Conditional statement. If value a is true, the first statement, otherwise the else statement executes. Else part may be left off. Can be chained as in if (a) {} else if (b) {} else {}. while (a) { / ... / } A loop. The loop body statement will be executed as long as a produces a true value. for (var a = 0; a < 10; a = a + 1) { / ... */ } Example for-loop statement. var a = 1 initializes the loop, a < 10 checks whether it has ended yet, and a = a + 1 moves to the next step. return a; Only valid inside a function. Returns value a as the result of the function call. Useful functions Number(v) Converts v to a number. Number("5") gives 5. String(v) Converts v to a string. alert("hello") Show a dialog window saying 'hello'. confirm("are you sure?") Show a yes/no dialog. Returns a true/false value indicating whether the user clicked yes. prompt("what is your name?", "") Show a dialog asking for input. First argument is the message, second argument is the initial value of the input. Useful string properties "foo".length The length (number of characters) of the string. "foo".charAt(n) Get the character at position n. (Zero is the first character.) "foo".slice(from, to) Get a piece of the string. "012345".slice(1, 4) gives "123". "a b c".split(" ") Split the string on a character, producing an array of strings (["a", "b", "c"]). Useful array properties a[i] If i is an integer, this will access the element at that position. a.length The number of elements in the array. a.push(b) Add value b to the end of the array. a.pop() Remove the last element of the array, and return it. a.slice(from, to) Get a piece of the array, similar to the slice method on strings. Useful math properties Math.random() Produce a random number between 0 and 1. Math.round(x) Round x to an integer. Math.abs(x) Returns the absolute (positive) value of x. Math.max(a, b, c, ...) Math.min(a, b, c, ...) Given any number of values, returns the greatest (max) or smallest (min) one. Math.PI The pi (π) constant. Math.cos(x) Math.sin(x) Math.tan(x) Trigonometric functions. Math.acos(x) Math.asin(x) Math.atan(x) Inverse trigonometric functions. | |