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
<SPAN class="doctype token"><!DOCTYPE html></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1,maximum-scale<SPAN class="punctuation token">=</SPAN>1,user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="comment token"><!-- HTML Comment --></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>IWEB | Basic Web Page<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="comment token"><!-- Load external style sheet --></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.16/dijit/themes/claro/claro.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="comment token"><!-- Internal styling --></SPAN>
<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="selector token">body</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Tahoma"</SPAN>,<SPAN class="string token">"Helvetica"</SPAN>,sans-serif<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>claro<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>h1</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Introduction to Web Development Using ArcGIS API for JavaScript<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>h1</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
<!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:
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:
