Comm Lab Networked Media Week 3


Working with type

CSS has a rich support for type or text formatting. Here are a few of the capabilities:

font-family: Times, serif; - Web Safe Fonts

font-size: 20px;

font-weight: bold;

font-style: italic;



Elements can be positioned in a number of ways in CSS.

Relative positioning moves the relative to where it would normally be:
position: relative; top: 25px; left: 25px;
Absolute positioning moves the element to a specific position relative to it's container:
position: absolute; top 10px; left: 10px;

Grid Layouts

A class of CSS layouts has appeared called grids. These are starting points for grid based layouts and easier to use that building from scratch. One of the most well known is the 960 Grid which is a 960 pixel wide grid based layout.

To use it, you download and included it on your page:

<link rel="stylesheet" type="text/css" href="960_12_col.css" />			
The above version is the 12 column version.

You specify in your block elements how many columns they should occupy in any given row:

<div class="container_12 clearfix">
	<div class="grid_12">All 12 Columns</div>			
	<div class="grid_4">4 Columns</div>		
	<div class="grid_3">3 Columns</div>			

All 12 Columns
4 Columns
3 Columns

More Information

HTML & CSS by Jon Duckett is a fantastic book that takes you through a lot of how to work with HTML and CSS to make sites look the way you want. I highly recommend it.

The HTML and JS Document Object Model

HTML creates a document, JavaScript can access that document through a data structure called the DOM (or Document Object Model). This structure allows us to access each individual element as an object with a parent/child relationship or directly by ID:

Normal JavaScript

var thediv = document.getElementById('mydiv');
thediv.innerHTML = "soemthing else";

Some things that you might want to look over: visibility and createElement and appendChild

More Information

JavaScript HTML DOM


p5.js has a separate library called p5.dom.js that you will need to download and include. Doing so gives us a bunch of new methods that we can use on an Element object in p5 (in brown).

Here is an example that creates a div and moves it around:

var textDiv;
var x = 100;
var y = 100;

function setup() {
  textDiv = createDiv("Here is something");

function draw() {
  x = x + random(-2,2);
  y = y + random(-2,2);

More Information

Beyond the Canvas


JavaScript in the browser is very often event driven. This means that we can specify code to run when an event takes place. Some of these are driven by the browser doing it's thing such as loading a page and some are driven by user interaction such as clicking a link or hovering over an element. Regardless of the type of event, we use the "addEventListener" method on all of the DOM elements to specify what to listen for and what code to run when the event is triggered.

element.addEventListener('event name', functionToRun);

functionToRun() {
	// Code to execute
JavaScript HTML DOM EventListener


The load event is very important as it is a way to specify what to do when a document is done loading, it also signifies when it is safe to call elements on the DOM:

function init() {
	var thediv = document.getElementById('mydiv');
window.addEventListener('load', init);				


var thediv;
function init() {
	thediv = document.getElementById('mydiv');
	thediv.addEventListener('mouseover', hideit);

function hideit() { = "hidden";
window.addEventListener('load', init);				

Many many more

Wikipedia DOM Events

Media Elements and the Canvas

Audio and Video