Tutorialspoint

HTML DOM accessKey Property

<!DOCTYPE html>
<html>
   <body>
      <a id="myid" accesskey="g" href="https://www.google.com/">Google</a>
      <p>Get the accessKey</p>
      <button onclick="display()">Click and display the accesskey</button>
      <p id="pid"></p>
      <script>
         function display() {
            var a = document.getElementById("myid").accessKey;
            document.getElementById("pid").innerHTML = a;
         }
      </script>
   </body>
</html>

HTML center Tag

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
         border: 2px solid blue;
         }
      </style>
   </head>
   <body>
      <table>
         <center>Table to calculate the budget</center>
         <caption>Expenses</caption>
         <tr>
            <th>Domains</th>
            <th>Cost</th>
         </tr>
         <tr>
            <td>Product Development</td>
            <td>500000</td>
         </tr>
         <tr>
            <td>Marketing</td>
            <td>500000</td>
         </tr>
         <tr>
            <td>Services</td>
            <td>100000</td>
         </tr>
         <tr>
            <td>Support</td>
            <td>100000</td>
         </tr>
         <tr>
            <td>Maintenance</td>
            <td>100000</td>
         </tr>
         <tr>
            <td colspan="2">Total Budget = INR 1300000</td>
         </tr>
      </table>
   </body>
</html>

HTML canvas shadowColor Property

<!DOCTYPE html>
<html>
   <body>
      <canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctx = c.getContext("2d");
         ctx.shadowBlur = 20;
         ctx.shadowColor = "gray";
         ctx.fillStyle = "blue";
         ctx.fillRect(40, 40, 200, 250);
      </script>
   </body>
</html>

HTML time datetime Attribute

<!DOCTYPE html>
<html>
   <body>
      <h2>Exam Results</h2>
      <p><s>Result would be announced on 6th June.</s></p>
      <p>New date for results is next <time datetime="06-15">Saturday</time>.</p>
   </body>
</html>

HTML DOM Object Width Property

<!DOCTYPE html>
<html>
   <body>
      <object id="newObj" width="300" height="200" data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" style="border:2px solid red"></object>
      <p>Click to update the width.</p>
      <button onclick="display()">Update Width</button>
      <p id="myid"></p>
      <script>
         function display() {
             document.getElementById("newObj").width = "550";
         }
      </script>
   </body>
</html>

HTML defaultPrevented Event Property

<!DOCTYPE html>
<html>
   <body>
      <h2>Demo Heading</h2>
      <a id="myid" href="https://example.com/">Demo (click me)</a>
      <script>
         document.getElementById("myid").addEventListener("click", function(event){
         event.preventDefault()
         alert("Was preventDefault() called: " + event.defaultPrevented);
         });
      </script>
   </body>
</html>

HTML data-* Attributes

<!DOCTYPE html>
<html>
   <head>
      <script>
         function display(tutorial) {
         var type = tutorial.getAttribute("data-tutorial-type");
         alert(tutorial.innerHTML + " = " + type + ".");
         }
      </script>
   </head>
   <body>
      <h1>Tutorials</h1>
      <h2 onclick="display(this)" id="java" data-tutorial-type="programming language">Java</h2>
      <h2 onclick="display(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
      <h2 onclick="display(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
   </body>
</html>

HTML DOM Object Height Property

<!DOCTYPE html>
<html>
   <body>
      <object id="newObj" width="580" height="200" data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" style="border:2px solid red"></object>
      <p>Click to update the height.</p>
      <button onclick="display()">Update Height</button>
      <p id="myid"></p>
      <script>
         function display() {
            document.getElementById("newObj").height = "350";
         }
      </script>
   </body>
</html>

HTML dl Tag

<!DOCTYPE html>
<html>
   <body>
      <h2>Sports</h2>
      <dl>
         <dt>Football</dt>
         <dd>It is played by 250 million players in over 200 countries.</dd>
         <dt>Cricket</dt>
         <dd>It is a bat-and-ball game played between two teams of eleven players on a field.</dd>
         <dt>Hockey</dt>
         <dd>There are many types of hockey such as bandy, field hockey, and ice hockey.</dd>
         <dt>Golf</dt>
         <dd>It is a club-and-ball sport in which players use various clubs to hit balls into a series of holes on a course in as few strokes as possible.</dd>
      </dl>
   </body>
</html>

HTML disabled Attribute

<!DOCTYPE html>
<html>
   <body>
      <h2>Details</h2>
      <form>
         <p>These are the new details...</p>
         <fieldset>
            <legend>New Details:</legend>
            Player: <input type="text" disabled><br>
            Rank: <input type="number"><br>
            Email: <input type="email"><br>
            Reporting Time: <input type="time">
         </fieldset>
      </form>
   </body>
</html>

Advertisements
Loading...

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.