HTML, CSS, JavaScript Useful Cheat Sheet!

Posted on 2018/02/12 at 1:47 am

Web Technologies Represented by 3 Shields

I love web technologies because they provide a quick return on interest (ROI) and for the beginner gives immediate feedback in terms of accomplishment and sense of progress. There are many frameworks that one can use for a web based project but knowing the base elements these frameworks are comprised from is still important. Here is a reference list/cheat sheet of some of the most common HTML tags, CSS, and JavaScript one will likely use. This is great for Web Devs, Web Admins, coders, programmers, and the like.

HTML
- Tags
- Div Tag
- P Tag
- Span Tag
- Img Tag
- A Tag
- Table Tags
- Form Tags
- HTML Entities
- Notes
HTML Notes
CSS
JavaScript

HTML Tags

Most HTML tags are setup as open and close tags. This means that most tags are a pare/set and denote where they start and end. The end tag has a forward slash (/) to indicate the tag is the end tag.

<tag>Stuff in tag...</tag>
(open tag)content(/end tag)

<!--Some tags end like this-->
<tag/>

<div>

Div tags are considered devision tags and are used to section data on a page. CSS will then be used to style the tag by setting its position, setting the background color, setting the text color, etc. Think of the div as a container and your scaffolding for the page. Div tags are block elements.

<p>

The P tag stands for paragraph tag and this is like a sub container for the div tag. It often holds text but can contain images, links, and other non-block tags. Browsers will automatically add some space (margin) before and after each <p> element. This behavior can be modified with CSS using the margin properties. P tags are block elements.

<span>

The span tag is pretty much like the div tag. The difference between the two is that div is a block element which puts it on a separate line. A span tag, however, is an inline element, meaning that it can be on a line with other elements.

<img>

The img tag stands for images. People like images and I like images.

<img src="https://www.itdominator.com/wp-content/uploads/2017/07/wp-cli.jpg" alt="If image doesn't render, this text will show instead." />

<a>

Anchor tags link to parts on the same page or to new pages entirely. They are essentially links.

<!--To an external page...-->
<a href="http://www.google.com" target="_blank">Google</a>

<!--This will jump to the content that is wrapped with another anchor tag on the same page.-->
<a href="#colors">Colors</a>

<a name="colors">
<p>Colors are cool. The primary colors are red, green, and blue.</p>
</a>

<table>

Table is a block element that denotes there will be sub elements of th, tr, td. There are others but these are the core parts. Th stands for table header and is inset within a tr (table row). Tr is table row which makes a row for the table. Td is table data which is like a column and is inset in a table row too.

border-collapse: separate (default):

Firstname	Lastname
Tom	Gar
Lois	Griffin

border-collapse: collapse:

Firstname	Lastname
Peter	Griffin
Lois	Matt

form

A form is used to submit data to the server. There are many form objects one can use. Below is a table covering all HTML5 form objects and their code and examples.

