Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a link with media attribute in HTML5
Overview
There are many types of attributes in HTML5, these attributes provide additional functionality to the page. The media attribute is used with the link tag which has different values which are used in different states. These values are: print, all, screen, speech. The ‘print’ value is used with the link tag to provide the print preview of the page. If we want to change style on printing the page then we can use this print value with the media attribute. Sometimes there are some styling for which we had to come up with the same styles for all types of screens so that ‘screen’ value is used with media attributes. The ‘all’ value is a default value to the media attribute, so to write the ‘all’ value with the media attribute is not necessary.
Syntax
The media attribute is written with the link tag −
<link rel="stylesheet" href="print.css" media="ValueHere">
In the above syntax the media attribute is inserted in the link HTML tag, in the above syntax where the ‘ValueHere’ is written we will replace it with the media values which are: all, screen, speech and screen.
Algorithm
Step 1 − Create a HTML boilerplate code in your text editor with the file name ‘index.html’.
Step 2 − Now use the HTML link tag to link the style sheet to the page. Create the first link tag and link the primary style sheet with it that is style.css. In the other link tag link the secondary stylesheet to it which is print.css. Also in the second style sheet add the media attribute to it with print value.
Step 3 − Create the layout with two div containers as “Ads Banner” and one div container as “Content Banner”.
Step 4 − Now in style.css style the above HTML code.
Step 5 − Now in print.css make both the ads container ‘display : none’.
Step 6 − Now print the current web page, when the print action is triggered the print.css is also invoked and the ads container disappears.
Example
In this example we have created a layout of a web to show the working of media attributes with the link tag. We had taken the print value with the media attribute, with the two styling style.css and print.css which triggers when the page is loaded and when the print action is triggered respectively.
<html>
<head>
<title>Link with media attribute</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">
<style>
.ads,.content{
padding: 2rem 0rem;
width: 90vw;
margin: 1rem auto;
background-color: green;
text-align: center;
color: white;
font-weight: 700;
}
print.css
.ads{
display: none;
}
</style>
</head>
<body>
<div class="mid">
<div class="ads">AD Banner</div>
<div class="content">tutorialspoint.com</div>
<div class="ads">AD Banner</div>
</div>
</body>
</html>
In the below image Fig (a), it shows the output of the above HTML code, which shows the ads banner and the main content container. So when the page is loaded the style.css styling is loaded. To get the working of the media attribute print value, click the right click of the mouse and click on the print option.
When the print action of the window is triggered the print.css gets active and reflects the changes in the HTML code because in the head tag as we had used the media attribute and passed the print value in it. So on printing the page both the ads banners disappear because we had given the styling in the print.css page with the display none.
Conclusion
The print value of the media attribute is helpful when we create a web application project like a bill management system in that if we had to print the bill of the customer then we can use this method. In some parts of the website we can also use this to capture a small part of the page. The media tag also helps the webpage in fast loading as the link is loaded when the page satisfies the media value.
324 Views
