Learn HTML

Learn HTML
(click here)

• Heading tag

• Text align and Text color

• Text background color

• paragraph tag

• Preformatted tag

• Line breaks tag

• Text size

• Text Formating

• Div tag

• Div background color

• Div round border

• Marquee tag

• Table

• Table background-color

• List

• Unordered List Type

• Ordered List Type

• Select

• Input Type

• Form

• Event (onclick)

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <h1>text align</h1> <h2 style="text-align:center;">Text 1</h2> <h2 style="text-align:left;">Text 2</h2> <h2 style="text-align:right;">Text 3</h2> <h1>text color</h1> <h2 style="color:orange;">Text 1</h2> <h2 style="color:red;">Text 2</h2> <h2 style="color:blue;">Text 3</h2> <h1 style="background-color:black; color:white;">Text 1</h1> <h2 style="background-color:cyan;color:red;">Text 2</h2> <h2 style="background-color:yellow;color:blue;">Text 3</h2> <p>This is a paragraph.</p> <p> multi line paragraph. multi line paragraph. multi line paragraph. </p> <pre> This is preformatted text. This is preformatted text. This is preformatted text. </pre> <p>Paragraph Text One.</p> <br> <p>Paragraph Text Two.</p> <br> <p>Paragraph Text Three.</p> <p style="font-size:15px;"> Paragraph Text One.</p> <br> <p style="font-size:20px;"> Paragraph Text Two.</p> <br> <p style="font-size:30px;"> Paragraph Text Three.</p> <u>underline</u> <p>horizontal rule</p> <hr> <p>horizontal rule</p> <p>This is a <b>bold</b> text.</p> <p>This is a <strong>strong</strong> text.</p> <p>This is a <i>italic</i> text.</p> <p>This is a <em>emphasized</em> text.</p> <p>This is a <mark>marked</mark> text.</p> <p>This is a <small>small</small> text.</p> <p>This is a <del>deleted</del> text.</p> <p>This is a <ins>inserted</ins> text.</p> <p>This is a _subscript text.</p> <p>This is a ^supersript text.</p> <h2>div tag</h2> <div>div 1</div> <br> <div>div 2</div> <h2>div border</h2> <div style="border:1px solid;">div 1</div> <br> <div style="border:1px solid;">div 2</div> <h2>div border color</h2> <div style="border:1px solid blue;">div 1</div> <br> <div style="border:1px solid green;">div 2</div> <div style="background-color:yellow; border:2px solid red; width:70%; height:30px; text-align:center;">div 1</div> <br> <div style="background-color:pink; border:2px solid blue; width:70%; height:30px; text-align:center;">div 2</div> <div style="background-color:yellow; border:2px solid red; border-radius:30px; width:70%; height:30px; text-align:center;">div 1</div> <br> <div style="background-color:pink; border:2px solid blue; border-radius:30px; width:70%; height:30px; text-align:center;">div 2</div> <br> <div style="border:2px solid orange; border-radius:30px; width:70%; height:30px; text-align:center;">div 2</div> <marquee direction="left"> <h2>Marquee Left</h2> </marquee> <marquee direction="right"> <h2>Marquee Right</h2> </marquee> <marquee direction="up" height="150px"> <h2>Marquee Up</h2> </marquee> <marquee direction="down" height="150px"> <h2>Marquee Down</h2> </marquee> <marquee behavior="alternate" direction="left"> <h2>Marquee Slide</h2> </marquee> <table border="1" style="width:100%; height:250px; text-align:center;"> <tr> <th>NAME</th> <th>AGE</th> <th>GRADE</th> </tr> <tr> <td>Faisal</td> <td>20</td> <td>A</td> </tr> <tr> <td>Kamran</td> <td>19</td> <td>B</td> </tr> <tr> <td>Agmal</td> <td>18</td> <td>C</td> </tr> </table> <table border="1" style="width:100%; height:250px; text-align:center; background-color:cyan;"> <tr> <th>NAME</th> <th>AGE</th> <th>GRADE</th> </tr> <tr> <td>Faisal</td> <td>20</td> <td>A</td> </tr> <tr> <td>Kamran</td> <td>19</td> <td>B</td> </tr> <tr> <td>Agmal</td> <td>18</td> <td>C</td> </tr> </table> <br><br> <table border="1" style="width:100%; height:250px; text-align:center; color:white;"> <tr style="background-color:SlateBlue;"> <th>NAME</th> <th>AGE</th> <th>GRADE</th> </tr> <tr style="background-color:Orange;"> <td>Faisal</td> <td>20</td> <td>A</td> </tr> <tr style="background-color:DodgerBlue;"> <td>Kamran</td> <td>19</td> <td>B</td> </tr> <tr style="background-color:Violet;"> <td>Agmal</td> <td>18</td> <td>C</td> </tr> </table> <h2>Unordered List</h2> <ul> <li>item A</li> <li>item B</li> <li>item C</li> </ul> <h2>Ordered List</h2> <ol> <li>item A</li> <li>item B</li> <li>item C</li> </ol> <h3>Type Disc</h3> <ul type="disc"> <li>item A</li> <li>item B</li> <li>item C</li> </ul> <h3>Type Circle</h3> <ul type="circle"> <li>item A</li> <li>item B</li> <li>item C</li> </ul> <h3>Type Square</h3> <ul type="square"> <li>item A</li> <li>item B</li> <li>item C</li> </ul> <h3>Type 1</h3> <ol type="1"> <li>item A</li> <li>item B</li> <li>item C</li> </ol> <h3>Type A</h3> <ol type="A"> <li>item A</li> <li>item B</li> <li>item C</li> </ol> <h3>Type a</h3> <ol type="a"> <li>item A</li> <li>item B</li> <li>item C</li> </ol> <h3>Type I</h3> <ol type="I"> <li>item A</li> <li>item B</li> <li>item C</li> </ol> <h3>Type i</h3> <ol type="i"> <li>item A</li> <li>item B</li> <li>item C</li> </ol> <h2>Select Gender</h2> <select style="width:150px; text-align:center;"> <option>Male</option> <option>Female</option> </select> <h2>Select Language</h2> <select style="width:150px; text-align:center;"> <option>English</option> <option>Arabic</option> <option>Hindi</option> </select> <h2>Select Country</h2> <select style="width:150px; text-align:center;"> <option>Canada</option> <option>Dubai</option> <option>India</option> </select> <h3>Enter All Text</h3> <input type="text" placeholder="Text Input" > <h3>Enter Any Number</h3> <input type="number" placeholder="Only Number"> <h3>Enter Email</h3> <input type="email" placeholder="Enter Email"> <h3>Enter Password</h3> <input type="password" placeholder="Enter Password"> <h3>Select a File</h3> <input type="file"> <h3>Select Date</h3> <input type="date"> <h3>Select Time</h3> <input type="time"> <h3>Select color</h3> <input type="color"> <h3>Button</h3> <input type="button" value="button-1"> <input type="button" value="button-2"> <h3>Search Box</h3> <input type="search" placeholder="search"> <h3>Check Box</h3> <input type="checkbox"> <label>Apple</label> <input type="checkbox"> <label>Mango</label> <input type="checkbox"> <label>Orange</label> <h3>Radio Button</h3> <input type="radio" id="html" name="fav_language" value="HTML"> <label>HTML</label> <input type="radio" id="css" name="fav_language" value="CSS"> <label>CSS</label> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label>JavaScript</label> <form style="margin-top:30%; margin-left:20%;"> <h2>Simple Form</h2> <label for="name">Name:</label><br> <input type="text" placeholder="Name"><br><br> <label for="email">Email:</label><br> <input type="email" placeholder="Email"><br><br> <label for="rollno">Roll No:</label><br> <input type="text" placeholder="Roll No"><br><br> <input type="submit" value="Submit"> </form> <h2>Event 1</h2> <button onclick="this.innerHTML='HTML Event 1'">Click here</button> <h2>Event 2</h2> <button onclick="document.getElementById('demo1').innerHTML=Date()">Click here</button> <div id="demo1"></div> <h2>Event 3</h2> <button onclick="document.getElementById('demo2').innerHTML='<h2>HTML CSS JavaScript</h2>'">Click here</button> <div id="demo2">HTML CSS JavaScript</div> <h2>Event 4</h2> <button onclick="document.getElementById('demo3').innerHTML='<h1>heading1</h1> <h2>heading2</h2> <h3>heading3</h3>'">Click here</button> <div id="demo3" style="border:1px solid; text-align:center; width:350px; height:200px; "></div>

---