IWEB Notes - Basic web page described

1 Kudo

Learning aid for the Introduction to Web Development Using ArcGIS API for JavaScript (IWEB) instructor-led course.

General References:

HTML document:

Tutorials:

> Introduction to HTML

> Introduction to CSS

w3schools.com

> Learn HTML

> Learn CSS

Basic web page

<!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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<!DOCTYPE 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:

<html>...</html>

Species the document as an HTML page for the browser. All content on the page appears between the opening and closing <html> tags

References:

<head>...</head>

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:

<meta charset="utf-8">

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:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

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 '. Comments are not displayed in the browser.

<title>IWEB | Basic Web Page</title>

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:

<link rel="stylesheet" href="https://js.arcgis.com/4.16/dijit/themes/claro/claro.css ">

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:

<style>...</style>

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:

<body>...</body>

The contents to display in the browser are placed in the <body> element.

References:

AndréPiasta · ‎02-24-2017

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/>