Weird Websites for a Post Social Media World

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

Non-goals

Approach














Set up some tools

VSCodium

Live Server extension

From the extension tab in VSCodium

Live Server by rtwickdev














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>

Tags

What is a tag














Headings

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

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

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

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

<a>...</a>

https://90milartschool.softr.app/

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














Tags in tags

Lists of things

  1. This is an Ordered List
  2. 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

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

Next time