web interlude

Ben Celina Betsy Emily Eric Georgia Josh Lexi Lucas Lydia Madison Moon Sarah

Thanks for the wonderful workshop!

:~)

This workshop will attempt to introduce the basics of the web (html + css) through play, demistification, and slowing down. We can hope to have some kind of website made by the end of it.

Some words I would like us to keep in mind during the workshop are:

interlude
rest
break

We can think of the web today as a fast, flowing rapids (platforms) lined with pockets of calm, resistant eddies (personal websites).

( let's head for the eddy... )

What else can we use the web for besides contributing to the platforms that control the fabric of our online experience and craft?

How can we reclaim it as space that we feel capable of making in and for?

The goal is to stay messy and free; there is time to refine later. What's important is that we explore the limits and nuances of making on the web.

Arizona

Seattle

Baltimore

Richmond

Good Morning, Empire

Residue

Yellow Shrine

Shifting Window

Blind Sunset

(Old and new...)

Olia Lialina - My Boyfriend Came Back From the War

Jodi.org - untitled

Daniel Eatock - One Mile Scroll

Rafael Rozendaal - Open This Window

Mel Nguyen

Laurel Schwulst

We'll need two (2) essential tools: a browser and a text-editor.

Chrome Atom

"HyperText Markup Language"

HTML is the basic structure of the website. If it were a building we could consider it the foundation and frame.

We can think of HTML as a series of boxes:

<html>

</html>

How it looks in the text-editor:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Your Website Name</title> </head> <body> </body> </html> ( Instead of copy-pasting this, try to type it out by hand... )

If you run into trouble or make a mess of things, return to this block of code to make sure all the essential elements are still in place.

To add content to the webpage, we will work with these basic elements within the <body> element:

<h1>A Header</h1> <p>A paragraph</p> <a href="https://google.com"></a> <img src="myimage.jpg"> <div class="mybox"></div> <div class="anotherbox"></div>

"Cascading Style Sheet"

CSS is how we control the visual look of our website. It is the facade or design of the building.

To add style, we will first make a new file named "style.css" and add it to the same folder with our "index.html" file.

Next, we will need to establish a link between the two files by adding this line of code to our <head> element in the .html file:

Once we've done that we can start adding style to the elements in our .html file. This is done by specifying properties to the elements and their classes (attributes) like so:

p { width: 500px; padding: 20px; background: rgb(255, 0, 0); color: #e0d56f; text-align: center; font-size: 20px; } img { width: 200px; } .mybox { width: 50px; height: 50px; background: green; border: 1px solid blue; } .anotherbox { width: 100px; height: 100px; background: url('myimage.jpg'); }

Let's practice with some shapes and positioning.

Shapes in css are somewhat difficult, so for our purposes we'll just work with a square, rectangle, and circle.

.square { width: 100px; height: 100px; background: red; } .rectangle { width: 200px; height: 100px; background: green; } .circle { width: 100px; height: 100px; border-radius: 50%; background: blue; }

We could make a half-circle like so:

.half-circle { width: 100px; height: 100px; border-radius: 50% 50% 0 0; background: orange; }

Positioning is another can of worms, but in the spirit of making a mess we'll give it a go.

There are a few possible positions:

/* the default position */ position: static; /* permanent position that remains even when scrolling */ position: fixed; /* positions the element relative to its position in the document */ position: relative; /* positions relative to its positioned parent or the document body */ position: absolute;

Now let's practice...

Take 10 minutes to reflect on what an interlude or rest is to you.

What forms can it take?
What environments can it be found in?
What state of mind?

Do this without looking at the computer. Close your eyes; draw and sketch in a notebook; write some words down. Don't think too hard. Try not to filter anything, capture and write anything that comes to mind.

At the end of 10 minutes begin work on a website that communicates these ideas.

If you encounter a technical problem, try to search online for the answer first. Most questions you will have about html and css have been answered countless times online already! This is the single greatest skill of the coder: searching.

If that fails, though, don't hestitate to call me over and we can work through it together!

Tools:

Color Picker CSS Generator CSS Shapes GIF Archive

Beyond:

HTML reference CSS reference w3schools Google Fonts Interneting is Hard Laurel Schwulst Class Resources Hosting - Github Pages