Object	Preview	HTML 5 code
Label	Text	<label>Texte</label>
Button		<input type="button" name="name" value="Bouton">
Image button		<input type="image" src="image/bimage.jpg">
Text field		<input type="text" name="text" value="empty">
Password		<input type="password" name="monpass" value="12345">
Date		<input type="date" name="date" value="<?php echo $today?>">
Date and time		<input type="datetime" name="time" value="<?php echo $now?>">
Time	2013-06-27	<time>2013-06-27</time>
Number		<input type="number" name="num" value="12345">
Color		<input type="color" name="color" value="">
Search input		<input type="search" name="" list="datalist" value="">
Data	Dix	<data value="10">Ten</data>
Check box		<input type="checkbox" name="checkbox1" value="checkbox">
Radio group	Choice 1 Choice 2	<label>Choice 1 <input type="radio" name="radio1" value="radio1"> </label> <label>Choice 2 <input type="radio" name="radio1" value="radio2"> </label>
Textarea	content	<textarea name="textarea">content</textarea>
Range		<input type="range" min="-100" max="100" value="0" step="2" name="power" list="powers"> <datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist>
Data list	To be used with input	<datalist id="identifier"> <option value="1"> <option value="2"> <option value="3"> </datalist>
Select		<select name="select"> <option>Alpha</option> <option>Beta</option> <option>Delta</option> </select>
Select list		<select name="select2" size="3"> <option>Alpha</option> <option>Beta</option> <option>Delta</option> </select>
Menu	New Open Save	<menu type="context"> <li>New</li> <li>Open</li> <li>Save</li> </menu>
Toolbar		<menu type="toolbar"> <li><button type="button" onclick="fnew()">New</button></li> <li><button type="button" onclick="fopen()">Open</button></li> <li><button type="button" onclick="fsave()">Save</button></li> </menu>
Combo box		<input type="text" list="comboid"> <datalist id="comboid"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist>
File upload		<input type="file" name="file">
Image & caption	Caption	<figure> <img src="image/image.gif"> <figcaption>Caption</figcaption> </figure>
Fieldset	Title ...Content...	<fieldset> <legend>Title </legend> <p>Content</p> </fieldset>
Output		<output onforminput="value = 2 + 2"></output>
Meter	12 units	<meter min=0 max=24 value=12>12 units</meter>
Progress	0%	<progress id="prog" max=100>
Summary	Overview term definition ...	<details> <summary> Presentation </summary> <dl> <dt>term</dt> <dd>definition</dd> ... </dl> </details>
Submit button		<input type="submit" name="submit" value="Submit">
Clear/Reset button		<input type="reset" name="clear" value="Clear">

HTML Entities

HTML entities are used in place of reserved characters in HTML. Characters that are not present on your keyboard can also be replaced by entities as well. The most common are listed in a table below.

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	double quotation mark	"	"
'	single quotation mark (apostrophe)	'	'
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	registered trademark	®	®

HTML Notes

Block Elements

In general, HTML elements can be divided into two categories : block level and inline elements. HTML block level elements can appear in the body of an HTML page. It can contain another block level as well as inline elements. By default, block-level elements begin on new lines. Block level elements create larger structures (than inline elements).

p
h1, h2, h3, h4, h5, h6
ol, ul
pre
address
blockquote
dl
div
fieldset
form
hr
noscript
table

Inline Elements

HTML inline elements can appear in the body of an HTML page. They can contain data and other inline elements. By default, inline elements do not begin on new lines. Inline elements create shorter structures (than block elements).

b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

Margins

Margins are the spacing around an element.

This span tag has 2em margin set...

Padding

Padding is the spacing internal to an element and its "walls".

This span tag has 2em padding set...

CSS

Examples/Logic

Selector	Example	Example description
.class	.intro	Selects all elements with class="intro"
#id	#firstname	Selects the element with id="firstname"
*	*	Selects all elements
element	p	Selects all <p> elements
element,element	div, p	Selects all <div> elements and all <p> elements
element element	div p	Selects all <p> elements inside <div> elements
element>element	div > p	Selects all <p> elements where the parent is a <div> element
element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"
[attribute\|=value]	[lang\|=en]	Selects all elements with a lang attribute value starting with "en"
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"
[attribute=value*]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"
:active	a:active	Selects the active link
::after	p::after	Insert something after the content of each <p> element
::before	p::before	Insert something before the content of each <p> element
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children (including text nodes)
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> element that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
ype.asp">:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the input element which has focus
:hover	a:hover	Selects links on mouse over
sp">:in-range	input:in-range	Selects input elements with a value within a specified range
:invalid	input:invalid	Selects all input elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)
sp">:last-child	p:last-child	Selects every <p> element that is the last child of its parent
ype.asp">:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
sp">:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
hild.asp">:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
f-type.asp">:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
ype.asp">:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
ype.asp">:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
sp">:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no "required" attribute
ange.asp">:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
sp">:read-only	input:read-only	Selects input elements with the "readonly" attribute specified
sp">:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified
:required	input:required	Selects input elements with the "required" attribute specified
:root	:root	Selects the document's root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all input elements with a valid value
:visited	a:visited	Selects all visited links

