HTML5 Yenilikleri KONU


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. 1-
  2. <!DOCTYPE HTML>//HTML5 ile yazım kolaylığı ve kolayca ezberinizde tutatbileceğiniz bir biçimde
  3.  
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  6. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //HTML5 Öncesi
  7.  
  8.  
  9.  
  10. 2-a
  11.  
  12. <img src="resim/linki"/>
  13. <p>CDRLZ</p>
  14.  
  15. --------
  16.  
  17. 2b
  18. <figure>
  19. <img src="resim/linki" alt="About image" />
  20. <figcaption>
  21. <p>CDRLZ</p>
  22. </figcaption>
  23. </figure>
  24.  
  25. 4-a
  26.  
  27. <link rel="stylesheet" href="linki/stylesheet.css" type="text/css" />
  28. <script type="text/javascript" src="linki/script.js"></script>
  29. ---------
  30. 4=b
  31. <link rel="stylesheet" href="path/to/stylesheet.css" />
  32. <script src="path/to/script.js"></script>
  33.  
  34.  
  35.  
  36. 5a-
  37. <p class=class id=id>Ali veli</p>
  38.  
  39. ----------
  40. 5b
  41. <p class=class id=id>Ali veli.
  42.  
  43.  
  44. 6-
  45.  
  46. <!DOCTYPE html>
  47.  
  48. <html lang="en">
  49. <head>
  50. <meta charset="utf-8">
  51. <title>untitled</title>
  52. </head>
  53. <body>
  54. <h2> To-Do List </h2>
  55. <ul contenteditable="true">
  56. <li> Break mechanical cab driver. </li>
  57. <li> Drive to abandoned factory
  58. <li> Watch video of self </li>
  59. </ul>
  60. </body>
  61. </html>
  62.  
  63.  
  64.  
  65.  
  66.  
  67. 7-
  68.  
  69. <!DOCTYPE html>
  70.  
  71. <html lang="en">
  72. <head>
  73. <meta charset="utf-8">
  74. <title>untitled</title>
  75. </head>
  76. <body>
  77. <form action="" method="get">
  78. <label for="email">Email:</label>
  79. <input id="email" name="email" type="email" />
  80.  
  81. <button type="submit">Gönder</button>
  82. </form>
  83. </body>
  84. </html>
  85.  
  86.  
  87. 8-
  88.  
  89. <input name="email" type="email" placeholder="Email adresinizi giriniz." />
  90.  
  91. 9-a
  92.  
  93. <div id="header">
  94. ...
  95. </div>
  96.  
  97. <div id="footer">
  98. ...
  99. </div>
  100.  
  101. --------
  102.  
  103. 9b
  104.  
  105. <header>
  106. ...
  107. </header>
  108.  
  109. <footer>
  110. ...
  111. </footer>
  112.  
  113.  
  114. 10-
  115.  
  116. header, footer, article, section, nav, menu, hgroup {
  117. display: block;
  118. }
  119. Diye tanıttıktan sonra etiketleri javascript ile oluşturup tarayıcının görmesini sağlamak.
  120.  
  121. document.createElement("article");
  122. document.createElement("footer");
  123. document.createElement("header");
  124. document.createElement("hgroup");
  125. document.createElement("nav");
  126. document.createElement("menu");
  127.  
  128.  
  129. 11-
  130.  
  131. <header>
  132. <hgroup>
  133. <h1> Recall Fan Page </h1>
  134. <h2> Only for people who want the memory of a lifetime. </h2>
  135. </hgroup>
  136. </header>
  137.  
  138.  
  139. 12-
  140.  
  141. <input type="text" name="someInput" required>
  142.  
  143.  
  144. 13-
  145.  
  146. <input type="text" name="input" required autofocus>
  147.  
  148. 14-
  149.  
  150. Ses dosyası örnek:
  151.  
  152. <audio autoplay="autoplay" controls="controls">
  153. <source src="file.ogg" />
  154. <source src="file.mp3" />
  155. <a href="file.mp3">Download</a>
  156. </audio>
  157.  
  158. Video dosyası örnek:
  159.  
  160. <video controls preload>
  161. <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
  162. <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
  163. <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download</a> </p>
  164. </video>
  165.  
  166. 15-
  167.  
  168. <input type="text"
  169. name="username"
  170. id="username"
  171. placeholder="4 <> 10"
  172. pattern="[A-Za-z]{4,10}"
  173. autofocus
  174. required>
  175.  
  176. 16-
  177.  
  178. <p> Aradığınız <mark>"CDRLZ"</mark> İçin sonuçlar listeleniyor </p>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.