Tutorialspoint

Adding YouTube videos on an HTML web page

<!DOCTYPE html>
<html>
   <head>
      <title>Learn WordPress</title>
   </head>
   <body>
      <h1>WordPress Installation</h1>
      <p>Following is the video demonstrating how to install WordPress on localhost using
         XAMPP Server:
      </p>
      <iframe height="350" width="600"
         src="https://www.youtube.com/embed/F6m0ghjadlw">
      </iframe>
   </body>
</html>

HTML Doctypes

<!DOCTYPE html>
<html>
   <head>
      <title>Document Title comes here</title>
   </head>
   <body>
      <h1>
         Demo Heading
      </h1>
      This is the demo text.
   </body>
</html>

HTML DOM Anchor hash Property

<!DOCTYPE html>
<html>
   <body>
      <h1>Company</h1>
      <p><a id="mylink" href="http://www.demo.com/abc/def.html#myteam">Our Team</a></p>
      <p>Get the anchor part...</p>
      <h2 id="myid"></h2>
      <button onclick="display()">Display Anchor Part</button>
      <script>
         function display() {
         var a = document.getElementById("mylink").hash;
         document.getElementById("myid").innerHTML = a;
         }
      </script>
   </body>
</html>

HTML DOM Anchor download Property

<!DOCTYPE html>
<html>
   <body>
      <h2>ReactJS</h2>
      <a id="myid" href="http://www.tutorialspoint.com/images/reactjs.png" download="Learn
         ReactJS">
      <img src="http://www.tutorialspoint.com/images/reactjs.png" alt="ReactJS" width="200"
         height="200"></a>
      <button onclick="display()">Display the value</button>
      <p id="demo"></p>
      <script>
         function display() {
         var val = document.getElementById("myid").download;
         document.getElementById("demo").innerHTML = val;
         }
      </script>
   </body>
</html>

HTML th colspan Attribute

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
         border: 2px solid green;
         }
      </style>
   </head>
   <body>
      <h2>Product Expenses</h2>
      <table>
         <tr>
            <th colspan="2">Expenses</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 textarea required Attribute

<!DOCTYPE html>
<html>
   <body>
      <h2>Subject-wise rank</h2>
      <form action="">
         <label for="stinfo">Student:</label>
         <input type="text" id ="stinfo"><br>
         <label for="sub">Subject:</label>
         <input type="text"><br>
         <label for="rank">Rank:</label>
         <input type="number"><br>
         <label for="marks">Marks:</label>
         <input type="number"><br>
         <label for="remark">Remarks</label><br>
         <textarea rows="6" cols="70" required></textarea><br>
         <input type="submit">
      </form>
   </body>
</html>

HTML canvas shadowBlur 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 = "black";
         ctx.fillStyle = "green";
         ctx.fillRect(40, 40, 100, 250);
         ctx.shadowBlur = 30;
         ctx.shadowColor = "blue";
         ctx.fillStyle = "orange";
         ctx.fillRect(200, 40, 200, 150);
      </script>
   </body>
</html>

HTML DOM Style lineHeight Property

<!DOCTYPE html>
<html>
   <body>
      <h2>Demo Heading</h2>
      <div id="myid">
         Here, we have set demo text. Here, we have set demo text. Here, we have set demo text. Here,
         we have set demo text. Here, we have set demo text. Here, we have set demo text. Here, we
         have set demo text. Here, we have set demo text.
         Here, we have set demo text. Here, we have set demo text. Here, we have set demo text. Here,
         we have set demo text. Here, we have set demo text. Here, we have set demo text.
      </div>
      <br>
      <button type="button" onclick="display()">Click to increase the line height</button>
      <script>
         function display() {
         document.getElementById("myid").style.lineHeight = "3";
         }
      </script>
   </body>
</html>

HTML optgroup disabled Attribute

<!DOCTYPE html>
<html>
   <body>
      <h2>Water Levels</h2>
      <p>Impurity Level <meter min="0" low="50" high="95" max="100" value="85"></meter></p>
      <select>
         <optgroup label="Ratio">
            <option value="one">3:2</option>
            <option value="two">5:3</option>
         </optgroup>
         <optgroup label="Water" disabled>
            <option value="low">2L</option>
            <option value="Medium">5L</option>
            <option value="high">10L</option>
            <option value="veryhigh">20L</option>
         </optgroup>
      </select>
   </body>
</html>

HTML canvas shadowOffsetY 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 = 30;
         ctx.shadowOffsetX = 35;
         ctx.shadowOffsetY = 35;
         ctx.shadowColor = "orange";
         ctx.fillStyle = "red";
         ctx.fillRect(150, 60, 280, 250);
      </script>
   </body>
</html>

Advertisements
Loading...

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