Technology Fundamentals

David Dao @daviddao_

David Dao @daviddao_

Before we begin:

HTML, CSS and SVG examples are all in JS Bin, which you can click and edit to play with
You can also use the inspector (⌘⎇I in Chrome) to inspect examples
Also use Javascript console (⌘⎇J in Chrome) to try Javascript code examples.

David Dao @daviddao_

HTML

Hypertext Markup Language

David Dao @daviddao_

Hypertext Markup Language (HTML)

• Markup language, not a programming language.

• Provides instruction on how to render a page.

• HTML is consists of elements built with start tags and end tags.

• Start tag example: <head>
• End tag example: </head>
• Element example: <head> .... (stuff goes here) .... </head>

David Dao @daviddao_

HTML

Basics
HTML is designed for marking up text by adding tags such as <p> to create HTML elements. HTML tags begin with < and end with >. Tags often occur in pairs of opening and closing tags. Some tags such as <img> always occur alone. Those tags usually (but not required to) have trailing slash.

Tags can have attributes. For example, <a> tag has href attribute for defining link target. Similarly, <img> tag has src attribute for defining image source.

Plain Text

David Dao @daviddao_

Use HTML to Markup

html, body, h1, p, strong, em, a, img

David Dao @daviddao_

Use HTML to Markup

David Dao @daviddao_

CSS

Cascading Style Sheets

David Dao @daviddao_

Query the DOM Tree

David Dao @daviddao_

CSS: Boxmodel

David Dao @daviddao_

CSS: Position

David Dao @daviddao_

CSS is powerful

David Dao @daviddao_

SVG

Scalable Vector Graphics

David Dao @daviddao_

Basic SVG Elements (With CSS)

David Dao @daviddao_

SVG Polygone, PolylinE

David Dao @daviddao_

SVG Groups : Basic Transforms

translation, title

David Dao @daviddao_

SVG Groups : More Transforms

rotate, scale, skewX, skewY

David Dao @daviddao_

Learn more about SVG

SVG: No-Layer

Painter's Algorithm: any pixel-paint applied later obscure any earlier paint and therefore appear to be "in front".

Text, Gradient, Patterns, Clip Mask, Image

SVG Tutorial – Mozilla Developer Network

David Dao @daviddao_

JavaScript

David Dao @daviddao_

Technology Fundamentals

Before we begin:

HTML, CSS and SVG examples are all in JS Bin, which you can click and edit to play with

You can also use the inspector (⌘⎇I in Chrome) to inspect examples

Also use Javascript console (⌘⎇J in Chrome) to try Javascript code examples.

HTML

Hypertext Markup Language (HTML)

• Markup language, not a programming language.

• Provides instruction on how to render a page.

• HTML is consists of elements built with start tags and end tags.

• Start tag example: <head>
• End tag example: </head>
• Element example: <head> .... (stuff goes here) .... </head>

Plain Text

Use HTML to Markup

Use HTML to Markup

CSS

Query the DOM Tree

CSS: Boxmodel

CSS: Position

CSS is powerful

SVG

Basic SVG Elements (With CSS)

SVG Polygone, PolylinE

SVG Groups : Basic Transforms

SVG Groups : More Transforms

Learn more about SVG

SVG: No-Layer

Text, Gradient, Patterns, Clip Mask, Image

JavaScript

BioJS Workshop - Tech Fundamentals Part 2

BioJS Workshop - Tech Fundamentals Part 2

David Dao

Technology Fundamentals

Before we begin:

HTML, CSS and SVG examples are all in JS Bin, which you can click and edit to play with

You can also use the inspector (⌘⎇I in Chrome) to inspect examples

Also use Javascript console (⌘⎇J in Chrome) to try Javascript code examples.

HTML

Hypertext Markup Language (HTML)

• Markup language, not a programming language.

• Provides instruction on how to render a page.

• HTML is consists of elements built with start tags and end tags.

• Start tag example: <head> • End tag example: </head> • Element example: <head> .... (stuff goes here) .... </head>

Plain Text

Use HTML to Markup

Use HTML to Markup

CSS

Query the DOM Tree

CSS: Boxmodel

CSS: Position

CSS is powerful

SVG

Basic SVG Elements (With CSS)

SVG Polygone, PolylinE

SVG Groups : Basic Transforms

SVG Groups : More Transforms

Learn more about SVG

SVG: No-Layer

Text, Gradient, Patterns, Clip Mask, Image

JavaScript

BioJS Workshop - Tech Fundamentals Part 2

More from David Dao

• Start tag example: <head>
• End tag example: </head>
• Element example: <head> .... (stuff goes here) .... </head>