Making Web Pages

404 Page not found error
A 404 error page

Introduction

A recent look at my web server configuration revealed that my error pages were set up in an odd way. From the base route of a domain, it’s possible to iterate over each error page starting with /400, /401, /402, /403, /404 and so on. I guess that my My initial personal nginx configuration is from years ago. self wanted to verify an error page’s content and existence.

It did seem like more was going on but upon further investigation, these error pages were just statically generated HTML (HyperText Markup Language). They were made with HTML and XML (Extensible Markup Language) utilities many moons ago.

Just as there are too many books to read in a lifetime, there are too many programs to try out in a lifetime. If you look online it’s easy to get the impression that making a website is rocket science. The reason for this is obvious — almost all discussions online are oriented towards engineers working in the industry. The reality is that a website or even an “application” can be as simple as a single HTML text file.

The blessed ways of crafting and delivering a website have become beyond the pale complicated, but composing HTML is still as simple as it always was, and perhaps even easier thanks to some improvements in the HTML specification.

HTML and XML Utilities

HTML and XML utilities or html-xml-utils are a simple set of programs for manipulating HTML and XML files. Here’s the master list that describes the purpose of each utility taken right from the readme.

text
asc2xml      -  convert from UTF-8 to &#nnn; entities
hxaddid      -  add IDs to selected elements
hxcite       -  replace bibliographic references by hyperlinks
hxcite-mkbib -  expand references and create bibliography
hxclean      -  apply heuristics to correct an HTML file
hxcopy       -  copy an HTML file while preserving relative links
hxcount      -  count elements and attributes in HTML or XML files
hxextract    -  extract selected elements
hxincl       -  expand included HTML or XML files
hxindex      -  create an alphabetically sorted index
hxmkbib      -  create bibliography from a template
hxmultitoc   -  create a table of contents for a set of HTML files
hxname2id    -  move some ID= or NAME= from A elements to their parents
hxnormalize  -  pretty-print an HTML file
hxnsxml      -  convert output of hxxmlns back to normal XML
hxnum        -  number section headings in an HTML file
hxpipe       -  convert XML to a format easier to parse with Perl or AWK
hxprintlinks -  number links & add table of URLs at end of an HTML file
hxprune      -  remove marked elements from an HTML file
hxref        -  generate cross-references
hxselect     -  extract elements that match a (CSS) selector
hxtoc        -  insert a table of contents in an HTML file
hxuncdata    -  replace CDATA sections by character entities
hxunent      -  replace HTML predefined character entities to UTF-8
hxunpipe     -  convert output of pipe back to XML format
hxunxmlns    -  replace "global names" by XML Namespace prefixes
hxwls        -  list links in an HTML file
xml2asc      -  convert from &#nnn; entities to UTF-8

These 28 programs (primitives) allow you to do a lot of magic with HTML (and XML). If you’re on a Linux distribution this package exists on Debian, Arch, Alpine and others as html-xml-utils.

Basic Templating

The web was initially designed with the purpose of passing documents around. Below is a modern skeleton of a basic The file name index.html is a convention that pretty much all web servers recognize. If it exists, the web server will process it automatically. document.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The Document</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
  </head>
  <body>
  </body>
</html>
index.html

The document type is HTML with a language attribute set to English, the <head> includes the title, character set and viewport while the <body> begins the rest of the document and ends it with a closing </body>.

The package html-xml-utils has a program hxincl that allows augmenting that base index.html document. Here’s what a rough template of those error pages look like using the inclusion directives of hxincl.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    <style>
      <!-- include "index.css" -->
    </style>
  </head>
  <body>
    <article>
      <section>
        <h1>
          <code>
            <b>
              <!-- include "error.code.html" -->
            </b>
          </code>
          <!-- include "error.title.html" -->
        </h1>
      </section>
      <p>You can try:</p>
      <ul id="action">
        <li>
          Going back to the
          <a onclick="window.history.go(-1); return false;" href="/">
            previous page.
          </a>
        </li>
        <li>Returning <a href="/">to the home page.</a></li>
      </ul>
    </article>
    <script>
      <!-- include "index.js" -->
    </script>
  </body>
