IWEB Notes - Basic web page described

Document created by Rprosser-esristaff Employee on Feb 7, 2017Last modified by Rprosser-esristaff Employee on Aug 31, 2020
Version 4Show Document
  • View in full screen mode

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

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

 

<!-- HTML comment -->

You can comment your web page by placing text between '<!--' and '-->. 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:

4 people found this helpful

Attachments

    Outcomes