September 13, 2022. HTML + CSS

Week 3, Agenda

  1. Lecture: HTML
  1. Review HTML
  1. More HTML
  1. Workshop
  1. Interview Exercise
  1. Review HTML Entries
  1. Lecture: CSS
  1. Intro CSS

Lecture: HTML


Lecture Recording:


Review

Why HTML? Why websites?
  • HTML is sort of like a “raw material” for publishing and communicating on the internet.
  • Using platforms is less “raw”, but no necessarily bad. Platforms provide connectivity and speed, in exchange for standardization. They’ll have rules (e.g. 10 image limit for an instagram post, a length limit for videos on TikTok…), and you can’t really define the ambiance or the flow of the experience. In contrast, coding your own website comes with more creative freedom, in exchange for a slower process that takes more work. Everything comes with its pros and cons.
  • HTML was originally made for scientific papers. Now we might say it’s modeled after books. 
  • Artists can use websites to make interactive art books.

Some examples of lo-fi / html-esque webpages
  • jollo.org - a personal website of an artist named fanfare

Basic parts of an HTML file:

  • <head> contains metadata
  • <body> contains content
  • HTML consists of elements, which are made with tags.
  • Elements that contain other elements begin with an opening tag and end with a closing tag
  • for example: <h1>Header 1</h1>
  • Elements that don’t contain other elements are self-closing. They just have one tag
  • for example: <br/>
  • Tags can contain attributes which are like special settings
  • for example: <img width="300px" src="photo.jpg"/>
  • Information has a structure that can communicate hierarchy and order.

Demo: Remixing a wikipedia page.

Review of tags
  • Headers: <h1>, <h2> … <h6>
  • Paragraphs: <p>
  • Line Breaks: <br/>