🖼️Art and Technology Unit 12 Review

12.2 Web Technologies for Artists (HTML, CSS, JavaScript)

🖼️Art and Technology
Unit 12 Review

12.2 Web Technologies for Artists (HTML, CSS, JavaScript)

Written by the Fiveable Content Team • Last updated September 2025

🖼️Art and Technology

Unit & Topic Study Guides

12.1 History and Evolution of Net Art

12.3 Social Media and Online Platforms as Artistic Mediums

12.4 Creating and Curating Online Art Exhibitions

Web technologies form the foundation of interactive digital art. HTML structures content, CSS styles it, and JavaScript adds dynamic behavior. Together, they enable artists to create engaging online experiences.

These tools offer endless possibilities for artistic expression. From responsive designs that adapt to different devices to multimedia integration and canvas-based animations, web technologies empower artists to push creative boundaries in the digital realm.

HTML, CSS, and JavaScript Fundamentals

Structure of HTML, CSS, and JavaScript

HTML (Hypertext Markup Language) structures web page content using elements and tags
- Elements consist of opening and closing tags (<tag>content</tag>) or self-closing tags (<tag />)
- Document structure includes <!DOCTYPE html> declaration, <html>, <head>, and <body> elements
- Common elements: <div> (container), <p> (paragraph), <h1> to <h6> (headings), <a> (hyperlink), <img> (image), <ul> (unordered list), <ol> (ordered list), <li> (list item)
CSS (Cascading Style Sheets) presents and styles web page content
- Selectors target elements, classes (.class), or IDs (#id) and apply properties and values
- Box model consists of content, padding, border, and margin
- Positioning options: static, relative, absolute, fixed
- Layout properties: display (block, inline, inline-block), float, flex, grid
JavaScript adds interactivity and dynamic behavior to web pages
- Variables declared using var, let, or const
- Data types include number, string, boolean, array, object
- Control structures: if-else, switch, for, while
- Functions defined as function name(parameters) { // code }
- DOM (Document Object Model) manipulation accesses and modifies HTML elements using JavaScript

Web-based Art and Interactivity

Web technologies for interactive art

JavaScript manipulates HTML elements
- Accessing elements: document.getElementById(), document.querySelector(), document.querySelectorAll()
- Modifying element content: element.innerHTML, element.textContent
- Modifying element attributes: element.setAttribute(), element.getAttribute()
- Modifying element styles: element.style.property = 'value'
Event handling enables interactivity
- Event listeners attached using element.addEventListener('event', function)
- Common events: click, mouseover, mouseout, keydown, keyup
- Event object provides access to event properties and methods
Animation and transitions create dynamic visual effects
- CSS transitions use transition property, transition-duration, transition-timing-function
- CSS animations defined with @keyframes rule, animation property, animation-duration, animation-iteration-count
- JavaScript animations achieved using setInterval(), setTimeout(), requestAnimationFrame()

Responsive design for accessibility

Media queries adapt styles based on device characteristics
- Breakpoints defined using @media (min-width: value) { /* styles */ }
- Target specific devices or screen sizes
Flexible layouts ensure content adapts to different screen sizes
- Percentage-based widths and heights
- Flexbox properties: display: flex, flex-direction, justify-content, align-items
- CSS Grid properties: display: grid, grid-template-columns, grid-template-rows, grid-area
Responsive images and media optimize performance and accessibility
- max-width: 100% and height: auto for fluid images
- <picture> element and srcset attribute serve different images based on device characteristics
- Responsive embedded media (videos) using aspect-ratio and object-fit properties

Multimedia integration in web art

Images embedded using <img> element with src, alt, width, height attributes or as background images using background-image CSS property
- Common image formats: JPEG, PNG, GIF, SVG
Audio integrated using <audio> element with src, controls, autoplay, loop attributes
- Audio formats: MP3, WAV, OGG
- JavaScript controls audio playback: play(), pause(), volume, currentTime
Video embedded using <video> element with src, controls, autoplay, loop, width, height attributes
- Video formats: MP4, WebM, OGG
- JavaScript controls video playback: play(), pause(), volume, currentTime
Canvas enables dynamic graphics and animations
- <canvas> element with width, height attributes
- JavaScript drawing methods: getContext('2d'), fillRect(), strokeRect(), beginPath(), moveTo(), lineTo(), arc()
- Pixel manipulation: getImageData(), putImageData(), createImageData()

🖼️Art and Technology Unit 12 Review