WIFI: COWORKING or 90mil

Password: BAUSTELLE

weirdweb.uber.space

Intro

Who am I?

Who are you?

Motivation

Socio-political

The Geocities Gallery

My website vitling.xyz

Way beyond the scope of this course or even my ability, but inspiration and vibes Windows93.net

Goals

Website online
Know how to update
Not scared by HTML or CSS
Vague understanding of internals
Techniques and inspiration for getting creative
Can make content also suitable for phones or screen readers
You know where to find more info

Non-goals

'Professional' web design
Technical correctness
Interactivity

Approach

CONTENT-FIRST

Set up some tools

VSCodium

Live Server extension

From the extension tab in VSCodium

Let’s write some code

index.html

<!DOCTYPE html>
<html>
    <body>
        <h1>The most simple website</h1>
        <p>Here is everything I have to say</p>
    </body>
</html>

Edit some text
Make the title about you
Give yourself a mini-bio

Tags

What is a tag

Headings

<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Subsubtitle</h3>
<h4>etc.</h4>
<h5>etc.</h5>
<h6>etc.</h6>

Add some h2 subheadings

Paragraphs

<p>blah blah blah</p>

Line breaks

A new line in the HTML does not create a new line in the page

<br>

Images

<img>

https://placecats.com/300/200

<img src="https://placecats.com/300/200">

src="https://placecats.com/300/200" is an ATTRIBUTE

Let’s go get another image and put it on there

Links

<a>...</a>

https://90milartschool.softr.app/

<a href="https://90milartschool.softr.app/">90 mil art school</a>

Add a link to somewhere. Use my website https://www.vitling.xyz if you don’t have an obvious choice

target="_blank"

Tags in tags

Turn an image into a link

Lists of things

This is a Unordered List
With bullet points

This is an Ordered List
with numbers

<ul>
    <li>an item</li>
    <li>another item</li>
</ul>

<ol>
    <li>first item</li>
    <li>second item</li>
</ol>

Break Time ?

Getting it online

Web host

Uberspace

SFTP client

(to transfer our website to the web host’s computer)

FileZilla

Homework!

Have a browse through the MDN HTML Reference, find some interesting tags. Try them out and report back to us what you find.

If we have time

Add another HTML page
Relative vs Absolute links
<head> section

<html>
    <head>
        <title>The best website ever</title>
    </head>
    <body>
        ...

Next time

STYLE baby

Weird Websites for a Post Social Media World