welcome to

Website-Bastelstunde I

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

08 Jun '26, maschinenraum

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

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)
…

Enter: The Web

“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
not just text? → hypermedia
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)
foreshadowed in 1941 in a short story by an Argentine writer named Borges

Hypertext (cont’d)

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

What is the Web, anyway?

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

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>

Resources

Mozilla Developer Network (MDN) https://developer.mozilla.org/
W3Schools https://www.w3schools.com/
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)

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>
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

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!

More Important things

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

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/