Friday, January 24, 2020

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

How to set yourself free from vendor-lockin...


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.


Image inserted by SSuite Office Fandango Desktop Editor
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.


Image inserted by SSuite Office Fandango Desktop Editor
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.



Some of the differences are 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:
  • Font Size 1 - Very Small
  • Font Size 2 - A Bit Small
  • Font Size 3 - Normal or Default size, usually 16px
  • Font Size 4 - Medium Large
  • Font Size 5 - Big / Large
  • Font Size 6 - Very Big / Large
  • Font Size 7 - Maximum Size



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.

Image inserted by SSuite Office Fandango Desktop Editor
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...





**************************************************************************************************

No comments:

Post a Comment