</html>
template.html

Running hxincl on this template expands the contents of the included file directives which are conveniently just HTML comments. It expands into a final artifact: the error code value and title, along with a traditional separation of concerns for CSS (Cascading Style Sheets) as index.css and JavaScript as index.js. The source code of an error page shows the full expansion.

shell
hxincl -f -x template.html

The -f flag removes all comments after the expansion and the -x flag enforces XML conventions when generating void elements. The program hxnormalize can be used to format and pretty print the final HTML document.

Conclusion

This was a very simple demonstration and hxincl can be used much more cleverly with substitutions. There’s no props, slots, or template inheritance but I thought it’d be rather nice to demonstrate that you don’t need complex tools to start generating HTML.

29 September 2022 — Written
1 October 2022 — Updated
Thedro Neely — Creator
making-web-pages.md — Article

More Content

Openring

Web Ring

Comments

References

  1. https://thedroneely.com/git/
  2. https://thedroneely.com/
  3. https://thedroneely.com/posts/
  4. https://thedroneely.com/projects/
  5. https://thedroneely.com/about/
  6. https://thedroneely.com/contact/
  7. https://thedroneely.com/abstracts/
  8. https://ko-fi.com/thedroneely
  9. https://thedroneely.com/tags/html/
  10. https://thedroneely.com/posts/making-web-pages/#isso-thread
  11. https://thedroneely.com/posts/rss.xml
  12. https://thedroneely.com/images/making-web-pages.png
  13. https://thedroneely.com/posts/making-web-pages/#introduction
  14. https://thedroneely.com/400
  15. https://thedroneely.com/401
  16. https://thedroneely.com/402
  17. https://thedroneely.com/403
  18. https://thedroneely.com/404
  19. https://nginx.org/en/docs/beginners_guide.html
  20. https://staticsitegenerators.net/
  21. https://html.spec.whatwg.org/dev/
  22. https://thedroneely.com/posts/making-web-pages/#html-and-xml-utilities
  23. https://www.w3.org/Tools/HTML-XML-utils/README
  24. https://thedroneely.com/posts/making-web-pages/#code-block-da0f0d3
  25. https://packages.debian.org/sid/html-xml-utils
  26. https://archlinux.org/packages/community/x86_64/html-xml-utils/
  27. https://pkgs.alpinelinux.org/package/edge/community/x86/html-xml-utils
  28. https://repology.org/project/html-xml-utils/versions
  29. https://thedroneely.com/posts/making-web-pages/#basic-templating
  30. https://thedroneely.com/posts/making-web-pages/#code-block-7e4dd99
  31. https://man.archlinux.org/man/hxincl.1
  32. https://thedroneely.com/posts/making-web-pages/#code-block-e5b58ed
  33. https://thedroneely.com/posts/making-web-pages/#code-block-3a22c9e
  34. https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
  35. https://man.archlinux.org/man/hxnormalize.1
  36. https://thedroneely.com/posts/making-web-pages/#conclusion
  37. https://www.thedroneely.com/posts/making-web-pages.md
  38. https://thedroneely.com/abstracts/aria-the-animation/
  39. https://thedroneely.com/archives/abstracts/
  40. https://thedroneely.com/projects/micro-blog/
  41. https://git.sr.ht/~sircmpwn/openring
  42. https://drewdevault.com/2022/11/12/In-praise-of-Plan-9.html
  43. https://drewdevault.com/
  44. https://mxb.dev/blog/the-indieweb-for-everyone/
  45. https://mxb.dev/
  46. https://www.taniarascia.com/simplifying-drag-and-drop/
  47. https://www.taniarascia.com/
  48. https://thedroneely.com/posts/making-web-pages#isso-thread
  49. https://thedroneely.com/posts/making-web-pages#introduction
  50. https://thedroneely.com/posts/making-web-pages#html-and-xml-utilities
  51. https://thedroneely.com/posts/making-web-pages#code-block-da0f0d3
  52. https://thedroneely.com/posts/making-web-pages#basic-templating
  53. https://thedroneely.com/posts/making-web-pages#code-block-7e4dd99
  54. https://thedroneely.com/posts/making-web-pages#code-block-e5b58ed
  55. https://thedroneely.com/posts/making-web-pages#code-block-3a22c9e
  56. https://thedroneely.com/posts/making-web-pages#conclusion
  57. https://thedroneely.com/projects/news-aggregator/
  58. https://thedroneely.com/abstracts/the-myth-of-the-rational-voter/
  59. https://thedroneely.com/posts/variable-dump-to-error-log/
  60. https://thedroneely.com/posts/running-nixos-linux-containers/
  61. https://thedroneely.com/posts/mixing-php-into-hugo/
  62. https://thedroneely.com/posts/finding-that-one-percent/
  63. https://drewdevault.com/2022/09/16/Open-source-matters.html
  64. https://mxb.dev/blog/make-free-stuff/
  65. https://www.thedroneely.com/git/
  66. https://www.thedroneely.com/
  67. https://www.thedroneely.com/posts/
  68. https://www.thedroneely.com/projects/
  69. https://www.thedroneely.com/about/
  70. https://www.thedroneely.com/contact/
  71. https://www.thedroneely.com/abstracts/
  72. https://www.thedroneely.com/tags/html/
  73. https://www.thedroneely.com/posts/making-web-pages#isso-thread
  74. https://www.thedroneely.com/posts/rss.xml
  75. https://www.thedroneely.com/images/making-web-pages.png
  76. https://www.thedroneely.com/posts/making-web-pages#introduction
  77. https://www.thedroneely.com/400
  78. https://www.thedroneely.com/401
  79. https://www.thedroneely.com/402
  80. https://www.thedroneely.com/403
  81. https://www.thedroneely.com/404
  82. https://html.spec.whatwg.org/#toc-semantics
  83. https://www.thedroneely.com/posts/making-web-pages#html-and-xml-utilities
  84. https://www.thedroneely.com/posts/making-web-pages#code-block-da0f0d3
  85. https://www.thedroneely.com/posts/making-web-pages#basic-templating
  86. https://www.thedroneely.com/posts/making-web-pages#code-block-7e4dd99
  87. https://www.thedroneely.com/posts/making-web-pages#code-block-e5b58ed
  88. https://www.thedroneely.com/posts/making-web-pages#code-block-3a22c9e
  89. https://www.thedroneely.com/posts/making-web-pages#conclusion
  90. https://www.thedroneely.com/archives/abstracts/
  91. https://www.thedroneely.com/projects/voiceover-website/
  92. https://www.thedroneely.com/posts/programming-sans-internet/
  93. https://www.thedroneely.com/sitemap.xml
  94. https://www.thedroneely.com/index.json
  95. https://www.thedroneely.com/resume/
  96. https://gitlab.com/tdro
  97. https://github.com/tdro
  98. https://codeberg.org/tdro
  99. https://www.thedroneely.com/analytics
  100. https://www.thedroneely.com/posts/making-web-pages#
  101. https://creativecommons.org/licenses/by-sa/2.0/
  102. https://www.thedroneely.com/git/thedroneely/thedroneely.com
  103. https://opensource.org/licenses/GPL-3.0
  104. https://thedroneely.com/sitemap.xml
  105. https://thedroneely.com/index.json
  106. https://thedroneely.com/resume/
  107. https://thedroneely.com/analytics
  108. https://thedroneely.com/posts/making-web-pages#
  109. https://thedroneely.com/git/thedroneely/thedroneely.com
  110. https://thedroneely.com/posts/making-web-pages/#