| <!doctype html> | |
| <html> | |
| <head> | |
| <title> | |
| md-manir-hossain | |
| </title> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| </head> | |
| <body> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/tfLCZS5k870?list=PLP2Oqg5TBlcpe7AuagUGHItMrPN4LxhuE" frameborder="0" allowfullscreen align="right"></iframe> | |
| <h1> Learn HTML with Manir </h1> | |
| <h2> Basic of HTML </h2> | |
| <p id="top">html stands for Hyper Text Markup Language.</p> | |
| <p>All HTML documents must start with a document type declaration: <strong><!DOCTYPEhtml></strong>.</p> | |
| <p>The HTML document itself begins with <strong><html></strong> and ends with <strong> </html> </strong> </p> | |
| <p>The visible part of the HTML document is between <strong><body></strong> and <strong></body></strong> </p> | |
| Header can be minimum h6 | |
| <p> For line break in the paragraph, use <strong><br></strong> tag <br> it is called line break </p> | |
| <p> For line break in the paragraph, use <strong><br></strong> tag <br /> it is called line break </p> | |
| <p> to bold a word use <strong><b></strong> tag or strong tag: <b> bold </b> or <strong> strong </strong></p> | |
| <p> The horizontal tag <strong><hr></strong> is as follows: this is self closing tag, does not have any closing tag </p> | |
| <p> italic tag <strong><i></strong>: <i> italic</i> or <em> italic </em></p> | |
| <p> underline tag<strong><u></strong>: <u>underline</u> or <ins>underline</ins></p> | |
| <p> superscript tag<strong><sup></strong>: <sup>supercript</sup></p> | |
| <p> subcript tag <strong><sub></strong>: <sub> subcript </sub></p> | |
| <p>deleted tag <strong><del></strong>: <del>deleted </del> or <strike> deleted</strike></p> | |
| <hr> | |
| <h2>Unordered and ordered list </h2> | |
| <p>for unordered list use <strong><ul></strong> tag and for list item use <strong><li></strong> tag | |
| </p> | |
| <ul> | |
| <li><b>Manir</b></li> | |
| <li><em> Nur</em></li> | |
| <li> <del>Aslam</del> </li> | |
| <li><ins>Liton</ins></li> | |
| <li><i>Nasreen</i></li> | |
| </ul> | |
| <p>For ordered list, use <strong><ol></strong> tag: </p> | |
| <ol> | |
| <li><b>Manir</b></li> | |
| <li><em> Nur</em></li> | |
| <li> <del>Aslam</del> </li> | |
| <li><ins>Liton</ins></li> | |
| <li><i>Nasreen</i></li> | |
| </ol> | |
| <p>To set start value in ordered list use tag <strong><ol start=10></strong>: </p> | |
| <ol start=10> | |
| <li><b>Manir</b></li> | |
| <li><em> Nur</em></li> | |
| <li> <del>Aslam</del> </li> | |
| <li><ins>Liton</ins></li> | |
| <li><i>Nasreen</i></li> | |
| </ol> | |
| <p>for reverse order use <strong><reversed></strong>tag: </p> | |
| <ol reversed> | |
| <li><b>Manir</b></li> | |
| <li><em> Nur</em></li> | |
| <li> <del>Aslam</del> </li> | |
| <li><ins>Liton</ins></li> | |
| <li><i>Nasreen</i></li> | |
| </ol> | |
| <p>for type of order use tag <strong><ol=type="a"></strong>: </p> | |
| <ol type=> | |
| <li><b>Manir</b></li> | |
| <li><em> Nur</em></li> | |
| <li> <del>Aslam</del> </li> | |
| <li><ins>Liton</ins></li> | |
| <li><i>Nasreen</i></li> | |
| </ol> | |
| <hr> | |
| <h2> Image adding</h2> | |
| <p> To add image, use the tag <strong><img src="filename.png width="number" height="number" align="left or right"></strong>. <strong><img></strong> is self ending tag.</p> | |
| <img src="homer.png"> | |
| <p>Homer Simpson</p> | |
| <p>To customise the image, use width, height, left, right or link of the image as follows: </p> | |
| <img src="homer.png" width="100" height="100" align="right"> | |
| <p>Homer Simpson</p> | |
| <hr> | |
| <h2> Use of form</h2> | |
| <p id="forms">Use of forms:</p> | |
| Use <strong><form></strong> tag, inside this tag use <strong><input></strong>, imput is self closing tag. | |
| <form> | |
| Username: <input> | |
| </form> | |
| For different typeof imput form, use <strong><input=type"text" or "checkbox" or "email"></strong> | |
| <form> | |
| <p>Username: <input type="text"> </p> | |
| <p>Checkbox: <input type="checkbox"> </p> | |
| <p>Button: <input type="button"> </p> | |
| <p>Color: <input type="color"> </p> | |
| <p>Date: <input type="date"> </p> | |
| <p>Datetime: <input type="datetime"></p> | |
| <p>Datetime-local:<input type="datetime-local"></p> | |
| <p>Email:<input type="email"></p> | |
| <p>Under 18: <input type="radio"></p> | |
| <p>Over 18: <input type="rario"></p> | |
| <p> To connect two radio type give a name as follows: <strong><inout type="radio" name="age"></strong> tag</p> | |
| <p>Under 18: <input type="radio" name="age"></p> | |
| <p>Over 18: <input type="radio" name="age"></p> | |
| <p>Use of <strong><select></strong> tag:</p> | |
| <p>Favourite food: | |
| <select> | |
| <option>Pizza</option> | |
| <option>Ice Cream</option> | |
| <option>Sandwiches</option> | |
| </select> | |
| </p> | |
| <p><input type="submit"></p> | |
| </form> | |
| <hr> | |
| <h2> Use of table:</h2> | |
| <p> use table tag:<strong><table></strong>, <br> | |
| table row tag: <strong><tr></strong>, <br> | |
| table data tag: <strong><td></strong>, | |
| table head tag: <strong><thead></strong> | |
| table heading section tag: <strong><th></strong> | |
| table body tag: <strong><tbody></strong> tag | |
| </p> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th> Name </th> | |
| <th> Favourite <br> Colour</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Manir</td> | |
| <td>Green</td> | |
| </tr> | |
| <tr> | |
| <td>Ruhin</td> | |
| <td>Red</td> | |
| </tr> | |
| <tr> | |
| <td>Sohel</td> | |
| <td>White</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>First Name</th> | |
| <th>Surname</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Md Manir</td> | |
| <td>Hossain</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <hr> | |
| <h2>How to add links</h2> | |
| <p>There are three types of links namely: </p> | |
| <ol> | |
| <li>Absolute link</li> | |
| <li> Relative link and </li> | |
| <li>Anchorlink</li> | |
| </ol> | |
| <p>For hyper link reference (absolute link): use link tag:<strong><a href=></strong>,</p> | |
| <p> <a href="http://www.google.com">Click here to go to google.com</a> | |
| </p> | |
| <p>use image as a link: use img tag</p> | |
| <p> <a href="http://www.wikipedia.org"><img src="homer.png"></a> </p> | |
| <p>Link from your folder page (relative link):</p> | |
| <p> <a href="1-helloworld.html">Hello world</a> </p> | |
| <p> Link within the same page:</p> | |
| <p> use "id=top" in your first paragraph, then use "#top" as a link in your last paragraph. </p> | |
| <p> <a href="#top">Back to the top</a> </p> | |
| <p> back to any paragraph (Anchor link):</p> | |
| <p> <a href="#forms">Back to the forms</a> </p> | |
| <hr> | |
| <h2> HTML entities: to use characters and symbles </h2> | |
| <a href="https://www.w3schools.com/html/html_entities.asp"> | |
| <p> <a href="https://www.w3schools.com/html/html_entities.asp">w3schools</a> </p> | |
| <p><a href="https://dev.w3.org/html5/html-author/charref">List of symbles</a></p> | |
| <h2> Use of iframes </h2> | |
| <p> To show another website in your page</p> | |
| <p> use tag: <<strong>iframe src="link"</strong>></p> | |
| <iframe width="560" height="315" src="http://www.ecowebhosting.co.uk"></iframe> | |
| <iframe align="right" width="560" height="315" src="1-helloworld.html"></iframe> | |
| <hr> | |
| <p> Youtube vedio link: </p> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/kVbW4156A24?list=PLsv4iUgyA4ioZN4inpZ1qx4UA863o_0zd" frameborder="0" allowfullscreen></iframe> | |
| <hr> | |
| <p> Using link as a form</p> | |
| <form action="https://www.w3schools.com/html/default.asp"> | |
| <p>Want to know more?</p> | |
| <p> <input type="submit" value="Click Here"> </p> | |
| </form> | |
| </body> | |
| </html> |
Comments
Post a Comment