HTML Explained

General Notes

This file is a supplement to Demo-Details.html so that newbies have a cheat sheet with examples for HTML code
It's best to open up this HTML Explained file in a webbrowser and a text editor at the same time and display them side by side

Commenting Inside of the Template File(s)

Depending on your text editor, it may be hard to see what is code and what are comments. Making things worse, using HTML, style sheets, and Javascript is always messy because you have three different "languages" -- sometimes inside the same file. It can get ugly fast.

Separate Files

When looking at my demo, it is best to look at everything as separate files:

Demo-Details.html
Demo.css

Demo-Variables.css
Demo-Main.css
Demo-Menu.css

Demo.js

Demo-Details.html is arranged like this and comments in HTML are created as follows:


				<!doctype html>
				    <head>
				        <...>
				    </head>
				    <body>
				        <!-- I'm a multi line comment! -->
				        <!-- I'm a multi 
				        line comment too! -->
				    </body>
				</html>

Any "css" files (like Demo-Variables.css, Demo-Main.css, and Demo-Menu.css create comments as follows:


			/* I'm a multi line comment! */
			/* I'm a multi
			   line comment too! */

Any Javascript files (like Demo.js) create comments as follows:


			// I'm a single line comment and I can only be on one line!
			/* I'm a multi line comment! */
			/* I'm a multi
			   line comment too! */

Single File

There are a few people who would like to see everything (HTML, CSS, and Javascript) inside of a single file. Generally speaking, this is not the best way to arrange things, but the specific people I have in mind might need this.

Generally speaking, the demo files are ordered like this and the comments inside look like the following:


			<!doctype html>
			    <head>
			        <style>
			            /* I'm a multi line comment! */
			            /* I'm a multi
			               line comment too! */
			        </style>
			        <script>
			            // I'm a single line comment and I can only be on one line!
			            /* I'm a multi line comment! */
			            /* I'm a multi
			               line comment too! */
			        </script>
			    </head>
			    <body>
			        <!-- I'm a multi line comment! -->
			        <!-- I'm a multi 
			        line comment too! -->
			    </body>
			</html>

Simple HTML Formatting

You may use the paragraph <p> tags to separate your content or the <div> tags to keep your content together. Mixing the two may yield weird results. Tags without text don't show up at all.

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 5: (Paragraph 4 is empty)

Division 1

Division 2

Division 3

Division 5 (Division 4 is empty)

Heading Tags

There are six heading tags native to HTML: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Bullet Lists and Numbered Lists

Unordered (bulleted) lists are available using <ul> and <li>:

Bullet 1
Bullet 2

Bullet 3 (Nested Bullet)

Bullet 4
Bullet 5

Nested Bullet 1
Nested Bullet 2
Nested Bullet 3

Ordered (numbered) lists are available using <ol> and <li>:

Numbered Item A
Numbered Item B
Numbered Item C

Sub Numbered Item

Numbered Item D

Mixing ordered and unordered lists is permissible

Numbered Item E

HTML Tags

Changing the fonts and styling of texts within this environment is covered in Demo-Main.css.

Generally speaking, I've made it simple for you to tweak the style settings of the application to get it the way you want, but CSS (styling) is very complex. A person who is knowledgeable about CSS can do some pretty wild things. For instance, I can increase or decrease or even eliminate the extra space between paragraphs, or I can cause the <i> tag to not italicize and instead make all the letters really big when the <i> tag is used. But that's not for you. In other words, the commands in this HTML page is not universal to all HTML, but it is the default behavior for most HTML pages you'll encounter.

Bold, Italics, and Underlining

Use the <b> and </b> tags to bold texts.

Use the <i> and </i> tags to italicize texts.

Use the <u> and </u> tags to underline texts.

You can use two or even all three together.

Mixing start and stop formatting is possible, but there are two ways to do this...

Not recommended, but doable: Start italicizing, start bolding, stop italicizing, stop bolding.

Note that using this methodology may confuse the Notepad++ color highlighting.

Recommended way: Start italicizing, start bolding, stop bolding, stop italicizing, then start bolding again then stop bolding.

The end result is the same, but the coding is cleaner and easier to debug.

Superscripting and Subscripting

Superscripting: <sup>Blah blah</sup>

Example Result: Alpha^Bravo

Subscripting: <sub>Blah blah</sub>

Example Result: Charlie_Delta

Monofonts

In general, fonts and styling can be tricky, but the easiest way to use monofonts within a paragraph is to use the <code> and </code> tags.

You can also stuff paragraphs between code tags:


			Here's one paragraph. The open code tag is above this paragraph.
			Here's a second paragraph. The close code tag is below this paragraph.

There is also the <pre> and </pre> tags which can be used larger texts.

			Text within the <pre> tags are by default in monospace,
			
			Enter marks, tabs, and spaces           are preserved.

			This text is indented a lot when viewed in a webbrowser because
			the html is tabbed 4 times, so either your html will look
			unclean or your text will look funky. It's usually better
			to use more advanced CSS techniques.

Adding line breaks

The <br> tag is a line break.

Paragraph before line break

Paragraph after line break

Division before line break

Division after line break

Drawing horizontal lines

The <hr> command draws a line.

Beginning of paragraph. I only wish it were easy to draw a line in the middle of a paragraph, but it doesn't work.

End of paragraph

Indenting with the non-breakable space

This one is a cheat and there are better ways to this if you want to regularly indent something, but you can use the non-breaking command ( ) to force a space character(s) to appear:

Nonbreak spaces can indent (with enough of them).
Nonbreak space between div tag looks the same as a <br> tag

Non-indented division

Indented division

Non-indented division

Non-indented division; "Empty" division between divisions

You probably want to use <br> instead of <div> </div>, but it's an alternative

Indenting properly involves knowledge of CSS which is beyond the scope of this file and beyond the scope of my other demo files.

Using anchor to link to other websites

If you're learning html, you should know about the anchor tag, but it's best not use it with the code included in TranslationTemplate1-CoreFunctionality.html as the two functionalities interfere with each other leading to to the occasional quirky result.

Example: <a href="https://www.google.com">Click here to open up Google</a>

Click here to open up Google

Note: The link, linkNew, linkSame are commands that I created specifically for the Keyboard Driven Menu System and are not native to HTML. The anchor link is standard HTML.

Special Characters in HTML

One of the downsides to html is that it can't do several characters easily when you're typing in html.

Most characters can be typed normally: !@#$€%()[]{}=-_+*.,:;?|\/`~^
The less than character (<) must be typed with <
The greater than character (>) must be typed with >
The ampersand character (&) must be typed with &
'Single Quotes' and "Double Quotes" require no special codes when writing plain text in HTML, but...
Single quotes (') and double quotes (") might need their special designations if being used heavily in the clipboard functionality of the Keyboard Driven Menu System

The single quote (or apostrophe) is designated by '
The double quote (or quote) is designated by "