Submodule2.2: Media

Images

Images are defined in HTML with the <img> tag. This tag is another example of empty tag, which means that it doesn’t have an end tag.

Inside the <img> tag we have the src and alt attributes.
Thus an image tag will look like: 

<img src = "html/images/nameofimage.jpg" alt = "Alternative text">

src defines the url of the image. Usually we save images in a separate folder to which we give the name images. Thus a typical expression of the src will be : src = "html/images/nameofimage.jpg"

alt stands for alternative text and it is required for the page to validate correctly.

Inside the alt attribute we put a short description of our image. This text will be displayed if for some reason the image cannot be loaded (slow connection, wrong url) or if the user uses a screen reader.

Another useful attribute that we can add inside the <img> tag, is the title. The value of this attribute is shown when we hover over the image as you can see in the example.

<img src = "html/images/nameofimage.jpg" alt = "Alternative text" title = "The title" >

For more information: https://www.w3schools.com/html/html_images.asp

Exercise

1. Open your editor, create a new file and save it as exersice02.2.html in the folder "Exercises".
2. Modify the file. You will find the image "myphoto.jpg". in the folder "images". The browser's output should be as shown in the following image:

Solution:

Audio

The Audio element is a new feature in HTML5. 

Its tag is <audio>. Using <audio> we can add a sound file in our web page. The audio formats that are supported in HTML5 are .mp3, .wav and .ogg. Currently only Chrome, Firefox and Opera support all these formats. Similar to images, the url of our sound file is defined using the src attribute.

Example:

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

Moreover, we can add controls attribute in our audio. This will display a bar which will have playback controls ( e.g. play and volume )

Example:

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

Also, if we want to make sure that the user will be able to hear our audio regardless of which browser is using, we can upload multiple formats of the same audio. This is achieved by using the <source> element. <source> is placed between the start and end tag of <audio>. Inside the source we place the src of our audio. <source> does not have an end tag. The browser will display the first recognizable format.

Example:

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

For more information: https://www.w3schools.com/html/html5_audio.asp

Exercise

1. Open the file exersice02.2.html in the folder "Exercises" in your editor.
2. Modify and save the file. You will find the audio files "myaudio.mp3" and "myaudio.ogg" in the folder "media". The browser's output should be as shown in the following image:

Solution:

Video

Video is another new feature of HTML5.

<video> tag is used to show our video in the web page.

Handling video is very similar to audio.

A src attribute will be needed to state the url of our video.

Similar with audio, we can use <controls> attribute to display the playback bar and <source> element to place alternative formats of our video.

The video formats that are supported on HTML5 are:

.mp4, .webm and .ogg.

Currently only Chrome, Firefox and Opera support all these formats. 

 Example:

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

 For more information: https://www.w3schools.com/html/html5_video.asp

Exercise

1. Open the file exersice02.2.html in the folder "Exercises" in your editor.
2. Modify and save the file. You will find the movie file "myvideo.mp4" in the folder "media". The browser's output should be as shown in the following image:

Solution: