Embed Size (px)
Citation preview
Write text to the output with document.write()Write formatted text to the output with document.write()Return the number of anchors in a documentReturn the innerHTML of the first anchor in a documentReturn the number of forms in a documentReturn the name of the first form in a documentReturn the number of images in a documentReturn the id of the first image in a documentReturn the number of links in a documentReturn the id of the first link in a documentReturn all name/value pairs of cookies in a documentReturn the domain name of the server that loaded the documentReturn the date and time the document was last modifiedReturn the URL of the document that loaded the current documentReturn the title of a documentReturn the full URL of a documentOpen an output stream, and add some textOpen an output stream in a new window, and add some textDifference between write() and writeln()Alert innerHTML of an element with a specific IDAlert the number of elements with a specific nameAlert the number of elements with a specific tagname
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Results
Hello World!
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>
Results
Hello World!
<html>
<body>
<a name="html">HTML Tutorial</a><br />
<a name="css">CSS Tutorial</a><br />
<a name="xml">XML Tutorial</a><br />
<a href="/js/">JavaScript Tutorial</a>
<p>Number of anchors:
<script type="text/javascript">
document.write(document.anchors.length);
</script></p>
</body>
</html>
Result
HTML TutorialCSS TutorialXML TutorialJavaScript Tutorial
Number of anchors: 3
<html>
<body>
<a name="html">HTML Tutorial</a><br />
<a name="css">CSS Tutorial</a><br />
<a name="xml">XML Tutorial</a>
<p>innerHTML of the first anchor:
<script type="text/javascript">
document.write(document.anchors[0].innerHTML);
</script>
</p>
</body>
</html>
Result
HTML TutorialCSS TutorialXML Tutorial
innerHTML of the first anchor: HTML Tutorial
<html>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form></form>
<p>Number of forms:
<script type="text/javascript">
document.write(document.forms.length);
</script></p>
</body>
</html>
Result
Number of forms: 3
<html>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form></form>
<p>Name of first form:
<script type="text/javascript">
document.write(document.forms[0].name);
</script></p>
</body>
</html>
Result
Name of first form: Form1
<html>
<body>
<img border="0" src="klematis.jpg" width="150" height="113" />
<img border="0" src="klematis2.jpg" width="152" height="128" />
<p>Number of images:
<script type="text/javascript">
document.write(document.images.length);
</script></p>
</body>
</html>
Result
Number of images: 2
<html>
<body>
<img id="klematis lilac" border="0" src="klematis.jpg" width="150" height="113" />
<img id="klematis pink" border="0" src="klematis2.jpg" width="152" height="128" />
<p>Id of first image:
<script type="text/javascript">
document.write(document.images[0].id);
</script></p>
</body>
</html>
Result
Id of first image: klematis lilac
<html>
<body>
<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>
<p><a href="/js/">JavaScript Tutorial</a></p>
<p>Number of areas/links:
<script type="text/javascript">
document.write(document.links.length);
</script></p>
</body>
</html>
Results
JavaScript Tutorial
Number of areas/links: 4
<html>
<body>
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area id="sun" shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area id="mercury" shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area id="venus" shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
<p><a id="javascript" href="/js/">JavaScript Tutorial</a></p>
<p>Id of first area/link:
<script type="text/javascript">
document.write(document.links[0].id);
</script></p>
</body>
</html>
Results
JavaScript Tutorial
Id of first area/link: sun
<html>
<body>
Cookies associated with this document:
<script type="text/javascript">
document.write(document.cookie);
</script>
</body>
</html>
Results
Cookies associated with this document: __utma=119627022.1114116595.1300208828.1300208828.1300212591.2; __utmz=119627022.1300208828.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); ASPSESSIONIDACRSCCCQ=APJEOGMDENEKLKBDCMLPLKCA;
__utmb=119627022.40.10.1300212591; __utmc=119627022
Result:
<html>
<body>
The domain name for the server that loaded this document:
<script type="text/javascript">
document.write(document.domain);
</script>
</body>
</html>
Result
The domain name for the server that loaded this document: www.w3schools.com
<html>
<body>
This document was last modified on:
<script type="text/javascript">
document.write(document.lastModified);
</script>
</body>
</html>
Result
This document was last modified on: 03/16/2011 00:01:49
<html>
<body>
The referrer of this document is:
<script type="text/javascript">
document.write(document.referrer);
</script>
</body>
</html>
Result
The referrer of this document is: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_referrer
<html>
<head>
<title>My title</title>
</head>
<body>
The title of the document is:
<script type="text/javascript">
document.write(document.title);
</script>
</body>
</html>
Result
The title of the document is: My title
<html>
<body>
The full URL of this document is:
<script type="text/javascript">
document.write(document.URL);
</script>
</body>
</html>
Result
The full URL of this document is: http://www.w3schools.com/jsref/tryit_view.asp?filename=tryjsref_doc_url
<html>
<head>
<script type="text/javascript">
function createDoc()
{
var doc=document.open("text/html","replace");
var txt="<html><body>Learning about the HTML DOM is fun!</body></html>";
doc.write(txt);
doc.close();
}
</script>
</head>
<body>
<input type="button" value="New document" onclick="createDoc()" />
</body>
</html>
Result
<html>
<body>
<script type="text/javascript">
var w=window.open();
w.document.open();
w.document.write("<h1>Hello World!</h1>");
w.document.close();
</script>
</body>
</html>
Result:
<html>
<body>
<p>Note that write() does NOT add a new line after each statement:</p>
<pre>
<script type="text/javascript">
document.write("Hello World!");
document.write("Have a nice day!");
</script>
</pre>
<p>Note that writeln() add a new line after each statement:</p>
<pre>
<script type="text/javascript">
document.writeln("Hello World!");
document.writeln("Have a nice day!");
</script>
</pre>
</body>
</html>
Result
Note that write() does NOT add a new line after each statement:
Hello World!Have a nice day!
Note that writeln() add a new line after each statement:
Hello World!Have a nice day!
<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
</body>
</html>
Result
Click me!
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("x");
alert(x.length);
}
</script>
</head>
<body>
<input name="x" type="text" size="20" /><br />
<input name="x" type="text" size="20" /><br />
<input name="x" type="text" size="20" /><br /><br />
<input type="button" onclick="getElements()" value="How many elements named 'x'?" />
</body>
</html>
Result
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<input type="text" size="20" /><br />
<input type="text" size="20" /><br />
<input type="text" size="20" /><br /><br />
<input type="button" onclick="getElements()" value="How many input elements?" />
</body>
</html>
Result
Anchor Object
Return and set the value of the charset attribute of a linkReturn the value of the href attribute of a linkReturn and set the value of the hreflang attribute of a linkReturn the name of an anchorReturn the relationship between the current document and the linked documentChange the target attribute of a linkReturn the value of the type attribute of a link
<html>
<body>
<a id="w3s" charset="ISO-8859-1" href="http://www.w3schools.com/">W3Schools</a><br />
<script type="text/javascript">
document.write("Return charset of link: ");
document.write(document.getElementById('w3s').charset);
document.write("<br /><br />");
</script>
<a id="google" href="http://www.google.com/">Google</a><br />
<script type="text/javascript">
document.getElementById('google').charset="utf-8";
document.write("Set charset of link to: ");
document.write(document.getElementById('google').charset);
</script>
</body>
</html>
Result
W3SchoolsReturn charset of link: ISO-8859-1
GoogleSet charset of link to: utf-
<html>
<body>
<p><a id="w3s" href="http://www.w3schools.com/">W3Schools</a></p>
<script type="text/javascript">
document.write("Return href of link: ");
document.write(document.getElementById('w3s').href);
</script>
</body>
</html>
Result
W3Schools
Return href of link: http://www.w3schools.co
<html>
<body>
<a id="w3s" hreflang="en-us" href="http://www.w3schools.com/">W3Schools</a><br />
<script type="text/javascript">
document.write("Return hreflang of link: ");
document.write(document.getElementById('w3s').hreflang);
document.write("<br /><br />");
</script>
<a id="google" href="http://www.google.no/">Google</a><br />
<script type="text/javascript">
document.getElementById('google').hreflang="no";
document.write("Set hreflang of link to: ");
document.write(document.getElementById('google').hreflang);
</script>
</body>
</html>
Result
W3SchoolsReturn hreflang of link: en-us
GoogleSet hreflang of link to: no
<html>
<body>
<p><a href="#C6">See also Chapter 6</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2><a id="c6" name="C6">Chapter 6</a></h2>
<p>This chapter explains ba bla bla</p>
<script type="text/javascript">
document.write("Return name of anchor: ");
document.write(document.getElementById("c6").name);
</script>
</body>
</html>
Result
See also Chapter 6
Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
Chapter 4
This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
Chapter 6
This chapter explains ba bla bla
Return name of anchor: C6
<body>
<p><a id="func" rel="friend" href="http://www.functravel.com/">Cheap Flights</a></p>
<script type="text/javascript">
document.write("The relationship between the current document and the linked document: ");
document.write(document.getElementById("func").rel);
</script>
</body>
</html>
Result
Cheap Flights
The relationship between the current document and the linked document: friend
<html>
<head>
<script type="text/javascript">
function changeTarget()
{
document.getElementById('w3s').target="_blank";
}
</script>
</head>
<body>
<a id="w3s" href="http://www.w3schools.com">Visit W3Schools</a>
<br /><br />
<input type="button" onclick="changeTarget()" value="Change target" />
<p>Try the link before and after you have pressed the button!</p>
</body>
</html>
Result
Visit W3Schools
Try the link before and after you have pressed the button!
<html>
<body>
<p><a id="w3s" type="text/html" href="http://www.w3schools.com">W3Schools</a></p>
<script type="text/javascript">
document.write("Return value of type attribute in link: ");
document.write(document.getElementById("w3s").type);
</script>
</body>
</html>
Result
W3Schools
Return value of type attribute in link: text/html
Button Object
Set a button to disabled when clickedReturn the name of a buttonReturn the type of a buttonReturn the text displayed on a buttonReturn the id of the form a button belongs to
<html>
<head>
<title>DELETED</title>
</head>
<body>
</body>
</html>
Result
<html>
<body>
<button id="button1" name="button1">Click Me!</button>
<p>The name of the button is:
<script type="text/javascript">
document.write(document.getElementById("button1").name);
</script></p>
</body>
</html>
Result
The name of the button is: button1
<html>
<head>
<script type="text/javascript">
function alertType()
{
alert(document.getElementById("myButton").type)
}
</script>
</head>
<body>
<button id="myButton" type="button" onclick="alertType()">Click Me!</button>
</body>
</html>
Reslt
<html>
<body>
<input type="button" id="button1" value="Click Me!" />
<p>The text on the button is:
<script type="text/javascript">
document.write(document.getElementById("button1").value);
</script></p>
</body>
</html>
Result
The text on the button is: Click Me!
<html>
<body>
<form id="form1">
<button id="button1" type="button">Click me!</button>
</form>
<p>The id of the form containing the button is:
<script type="text/javascript">
document.write(document.getElementById("button1").form.id);
</script></p>
</body>
</html>
Result
The id of the form containing the button is: form1
Base Object
Return the base URL for all relative URLs on a pageReturn the base target for all links on a page
<html>
<head>
<base id="htmldom" href="http://www.w3schools.com/jsref/" />
</head>
<body>
<p>Base URL is:
<script type="text/javascript">
document.write(document.getElementById("htmldom").href);
</script>
</p>
</body>
</html>
Result
Base URL is: http://www.w3schools.com/jsref/
<html>
<head>
<base id="htmldom" target="_blank" href="http://www.w3schools.com/jsref/" />
</head>
<body>
<p>Base target for all links is:
<script type="text/javascript">
document.write(document.getElementById("htmldom").target);
</script>
</p>
</body>
</html>
Result
Base target for all links is: _blank
Option and Select Objects
Disable and enable a dropdown listGet the id of the form that contains the dropdown listGet the number of options in the dropdown listTurn the dropdown list into a multiline listSelect multiple options in a dropdown listAlert the selected option in a dropdown listAlert the index of the selected option in a dropdown listChange the text of the selected optionRemove options from a dropdown list
<html>
<head>
<script type="text/javascript">
function disable()
{
document.getElementById("mySelect").disabled=true;
}
function enable()
{
document.getElementById("mySelect").disabled=false;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<br /><br />
<input type="button" onclick="disable()" value="Disable list">
<input type="button" onclick="enable()" value="Enable list">
</form>
</body>
</html>
Result
<html>
<body>
<form id="myForm">
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</form>
<p>The id of the form is:
<script type="text/javascript">
document.write(document.getElementById("mySelect").form.id);
</script>
</p>
</body>
</html>
Result
The id of the form is: myForm
<html>
<head>
<script type="text/javascript">
function getLength()
{
alert(document.getElementById("mySelect").length);
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="getLength()" value="How many options in the list?">
</form>
</body>
</html>
Result
How many option in the list
<html>
<head>
<script type="text/javascript">
function changeSize()
{
document.getElementById("mySelect").size=4;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
<option>Melon</option>
</select>
<input type="button" onclick="changeSize()" value="Change size">
</form>
</body>
</html>
Result
Table, TableHeader, TableRow, TableData Objects
Change the width of a table borderChange the cellPadding and cellSpacing of a tableSpecify frames of a tableSpecify rules for a tableInnerHTML of a rowInnerHTML of a cellCreate a caption for a tableDelete rows in a tableAdd rows to a tableAdd cells to a table rowAlign the cell content in a table rowVertical align the cell content in a table rowAlign the cell content in a single cellVertical align the cell content in a single cellChange the content of a table cellChange the colspan of a table row
<html>
<head>
<script type="text/javascript">
function changeBorder()
{
document.getElementById('myTable').border="10";
}
</script>
</head>
<body>
<table border="1" id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="changeBorder()" value="Change Border">
</body>
</html>
Result
<html>
<head>
<script type="text/javascript">
function padding()
{
document.getElementById('myTable').cellPadding="15";
}
function spacing()
{
document.getElementById('myTable').cellSpacing="15";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="padding()" value="Change Cellpadding">
<input type="button" onclick="spacing()" value="Change Cellspacing">
</body>
</html>
Result
Change cell pending Change cell pending
<html>
<head>
<script type="text/javascript">
function aboveFrames()
{
document.getElementById('myTable').frame="above";
}
function belowFrames()
{
document.getElementById('myTable').frame="below";
}
</script>
</head>
<body>
<table id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="aboveFrames()" value="Show above frames">
<input type="button" onclick="belowFrames()" value="Show below frames">
</body>
</html>
Result
100 200
300 400
Show above frames Show below frames
<html>
<head>
<script type="text/javascript">
function rowRules()
{
document.getElementById('myTable').rules="rows";
}
function colRules()
{
document.getElementById('myTable').rules="cols";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="rowRules()" value="Show only row borders">
<input type="button" onclick="colRules()" value="Show only col borders">
</body>
</html>
Result
Show only row board Show only cell board
<html>
<head>
<script type="text/javascript">
function showRow()
{
alert(document.getElementById('myTable').rows[0].innerHTML);
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="showRow()" value="Show innerHTML of first row">
</body>
</html>
Result
Show inner HTML of first row
HTML Tags<!--><!DOCTYPE><a><abbr><acronym><address><applet><area><b><base><basefont><bdo><big><blockquote><body><br><button><caption><center><cite><code><col><colgroup><dd><del><dfn><dir><div><dl><dt><em><fieldset><font><form><frame><frameset><head><h1> - <h6><hr><html><i><iframe><img><input>
<ins><kbd><label><legend><li><link><map><menu><meta><noframes><noscript><object><ol><optgroup><option><p><param><pre><q><s><samp><script><select><small><span><strike><strong><style><sub><sup><table><tbody><td><textarea><tfoot><th><thead><title><tr><tt><u><ul><var>
Iframe - Set Height and Width
The height and width attributes are used to specify the height and width of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
<html>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Result
Some older browsers don't support iframes.
If they don't, the iframe will not be visible.
Iframe - Remove the Border
The frameborder attribute specifies whether or not to display a border around the iframe.
Set the attribute value to "0" to remove the border:
<html>
<body>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Result
Some older browsers don't support iframes.
If they don't, the iframe will not be visible.
Use iframe as a Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of a link must refer to the name attribute of the iframe:
<html>
<body>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
<p><b>Note:</b> Because the target of the link matches the name of the iframe, the link will open in the iframe.</p>
</body>
</html>
Result
W3Schools.com
Note: Because the target of the link matches the name of the iframe, the link will open in the iframe.
Example
Norwegian Mountain Trip
Try it yourself »
Try it Yourself - Examples
<html>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
</body>
</html>
Result
Norwegian Mountain Trip
HTML Images - The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:
<img src="url" alt="some_text"/>
The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
HTML Images - The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" />
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
HTML Images - Set Height and Width of an Image
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
HTML Frames
A vertical framesetA horizontal framesetHow to use the <noframes> tagHow to mix a frameset in rows and columnsFrameset with noresize="noresize"How to create a navigation frameInline frame (a frame inside an HTML page)Jump to a specified section within a frameJump to a specified section with frame navigation
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
Result
<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="25%,50%,25%">
<frame 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>
<html>
<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>
</html>
Result
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm" />
<frame noresize="noresize" src="frame_b.htm" />
</frameset>
</html>
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm" />
<frame src="frame_a.htm" name="showframe" />
</frameset>
</html>
result
<html>
<frameset cols="20%,80%">
<frame src="frame_a.htm" />
<frame src="link.htm#C10" />
</frameset>
</html>
Rresulis
Chapter 1
FRAME1 This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
Chapter 4
This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
Chapter 6
This chapter explains ba bla bla
Chapter 7
This chapter explains ba bla bla
Chapter 8
This chapter explains ba bla bla
Chapter 9
This chapter explains ba bla bla
Chapter 10
This chapter explains ba bla bla
Chapter 11
This chapter explains ba bla bla
Chapter 12
This chapter explains ba bla bla
Chapter 13
This chapter explains ba bla bla
Chapter 14
This chapter explains ba bla bla
Chapter 15
This chapter explains ba bla bla
Chapter 16
This chapter explains ba bla bla
Chapter 17
This chapter explains ba bla bla
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>
</html>
![[PyConTW 2013] Write Sublime Text 2 Packages with Python](https://img.dokumen.tips/doc/110x75/554f5851b4c905b9508b520e/pycontw-2013-write-sublime-text-2-packages-with-python.jpg)
