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.
- 30 minutes – show and tell
- 15 minutes – html lecture
- 30 minutes – github pages revisited, setting up file structure
~ break ~
- 45 minutes – html tutorial and class exercise
- 20 minutes – this week’s assignment
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
the box model
DOM tree more detail
what is HTML?
complete list of html tags
block vs inline elements
the ‘normal flow’
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.
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.
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.
In addition to the essential
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.
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.
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.