index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body class="html">
    <!-- <a class="BackButton" href="../html.html">Back to HTML</a> -->
    <div class="navber">
        <a href="#a">A</a> <a href="#b">B</a>
        <a href="#c">C</a> <a href="#d">D</a>
        <a href="#e">E</a> <a href="#f">F</a>
        <a href="#g">G</a> <a href="#h">H</a>
        <a href="#i">I</a> <a href="#j">J</a>
        <a href="#k">K</a> <a href="#l">L</a>
        <a href="#m">M</a> <a href="#n">N</a>
        <a href="#o">O</a> <a href="#p">P</a>
        <a href="#q">Q</a> <a href="#r">R</a>
        <a href="#s">S</a> <a href="#t">T</a>
        <a href="#u">U</a> <a href="#v">V</a>
        <a href="#w">W</a> <a href="#x">X</a>
        <a href="#y">Y</a> <a href="#z">Z</a>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="/#">title</a></h3><hr>
        <div  class="content">
            <p>content</p>

        </div>
    </div>
    <section class="codeRunDiv">
        output
    </section>
    <section class="codeDiv">
        <code>
            &lt;<code class="codeColor2">dl</code>&gt;<br>
            &nbsp;&nbsp; &lt;<code class="codeColor2">dt</code>&gt;First item&lt;/<code class="codeColor2">dt</code>&gt;<br>
            &nbsp;&nbsp; &lt;<code class="codeColor2">dd</code>&gt;Second item&lt;/<code class="codeColor2">dd</code>&gt;<br>
            &nbsp;&nbsp; &lt;<code class="codeColor2">dt</code>&gt;Third item&lt;/<code class="codeColor2">dt</code>&gt;<br>
            &nbsp;&nbsp; &lt;<code class="codeColor2">dd</code>&gt;Fourth item&lt;/<code class="codeColor2">dd</code>&gt;<br>
            &lt;<code class="codeColor2">dl</code>&gt;<br>
        </code>
    </section>

        
    <!-- A start -->
    <section id="a">
    <div class="typeDiv">
        <h3 class="title">abbreviations or Title</h3><hr>
        <div  class="content">
            <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title">address for the author/owner</h3><hr>
        <div  class="content">
            <address>
                Written by Mahmud Md Ashik<br> 
                Visit me at: <a href="https://www.facebook.com/Ashik100100/">FB</a><br>
                Yunnan, Kunming<br>
                China
            </address>
        </div>
    </div>

    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/attributes.html">Attributes</a></h3><hr>
        <div  class="content">
            <h5>href, src, alt, height, width, <a href="">style</a></h5>
            
            <h3>Spaces and Equal Signs</h3>
            <section class="codeDiv">
                <code>
                    <code class="codeColorComment">&lt;!-- good --&gt;</code><br>
                    &lt;<span class="codeColorDarkRed">link</span> <span class="codeColorGreen">rel</span><span class="codeColorDarkRed">=</span><span class="codeColorYellow">"stylesheet"</span> <span class="codeColorGreen">href</span><span class="codeColorDarkRed">=</span><span class="codeColorYellow">"styles.css"</span>&gt;<br>

                    &lt;<span class="codeColorDarkRed">img</span> <span class="codeColorGreen">src</span><span class="codeColorDarkRed">=</span><span class="codeColorYellow">"../picture/imageMap.jpg"</span> <span class="codeColorGreen">alt</span><span class="codeColorDarkRed">=</span><span class="codeColorYellow">"imageMap"</span> </span>&gt;
                    
                    <br><br>

                    <code class="codeColorComment">&lt;!-- bad --&gt;</code><br>
                    &lt;<span class="codeColorDarkRed">link</span> <span class="codeColorGreen">rel</span><span class="codeColorDarkRed"> = </span> <span class="codeColorYellow">"stylesheet"</span> <span class="codeColorGreen">href</span><span class="codeColorDarkRed"> = </span><span class="codeColorYellow">"styles.css"</span>&gt;<br>

                    &lt;<span class="codeColorDarkRed">img</span> <span class="codeColorGreen">src</span><span class="codeColorDarkRed"> = </span><span class="codeColorYellow">"../picture/imageMap.jpg"</span> <span class="codeColorGreen">alt</span><span class="codeColorDarkRed"> = </span><span class="codeColorYellow">"imageMap"</span> </span>&gt;
                </code>
            </section>
        </div>
    </div>

    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/media.html">audio</a></h3><hr>
        <div  class="content">
            <audio controls>
                <source src="./media/audio.mp3" type="audio/ogg">
              Your browser does not support the audio element.
            </audio>
        </div>
    </div>

    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/media.html">API</a></h3><hr>
        <div  class="content">
            <h3>Locate the User's Position</h3>
            <a href="./details.html/userPosition.html">User's Position</a><br>
            <a href="./details.html/dragAndDrop.html">Drag and Drop</a>
        </div>
    </div>
    </section>
    <!-- A end -->

    <!-- B start -->
        
    <section id="b">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">break</a></h3><hr>
        <div  class="content">
            <p>This is another <br> paragraph.</p>

        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="/#">blockquote</a></h3><hr>
        <div  class="content">
            <p>Here is title</p>

            <blockquote cite="http://www.worldwildlife.org/who/index.html">
            Here is content
            </blockquote>

        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="/#">Bi-Directional Override</a></h3><hr>
        <div  class="content">
            <p>This text will be written from right to left</p>
            <bdo dir="rtl">This text will be written from right to left</bdo>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title" >block-level elements</h3><hr>
        <div  class="content">
            <p>Here are the block-level elements in HTML:</p>
            
                <section class="codeDiv">

                        &lt;<code class="codeColorDarkRed">address</code>&gt;  &lt;<code class="codeColorDarkRed">article</code>&gt;  &lt;<code class="codeColorDarkRed">aside</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">code</code>&gt;  &lt;<code class="codeColorDarkRed">blockquote</code>&gt;  &lt;<code class="codeColorDarkRed">dd</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">div</code>&gt;  &lt;<code class="codeColorDarkRed">dl</code>&gt;  &lt;<code class="codeColorDarkRed">dt</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">fieldset</code>&gt;  &lt;<code class="codeColorDarkRed">figcaption</code>&gt;  &lt;<code class="codeColorDarkRed">figure</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">footer</code>&gt;  &lt;<code class="codeColorDarkRed">form</code>&gt;  &lt;<code class="codeColorDarkRed">h1</code>&gt;
                        &lt;<code class="codeColorDarkRed">h6</code>&gt;  &lt;<code class="codeColorDarkRed">header</code>&gt;  &lt;<code class="codeColorDarkRed">hr</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">li</code>&gt;  &lt;<code class="codeColorDarkRed">main</code>&gt;  &lt;<code class="codeColorDarkRed">nav</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">noscript</code>&gt;  &lt;<code class="codeColorDarkRed">ol</code>&gt;  &lt;<code class="codeColorDarkRed">p</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">pre</code>&gt;   &lt;<code class="codeColorDarkRed">section</code>&gt;  &lt;<code class="codeColorDarkRed">table</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">tfoot</code>&gt;   &lt;<code class="codeColorDarkRed">ul</code>&gt;  &lt;<code class="codeColorDarkRed">video</code>&gt;<br>
                    </code>
                </section>        
        </div>
    </div>
    </section>
    <!-- B end -->

    <!-- C start -->    
    <section id="c">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">cite</a></h3><hr>
        <div  class="content">
            <img src="./picture/tobu mone rekho.jpg" width="220" height="277" alt="The Scream">
            <p><cite>Tobu mone rekho</cite> by Shah Kamal Khan.</p>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/color.html">Colors</a></h3><hr>
        <div  class="content">
            <p>RGB values, HEX values, HSL values, RGBA values, and HSLA values.</p>
                <p>Same as color name "Tomato":</p>
                <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
                <h1 style="background-color:#ff6347;">#ff6347</h1>
                <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
                <p>Same as color name "Tomato", but 50% transparent:</p>
                <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
                <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="/#">comments</a></h3><hr>
        <div  class="content">
            <p>&lang;!- -Write your comments here - - &rang;</p>
            <!-- Write your comments here -->
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/css.html">CSS</a></h3><hr>
        <div  class="content">
            <h2>Cascading Style Sheets (CSS) is used to format the layout of a webpage.</h2>
        </div>
    </div>
    </section>
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/class.html">class</a></h3><hr>
        <div  class="content">
            class
        </div>
    </div>
    </section>
    <div class="typeDiv">
        <h3 class="title">Code</h3><hr>
        <div  class="content">
            <h3>HTML <code class="codeColorDarkRed">&lt;code&gt;</code> For Computer Code</h3>
            <p>The HTML <code class="codeColorDarkRed">&lt;code&gt;</code> element  is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font. Notice that <code class="codeColorDarkRed">&lt;code&gt;</code> element does not preserve extra whitespace and line-breaks. To fix this, you can put the <code class="codeColorDarkRed">&lt;code&gt;</code> element inside a <code class="codeColorDarkRed">&lt;pre&gt;</code> element:</p>
            <section class="codeRunDiv">
                <code>
                    <p>hello world</p>
                </code>
            </section>
            <section class="codeDiv">
                <code>
                    <p class="codeColorComment">&lt;!--For Computer Code--&gt;</p>
                    &lt;<code class="codeColorDarkRed">code</code>&gt;<br>
                        &nbsp; &nbsp; &lt;<code class="codeColorDarkRed">p</code>&gt;
                            hello world
                        &lt;<code class="codeColorDarkRed">/p</code>&gt;<br>
                    &lt;<code class="codeColorDarkRed">/code</code>&gt;
                </code>
