Building iPhone Apps with HTML, CSS, and ... - Cdn.oreilly.com

More documents

Recommendations

Info

The HTML snippet that we’ve been looking at would normally reside in the body section of a complete HTML document. An HTML document is made up of two sections: the head and the body. The body is where you put all the content that you want users to see. The head contains information about the page, most of which is invisible to the user. The body and head are always wrapped in an html element. Example 1-3 shows the snippet in the context of a proper HTML document. For now the head section contains a title element, which tells the browser what text to display in the title bar of the window. Example 1-3. A proper HTML document My Awesome Page Hi there! Thanks for visiting my web page. I hope you like it. Pizza Beer Dogs Normally, when you are using your web browser you are viewing pages that are hosted on the Internet. However, browsers are perfectly good at displaying HTML documents that are on your local machine as well. To see what I mean, crack open a text editor and type up Example 1-3. When you are done, save it to your desktop as test.html and then open it with Safari by either dragging the file onto the Safari application icon or opening Safari and selecting File→Open File. Double-clicking test.html might work as well, but it could open in your text editor or another browser depending on your settings. Even if you aren’t running Mac OS X, you should use Safari when testing your iPhone web apps on a desktop web browser, because Safari is the closest desktop browser to the iPhone’s Mobile Safari. Safari for Windows is available from http://www.apple.com/safari/. Web Programming Crash Course | 5
Intro to CSS Some text editors are bad for authoring HTML. In particular, you want to avoid editors that support rich text editing, like Microsoft Word or TextEdit. These types of editors can save their files in formats other than plain text, which will break your HTML. If you are in the market for a good text editor, my favorite by far on the Mac is TextMate (http:// macromates.com/), and I hear that there is a clone version for Windows called E Text Editor (http://www.e-texteditor.com/). If free is your thing, you can download Text Wrangler for Mac (http://www.barebones.com/ products/TextWrangler/) or use the built-in Notepad on Windows. As you’ve seen, browsers render certain HTML elements with distinct styles (headings are large and bold, paragraphs are followed by a blank line, etc.). These styles are very basic and are primarily intended to help the reader understand the structure and meaning of the document. To go beyond this simple structure-based rendering, you can use Cascading Style Sheets (CSS). CSS is a stylesheet language that is used to define the visual presentation of an HTML document. You can use CSS to define simple things like the text color, size, and style (bold, italic, etc.), or complex things like page layout, gradients, opacity, and much more. Example 1-4 shows a CSS rule that instructs the browser to display any text in the body element using the color red. In this example, body is the selector (what is affected by the rule) and the curly braces enclose the declaration (the rule itself). The declaration includes a set of properties and their values. In this example, color is the property, and red is the value of the property. Example 1-4. A simple CSS rule body { color: red; } Property names are predefined in the CSS specification, which means that you can’t just make them up. Each property expects an appropriate value, and there can be lots of appropriate values and value formats for a given property. For example, you can specify colors with predefined keywords like red, or by using HTML color code notation. This uses a hexadecimal notation: three pairs of hexadecimal digits (0–F) representing (from left to right) Red, Green, and Blue values. Properties that expect measurements can accept values like 10px, 75%, and 1em. Example 1-5 shows some common declarations. (The color code shown for background-color corresponds to the CSS “gray”.) Example 1-5. Some common CSS declarations body { color: red; background-color: #808080; 6 | Chapter 1: Getting Started
Page 1 and 2: Free Sampler
Page 3 and 4: Building iPhone Apps with HTML, CSS
Page 5 and 6: What You’ve Learned 50 4. Animati
Page 8 and 9: CHAPTER 1 Getting Started Before we
Page 10 and 11: PhoneGap is the most notable—are
Page 14 and 15: } font-size: 12px; font-style: ital
Page 16 and 17: you are the person driving, in whic
Page 18: Back in the bad old days of web dev

Building iPhone Apps with HTML, CSS, and ... - Cdn.oreilly.com

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?