GEOG 863
GIS Mashups for Geospatial Professionals

3.5.1 The HTML


After completing the previous lesson, you should recognize the <html>, <head> and <body> tags. You should also recognize that the <!DOCTYPE> directive declares that the document is written as HTML 5.

The <head> of the document contains two <meta> elements. The second of these is concerned with rendering the document in a user-friendly way across a variety of devices (part of the larger CSS topic of responsive web design). This is not critical for you to worry about now, but you may want to return to this topic if you are developing for mobile phones or tablets. The first meta element specifies that your document is encoded in the UTF-8 character set, one that supports all of the world's major languages. It's a good idea to include this line verbatim in all of your map pages. If you're an insomniac, you may want to read more about character encoding.

The <head> also contains the page’s title, links to two external stylesheets (your own main.css file and Esri’s main.css file), and two script elements (one referencing the Esri JS API and the other your local main.js file). We’ll discuss the CSS and JS source code in detail shortly.

Note: Have a look at the Default Stylesheets section of the SDK Guide page on Styling. For most of the term, we’ll be implementing “a basic map with the default widgets,” so you can reduce the amount of data that must be downloaded to the client device by linking to Esri’s view.css stylesheet rather than main.css.

Next in the HTML file comes the body of the document, in which the only thing you'll find is a div element. div elements are used to create divisions, or sections, in a document. In a web mapping context, a div is typically used as the container for the page's map. Note that this div is assigned an id (viewDiv).