|
Definition and UsageThe This attribute is used to specify that the target URL is designed for special devices (like iPhone) , speech or print media. This attribute can accept several values. Applies toThe
Browser SupportThe
|
How to add A link with a media attribute
A Example.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The a media attribute</h1>
<p>
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">Open media attribute page for print</a>
</p>
</body>
</html>
Output should be:
How to add An image map, with a clickable area
Area Example.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The area media attribute</h1>
<p>Click on the sun to watch it closer:</p>
<img src="https://horje.com/avatar.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" media="screen and (min-color-index:256)">
</map>
</body>
</html>
Output should be:
How to add Two different style sheets for two different media types (screen and print)
Link Example.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_screen.css">
<link rel="stylesheet" type="text/css" href="https://www.w3schools.com/tags/demo_print.css" media="print">
</head>
<body>
<h1>Horje Example</h1>
<p><a href="tryhtml_link_media.htm" target="_blank">Click here</a> to open this page in a new window (without the tryit part).</p>
<p>If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.</p>
</body>
</html>
Output should be:
How to Use of the media attribute
Source Example.
index.html
Example:
HTML
<picture>
<source media="(min-width: 650px)" srcset="https://horje.com/avatar.png">
<source media="(min-width: 465px)" srcset="https://horje.com/avatar.png">
<img src="https://horje.com/avatar.png" alt="Flowers" style="width:auto;">
</picture>
Output should be:
How to add Specify the style to use for print
Style Example.
index.html
Example:
HTML
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>
Output should be:
| html media attribute |
| How to add A link with a media attribute | HTML Attribute |
| How to add An image map, with a clickable area | HTML Attribute |
| How to add Two different style sheets for two different media types (screen and print) | HTML Attribute |
| How to Use of the media attribute | HTML Attribute |
| How to add Specify the style to use for print | HTML Attribute |
Read Full: | HTML Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Attribute |
Uploaded: | 3 months ago |
Uploaded by: | Admin |
Views: | 63 |
Reffered: https://www.w3schools.com/tags/att_media.asp