welcome to

Website-Bastelstunde I

with nyakob ^{(they/them/jakob)} :3

historical WWW logo (Robert Cailliau, 1990)

08 Jun '26, maschinenraum

(pls click somewhere on the slide, then you can scroll through them with the mouse wheel or the arrow keys)

Post-Workshop Update: More links

visualizing large graphs: Gephi
3D rendering engine in CSS: PolyCSS
CSS Clicker Game and Lyra Rebane’s the talk from 39c3
WWW Design Guide from 1995 (requires an internet archive account to borrow)
Cool GIFs: https://gifcities.org/
BUW Website from the 90s

thanks for showing up at my workshop <3

if u need anything hmu on fediverse, via email (BUW, jakob dot bela dot ruckel) or at maschinenraum open space (every wednesday 17:00–19:00)

Why Have A Website In --current-year?

Why Have A Website In --current-year?

Expression, put yourself out there!
- No one tells you what shape your website has to be, so it’s kinda a sandbox where you can do whatever
not (really) subject to algorithms and social media shenanigans
- posting on social media: “oh no what will people think of this?”
  - and the metrics
- website: “i guess if anyone sees this it’s their fault”
  - i have no idea if anyone even does that*
- this gives me peace of mind :)
It’s fun!
Art

webdev

What?

Today:
- a history lesson
- HTML + CSS 101 (no javascript :p)
- Hosting basics
- Some time and space for you to mess around with all this :)
Next time (in 3 weeks, i.e., 29 june ‘26, 15:30, maschinenraum)
- Static site generators (jekyll in particular)
  - a.k.a. how to build a blog (with an RSS/Atom feed!!)
- Hosting (magically) with CI

How did we get here?

image source: https://redd.it/1fpgddo

⟷

How did we get here?

image source: https://redd.it/1fpgddo

⟷

How did we get here?

image source: https://redd.it/1fpgddo

⟷

⤡

⤢

How did we get here?

ARPANET, 1978

Internet (old, as in pre-WWW)

IRC (Discord)
Usenet (Reddit)
E-Mail (E-Mail)
…

CERN, late 80s

“what if we, like, organized our science information, but better?”
– Tim Berners-Lee (1989) (paraphrased)

Photograph by Mike Peel (www.mikepeel.net), CC-BY-SA-4.0

Traditions

first ever web server (CERN, 1990) second vr lab domain controller (BUW, 2025)

Photograph by Mike Peel (www.mikepeel.net), CC-BY-SA-4.0

Technology

HTML

hypertext markup language

http://

hypertext transfer protocol

Hypertext

text that links to other text
if it’s not just text it’s called hypermedia
foreshadowed in 1941 in a short story by an Argentine writer named Borges
invented in 1965 by a man named Ted Nelson who stuck his hand in water on a boat and realized that it’d be cool if media was interconnected and not sequential (paraphrased)
- he is also mad about cut & paste in text editors (he does have a point)

Hypertext (cont’d)

three clicks from my home page (~96k other sites)

The World Wide Web

The Web is a global, interconnected information system, consisting of many, many hypertext documents.

invented in 1989
became public domain in 1993
- (yay for open source!!)
predated (slightly) by Gopher
- they co-existed for a bit, but the Web proved (a bit) more successful
- 2019 revival: Gemini (unfortunate naming what with the google slop engine)

Le Web

source: Internet et le World Wide Web, c'est simple

Technology (cont’d)

CSS

cascading style sheets

This tells the browser what the document should look like
Can even be used for print documents
“Cascading” = more specific declarations have priority
CSS is a programming language (demonstrated by rebane et al.)

</infodump>

Dev Setup

you’ll need:

a text editor (Vim, VS code, Notepad, Butterflies, …)
a web browser
optional but nice to have: automatic reloading
- via some server, e.g., live-server:
  - install: npm i -g live-server, run: live-server
- vs code has an extension for that:

Let’s do something

create a directory somewhere (on ur computer)
create and open a file called index.html in there
write something (i.e., anything) in there
open in your browser (or in your text editor, or via live-server, …)

Hello, Web!

<!DOCTYPE html>
<html>
    <head>
        <title>My site</title>
    </head>
    <body>
        <h1>Hello!</h1>
        <p>this is so cool!</p>
        <img src="https://http.cat/200"/>
    </body>
</html>

Hello!

this is so cool!

<h1>HTML Things</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<p> Paragraph with <b>bold</b>, <i>italic</i>, and <u>underlined</u> text </p>

<ul>

<li>list item</li>
<li>list item</li>

</ul>

More HTML Things

