Examples of Global Attributes In HTML
Code Of AccessKey Attribute:
<!DOCTYPE html>
<html>
<body bgcolor="#FF0033">
<center>
<a href="https://easycodi.blogspot.com/2019/08/simple-html-tags.html" accesskey="h">HTML</a><br>
<a href="https://easycodi.blogspot.com/2019/08/simple-html-tags.html" accesskey="c">CSS</a>
<p ><font size="45">The accesskey attribute specifies a shortcut key to activate/focus an element.</p>
<p><strong>Note:</strong> The shortcut is varying in different browsers:</p>
<ul>
<li>IE, Chrome, Safari, Opera 15+: [ALT] + <em>accesskey</em></li>
<li>Opera prior version 15: [SHIFT] [ESC] + <em>accesskey</em></li>
<li>Firefox: [ALT] [SHIFT] + <em>accesskey</em></li>
</ul>
</body>
</html>
Ouput Of Above Coding:
 |
Output Screen
|
Code for Class Attribute:
"."Dot is Use for declear a CSS class for any Tage:
<html>
<head>
<style>
h1.int {
color: yellow;
}
p.cls {
color: red;
}
</style>
</head>
<center>
<body bgcolor="#0033CC">
<font size="45">
<h1 class="int">Heading</h1>
<p>A paragraph:</p>
<p class="cls">This Is Class Testing. :)</p>
</body>
</html>
Ouput Of Above Coding:
 |
| Output Screen |
Code of Contenteditable:
The Following code copy and past in your web editor then and see output.
It has Bolean Value "True" or "False"
<!DOCTYPE html>
<html>
<body>
<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>
</body>
</html>
Code for data:
This use to get value of any word Explain in example given below:
<!DOCTYPE html>
<html>
<head>
<script>
// Initilizing a function in script language
function showDetails(animal)
{
//Declear a variable and get value or type of data
var animalType = animal.getAttribute("data-animal-type");
//print output using alert function
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1>Species</h1>
<p>Click on a species to see what type it is:</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>
</body>
</html>
Ouput Of Above Codin:
when you click on any word from given list it shows type of data.
Use Of Dir 'Direction' Attribute in HTML Page:
<!DOCTYPE html>
<html>
<body bgcolor="#0033CC">
<font size=33>
<p dir="rtl">Text right-to-left..</p>
<p dir="ltr">Text left-to-right...</p>
</body>
</html>
Output Of Above Code:
Use of Draggable Attribute in HTML:
<!DOCTYPE HTML>
<html>
<head>
<style>
//css Id declear for styling
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
//declear function to move text in box
function allowDrop(ev) {
ev.preventDefault();
}
//Fnction for dragge text
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
//declear a variable
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body bgcolor="#0033CC">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">This is a draggable paragraph. Drag this element into the rectangle.</p>
</body>
</html>
Output of above html code:
Dropzone:
Syntax
<element dropzone="copy|move|link">
Use of Hidden Attribute:
<!DOCTYPE html>
<html>
<body bgcolor="#0033CC">
<font size="45">
<p hidden>This text is hidden.</p>
<p>This is a visible text.</p>
</body>
</html>
Output of Above code:
Id Attribute:
This code run your own PC and see te result just copy code from here and past your web editor.
<html>
<body>
<h1 id="Header">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("Header").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
Spellcheck Attribute:
This code run your own PC and see te result just copy code from here and past your web editor.
<!DOCTYPE html>
<html>
<body>
<p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change the text.</p>
First name: <input type="text" name="fname" spellcheck="true">
<p><strong>Note:</strong> The spellcheck attribute is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Comments
Post a Comment