to class -- to about -- to syllabus -- to people -- to the library

building the house

We will use this class to re-visit the basics of HTML, and to make sure our Github Pages websites are working.

Why is writing HTML like building a house? Structure is important: you have to lay the foundations before you start decorating, and be careful when you want to add an extension! A little HTML can go a long way, and getting it right can save you hassle later on.

class plan:

show and tell: personal websites

Show and tell – talk about Laurel’s text, your plans for your websites, and the websites you discovered this week. What did you think of the reading? Did you do things in a different order? How did you relate what you learned to what you did in the prototyping class yesterday?

lecture: HTML and markup

markup languages
  marking up
  marking down
  elements
    document structure
    the box model
    RIP

document structure
  page structure
  DOM tree more detail

HTML
  what is HTML?
  complete list of html tags

block vs inline elements
  inline elements
  block elements
  the ‘normal flow’

attributes
  html attributes
  display property

pure HTML
  /r/spartanweb
  links.net
  writing html in html
  pure html are.na channel
  kill styles results page

Tutorial: HTML structure and hierarchy

We will re-visit Github pages first to make sure everyone is on board (help your friends!). After that, we’ll make the file structure that will house this week’s assignment.

terminal commands
simple git commands

If we have time left at the end of the class, we’ll also start adding some HTML to our personal websites. Using the prototypes you made last class, start to plan a layout.

Assignment:

Using just HTML, experiment with 10 different ways to format a recipe.

This week’s assignment will follow on from themes introduced in your studio class concerning layout, navigation, and legibility, and from the theme of hierarchy explored in this week’s lab. We will take this recipe for Borscht – a Ukranian beetroot soup that has itself been remixed and reworked thousands of times – and experiment with laying it out in different ways.

You will use your Github repository to record each of these assignments, which we will go over in class. Each assignment should be done in a separate HTML file, which should live in a folder called ‘assignment1. In the ‘assignment1’ folder, there should also be an ‘index.html’ page that contains a link to each of these pages. On your class homepage, there should be a link to this ‘assignment1/index.html’ page. (neat, you just made a website!)

Step 0 (optional, but recommended):
Make the borscht (it’s delicious). While you make it, think about the points at which you find yourself reaching for the recipe again. How do you read the recipe differently before and after you’ve cooked it? Did you miss any steps? Is this recipe well-designed? Did you adapt it at all? (if you make an alternative borscht in this step, you may use that recipe as the basis for the next two steps).

If you don’t make the borscht (or even if you do, perhaps while it is simmering), look at some other recipes and think: does this recipe work in this format? What is the trade-off for convention and novelty here? Are there some types of recipes that work better one way than another? What does it mean for a recipe to work? What other kinds of rules and instructions follow these kinds of structural conventions? What would it mean if a recipe was a conversation? Or IKEA instructions? Or like a table with chairs around it, indicating where you should sit?

Record answers to these questions as part of your documentation.

Step 1:
In addition to the essential html, head, title and body elements, using only the elements:

lay out the borscht recipe in 5 different ways. Save each of these as a separate HTML file. You may re-arrange the text, but not add or delete anything, and re-arranging should complement different arrangements, not replace them.

Think about how different configurations, spacings and emphases create a different idea of space and time in the recipe.

Step 2:
Using the HTML elements from the previous step, and in addition

lay out the borscht recipe in 5 more ways. Link elements may link to other parts of the text, but not outside.

Think about the hierarchy and links between the different elements: what kinds of hierarchies confer different meaning to the text?

You may not use any CSS for either of these exercises. This includes using the <style> tag, which is just CSS but without a separate file.

This assignment involves doing and it involves thinking. Both of these processes (sketches, notes, thoughts), along with anything you struggled with, should be documented as a separate HTML page on your website (formatting totally up to you), that is linked to the main page.

This assignment was inspired by a conversation with Lucy Siyao Liu, and borrows its form from Laurel Schwulst’s exercise 25 Variations.

Readings

chapters 1-8 (they’re like 1 page!!) TIL HTML J4F -> this will help you a lot with your task! It’s a tutorial pdf that does a great job of explaining how different parts of a page work.