HTML MEDIA

No.7
#IMAGE tag in HTML

Insert picture your web page used tag <img> example:
<img src="write picture name with extension" >
like:-
<img src="dog.jpg">

note:-image already save in  your html  folder.

The <img>  tag has two required attributes:

  • src - Specifies the path to the image
  • alt - Specifies an the path not find
WAP:-

<html>
<head><title>insert img web page</title>
</head>
<body>
<img src="dog.jpg" width="300" height="300" alt="error" border="5">
</body>
</html>

#Images Save in Another Folder or desktop

If you have your images save in another folder or othe location , you must include the folder name  or url,path set in the src attribute:


WAP:-

<html>
<head><title>insert img web page</title>
</head>
<body>
<img src="Desktop\cat.jpeg" width="300" height="300" alt="error" border="5">
</body>
</html>

#Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

WAP:

<html>

<head>

<title>image link</title>

</head>

<body>

 <p>The image is a link. You can click on it.</p>

 <a href="formatingtag.html">

<img src="dog.jpg"  width="300" height="300">

</a>

 </body>

</html>

Note:- Picture save in your folder. Than you click on picture open the link page. You can link the picture anything.like audio,vedio,web pge,web site ext..

#Animated Images

HTML allows animated GIFs:

<html>

<head>

<title>insert animated image</title>

</head>

<body>

<img src="programming.gif" alt="Computer” width=”300” height=”300”>


</body>
</html>


 #HTML Image Maps

An image map is that you should be able to perform different actions depending on where in the image you click.

<html>

<head>

<title>usemap attributes</title>

</head>

<body>

<img src="logo.jpg"   usemap="#imp">

<map name="imp" id="#imp">

<area shape="rect"  cords="4,0,209,101"  href="heading.html" target="blank">

</map>

</body>

</html>


Note:- Imag-map.net this site is used to search the image cords or coordinates.


No.8:-

Q. How to set background image in webpage?
Ans.

<html>
<head>
<title>set background image </title>
</head>

<body background="jeep.jpg"  alt="error">
any thing write in body

</body>
</html>


Q. How to set background color in webpage?
Ans.

<html>
<head>
<title>set background color</title>
</head>

<body bgcolor="gray"  >
any thing write in body

</body>
</html>


No.9:-

HTML Favicon:-

A favicon is a small image displayed to the page title in the browser tab.

favicon webpage logo


<html>
<head>
  <title>My Page Title</title>
  <link rel="icon"   type="image/png"   href="k.jpeg">
</head>
<body>
<h1>This is a Heading</h1>
</body>
</html>

No.10:-

#HTML Video

NOTE:-Your video and audio saved in your folder.

 

The HTML <video> element is used to show a video on a web page.



<html>

<head>

<title>video tag</title>

</head>

<body>

<video controls="controls" src="v.mp4" height="500" >

</video>

</body>

</html>


#How it Works

  • The controls attribute adds video controls, like play, pause, and volume.
  • The text between the <video> and </video> tags will only be displayed in browsers that do not support the  <video> element.
  • The loop attribute used to vedio repeatly play.
  • The poster attribute used for insert thumnail your video. 


#HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

<html>

<head>

<title>video autoplay</title>

</head>

<body>

<video controls="controls" src="v.mp4" height="500" 

autoplay >

</video>

</body>

</html>


#HTML Video loop and poster attributes


<html>

<head>

<title>video loop and poster attributes</title>

</head>

<body>

<video controls="controls" src="v.mp4" height="500" 

loop='loop" poster="image.jpg">

</video>

</body>

</html>


#HTML Audio

  • To play an audio file in HTML, use the <audio> element:
  • The HTML <audio> Element
  • To play an audio file in HTML, use the <audio> element:

WAP:-

<html>

<head>

<title> a audio tag</title>

</head>

<body>

<audio  src="kujsaal.mp3" controls="controls" loop="loop"  muted="muted" autoplay="autoplay">

</audio>

</body>

</html>


HTML Audio - How It Works

  • The controls attribute adds audio controls, like play, pause, and volume.
  • The text between the  <audio>  and  </audio> tags will only be displayed in browsers .
  • To start an audio file automatically, use the autoplay attribute.
  • Add muted  after autoplay to let your audio file start playing automatically (but muted).

No comments:

Post a Comment

THANK YOU

Subscribe to: Posts (Atom)

Css

  CSS CSS is the language we use to style a Web page.  Q.1:- What is CSS?  Ans:- CSS stands for Cascading Style Sheets . CSS is used to defi...

  • HTML
    Html  provide a way of Displaying web pages with text and images or multi-media content. HTML is not a programming language, but a markup la...
  • Css
      CSS CSS is the language we use to style a Web page.  Q.1:- What is CSS?  Ans:- CSS stands for Cascading Style Sheets . CSS is used to defi...