Learning aid for the Introduction to Web Development Using ArcGIS API for JavaScript (IWEB) instructor-led course.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- HTML Comment -->
<title>IWEB | Basic Web Page</title>
<!-- Load external style sheet -->
<link rel="stylesheet" href="https://js.arcgis.com/4.16/dijit/themes/claro/claro.css">
<!-- Internal styling -->
<style>
body {
font-family: "Tahoma","Helvetica",sans-serif;
}
</style>
</head>
<body class="claro">
<h1>Introduction to Web Development Using ArcGIS API for JavaScript</h1>
</body>
</html>
The document type declaration is always the first line in your HTML file. The browser uses it to determine the HTML version used in the page. <!DOCTYPE html> identifies this is an HTML5 page.
References:
Species the document as an HTML page for the browser. All content on the page appears between the opening and closing <html> tags
References:
The <head> element provides metadata about the document. Contents in the head section, other than the <title> element, are not displayed in the browser.
References:
Identifies for the browser the character encoding used in the page. UTF stands for Unicode Transformation Format and 8 indicates it uses 8-bit blocks to represent a character. <meta charset="utf-8"> is used in HTML5 pages. The character set declaration should be in the first 1024 characters loaded.
References:
The viewport meta element allows web developers to control how content is displayed on mobile devices. Due to smaller screen sizes on mobile devices, mobile browsers render web pages in a virtual window - the viewport - which is usually wider than the actual screen. Using viewport means the content isn't squeezed to fit on the device's screen. The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
Setting the viewport's initial-scale and maximum-scale to 1 and user-scaleable=no means that the page will display properly on the mobile device and prevents the user from zooming in or out to the page. This is a good thing because the same gestures are used to zoom in and out in any interactive map displayed on the device.
References:
You can comment your web page by placing text between '<!--' and '-->. Comments are not displayed in the browser.
Specifies the document's title. The document's title is shown in the browser window's title bar, on a page's tab, or the text when bookmarking a page.
References:
The <link> element is used to load external resources, in this case Dojo's claro stylesheet. External style sheets can be used in mulitple documents.
References:
The <style> element specifies the styling to use for the document or parts of the document. Using the <style> element limits the styling to the current document.
References:
The contents to display in the browser are placed in the <body> element.
References:
Thanks Rudy.
André Piasta | Senior Certified ArcGIS Instructor
Esri Canada | 150-2 Research Dr | Regina SK S4S 7H9
T 306-205-7344 | M 306-529-5576 | esri.ca<http://esri.ca/>