Contents
Step One
Step Two
Step Three
Notes
An HTML page's nesting parts are tagged with keywords bracketed by "<" and ">" symbols. Lengthy parts are enclosed in matching tags with "/" distinguishing the closing tag such as "<head>" and "</head>." The basic minimum for HTML page parts is shown below. Words in red are comments telling what is included in real HTML page. />
Document type goes here.
<html more document definition goes here.>
<head>
Page-wide info goes here including
page title, character set, and special tags.
</head>
<body>
Section headers, paragraph text.
pictures, etc. go here.
</body>
</html>
Below is a typical HTML page with some of the parts filled in. These parts will differ from site to site and your HTML editor will take care of some of these details. Again, red is comments, not part of the HTML.
Document type.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Expanded html tag starts HTML.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> Start of Head section.
Character set definition (Western European).
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
Title for top of browser window.
<title>Our Antique Mall</title>
Link to site-wide style sheet.
<link rel="stylesheet" type="text/css" href="cdb.css" />
</head> End of Head section.
<body>Start of Body section.
Some body text.
<h1>Downstairs</h1>
<p> This is a view of the first floor booths.</p>
</body> End of Body section.
<html> End of HTML.
This step shows just the Head section from Step Two but with the viewport meta tag added just below the opening <head> tag. Copy this exact line (from the < to the > inclusive) to a similar position in the Head section of every mobile HTML page.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Our Antique Mall</title>
<link rel="stylesheet" type="text/css" href="cdb.css" />
</head>
There are variations of the viewport meta tag. Many designers drop the "user-scalable=no" part, and some mobile browsers ignore it. The one essential part is "width=device-width" which performs the magic. A good but quite technical book is Beginning Smartphone Web Development by Gail Rahn Frederick and Rajesh Lal. Viewport meta tags are discussed on pages 188-189. The are many on-line discussions that can be googled.
— John P Reid