Saturday, June 26, 2021

All about HTML

 <-- KIRTISHIL PATIL -->


 <!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>HTML</title>


    <style>


    table, th, td {


        border: 1px solid black;


        padding: 15px;  /* space between the cell content and its borders */


        text-align: center;


        border-spacing: 5px;


        /* border-collapse: collapse;    borders collapse into one border */


    }


    </style>


</head>


<body>


    <!-- Basic Elements -->


    <h1>Biggest</h1>


    <h6>Smallest</h6>


    <p>Paragraph</p>


    <b>Bold</b>


    <strong>Strong</strong>


    <i>Italic</i>


    <em>Emphasized</em>


    <mark>Mark</mark>


    <small>Small</small>


    <del>Deleted</del>


    <ins>Inserted</ins>


    <sub>Subscript</sub>


    <sup>Superscript</sup>


    <br>




    <!-- scrolling text  -->


    <marquee behavior="scroll" direction="left">Marquee</marquee>


    <!-- behavior: slide/alternate -->


    <!-- direction: down/left/right -->




    <!-- link -->


    <a href="http://www.google.com">Google</a>


    <br>




    <!-- images -->


    <img src="#" alt="image" height="100" width="100">


    <br>




    <!-- table -->


    <table style="width:100%">


        <caption>Caption</caption>


        <tr>


          <td>First</td>


        </tr>


        <tr>


            <th colspan="2">Colspan</th>


            <td>Second</td>


        </tr>


        <tr>


          <td>End</td>


        </tr>


    </table>




    <!-- Unordered List  -->


    <ul style="list-style-type: disc;">


        <!-- types: circle/square/none -->


        <li>List 1</li>


        <li>List 2</li>


        <li>List 3</li>


    </ul>




    <!-- Ordered List  -->


    <ol type="1">


        <!-- type: A/a/I/i  -->


        <li>List 1</li>


        <li>List 2</li>


        <li>List 3</li>


    </ol>




    <!-- Description List  -->


    <dl>


        <dt>Define term</dt>


        <dd>Describe</dd>


        <dt>Define term</dt>


        <dd>Describe</dd>


    </dl>




    <!-- Block Level  -->


    <div>


        Block Level


    </div>




    <!-- Inline -->


    <h1>This is h1 <span>Inline</span></h1>


    


    <!-- Emoji -->


    <p style="font-size:48px">


        &#128512;


        &#128513; 


        &#128514; 


        &#128515; 


        &#128516;


        &#128517;


        &#128525;


        &#128526;


        &#128536;


    </p>




    <!-- forms  -->


    <form action="#" method="GET" target="_self" autocomplete="on">


        <!-- target: blank/parent/top  -->


        <fieldset>


            <legend>Form</legend>


        <label for="fname">First Name:</label><br>


        <input type="text" name="fname" value="Kirtishil Patil" disabled> 


        <!-- readonly/required/autofocus -->


        <label for="phone">Enter your phone number:</label>


        <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" maxlength="10">


        <select name="menu" id="">


            <!-- size & multiple -->


            <option value="1">1</option>


            <option value="2">2</option>


            <option value="3">3</option>


        </select>


        <br><br><br><br><br><br>


        <textarea name="text" id="" cols="30" rows="10" placeholder="Enter"></textarea>


        <br>


        <input type="submit" value="submit">


        <button type="reset">reset</button>


        </fieldset>


    </form>




    <!-- multimedia -->


    <embed src="#" type="video/webm">


    <!-- type: text/html image/jpg  -->


    <audio controls autoplay src="#"></audio>


    <video controls autoplay src="#"></video>




    <!-- navbar  -->


    <nav>


        <a href="#">link1</a>


        <a href="#">link2</a>


        <a href="#">link3</a>


    </nav>


</body>


</html>

No comments:

Post a Comment

Kirtishil Patil