This an example showing the basics of using the HTML, CSS, JavaScript technology.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<head>
<link href="./css/literallycanvas.css" rel="stylesheet" />
</head>
<style> tag and put all of our definitions there to create the same effect. The only difference is the who gets executed last. The precedence is first to apply all the styles imported from a file (in the order listed), then apply the styles defined in the head or body in a style tag, and finally any style in a html tag that is an attribute.<head>
<link href="./css/literallycanvas.css" rel="stylesheet" />
<style>
p {font-weight:bold;}
</style>
</head>
This would apply the style sheet specified by the href attribute, and then make all the <p></p> elements bold after applying the style sheet.
If we wanted a single <p></p> tag to not be bolded we can specify that in the style attribute
<html>
<head>
<link href="./css/literallycanvas.css" rel="stylesheet" />
<style>
p {font-weight:bold;}
</style>
</head>
<body>
<p> A bolded paragraph </p>
<p stlye="font-weight:normal"> A normal weight paragraph </p>
</body>
</html>
Much like the css commands that describe the formatting and presentation specifics, scripts that execute when the page is loaded can be included in the <head> section of the html document. Also like css, the syntax is different from html.
For example, to load an external JavaScript program or library use the script tag, and use the src attribute to point to the file. It is common to see a cdn (content delivery network) url here, it is just pointing to the text file that has the code in it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
You may also define your own program in JavaScript in the head element. This will be executed before the rest of the page loads, so it is common to see the <script> tag in both the head (before loading) and the body (after loading) to optimize load speed.
<script>
// My JavaScript function
// output to the browser console
console.log('My desired output: You find it by looking at inspect element, or f12 in the browser');
// output to a window that pops up
alert('My desired output: just pops up in your face');
</script>
The script tag is actually legal in any part of the html document, and JavaScript has a few weird rules about moving function definitions and variable definitions around after executing them. This is known as Hoisting see for examples http://www.w3schools.com/js/js_hoisting.asp
JavaScript is a mix of syntaxes but resembles java in some ways. Its main purpose is to alter the html on the client side, as such its basic language components are centered around finding a tag, extracting content and putting it a changed version back in.
Since all browsers implement some subset of JavaScript or ECMA Script, there are an infinite number of libraries to make things easier. Two of the most important libraries are AJAX and JQUERY. AJAX is based on getting information from a server and updating a single piece of the html without reloading the entire page and JQUERY is about making the selection of tags easier and more consistent with the CSS syntax. Other JavaScript libraries that are popular are Bootstrap (about layout and buttons etc), React.js (some extra tools for making user interfaces), Angular (helps in web apps). These are all programmed in JavaScript and are typically executed in the head section by linking to the library through a cdn or serving the library file yourself.
All of the content that is actually displayed on your web browser is in the body. The body contains a lot of markup that determine how the content is displayed and when put together with all the set of up in the head gives you the final product.
There are several specifications of what the tags mean, and the current most advanced version is HTML 5. Unlike XHTML (HTML 4) the specification does not require HTML to be a proper subset of XML.
Two of the most important inclusions in HTML 5 are the <canvas></canvas> and <svg></svg> markups. These allow complex dynamic graphics in html.
The are 3 principal components to any of the markup tags in the head or body. This is the tag name, the attributes, and the tag content. HTML is comprised of specific tags (unlike xml), most with certain common attributes that have defined values and the content is changed to fit the purpose of the page. There are a few standard attributes like 'id' and 'class' that JavaScript and css use to select elements of pages.
<html>
<head>
<style>
.important-paragraph {color:red;font-size:22pt;}
</style>
</head>
<body>
<p id="first-paragraph" class="important-paragraph"> My First Paragraph </p>
<script>
var myP = document.getElementById("first-paragraph")
alert(myP.innerHTML);
</script>
</body>
</html>
<tag_name attribute='value'> content </tag_name>.
Example:<img src="./myImage.png" />
<h3 id="section-III"> My third level heading </h3>
CSS - Stuff inside of <style></style> that is in the form css_selector {css_attribute:css_value; css_attribute:css_value;}. Note this can be imported using the link tag or put in the html using the style attribute of the html tag.
Example:
<style>
#section-III {color:green;
font-weight:bold;
font-size:22pt}
</style>
or
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300' rel='stylesheet' type='text/css'>
or
<h3 id="section-III" style="color:green;font-weight:bold;font-size:22pt"> My third level heading </h3>
JavaScript (ECMA Script) - Stuff inside of the <script></script> tag. This can be loaded from an external file using the src attribute. Its main purpose is to change the content of html dynamically. The syntax looks like C with the naming conventions similar to java.
Example:
<script>
// A program that uses a loop to build a list and then outputs the list to an element chosen by its id
/* Also we could
use the block comment.
*/
// intialize an empty list
var myList=[];
// run a for loop and put in new values for list elements
for(i=0;i<=12;i++){
myList.push('My new line number '+ i);
}
// Flatten the list into a string (yes I know we could have just done a string in the first place)
var outString=""
for(i=0,i<=myList.length,i++){
outString=outString+myList[i]
}
document.getElementById('section-III').innerHTML=outString;
</script>
or
<script src="./myMagic.js"></script>
Every browser (Internet Explorer, Edge, Safari, Chrome, Firefox) acts as a complier, integrated development environment and complex graphic rendering program for all three syntaxes. The pieces of this that one sees most often is the end result of compiling and running all the JavaScript, rendering of the css and html. But hidden along with this is the "source code" and the new markup after running all of the code, and the displayed result.
There are a series of patterns that if you look at the source of most websites you will see over and over. In addition, there are a few tricks that are commonly applied.
Using the <div></div> tag to output the results of some complicated JavaScript function. This is usually accomplished by setting the id or class attributes of the tag and then using some function that overwrites them.
Using information in the <meta content="" name=""/> tags in <head></head> to input into functions
Talking with a server through forms. Forms are special tags that are meant as input to a server, they collect a set of inputs and send them to a server all at once, the page that they submit them to
Having so much JavaScript and css that the source of the page is unreadable.
The "this" pattern in JavaScript.
Open the file to see it for yourself
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata Tag Specifying the Character Set Used -->
<meta charset="UTF-8">
<!-- Metadata Tag For a Description and Author -->
<meta name="description" content="An HTML page that illustrates SVG, Ploting and Latex."/>
<meta name="author" content="Aric Sanders">
<!-- Tag to Add an Icon to the Browser Tab -->
<link rel='shortcut icon' type='image/ico' href='/favicon.ico'>
<!-- Title, It Will Appear in The Browser Tab -->
<title>SVG, Ploting and Latex</title>
<!-- Load a set of external javascript functions from the file found at
https://cdn.mathjax.org/mathjax/latest/MathJax.js, this is the library that does the latex magic -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<!-- Load a set of external javascript functions from the file found at
https://cdn.plot.ly/plotly-latest.min.js, this is the library that plots data using javascript to define
an svg interactive plot-->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- both of these libraries could be copied and stored in a different location. If they in the same folder and
referenced with src="./plotly-latest.min.js" in theory your browser does not even have to have an internet connection.
Sometimes this fails because of browser security settings. -->
<!-- css styles are defined inside of the css tag where everything has a different syntax-->
<style>
/* css comments only use the block comment form from c */
/* this statement chooses anything with the tag line and makes it red. Note
since these are part of an svg tag you need to look up the attributes that you can
change see for example https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line */
line {stroke:red};
/* this statement says any time you hover over a line make it thicker */
line:hover {stroke-width:5;}
/* this selector statement chooses anything with the class myGroupOfCircles, or when you hover over <p></p>
or <h1></h1> or an <a></a> tag */
.myGroupOfCircles, p:hover, h1:hover, a:hover {
background-color: yellow;
}
/* Example for the tag name circle */
circle {fill:blue;}
/* Example for the anything with class attribute set to myGroupOfCircles and when the mouse is hovering over it*/
.myGroupOfCircles:hover {fill:yellow;opacity:.3;}
/* Example for anything with the id attribute set to myParticularCircle */
#myParticularCircle {opacity:.5}
</style>
</head>
<body>
<h1>The SVG to make a few circles and lines between them</h1>
<!-- Display the SVG (an xml based vector graphics format)
if you want to make really elaborate svg's use Inkscape -->
<svg height="250" width="250">
<!-- Definitions of markers for lines-->
<defs>
<marker id='head' orient='auto' markerWidth='1' markerHeight='2'
refX='0.1' refY='2'>
<path d='M0,0 V4 L2,2 Z' fill='red' />
</marker>
</defs>
<!-- little g stands for group -->
<g>
<!-- This makes the line a hyperlink. Inside of the SVG you have to give the hyperlink a namespace so it knows
that you did not make up another tag with attribute href. This is why inside of the svg tag you need to
put xlink:href-->
<a xlink:href="http://example.com/link/">
<!-- the line tag works the way you would expect it to, it has a lot of optional attributes-->
<line x1="50" y1="50" x2="200" y2="50" stroke="black" stroke-width="3"/>
</a>
<line x1="50" y1="50" x2="200" y2="200" stroke="black" stroke-width="2"/>
<!-- The path tag is magic. It is effectively the turtle in LOGO with extra magic
, M stands for move, L stands for line
you can make curves, arcs etc. The d attribute is the key M50,50 is move to 50,50,
L100,100 is Line to 100,100. The syntax for curves and arcs gets a little more involved see
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d. for examples.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path-->
<path
id='arrow-line'
marker-mid='url(#head)'
marker-end='url(#head)'
stroke-width='3'
fill='none' stroke='black'
d='M50,50 L100,100 L200,200'/>
<!-- Circle just requires a center cx=,cy= and a radius which I specifiy in pixels like the size of the svg tag -->
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<!-- Circle with a hyperlink and some attributes defined locally -->
<a xlink:href="http://example.com/link/">
<circle class="myGroupOfCircles" cx="200" cy="50" r="20" stroke="black" stroke-width="3" fill="red" />
</a>
</g>
<!-- Circle with an id -->
<circle class="myGroupOfCircles" cx="200" cy="200" r="20" stroke="black" stroke-width="3" fill="red" id="myParticularCircle"/>
<!-- Here it is important to note that in order to use css to alter the svg, it has to be an svg tag. If
you use <img src="mySVG.svg" /> the svg will display properly (it gets converted to a raster image) but
the css and internal hyperlinks will not work. -->
</svg>
<!-- Now for the plot. In the source you only have this lowly div tag, but when the javascript at the end of the page
gets run it replaces the div tag with an svg. The javascript at the end of the page uses the functions and classes
defined by the <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> tag in the head.
You can see the resulting svg by using inspect element on your
browser usually F12 or right click-->
<h1>The plotly plot</h1>
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<!-- Now for the latex. When the script tag
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>
runs, it looks through the source, after the rest of the page is loaded, looking for any $$. If it finds them
it assumes it is Latex. see https://www.mathjax.org/ just because 3 syntaxes were not enough.
-->
<h1>The Mathjax latex</h1>
<p>When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</p>
<!-- By tradition, scripts in the body are usually put at the very bottom so that the page loads
and then the scripts run. Inside the script tag we change our syntax to JavaScript -->
<script>
// We define a variable that is a class in JavaScript,
// that has pretty much the same form as a dictionary in Python.
// Unlike CSS, we have both line and block comments.
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
// This format is dictated by the plotly.js library see https://plot.ly/
// There are a bunch of javascript plotting libraries I just choose plotly because it had a cdn and a python counterpart
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter'
};
// data is a list or array of traces
var data = [trace1, trace2];
// This class method lives someplace in the plotly-latest.min.js it
// uses the id on my div to replace it with the plot
Plotly.newPlot('myDiv', data);
</script>
</body>
</html>