SAIC | ATSP 3900 | Professional Practices: Web Art

Week 2 : HTML 1

Say hello and check-in
Take attendance
Discuss Rushkoff reading
Introduction Website presentations (5 mins each)
Multipage HTML
More CSS
Intro to Geocities / Neocities

Homework

Introduction Website

Create an Introduction Website using www.CodePen.io You're welcome to experiment with CSS and images as well.

It should contains both a one-paragraph informal introduction to yourself

As well as Personal Response no. 1: 25 questions (see Assignments tab).

Readings

Program or Be Programmed

by Douglas Rushkoff

CSS Review

Creating a separate CSS file

It is useful to write CSS in a separate .css file because it allows for better organization and management of your code. By separating the CSS from the HTML, it becomes easier to make changes to the styles without having to sift through the HTML code. Additionally, it allows for the reuse of styles across multiple pages, as the same .css file can be linked to each page. This can save time and effort in the long run.

New CSS material

CSS Box Model

https://www.w3schools.com/css/css_boxmodel.asp

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

cssbox

CSS Units (Rem, em, %)

CSS offers a variety of units to size elements on a webpage. Three common units are em, rem, and %.

Rem Unit

The rem unit is relative to the root element, which is typically the <html> tag. This means that the size of an element will be relative to the font-size of the root element, regardless of where it is on the page. This makes it a good unit to use for responsive design.

/* Set the font-size of the root element to 16 pixels */
html {
  font-size: 16px;
}

/* This is equal to 32 pixels */
.element {
  font-size: 2rem;
}

Em Unit

The em unit is relative to the font-size of the parent element. For example, if the font-size of the parent element is 16 pixels, 1 em is equal to 16 pixels.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* This is equal to 16px */
}

% Unit

The % unit is relative to the size of the parent element. For example, if the width of the parent element is 100 pixels, 50% width is equal to 50 pixels.

.parent {
  width: 100px;
}

.child {
  width: 50%; /* This is equal to 50px */
}

CSS Borders

CSS borders are used to add a line around an HTML element. The border property sets the style, width, and color of the border.

Here is an example:

/* Set the border style to solid, width to 2 pixels, and color to black */
.example {
  border: 2px solid black;
}

This will add a 2 pixel thick solid black border around the .example element. Other border styles include dotted, dashed, double, groove, ridge, inset, and outset.

Examples

// these are the four functions related to color
// fill()
// noFill()
// noStroke()
// stroke()

// function setup runs ONCE before everything else immediately after pressing play.
function setup() {
  // makes a canvas, first number is width second is height
  createCanvas(400, 400);
}
// everything in function draw LOOPS again and again
function draw() {
  // if 1 value: 0 is black and 255 is white
  // if 3 values: 1st red, green, blue [RGB color]
  background(255);
  stroke(0);
  strokeWeight(1);
  noFill();
  // x1, y1,x2,y2,x3,y3
  triangle(30, 75, 100, 125, 347, 42);

  strokeWeight(10);
  stroke(255, 204, 0);
  fill(255, 165, 0);

  // x, y , w ,h
  //ellipse(100,300,25,66);
  //circle(width,0,100);

  // x,y, w
  //square(width/2-100/2,height/2-100/2,100);
  // x, y, w , h
  //rect(200,200,100,300);

  beginShape();
  vertex(100, 200);
  vertex(123, 127);
  vertex(154, 50);
  vertex(200, 180);
  vertex(120, 325);
  vertex(300, 180);
  endShape(CLOSE);

  console.log(mouseX, mouseY);
}

// fill()
// noFill()
// noStroke()
// stroke()

function setup() {
  createCanvas(400, 400);
}

