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.
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.
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.
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