2 little 2 hard dont be shy because we all learn everything from zero 2 be clever 2 be perfect
test server
© UnksFiles 2011.
Tampilkan postingan dengan label use me up. Tampilkan semua postingan
Tampilkan postingan dengan label use me up. Tampilkan semua postingan
Kamis, 09 Juni 2011
HTML 4.01 Quick List
HTML Basic Document
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
Text Elements
<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
Links
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames<frameset cols="25%,75%">
<frame src="page1.htm" />
<frame src="page2.htm" />
</frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as ©
Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from a source.
</blockquote>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
Source : http://www.w3schools.com/html/html_quick.asp
===============================================================
Tag || Description || DTD
===============================================================
<!--...--> Defines a comment STF
<!DOCTYPE> Defines the document type STF
<a> Defines an anchor STF
<abbr> Defines an abbreviation STF
<acronym> Defines an acronym STF
<address> Defines contact information for the author/owner of a document STF
<applet> Deprecated. Defines an embedded applet TF
<area /> Defines an area inside an image-map STF
<b> Defines bold text STF
<base /> Defines a default address or a default target for all links on a page STF
<basefont /> Deprecated. Defines a default font, color, or size for the text in a page TF
<bdo> Defines the text direction STF
<big> Defines big text STF
<blockquote> Defines a long quotation STF
<body> Defines the document's body STF
<br /> Defines a single line break STF
<button> Defines a push button STF
<caption> Defines a table caption STF
<center> Deprecated. Defines centered text TF
<cite> Defines a citation STF
<code> Defines computer code text STF
<col /> Defines attribute values for one or more columns in a table STF
<colgroup> Defines a group of columns in a table for formatting STF
<dd> Defines a description of a term in a definition list STF
<del> Defines deleted text STF
<dfn> Defines a definition term STF
<dir> Deprecated. Defines a directory list TF
<div> Defines a section in a document STF
<dl> Defines a definition list STF
<dt> Defines a term (an item) in a definition list STF
<em> Defines emphasized text STF
<fieldset> Defines a border around elements in a form STF
<font> Deprecated. Defines font, color, and size for text TF
<form> Defines an HTML form for user input STF
<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<h1> to <h6> Defines HTML headings STF
<head> Defines information about the document STF
<hr /> Defines a horizontal line STF
<html> Defines an HTML document STF
<i> Defines italic text STF
<iframe> Defines an inline frame TF
<img /> Defines an image STF
<input /> Defines an input control STF
<ins> Defines inserted text STF
<isindex> Deprecated. Defines a searchable index related to a document TF
<kbd> Defines keyboard text STF
<label> Defines a label for an input element STF
<legend> Defines a caption for a fieldset element STF
<li> Defines a list item STF
<link /> Defines the relationship between a document and an external resource STF
<map> Defines an image-map STF
<menu> Deprecated. Defines a menu list TF
<meta /> Defines metadata about an HTML document STF
<noframes> Defines an alternate content for users that do not support frames TF
<noscript> Defines an alternate content for users that do not support client-side scripts STF
<object> Defines an embedded object STF
<ol> Defines an ordered list STF
<optgroup> Defines a group of related options in a select list STF
<option> Defines an option in a select list STF
<p> Defines a paragraph STF
<param /> Defines a parameter for an object STF
<pre> Defines preformatted text STF
<q> Defines a short quotation STF
<s> Deprecated. Defines strikethrough text TF
<samp> Defines sample computer code STF
<script> Defines a client-side script STF
<select> Defines a select list (drop-down list) STF
<small> Defines small text STF
<span> Defines a section in a document STF
<strike> Deprecated. Defines strikethrough text TF
<strong> Defines strong text STF
<style> Defines style information for a document STF
<sub> Defines subscripted text STF
<sup> Defines superscripted text STF
<table> Defines a table STF
<tbody> Groups the body content in a table STF
<td> Defines a cell in a table STF
<textarea> Defines a multi-line text input control STF
<tfoot> Groups the footer content in a table STF
<th> Defines a header cell in a table STF
<thead> Groups the header content in a table STF
<title> Defines the title of a document STF
<tr> Defines a row in a table STF
<tt> Defines teletype text STF
<u> Deprecated. Defines underlined text TF
<ul> Defines an unordered list STF
<var> Defines a variable part of a text STF
<xmp> Deprecated. Defines preformatted text (nul)
===================================================================
HTML <address> Tag Example
Contact information for W3Schools.com:
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
HTML <area> Tag Example
An image-map, with clickable areas:
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
NB:
Definition and Usage
The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).
The area element is always nested inside a <map> tag.
Note: The usemap attribute in the <img> tag is associated with the map element's name attribute, and creates a relationship between the image and the map.
Differences Between HTML and XHTML
In HTML the <area> tag has no end tag.
In XHTML the <area> tag must be properly closed.
Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
HTML <base> Tag Example
Specify a default URL and a default target for all links on a page:
<head>
<base href="http://www.w3schools.com/images/" />
<base target="_blank" />
</head>
<body>
<img src="stickman.gif" />
<a href="http://www.w3schools.com">W3Schools</a>
</body>
HTML <body> Tag Example
A simple HTML document, with the minimum of required tags:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <basefont> Tag Example
The basefont element is deprecated.
Specify a default font-color and font-size for text on page:
<head>
<basefont color="red" size="5" />
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
</body>
HTML <blockquote> Tag Example
A long quotation is marked up as follows:
<blockquote>
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
HTML <br> Tag Example
A line break is marked up as follows:
This text contains<br />a line break.
HTML <button> Tag Example
A button is marked up as follows:
<button type="button">Click Me!</button>
HTML <center> Tag Example
The center element is deprecated.
Center text in an HTML page:
<center>This text will be centered.</center>
HTML <col> Tag Example
col elements that specify different alignment for the three columns in the table:
<table width="100%" border="1">
<col align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
HTML <colgroup> Tag Example
Two colgroup elements that specify different alignment and style for the three columns in the table (notice that the first colgroup element spans two columns):
<table width="100%" border="1">
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
HTML <del> Tag Example
A text with a deleted part and a new inserted part:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
HTML <!DOCTYPE> Declaration Example
An HTML document with a doctype of XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML Doctypes Example
An HTML document with a doctype of HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> Tags Example
Format text in a document:
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>Computer code text</code>
<samp>Sample computer code text</samp>
<kbd>Keyboard text</kbd>
<var>Variable</var>
<cite>Citation</cite>
NB
Definition and Usage
The <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, and <cite> tags are all phrase tags. They are not deprecated, but it is possible to achieve richer effect with CSS.
Tag Description
<em> Renders as emphasized text
<strong> Renders as strong (highlighted) text
<dfn> Defines a definition term
<code> Defines computer code text
<samp> Defines sample computer code
<kbd> Defines keyboard text
<var> Defines a variable part of a text
<cite> Defines a citation
The HTML <font> Tag Should NOT be Used
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
HTML Forms and Input
Ex:
<form>
.
input elements
.
</form>
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<form>
Password: <input type="password" name="pwd" />
</form>
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
<html>
<body>
<form action="">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
HTML Frames
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
<html>
<frameset cols="180,*">
<frame src="content.htm" />
<frame src="link.htm" name="showframe" />
</frameset>
</html>
HTML head Elements
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
<head>
<base href="http://www.w3schools.com/images/" />
<base target="_blank" />
</head>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML Headings<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<!-- This is a comment -->
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
</body>
</html>
HTML Tutorial
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<iframe src="/default.asp" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
<iframe src="html_intro.asp" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
HTML Images
<img src="url" alt="some_text"/>
<img src="boat.gif" alt="Big Boat" />
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
HTML Language Code Reference
<html lang="en">
...
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
...
</html>
HTML Layouts
HTML Layout Tags
Tag Description
<table> Defines a table
<div> Defines a section in a document
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 W3Schools.com</div>
</div>
</body>
</html>
HTML Links<a href="url">Link text</a>
<a href="http://www.w3schools.com/">Visit W3Schools</a>
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
<a name="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Lists
HTML List Tags
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Meta
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />
<html>
<head>
<meta http-equiv="Refresh" content="5;url=http://www.w3schools.com" />
</head>
<body>
<h1>Sorry! We have moved!</h1>
<h2>The new URL is: <a href="http://www.w3schools.com">http://www.w3schools.com</a></h2>
<p>You will be redirected to the new address in five seconds.</p>
<p>If you see this message for more than 5 seconds, please click on the link above!</p>
</body>
</html>
HTML <object> Tag
<object width="400" height="400">
<param name="movie" value="/flash/helloworld.swf">
</object>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<body>
<p>This is<br />a para<br />graph with line breaks</p>
</body>
</html>
HTML <script> Tag Example
<script type="text/javascript">
document.write("Hello World!")
</script>
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
HTML Scripts
Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts
<script type="text/javascript">
document.write("Hello World!")
</script>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
HTML <select> Tag Example
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<html>
<body>
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</body>
</html>
HTML Styles - CSS
Tags Description
<center> Deprecated. Defines centered content
<font> and <basefont> Deprecated. Defines HTML fonts
<s> and <strike> Deprecated. Defines strikethrough text
<u> Deprecated. Defines underlined text
Attributes Description
align Deprecated. Defines the alignment of text
bgcolor Deprecated. Defines the background color
color Deprecated. Defines the text color
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Tables
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
HTML Text Formatting
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
HTML <tt> <i> <b> <big> <small> Tags Example
Format text in a document:
<tt>Teletype text</tt>
<i>Italic text</i>
<b>Bold text</b>
<big>Big text</big>
<small>Small text</small>
HTML Tutorial
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
object <html>
<head>
<script type="text/javascript">
function alignImg()
{
document.getElementById("compman").align="right";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" alt="Computerman" width="107" height="98" />
<p>Some text. Some text. Some text. Some text.</p>
<input type="button" onclick="alignImg()" value="Align Image" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function addBorder()
{
document.getElementById("compman").border="2";
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" alt="Computerman" width="107" height="98" />
<br /><br />
<input type="button" onclick="addBorder()" value="Add border" />
</body>
</html>
JavaScript Array Object
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.unshift("Kiwi") + "<br />");
document.write(fruits.unshift("Lemon","Pineapple") + "<br />");
document.write(fruits);
</script>
<p><b>Note:</b> The unshift() method does not work properly in Internet Explorer, it only returns undefined!</p>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write("Removed: " + fruits.splice(2,0,"Lemon") + "<br />");
document.write(fruits);
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
function sortNumber(a, b)
{
return b - a;
}
var n = ["10", "5", "40", "25", "100", "1"];
document.write(n.sort(sortNumber));
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.join() + "<br />");
document.write(fruits.join("+") + "<br />");
document.write(fruits.join(" and "));
</script>
</body>
</html>
JavaScript Boolean Object
<html>
<body>
<script type="text/javascript">
var b1=new Boolean( 0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 is boolean "+ b1 +"<br />");
document.write("1 is boolean "+ b2 +"<br />");
document.write("An empty string is boolean "+ b3 + "<br />");
document.write("null is boolean "+ b4+ "<br />");
document.write("NaN is boolean "+ b5 +"<br />");
document.write("The string 'false' is boolean "+ b6 +"<br />");
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
var b1=new Boolean( 0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 is boolean "+ b1 +"<br />");
document.write("1 is boolean "+ b2 +"<br />");
document.write("An empty string is boolean "+ b3 + "<br />");
document.write("null is boolean "+ b4+ "<br />");
document.write("NaN is boolean "+ b5 +"<br />");
document.write("The string 'false' is boolean "+ b6 +"<br />");
</script>
</body>
</html>
JavaScript Browser Detection
The Navigator Object
The Navigator object contains all information about the visitor's browser:Example
<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
<html>
<body>
<div id="example"></div>
<script type="text/javascript">
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>
JavaScript Comments
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
<script type="text/javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
<script type="text/javascript">
//document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
<script type="text/javascript">
/*
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
*/
</script>
<script type="text/javascript">
document.write("Hello"); // Write "Hello"
document.write(" Dolly!"); // Write " Dolly!"
</script>
JavaScript Date Object
new Date() // current date and time
new Date(milliseconds) //milliseconds since 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)
var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();
if (x>today)
{
alert("Today is before 14th January 2100");
}
else
{
alert("Today is after 14th January 2100");
}
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
JavaScript Events
HTML Elements and Valid Doctypes
Tag HTML 4.01 / XHTML 1.0 XHTML 1.1
Transitional Strict Frameset
<a> Yes Yes Yes Yes
<abbr> Yes Yes Yes Yes
<acronym> Yes Yes Yes Yes
<address> Yes Yes Yes Yes
<applet> Yes No Yes No
<area /> Yes Yes Yes No
<b> Yes Yes Yes Yes
<base /> Yes Yes Yes Yes
<basefont /> Yes No Yes No
<bdo> Yes Yes Yes No
<big> Yes Yes Yes Yes
<blockquote> Yes Yes Yes Yes
<body> Yes Yes Yes Yes
<br /> Yes Yes Yes Yes
<button> Yes Yes Yes Yes
<caption> Yes Yes Yes Yes
<center> Yes No Yes No
<cite> Yes Yes Yes Yes
<code> Yes Yes Yes Yes
<col /> Yes Yes Yes No
<colgroup> Yes Yes Yes No
<dd> Yes Yes Yes Yes
<del> Yes Yes Yes No
<dfn> Yes Yes Yes Yes
<dir> Yes No Yes No
<div> Yes Yes Yes Yes
<dl> Yes Yes Yes Yes
<dt> Yes Yes Yes Yes
<em> Yes Yes Yes Yes
<fieldset> Yes Yes Yes Yes
<font> Yes No Yes No
<form> Yes Yes Yes Yes
<frame /> No No Yes No
<frameset> No No Yes No
<h1> to <h6> Yes Yes Yes Yes
<head> Yes Yes Yes Yes
<hr /> Yes Yes Yes Yes
<html> Yes Yes Yes Yes
<i> Yes Yes Yes Yes
<iframe> Yes No Yes No
<img /> Yes Yes Yes Yes
<input /> Yes Yes Yes Yes
<ins> Yes Yes Yes No
<isindex> Yes No Yes No
<kbd> Yes Yes Yes Yes
<label> Yes Yes Yes Yes
<legend> Yes Yes Yes Yes
<li> Yes Yes Yes Yes
<link /> Yes Yes Yes Yes
<map> Yes Yes Yes No
<menu> Yes No Yes No
<meta /> Yes Yes Yes Yes
<noframes> Yes No Yes No
<noscript> Yes Yes Yes Yes
<object> Yes Yes Yes Yes
<ol> Yes Yes Yes Yes
<optgroup> Yes Yes Yes Yes
<option> Yes Yes Yes Yes
<p> Yes Yes Yes Yes
<param /> Yes Yes Yes Yes
<pre> Yes Yes Yes Yes
<q> Yes Yes Yes Yes
<s> Yes No Yes No
<samp> Yes Yes Yes Yes
<script> Yes Yes Yes Yes
<select> Yes Yes Yes Yes
<small> Yes Yes Yes Yes
<span> Yes Yes Yes Yes
<strike> Yes No Yes No
<strong> Yes Yes Yes Yes
<style> Yes Yes Yes Yes
<sub> Yes Yes Yes Yes
<sup> Yes Yes Yes Yes
<table> Yes Yes Yes Yes
<tbody> Yes Yes Yes No
<td> Yes Yes Yes Yes
<textarea> Yes Yes Yes Yes
<tfoot> Yes Yes Yes No
<th> Yes Yes Yes Yes
<thead> Yes Yes Yes No
<title> Yes Yes Yes Yes
<tr> Yes Yes Yes Yes
<tt> Yes Yes Yes Yes
<u> Yes No Yes No
<ul> Yes Yes Yes Yes
<var> Yes Yes Yes Yes
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7 Shades Mix
Aqua #00FFFF Shades Mix
Aquamarine #7FFFD4 Shades Mix
Azure #F0FFFF Shades Mix
Beige #F5F5DC Shades Mix
Bisque #FFE4C4 Shades Mix
Black #000000 Shades Mix
BlanchedAlmond #FFEBCD Shades Mix
Blue #0000FF Shades Mix
BlueViolet #8A2BE2 Shades Mix
Brown #A52A2A Shades Mix
BurlyWood #DEB887 Shades Mix
CadetBlue #5F9EA0 Shades Mix
Chartreuse #7FFF00 Shades Mix
Chocolate #D2691E Shades Mix
Coral #FF7F50 Shades Mix
CornflowerBlue #6495ED Shades Mix
Cornsilk #FFF8DC Shades Mix
Crimson #DC143C Shades Mix
Cyan #00FFFF Shades Mix
DarkBlue #00008B Shades Mix
DarkCyan #008B8B Shades Mix
DarkGoldenRod #B8860B Shades Mix
DarkGray #A9A9A9 Shades Mix
DarkGrey #A9A9A9 Shades Mix
DarkGreen #006400 Shades Mix
DarkKhaki #BDB76B Shades Mix
DarkMagenta #8B008B Shades Mix
DarkOliveGreen #556B2F Shades Mix
Darkorange #FF8C00 Shades Mix
DarkOrchid #9932CC Shades Mix
DarkRed #8B0000 Shades Mix
DarkSalmon #E9967A Shades Mix
DarkSeaGreen #8FBC8F Shades Mix
DarkSlateBlue #483D8B Shades Mix
DarkSlateGray #2F4F4F Shades Mix
DarkSlateGrey #2F4F4F Shades Mix
DarkTurquoise #00CED1 Shades Mix
DarkViolet #9400D3 Shades Mix
DeepPink #FF1493 Shades Mix
DeepSkyBlue #00BFFF Shades Mix
DimGray #696969 Shades Mix
DimGrey #696969 Shades Mix
DodgerBlue #1E90FF Shades Mix
FireBrick #B22222 Shades Mix
FloralWhite #FFFAF0 Shades Mix
ForestGreen #228B22 Shades Mix
Fuchsia #FF00FF Shades Mix
Gainsboro #DCDCDC Shades Mix
GhostWhite #F8F8FF Shades Mix
Gold #FFD700 Shades Mix
GoldenRod #DAA520 Shades Mix
Gray #808080 Shades Mix
Grey #808080 Shades Mix
Green #008000 Shades Mix
GreenYellow #ADFF2F Shades Mix
HoneyDew #F0FFF0 Shades Mix
HotPink #FF69B4 Shades Mix
IndianRed #CD5C5C Shades Mix
Indigo #4B0082 Shades Mix
Ivory #FFFFF0 Shades Mix
Khaki #F0E68C Shades Mix
Lavender #E6E6FA Shades Mix
LavenderBlush #FFF0F5 Shades Mix
LawnGreen #7CFC00 Shades Mix
LemonChiffon #FFFACD Shades Mix
LightBlue #ADD8E6 Shades Mix
LightCoral #F08080 Shades Mix
LightCyan #E0FFFF Shades Mix
LightGoldenRodYellow #FAFAD2 Shades Mix
LightGray #D3D3D3 Shades Mix
LightGrey #D3D3D3 Shades Mix
LightGreen #90EE90 Shades Mix
LightPink #FFB6C1 Shades Mix
LightSalmon #FFA07A Shades Mix
LightSeaGreen #20B2AA Shades Mix
LightSkyBlue #87CEFA Shades Mix
LightSlateGray #778899 Shades Mix
LightSlateGrey #778899 Shades Mix
LightSteelBlue #B0C4DE Shades Mix
LightYellow #FFFFE0 Shades Mix
Lime #00FF00 Shades Mix
LimeGreen #32CD32 Shades Mix
Linen #FAF0E6 Shades Mix
Magenta #FF00FF Shades Mix
Maroon #800000 Shades Mix
MediumAquaMarine #66CDAA Shades Mix
MediumBlue #0000CD Shades Mix
MediumOrchid #BA55D3 Shades Mix
MediumPurple #9370D8 Shades Mix
MediumSeaGreen #3CB371 Shades Mix
MediumSlateBlue #7B68EE Shades Mix
MediumSpringGreen #00FA9A Shades Mix
MediumTurquoise #48D1CC Shades Mix
MediumVioletRed #C71585 Shades Mix
MidnightBlue #191970 Shades Mix
MintCream #F5FFFA Shades Mix
MistyRose #FFE4E1 Shades Mix
Moccasin #FFE4B5 Shades Mix
NavajoWhite #FFDEAD Shades Mix
Navy #000080 Shades Mix
OldLace #FDF5E6 Shades Mix
Olive #808000 Shades Mix
OliveDrab #6B8E23 Shades Mix
Orange #FFA500 Shades Mix
OrangeRed #FF4500 Shades Mix
Orchid #DA70D6 Shades Mix
PaleGoldenRod #EEE8AA Shades Mix
PaleGreen #98FB98 Shades Mix
PaleTurquoise #AFEEEE Shades Mix
PaleVioletRed #D87093 Shades Mix
PapayaWhip #FFEFD5 Shades Mix
PeachPuff #FFDAB9 Shades Mix
Peru #CD853F Shades Mix
Pink #FFC0CB Shades Mix
Plum #DDA0DD Shades Mix
PowderBlue #B0E0E6 Shades Mix
Purple #800080 Shades Mix
Red #FF0000 Shades Mix
RosyBrown #BC8F8F Shades Mix
RoyalBlue #4169E1 Shades Mix
SaddleBrown #8B4513 Shades Mix
Salmon #FA8072 Shades Mix
SandyBrown #F4A460 Shades Mix
SeaGreen #2E8B57 Shades Mix
SeaShell #FFF5EE Shades Mix
Sienna #A0522D Shades Mix
Silver #C0C0C0 Shades Mix
SkyBlue #87CEEB Shades Mix
SlateBlue #6A5ACD Shades Mix
SlateGray #708090 Shades Mix
SlateGrey #708090 Shades Mix
Snow #FFFAFA Shades Mix
SpringGreen #00FF7F Shades Mix
SteelBlue #4682B4 Shades Mix
Tan #D2B48C Shades Mix
Teal #008080 Shades Mix
Thistle #D8BFD8 Shades Mix
Tomato #FF6347 Shades Mix
Turquoise #40E0D0 Shades Mix
Violet #EE82EE Shades Mix
Wheat #F5DEB3 Shades Mix
White #FFFFFF Shades Mix
WhiteSmoke #F5F5F5 Shades Mix
Yellow #FFFF00 Shades Mix
YellowGreen #9ACD32
Langganan:
Postingan (Atom)