jquery-mobile/docs/content/content-html.html

<!DOCTYPE html> 
<html> 
	<head> 
	<title>jQuery Mobile Docs - Content formatting</title> 
	<link rel="stylesheet"  href="../../css/all" /> 
	<script type="text/javascript" src="../../js/all"></script>
	<script type="text/javascript" src="../docs/docs.js"></script>
	

</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>HTML Formatting</h1>
	</div><!-- /header -->

	<div data-role="content">

		<style type="text/css">
			table { width:100%; }
			table caption { text-align:left; font-weight:bold; }
			table thead th { border-bottom:1px solid #999; border-top:1px solid #999; }
			table th, td {  border-bottom:1px solid #ccc; padding:6px;} 
		</style>
		
		
		<p>Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. Here is what standard HTML markup looks like by default:</p>
		
		<h1>H1 Heading</h1>
		<h2>H2 Heading</h2>
		<h3>H3 Heading</h3>
		<h4>H4 Heading</h4>
		<h5>H5 Heading</h5>
		<h6>H1 Heading</h6>
		
		<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
		
		<blockquote>How about some blockquote action with a <cite>cite</cite></blockquote>
		
		<p>This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.</p>
		
		<ul>
			<li>Unordered list item 1</li>
			<li>Unordered list item 1</li>
			<li>Unordered list item 1</li>
		</ul>
		
		<ul>
			<li>Ordered list item 1</li>
			<li>Ordered list item 1</li>
			<li>Ordered list item 1</li>
		</ul>
		
		<dl title="Definition list">
			<dt>Definition term</dt>
			<dd>I'm the definition text</dd>
			<dt>Definition term</dt>
			<dd>I'm the definition text</dd>
		</dl>


		<table summary="This table lists all the JetBlue flights.">
		  <caption>Flight Schedule</caption>
		  <thead>
		    <tr>
		       <th scope="col">Flight:</th>  
		      <th scope="col">From:</th>  
		      <th scope="col">To:</th>  
		    </tr>
		  </thead>
		  <tfoot>
		    <tr>
		      <td colspan="5">Total: 3 flights</td>
		    </tr>
		  </tfoot>
		  <tbody>
		  <tr>
		    <th scope="row">JetBlue 983</th>
		    <td>Boston (BOS)</td>
		    <td>New York (JFK)</td>
		  </tr>
		  <tr>
		    <th scope="row">JetBlue 354</th>
		    <td>San Francisco (SFO)</td>
		    <td>Los Angeles (LAX)</td>
		  </tr>
		<tr>
		    <th scope="row">JetBlue 465</th>
		    <td>New York (JFK)</td>
		    <td>Portland (PDX)</td>
		  </tr>
		  </tbody>
		</table>
	
	
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>
new html formatting page 2010-10-13 18:11:23 +00:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<title>jQuery Mobile Docs - Content formatting</title>`
			`<link rel="stylesheet" href="../../css/all" />`
			`<script type="text/javascript" src="../../js/all"></script>`
			`<script type="text/javascript" src="../docs/docs.js"></script>`


			`</head>`
			`<body>`

			`<div data-role="page">`

			`<div data-role="header">`
			`<h1>HTML Formatting</h1>`
			`</div><!-- /header -->`

			`<div data-role="content">`

baar docs revisions 2010-10-13 20:41:58 +00:00			`<style type="text/css">`
			`table { width:100%; }`
			`table caption { text-align:left; font-weight:bold; }`
			`table thead th { border-bottom:1px solid #999; border-top:1px solid #999; }`
			`table th, td { border-bottom:1px solid #ccc; padding:6px;}`
			`</style>`
new html formatting page 2010-10-13 18:11:23 +00:00

			`<p>Our goal is to leave the main content area pretty much unstyled except for adding in a bit of padding and applying the theme font family and color. Here is what standard HTML markup looks like by default:</p>`

			`<h1>H1 Heading</h1>`
			`<h2>H2 Heading</h2>`
			`<h3>H3 Heading</h3>`
			`<h4>H4 Heading</h4>`
			`<h5>H5 Heading</h5>`
			`<h6>H1 Heading</h6>`

			`<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>`

			`<blockquote>How about some blockquote action with a <cite>cite</cite></blockquote>`

			`<p>This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content. This is another paragraph of text so you can see how HTML markup works in content.</p>`

			`<ul>`
			`<li>Unordered list item 1</li>`
			`<li>Unordered list item 1</li>`
			`<li>Unordered list item 1</li>`
			`</ul>`

			`<ul>`
			`<li>Ordered list item 1</li>`
			`<li>Ordered list item 1</li>`
			`<li>Ordered list item 1</li>`
			`</ul>`

			`<dl title="Definition list">`
			`<dt>Definition term</dt>`
			`<dd>I'm the definition text</dd>`
			`<dt>Definition term</dt>`
			`<dd>I'm the definition text</dd>`
			`</dl>`



			`<table summary="This table lists all the JetBlue flights.">`
			`<caption>Flight Schedule</caption>`
			`<thead>`
			`<tr>`
			`<th scope="col">Flight:</th>`
			`<th scope="col">From:</th>`
			`<th scope="col">To:</th>`
			`</tr>`
			`</thead>`
			`<tfoot>`
			`<tr>`
			`<td colspan="5">Total: 3 flights</td>`
			`</tr>`
			`</tfoot>`
			`<tbody>`
			`<tr>`
			`<th scope="row">JetBlue 983</th>`
			`<td>Boston (BOS)</td>`
			`<td>New York (JFK)</td>`
			`</tr>`
			`<tr>`
			`<th scope="row">JetBlue 354</th>`
			`<td>San Francisco (SFO)</td>`
			`<td>Los Angeles (LAX)</td>`
			`</tr>`
			`<tr>`
			`<th scope="row">JetBlue 465</th>`
			`<td>New York (JFK)</td>`
			`<td>Portland (PDX)</td>`
			`</tr>`
			`</tbody>`
			`</table>`


			`</div><!-- /content -->`
			`</div><!-- /page -->`

			`</body>`
			`</html>`