HTML_6_Media

Media

Image

<img>

To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the following two attributes:

src

This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site. 

alt

This provides a text description of the image which describes the image if you cannot see it.

title

You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the image.

<img src="car.jpg" alt="car" title="car" />

<figure>

Images often come with captions. HTML5 has introduced a new <figure> element to contain images and their caption so that the two are associated.

<figcaption>

The <figcaption> element has been added to HTML5 in order to allow web page authors to add a caption to an image.

<figure>

<img src="car.jpg" alt="car" title="car" />

<br />

<figcaption>Figire1.Car </figcaption>

</figure>

<marquee>

The <marquee> tag in HTML creates a scrolling text or image effect within a webpage. It allows content to move horizontally or vertically across the screen.

<marquee>

<marquee direction="right">

<marquee direction="up">

<marquee direction="down">

 <marquee behavior="scroll" scrollamount=30>

<marquee>

<img src="elephant.jpg" alt="elephant" title="Elephant" width="400px" height="400px">

<img src="elephant.jpg" alt="elephant" title="Elephant" width="400px" height="400px">

<img src="elephant.jpg" alt="elephant" title="Elephant" width="400px" height="400px">

<img src="elephant.jpg" alt="elephant" title="Elephant" width="400px" height="400px">

<img src="elephant.jpg" alt="elephant" title="Elephant" width="400px" height="400px">

</marquee>

Video

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

<video>

The <video> element has a number of attributes which allow you to control video playback:

loop

When used, this attribute indicates that the video should start playing again once it has ended.

controls

Specifies that video controls should be displayed (such as a play/pause button etc).

poster

This attribute allows you to specify an image to show while the video is downloading or until the user tells the video to play.

 <video width="320" height="240" controls>

  <source src="rose.mp4" type="video/mp4">

 </video> 

Audio

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

<audio controls>  <source src="horse.mp3" type="audio/mpeg"></audio> 

<audio controls autoplay muted>

<source src="horse.mp3" type="audio/mpeg">

</audio>

iframe

An iframe is like a little window that has been cut into your page — and in that window you can see another page. The term iframe is an abbreviation of inline frame.

Location Map

https://www.mapsdirections.info/en/custom-google-maps/

Youtube

An easier solution is to let YouTube play the videos in your web page.

<iframe width="420" height="315"

src="https://www.youtube.com/embed/tgbNymZ7vqY">

</iframe>

favicon

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

Save your image by downloading or creating.

Upload your image on the online icon converter.

https://image.online-convert.com/convert-to-ico

<link rel="icon" type="image/x-icon" href="favicon.ico">

Special Characters

<p>[&gt;&gt;&nbsp;&nbsp;Welcome&nbsp;&nbsp;&lt;&lt;]</p>

  

<p>&#9658;I have following cards: A&#9827;, K&#9830; and 9&#9829;.</p>

  

<p>&#9658;I prefer hard rock &#9835;music &#9835;</p>

  

<p>&copy; 2006 by Svetlin Nakov &amp; his team</p>

  

<p>Telerik Academy&trade;</p>

<p>&copy; copyright by smsd 2022.</p>

https://www.w3schools.com/charsets/ref_utf_symbols.asp

https://www.w3schools.com/charsets/ref_emoji.asp

Test the code in the footer of index_layout.html

<span style='font-size:100px;'>&#128037;</span>

<span style='font-size:100px;'>&#9742;</span>