Learn how to facilitate HTML Preview Action Step and HTMLpreview object in scripts
by heavily using intelligent tags
and nice details.
- 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
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 scripts
body:: 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/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
[[head/js]]:: the global java script libraries ((like includes))
For the Content in the
[[body/content]]:: the content itself. This mostly should be filled with the build in
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 with