Applied Programming/Internet Data

Overview

HTML

What is it?^[1]

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web. HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others. An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">". The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title>, <TITLE>, or in any other way.

HTML markup^[2]

Example:

 <!DOCTYPE html>
 <html>
   <head>
     <title>This is a title</title>
   </head>
   <body>
     <div>
         <p>Hello world!</p>
     </div>
   </body>
 </html>

Explanation:^[3]

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <div> element is used to group content and can be later styled by CSS
The <p> element defines a paragraph

XML

JSON

JSON (JavaScript Object Notation, pronounced /ˈdʒeɪsən/; also /ˈdʒeɪˌsɒn/) is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value). It is a very common data format, with a diverse range of applications, such as serving as a replacement for XML in AJAX systems.^[4]

JSON is a language-independent data format. It was derived from JavaScript, but many modern programming languages include code to generate and parse JSON-format data. The official Internet media type for JSON is application/json. JSON filenames use the extension .json.^[5]

JSON grew out of a need for stateless, real-time server-to-browser communication protocol without using browser plugins such as Flash or Java applets, the dominant methods used in the early 2000s.^[5] JSON is very similar to the JavaScript and is even derived from the programming language. This doesn't mean JSON is exclusive to the JavaScript language and many languages have importable libraries in order to process and parse JSON files.

The following example shows a possible JSON representation describing a person.^[5]

 {
   "firstName": "John",
   "lastName": "Smith",
   "isAlive": true,
   "age": 27,
   "address": {
     "streetAddress": "21 2nd Street",
     "city": "New York",
     "state": "NY",
     "postalCode": "10021-3100"
   },
   "phoneNumbers": [
     {
       "type": "home",
       "number": "212 555-1234"
     },
     {
       "type": "office",
       "number": "646 555-4567"
     }
   ],
   "children": [],
   "spouse": null
 }

Activities

See http://open-notify.org/Open-Notify-API/ISS-Location-Now/ and https://developers.google.com/maps/documentation/timezone/overview - Create a program that displays the current coordinates for the International Space Station. Using those coordinates, display the current time in that location.
See https://freegeoip.app/ and http://www.7timer.info/doc.php?lang=en#getting_forecast. Create a program the retrieve's the user's current location and displays the forecast in that location.
See https://agify.io/, https://nationalize.io/. Create a program that allows a user to enter their name and display their predicted age an nationality. Display the probability of each as well.

Key Terms

Application programming interface (API) - Allows two applications to communicate with one another to access data. Every action you take on your phone, like sending a direct message or checking the score of the baseball game, uses an API to access and deliver that information.^[6]

Attribute - A specification that defines a property of an object, element, or file. It may also refer to or set the specific value for a given instance of such.^[7]

Browser - Receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.^[8]

Document type declaration (DTD) - Informs the web browser about the type and version of HTML used in building the web document.^[9]

Element - An element is a logical document component that either begins with a start-tag and ends with a matching end-tag or consists only of an empty-element tag. The characters between the start-tag and end-tag, if any, are the element's content, and may contain markup, including other elements, which are called child elements.^[10]

HTML - HyperText Markup Language, or HTML(HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.^[8]

JSON - An open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value).^[11]

Markup language - A computer language that consists of easily understood keywords, names, or tags that help format the overall view of a page and the data it contains. Some examples of a markup language are BBC, HTML, SGML, and XML.^[12]

MIME - Permits users to send non ASCII-based text attachments, and non-text files (e.g., compressed file, sound file, graphic file, document file, or video file) in an e-mail message.^[13]

Node - A structure which may contain a value or a condition or represent an entirely separate data structure.^[14]

Query string - Part of a uniform resource locator (URL) that assigns values to specified parameters. A query string commonly includes fields added to a base URL by a Web browser or other client application, for example as part of an HTML form.^[15]

REST - (Representational State Transfer) is designed to take advantage of existing protocols. While REST can be used over nearly any protocol, it usually takes advantage of HTTP when used for Web APIs.^[16]

Serialization - The process of translating a data structure or object state into a format that can be stored (for example, in a file or memory data buffer) or transmitted (for example, across a computer network) and reconstructed later (possibly in a different computer environment).^[17]

Tag - A markup construct that begins with < and ends with >.^[10]

Tree - A hierarchical data structure comprised of nodes with a single element, known as the root, on the highest or topmost layer. Both HTML and XML documents are best represented as trees.^[14]

XML - Extensible Markup Language, a language that generalizes the marking up of documents, so users can define their own semantics.^[8]

References

[1] ttps://developer.mozilla.org/en-US/docs/Web/HTML

[2] HTML

[3] ttps://www.w3schools.com/html/html_intro.asp

[4] ttp://www.javascript-coder.com/tutorials/re-introduction-to-ajax.phtml

[:3-5] ttps://en.wikipedia.org/wiki/JSON

[6] ttps://learn.g2.com/api

[7] ttps://en.wikipedia.org/wiki/Attribute_(computing)

[:0-8] ttps://en.wikipedia.org/wiki/HTML

[9] ttps://www.bitdegree.org/learn/doctype-html

[:1-10] ttps://en.wikipedia.org/wiki/XML

[11] ttps://en.wikipedia.org/wiki/JSON

[12] ttps://www.computerhope.com/jargon/m/markup-language.htm

[13] ttps://www.computerhope.com/jargon/m/mime.htm

[:2-14] ttps://en.wikipedia.org/wiki/Tree_(data_structure)

[15] ttps://en.wikipedia.org/wiki/Query_string

[16] ttps://www.mulesoft.com/resources/api/what-is-rest-api-design

[17] ttps://en.wikipedia.org/wiki/Serialization

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]