Web Programming: HTML, CSS and JavaScript

Want your own homepage, but without using Wordpress or similar? Then the time for HTML, CSS and JavaScript has come.

Basics

For HTML, start with SelfHTML [de] to get a basic feeling for tags, contents and so on. Some early notes:

• Large blocks like header, sidebar and main content belong into div (or alternatively header, aside and section).
• Image tables should be done with figure and figcaption.
• Unusual characters can be done with HTML chars or Unicode chars.
• Formulas in LateX format can be done with KateX (JavaScript, CSS and fonts), see e.g. my math page, or images from the CodeCogs LateX Equation Editor, see e.g. my coordinates page; MathML is not widely supported (as of 2021) and MathJax sucks (slow, lots of dependencies).
• head: Unicode requires <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
• head: Mobile screens require <meta name="viewport" content="width=device-width">
• Consider using a HTML validator.

Styling should be done exclusively with CSS [de] [wtf], e.g. inspired by CSS Zen Garden. Though less than intuitive, it is still the most elegant way towards a well-behaved page. Again, some early notes:

• font-size should be in em or pt.
• table [tutorial] is styled with table-layout:auto, border-collapse:collapse, border-spacing:0, and empty-cells:show; td and th by border-spacing:0 again and by padding:3pt. You might want white-space:nowrap in cells.
• For mobile, consider a column-based div wraptable (supported by flex), see e.g. my Pocket PC Phones page and article.css.

Images can be SVG (good in any resolution), or pixels in AV1, WEBP, or JPG (resource as PNG) formats.

Your website does not need dynamic behaviour, but you will not believe that, so take a look at JavaScript elements in a HTML page, the so-called DOM (document object model).

• display:none and visibility:hidden support "turn to background" vs "sucked into black hole".
• Use document.getElementById('my_id').style.X='Y' and give your target an id and not a class.

Layouts

If you have a header, sidebar and main content, you will probably want to use div, aside et al. instead of tables for layout. Particularly if you want a vanishing sidebar below a certain width (nice for mobile devices).

Layout variations include:

• Layout with calc for margins [blog], article/side bar still with flex.
• Layout with flex as in display:flex [guide] [school]
• Layout with overflow and float:left [forum]
• Shadeed discusses min-width and max-width.
• Sitepoint discusses responsive CSS without media queries.
• stichpunkt [de] proposes other box models.

For mobile screens, you might still want to consider conditional CSS with media queries like @media screen and (max-width: 700px) { ... } to get the results you want.

Integration

Search engines will crawl your site automatically, but there is still the question of hosting and indexing on a smaller scale.

• The neocities are the second coming of the 1990s geocities.
• In the "small web" (personal, non-commercial websites), search engines like Wiby operate on personal tips.
• Surprisingly, web rings are still around.

Have fun and do not over-do it!