Scribd
Upload
18 views

Creating An HTML Document

The document discusses various HTML elements for adding background images, videos, and audio to web pages. It explains how to use the <body>, <style>, <div>, <video>, and <audio> tags along with various attributes to specify and control background images, videos, autoplaying media, media formats, and more. Browser support and fallbacks are also covered.

Uploaded by

Jeannabelle Balcena
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views

Creating An HTML Document

The document discusses various HTML elements for adding background images, videos, and audio to web pages. It explains how to use the <body>, <style>, <div>, <video>, and <audio> tags along with various attributes to specify and control background images, videos, autoplaying media, media formats, and more. Browser support and fallbacks are also covered.

Uploaded by

Jeannabelle Balcena
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

CREATING AN HTML

DOCUMENT
<CITE> FOR WORK TITLE

The HTML <cite> element Example


defines the title of a work. <p><cite>The Scream</cite> by
Browsers usually display <cite> Edvard Munch. Painted in
elements in italic. 1893.</p>

2
<BDO> FOR BI-DIRECTIONAL OVERRIDE
Example
The HTML <bdo> element <bdo dir="rtl">This text will be
defines bi-directional override. written from right to left</bdo>
The <bdo> element is used to
override the current text direction: Values
• LTR – Left to right
Dir – an enumerated attribute
indicating the directionality of the • RTL – right to left
element’s text. • Auto – Lets the user decide

3
COMMENT TAGS

The HTML <cite> element Example


defines the title of a work. <p><cite>The Scream</cite> by
Browsers usually display <cite> Edvard Munch. Painted in
elements in italic. 1893.</p>

4
BACKGROUND IMAGES

To add a background image on an HTML element, you can use the


style attribute:
If you want the entire page to have a background image, then you must
specify the background image on the <body> element:
Add a background image on a HTML page:
<style>
body {
background-image: url(‘blackcat.jpg');
}
</style>

5
6
BACKGROUND IMAGES
If the background image is smaller than the element, the image will repeat itself,
horizontally and vertically, until it has reach the end of the element.
To avoid the background image from repeating itself, use the background-repeat
property
Example:
<style>
body {
background-image: url(blackcat.jpg ');
background-repeat: no-repeat;
}
</style>

7
8
BACKGROUND IMAGES

Example:
If you want the background image cover <style>
the entire element, you can set the
background-size property to cover. body {
Also, to make sure the entire element is background-image: url('img_girl.jpg');
always covered, set the background- background-repeat: no-repeat;
attachment property to fixed:
background-attachment: fixed;
As you can see, the image will cover the
entire element, with no stretching, the background-size: cover;
image will keep its original proportions. }
</style>

9
10
BACKGROUND IMAGES
If you want the background image stretch to fit the entire image in the element, you
can set the background-size property to 100% 100%:
Try resizing the browser window, and you will see that the image will stretch, but
always cover the entire element.
Example:
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style> 11
12
13
BACKGROUND IMAGES
Using the DIV element in creating background images
DIV – no special meaning. It represents its children. It can be used with the class, lang, and
title attributes to mark up semantics common to a group of consecutive elements.
Example:
<div style="background-image: url('img_girl.jpg');"></div>

<style>
div {
background-image: url(‘img_girl.jpg’);
}
</style>

14
15
16
VIDEOS IN HTML

Before HTML5, a video could only be played in a browser with a plug-in


(like flash).
The HTML5 <video> element specifies a standard way to embed a video
in a web page.
Example:
<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>

17
VIDEOS IN HTML

The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height
and width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which
the browser may choose from. The browser will use the first recognized
format.
The text between the <video> and </video> tags will only be displayed
in browsers that do not support the <video> element.

18
VIDEOS IN HTML
<video> Autoplay
To start a video automatically use the autoplay attribute:
Example
<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>

The autoplay attribute does not work in mobile devices like iPad and
iPhone.

19
VIDEOS IN HTML
<video> Loop
To start a video automatically use the loop attribute:
Example
<video width="320" height="240" autoplay loop >
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The autoplay attribute does not work in mobile devices like iPad and
iPhone.

20
VIDEOS IN HTML
<video> Muted
To start a video automatically use the muted attribute:
Example
<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>

The autoplay attribute does not work in mobile devices like iPad and
iPhone.

21
HTML VIDEO - MEDIA TYPES

FILE FORMAT MEDIA TYPE

MP4 video/mp4

WebM video/webm

Ogg video/ogg

22
BACKGROUND IMAGES
Before HTML5, audio files could only be played in a browser with a plug-in (like
flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web
page.
To play an audio file in HTML, use the <audio> element:

Example:
<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>

23
BACKGROUND IMAGES
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that
do not support the <audio> element.

HTML AUDIO - MEDIA TYPES


FILE FORMAT MEDIA TYPE

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav
24

You might also like