Sunday, 10 October 2021

7 Amazing Things to do with HTML Tips and Tricks

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!--
            ==================
    Refresh the document every 15 seconds
            ==================-->
<meta http-equiv='refresh' content='15'>
<!--
                    =======================
    Redidirect to the specified page after 10 seconds
                    =======================
-->
<!-- <meta http-equiv='refresh' content="10;https://www.youtube.com/watch?v=Qsn7w0WS7HQ&list=RDQsn7w0WS7HQ&start_radio=1"> -->

<style>

    /* Use focus within */
    html:focus-within{
        scroll-behavior: smooth;
    }
    li {
        margin-bottom: 200px;
    }
</style>
</head>

<!--
    ====================================
    Disable the right click on the document or element with ONCONTEXTMENU -> false  
    ====================================-->
<body oncontextmenu="return true">
    <img src='https://thumbs.dreamstime.com/z/kid-big-smile-14563196.jpg' width='90px' height='80px' oncontextmenu='return false' >

<!--Accordian with simple HTML-->
<details>
    <summary> View Features</summary>
        <ul>
            <li>Unlimited Bookmarks</li>
            <li>Nested collections</li>
            <li>Import and export</li>
            <li>Link to web archive</li>
            <li>Mobile support</li>
        </ul>
</details>


<!--Guages with meter Elements-->

<P>Hey baby I'm good</P>
<label for="rub">Ruby:</label>
<meter id="ruby" min="0" max="100" low='35' high='65' optimum="95" value="25"></meter> <br />

<label for="java">Java:</label>
<meter id="java" min="0" max="100" low="35" high="65" optimum="95" value="50"></meter> <br />

<label for="js">JavaScript:</label>
<meter id="js" min="0" max="100" low='35' higho="65" optimum='85' value="79"></meter> <br />
<!--Accept Multiple Inputs
    *You can use the multiple attribute to accept multiple values for FILES &  EMAIL ADDRESSES. The user experience is not that good with type="email" but it works.*-->
<h2>Multiple Inputs</h2>
<input type="email" placeholder="email with comma separated" >

<!-- Create a slider with HTML -->
<br />
<input type="range" min=1 max=100 value=86>
<p>Please this will be redirect to <H2>Youtube</H2></p>
</body>
</html>


 Just Copy and paste this document to get functionality in your web page

No comments:

Post a Comment

Get Phone Number Details Using Python

 Get Phone Number Details Using Python Import Python module PHONENUMBERS using command " pip install phonenumbers" in you CLI Then...