Links: <a href="https://example.com">Link</a>
Images: <img src="https://http.cat/200"/>
Line break: <br/>
A span of text: <span>hello!</span>
a horizontal line: <hr>
<code>code</code>
The best HTML element: <marquee>The best HTML element</marquee>
- big browser is deprecating this, so have fun with it while it lasts
comments: 
and many more

I can hardly contain myself!

<div> is a container

<div style="padding: 0.5em; background-color: lightblue">
    <div style="padding: 0.5em; background-color: pink">
        <div style="padding: 0.25em; background-color: white">
            <marquee>hello!</marquee>
        </div>
    </div>
</div>

hello!

Style 😎

this is css:

p { background-color: red; }

p is the selector, selecting all <p> elements, and
background-color is a property…
…which is set to the value red

Where does Style go?

~~Online~~ Inline Style:
```
<img style="width: 20%;" src="https://http.cat/404"/>
```
specific to the element → high priority
within your HTML: <style> * { font-family: "Comic Sans MS"; } </style>
in a separate stylesheet (e.g. foo.css) next to your html. include like this:

<head>
    <link rel="stylesheet" href="foo.css"/>
</head>

Selectors

we can give elements classes and ids:

<p class="my-cool-class">hi</p>
<p id="my-cool-id">hi</p>

in CSS, we select things like this:

p { background-color: red; }
.my-cool-class { background-color: green; }
#my-cool-id { background-color: blue; }

More Selector Stuff

combinators
- span.rainbow selects <span> with the rainbow class
- p img selects all <img> that are (somewhere) inside a <p>
  - p > img only selects ones that are direct children
pseudo-classes
- a:hover selects all #foo that the user is hovering over
  - #link-pseudo-classes:hover {background-color: black; color: white}
pseudo-elements
- #bar:hover::before { content: "i am a link to " }
attribute selectors

this is some crazy stuff, all w/o javascript!

!!!! Important !!!!

If you really need to override something you can mark it as !important.

<style>
.x3 { font-size: 2em; }
.x3:hover { background: pink; }
.rawr a:hover { background: orange; }
</style>
<div class="rawr">
    <a class="x3" href="#">hewwo :3</a>
</div>

hewwo :3

!!!! Important !!!!

If you really need to override something you can mark it as !important.

<style>
.xD { font-size: 2em; }
.xD:hover { background: pink !important; }
.rawr a:hover { background: orange; }
</style>
<div class="rawr">
    <a class="xD" href="#">hewwo :3</a>
</div>

hewwo :3

(might be considered sinful, but might also come in handy)

Liberté, Égalité, Unité

You can set font-size, width, height, padding, margin, …
- common units:
  - 1 em = size of the font (relative to parent)
  - 1 rem = size of the font
  - 1 px = 1 pixel
  - 1 vh (1 vw) = height (width) of the viewport
  - 0 (nothing)
  - % (relative to parent)
  - …

Resources

this concludes the overview!

for more HTML/CSS stuff:

Mozilla Developer Network (MDN) https://developer.mozilla.org/
W3Schools https://www.w3schools.com/
SELFHTML (German) https://wiki.selfhtml.org/
your search engine
stackoverflow (for those retro vibes)
(ask me, i am no expert and my brain can be sieve-esque but i’ll try :D)
if you feel like it, look up some books from way back on the internet archive

Hosting

Legal disclaimer for when u put a website on the internet:

technically there is Impressumspflicht
- (unless your website is only for u & ur friends? it’s complicated)
- the same criteria also apply for things like youtube channels

Options (a very much non-exhaustive list):

Buy a domain + webhosting (~20 EUR/year)
Bauhaus-Uni
neocities
GitHub pages

Uni Hosting

uni username: abcd1234
- site: https://uni-weimar.de/~abcd1234
note: this is ancient stuff, btw!
- unix, 70s: ~ became synonymous with home
- ~abcd1234/ = /home/abcd1234/
- people had home directories on the webserver
- stuff goes in ~abcd1234/public_html/

Apache 1.3 Documentation, 2001

Uni Hosting (how 2)

grab some ftp client, e.g. FileZilla
connect to uni vpn
connect the ftp client:
- host: webuser.uni-weimar.de
- username: abcd1234
- password: *******
upload your html!

there’s also some more detailed documentation from SCC

Neocities

neocities.org
goes back to GeoCities (‘94 – ‘09)
kinda community focused, webrings and stuff
also cool to just browse
<your-name-here>.neocities.org

GitHub Pages

documentation
<your-name-here>.github.io
GitHub is owned by micro~~soft~~slop
- then again, if it enshittifies too much, just take ur website somewhere else *shrug*

enough of that.

Happy webseiten-basteln!!

slides online at: http://jakob.ruckel.de/slides/www-i/