Web design & Internet tutorials
Search the site...
Home» Tutorials » Mobile Web Design » A complete HTML5 document ready for your content

A complete HTML5 document ready for your content

Posted by Janine Warner - June 16, 2012 - Mobile Web Design, Tutorials
0

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>

mobile web design

Leave a Reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • Google Analytics for Creative Professionals – new class on Pluralsight
  • Follow the cursor JavaScript sample
  • Part Four: Tools that let amateurs look like professionals
  • Part Three: Influence, Klout and finding what’s hot
  • Best social media tools part 2: Twitter, Instagram and Pinterest
  • How to add sound to a website
  • The advantages of a dynamic website, such as WordPress
  • How do you preserve Google rankings when you redesign a WordPress site ?
  • Browser Testing Tools
  • My updated Facebook Template works on small and large screens




© 2001 - 2020 All rights reserved. DigitalFamiliy.com | Terms & Conditions of Use | Privacy Policy

This is a demonstration store. No physical products will be shipped. Dismiss