You have 3 free guides left 😟

Light

You have 3 free guides left 😟

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

3 min read•july 23, 2024

Web technologies form the foundation of interactive digital art. structures content, styles it, and 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

Top images from around the web for Structure of HTML, CSS, and JavaScript

HTML5 Series: Estructura y secciones de los documentos | Baluart.NET View original
Is this image relevant?
Chapter 5 – Styles and CSS – Web Design Primer View original
Is this image relevant?
HTML5 Series: Estructura y secciones de los documentos | Baluart.NET View original
Is this image relevant?
Chapter 5 – Styles and CSS – Web Design Primer View original
Is this image relevant?

1 of 2

Top images from around the web for Structure of HTML, CSS, and JavaScript

HTML5 Series: Estructura y secciones de los documentos | Baluart.NET View original
Is this image relevant?
Chapter 5 – Styles and CSS – Web Design Primer View original
Is this image relevant?
HTML5 Series: Estructura y secciones de los documentos | Baluart.NET View original
Is this image relevant?
Chapter 5 – Styles and CSS – Web Design Primer View original
Is this image relevant?

1 of 2

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()

AP® and SAT® are trademarks registered by the College Board, which is not affiliated with, and does not endorse this website.

About Us

About Fiveable Blog Careers Testimonials Code of Conduct Terms of Use Privacy Policy CCPA Privacy Policy

Resources

Cram Mode AP Score Calculators Study Guides Practice Quizzes Glossary Crisis Text Line Request a Feature

Stay Connected

AP® and SAT® are trademarks registered by the College Board, which is not affiliated with, and does not endorse this website.

About Us

About Fiveable Blog Careers Testimonials Code of Conduct Terms of Use Privacy Policy CCPA Privacy Policy

Resources

Cram Mode AP Score Calculators Study Guides Practice Quizzes Glossary Crisis Text Line Request a Feature

AP® and SAT® are trademarks registered by the College Board, which is not affiliated with, and does not endorse this website.

Back

Glossary

You have 3 free guides left 😟

You have 3 free guides left 😟

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

HTML, CSS, and JavaScript Fundamentals

Structure of HTML, CSS, and JavaScript

Top images from around the web for Structure of HTML, CSS, and JavaScript

Top images from around the web for Structure of HTML, CSS, and JavaScript

Web-based Art and Interactivity

Web technologies for interactive art

Responsive design for accessibility

Multimedia integration in web art

© 2024 Fiveable Inc. All rights reserved.

AP® and SAT® are trademarks registered by the College Board, which is not affiliated with, and does not endorse this website.

About Us

Resources

Stay Connected

© 2024 Fiveable Inc. All rights reserved.

AP® and SAT® are trademarks registered by the College Board, which is not affiliated with, and does not endorse this website.

About Us

Resources

© 2024 Fiveable Inc. All rights reserved.

AP® and SAT® are trademarks registered by the College Board, which is not affiliated with, and does not endorse this website.

Back

Next