Glossary

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?

  • HTML5 Series: Estructura y secciones de los documentos | Baluart.NET 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?

  • HTML5 Series: Estructura y secciones de los documentos | Baluart.NET 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()

Key Terms to Review (19)

Accessibility Standards: Accessibility standards are a set of guidelines and best practices that aim to ensure web content is usable by people with disabilities. These standards help designers and developers create inclusive digital experiences, focusing on aspects like visual, auditory, and cognitive accessibility, which are crucial for effective communication and interaction in web technologies.
Bitmap images: Bitmap images, often referred to as raster images, are digital images composed of a grid of pixels, where each pixel represents a specific color. This format is commonly used in graphic design and web development due to its ability to capture detailed and complex imagery, but it also comes with limitations in terms of scalability and file size. Understanding bitmap images is essential for artists working with various web technologies, as they play a crucial role in how visuals are displayed and manipulated online.
Bootstrap: Bootstrap is a popular front-end framework that allows developers to create responsive and visually appealing websites quickly and easily. By providing pre-designed components like navigation bars, buttons, and forms, it streamlines the web design process while ensuring consistency in design. This framework is built with HTML, CSS, and JavaScript, making it a powerful tool for artists and designers who want to bring their creative visions to life on the web.
Color theory: Color theory is a conceptual framework that explains how colors interact, combine, and can be manipulated to create visual harmony and emotional impact. It encompasses color mixing, the color wheel, and relationships between colors, influencing artistic design and expression across various mediums and technologies.
Css: CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and overall visual aesthetics of web pages, making it essential for creating visually appealing and organized online content. CSS allows designers and developers to separate content from design, enabling more efficient styling and maintenance.
Front-end developer: A front-end developer is a web specialist responsible for creating the visual and interactive aspects of a website that users engage with directly. They use technologies like HTML, CSS, and JavaScript to build user-friendly interfaces, ensuring that the design is not only aesthetically pleasing but also functional across different devices and browsers. Their work focuses on the client side of web applications, blending creativity with technical skills to enhance the overall user experience.
HTML: HTML, or HyperText Markup Language, is the standard language used to create and design documents on the web. It structures content by using various elements, such as tags and attributes, to define headings, paragraphs, links, images, and other media. This foundational role in web development connects it closely with CSS and JavaScript, which complement HTML by adding styles and interactivity to web pages.
HTTP: HTTP, or Hypertext Transfer Protocol, is the foundation of data communication on the World Wide Web, enabling the transfer of hypertext documents and resources. It defines how messages are formatted and transmitted, allowing web browsers and servers to communicate effectively. HTTP works alongside other web technologies to facilitate the retrieval and display of content, making it essential for artists to understand in the context of web design and development.
Javascript: JavaScript is a high-level programming language that enables interactive elements on websites, allowing developers to create dynamic content and enhance user experience. It works in conjunction with HTML and CSS, providing the functionality that brings static web pages to life. JavaScript is also commonly used in programming for interactive installations, enabling real-time responses to user input and environmental changes.
Jquery: jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It enables artists to create interactive and dynamic web experiences without needing to write extensive amounts of JavaScript code. This library is built on the principle of 'write less, do more', providing an easier way to manipulate the DOM and handle events.
Mobile-first design: Mobile-first design is an approach to web development that prioritizes creating websites for mobile devices before designing for larger screens. This method acknowledges the growing reliance on smartphones and tablets for internet access, ensuring that the user experience is optimized for smaller displays. By starting with mobile, designers focus on essential features and content, which can then be expanded as the screen size increases.
Prototyping: Prototyping is the process of creating a preliminary model or version of a product to test and refine its design before full-scale production. This technique allows creators to explore ideas, visualize concepts, and gather feedback, ultimately leading to improved functionality and aesthetics. Prototyping is essential in both digital and physical realms, enabling artists and developers to iterate quickly and efficiently on their ideas.
Responsive Design: Responsive design is an approach to web design that ensures a website's layout and content adapt seamlessly to various screen sizes and devices, providing an optimal viewing experience. This design technique focuses on creating fluid grids, flexible images, and CSS media queries to enhance usability across different platforms. The primary goal of responsive design is to ensure that users have a consistent and engaging experience, regardless of whether they're accessing a site on a desktop, tablet, or smartphone.
Typography: Typography is the art and technique of arranging type to make written language legible, readable, and visually appealing. This involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing. Good typography enhances communication by ensuring that the text is not only informative but also engaging and aesthetically pleasing.
UI Designer: A UI designer, or User Interface designer, is responsible for designing the visual layout and interactive elements of a digital product, ensuring that it is both aesthetically pleasing and user-friendly. They focus on how the product looks and feels to the user, creating intuitive interfaces that enhance the user experience. This role requires a deep understanding of design principles, as well as proficiency in various web technologies that allow them to translate their designs into functional interfaces.
User Experience (UX): User Experience (UX) refers to the overall experience a person has when interacting with a product, system, or service, especially in terms of how easy and enjoyable it is to use. This encompasses various elements, including usability, accessibility, and pleasure provided in the interaction. A positive user experience is crucial as it can lead to increased user satisfaction, loyalty, and overall engagement with digital content and technology.
Vector Graphics: Vector graphics are digital images created using mathematical equations to define shapes, lines, and colors, allowing for scalability without loss of quality. This type of graphics is composed of paths defined by a start and end point, along with other points, curves, and angles. Unlike raster images, which are made of pixels, vector graphics maintain sharpness and clarity at any size, making them ideal for various applications in design and digital art.
W3c: The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the web. It focuses on creating protocols and guidelines that enhance the interoperability and usability of web technologies, including HTML, CSS, and JavaScript. By establishing these standards, W3C plays a crucial role in making web content accessible, ensuring consistency across various platforms and devices, and fostering innovation in web development.
Wireframing: Wireframing is the process of creating a visual blueprint for a digital product, showcasing its layout, structure, and functionality without focusing on design details. It acts as a guide for developers and designers, highlighting how different elements of a web page or application will interact. This foundational step is essential for artists and technologists to align their vision before diving into the more intricate aspects of development using technologies like HTML, CSS, and JavaScript.
© 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
Practice QuizGlossary
Practice QuizGlossary
Next guide