function draw() {
  // 1 number is greyscale, 0 is black 255 is white
  // 3 number r,g,b color / hexcode
  background(178, 172, 136);
  stroke(50, 150, 100);
  strokeWeight(20);
  fill(100, 100, 0);
  beginShape();
  vertex(30, 20);
  vertex(85, 20);
  vertex(85, 75);
  vertex(120, 230);
  vertex(120, 120);
  vertex(30, 75);
  endShape(CLOSE);

  arc(290, 60, 80, 80, PI, TWO_PI + HALF_PI);

  strokeWeight(2);
  stroke(100, 100, 0);
  fill(50, 150, 100);
  circle(width / 2, height / 2, width / 10);

  strokeWeight(20);
  point(100, 300);
}

function setup() {
  createCanvas(500, 500);
}
// this is a loop! it runs again and again!
function draw() {
  background(255);

  // Head
  stroke("#E3C292");
  fill("#E3C292");
  strokeWeight(1);
  // x, y, width, height
  rect(225, 225, 80, 100);

  // eyes
  stroke("rgb(89,16,16)");
  strokeWeight(10);
  point(250, 250);
  point(285, 250);

  // mouse position finder
  console.log(mouseX, mouseY);
  // print() does the same thing as console.log !
}

function setup() {
  // make a comment with two forward slashes
  // multiple values inside of a function need to be seperated by commas.
  createCanvas(500, 400); // this line creates a canvas. #1 is width and #2 is height of canvas.
}

// all code for this assignment needs to be within either function setup or draw
function draw() {
  // greyscale between black and white; range 0 to 255
  // RGB color is three values representing amount of red green and blue; range is 0 to 255
  background(0, 140, 255);

  // SUN
  fill("rgb(255,221,0)");
  stroke(100, 100, 100); // penstroke color
  // added layers
  circle(350, 120, 200); // circle needs an x, y, diameter

  // SOLAR RAYS

  // GRASS
  noStroke();
  fill("rgb(14,224,14)");
  // rect(x,y,w,h) x and y are top left corner
  rect(0, height / 2, width, width / 2);

  // CLOUD 1
  noStroke();
  fill(250);
  circle(45 + 20, 43 + 20, 100);
  fill(248);
  circle(71 + 20, 61 + 20, 80);
  fill(252);
  circle(110 + 20, 30 + 20, 60);
  fill(245);
  circle(128 + 20, 59 + 20, 80);

  // CLOUD 2
  noStroke();
  fill(250);
  circle(45 + 350, 43 + 40, 100);
  fill(248);
  circle(71 + 350, 61 + 40, 80);
  fill(252);
  circle(110 + 350, 30 + 40, 60);
  fill(245);
  circle(128 + 350, 59 + 40, 80);

  // BIRD 1
  // line has no fill, only stroke
  strokeWeight(2.5);
  stroke(0); //black line
  line(10 + 200, 10 + 100, 20 + 200, 20 + 100); // beginning vertex plus end vertex: (x1,y1,x2,y2);
  line(20 + 200, 20 + 100, 30 + 200, 10 + 100); // beginning vertex plus end vertex: (x1,y1,x2,y2);

  // BIRD 2
  // line has no fill, only stroke
  strokeWeight(2);
  stroke(5); //black line
  line(10 + 180, 10 + 140, 20 + 180, 20 + 140); // beginning vertex plus end vertex: (x1,y1,x2,y2);
  line(20 + 180, 20 + 140, 30 + 180, 10 + 140); // beginning vertex plus end vertex: (x1,y1,x2,y2);

  //POND

  // need both!
  noStroke();
  fill("rgb(35,35,170)");
  beginShape(); // expect some vertices to come our way
  curveVertex(274 + 30, 245); // vertex is an x and y position pair
  curveVertex(344 + 30, 221); // vertex is an x and y position pair
  curveVertex(400 + 30, 225); // vertex is an x and y position pair
  curveVertex(413 + 30, 254); // vertex is an x and y position pair
  curveVertex(451 + 30, 289); // vertex is an x and y position pair
  curveVertex(399 + 30, 315); // vertex is an x and y position pair
  curveVertex(286 + 30, 340); // vertex is an x and y position pair
  curveVertex(234 + 30, 282); // vertex is an x and y position pair

  endShape(CLOSE); // CLOSE as a parameter for endShape closes the outline

  //PIER

  noStroke();
  fill("brown");
  // quad(x1,y1,x2,y2,x3,y3,x4,y4);
  //   quad(264, 294, 308, 277, 322, 291, 277, 317);

  beginShape();
  vertex(264, 294); //x1,y1
  vertex(308, 277); // x2 y2
  vertex(322, 291); // x3, y3
  vertex(277, 317); //x4, y4
  endShape();

  // PERSON

  // HEAD

  // HAIR
}

