Filters

Other

D

Your name is required for this document. It is only stored on this local computer and no where else. Please enter your name below:

Lesson 5Multimedia

Knox badge
Lesson 5Multimedia
  • How to add multimedia to a website
  • I will be able to add different types of media to my website

In the last few lessons, you have been creating your own profile website using HTML. In this lesson, you will be adding more features in the form of multimedia to your website.

Find out more about each following image file types by researching the internet.

JPEG

What it stands for

What it is good for

PNG

What it stands for

What it is good for

GIF

What it stands for

What it is good for

Multimedia

Multimedia includes a range of different forms of media, such as text, graphics, audio, video, and animation, in a digital format. The combination of these types of media can, particularly with websites, improve the quality of the content.

Audio

Audio is the sound that we can hear. It includes things like music, spoken words, and sound effects. When you listen to your favourite songs, watch movies, or hear someone talking, you're experiencing audio. It's like the language of sound that helps us communicate, express emotions, and enjoy different forms of entertainment.

Video

Video is a way to see moving pictures or images. It's like watching a movie or a TV show, but it can also be shorter, like a funny clip or a music video. Videos are made up of a series of pictures called frames that change really quickly, creating the illusion of movement. When you watch a video, you can see people, places, and things in action, just like you do in real life. It's a fun way to learn, be entertained, and explore different visual stories.

Copyright

It's very important to note that audio and video, particularly on the web, are often subject to copyright

Copyright is a legal concept that protects the creations of people like artists, musicians, writers, and filmmakers. When someone creates something like a song, a book, a movie, or a piece of artwork, they automatically have the right to control how it's used and shared. This means others can't copy or use their work without permission. It's like having ownership over something you made.

Copyright helps creators make a living from their work and encourages them to keep creating new things. So, when you watch a movie or listen to a song, remember that someone worked hard to make it, and it's important to respect their rights by not copying or sharing it without permission.

Imagine yourself as a software developer and think what it would be like to have the software you worked hard to make and were intending on selling being given away for free on the Internet.

Even when you are in school, you need to be sure to check for copyright claims. 

There are several good websites where you can download material without copyright issues:

  • Pixabay
  • Pexels
  • IconArchive

Audio and video in HTML

There are a total of three different tags to add audio and video in HTML.

Audio

The <audio> tag in HTML is used to add audio, like music or sound effects, to a webpage.

In HTML you can write this as shown below:

HTML
<audio controls>
  <source src="music.mp3" type="audio/mp3">
</audio>

Video

To add video to a website you can use the <video> tag in the same way as you can use the <audio> tag as shown previously. 

In HTML you can write this as shown below:

HTML
<video controls>
  <source src="me.mp4" type="audio/mp4">
</video>
  1. Find a copyright-free audio file
  2. Add this audio to your website
  3. Find a copyright-free video file
  4. Add this video to your website

Paste your code here when you are finished

Once you have answered each of the questions, remember to save this worksheet by pressing the button at the bottom.

S2 Web Development Lessons
Provide Feedback

What did you think of this document?

!
-- DragonDocs version 0.9 --

20.08.2017

Started on DragonDocs
Created a YASS/PHP and HTML-based system for saving and retrieving data

21.08.2017
Added CSS styles to page
Added JavaScript code to the page

02.02.2018
Added the multipage option (used in my dissertation)
Added the XMLHttpRequest-based multipage requests

08.02.2018
Added the Accessibility features
Filters added

10.02.2018
Purple filter added

17.03.2018
Added the Note class
Added the Did You Know class

-- DragonDocs version 1.0 (Yosemite) --

02.10.2019
First trial of DragonDocs in teaching

04.10.2019
Added the Task, Starter, Review your learning sections

07.10.2019
Added the feedback feature
Added the Dark Mode toggle

19.09.2020
Performance gains through the removal of unnecessary code
Added the Learning Intentions and Success Criteria features
Added the school badge

31.09.2021
Changed the headings (h2) to be more consistent with my website
Added sections to the pages - sections must be preceded by a h2
Added the "I have read this section" buttons
Changed the main heading zone to gradient text like my website
Added the table of contents feature

02.02.2022
Added the Print feature
Updated the footer to feature a new gradient
Added the Test It! class
Added the green flag
Automated the table of contents using JavaScript

06.02.2022
Added the 'includes' feature to the document, allowing inclusion of other files easily
Removed the requirement that the IP address must be one of the schools I have taught at, opening these documents to the public

02.03.2022
Once a section has been read or completed, the user can now hide that section

10.10.2022
Added the Extension task class
Changed the scrollbar on Windows to match that of macOS

-- DragonDocs version 2.0 (Kilimanjaro) --

07.08.2023
Added the Save button and the ability to save 'results' or answers to a Word document

12.01.2024
Added the large numbers class
Removed the background of the page navigation

-- DragonDocs version 2.1 (Aurora) --

08.02.2024
Added the active class to active links in the bottom section

09.02.2024
Added the image upload feature

10.02.2024
Added a fix that prevents the upload of non-image files into an image upload
Added pasting images to the upload feature

11.02.2024
Added the ability to view the changelog from a document
Improved the feedback system by recording the DragonDocs User ID and the Document ID data
The feedback from DragonDocs can be accessed much easier

12.02.2024
Added the new step_by_step_mode feature, allowing sections to be viewed individually
Added the ability to lock and unlock DragonDocs

22.02.2024
Added new checkboxes to each list item in a .task or .step
Added functionality to said checkboxes to add a strikeout to steps completed

23.02.2024
Added the new 'step' class
Steps are now auto incremented in CSS so the name displays the step number
Activities are now also auto incremented to display the activity number

25.02.2024
Added the 'matcher' feature to DragonDocs
Fixed an issue in which a closed section would retain it's original height within the document navigation
Added starters and the lesson review to the navigation on the side
The learning intentions and success criteria in teaching documents have now been redesigned to match my slides design

26.02.2024
All buttons are now on the right hand side
The accessibility button now has WAI under it

-- DragonDocs version 2.2 (Serengeti) --

26.02.2024
Code has been rewritten from the ground up to be object-oriented, making additional features easier to add

28.08.2024
Changed the look of grouped multiple choice buttons

06.03.2024
Added the new dragondocs_name feature and the requires_name property which allows names to be prepended to saved documents

09.03.2024
Added code so when the user types in their name and hits the enter key it will save that data and close the modal window
Added the new DragonShow and DragonDocs Link - a connection between both services that allows the presenter to communicate with users of DragonDocs from a DragonShow
Added the new timer option which is sent from DragonShows

04.04.2024
The matcher feature is no longer embed from jamiebalfour.scot but actually a feature of DragonDocs
Made DragonDocs 100% object-oriented, meaning much better management and better performance

05.04.2024
Made subtle changes to the interface to tidy it up a bit

06.04.2024
The multiple choice questions are now also part of the object oriented interface

09.04.2024
As requested, h3 elements are now included in the 'floating navigation'
The active navigation element now becomes bold and the left border has been retired

Time left

: