- HTML - Hypertext Markup Language
- aka The content
- Hypertext - directional hyper links. Words are associated with another file. By clicking on the link you jump to the other file.
- Markup - language used to describe formatting and placement. Other markup languages include Wikimarkup
- Language - self-explanatory!
- HTML reference
- CSS - Cascading Style Sheets
- aka The Style
- Where HTML is said to be your content, your CSS describes its style. CSS is used to describe colors, placement, fonts, size of objects, and more.
- CSS has a specific format. Each part of your website from the largest to smallest detail is an element. With CSS, you specify what elements on your website you want to modify, then give rules for how to style those elements.
- You specify placement on the page with CSS. Although one could specify exact placement (like specifying x,y position exactly), you must keep in mind the wide variety of screen sizes from phone to desktop browser size. Therefore, spend some time learning various approaches to positioning.
- CSS reference
- Inline Block tutorial
- CSS position tutorial
- For Interaction, events and more
Intro to HTML and CSS from P5JS
Notes on HTML and CSS coming from a background in P5JS/Processing
Working with the DOM
- DOM stands for The Document Object Model. Imagine your webpage is a tree structure where each element is a node on that tree representing a part of the document
- Web browsers use an internal DOM model in this tree structure with the topmost node named as “Document object”. When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen.
- There are libraries that make it easier to work with the DOM. These include jQuery as well as P5DOM that works with the P5JS library
- Intro to DOM manipulation and events with P5JS
- Info on working with the Dom in P5JS with the P5Dom library
- Event Listeners with P5Dom
Warm-up Project ideas
- Building a Text Editor in the browser - starter code
- You can build a basic text editor, styling your text (color, size, etc) with CSS
- Jquery tutorial on W3Schools
- Code School
- A re-introduction to JS by Mozilla