The following code is featured in Chapter 5 of iPhone & iPad Web Design For Dummies
We offer you this code sample with the simple goal of saving you a little typing.
Don’t forget to change the title, copyright, and other content if you use this on your own web site!
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Add a Title for Your Site Here. Note: Best to limit this to about 70 characters.</title>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
<meta description=”Enter a desciption for your web site here. Note: Most search engines will only display 160 characters, maximum.” />
<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />
<link href=”css/main.css” rel=”stylesheet” type=”text/css” />
<!–iPad portrait –>
<link href=”css/ipadP.css” rel=”stylesheet” media=”only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)”>
<!–iPad landscape –>
<link href=”css/ipadL.css” rel=”stylesheet” media=”only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)”>
<!–iPhone portrait –>
<link href=”css/iphoneP.css” rel=”stylesheet” media=”only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)”>
<!–iPhone landscape –>
<link href=”css/iphoneL.css” rel=”stylesheet” media=”only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)”>
</head>
<body id=”home”>
<header>
<h1><a href=”index.html”>Jelly Rancher</a></h1>
<h2>Specializing in
<br>Jellyfish Aquariums</h2>
</header>
<article>
<header><h2>Main article headline</h2>
</header>
<details>A detail</details>
<section>
<p>content</p>
<aside>
<header>
<h3>Aside Header</h3>
</header>
<p>aside content</p>
</aside>
<p>more content…</p>
</section>
</article>
<nav>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”jelly-tales.html”>Jellyfish Tales</a></li>
<li><a href=”aquariums.html”>Order Custom Aquariums</a></li>
<li><a href=”Mark-Loos.html”>About Mark Loos</a>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</nav>
<footer> <small> Copyright 2011. All rights reserved. Contact Mark Loos.</small> </footer>
</body>
<script language=”javascript” type=”text/javascript”>window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
}
</script>
</html>