How to create HTML5 documents in the new digital information age...

It is unthinkable that we still have to fight Microsoft's document format monopoly to get our way.January 20, 2020

How to set yourself free from vendor-lockin... { Updated - 2020-02-20 }

In these times that we live in, when the online world-wide web merges with our own daily activities, everybody is being encouraged to learn some aspect of scripting, not to be confused with coding, it is important to start with the basics.

Before you start complaining that you don't want to use HTML5 for your documents or you don't know any other good reason as to why you should be using it as a document format, please read one of my more interesting articles on why you should be "Using HTML5 as a document format". You might get to be a bit smarter if you do!

Just FYI:

Coding is the creation of algorithms that perform calculations on data that is compiled into an executable program to run on a specific platform, while scripting is the writing of a set of instructions on how to present and/or retrieve information to or from a monitor display.

( This might upset some people, but I don't care, this is what I know is true! )

Since everybody interacts with the web on a constant basis, it is important to actually know what lays below all those web pages and web apps. So I am going to merge them both, showing you how to create HTML5 documents by adding some HTML and CSS scripting to help understand what each element does and how it can be used in your documents.

First off, there is the main HTML(Hypertext markup language) framework, add some styling to it, that would be the CSS(Cascading Style Sheet) language, and you have the basis of creating a very rich document content experience.

To make character attribute changes to your document text when using our editors, some of the changes require that you either select the text before clicking on the menu options e.g. Font Size, Font Colour, text background colour etc. or simply make your selection as you choose e.g. Heading Size, paragraph alignment, indentation without selecting your text.

It is mostly a trial by error user-interface action, but you will learn each function or feature quickly as you grow your experience with html scripting and css styling while using our editors.

In HTML, your most basic elements in any document that you create would be:

• Font Size - 1 .. 7
• Line break - <br>
• Headers - <h1..h6> </h1..h6>
• Standard hyperlink - <a href="url link">Click Here</a>
• Paragraph - <p align="left / center / right / justify ">Paragraph </p>
• Image - <img align="left / middle / right" src="url link" width="128" height="128">

If you have already used one of our online word processors or office suite, you will know just how easy it is to start creating and editing your HTML5 documents. It is almost exactly the same as any other desktop editor, with some slight differences.

Creating Physical or Digital Documents

With the advancements in web technology and browser functionality, it is now possible to choose between whether you want to create a document that is only for digital displays or for physical paper. It is no longer necessary to format information to only fit actual paper sized documents!

With our latest updates to Fandango and Blue-Velvet editors, you are now able to select the type of document you want to create. With digital documents, you only need to decide how the document should be viewed on-screen, the options being normal screen readable width, medium, or large width, depending on the information being presented inside the document. The same goes for physical paper documents.

As can be seen in the image, either a digital page or an actual paper sized document can be created. The selection range from a responsive screen based document or an A4 or Letter sized paper document with various margins may be selected from the menu options.

Simply make your selection and start creating your document. The margins for paper based documents are preset, so you don't have to worry about it. Set you printer margins to zero or none to make your document fit properly.

Some of the differences in the Headings and font size selection options...

Headings are categorized like below:

• Heading One - <H1>

• Heading Two - <H2>

• Heading Three - <H3>

• Heading Four - <H4>

• Heading Five - <H5>

• Subtitles - <H6>

When it comes to font size, your options look like this:

Desktop paper based font point size compared to web based font sizes:

•  8 - Font Size 1 - Very Small
• 10 - Font Size 2 - A Bit Small
• 12 - Font Size 3 - Normal or Default size, usually 16px
• 14 - Font Size 4 - Medium Large
• 18 - Font Size 5 - Big / Large
• 24 - Font Size 6 - Very Big / Large
• 36 - Font Size 7 - Maximum Size

There are 13 System fonts and 13 Google Web Fonts Available for document creation.

To enable the thirteen Google Web fonts for the current document, simply open the "Formatting" dropdown menu and click or press on the option at the bottom of the menu.

We added the Google web fonts to enhance document formatting compatibility and cross-platform exhange. You may now create documents on any operating system e.g. Windows, Mac OS-X, Linux, Android, while using any browser for consistant and reliable document formatting, exchangeability, and viewing.

The typical structure of a HTML5 document or web page:

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto:400:700&display=swap');
#PageDiv * {font-family:Roboto,Arial,Helvetica, sans-serif;}
</style>
<body>
<div id="PageDiv">
<h1>This is your main heading</h1>
<p>This is a paragraph. Place all your text and content here.</p>
</div>
</body>
</html>

To add some colour or font options to your content, there is CSS styling...

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Roboto:400:700&display=swap');
#PageDiv * {font-family:Roboto,Arial,Helvetica, sans-serif;}
#PageDiv p, #PageDiv h1 {color:Gray;letter-spacing:1px;font-size:16px;line-height:185%;}
#mainpr {letter-spacing:3px;}
#extlnk {color:black !important;}
</style>

When using our editors and you decide to change any of the above elements in your document, never use them by themselves e.g. "p" or "a" alone, always give them an unique name e.g. <p id="mainpr"> or <a id="extlnk">, or rather reference them to the main element's identification name e.g. "PageDiv" — #PageDiv p, #PageDiv h1 {styling;}. This will prevent your document when loaded to interfere with the application or any other element in your document or web page. You may even use classes if you like, but only if you know enough of what to add or change.

If you read carefully on the CSS example, you would have noticed the"!important" attribute added at the end of the style declaration. This means that no other call to this attribute may override that declaration or make any changes. It's a kind of permanent setting declaration.

You would find all these attributes and how to change them with a single click in all our web editors, if you have not already explored them all.

If you want to have a better understanding of what it all means, you may go to the following website, which is where I go to do all my online learning... Click Here... W3Schools.com

This is a great and wonderful website that comprehensively teaches you on all of the elements and how to work with them.

So there you have it, by changing a few simple elements or adding some can make a difference to any document, whether it is colour, paragraph line spacing, or even character spacing, it is all just one click away.

The more you know on HTML and CSS scripting, the better your document content will present itself to your specific audience, or just have an overall look of professionalism that you desire.

Have fun...

...Go Online and enjoy complete productivity freedom...