Web Design Using Advanced
HTML
(Inserting Media: Image, Video,
and Music)
HTML
• HYPERTEXT MARKUP LANGUAGE.
• TEXT-BASED APPROACH TO DESCRIBING HOW CONTENT CONTAINED WITHIN AN HTML FILE IS
STRUCTURED.
• TELLS A WEB BROWSER HOW TO DISPLAY THE TEXT, IMAGES AND OTHER FORMS OF
MULTIMEDIA ON A WEBPAGE.
INSERTING AN IMAGE
SETTING THE IMAGE DIRECTORY
The image source where src=”Folder
3/dog.jpg” serves as directory of the photo
that was included inside HTML document. This
slash (/) indicates that “dog.jpg” is inside the
“Folder 3” folder. There can be many slashes
depending on the number of subfolders
where the file is stored
WIDTH AND HEIGHT OF AN IMAGE
This sets the width and height of the
image the measure in pixels but we
can make a percentage value for
the width element.
EMBEDDING A VIDEO
SUPPORTED VIDEO FORMATS
Browser
MP4
WebM
Ogg
Yes
No
No
Chrome
Yes
Yes
Yes
Firefox
Yes
Yes
Yes
Safari
Yes
No
No
Opera
Yes
Yes
Yes
Internet Explorer
TYPES OF MEDIA FOR CODING PURPOSES:
Media Types
File Format
Types
MP4
Video/mp4
WebM
Video/webm
Ogg
Video/ogg
BACKGROUND AUDIO
SUPPORTED AUDIO FORMATS
Browser
MP4
WebM
Ogg
Yes
No
No
Chrome
Yes
Yes
Yes
Firefox
Yes
Yes
Yes
Safari
Yes
Yes
No
Opera
Yes
Yes
Yes
Internet Explorer
TYPES OF MEDIA FOR CODING PURPOSES:
Media Types
File Format
Types
MP4
audio/mp4
WebM
audio/webm
Ogg
audio/ogg
REMINDERS
• PUT MEDIA FILES IN A RIGHT PLACE.
• DO NOT FORGET THE SRC ATTRIBUTE TO INDICATE THE FILE DIRECTORY.
• CLASSIFY THE MEDIA YOU WANT TO USE.
• MODIFY THE SCREEN SIZE DEPENDING ON THE DESIGN YOU WANT TO BUILD.
• ALWAYS BE AWARE OF THE FILE FORMAT.
• ALWAYS SEE THE DIRECTORY OF THE MEDIA FILES
GENERALIZATION
1. WHAT IS HTML?
2. WHY IS IT IMPORTANT TO INSERT SRC ATTRIBUTE?
3. WHAT ARE THE THREE TYPES OF AUDIO AND VIDEO FORMATS?
4. WHAT IS THE IMPORTANCE OF CHOOSING THE RIGHT FORMAT IN YOUR WEBPAGE?
APPLICATION
GROUP YOURSELVES INTO THREE AND CHOOSE 2 REPRESENTATIVE IN THE GROUP THAT
WILL TRY TO INSERT MEDIA INTO A WEBPAGE USING HTML DOCUMENT.
EVALUATION:
Evaluating Group Activity, guided with the score of the following:
Scale:
1 = lowest
5 = highest
Scores
Criteria
speed
Step by step implementation
Accuracy and precision
Total Score
5
4
3
2
1
ASSIGNMENT
MAKE YOUR OWN SIMPLE WEBPAGE THAT HAS IMAGE, VIDEO, AND MUSIC WITH THE
USE OF HTML DOCUMENT. TO BE PASSED NEXT WEEK.