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>`:

1. Numbered Item A
2. Numbered Item B
3. Numbered Item C

1. Sub Numbered Item

4. Numbered Item D

- Mixing ordered and unordered lists is permissible

5. 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: AlphaBravo

- Subscripting: `<sub>Blah blah</sub>`

- Example Result: CharlieDelta

## 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 (`&nbsp;`) 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>&nbsp;</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 `&lt;`
- The greater than character (>) must be typed with `&gt;`
- The ampersand character (&) must be typed with `&amp;`
- '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 `&apos;`
- The double quote (or quote) is designated by `&quot;`