function setup() {
  createCanvas(400, 400);
  background(255);

  // Line
  line(50, 50, 150, 50);

  // Rectangle
  rect(50, 80, 100, 60);

  // Ellipse
  ellipse(100, 200, 80, 40);

  // Triangle
  triangle(50, 300, 150, 300, 100, 230);

  // Quad
  quad(200, 50, 300, 50, 350, 120, 250, 120);

  // Arc
  arc(300, 200, 80, 80, PI, TWO_PI);

  // No fill for all shapes
  noFill();
  stroke(0);
}

function setup() {
  createCanvas(400, 200);
  background(240);

  // Filled rectangle with stroke
  fill(255, 0, 0); // Red fill
  stroke(0); // Black stroke
  rect(20, 40, 60, 60);

  // No fill, only stroke
  noFill();
  stroke(0, 0, 255); // Blue stroke
  rect(120, 40, 60, 60);

  // Fill, no stroke
  fill(0, 255, 0); // Green fill
  noStroke();
  rect(220, 40, 60, 60);

  // No fill, no stroke (invisible)
  noFill();
  noStroke();
  rect(320, 40, 60, 60); // This won't be visible
}

function setup() {
  createCanvas(400, 400);
  noStroke();

  // Using named color
  fill("red");
  rect(20, 20, 80, 80);

  // Using RGB values
  fill(0, 255, 0);
  rect(120, 20, 80, 80);

  // Using RGBA (with alpha)
  fill(0, 0, 255, 150);
  rect(220, 20, 80, 80);

  // Using HEX code
  fill("#FFD700");
  ellipse(60, 180, 80, 80);

  // Using HSB mode
  colorMode(HSB);
  fill(200, 100, 100);
  ellipse(180, 180, 80, 80);

  // Using grayscale
  colorMode(RGB);
  fill(128);
  ellipse(300, 180, 80, 80);
}

function setup() {
  createCanvas(400, 400);
  background(240);

  // Regular polygon using vertex() (hexagon, no loop or variables)
  fill(100, 200, 255, 150);
  stroke(0);
  beginShape();
  vertex(160, 100);
  vertex(130, 152);
  vertex(70, 152);
  vertex(40, 100);
  vertex(70, 48);
  vertex(130, 48);
  endShape(CLOSE);

  // Irregular polygon using curveVertex()
  fill(255, 100, 200, 150);
  stroke(100);
  beginShape();
  curveVertex(250, 80);
  curveVertex(250, 80);
  curveVertex(320, 120);
  curveVertex(300, 200);
  curveVertex(220, 180);
  curveVertex(200, 120);
  curveVertex(250, 80);
  curveVertex(250, 80);
  endShape();

  // Complex shape with holes using beginContour()
  fill(200, 255, 100, 150);
  stroke(50);
  beginShape();
  vertex(80, 300);
  vertex(180, 300);
  vertex(180, 380);
  vertex(80, 380);
  beginContour();
  vertex(110, 330);
  vertex(150, 330);
  vertex(150, 360);
  vertex(110, 360);
  endContour();
  endShape(CLOSE);
}

Other Materials

CODEPEN.io

Key Concepts:

html: hypertext markup language
css: cascading style sheets
js: javascript
p5*js