HTML (HyperText Markup Language), the language of the web,\nis no longer the only language of the web. But it still is the primary language in which source\ncode of webpages is shared. Originally, HTML pages were always static: the only HTML source of a\nweb page was that was downloaded from a website. Nowadays, much HTML the is visualized in your\nweb browser, is generated on the fly with JavaScript. In fact, that is exactly what you will\nlearn to do in this course.
\n\nHTML has many dialects, and HTML5 is the upcoming next version. The features have become so\nextensive that we will not have capture half of them; instead, we will stick to the bare\nminimum needed. But even at an minimum, writing a web page with HTML code is basically writing\nsource code. The compiled version is the view of the webpage your web browser shows you. One\nimportant difference is that HTML is much more like a data model representation than it is like\ncomputational instructions. That is, rather than saying things like put(\"String\", xCoord, yCoord),\nwe define what is to be shown in in what order with general instructions. Well, in pure HTML\nthat is. Cascading Style Sheets (CSS) is quite outside the\nscope of this course.
A minimal HTML page looks like:
\n\n<html>\n <head>\n </head>\n <body>\n Hello world!\n </body>\n</html>\nWhen we think about this structure, we notice that it is not unlike the key-value maps we\ncovered earlier. For example, compare it to this\nJSON:
\n\n{\n \"html\": {\n \"head\":{},\n \"body\":{value:\"Hello world!\"}\n }\n}\nEven if we introduce HTML attributes:
\n\n<html>\n <head>\n </head>\n <body>\n <h1><a name=\"hello\">Hello world!</a></h1>\n </body>\n</html>\nThe JSON equivalent would be:
\n\n{\n \"html\": {\n \"head\":{},\n \"body\":{\n \"h1\":{\n \"a\":{\n attributes:{\"name\":\"hello\"},\n value:\"Hello world!\"\n }\n }\n }\n }\n}\nSo, while these are quite different languages than programming languages, we can clearly\nsee they have been made up by the same (computer science) people. But in my opinion, this\nis an advantage: because we only need to learn the underlying patterns and can then much\nmore easily switch between different language.
\n\nNow, returning to the HTML example, we introduce a bit of terminology. Let’s start with\nthe last example:
\n\n<h1><a name=\"hello\">Hello world!</a></h1>\nThis HTML code example shows the <h1> element which has one child element\n<a>. This child element has an attribute @name. Elements can contain string content,\nsuch as the <a> element has, and one or more child elements (and any combination of that).\nAttributes can only have string content. The HTML specification defines in detail which\nelements can be child elements of other elements. For example, the <head> element can\nonly be a child element of <html>. Similarly, each HTML element can only have specific\nattributes, though some attributes can be attached to any element.
There is plenty of documentation on the web, but there are also tools that can help us write\nHTML. For example, the http://validator.w3.org/. This website\ndetects errors in your HTML code, and is quite helpful if you are new to editing HTML, as\nwell as useful if you have a lot of HTML experience.
\n\nHTML elements you may find useful include the following:
\n\n<h1>, <h2>, …, <h5>: these are header and can be used to make sections<p>: indicates a paragraph<div id=\"someID\">: indicates a section of text. The content of any element with an id attribute can be replaced by any appropriate HTML content with JavaScript<a href=\"http://...\">some link</a>: this is used to make hyperlinks, href means hyperlink reference<a name=\"mark1\">some text</a>: this is used to create bookmarks. with <a href=\"#mark1\">jump to section Mark 1</a><script>: used to include JavaScript code in your HTML page<head>: this HTML blob contains metadata, a list of libraries to be loaded, but also JavaScript which is executed before the HTML <body> is processed<body>: this contains the HTML that is depicted in your browser windowKeep the HTML simple; the programming is more important.
\n\nExercise: below is part of the HTML/JavaScript source code\nbehind this app.\nPlease indicate which lines are HTML source code, and what is JavaScript.
\n\n<!DOCTYPE HTML PUBLIC\n \"-//W3C//DTD HTML 4.01 Transitional//EN\"\n \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<!--\n\nCopyright (c) 2013 Egon Willighagen <egon.willighagen@maastrichtuniversity.nl>\n\n Permission is hereby granted, free of charge, to any person\n obtaining a copy of this software and associated documentation\n files (the \"Software\"), to deal in the Software without\n restriction, including without limitation the rights to use,\n copy, modify, merge, publish, distribute, sublicense, and/or sell\n copies of the Software, and to permit persons to whom the\n Software is furnished to do so, subject to the following\n conditions:\n\n The above copyright notice and this permission notice shall be\n included in all copies or substantial portions of the Software.\n\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n OTHER DEALINGS IN THE SOFTWARE.\n\n-->\n<head>\n <title>OpenPHACTS Jasmine Spec Runner</title>\n <script src=\"lib/jquery-1.9.1.min.js\"></script>\n <script type=\"text/javascript\" src=\"lib/purl.js\"></script>\n\n <!-- include source files here... -->\n <script type=\"text/javascript\" src=\"src/OPS.js\"></script>\n <script type=\"text/javascript\" src=\"src/ConceptWikiSearch.js\"></script>\n\n <!-- setup -->\n <script type=\"text/javascript\">\n // get the app_key and app_id from the webpage call -->\nvar prmstr = window.location.search.substr(1);\nvar prmarr = prmstr.split (\"&\");\nvar params = {};\nfor ( var i = 0; i < prmarr.length; i++) {\n var tmparr = prmarr[i].split(\"=\");\n params[tmparr[0]] = tmparr[1];\n}\n </script>\n</head>\n\n<body>\n <h3>Output</h3>\n <h3>Search Results</h3>\n <p><div id=\"table\"></div></p>\n <h3>Compound Details</h3>\n <p><div id=\"details\"></div></p>\n <h3>JSON reply</h3>\n <p><div id=\"json\">Nothing yet</div></p>\n <script type=\"text/javascript\">\nvar searcher = new Openphacts.ConceptWikiSearch(\n \"https://beta.openphacts.org\",\n params[\"app_id\"], params[\"app_key\"]\n);\nvar callback = function(success, status, response){\n document.getElementById(\"json\").innerHTML = JSON.stringify(response);\n html = \"<table>\";\n for (var i=0; i<response.length; i++) {\n html += \"<tr>\";\n html += \"<td>\";\n html += \"Name: <span>\" +\n response[i].prefLabel +\n \"</span>\";\n html += \"</td>\";\n html += \"</tr>\";\n }\n html += \"</table>\";\n document.getElementById(\"table\").innerHTML = html;\n};\nsearcher.byTag(\n 'Aspirin', '5', '4',\n '07a84994-e464-4bbf-812a-a4b96fa3d197',\n callback\n);\n </script>\n</body>\n</html>\n