Abstract:
Learn how to facilitate HTML Preview Action Step and HTMLpreview object in scripts
by heavily using intelligent tags
and nice details.
Motivation
- Learn and understand what a HTML document with CSS (Style) and JS (Code) needs.
- Show usage of some advanced features out of the box
- Using multiple CSS and JS resources
- Keeping the preview text simple and easy to maintain
Setup
First Template
I created a structured template to be filled with the getTemplateTags() function. These must be defined before calling the preview with this content.
<! DOCTYPE html>
<html dir="auto">
<head>
<title>[[title]]</title>
[[head/meta]]
[[head/css]]
[[head/js]]
</head>
<body>
[[body/content]]
</body>
</html>
The content of the templates are grouped in the to sections:
head
:: metadata, styles and scriptsbody
:: only content, structure and important styling
I do not discuss good HTML guide lines here. Only note that CSS should be placed in the header!
For the Definition in the <head>
[[head/meta]]
:: add meta data to your document ((Note: this might only start making sense if you safe your document. The documents meta data should/could be placed here))[[head/css]]
:: the css files or css definitions in<style>
tags.[[head/js]]
:: the global java script libraries ((like includes))
For the Content in the <body>
[[body/js/load]]
:: ((removed))[[body/content]]
:: the content itself. This mostly should be filled with the build in[[body]]
template[[body/js/show]]
:: ((removed))
Note: Edit: 4. and 6. will be abandoned …
@chrillek lead me on a Google suggestion not to use Java Script in the body
I will try if we could do that by facilitating the EventListeners withonload