Information Technology Reference
In-Depth Information
Figure 5-9.
The Daily Droid at 859 x 480 resolution
Let's take a look at the code behind the Daily Droid to discover both how the page is
built, and how we determine if it should say “Smartphone” or “Tablet” edition. We'll go
over the HTML in the next section and then the CSS in the following section. Reading
through the following code, you should, based on the comments, get a sense of what
each section is doing.
The Daily Droid's Base HTML Code
We've broken the HTML it into several parts, so you can go through it in manageable
pieces. In the first part, shown in Listing 5-1, we create the initial HTML layout and
specify the two different headers.
Listing 5-1.
HTML Code for The Daily Droid part 1
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>The Daily Droid</title>
<meta name="description" content="An Android Responsive Web Design Demonstration.">
<meta name="author" content="Rocco Augusto">
<!-- Here we set the viewport so the device knows that this page is not one that can
scale/zoom -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;" />
<link href="style.css" rel="stylesheet" type="text/css" >
<!-- Here we pull in two fonts from the Google Font API database -->
<link href="http://fonts.googleapis.com/css?family=UnifrakturCook:bold" rel="stylesheet"
type="text/css">
<link href='
http://fonts.googleapis.com/css?family=Bevan'
rel='stylesheet'
type='text/css'>
