Scribd
Upload
7 views18 pages

Image

Uploaded by

nihalikarajsharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views18 pages

Image

Uploaded by

nihalikarajsharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

HTML Images,videos

HTML Images
• The <img> tag is used to embed an image in an HTML page.
• The src attribute specifies the path to the image to be displayed.

Example:

<!DOCTYPE html>
<html>
<body>
<h3>src Attribute</h3>
<img src="C:\Users\DELL\Desktop\flower.jpg" width="50" height="65">
</body>
</html>

• The <img> tag should also contain the width and height attributes, which specify the width and
height of the image (in pixels).
• The required alt attribute for the <img> tag specifies an alternate text
for an image, if the image for some reason cannot be displayed. This
can be due to a slow connection, or an error in the src attribute, or if
the user uses a screen reader.

• Example:
<img src="C:\Users\DELL\Desktop\flower.jpg" alt="beautiful flowers"
width="50" height="65">
Image as a Link
<!DOCTYPE html>
<html>
<body>
<a href="hello.html">
<img src="C:\Users\DELL\Desktop\flower.jpg" width="50" height="65">
</a>
</body>
</html>

Opening image on next tab


<a href="hello.html" target="blank">
<img src="C:\Users\DELL\Desktop\flower.jpg" width="50" height="65">
</a>
• Example:
<a href=https://www.youtube.com/watch?v=By_rtKFZWQo>

• Image Floating
The CSS float property to let the image float to the right or to the left of
a text:
<p>
<img src="C:\Users\AGRIMA\Desktop\flower.jpg" width="50"
height="65" style="float:right;width:50px;height:40px;">
This is image floating
</p>
Image Maps
• The HTML <map> tag defines an image map. An image map is an image with clickable areas. The
areas are defined with one or more <area> tags.
• In an image map, you should be able to perform different actions depending on where in the
image you click.

• The image is inserted using the <img> tag. The only difference from other images is that you must
add a usemap attribute:

<img src="table.jpg" alt="My study table" usemap="#study">


• The usemap value starts with a hash tag # followed by the name of the image map, and is used to
create a relationship between the image and the image map.
• The <map> element is used to create an image map, and is linked to the image by using the
required name attribute:
<img src="table.jpg" alt="My study table" usemap="#study">
<map name="study">

• The name attribute must have the same value as the <img>'s usemap attribute .

Then, add the clickable areas.

• A clickable area is defined using an <area> element.

• You must define the shape of the clickable area, and you can choose one of these values:

• rect - defines a rectangular region


• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region
Example:
<body>
<img src="table.jpg" alt="My study table" usemap="#study">
<map name="study">
<area shape="rect" coords="330,450,1131,7360" href="notebook.html">
<area shape="rect" coords="400,174,574,221" href="calculator.html">
<area shape="circle" coords="185,201,138" href="coffee.html">
</body>
HTML Video
• 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.
• Example:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="C:\Users\AGRIMA\Downloads\video.mp4" type="video/mp4"
Your browser does not support this video tag.
</video>
</body>
</html>

• To start a video automatically, use the autoplay attribute:


Example: <video width="450" height="320" autoplay>

• Add muted after autoplay to let your video start playing automatically (but muted):
Example: <video width="450" height="320" autoplay muted>
HTML Youtube Video
• Upload the video to YouTube
• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the dimension of the player
• Add any other parameters to the URL
• Example:
• <body>
• <iframe width="560" height="315" src="https://www.youtube.com/embed/By_rtKFZWQo?
si=wMox60xlyrNtDbCS" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
• </iframe>
• </body>
• Example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/By_rtKFZWQo?
si=wMox60xlyrNtDbCS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-
when-cross-origin" style="border:2px green solid;" allowfullscreen>
</iframe>

• Some browsers do not allow autoplay in most cases. However, muted autoplay is suggested to be used.
Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).

Example:
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?


autoplay=1&mute=1">
</iframe>

</body>
HTML Audio
• The HTML <audio> element is used to play an audio file on a web page.

• 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.

• Example:
<body>

<audio controls>
<source src="newyear.mp3" type="audio/mpeg">
Your browser does not support this audio.
</audio>
• Some browsers do not allow autoplay in most cases. However, muted autoplay is suggested.

• Add muted after autoplay to let your audio file start playing automatically (but muted):

• Example:
<audio controls autoplay muted>
Animated Images
• HTML allows animated GIFs:

• Example:
<img src="food.gif" alt="Family Dinner" style="width:50px;height:50px;">
Iframes
• An HTML iframe is used to display a web page within a web page.

• The HTML <iframe> tag specifies an inline frame.

• An inline frame is used to embed another document within the current HTML document.

• It is a good practice to always include a title attribute for the <iframe>. This is used by screen
readers to read out what the content of the iframe is.

• Syntax:
<iframe src="url" title="description"></iframe>

• You can add the style attribute and use the CSS height and width properties:

<iframe src="hello.html" style="height:200px;width:300px;" title="Iframe Example"></iframe>


• Iframe - Remove the Border
By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:
Example:
<iframe src="hello.html" style="border:none;" title="Iframe Example"></iframe>

• To change the color of the iframe's border:


Example:
<iframe src="hello.html" style="border:2px solid blue;" title="Iframe Example"></iframe>
• An iframe can be used as the target frame for a link.
• The target attribute of the link must refer to the name attribute of the iframe:
Example:
<iframe src="hello.html" name="iframe_a" style="height:200px;width:400px;" title="Iframe
Example"></iframe>
<p><a href="https://www.google.com" target="iframe_a">Google</a></p>

You might also like