HTML templates
date of creation: | last update:
Here I will add various templates for the HTML webpages to try and keep consistency with them through time.
However, they will probably change anyway, while I hope changes won't be disruptive given the static website they're meant for.
The idea here is to use <pre><code> tags to be able to copy the html code even from the rendered webpage -but I might as well make some other template blogposts which I will copy/paste as entire files with dummy text (and possibly add to the /resources/ directory...).
In any case: do remember to change/add the unique pieces (like html lang, title, description of each webpage) where needed everytime!
Basic Template
Mainly to copy head and generic elements correctly.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ffffff">
<meta name="color-scheme" content="light dark">
<meta name="description" content="description-of-the-page">
<title>title-of-the-tab</title>
<!-- Example of a comment not visible when webpage is rendered -->
/* Yet another example on how to add a comment -though it doesn't see to always work... */
<link rel="stylesheet" type="text/css" href="/resources/styles/main.css" media="all">
</head>
<body>
<h1>heading-title</h1>
<p>paragraph-content</p>
</body>
</html>
Blogposts templates
Templates meant for a blogposts-like contents with a similar structure.
Single blogpost 1
Template for a simple standalone (not more than one article in it) blogpost or webpage content with two sections, one consisting in a title and subtitle plus a date of creation and last update, the other with all of the paragraphs and eventual headings.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ffffff">
<meta name="color-scheme" content="light dark">
<meta name="description" content="description-of-the-page">
<title>title-of-the-tab</title>
<!-- Example of a comment -->
<link rel="stylesheet" type="text/css" href="/resources/styles/main.css" media="all">
</head>
<body class="single-blogpost">
<header>
<nav class="blogpost-navbar">
<ul>
<li><a href="./index.html">Back to index</a></li>
<li><a href="/">TrowelTips</a></li>
<li><a href="#">To top</a></li>
</ul>
</nav>
</header>
<main class="blogpost-content">
<header class="blogpost-header">
<hr>
<h1>Heading1</h1>
<h2>optional subtitle</h2>
<p><i>date of creation: <time datetime="YYYY-MM-DD">YYYY-MM-DD</time> | last update: <time datetime="YYYY-MM-DD">YYYY-MM-DD</time></i></p>
<hr>
</header>
<p>
paragraph
</p>
<section>
<h1>heading1</h1>
<p>paragraph</p>
<h2>heading2</h2>
<p>paragraph</p>
<h3>heading3</h3>
<p>paragraph</p>
</section>
</main>
<footer>
<p>Generic credits and licensing addressing to more complete license file/webpage</p>
<footer>
</body>
</html>
Category index templates
Templates meant for index pages of categories which collects blogposts and related contents.
As such these webpages should correspond to the index.html files rendered by default when opening a directory.
Category index 1
Template for the main page of a category, including its title either in header or section or main tag, plus a brief description which should go together with it.
Then either another section or part of the main tag with a list (hereby index) of the possible sub-categories and possibly uncategorised blogposts (if not into an uncategorised sub-category itself).
Finally, the actual sub-categories in sections or articles tag, with the list of related blogposts.
Possibly even a glossary as an aside tag at the end.
Actually I could make different templates with these possible variations and see how it goes...
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#ffffff">
<meta name="color-scheme" content="light dark">
<meta name="description" content="description-of-the-page">
<title>title-of-the-tab</title>
<!-- Example of a comment -->
<link rel="stylesheet" type="text/css" href="/resources/styles/main.css" media="all">
</head>
<body class="shared-category">
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contents/archaeology">Archaeology</a></li>
<li><a href="/contents/tech">Tech</a></li>
<li><a href="/gallery">Gallery</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<!-- Section for main category index -->
<main class="category-index">
<header class="category-header">
<h1>Category name</h1>
</header>
<p>
Brief category description...
</p>
<h2>Index</h2>
<p>
<ul>
<li><a href="#misc">Miscellaneous</a></li>
<li><a href="#subcategory-name">Subcategory name<</li>
</ul>
</p>
</main>
<!-- Section for sub-category index or list of blogposts -->
<article class="category-index">
<header class="category-header">
<h2 id="#misc">Miscellaneous</h2>
</header>
<p>Here miscellaneous contents' list...
<ul>
<li><a href="blogpost-file.html">blogpost-title</a></li>
<li>...</li>
</ul>
</p>
</article>
<!-- Section for sub-category index or list of blogposts -->
<article class="category-index">
<header class="category-header">
<h2 id="subcategory-name">Subcategory name</h2>
</header>
<p>
Here brief subcategory description...
</p>
<p>
Index of further subcategories and/or list of blogposts below...
</p>
<h3>Miscellaneous</h3>
<ul>
<li><a href="blogpost-file.html">blogpost-title</a></li>
<li>...</li>
</ul>
<h3>Index</h3>
<ul>
<li><a href="#further-subcategory-name">Further sub-category name</a></li>
<li>...</li>
</ul>
</p>
<!-- Possible sub-section for list of blogposts grouped into further sub-categories -->
<section>
<header>
<h3 id="further-subcategory-name">Further sub-category name</h3>
</header>
<p>
Here brief description of further sub-category and list of grouped blogposts below...
<ul>
<li><a href="">blogpost-title</a></li>
<li>...</li>
</ul>
</p>
</section>
</article>
<footer>
CREDITS, SOURCE, LICENCE
</footer>
</body>
</html>
Example of website-map via tree command
.
├── 9ed671bb58cf213bf22a4821fb067e3d.css
├── about about
│ ├── index.html
│ ├── Me.html
│ └── This-website.html
├── blog
│ ├── 2022-12-05_git-basics.html
│ └── 2022-12-05_HTML-templates.html
├── gallery
│ ├── gallery-style.css
│ ├── images
│ │ ├── aaes_logo_by_marethyu8_deaiiis-300w.jpg
│ │ ├── archaeology_trowel_emoji_by_marethyu8_dep9s9v-300w.png
│ │ ├── caldanelle_logo_by_marethyu8_deq3hc7-350t.jpg
│ │ ├── international_archaeology_day_2021__looter_...
│ │ └── website_homepage_sample3_by_marethyu8_deas4zp-250t.jpg
│ └── index.html
├── home.html
├── index.html
├── LICENSE
├── main.css
├── not_found.html
└── README.md
Trial without pre and code brackets
.
├── 9ed671bb58cf213bf22a4821fb067e3d.css
├── about
│ ├── index.html
│ ├── Me.html
│ └── This-website.html
├── blog
│ ├── 2022-12-05_git-basics.html
│ └── 2022-12-05_HTML-templates.html
├── gallery
│ ├── gallery-style.css
│ ├── images
│ │ ├── aaes_logo_by_marethyu8_deaiiis-300w.jpg
│ │ ├── archaeology_trowel_emoji_by_marethyu8_dep9s9v-300w.png
│ │ ├── caldanelle_logo_by_marethyu8_deq3hc7-350t.jpg
│ │ ├── international_archaeology_day_2021__looter....jpg
│ │ └── website_homepage_sample3_by_marethyu8_deas4zp-250t.jpg
│ └── index.html
├── home.html
├── index.html
├── LICENSE
├── main.css
├── not_found.html
└── README.md
Nah, it's not working, at all...
Also I was thinking: if I put it in the html as code then I won't be able to add any link to the actual directories and webpages, so, I have to find another way.
Which might simply be to put <br> (line break tags) at the end of each line of the output: let's see!
[but, duh, won't this work only if the rendered text's styles and fonts are monospaced as in code anyway?]
.
├── 9ed671bb58cf213bf22a4821fb067e3d.css
├── about
│ ├── index.html
│ ├── Me.html
│ └── This-website.html
├── blog
│ ├── 2022-12-05_git-basics.html
│ └── 2022-12-05_HTML-templates.html
├── gallery
│ ├── gallery-style.css
│ ├── images
│ │ ├── aaes_logo_by_marethyu8_deaiiis-300w.jpg
│ │ ├── archaeology_trowel_emoji_by_marethyu8_dep9s9v-300w.png
│ │ ├── caldanelle_logo_by_marethyu8_deq3hc7-350t.jpg
│ │ ├── international_archaeology_day_2021__looter__...
│ │ └── website_homepage_sample3_by_marethyu8_deas4zp-250t.jpg
│ └── index.html
├── home.html
├── index.html
├── LICENSE
├── main.css
├── not_found.html
└── README.md
...aaand it didn't work for the reason previewed above: if the font isn't monospaced then the bash output of the "tree" command isn't aligned properly
Gotta find another solution to make the whole thing nice to watch and possible to click for navigation.
Now I'm really thinking of using the accordion/collapsible thing for the generated tree output and, well, ask an AI to do the annoying work to actually add the internal links? D:''