IDs

ID selectors are supposed to be unique within the HTML document. When queried with JavaScript it should return a single element but it can return an array/list if the web developer set the document with multiple IDs of the same type. Standards dictate this is poor form if done.

<!-- The IDs are arbitrary. -->

<div id="left-container"> <!-- Content --> </>
<div id="middle-container"> <!-- Content --> </>
<div id="right-container"> <!-- Content --> </>

Classes

Class selectors don't have to be unique within the HTML document. When queried with JavaScript it usually returns an array/list.

<!-- The Class is arbitrary. -->

<div class="book"> <!-- Content --> </>
<div class="book"> <!-- Content --> </>
<div class="book"> <!-- Content --> </>

CSS Button Generator Button Generator

Quickly make buttons...

Button

Text Color: Main Background Color: Second Background Color: Border Color:
Viewport Color:

Gradient Degrees: 0% Border Radius: 25px Padding: 15px Border Width: 5px

Button Text Example: Text Align: Border Style: Background Type:

JavaScript

Get Elements By ID/Class/TagName/CSS Selector

Getting elements by id, class, and tag among other options is a sizeable chunk of the JavaScripting one will do. This allows us to interact with the DOM

// Get HTML element(s) with specified id.
  var x = document.getElementById('id');

// Get HTML elements with specified class.
  var x = document.getElementsByClassName('className');

// Get HTML elements with specified tag.
  var x = document.getElementsByTagName('tagName');

// Get HTML elements tht matches a specified CSS selector
// This example returns a list of all  elements with class="icon".
  var x = document.querySelectorAll("img.icon");

Function

The basic block of coding we all know and have come to love. Yes...the function.

function sum(a, b) {
    return a + b;      // The function returns the sum of a and b
}
var sumVal = sum(2,4);
alert(sumVal);  // Will pop-up saying 6

If Statement

Check the conditions.

if (condition) {
}

Loops

Loops baby, they're needed and these will meet your needs.

// Standard loop
for (var i=0; i<array.length; i++) {
   array[i].innerHTML;
}

// For In Loop
for (var tag in elements) {
    // Do stuff while there are tags to work on
}

// While Loop
while (condition) {
    // Do stuff while condition is met
}

// Do While
 do {
    // One at least one and keep doing stuff while condition is met
}
while (condition);

Switch/Case Statement

Good for menu stuff, switch/case statements are ready for the job.

var day;
switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case  6:
        day = "Saturday";
}
alert(day);

Alert & Console Log

Error logging is helpful. The two way to do this are through alerts and console logging. Most of the time, alert isn't used but it can be helpful to warn the user, etc.

// This will generate a pop-up window with the "Hello, World!" text.
alert("Hello, World!");

// This will log to the console the "Hello, World!" text.
To access the console in Firefox, do Ctrl+Shift+J
console.log("Hello, World!");

Adding Event Listeners

Event listeners are the next most important after getting an element. They allow us to let the user click on stuff or interact through other ways in order to create dynamic interactions.

// This attaches a click event to the entire DOM.
// We can then check which IDs, Classes, etc were clicked to then do other things.

document.addEventListener("click", (e) => {
    if(e.target.id == "alert2")
        alert("You clicked an element with the ID of alert2");

});


// This attaches to a specific element with the ID of cars and
// when clicked alerts us to the innerHTML text.

<p id="cars">Hello, World!</p>

document.getElementById('cars').addEventListener("click", (e) => {
        alert("The content is:  " + e.target.innerHTML);
});

// This attaches it in a different manner.
document.getElementById('cars').onclick =  function(){
    // do stuff
}

// You can add it though a tag as well.
<div onclick="myFunction()"> I am clickable! </div>

Here is a list of some common HTML event attributes:

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onkeyup	The user releases a keyboard key
onload	The browser has finished loading the page

Arrays

