HTML TEMPLATE

This is the last time I am re-writing these freaking web pages! I am not kidding. THIS IS THE LAST TIME! @#%^&*! It started with Wordpress and the Typo theme. Then self hosted on a Raspberry pi zero with my [dumpster fire] style.css. Then used Joel Dare's neat.css. Now I'm in the middle of a Zen CSS renaissance. I know what you're thinking. This is not the last time. Bah.

A [very] few words about Zen CSS. Choose a minimalist approach.

Heading

The title of the page uses the <h1> tag. It is centered and capitalized. Subtitles use <h2>, <h3>, and <h4> and are left justified for readability. Subtitles are not capitalized.

Heading H2

Heading H3

Heading H4

<h1>TITLE</h1>
<h2>Subtitle</h2>

Images

Images default to 100% width [shown in the banner image]. Loading is set to lazy. The image width can be overridden with an inline style and are centered with auto margins.

<img src="lotus.jpg" style="width:50%;" alt="lotus flower">

Image captions are done with figure and figcaption. The figcaption CSS is tricky. If the image width is overridden, the figcaption width must be overridden.

<figure>
<img src="lotus.jpg" style="width:50%;" alt="Lotus Flower">
<figcaption style="width:50%;">Lotus Flowers</figcaption>
</figure>

Paragraph

There are 3 major decisions to make with paragraph. The font typeface, size, and line height define the look of the web page. If the font and size are not specified, the browser uses the defaults. Usually Times New Roman @ 16px. This is a difficult decision and highly subjective. The reader can adjust the font size in the browser. This paragraph is Verdana, 11pt, with 1.4em line-height.

<p>There are major decisions to make with paragraph.</p>

:root
font-family: verdana;
font-size: 10pt;
line-height: 1.4em;

This font is Sans-serif. abcdefg ABCDEFG 12345
This font is Times New Roman. abcdefg ABCDEFG 12345
This font is Arial. abcdefg ABCDEFG 12345
This font is Helvetica. abcdefg ABCDEFG 12345
This font is Verdana. abcdefg ABCDEFG 12345
This font is Monospace/Courier. abcdefg ABCDEFG 12345
This font is Courier New. abcdefg ABCDEFG 12345

One more paragraph consideration is text justification. Justification looks nice. No justification is easier to read. This paragragh is not justified.

One more paragraph consideration is text justification. Justification looks nice. No justification is easier to read. Some will prefer justification. Some will not prefer justification. Justification is highly subjective. This paragraph is justified.

Highlight

The highlight class adds a highlighted background to paragraph text and is indented. Good for quotes, or text blocks.

<p class="highlight">The highlight class adds a highlighted background color to paragraph text. Good for quotes, or text blocks.</p>

Preformatted

The preformatted <pre> tags are highlighted blocks of monospaced font to display code or quotes. The text is indented and long lines running off the right edge can be scrolled.

<p>The preformatted <pre> tags are highlighted blocks of monospaced font to display code.</pre>

Center

The center class can be specified for paragraph or anything that needs to be centered

dave@worldsworstwriter.org 2024-12-27

<p class="center">dave@worldsworstwriter.org 2024-12-27</p>

Light and Dark Color Scheme

A light and dark color scheme will display depending on the operating system settings. If the OS is set to dark then a dark scheme is displayed. If the OS is set to light, a light scheme is displayed. If the OS is set to light/dark, the color scheme will change depending on the OS settings. Usually a light scheme during the day and dark scheme at night.

List

• HTML Template
• Headers
• Paragraph
• Highlight
• Preformatted
• Light and Dark Themes

Table

Javascript

Objects

HTML objects are a good way to embed text files into an HTML document. A text file object is used to embed the CSS file in the next section. NOTE: Wrap the object tags in a <pre> tag so the object will refresh when the text file is changed and the text does not run off the page. Here is the code.

<pre>
<object data="../css/style.css" type="text/plain" width="600" height="1400">
<a href="../css/style.css">No Support?</a>
</object>
</pre>

CSS File

The power of the template is one edit instead of 70. Copy the template to fast start a new page. Embedded text file objects spare another edit when the text file changes. Inline styles provide a way to override the template. And separate CSS files [gasp] are available for things like web apps or when the template is a poor fit. Here is the line to include a central CSS file.

<link rel="stylesheet" href="../css/style.css">

dave@worldsworstwriter.org 2024-10-06