From Wikipedia, the free encyclopedia
<<<<< Back to jsmain
- html tags are case insensitive. However, lowercase is recommended
- Do not put formatting in .html. Use styles instead!
<html> Defines an HTML document
<head> Defines the head section. Put "initialization" javascripts here.
<title> Title section. Must be under head.
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6. h6 is smallest
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<pre> Pre-formatted
<blockquote> Text quoted from somesource
<font> DONT USE THIS AS THIS IS DEPRECIATED!!!
<!--> Defines a comment
<acronym title="World Wide Web">WWW</acronym> Displays "World Wide Web" as tooltip.
<ol type="A"> Defines an ordered list (numbered by default. Types are: "A","a","I","i")
<ul type=""> Defines an unordered list (bullets. Types are "disc","circle","square")
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
<head> Defines information about the document
<title> Defines the document title
<base> Defines a base URL for all the links on a page
e.g. <head><base target="_blank"></head> // Open all links using target.
<link> Defines a resource reference
<meta> Defines meta information
<!DOCTYPE> Defines the document type. This tag goes before the <html> start tag.
<script> Defines a script
<noscript> Defines an alternate text if the script is not executed
<object> Defines an embedded object
<param> Defines run-time settings (parameters) for an object. e.g. <param name="BorderStyle" value="1" />, In XHTML the <param> tag must be properly closed.
Core Attributes - Not valid in base, head, html, meta, param, script, style, and title elements.
Attribute Value Description
========= ========================= =================================
class class_rule or style_rule The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text A text to display in a tool tip
Language Attributes - Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.
dir ltr | rtl Sets the text direction
lang language_code Sets the language code
Keyboard Attributes
accesskey character Sets a keyboard shortcut to access an element
tabindex number Sets the tab order of an element
<h2 align="center" name="chapter4">text</h1> // Can be used as href="#chapter4" later
<body bgcolor="yellow">... // yellow background
bgcolor="#000000"
bgcolor="rgb(0,0,0)"
<a href="url" target="_blank">text</a> // New window
target="_top" // Break out of a frame
<a href="url"><img src="buttonnext.gif"></a> // image link
<a href="mailto:email@com?cc=email@com&bcc=email@com
&subject=text%20text&body=text%20text">Send Mail</a> // Send Mail
<img src="constr4.gif" width="144" height="50" border="0" // settings
alt="Big Boat" // alternate text (will display when image failed to load)
align="middle|top|bottom" // default is bottom. Alignment of image wrt text
align="left|right" // alignment of image wrt paragraph
ismap // Display the mapping on the statusbar (Will work if usemap is not used)
usemap="#planetmap"> // use a mapping
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
</map>
[edit] Forms / Tables
<form name="input"
action="html_form_action.asp"
method="get">
First name: <input type="text" name="firstname" size="10" value="default_value"><br>
Password: <input type="password" name="lastname"><br>
Radio: <input type="radio" name="sex" value="male"> Male<br> // Make the name="sex" to be the same for the female.
Checkbox: <input type="checkbox" name="bike" checked="checked">I have a bike<br> // checked="checked" will set it to default
SubmitButton: <input type="submit" value="Submit">
ResetButton: <input type="reset" value="Reset">
Button: <input type="button" value="Hello world!">
TextArea: <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
Drop down: <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
</select>
</form>
<fieldset> // This puts a border around the form
<legend>Personal information:</legend>
<form>......</form>
</fieldset>
<label for="lname">Last Name:</label> // label example
<input type="text" name="lastname" id="lname" />
<button onclick="load(); refocus();" onmouseover="foo()" onmouseout="foo1()">Load</button>
<table border=nPixel
cellpadding=nPixel // cellpadding is spacing around the cells.
cellspacing=nPixel // cellspacing is the border size around cells.
bgcolor="red" // background color (applicable to td/th)
background="bgdesert.jpg" // background image (applicable to td/th/body). Could put URL here
width="400" or "100%"> // pixel width or % width
<tr> // table row
<th/td rowspan="2"
align="center" // table header / will occupy two rows / set the alignment (left,right,center)
<td> // table cell
<caption>My Caption</caption> // Put this just after the <table>
style=" font-family:verdana;
font-size:8pt;
color:green"
//External
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
//Internal
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>
// inline
<p style="color: red; margin-left: 20px">This is a paragraph</p>
[edit] Meta / URL / Characters
- Meta: Document information
<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML"> // used by search engines
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> // keywords
<head> // Auto-Redirect: in 5 Seconds
<meta http-equiv="Refresh" content="5;url=http://www.w3schools.com">
</head>
mailto sends email e.g. "mailto:someone@w3schools.com"
file a file on your local PC
ftp a file on an FTP server
http a file on a World Wide Web Server
https a file on a World Wide Web Server, secure
gopher a file on a Gopher server
news a Usenet newsgroup e.g. "news:alt.html"
telnet a Telnet connection
WAIS a file on a WAIS server
Result Description Entity Name Entity Number
non-breaking space & nbsp; & #160;
< less than & lt; & #60;
> greater than & gt; & #62;
& ampersand & amp; & #38;
" quotation mark & quot; & #34;
' apostrophe & apos; (does not work in IE) & #39;
[edit] Frames
- Cannot use <body> and <frameset> together.
- Basic frames:
<html>
<frameset cols="25%,50%,25%" // change this to "rows" for vertical
framespacing="0"
frameborder="0"
border="0">
<frame noresize="noresize" // Do not resize
name="showframe" // Can be used with: <a href="frame_c.htm" target="showframe">Frame c</a>
frameborder="1"
scrolling="auto" // "auto"/"no" (scrollbar)
marginwidth="0"
marginheight="0"
src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
<noframes><body>Your browser does not handle frames!</body></noframes>
</frameset>
</html>
- Combined horizontal/vertical:
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
<body>
<iframe src="filename.html"></iframe>
</body>
[edit] GreaseMonkey
[edit] General
if (!GM_xmlhttpRequest) {
alert('Please upgrade to the latest version of Greasemonkey.');
return;
}
GM_log('message'); // Log in console window (debugging)
function GM_setValue(key, value); // Cookie
function GM_getValue(key, defaultValue); // Cookie
function GM_registerMenuCommand(menuText, callbackFunction); // Adds a menu item in Greasemonkey->User Script Commands
GM_xmlhttpRequest -> http://diveintogreasemonkey.org/api/gm_xmlhttprequest.html
print( window.location.host ); // Domain name e.g. www.google.com
print( window.location.href ); // Complete URL path
- It is a nice habit to check a function before calling it (e.g. if multiple frames, execute the func only on the frame that the func exist)
if (doLoadAll) {
doLoadAll();
}
[edit] Getting elements
function xpath(query) {
return document.evaluate(query, document, null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
}
- Testing for a page if it contains HTML element:
var textareas = document.getElementsByTagName('textarea');
if (textareas.length) {
// there is at least one textarea on this page
} else {
// there are no textareas on this page
}
var allElements, thisElement;
allElements = document.getElementsByTagName('*'); // change the '*' with 'textarea' for textarea only.
for (var i = 0; i < allElements.length; i++) {
thisElement = allElements[i];
// do something with thisElement
}
- Doing something with an element
allLinks = xpath('//a[@href]'); // ALL links on a page
allElements = xpath('//*[@title]'); // ALL the elements with a title attribute
allClassSpon= xpath("//div[@class='sponsoredlink']"); // all <div>s with a class of sponsoredlink
postforms = xpath("//form[translate(@method, 'POST ', 'post')='post']"); // case insensitive
for (var i = 0; i < allLinks.snapshotLength; i++) {
thisobj = allLinks.snapshotItem(i);
// do something with thisobj
switch (thisobj.nodeName.toUpperCase()) {
case 'A':
// this is a link, do something
break;
case 'IMG':
// this is an image, do something else
break;
default:
// do something with other kinds of HTML elements
}
}
- Insert an <hr> before/after the main content . This presumes that there is an element whose ID is "main".
var main, newElement;
main = document.getElementById('main');
if (main) {
newElement = document.createElement('hr');
main.parentNode.insertBefore(newElement, main); // BEFORE the main content
main.parentNode.insertBefore(newElement, main.nextSibling); // AFTER the main content
}
var adSidebar = document.getElementById('ads');
if (adSidebar) {
adSidebar.parentNode.removeChild(adSidebar);
}
var theImage, altText; // Replace an image with its alt text
theImage = document.getElementById('annoyingsmily');
if (theImage) {
altText = document.createTextNode(theImage.alt);
theImage.parentNode.replaceChild(altText, theImage);
}
var logo = document.createElement("div");
logo.innerHTML = '<div style="margin: 0 auto 0 auto; ' +
'border-bottom: 1px solid #000000; margin-bottom: 5px; ' +
'font-size: small; background-color: #000000; ' +
'color: #ffffff;"><p style="margin: 2px 0 1px 0;"> ' +
'YOUR TEXT HERE ' +
'</p></div>';
document.body.insertBefore(logo, document.body.firstChild);
-or-
var logo = document.createElement('img');
logo.src = 'data:image/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA'+
'LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D';
document.body.insertBefore(logo, document.body.firstChild);
[edit] Styles
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addGlobalStyle('p { font-size: large ! important; }');
- Getting an element's style
<html>
<head>
<title>Style test page</title>
<style type="text/css">
p { background-color: white; color: red; }
</style>
</head>
<body>
<p id="p1">This line is red.</p>
<p id="p2" style="color: blue">This line is blue.</p>
</body>
</html>
- Get & Set the styles defined by an element's style attribute:
var p1elem, p2elem;
p1elem = document.getElementById('p1');
p2elem = document.getElementById('p2');
alert(p1elem.style.color); // will display an empty string
alert(p2elem.style.color); // will display "blue"
p1style = getComputedStyle(p1elem, '');
p2style = getComputedStyle(p2elem, '');
alert(p1style.color); // will display "rgb(255, 0, 0)"
alert(p2style.color); // will display "rgb(0, 0, 255)"
p1elem.style.marginTop = '2em';
p1elem.style.backgroundColor = 'white';
p1elem.style.color = 'red';
[edit] Post processing
- Post processing a page after it renders
var newBody = '<html><head><title>My New Page</title></head><body>' +
'<p>This page is a complete replacement of the original.</p></body></html>';
window.addEventListener( 'load', function() { document.body.innerHTML = newBody; }, true);
var a = document.getElementById('article');
if (a.href.match(/\?/i)) {
// link already contains other parameters, so append "&printer=1"
a.href += '&printer=1';
} else {
// link does not contain any parameters, so append "?printer=1"
a.href += '?printer=1';
}
- Redirecting the entire URL!
window.location.href = window.location.href.replace(/^http:/, 'https:');
- Intercepting User clicks:
document.addEventListener('click', function(event) {
// event.target is the element that was clicked.
// Do whatever you want here!
// if you want to prevent the default click action
// (such as following a link), use these two commands:
event.stopPropagation();
event.preventDefault();
}, true);
- Overriding a java method (submit)
function newsubmit(event) {
var target = event ? event.target : this;
// do anything you like here
alert('Submitting form to ' + target.action);
// call real submit function
this._submit();
}
// capture the onsubmit event on all forms
window.addEventListener('submit', newsubmit, true);
// If a script calls someForm.submit() manually, the onsubmit event does not fire,
// so we need to redefine the submit method of the HTMLFormElement class.
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = newsubmit;
[edit] Parsing XML
var xmlString = '<passwd>' +
' <user id="101">' +
' <login>mark</login>' +
' <group id="100"/>' +
' <displayname>Mark Pilgrim</displayname>' +
' <homedir>/home/mark/</homedir>' +
' <shell>/bin/bash</shell>' +
' </user>' +
'</passwd>'
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "application/xml");
var entries = xmlDoc.getElementsByTagName('passwd');
var title;
for (var i = 0; i < entries.length; i++) {
title = entries[i].getElementsByTagName('login')[0].textContent;
alert(title); // output is mark
}
[edit] Examples
- force offsite links to open in a new window
var a, thisdomain, links;
thisdomain = window.location.host;
links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
a = links[i];
if (a.host && a.host != thisdomain) {
a.target = "_blank";
}
}
var wiki;
wiki = document.getElementById('wpTextbox1');
if (main) {
wiki.value='<pre>john';
}