Arrays in JavaScript are a special object and really act like lists or vectors since we can push new values to it.

// An empty array
var cars = [];

// Has nodes/objects
var cars = ["Toyota", "Sab", "Mazda"];

// Add to array
cars.push("Nesan');

// Remove from end of array
cars.pop();

Parent Element

Sometimes, we need to access the element that contains the element we accessed. This could be because we want to remove the element or we want to add something next to it than in it.

<div>
    <p id="cars" >
        Cars are cool.
    </p>
But boats are even more cool.
</div>

var x = document.getElementById('cars').parentElement;
alert(x.innerHTML);  // This will present an alert box with "But boats are even more cool."


// This will remove the element we accessed from the div
var childElm = document.getElementById('cars');
var parentElm = childElm.parentElement;

parentElm.removeChild(childElm);

Cookies

Sometimes, we need to store user information for later usage. This is where cookies come in.

function saveAsCookie() {
    var uName = document.getElementsByName("userName")[0].value;
    var eml = document.getElementsByName("email")[0].value;


    // should set expires date: Ex -> expires=(UTC date).
    // Use secure; in argument to make sure it only transports across HTTPS or secure connections
    document.cookie = "username=" + uName  +"; path=" + document.URL;
    document.cookie = "email=" + eml + "; path=" + document.URL;
}

function displayCookies() {
    var cookiesField = document.getElementById("cookieField");
    var cookies = document.cookie.split(";");  // Set as an array to traverse....

    for (var i=0; i<cookies.length; i++) {
        cookiesField.innerHTML += cookies[i] + "<br/>";
    }
}

function clerCookies() {
    var expireDate = "Thu, 01 Jan 1970 00:00:00 UTC";
    document.cookie = "username=; expires=" + expireDate;
    document.cookie = "email=; expires= " + expireDate;
}

<form>
<input type="text" title="User Name" name="userName" placeholder="User Name" value=""/>
<input type="text" title="Email" name="email" placeholder="Email" value=""/>
<input type="button" name="submit"  onclick="saveAsCookie()" value="loginSubmit">
</form>

<button type="button" name="button" onclick="displayCookies()">Get Cookie</button>
<button type="button" name="button" onclick="clerCookies()">Clear Cookie</button>

<div id="cookieField"></div>

AJAX

AJAX is a developer's dream, because you can:

Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background

function loadDoc() {
  var xhttp = new XMLHttpRequest();        // Create the xhttp object
  xhttp.onreadystatechange = function() {  // This is actually run after open and send are done
    if (this.readyState == 4 && this.status == 200) {  // Confirm we have a  successful connection
     // Receive the response info. For PHP it is echo that sends it. Then set into demo div
     document.getElementById("demo").innerHTML = this.responseText;  
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);  // post or get, path to XML page or php script, set async 
  xhttp.send();                              // Start the process
}


<button type="button" name="button" onclick="loadDoc()">Load XML</button>
<div id="demo">

String Manipulation

String Manipulation can be important when handling cookies or data. Sometimes we need to split it into an array, make it lower case or vise versa, find a sub string, or more. These should get you started:

// Find sub string
var str = "Hello world, welcome to the universe.";
var n = str.includes("world");

// Find sub string at offset
var str = "Hello world, welcome to the universe.";
var n = str.includes("world", 12);

// Replace string 
var str = "Windows!";
var res = str.replace("Windows", "Linux");  // old value, new value

// Replace all case sensitive
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/g, "red");

// Replace all case-insensitive
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/gi, "red");

// String split
var str = "How are you doing today?";
var arry = str.split(" ");  // Split by spaces

// To Upper
var x = "Linux";
x.toUpperCase();

// To Lower
var x = "LINUX";
x.toLowerCase();

Conclusion

I think this list is pretty good and fits most user's needs. This should definitely help those who are looking for a certain tag or CSS logic or are just wanting to see a broad selection of what web technologies are based off of. Coders, website developers, Admins, etc should have most of what they need right on the page with good samples to start.