Plainly typing with markup
[ Modified: 2024 Apr 26 ]

Summary: An introduction to marking a plain text document with HTM (hypertext markup). HTM is just marks, like proofreader marks. It is not instructions for the computer, t.i. no need for computer programming knowledge.

1 The motivation for markup
2 Writing and marking plainly
3 Using HTML for document sources
4 Organizing and sharing files
5 Essential HTML

Paper is one of the best mediums for recording notes. Notes on a sheet of paper can be read by someone else without the need for that person to have a pad of paper.

Notes recorded in the computer medium are undeniably less accessible and less sharable. Computer documents require a computer for reading them, and the computer requires electricity.

A buttonboard with a button for each letter of the alphabet aids in writing legibly and quickly on a computer. However, the casual markings of underlining or thicker lines of text written on paper is typically beyond the limited set of symbols of a buttonboard.

Prose often has parentheses "( )" and square brackets "[ ]" distinguishing supplemental information, or quote marks specifying exact wording. Similarly for HTM, the uncommon angle brackets "< >" enclose a name for the kind of mark before its region of typed text.


[ ...putting together a quick example...might finish this someday... ]

<h1>
A heading for a topic
</h1>

<p>A paragraph. Another sentence.

<p>Another paragraph. It is followed by an unordered list.

<ul>
<li>An unordered list.
<li>Another list item.
</ul>

<p>An ordered list is automatically numbered. A list can have a list within a list item.

<ol>
<li>The first list item.
<li>The second list item.

 <ul>
    <li>A list within a list.
    <li>
    <p>Indent the list, if desired. All extra spaces will be ignored in the alternate view.
    </ul>
</ol>

<p>You now know how to mark what you are typing. No need for a lot of marks. Save your documents with ".htm" at the end of their names.

A heading for a topic

A paragraph. Another sentence.

Another paragraph. It is followed by an unordered list.

An ordered list is automatically numbered. A list can have a list within a list item.

  1. The first list item.
  2. The second list item.
    • A list within a list.
    • Indent the list, if desired. All extra spaces will be ignored in the alternate view.

You now know how to mark what you are typing. No need for a lot of marks. Save your documents with ".htm" at the end of their names.


#1 The motivation for markup

Whatever is typed is "plain text" when it is compatible with any operating system of any computer, from the past to the present and into the future. No need for converting a document that has plain text markup.

Spacing before and after paragraphs, thicker lines of text, and larger text for headings help demarcate and emphasize ideas. Some text editor programs merge that formatting with the prose in a way that is illegible and uneditable with any other text editor, thereby is no longer plain text.

Instead, consider two approaches: the primary view optimized for editing the text, and a temporary alternate view optimized for perusing. That is, when editing consider marking the text when helpful for an alternate read-only view of the document.

Enclose the name of a mark within angle brackets "< >", whereby it is unmistakably distinguishable from the prose while ensuring compatibility as plain text. The alternate read-only view of a document is provided by a program hiding each mark while also modifying the appearance of the following text based on the name of the mark, without modifying the document itself.

Extra software for the alternate view is optional. Reading and editing personal or shared notes remains possible with any text editor on any computer, old or new, commodity or personalized.


#2 Writing and marking plainly

The uncommon angle brackets < and > enclose a name for the kind of mark before its region of text. For example, thicker lines of text is known as "bold" text, therefore the mark is <b>. The region ends similarly with a forward slash "/" in the mark, f.e. </b>.

In other words, a region of text marked at its beginning with <b> would have </b> at its ending. Mnemonically, the "/" then "b" means "end b".
For example:

Normally drawn text with <b>this text to be drawn with thicker lines</b> and normally drawn text after it.

Sometimes the ending of a region is obvious by a mark beginning a new region after it, f.e. a paragraph after a paragraph, thereby the ending mark is conveniently optional.

<p>A paragraph of text that is followed by another paragraph.
<p>The previous paragraph obviously ends when this paragraph begins, but this one has an ending mark.</p>


#3 Using HTML for document sources

A hypertext markup lexicon (HTML) is a list of named marks for typed regions of text. The marks evoke imagination of how the text would be drawn or spaced on paper, thereby promoting association and understanding of the content without an alternate view. The alternate view of an HTML document hides each mark and then applies its implied characteristics to its region of text.

For example, notes about some other document will often have the name of that other document for later reference. For computer documents, this more reliably also includes the filename of the document and its location.

The HTML mark for an address is <a> and is supplemented with the href attribute for the "hyperlink reference". The text marked with <a> is usually displayed as underlined, and it becomes a trigger for viewing its specified document. That makes the alternate view more concise with document addresses, and it enhances access to referenced documents.

Some examples.


#4 Organizing and sharing files

A filesystem is a record of locations for documents (files) in a storage device. It tends to also be a source of the modification date and file size, but usually no special feature for comments or descriptions for files.

Commodity operating systems provide their own options for writing descriptions for a file, but those notes are inaccessible with other operating systems. The obvious compatible approach, regardless of operating system or type of filesystem, is consolidating personal descriptions of multiple files into a new document (file).


