August 25, 2022

Agenda

  • Questions?
  • Setting up your work environment
  • HTML/CSS/SVG basics

Setting up your work environment

Developer Tools

I’ll be using the Developer Tools in Google Chrome.

Open Google Chrome and click on the View > Developer > Developer Tools option.

  1. What tools are available?
  2. Open the Ghostscript Tiger svg file and using the Elements panel, try to delete some part of the Tiger

IDE

  • I’ll be using VS Code, but you are welcome to use whatever text editors or IDEs you are most comfortable with

HTML

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Your title goes here</title>
    <!-- header information goes here -->
  </head>

  <body>
    <!-- content goes here -->
  </body>
</html>

Syntax Checker

There are lots of sloppy ways to code HTML that your browser frequently will be able to handle.

That said, a syntax checker can often be helpful in debugging: http://validator.w3.org/

Document Object Model (DOM)

The nested structure of tags form a tree, with the root element being <html></html> and then all of its children contained within

CSS: Cascading Style Sheets

CSS

  • Allows for the separation of content and appearance
  • CSS is rule-based, using names, ids, and classes to specify rules that are applied sequentially (i.e. they cascade)
  • Different ways of using it
    • Add style attribute to apply to a specific tag: <tag style=“…”> … </tag>

CSS

Inline css applied to the document using the <style> tag

selector {
  property1: value1;
  property2: value2;
}

CSS

Selectors can be:

Names (to apply to all tags of that name)

  • name { … }**

IDs (applying to specific tags with that unique id)

  • #id { … }**

Classes (to allow for user-defined groups)

  • .class { … }**

CSS

SVG

SVG canvas and simple shapes

First we need to create a canvas for our shapes and text.

<svg width="500" height="500">
</svg>

We can add a circle, with needs the coordinates for the circle center (cx and cy) and a radius (r):

<svg width="500" height="500">
  <circle cx="250" cy="250" r="50" />
</svg>

Move the circle around, what do you notice about where (0, 0) is in the canvas?

SVG canvas and simple shapes

We can use CSS syntax to style our shapes.

<svg width="500" height="500">
  <circle cx="250" cy="250" r="50" 
           style="fill:yellow; stroke:black; stroke-width=5px"/>
</svg>

Other shapes include:

  • Rectangle: set the x and y coordinates for the upper left corner, width and height.
<svg width="500" height="500">
   <rect x="50" y="50" width="200" height="100" 
          style="fill:red; stroke:black; stroke-width:3px"/>
</svg>

SVG canvas and simple shapes

Other shapes include:

  • Line: set the x and y coordinates for the beginning and the end of the line
<svg width="500" height="500">
     <line x1="30" y1="30" x2="200" y2="80"/>
</svg>
  • Text: set the x and y coordinates for where the text starts
<svg width="500" height="500">
     <text x="100" y="100">Some text</text>
</svg>

Challenge: Draw a smiling face with the shapes we’ve talked about thus far

SVG paths

For paths, you start by “moving your pen” to coordinates x and y (M 150 200) and then you can specify lines to different points (L 200 300) and close the path with a z.

<svg width="500" height="500">
     <path d="M 150 250 L 200 300 L 250 250 z" />
</svg>

SVG grouping and transformations

We can create groups, which is especially handy for transformations (scaling the image, and flipping the y axis, for example).

<svg width="500" height="500">
  <g transform="translate(0, 500) scale(10, -10)">
    <circle cx="5" cy="5" r=".3"/>
    <circle cx="8" cy="8" r=".3"/>
    <circle cx="11" cy="5" r=".3"/>
    <circle cx="14" cy="9" r=".3"/>
  </g>
</svg>