OIM3690 - Web Technologies

contain

Multimedia and Embedding

Linking

  • Linking refers to connecting one webpage to another or to a file on a website or server.
  • To create a link to a YouTube video:
    • Copy the URL and paste it in an <a> tag.
    • Example:
      <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Ed Sheeran - Shape of You</a>
  • To create a link to a file:
    • Specify the path to the file within the href attribute of the <a> tag.
    • Examples:
      <a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">dummy.pdf</a>
<a href="README.md">README</a>

Embedding

  • Embedding refers to inserting an object within a webpage, allowing the object to appear as part of the page's content.
    • Embedded objects can be positioned and floated using styles.
    • Examples: YouTube videos, interactive maps, and social media posts.
  • Tags used for embedding:
    • <audio>, <video>: new in HTML5
    • <iframe>: commonly used for embedding external content
    • <object>/<embed>: going out of fashion
    • <canvas>: used to create dynamic and interactive graphics and animations.
    • <svg>: used to create 2D-based vector graphics, such as logos and illustrations.

<audio> and <video>

  • Attributes:
    • autoplay="autoplay"|autoplay (starts on page load)
    • loop="loop" (plays continuously)
    • controls="controls" (displays controls)
    • src="path/to/file"( similar to src for <img>)
    • height and width (for <video> only)
  • The end tag </audio> / </video> is required
  • Supported media formats

<audio> and <video> Examples

  • <audio autoplay controls src="media/mymusic.mp3">
  Your browser does not support the <code>audio</code> element.
</audio>

  • <video controls muted src="media/kittens.mp4" height="300"></video>

<iframe>

  • <iframe> is an HTML inline element that represents a nested browsing context.
    • It can be used to embed another HTML page into the current one.
    • It has many security concerns
  • Examples:
    • Embedding a web page
      <iframe src="index.html" frameborder="0" width="800"></iframe>
    • Embedding YouTube/Vimeo video, Google map, Spotify/SoundCloud playlist
  • Note: embedding twitter and instagram content requires a different approach.

<svg>

  • <svg> stands for Scalable Vector Graphics (SVG)
    • It is an XML-based markup language for describing two-dimensional based vector graphics.
    • SVG is, essentially, to graphics what HTML is to text.
    • It is an excellent choice for creating responsive graphics that look good on screens of any size.
  • Example: Find the SVG logo of CNN.com.

Two Types of Images - Raster vs. Vector

  • Raster images are defined using a grid of pixels.
    • .bmp, .png, .jpg, .gif
  • Vector images are defined using algorithms to create shapes and paths.
    • Vector image files contain information about the shapes and paths used to create the image.
    • See the difference: vector-versus-raster.html
  • More Resources on SVG:

Questions?

global styles