Showing posts with label Programming languages. Show all posts
Showing posts with label Programming languages. Show all posts

Saturday, August 27, 2022

HTML <audio> Tag (audio Tag)

HTML

✔ Urdu Point on August 27, 2022 0 Comment

 


Example

Play a sound file:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
Try it Yourself »

Definition and Usage

The <audio> tag is used to embed sound content in a document, such as music or other audio streams.

The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

There are three supported audio formats in HTML: MP3, WAV, and OGG.

Audio Format and Browser Support

BrowserMP3WAVOGG
Edge / IEYESYES*YES*
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

*From Edge 79

Tips and Notes

Tip: For video files, look at the <video> tag.

Attributes

AttributeValueDescription
autoplayautoplaySpecifies that the audio will start playing as soon as it is ready
controlscontrolsSpecifies that audio controls should be displayed (such as a play/pause button etc)
looploopSpecifies that the audio will start over again, every time it is finished
mutedmutedSpecifies that the audio output should be muted
preloadauto
metadata
none		Specifies if and how the author thinks the audio should be loaded when the page loads
srcURLSpecifies the URL of the audio file

Global Attributes

The <audio> tag also supports the Global Attributes in HTML.

Event Attributes

The <audio> tag also supports the Event Attributes in HTML.

Related Pages

HTML DOM reference: HTML Audio/Video DOM Reference

Sunday, July 10, 2022

HTML aside Tag

HTML aside Tag

✔ Urdu Point on July 10, 2022 0 Comment

HTML <aside> Tag


Example

Display some content aside from the content it is placed in:

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be indirectly related to the surrounding content.

Tip: The <aside> content is often placed as a sidebar in a document.

Note: The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element (see example below).

Global Attributes

The <aside> tag also supports the Global Attributes in HTML.

Event Attributes

The <aside> tag also supports the Event Attributes in HTML.

More Examples

Example

Use CSS to style the <aside> element:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<h1>The aside element</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>
Try it Yourself »

Related Pages

HTML DOM reference: Aside Object

Default CSS Settings

Most browsers will display the <aside> element with the following default values:

aside {
  display: block;
}
HTML article Tag

HTML article Tag

✔ Urdu Point on July 10, 2022 0 Comment

HTML <article> Tag

 

Example

Three articles with independent, self-contained content:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

  • Forum post
  • Blog post
  • News story

Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element (see example below).

Global Attributes

The <article> tag also supports the Global Attributes in HTML.

Event Attributes

The <article> tag also supports the Event Attributes in HTML.

More Examples

Example

Use CSS to style the <article> element:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>
Try it Yourself »

Related Pages

HTML DOM reference: Article Object

Default CSS Settings

Most browsers will display the <article> element with the following default values:

article {
  display: block;
}
HTML area Tag

HTML area Tag

✔ Urdu Point on July 10, 2022 0 Comment

HTML <area> Tag

Example

An image map, with clickable areas:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Try it Yourself »
More "Try it Yourself" examples below.

Definition and Usage

The <area> tag defines an area inside an image map (an image map is an image with clickable areas).

<area> elements are always nested inside a <map> tag.

Note: The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.

Global Attributes

The <area> tag also supports the Global Attributes in HTML.

Event Attributes

The <area> tag also supports the Event Attributes in HTML.

More Examples

Example

Another image map, with clickable areas:

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Try it Yourself »

Related Pages

HTML DOM reference: Area Object

Default CSS Settings

Most browsers will display the <area> element with the following default values:

area {
  display: none;
}
HTML applet Tag

HTML applet Tag

✔ Urdu Point on July 10, 2022 0 Comment

HTML <applet> Tag

 

Not Supported in HTML5.

The <applet> tag was used in HTML 4 to define an embedded applet (Plug-in).

Plug-ins

Plug-ins are a computer programs that extend the standard functionality of the browser.

Plug-ins have been used for many different purposes:

  • Run Java applets
  • Run ActiveX controls
  • Display Flash movies
  • Display maps
  • Scan for viruses
  • Verify a bank id

Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browsers.

The support for Shockwave Flash has also been turned off in modern browsers.

What to Use Instead?

If you want to embed a video, use the <video> tag:

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>
Try it Yourself »

If you want to embed audio, use the <audio> tag:

Example

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
Try it Yourself »

To embed objects, you can use both the <embed> tag and the <object> tags:

Example

Embed a document with the <embed> element:

<embed src="snippet.html">
Try it Yourself »

Example

Embed a picture with the <embed> element:

<embed src="pic_trulli.jpg">
Try it Yourself »

Example

Embed a document with the <object> element:

<object data="snippet.html"></object>
Try it Yourself »

Example

Embed a picture with the <object> element:

<object data="pic_trulli.jpg"></object>
Try it Yourself »
Tip: To embed a picture, it is better to use the <img> tag. To embed a document, it is better to use the <iframe> tag.