HTML Basics #3: Media Files and Graphics

    In this article, we are going to focus on embedding media files in HTML. Media files include images, videos, audio, and plug-ins. These media files are very important to web design, they help you improve the appearance of the web pages and make them more informative and interactive as well.

    Let’s start with images.

    Table of Contents

    Image

    The <img> tag is used to display an image in HTML. The syntax is as follows:

    <img src="url" alt="alternatetext">

    The <img> tag is empty, it contains attributes only, and does not have a closing tag. There are two attributes that are required by the <img> tag, src specifies the path to the actual image file, and alt indicates the alternative text for the image. When the image fails to load for some reason, the browser will display the alternative text instead.

    <img src="img_chania.jpg" alt="Flowers in Chania">

    There are also optional attributes for the <img> tag, width and height, for example, specifies the size of the image. The unit is in pixels (px).

    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

    You should always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.

    Another interesting thing I want to mention is the image map. It allows you to create clickable areas on an image. Here is an example from w3schools: https://www.w3schools.com/html/html_images_imagemap.asp

    <img src="workplace.jpg" alt="Workplace" usemap="#workmap">
    
    <map name="workmap">
      <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
      <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
      <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
    </map>

    The first line loads the image and the usemap attribute links this image to the map whose name is workmap. Line 4 to 6 each defines a clickable area, whose destination is specified using the href attribute.

    Video

    The <video> element is used to embed videos into the webpage.

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>

    The width and height attributes define the size of the video. If they are not set, the page might flicker while the video loads.

    The control attributes adds video control buttons like play, pause and volume.

    The <source> element allows us to specify the video file using the src attribute. The type attribute is used to define the type and format of the file. When there are multiple <source> elements, the browser will play the first one that it recognizes.

    The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

    To start a video automatically, use the autoplay attribute:

    <video width="320" height="240" autoplay>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>

    Add muted after autoplay to let your video start playing automatically (but muted):

    <video width="320" height="240" autoplay muted>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>

    Audio

    The <audio> element is used to embed videos into the webpage, and it works just like the <video> element.

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>

    The control attribute adds audio control buttons, the <source> element specifies the audio file, and if the browser does not support the <audio> tag, the text will be displayed.

    The autoplay and the muted attributes also work here:

    <audio controls autoplay muted>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>

    SVG Graphics

    Scalable Vector Graphics (SVG) is used to define graphics for the Web.

    For example, the following code defines a circle:

    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
    </svg>

    We can use SVG to draw some relatively complicated shapes like this:

    <svg height="130" width="500">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
      <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
      Sorry, your browser does not support inline SVG.
    </svg>

    If you are interested, here is a tutorial on SVG graphics: https://www.w3schools.com/graphics/svg_intro.asp. But right now, it is not our focus. In the next article, we are going to talk about forms in HTML.

    Leave a Reply

    Your email address will not be published. Required fields are marked *