A document marked with HTML is plain text, therefore always accessible regardless of what computer. Type or copy/paste the document name and optionally mark it as a hyperlink address, perhaps followed by a description. Maybe mark each as a paragraph <p>, or grouped into distinct lists preceded by headings.

In this way, the reason for having each document or image is available, rather than opening each and every document with many different applications and trying to remember later. Documents without descriptions, reasons, or relations to other documents become prime candidates for removal in order to reduce clutter.


Include a framed view of either an HTML document or an image by referencing its source address in the src attribute of an internal frame <iframe>. The view of the document or image is scrollable when larger than the internal frame, which also can have width and height attributes (pixel values).

<iframe src="some-other-document.html"></iframe>
<iframe src="can-be-an-image.jpg" width="400" height="300">
This region is shown instead of the document only when a HTML explorer has no support for the iframe mark.
</iframe>

Or, add an image with the <img> mark and optionally scale it with width or height attributes (pixel values). An <img> mark is intended to be replaced rather than mark a region, so there is no end mark for it.

<img src="an-image.jpg">
<img src="another.jpg" width="500" height="375">

Perhaps establish a tiled layout (split view) for previewing a set of documents with each at 50% width [need style attribute for non-pixel values], t.i. one pair at a time. Note that 50% + the width of one space character + 50% = more than 100%, so ensure there is no space between the end of one mark and beginning of the next.

<iframe
src="doc-1.html" style="width:50%;height:30em;border-width:0">
</iframe><iframe
src="doc-1-backup.html" style="width:50%;height:30em;border-width:0">
</iframe>
<iframe
src="doc-2.html" style="width:50%;height:30em;border-width:0">
</iframe><iframe
src="doc-3.html" style="width:50%;height:30em;border-width:0">
</iframe>

No matter what operating system, even from before the turn of the century, every computer comes with a simple text editor for editing plain text and an HTML explorer (a.k.a. web browser). Thereby, the document can be viewed in any web browser on any computer, and without need for a webserver or even an internet connection.

No special programs necessary, no extra cost, and HTML is as plain as the buttons on a buttonboard.


#5 Essential HTML

The "language" in HyperText Markup Language (HTML) only means it is a lexicon or list of keywords. There is no communication by the means of HTML, nor any coding.

HTML marks are guidance for a temporary read-only view of a document. Sort of like proofreader marks, with a name consistently encapsulated within < and >. Sometimes after the name there is more describing the characteristics of the mark itself, before the >.

The angle brackets "< >" make the occasional HTML mark unmistakably distinguished from the prose, just like parentheses or square brackets. They are often readily available on the comma and period buttons of the buttonboard.

Any text can be placed in between < and >. Just type whatever. Programs providing the alternate read-only view of a document with HTML marks generally ignore any unknown named marks and never show them.


The ".htm" (or ".html") at the end of the filename for a document is typically the only (artificial) requirement made by the operating system and its programs. All HTML marks are optional, as such a document declared to be HTML can be just prose without any marks.


Links are "hyper" because the text is marked with an address for a location within the document or to another document. In other words, a link is an option to view some other part of the document or to view another document. A hyperlink is traditionally underlined by HTML explorers.

Mark a location in a document with an address mark and the id attribute. No need for anything within its region, merely type the marks before something interesting, like before a heading.

<a id="some-name""></a>


Mark text as hypertext with a reference href in an address mark <a href=""> before the text, then follow the text with the </a> ending mark.

In essence, making a note about another document typically involves typing the title of the document, and typing the address of where to find it. In other words, that is the act of referencing a source.

A hypertext link is the same thing, with just a few more characters to type. The same information is recorded, and it will be a link in the alternate read-only HTML view.


Include a framed view of either an HTML document or an image by referencing its address in an internal frame <iframe>. The view of the document or image is scrollable when larger than the internal frame, which also can have width and height attributes.

<iframe src="some-other-document.html"></iframe>
<iframe src="can-be-an-image.jpg" width="400" height="300">
This region is shown instead of the document only when a HTML explorer has no support for an iframe.
</iframe>

Specifically add an image with the <img> mark and reference its source with the src attribute. There is no end mark for it. Optionally scale the image with its width or height attributes.

<img src="an-image.jpg">
<img src="another.jpg" width="500" height="375">

The same document or image can be referenced multiple times. That can be convenient for comparing side by side [perhaps each at 50% of the view width] one original version with many other versions, pairing a reference to the original version with each of the other versions.


Change the default characteristics of any mark with the style attribute for it. A colon associates a characteristic with its value, and a semicolon separates characteristics. Optionally use spaces around the colon or semicolon for clarity.

For example, set the width of a paragraph and center it horizontally.

<p
style="
background-color: black
;color: beige
;text-align: right
;width: 50%
;padding-top: 1em
;padding-right: .5em
;border-top-color: fuchsia
;border-top-style: dashed
;border-top-width: 10px
;border-right-style: solid
;border-right-width: .25in
;border-bottom-color: teal
;border-bottom-style: double
;border-bottom-width: 3mm
;margin-top: 2em
;/* Using automatic margins
centers the region. */
margin-left: auto
;margin-right: auto
">For example, set the width of a paragraph and center it horizontally.
</p>

Additional color is possible with red, green, and blue hues specified as hexadecimal (X Window System and its protocol: color names).


sharing