<br><br>
                <code>
                    <p class="codeColorComment">&lt;!--use pre--&gt;</p>
                    &lt;<code class="codeColorDarkRed">pre</code>&gt;<br>
                        &nbsp; &nbsp; &lt;<code class="codeColorDarkRed">code</code>&gt;<br>
                        &nbsp; &nbsp; &nbsp; &nbsp; hello world<br>
                        &nbsp; &nbsp; &lt;<code class="codeColorDarkRed">/code</code>&gt;<br>
                    &lt;<code class="codeColorDarkRed">/pre</code>&gt;
                </code>
            </section>

            <h3>HTML <code>&lt;kbd&gt;</code> For Keyboard Input</h3>
            <p>The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.</p>

            
            <section class="codeRunDiv">
                <p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
            </section>
            <section class="codeDiv">
                <code>
                    <p class="codeColorComment">&lt;!--For Keyboard Input--&gt;</p>
                    &lt;<code class="codeColorDarkRed">p</code>&gt;
                    Save the document by pressing 
                        &lt;<code class="codeColorDarkRed">kbd</code>&gt;
                        Ctrl + S
                        &lt;<code class="codeColorDarkRed">/kbd</code>&gt;
                    &lt;<code class="codeColorDarkRed">/p</code>&gt;
                </code>
            </section>

            <h3>HTML <code>&lt;samp&gt;</code> For Program Output</h3>
            <p>The HTML <code>&lt;samp&gt;</code> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.</p>
            

            <section class="codeRunDiv">
                <p><samp>Hello World</samp></p>
            </section>
            <section class="codeDiv">
                <code>
                    <p class="codeColorComment">&lt;!--For Program Output--&gt;</p>
                    &lt;<code class="codeColorDarkRed">p</code>&gt;
                        &lt;<code class="codeColorDarkRed">samp</code>&gt;
                        Hello World
                        &lt;<code class="codeColorDarkRed">/samp</code>&gt;
                    &lt;<code class="codeColorDarkRed">/p</code>&gt;
                </code>
            </section>


            <h3>HTML <code class="codeColorDarkRed">&lt;var&gt;</code> For Variables</h3>
            <p>The HTML <code class="codeColorDarkRed">&lt;var&gt;</code> element  is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.</p>

            <section class="codeRunDiv">
                <p><var>x</var><code> = 10;</code></p>
            </section>
            <section class="codeDiv">
                <code>
                    <p class="codeColorComment">&lt;!--For Variables--&gt;</p>
                    &lt;<code class="codeColorDarkRed">p</code>&gt;
                        &lt;<code class="codeColorDarkRed">var</code>&gt; x &lt;<code class="codeColorDarkRed">/var</code>&gt;&lt;<code class="codeColorDarkRed">code</code>&gt;
                        = 10;
                        &lt;<code class="codeColorDarkRed">/code</code>&gt;
                    &lt;<code class="codeColorDarkRed">/p</code>&gt;
                </code>
            </section>
        </div>
    </div>


    <div class="typeDiv">
        <h3 class="title">Character Sets</h3><hr>
        <div  class="content">
            
            <h3>Characters</h3>
            <p>ASCII, ANSI, ISO-8859-1, UTF-8, Description</p>
            <p>ASCII uses the values from 0 to 31 (and 127) for control characters. ASCII uses the values from 32 to 126 for letters, digits, and symbols. ASCII does not use the values from 128 to 255.</p>
            <h4>The ANSI Character Set (Windows-1252)</h4>
            <p>ANSI is identical to ASCII for the values from 0 to 127. ANSI has a proprietary set of characters for the values from 128 to 159. ANSI is identical to UTF-8 for the values from 160 to 255.</p>
                <table class="entitiesTable">
                    <thead>
                        <tr>
                            <th class="entitiesTh">Number</th>
                            <th class="entitiesTh">ASCII</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="entitiesTd">33</td>
                            <td class="entitiesTd">&amp;#33;</td>
                            <td class="entitiesTd">&#33;</td>
                        </tr>
                        <tr>
                            <td class="entitiesTd">34</td>
                            <td class="entitiesTd">&amp;#34;</td>
                            <td class="entitiesTd">&#34;</td>
                        </tr>
                    </tbody>
                </table>
            </section>

        </div>
    </div> 


    </section>
    <!-- C end -->

    <!-- D start -->
    <section id="d"></section>
    <div class="typeDiv">
        <h3 class="title"><a href="/#">Default Filenames</a></h3><hr>
        <div  class="content">
            <p>When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".</p>
            <p>If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".</p>
        </div>
    </div> 
    </section>
    <!-- D end -->

    <!-- E start -->
    <section id="e">
        <div class="typeDiv">
            <h3 class="title"><a href="/#">Entities or character entity, Symbols</a></h3><hr>
            <div  class="content">
                <p>Reserved characters in HTML must be replaced with character entities. Entity names are case sensitive.</p>
                <section class="codeRunDiv">
                    <table class="entitiesTable">
                        <thead>
                            <tr>
                                <th class="entitiesTh">Description</th>
                                <th class="entitiesTh">Entity Name</th>
                                <th class="entitiesTh">Entity Number</th>
                                <th class="entitiesTh">Output</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="entitiesTd">les Then</td>
                                <td class="entitiesTd">&amp;lt;</td>
                                <td class="entitiesTd">&amp;#60;</td>
                                <td class="entitiesTd">&lt;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">greater Then</td>
                                <td class="entitiesTd">&amp;gt;</td>
                                <td class="entitiesTd">&amp;#62;</td>
                                <td class="entitiesTd">&gt;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">Non-breaking Space</td>
                                <td class="entitiesTd">&amp;nbsp;</td>
                                <td class="entitiesTd"></td>
                                <td class="entitiesTd">&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">ampersand</td>
                                <td class="entitiesTd">&amp;amp;</td>
                                <td class="entitiesTd">&amp;#38;</td>
                                <td class="entitiesTd">&amp;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">double quotation</td>
                                <td class="entitiesTd">&amp;quot;</td>
                                <td class="entitiesTd">&amp;#34;</td>
                                <td class="entitiesTd">&quot;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">single quotation (apostrophe)</td>
                                <td class="entitiesTd">&amp;apos;</td>
                                <td class="entitiesTd">&amp;#39;</td>
                                <td class="entitiesTd">&apos;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">cent</td>
                                <td class="entitiesTd">&amp;cent;</td>
                                <td class="entitiesTd">&amp;#162;</td>
                                <td class="entitiesTd">&cent;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">pound</td>
                                <td class="entitiesTd">&amp;pound;</td>
                                <td class="entitiesTd">&amp;#163;</td>
                                <td class="entitiesTd">&pound;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">yen</td>
                                <td class="entitiesTd">&amp;yen;</td>
                                <td class="entitiesTd">&amp;#165;</td>
                                <td class="entitiesTd">&yen;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">euro</td>
                                <td class="entitiesTd">&amp;euro;</td>
                                <td class="entitiesTd">&amp;#8364;</td>
                                <td class="entitiesTd">&euro;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">copyright</td>
                                <td class="entitiesTd">&amp;copy;</td>
                                <td class="entitiesTd">&amp;#169;</td>
                                <td class="entitiesTd">&copy;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">registered trademark</td>
                                <td class="entitiesTd">&amp;reg;</td>
                                <td class="entitiesTd">&amp;#174;</td>
                                <td class="entitiesTd">&reg;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">LEFTWARDS ARROW</td>
                                <td class="entitiesTd">&amp;larr;</td>
                                <td class="entitiesTd">&amp;#8592;</td>
                                <td class="entitiesTd">&larr;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">UPWARDS ARROW</td>
                                <td class="entitiesTd">&amp;uarr;</td>
                                <td class="entitiesTd">&amp;#8593;</td>
                                <td class="entitiesTd">&uarr;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">RIGHTWARDS ARROW</td>
                                <td class="entitiesTd">&amp;rarr;</td>
                                <td class="entitiesTd">&amp;#8594;</td>
                                <td class="entitiesTd">&rarr;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">DOWNWARDS ARROW</td>
                                <td class="entitiesTd">&amp;darr;</td>
                                <td class="entitiesTd">&amp;#8595;</td>
                                <td class="entitiesTd">&darr;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">BLACK SPADE SUIT</td>
                                <td class="entitiesTd">&amp;spades;</td>
                                <td class="entitiesTd">&amp;#9824;</td>
                                <td class="entitiesTd">&spades;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">BLACK CLUB SUIT</td>
                                <td class="entitiesTd">&amp;clubs;</td>
                                <td class="entitiesTd">&amp;#9827;</td>
                                <td class="entitiesTd">&clubs;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">BLACK HEART SUIT</td>
                                <td class="entitiesTd">&amp;hearts;</td>
                                <td class="entitiesTd">&amp;#9829;</td>
                                <td class="entitiesTd">&hearts;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">BLACK DIAMOND SUIT</td>
                                <td class="entitiesTd">&amp;diams;</td>
                                <td class="entitiesTd">&amp;#9830;</td>
                                <td class="entitiesTd">&diams;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">link</td>
                                <td class="entitiesTd"><a href="https://www.w3schools.com/html/html_symbols.asp">link</a></td>
                                
                            </tr>
                        </tbody>
                    </table>
                </section>

                <h3>Combining Diacritical Marks</h3>
                <p>A diacritical mark is a "glyph" added to a letter. Some diacritical marks, like grave (  ̀) and acute (  ́) are called accents.</p>
                <section class="codeRunDiv">
                    <table class="entitiesTable">
                        <thead>
                            <tr>
                                <th class="entitiesTh">Construct</th>
                                <th class="entitiesTh">Character</th>
                                <th class="entitiesTh">Output</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="entitiesTd">a&amp;#768;</td>
                                <td class="entitiesTd">a</td>
                                <td class="entitiesTd">a&#768;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">c&amp;#769;</td>
                                <td class="entitiesTd">c</td>
                                <td class="entitiesTd">c&#769;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">n&amp;#770;</td>
                                <td class="entitiesTd">n</td>
                                <td class="entitiesTd">n&#770;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">o&amp;#771;</td>
                                <td class="entitiesTd">o</td>
                                <td class="entitiesTd">o&#771;</td>
                            </tr>
                        </tbody>
                    </table>
                </section>
                <h3>Symbols</h3>
                <p>Symbols that are not present on your keyboard can also be added by using entities.</p>
                <section class="codeRunDiv">
                    <table class="entitiesTable">
                        <thead>
                            <tr>
                                <th class="entitiesTh">Description</th>
                                <th class="entitiesTh">Entity Name</th>
                                <th class="entitiesTh">Entity Number</th>
                                <th class="entitiesTh">Output</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="entitiesTd">FOR ALL</td>
                                <td class="entitiesTd">&amp;forall;</td>
                                <td class="entitiesTd">&amp;#8704;</td>
                                <td class="entitiesTd">&#8704;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">PARTIAL DIFFERENTIAL</td>
                                <td class="entitiesTd">&amp;part;</td>
                                <td class="entitiesTd">&amp;#8706;</td>
                                <td class="entitiesTd">&part;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">THERE EXISTS</td>
                                <td class="entitiesTd">&amp;exist;</td>
                                <td class="entitiesTd">&amp;#8707;</td>
                                <td class="entitiesTd">&exist;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">EMPTY SETS</td>
                                <td class="entitiesTd">&amp;empty;</td>
                                <td class="entitiesTd">&amp;#8709;</td>
                                <td class="entitiesTd">&empty;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">NABLA</td>
                                <td class="entitiesTd">&amp;nabla;</td>
                                <td class="entitiesTd">&amp;#8711;</td>
                                <td class="entitiesTd">&nabla;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">ELEMENT OF</td>
                                <td class="entitiesTd">&amp;isin;</td>
                                <td class="entitiesTd">&amp;#8712;</td>
                                <td class="entitiesTd">&isin;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">NOT AN ELEMENT OF</td>
                                <td class="entitiesTd">&amp;notin;</td>
                                <td class="entitiesTd">&amp;#8713;</td>
                                <td class="entitiesTd">&notin;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">CONTAINS AS MEMBER</td>
                                <td class="entitiesTd">&amp;ni;</td>
                                <td class="entitiesTd">&amp;#8715;</td>
                                <td class="entitiesTd">&ni;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">N-ARY PRODUCT</td>
                                <td class="entitiesTd">&amp;prod;</td>
                                <td class="entitiesTd">&amp;#8719;</td>
                                <td class="entitiesTd">&prod;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">N-ARY SUMMATION</td>
                                <td class="entitiesTd">&amp;sum;</td>
                                <td class="entitiesTd">&amp;#8719;</td>
                                <td class="entitiesTd">&sum;</td>
                            </tr>
                            
                        </tbody>
                    </table>
                </section>
            </div>
        </div>


        <div class="typeDiv">
            <h3 class="title"><a href="/#">Using Emojis in HTML, &#128512;, &#128525;</a></h3><hr>
            <div  class="content">
                <p>Emojis are characters from the UTF-8 character set:</p>
                <h3>What are Emojis?</h3>
                <p>Emojis look like images, or icons, but they are not. They are letters (characters) from the UTF-8 (Unicode) character set.</p>
                <h4>The HTML charset Attribute</h4>
                <p>If not specified, UTF-8 is the default character set in HTML.</p>
                <section class="codeDiv">
                    &lt;<span class="codeColorDarkRed">meta</span> <span class="codeColorGreen">charset</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"UTF-8"</span>
                </section>

                <h3>UTF-8 Characters</h3>
                <section class="codeRunDiv">
                    <table class="entitiesTable">
                        <thead>
                            <tr>
                                <th class="entitiesTh">Characters</th>
                                <th class="entitiesTh">UTF-8 Characters, ASCII</th>
                                <th class="entitiesTh">Output</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="entitiesTd">A</td>
                                <td class="entitiesTd">&amp;#65;</td>
                                <td class="entitiesTd">&#65;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">B</td>
                                <td class="entitiesTd">&amp;#66;</td>
                                <td class="entitiesTd">&#66;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">C</td>
                                <td class="entitiesTd">&amp;#67;</td>
                                <td class="entitiesTd">&#67;</td>
                            </tr>
                        </tbody>
                    </table>
                </section>
                <h3>Emoji Characters</h3>
                <p>To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon). Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.</p>
                <section class="codeRunDiv">
                    <table class="entitiesTable">
                        <thead>
                            <tr>
                                <th class="entitiesTh">Characters</th>
                                <th class="entitiesTh">imoji</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="entitiesTd">&amp;#128512;</td>
                                <td class="entitiesTd">&#128512;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">&amp;#128525;</td>
                                <td class="entitiesTd">&#128525;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">&amp;#128151;</td>
                                <td class="entitiesTd">&#128151;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">link</td>
                                <td class="entitiesTd"><a href="https://www.w3schools.com/charsets/ref_emoji.asp">emojis</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <br>
                    <table class="entitiesTable">
                        <thead>
                            <tr>
                                <th class="entitiesTh">font-suze</th>
                                <th class="entitiesTh">imoji</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="entitiesTd">font-size: 40px;</td>
                                <td class="entitiesTd" style="font-size: 40px;">&#128525;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">font-size: 50px;</td>
                                <td class="entitiesTd" style="font-size: 50px;">&#128525;</td>
                            </tr>
                            <tr>
                                <td class="entitiesTd">font-size: 60px;</td>
                                <td class="entitiesTd" style="font-size: 60px;">&#128525;</td>
                            </tr>
                        </tbody>
                    </table>
                </section>


            </div>
        </div> 
    </section>
    <!-- E end -->

    <!-- F start -->
    <section id="f">
        <div class="typeDiv">
            <h3 class="title">Figure and Figcaption</h3><hr>
            <div  class="content">
                
                <p>The <code class="codeColorDarkRed">&lt;figure&gt;</code> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.</p>

                <p>The <code class="codeColorDarkRed">&lt;figcaption&gt;</code> tag defines a caption for a <code class="codeColorDarkRed">&lt;figure&gt;</code> element. The <code class="codeColorDarkRed">&lt;figcaption&gt;</code> element can be placed as the first or as the last child of a <code class="codeColorDarkRed">&lt;figure&gt;</code> element.</p>

                <section class="codeRunDiv">
                   <figure>
                        <img src="./picture/tobu mone rekho.jpg" alt="Trulli" style="width:150px" height="200px">
                        <figcaption>Fig.1 - Tobu mone rekho</figcaption>
                    </figure>
                </section>
                <section class="codeDiv">
                    <code>
                        
                        &lt;<code class="codeColorDarkRed">figure</code>&gt;<br>
                        &nbsp; &nbsp; &lt;<span class="codeColorDarkRed">img</span> <span class="codeColorGreen">src</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"./picture/tobu mone rekho.jpg"</span> <span class="codeColorGreen">alt</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"tobu mone rekho"</span> &gt;<br>
                        &nbsp; &nbsp; &lt;<code class="codeColorDarkRed">figcaption</code>&gt;
                            Fig.1 - Tobu mone rekho
                        &lt;<code class="codeColorDarkRed">/figcaption</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">/figure</code>&gt;
                    </code>
                </section>
            </div>
        </div>

        <div class="typeDiv">
            <h3 class="title"><a href="./details.html/form.html">Forms</a></h3><hr>
            <div  class="content">
                <p> the default width of an input field is 20 characters.</p>
                <section class="codeRunDiv">
                   
                </section>
                <section class="codeDiv">
                    <code>
                        
                    </code>
                </section>
            </div>
        </div>
    </section>
    <!-- F end -->

    <!-- G start -->
    <section id="g">
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/graphics.html">Graphics</a></h3><hr>
        <div  class="content">
            <p>Canvas</p>
            <div>
                <canvas id="myCanvas2" width="200" height="100" style="border:1px solid red;"></canvas>
            </div>
            <div>
                <canvas id="myCanvas4" width="200" height="100" style="border:1px solid red;"></canvas>
            </div>

            <script>

                var c2  = document.getElementById("myCanvas2");
                var ctx2 = c2.getContext("2d");
                ctx2.beginPath();
                ctx2.arc(95, 50, 40, 0, 2 * Math.PI);
                ctx2.stroke();

                var c4 = document.getElementById("myCanvas4");
                var ctx4 = c4.getContext("2d");

                // Create gradient
                var grd4 = ctx4.createRadialGradient(75, 50, 5, 90, 60, 100);
                grd4.addColorStop(0, "red");
                grd4.addColorStop(1, "white");

                // Fill with gradient
                ctx4.fillStyle = grd4;
                ctx4.fillRect(10, 10, 150, 80);
            </script>

        </div>
    </div>

    <div class="typeDiv">
        <h3 class="title"><a href="/#">SVG Graphics</a></h3><hr>
        <div  class="content">
            <p>SVG Graphics</p>
            <p>SVG defines vector-based graphics in XML format.</p>
            <p>SVG stands for Scalable Vector Graphics</p>

            <svg width="300" height="200">
                <polygon points="100,10 40,198 190,78 10,78 160,198"
                style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
            </svg>
        </div>
    </div>
    </section>
    <!-- G end -->

    <!-- H start -->
    <section id="h">
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/hyperLinks.html">HyperLinks, HTML links</a></h3><hr>
        <div  class="content">
            <a href="url">text</a>
            <p>A link does not have to be text. A link can be an image or any other HTML element!</p>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title">.htm and .html?</h3><hr>
        <div  class="content">
            <p>There is no difference between the .htm and .html file extensions! Both will be treated as HTML by any web browser and web server.</p>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="/#">Headings</a></h3><hr>
        <div  class="content">
            <h1>Header 1</h1>
            <h2>Header 2</h2>
            <h3>Header 3</h3>
            <h4>Header 4</h4>
            <h5>header 5</h5>
            <h6>Header 6</h6>
        </div>
    </div>
    </section>
    <div class="typeDiv">
        <h3 class="title">The Head Element</h3><hr>
        <div  class="content">
            <p>The HTML <code>&lt;head&gt;</code> element is a container for the following elements:</p>
            <code>
                &lt;<span class="codeColorDarkRed">title</span>&gt;, &lt;<span class="codeColorDarkRed">style</span>&gt;, &lt;<span class="codeColorDarkRed">meta</span>&gt;, &lt;<span class="codeColorDarkRed">link</span>&gt;, &lt;<span class="codeColorDarkRed">script</span>&gt;, and &lt;<span class="codeColorDarkRed">base</span>&gt;
                
            </code>
            <p>HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information. </p>

            <h3>title</h3>
            <p>The "title" element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The "title" element is required in HTML documents! The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results. </p>

            <h3>style</h3>
            <p>The "style" element is used to define style information for a single HTML page:</p>
            
            <h3>link</h3>
            <p>The "link" element defines the relationship between the current document and an external resource. </p>

            <h3>meta</h3>
            <p>The "meta" element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings. The metadata will not be displayed on the page, but are used by browsers (how to display content or reload page), by search engines (keywords), and other web services. </p>

            <h3>Examples</h3>
            <section class="codeDiv">
                <code>
                    <pre>
                    <span class="codeColorComment">Define the character set used:</span><br>
                    &lt;<span class="codeColorDarkRed">meta</span> <span class="codeColorGreen">charset</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"UTF-8"</span> &gt;


                    <span class="codeColorComment">Define keywords for search engines:</span><br>
                    &lt;<span class="codeColorDarkRed">meta</span> <span class="codeColorGreen">name</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"keywords"</span><span class="codeColorGreen">content</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"HTML, CSS, JavaScript"</span> &gt;


                    <span class="codeColorComment">Define a description of your web page:</span><br>
                    &lt;<span class="codeColorDarkRed">meta</span> <span class="codeColorGreen">name</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"description"</span><span class="codeColorGreen">content</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"Free Web tutorials"</span> &gt;


                    <span class="codeColorComment">Define the author of a page:</span><br>
                    &lt;<span class="codeColorDarkRed">meta</span> <span class="codeColorGreen">name</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"author"</span><span class="codeColorGreen">content</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"Md Ashik Mahmud"</span> &gt;


                    <span class="codeColorComment">Refresh document every 30 seconds:</span><br>
                    &lt;<span class="codeColorDarkRed">meta</span> <span class="codeColorGreen">http-equiv</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"refresh"</span><span class="codeColorGreen">content</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"30"</span> &gt;


                    <span class="codeColorComment">Setting the viewport to make your website look good on all devices:</span><br>
                    &lt;<span class="codeColorDarkRed">meta</span> <span class="codeColorGreen">name</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"viewport"</span><span class="codeColorGreen">content</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"width=device-width, initial-scale=1.0"</span> &gt;
                    <span class="codeColorComment">The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).</span><br>
                    <span class="codeColorComment">The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.</span><br>
                </pre>
                </code>
            </section> 

        </div>
    </div>
    </section>
    <!-- H end -->

    <!-- I start -->
    <section id="i">
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/image.html">Images </a> &nbsp; <a href="./details.html/imageMap.html">Image Map</a></h3><hr>
        <div  class="content">
            <section class="codeRunDiv">
                <img src="./picture/html5logo.png" alt="W3Schools.com" width="140" height="140">
                <!-- <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> -->
            </section>
            <p>
                The &lt;img&gt; tag is empty, it contains attributes only, and does not have a closing tag.
            </p>

            <hr>
            <section class="codeRunDiv">
                <img src="../picture/imageMap.jpg" alt="imageMap" usemap="#testmap" height="350" width="350">

                <map name="testmap">
                    <!-- <area shape="rect" coords="from-left, from-top, 270, 607" href="laptop.htm" alt=""> -->
                    <area shape="rect" coords="250, 264, 630, 607" href="./laptop.html" alt="laptop">
                    <area shape="circle" coords="740, 566, 38" href="./mouse.html" alt="mouse">
                    <!-- <area shape="cercle" coords="700, 700, 50" href="" alt=""> -->
                    <area shape="" coords="" href="" alt="">
                </map>
            </section>
            
            <section class="codeDiv">
                <pre>
                &lt;<span class="codeColorDarkRed">img</span> <span class="codeColorGreen">src</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"../picture/imageMap.jpg"</span> <span class="codeColorGreen">alt</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"imageMap"</span> <span class="codeColorGreen">usemap</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"#testmap"</span>&gt;
    
                &lt;<span class="codeColorDarkRed">map</span> <span class="codeColorGreen">name</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"testmap"</span>&gt;
                    &lt;<span class="codeColorDarkRed">area</span> <span class="codeColorGreen">shape</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"rect"</span> <span class="codeColorGreen">coords</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"250, 264, 630, 607"</span> <span class="codeColorGreen">href</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"./laptop.html"</span> <span class="codeColorGreen">alt</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"laptop"</span>&gt;
                    &lt;<span class="codeColorDarkRed">area</span> <span class="codeColorGreen">shape</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"circle"</span> <span class="codeColorGreen">coords</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"740, 566, 38"</span> <span class="codeColorGreen">href</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"./mouse.html"</span> <span class="codeColorGreen">alt</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"mouse"</span>&gt;
                    &lt;<span class="codeColorDarkRed">area</span> <span class="codeColorGreen">shape</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">""</span> <span class="codeColorGreen">coords</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">""</span> <span class="codeColorGreen">href</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">""</span> <span class="codeColorGreen">alt</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">""</span>&gt;
                &lt;<span class="codeColorDarkRed">/map</span>&gt;
                </pre>
            </section>
            <a class="BackButton" href="./details.html/image.html">Images </a> &nbsp;&nbsp; <a class="BackButton" href="./details.html/imageMap.html">Image Map</a> 
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="/#">Inline Elements</a></h3><hr>
        <div  class="content">
            <div  class="content">
                <p>Here are the inline elements in HTML:</p>
                <p>An inline element does not start on a new line. An inline element only takes up as much width as necessary. An inline element cannot contain a block-level element!</p>
                <section class="codeDiv">
                    <code>
                        &lt;<code class="codeColorDarkRed">a</code>&gt;  &lt;<code class="codeColorDarkRed">abbr</code>&gt;  &lt;<code class="codeColorDarkRed">acronym</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">b</code>&gt;  &lt;<code class="codeColorDarkRed">bdo</code>&gt;  &lt;<code class="codeColorDarkRed">big</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">br</code>&gt;  &lt;<code class="codeColorDarkRed">button</code>&gt;  &lt;<code class="codeColorDarkRed">cite</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">code</code>&gt;  &lt;<code class="codeColorDarkRed">dfn</code>&gt;  &lt;<code class="codeColorDarkRed">em</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">i</code>&gt;  &lt;<code class="codeColorDarkRed">img</code>&gt;  &lt;<code class="codeColorDarkRed">input</code>&gt;
                        &lt;<code class="codeColorDarkRed">label</code>&gt;  &lt;<code class="codeColorDarkRed">map</code>&gt;  &lt;<code class="codeColorDarkRed">object</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">output</code>&gt;  &lt;<code class="codeColorDarkRed">q</code>&gt;  &lt;<code class="codeColorDarkRed">samp</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">script</code>&gt;  &lt;<code class="codeColorDarkRed">select</code>&gt;  &lt;<code class="codeColorDarkRed">small</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">span</code>&gt;   &lt;<code class="codeColorDarkRed">strong</code>&gt;  &lt;<code class="codeColorDarkRed">sub</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">sup</code>&gt;   &lt;<code class="codeColorDarkRed">textarea</code>&gt;  &lt;<code class="codeColorDarkRed">time</code>&gt;<br>
                        &lt;<code class="codeColorDarkRed">tt</code>&gt;   &lt;<code class="codeColorDarkRed">var</code>&gt; <br>
                    </code>
                </section>        
            </div>

        </div>
    </div>

    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/id.html">id attribute</a></h3><hr>
        <div  class="content">
            <div  class="content">
                <p>
                    The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element \
                    with the same id in an HTML document. the id attribute must be unique within the HTML document. The id name is case 
                    sensitive! The id name must contain at least one character, cannot start with a number, and must not contain 
                    whitespaces (spaces, tabs, etc.).
                </p>
                <section class="codeDiv">
                    <pre>
                        &lt;<code class="codeColorDarkRed">script</code>&gt;
                            <code class="codeColorDarkRed">const</code> x = document.getElementById("lion");
                            <span class="codeColorComment">// x = lion </span>
                        &lt;<code class="codeColorDarkRed">/script</code>&gt;<br>
            
                        &lt;<code class="codeColorDarkRed">div</code> <span class="codeColorGreen">id</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"lion"</span>&gt;
                            lion
                        &lt;<code class="codeColorDarkRed">/div</code>&gt;<br>
                    </pre>
                </section>      
            </div>

        </div>
    </div>


    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/iframeSyntax.html">Iframe Syntax</a></h3><hr>
        <div  class="content">
            <div  class="content">
                <p>The HTML <code>&lt;iframe&gt;</code> tag specifies an inline frame. An HTML iframe is used to display a web page within a web page.</p>
                <!-- <iframe src="url" title="description"></iframe> -->
                <section class="codeDiv">
                    <code>
                        <!-- height="200" width="300" -->
                        &lt;<code class="codeColorDarkRed">iframe</code> <span class="codeColorGreen">src</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"url"</span> <span class="codeColorGreen">title</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"description"</span> <span class="codeColorGreen">height</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"200"</span> <span class="codeColorGreen">width</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"300"</span>&gt; &lt;<code class="codeColorDarkRed">/iframe</code>&gt;<br>
                    </code>
                </section> 
                <iframe src="https://hotel-night-queen.netlify.app/" style="border: none;" title="github" height="400px" width="90%"></iframe>   
            </div>

        </div>
    </div>

    <div class="typeDiv">
        <h3 class="title">input</h3><hr>
        <div  class="content">>
            <section class="codeRunDiv">
                text: <input type="text"><br>
                password: <input type="password"><br>
                number: <input type="number"><br>
                email: <input type="email"><br>
                search: <input type="search"><br>
                tel: <input type="tel"><br>
                url: <input type="url"><br>
                submit: <input type="submit" value="submit"><br>
                button: <input type="button" value="Button"><br>
                reset<input type="reset"><br>
                file: <input type="file"><br>
                date: <input type="date"><br>
                datetime-local: <input type="datetime-local"><br>
                month: <input type="month"><br>
                time: <input type="time"><br>
                week: <input type="week"><br>
                checkbox: <input type="checkbox"><br>
                radio: <input type="radio"><br>
                hidden: <input type="hidden"><br>
                image: <input type="image"><br>
                color: <input type="color"><br>
                range: <input type="range"><br>
            </section>
            
            <section class="codeDiv">
                <pre>
                <!-- &lt;<span class="codeColorDarkRed">map</span> <span class="codeColorGreen">name</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"testmap"</span>&gt;
                    &lt;<span class="codeColorDarkRed">area</span> <span class="codeColorGreen">shape</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"rect"</span> <span class="codeColorGreen">coords</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"250, 264, 630, 607"</span> <span class="codeColorGreen">href</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"./laptop.html"</span> <span class="codeColorGreen">alt</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"laptop"</span>&gt;
                    &lt;<span class="codeColorDarkRed">area</span> <span class="codeColorGreen">shape</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"circle"</span> <span class="codeColorGreen">coords</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"740, 566, 38"</span> <span class="codeColorGreen">href</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"./mouse.html"</span> <span class="codeColorGreen">alt</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"mouse"</span>&gt;
                    &lt;<span class="codeColorDarkRed">area</span> <span class="codeColorGreen">shape</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">""</span> <span class="codeColorGreen">coords</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">""</span> <span class="codeColorGreen">href</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">""</span> <span class="codeColorGreen">alt</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">""</span>&gt;
                &lt;<span class="codeColorDarkRed">/map</span>&gt; -->
                </pre>
            </section>
            

            <h3>HTML Input Attributes</h3>
            <p>value, </p>
            <section class="codeRunDiv">
                value:  <input type="text" value="Text here"><br>
                Readonly:  <input type="text" value="readonly" readonly><br>
                Disabled:  <input type="text" value="Disabled" disabled><br>
                Size: <input type="text" id="fname" name="fname" size="50"><br>
                <small class="codeColorComment">The default value for size is 20. The size attribute works with the following input types: text, search, tel, url, email, and password.</small><br>
                maxlength 4: <input type="text" id="pin" name="pin" maxlength="4" size="4"><br>
                <small class="codeColorComment">When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.</small><br>
                min and max: <input type="date" id="dateminmax" name="dateminmax" min="2021-01-01" max="2021-12-31"><br>
                <input type="number" id="minmaxnumber" name="minmaxnumber" value="0" min="0" max="9"><br>
                <small class="codeColorComment">The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.</small><br>
                Choose multiple files: <input type="file" id="files" name="files" multiple><br>
                <small class="codeColorComment">The multiple attribute works with the following input types: email, and file.</small><br>
                pattern: <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br>
                <small class="codeColorComment">The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. <a href="https://www.w3schools.com/js/js_regexp.asp"> regular expressions</a></small><br>
                placeholder: <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br>
                <small class="codeColorComment">The placeholder attribute works with the following input types: text, search, url, tel, email, and password.</small><br>
                required: <input type="text" id="username" name="username" required><br>
                <small class="codeColorComment">The input required attribute specifies that an input field must be filled out before submitting the form. Works with: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.</small><br>
                step: <input type="number" id="points" name="points" step="2"><br>
                <small class="codeColorComment"> if step="2", legal numbers could be -4, -2 0, 2, 4, etc. Works with: number, range, date, datetime-local, month, time and week.</small><br>
                Autofocus: <input type="text" id="name" name="name" autofocus><br>
                <small class="codeColorComment">The input autofocus attribute specifies that an input field should automatically get focus when the page loads.</small><br>

                height and width: <input type="image" src="./picture/weav.jpg" alt="Submit" width="48" height="48">

                <form>
                    list: <input list="device" placeholder="device">
                    <datalist id="device">
                      <option value="mobile">
                      <option value="laptop">
                      <option value="tablate">
                      <option value="pc">
                    </datalist>
                </form>

                autocomplete: <input type="email" id="email" name="email" autocomplete="off"><br><br>


            </section>
        </div>
    </div>
    
    </section>
    <!-- I end -->

    <!-- J start -->
    <section id="j">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">java script</a></h3><hr>
        <div  class="content">
            <section class="codeRunDiv">

                <p id="my">I am a student.</p>
                <p id="you">You are a student.</p>
                <script>
                    document.getElementById("you").innerHTML = "You are a teacher";
                </script>
            </section>
            <section class="codeDiv">
                <code>
                    &lt;<span class="codeColorDarkRed">body</span>&gt;<br>
                        &nbsp; &nbsp; &lt;<span class="codeColorDarkRed">p</span> <span class="codeColorGreen">id</span><span class="codeColorDarkRed">=</span><span class="codeColorYellow">"my"</span>&gt;
                        I am a student.&lt;<span class="codeColorDarkRed">/p</span>&gt;<br>
                        &nbsp; &nbsp; &lt;<span class="codeColorDarkRed">p</span> <span class="codeColorGreen">id</span><span class="codeColorDarkRed">=</span><span class="codeColorYellow">"you"</span>&gt;
                        You are a student.&lt;<span class="codeColorDarkRed">/p</span>&gt;<br>
                        
                        <br><br>
                        
                        &nbsp; &nbsp; &lt;<span class="codeColorDarkRed">script</span>&gt;<br>
                        &nbsp; &nbsp; &nbsp; &nbsp; document.<span class="codeColorGreen">getElementById</span>(<span class="codeColorYellow">"you"</span>).innerHTML <span class="codeColorDarkRed">=</span> <span class="codeColorYellow">"You are a teacher"</span>;<br>
                        &nbsp; &nbsp; &lt;<span class="codeColorDarkRed">/script</span>&gt;<br>
                        <script>
                            document.getElementById("you").innerHTML = "You are a teacher";
                        </script>
                    &lt;<span class="codeColorDarkRed">/body</span>&gt;
                </code>
            </section>

        </div>
    </div>
    </section>
    <!-- J end -->

    <!-- K start -->
    <section id="k">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">k</a></h3><hr>
        <div  class="content">
            <p>content</p>

        </div>
    </div>
    </section>
    <!-- K end -->

    <!-- L start -->    
    <section id="l">
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/hyperLinks.html">Link</a></h3><hr>
        <div  class="content">
            <p>hyperlink</p>
            <a href="https://www.facebook.com/Ashik100100/">My FaceBook link</a>

            <p>local link</p>
            <a href="./BlockLevelElements.html"></a>
        </div>
    </div> 

    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/hyperLinks.html">Layout</a></h3><hr>
        <div  class="content">
            <p>HTML has several semantic elements that define the different parts of a web page:</p>
            <code>
                <pre>
                    <dl>
                        <dt>&lt;<span class="codeColorDarkRed">header</span>&gt;</dt><dd>-Defines a header for a document or a section</dd>
                        <dt>&lt;<span class="codeColorDarkRed">nav</span>&gt;</dt><dd>Defines a set of navigation links</dd>
                        <dt>&lt;<span class="codeColorDarkRed">section</span>&gt;</dt><dd>- Defines a section in a document</dd>
                        <dt>&lt;<span class="codeColorDarkRed">article</span>&gt;</dt><dd>- Defines an independent, self-contained content</dd>
                        <dt>&lt;<span class="codeColorDarkRed">aside</span>&gt;</dt><dd>- Defines content aside from the content (like a sidebar)</dd>
                        <dt>&lt;<span class="codeColorDarkRed">footer</span>&gt;</dt><dd>- Defines a footer for a document or a section</dd>
                        <dt>&lt;<span class="codeColorDarkRed">details</span>&gt;</dt><dd>- Defines additional details that the user can open and close on demand</dd>
                        <dt>&lt;<span class="codeColorDarkRed">summary</span>&gt;</dt><dd>- Defines a heading for the <details> element</dd> 
                    </dl>
                </pre>
            </code>
        </div>
    </div> 

    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/lists.html">Lists</a></h3><hr>
        <div  class="content">
            <section class="codeRunDiv">
                <p><strong>An unordered HTML list:</strong></p>
                <ol>
                    <li>First item</li>
                    <li>Second item</li>
                    <li>Third item</li>
                    <li>Fourth item</li>
                </ol>
                <p><strong>An ordered HTML list:</strong></p>
                <ul>
                    <li>First item</li>
                    <li>Second item</li>
                    <li>Third item</li>
                    <li>Fourth item</li>
                </ul>
            </section>

            <section class="codeRunDiv">
                <p><strong>Control List Counting</strong></p>
                <ol start="50">
                    <li>first</li>
                    <li>second</li>
                </ol>  
                <ol type="I" start="10">
                    <li>first</li>
                    <li>second</li>
                </ol> 
            </section>
            <section class="codeDiv">
            <pre>
            &lt;<span class="codeColorDarkRed">ol</span> <span class="codeColorGreen">start</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"50"</span>&gt;
                &lt;<span class="codeColorDarkRed">li</span>&gt;first&lt;<span class="codeColorDarkRed">li</span>&gt;
                &lt;<span class="codeColorDarkRed">li</span>&gt;second&lt;<span class="codeColorDarkRed">li</span>&gt;
            &lt;<span class="codeColorDarkRed">/ol</span>&gt;
        
            &lt;<span class="codeColorDarkRed">ol</span> <span class="codeColorGreen">type</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"I"</span><span class="codeColorGreen">start</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"10"</span>&gt;
                &lt;<span class="codeColorDarkRed">li</span>&gt;first&lt;<span class="codeColorDarkRed">li</span>&gt;
                &lt;<span class="codeColorDarkRed">li</span>&gt;second&lt;<span class="codeColorDarkRed">li</span>&gt;
            &lt;<span class="codeColorDarkRed">/ol</span>&gt;
            </pre>
            </section>

            <section class="codeRunDiv">
                <p><strong>Nested HTML Lists</strong></p>
                <ul>
                    <li>Ashik</li>
                    <li>hobby
                        <ul>
                            <li>watching movie</li>
                            <li>Gaming</li>
                        </ul>
                    </li>
                </ul> 
            </section>
            <section class="codeDiv">
            <pre>
            &lt;<span class="codeColorDarkRed">ul</span>&gt;
                &lt;<span class="codeColorDarkRed">li</span>&gt;Ashik&lt;<span class="codeColorDarkRed">li</span>&gt;
                &lt;<span class="codeColorDarkRed">li</span>&gt;hobby
                    &lt;<span class="codeColorDarkRed">ul</span>&gt;
                        &lt;<span class="codeColorDarkRed">li</span>&gt;watching movie&lt;<span class="codeColorDarkRed">li</span>&gt;
                        &lt;<span class="codeColorDarkRed">li</span>&gt;Gaming&lt;<span class="codeColorDarkRed">li</span>&gt;
                    &lt;<span class="codeColorDarkRed">ul</span>&gt;
                &lt;<span class="codeColorDarkRed">li</span>&gt;
            &lt;<span class="codeColorDarkRed">/ul</span>&gt;
            </pre>
            </section>
            <p>A list item (&lt; li &gt;) can contain a new list, and other HTML elements, like images and links, etc.</p>


            <section class="codeRunDiv">
                <dl>
                    <dt>name</dt>
                    <dd>- my name</dd>
                </dl>
            </section>
            <section class="codeDiv">
            <pre>
            &lt;<span class="codeColorDarkRed">dl</span>&gt;
                &lt;<span class="codeColorDarkRed">dt</span>&gt;name&lt;<span class="codeColorDarkRed">dt</span>&gt;
                &lt;<span class="codeColorDarkRed">dd</span>&gt;- my name&lt;<span class="codeColorDarkRed">dd</span>&gt;
            &lt;<span class="codeColorDarkRed">/dt</span>&gt;
            </pre>
            </section>
        </div>
    </div> 
    </section>
    <!-- L end -->

    <!-- M start -->
    <section id="#m">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">Media</a></h3><hr>
        <div  class="content">
            <p>Multimedia on the web is sound, music, videos, movies, and animations. The MP4, WebM, and Ogg formats are supported by HTML.</p>

        </div>
    </div>
    </section>
    <!-- M end -->

    <!-- N start -->
    <section id="n">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">n</a></h3><hr>
        <div  class="content">
            <p>abc </p>

        </div>
    </div>
    <div id="nav" class="typeDiv">
        <h3>01<span style="color: gray;"> navbar</span></h3><hr>
        <nav style="width: 100%; height: 33px; background-color: rgb(163, 163, 189);; margin: 0px; padding: 0px;">
            <ul style="display: block; list-style-type: none; width: 600px; margin: 0 auto; padding: 0;">
                <li style="display: block; float: left; max-height: 25px; width: 100px; padding: 5px 0; font-family: Verdana, Geneva, Tahoma, sans-serif;">One</li>
                <li style="display: block; float: left; max-height: 25px; width: 100px; padding: 5px 0; font-family: Verdana, Geneva, Tahoma, sans-serif;">Two</li>
                <li style="display: block; float: left; max-height: 25px; width: 100px; padding: 5px 0; font-family: Verdana, Geneva, Tahoma, sans-serif;">Three</li>
                <li style="display: block; float: left; max-height: 25px; width: 100px; padding: 5px 0; font-family: Verdana, Geneva, Tahoma, sans-serif;">Four</li>
                <li style="display: block; float: left; max-height: 25px; width: 100px; padding: 5px 0; font-family: Verdana, Geneva, Tahoma, sans-serif;">Six</li>
            </ul>
        </nav>
    </div>
    </section>
    <!-- N end -->

    <!-- O start -->
    <section id="o">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">0</a></h3><hr>
        <div  class="content">
            <p>content</p>

        </div>
    </div>
    </section>
    <!-- O end -->

    <!-- P start -->
    <section id="#p">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">paragraph</a></h3><hr>
        <div  class="content">
            <p>This is a paragraph.</p>
            <p>This is another paragraph.</p>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="/#">picture</a></h3><hr>
        <div  class="content">
            <picture>
                <source media="(min-width: 650px)" srcset="./picture/imageMap.jpg">
                <source media="(min-width: 465px)" srcset="./picture/tobu mone rekho.jpg">
                <img src="./picture/mouse.jpg" style="width:auto;" height="100" width="100">
            </picture>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title">pre</h3><hr>
        <div  class="content">
            <pre>
                <!-- preformate -->
                hello
                    world.
            </pre>
        </div>
    </div>
    </section>

    <div class="typeDiv">
        <h3 class="title">File Paths</h3><hr>
        <div  class="content">
            <p>A file path describes the location of a file in a web site's folder structure.</p>

            <dl>
                <dt>File paths are used when linking to external files, like</dt>
                <dd>-Web pages</dd>
                <dd>-Images</dd>
                <dd>-Style sheets</dd>
                <dd>-JavaScripts</dd>
            </dl>
            <h3>Absolute File Paths</h3>
            <p>An absolute file path is the full URL to a file. such as: src="https://www.w3schools.com/images/picture.jpg"</p>
                
            <h3>Relative File Paths</h3>
            <p>A relative file path points to a file relative to the current page. such as: src="/images/picture.jpg"</p>
                
        </div>
    </div>

    <div class="typeDiv">
        <h3 class="title">Plug-ins</h3><hr>
        <div  class="content">
            <h3>object</h3>
            <object data="./picture/tobu mone rekho.jpg"></object>

            <h3>embed</h3>
            <embed src="./picture/tobu mone rekho.jpg" width="300" height="350">
        </div>
    </div>
    </section>

    
    <!-- P end -->

    <!-- Q start -->
    <section id="q">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">q</a></h3><hr>
        <div  class="content">
            <p>content</p>

        </div>
    </div>
    </section>
    <!-- Q end -->
        
    <!-- R start -->
    <section id="r">
    <div class="typeDiv">
        <h3 class="title">Responsive Web Design</h3><hr>
        <div  class="content">
            <p>Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports.</p>
            <h3>Media Queries</h3>
            <p>In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes.</p>
            
            <h4>resize the browser window:</h4>
            <section class="codeRunDiv responsiveSecion">
                <div style="width: 100%;">
                    <div class="left">left</div>
                    <div class="center">center</div>
                    <div class="right">right</div>
                </div>
            </section>
            <section class="codeDiv">
        <code>
            /* Use a media query to add a break point at 800px: */<br>
            <code class="codeColorDarkRed">@media</code> <code class="codeColor4">screen</code> <code class="codeColorDarkRed">and</code> (<code class="codeColorYellow">max-width:</code> <code class="codeColor4">850</code><code class="codeColorDarkRed">px</code>) { <br>
            &nbsp; &nbsp;<code class="codeColorGreen">.left, .main, .right</code> { <br>
                &nbsp; &nbsp; &nbsp; &nbsp;<code class="codeColorYellow">width:</code> <code class="codeColor4">100</code><code class="codeColorDarkRed">%</code>;
            /* The width is 100%, when the viewport is 800px or smaller */<br>
            &nbsp; &nbsp;}<br>
            }
        </code>
            </section>
            <h3>Responsive Web Design - Frameworks</h3>
            <p>All popular CSS Frameworks offer responsive design. W3.CSS, Bootstrap</p>
        </div>
    </div>
    
    </section>
    <!-- R end -->

    <!-- S start -->
    <section id="s">
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/styles.html">Styles</a></h3><hr>
        <div  class="content">
            <h1 style="background-color:powderblue;">This is a heading</h1>
            <p style="background-color:tomato; font-family:verdana;">This is a paragraph.</p>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/styles.html">Semantic Elements</a></h3><hr>
        <div  class="content">
            <p>Examples of non-semantic elements: <code class="codeColorDarkRed">&lt;div&gt;</code> and <code class="codeColorDarkRed">&lt;span&gt;</code> - Tells nothing about its content.</p>
            <p>Examples of semantic elements: <code class="codeColorDarkRed">&lt;form&gt;</code>, <code class="codeColorDarkRed">&lt;table&gt;</code>, and <code class="codeColorDarkRed">&lt;article&gt;</code> - Clearly defines its content.</p>
            
                <section class="codeDiv">
                    <code>
                        <code class="codeColorDarkRed">&lt;article&gt;</code>
                        <code class="codeColorDarkRed">&lt;aside&gt;</code>
                        <code class="codeColorDarkRed">&lt;details&gt;</code><br>
                        <code class="codeColorDarkRed">&lt;figcaption&gt;</code>
                        <code class="codeColorDarkRed">&lt;figure&gt;</code>
                        <code class="codeColorDarkRed">&lt;header&gt;</code><br>
                        <code class="codeColorDarkRed">&lt;footer&gt;</code>
                        <code class="codeColorDarkRed">&lt;main&gt;</code>
                        <code class="codeColorDarkRed">&lt;mark&gt;</code><br>
                        <code class="codeColorDarkRed">&lt;nav&gt;</code>
                        <code class="codeColorDarkRed">&lt;section&gt;</code>
                        <code class="codeColorDarkRed">&lt;summary&gt;</code><br>
                        <code class="codeColorDarkRed">&lt;time&gt;</code>
                    </code>
                </section>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title">Style Guide</h3><hr>
        <div  class="content">
                <h4>Close All HTML Elements</h4>
                <section class="codeDiv">
                  <code>
                    &lt;<code class="codeColorDarkRed">p</code>&gt; paragraph &lt;<code class="codeColorDarkRed">/p</code>&gt;
                  </code>
                </section>
                <h4>Use Lowercase Attribute Names, Spaces and Equal Signs</h4>
                <p>HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.</p>
                <section class="codeDiv">
                  <code>
                    &lt;<code class="codeColorDarkRed">img</code> <span class="codeColorGreen">href</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"url"</span>  <span class="codeColorGreen">height</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"200"</span> <span class="codeColorGreen">width</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"300"</span>&gt;
                  </code>
                </section>
                <h4>Always Specify alt, width, and height for Images</h4>
                <section class="codeDiv">
                  <code>
                    &lt;<code class="codeColorDarkRed">img</code> <span class="codeColorGreen">href</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"url"</span>  <span class="codeColorGreen">alt</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"image"</span> 
                    <span class="codeColorGreen">height</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"200"</span> 
                    <span class="codeColorGreen">width</span> <span class="codeColorDarkRed">=</span><span class="codeColorYellow">"300"</span>&gt;
                  </code>
                </section>
                <h4>Differences Between .htm and .html?</h4>
                <p>There is no difference between the .htm and .html file extensions! Both will be treated as HTML by any web browser and web server.</p>
        </div>
    </div>
    <section id="u">
        <div class="typeDiv">
            <h3 class="title">select</h3><hr>
            <div  class="content">
                <p>The <option> elements defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option. Use the size attribute to specify the number of visible values. Use the multiple attribute to allow the user to select more than one value. </p>
            
                <h4>size</h4>
                <select id="cars" name="cars" size="3">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                    <option value="audi">Audi</option>
                    <option value="audi">Audi</option>
                </select>
                
                <h4>select multiple use ctl</h4>
                <select id="cars" name="cars" multiple>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                    <option value="audi">Audi</option>
                    <option value="audi">Audi</option>
                </select>

                <label for="datalist">datalist</label>
            <p>The "datalist" element specifies a list of pre-defined options for an "input" element. Users will see a drop-down list of the pre-defined options as they input data.  The list attribute of the "input" element, must refer to the id attribute of the "datalist" element.</p>
            <input list="browsers" name="browser">
            <datalist id="browsers">
                <option value="one">
                <option value="two">
                <option value="three">
                <option value="four">
                <option value="five">
            </datalist>
            <input type="submit">
            </div>
        </div>
        </section>
    </section>
    <!-- S end -->

    <!-- T start -->
    <section id="t">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">Title or abbreviations</a></h3><hr>
        <div  class="content">
            <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="/#">Text Formatting Elements</a></h3><hr>
        <div  class="content">
            <strong>Bold, Important, Italic, Emphasized, Marked, Smaller, Deleted, Inserted, Under, Subscript, Superscript, quote</strong>
                <p>This is <b>Bold</b> text</p>
                <p>This is <strong>Important</strong> text</p>

                <p>This is <i>Italic text</i></p>

                <p>I <em>Emphasized text</em> that</p>

                <p><mark>Marked text</mark></p>

                <p>This is the <small>Smaller text</small> of the paragraph</p>

                <p>Discount: <del>Deleted text</del></p>

                <p>
                    <ins>Inserted text</ins>
                    <u>Under line</u>
                </p>

                <p>
                    <sub>Subscript text</sub>
                    TEXT
                    <sup>Superscript text</sup>
                </p>
                <p>Here is <q>quote</q></p>
        </div>
    </div>
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/table.html">Table</a></h3><hr>
        <div  class="content">
            <h4>Table</h4>
        <table style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189);">
        <caption>border-collapse: collapse;</caption>
        <tr style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189);">
            <th colspan="2" style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">Name</th>
            <th style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">Age</th>
            <th style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">Favorite</th>
        </tr>
        <tr style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189);">
            <td style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">Ashik</td>
            <td style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">Mahmud</td>
            <td style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">23</td>
            <td rowspan="2" style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">gardening</td>
        </tr>
        <tr style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189);">
            <td style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">Esha</td>
            <td style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">Moni</td>
            <td style="border-collapse: collapse; border: 1px solid rgb(163, 163, 189); padding: 5px;">10</td>
        </tr>
        </table>
        </div>
    </div>
    </section>
    <!-- T end -->

    <!-- U start -->
    <section id="u">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">u</a></h3><hr>
        <div  class="content">
            <p>content</p>

        </div>
    </div>
    </section>
    <!-- U end -->

    <!-- V start -->
    <section id="v">
    <div class="typeDiv">
        <h3 class="title"><a href="./details.html/media.html">Video</a></h3><hr>
        <div  class="content">
            <h3>video</h3>
            <video width="320" height="240" controls>
                <source src="./media/vidio.mp4" type="video/mp4">
            </video>

            <h3>Youtube video</h3>
            <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
            </iframe>
        </div>
    </div>
    </section>
    <!-- V end -->

    <!-- W start -->
    <section id="w">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">w</a></h3><hr>
        <div  class="content">
            <p>content</p>

        </div>
    </div>
    </section>
    <!-- W end -->

    <!-- X start -->
    <section id="x">
    <div class="typeDiv">
        <h3 class="title"><a href="https://www.w3schools.com/xml/default.asp">XHTML</a></h3><hr>
        <div  class="content">
            <h3>What is XHTML?</h3>
            <ul>
                <li>XHTML stands for EXtensible HyperText Markup Language</li>
                <li>XHTML is a stricter, more XML-based version of HTML</li>
                <li>XHTML is HTML defined as an XML application</li>
                <li>XHTML is supported by all major browsers</li>
            </ul>

        </div>
    </div>
    </section>
    <!-- X end -->

    <!-- Y start -->
    <section id="y">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">y</a></h3><hr>
        <div  class="content">
            <p>content</p>

        </div>
    </div>
    </section>
    <!-- Y end -->

    <!-- Z start -->
    <section id="z">
    <div class="typeDiv">
        <h3 class="title"><a href="/#">z</a></h3><hr>
        <div  class="content">
            <p>content</p>

        </div>
    </div>
    </section>
    <!-- Z end -->
        

</body>
</html>