Share
, ,

HTML5 Structure at a Glance

Mohammad Luin No Comments
HTML5


  1. <html> 
  2. <!DOCTYPE HTML> 
  3. <head> 
  4. <title>Mohammad Luin</title> 
  5. </head>
  6. <body bgcolor="#FFFFFF"> 

  8. <h1><font color="#000099">Heading one with color Blue</font></h1>
  9. <h2>Heading two</h2>
  10. <h3>Heading three</h3>
  11. <h4>Heading four</h4>
  12. <h5>Heading five</h5>   
  13. <h6>Heading six</h6>

  15. <hr width="700px"/>

  17. <!--Writing article with a Heading and Section including Aside text-->
  18. <article>
  19. <h3 align="center">WELCOME!</h3><br/>
  20. <section>
  21. <h4 align="center">This is a section Head</h4><br/>
  22. <p align="center">The is a test article for the test Heading</p><br/>
  23. </section>
  24. <aside>
  25. <p>This is a aside text</p>
  26. </aside>
  27. </article>

  29. <!--Ordering list-->
  30. <ol>
  31. <li>Black</li>
  32. <li>Blue</li>
  33. <li>Green</li>
  34. </ol>

  36. <!--UnOrdering list-->
  37. <ul>
  38. <li>Black</li>
  39. <li>Blue</li>
  40. <li>Green</li>
  41. </ul>

  43. <p align="center">This text is aligned to center<br/><hr width="100%" align="center"/></p>

  45. <!--Different Text Format-->
  46. <p><b>This is a bold text example</b></p>
  47. <p><big>This is a big text example</big></p>
  48. <p><i>This is an italic text example</i></p>
  49. <p><small> This is a small text example</small></p>
  50. <p><sub>This is a subscripted text example</sub></p>
  51. <p><sup>This is a superscripted text example</sup></p>
  52. <p><ins>This is an intserted text example</ins></p>
  53. <p><del>This is a deleted text example</del></p>

  55. <!--Image Inserting Process-->
  56. <img src="neg_fox.jpg" hight="100px" width="100px" border="1px black" alt=""/>
  57. <img src="image.svg" alt="" hight="300"><br/>
  58. <svg width="2000" hight="2000">
  59. <circle cx="80" cy"80" r="50" fill="green"/>
  60. <rect width="300" hight="100" x="20" y="20" fill="yellow"/>
  61. </svg><br/>
  62. <svg width="500" hight="500">
  63. <path d="M0 0 L0 100 L100 100 L100 0 Z"/>
  64. </svg>

  66. <!--Link Inserting Option-->
  67. <a href="http://mluin.blogspot.com" target="_blank">mLuin's Tech Knowledge</a>

  69. <!--Table creation-->
  70. <table align="center" border="3">
  71. <tr>
  72. <td bgcolor="red">RED</td>
  73. <td bgcolor="yellow">YELLOW</td>
  74. <td bgcolor="green">GREEN</td>
  75. </tr>
  76. <tr>
  77. <td>Stop</td>
  78. <td colspan="2">Wait & Go</td>
  79. </tr>
  80. </table>

  82. <!--Form Creation-->
  83. <form>
  84. <lable>Your name</lable>
  85. <input id="user" name="username" type="text"/>
  86. </form><br/>

  88. <!--Hint-->
  89. <form>
  90. <lable for="email">Your email address</lable>
  91. <input type="text" name="email" placeholder="example@gmail.com"/>
  92. </form><br/>

  94. <!--Autofocus-->
  95. <form>
  96. <lable for="email">Your email address</lable>
  97. <input type="text" name="email" autofocus/>
  98. </form><br/>

  100. <!--Sample form-->
  101. <form autocomplete="off">
  102. <lable for="email">Your email address:</lable>
  103. <input name="Email" type="text" required/>
  104. <input type="submit" value="Submit"/>
  105. </form>

  107. <form action="http://mluin.blogspot.com" method="GET/POST">
  108. <!--Input type 1(General Password)-->
  109. <input type="text" name="username"/>Username<br/>
  110. <input type="password" name="password"/>Password<br/>

  112. <!--Input type 2(Radio)-->
  113. <input type="radio" name="gender" value="male"/>Male<br/>
  114. <input type="radio" name="gender" value="female"/>Female<br/>

  116. <!--Input type 3(Check box)-->
  117. <input type="checkbox" name="gender" value="1"/>Male<br/>
  118. <input type="checkbox" name="gender" value="2"/>Female<br/>

  120. <!--Submit option-->
  121. <input type="submit" value="Submit"/>
  122. </form>

  124. <!--Audio file insert-->
  125. <audio src="image.mp3" controls>
  126. Your browser doesnt support audio files
  127. </audio>
  128. <audio controls autoplay loop>
  129. <source src="audio.mp3" type="audio/mpeg">
  130. <source src="audio.ogg" type="audio/ogg">
  131. Audio elements not supported by your browser
  132. </audio><br/>

  134. <!--Video file insert-->
  135. <video controls autoplay loop>
  136. <source src="video.mp4" type="video/mpeg">
  137. <source src="video.ogg" type="video/ogg">
  138. Audio elements not supported by your browser
  139. </video>

  141. <br/>

  143. <!--Inserting Progress bar-->
  144. <progress min="0" max="100" value="35"></progress><br/>

  146. <!--Insert Search Box-->
  147. <input id="mysearch" name="searchitem" type="search"/><br/>

  149. <!--Options In Search Box-->
  150. <form>
  151. <input id="car" type="text" list="colors"/>
  152. <datalist id="colors">
  153. <option value="RED">
  154. <option value="YELLOW">
  155. <option value="GREEN">
  156. </datalist>
  157. </form></br>

  159. <svg width="100" hight="100">
  160. <line x1="50" y1="0" x2=>


  163. </body>
  164. </html>

Notice:
To see the effect or meaning of each line of these codes copy codes from 1 to 164 and paste it in a notepad and save the file as .html file, then open the file in your browser.

Mohammad Luin

0 comments:

Post a Comment

Copyright © 2014-2016 MLuin | Designed by VeeThemes.com | Powered by Blogger