eLearning: HTML5, CSS3 & Javascript

The Web development power site, w3schools.com puts the relationship between these three technologies or languages best: "HTML is the language for building web pages with CSS the language for styling web pages and finally, JavaScript as the language for programming web pages".

This site was built in Adobe Dreamweaver so HTML5, and Cascading Style Sheets (CSS3) and JavaScript are running the show. HTML5 and CSS3 work together, for example, in that the link href is pointing to main.css as the stylesheet to reference for font styles, colors, section formatting and padding in an effort to make the UI (user interface) more appealing and dynamic. A bit of JavaScript code just below this page title is dynamically delivering up today's date. You can see how that's done in the HTML5 section image.

 
HTML5 for JavaScript code

HTML5

HTML5 has emerged over Flash (the .swf or Adobe Flash file format used for multimedia, vector graphics & more) offering eLearning the flexibility of an open web standard (no plug-in required) to create courses (and webpages) with dynamic interactions, media, graphics, animation and more. HTML5 is an open web standard enabling multimedia content developed with it to be integrated into the website source code. HTML5 for eLearning makes a course responsive and compatible with different devices, browsers, OS, and online platforms, thus course deployment can be easier. The higher the course designer's comfort zone with HTML5 the more features or troubleshooting can be done when designing and deploying courses or client websites online. .

CSS3 link href for main

CSS3

In CSS it's the selectors that target specific HTML elements and allow us to "style" them. This keeps the files separate and keeps the actual "design" happening in a separate "document". In this case, main.css. The selectors are pretty amazing in the level of specificity they offer in styling a page. The class selectors allow the creation and styling of as many detailed sections as one wants to create on an HTML page. These are well supported in all browser types. There can be multiple classes on an HTML element.

 

Plus, JavaScript code can be used to manipulate classes. This CSS3 site is Awesome! Check out the css-tricks site here.

Dreamweaver Javascript code

JavaScript

This simple example uses the combination of HTML (on left) with a JavaScript toDateString function to generate the current day/date above.

 

In addition, Articulate Storyline is a tool that I use to create interactive eLearning courses. JavaScript code extends the power of the built-in tools in Storyline. For example, augmenting Storyline with JavaScript creates math functions that generate random numbers, round numbers up or down, work with dates and time, and more. String functions are also powerful in JavaScript. String functions are things like splitting text to count the number of words, searching and replacing text, or checking text for keywords. Storyline uses triggers to perform this functionality, but integrated JavaScript can do the same with less code.