Advertisement
tom2018

HTML usefull items to copy paste

Jul 6th, 2013
627
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.36 KB | None | 0 0
  1. <!DOCTYPE HTML>
  2. <html></html>
  3. <head></head>
  4. <title></title>
  5. <head><title> </title></head>
  6. <body></body>
  7. <p></p>
  8. <h1></h1>
  9. <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
  10. <a href="http://www.codecademy.com">Learn to code!</a>
  11. <a href="pastebin.com"><img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a>
  12. <ol> < thats an ordered list you idiot <li>
  13. <p>
  14. formats are ironic and funny
  15.  
  16. We can use unordered lists. The best thing about unordered lists is that they work exactly the same way as ordered lists. The only difference is that instead of using <ol>, we use <ul>. Everything else is the same!
  17. </P
  18.  
  19. <!-- Make me into a comment.-->
  20. <p style="font-size: 10px"> Some text for you to make tiny! </p>
  21. <p style="font-size: 20px"> Some text for you to make normal size!</p>
  22. <p style="font-size: 40px"> Some text for you to make super big!</p>
  23. <h2 style="color: green; font-size:12px">
  24. style="font-family:Garamond"
  25. style="color: green"
  26. style="font-size:12px"
  27. style="background-color: yellow"
  28. border="1px"
  29. style="text-align:center"
  30. style="font-family:Garamond; font-size:12px"
  31. <h2 style="font-family:Garamond">
  32. http://www.w3.org/TR/CSS21/fonts.html#generic-font-families
  33. <strong>bold</strong>
  34. <em>emphasized</em>
  35. <h1>
  36. Aside from bolding words, we often want to italicize words for emphasis. (Hint, hint.)
  37.  
  38. Like bolding, we do not need to use the style attribute. Instead:
  39.  
  40. Identify the word or words you want to italicize.
  41. Surround the word or words with the opening tag <em> and closing tag </em>.
  42. Be humble and grateful for your newfound powers.
  43. </h1>
  44. <table>
  45. We use the <tr> tag to create a table row. We'll learn how to create columns shortly, and everything will start to come together. (You don't really create columns in <table>s: instead, you tell each row how many cells to have, and that determines your number of columns).
  46.  
  47. We've added a single <td> ("table data") cell to the first row, essentially creating a single column. If you view the Result tab now, you'll see that we've drawn a border around it. it's not that impressive, but don't worry: we're about to add more table data cells.
  48.  
  49. <table border="9px">
  50. <tr>
  51. <td>One</td>
  52. </tr>
  53.  
  54. <tr>
  55. <td>Two</td>
  56. </tr>
  57.  
  58. <tr>
  59. <td>Three</td>
  60. </tr>
  61. </table>
  62.  
  63. Here's the table we made earlier. It's okay, but it just looks like we have a list of famous Hollywood people (monsters?) and their birth years. To make our table look a little more like a table, we'll use the <thead> and <tbody> tags. These go within the <table> tag and stand for table head and table body, respectively.
  64.  
  65. The <head> HTML tag contains information about a web page (e.g. its title) and the <body> tag contains the contents of the web page. In the same way, the <thead> tag can be thought of as containing information about a table and the <tbody> tag containing the actual tabular data.
  66.  
  67. <table border="7px">
  68. <tr>
  69. <th colspan="2">Famous Monsters by Birth Year</th>
  70. </tr>
  71. <thead>
  72. <tr><th>Famous Monster</th>
  73. <th>Birth Year</th></tr>
  74. </thead>
  75. <tbody>
  76. <tr>
  77. <td>King Kong</td>
  78. <td>1933</td>
  79. </tr>
  80.  
  81. <tr>
  82. <td>Dracula</td>
  83. <td>1897</td>
  84. </tr>
  85.  
  86. <tr>
  87. <td>Bride of Frankenstein</td>
  88. <td>1935</td>
  89. </tr>
  90. </tbody>
  91. </table>
  92. \/ large ass pixels
  93. <div style="width:50px; height:50px; background-color:green"></div>
  94.  
  95. While <div> allows you to divide your webpage up into pieces you can style individually, <span> allows you to control styling for smaller parts of your page, such as text. For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in <span></span> tags and make them red using CSS!
  96.  
  97. p {
  98. font-family:Garamond;
  99. font-size:16px;
  100. }
  101.  
  102. h3 {
  103. font-family:cursive;
  104. color:#36648b;
  105. text-align:center;
  106. }
  107.  
  108. span {
  109. color:#cc0000;
  110. font-size:24px;
  111. }
  112.  
  113. <!DOCTYPE html>
  114. <html>
  115. <head>
  116. <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  117. <title>Result</title>
  118. </head>
  119. <body>
  120. <div id="header">
  121. <div id="navbar">
  122. <ul>
  123. <li>Home</li>
  124. <li>About Me</li>
  125. <li>Plans for World Domination</li>
  126. <li>Contact</li>
  127. </ul>
  128. </div>
  129. <h2>About Me</h2>
  130. </div>
  131. <div id="left">
  132. <img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-main_zps26d178c5.jpg"/>
  133. <p>I am the angriest puppy in the world. This has been scientifically proven in several clinical trials.</p>
  134. </div>
  135. <div id="right">
  136. <table>
  137. <th colspan="3">My Bros</th>
  138. <tr>
  139. <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-1_zps5666b8e7.jpg"/></td>
  140. <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-2_zps1539e6b2.jpg"/></td>
  141. <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-3_zps4692eafa.png"/></td>
  142. </tr>
  143. <tr>
  144. <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-4_zps63ff5aa8.jpg"/></td>
  145. <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-5_zps0ee0d2c8.jpg"/></td>
  146. <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-6_zpsc4450a60.jpg"/></td>
  147. </tr>
  148. <tr>
  149. <td><img id="bottom_left" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-7_zps26e8a8d9.jpg"/></td>
  150. <td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-8_zps9a1469be.jpg"></td>
  151. <td><img id="bottom_right" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-9_zps3bab7732.jpg"/></td>
  152. </tr>
  153. </table>
  154. </div>
  155. <div id="footer">
  156. <div id="button">
  157. <p>Send me an <span class="bold">e-mail</span>!</p>
  158. </div>
  159. </div>
  160. </body>
  161. </html>
  162.  
  163. CSS EXAMPLE
  164.  
  165.  
  166.  
  167.  
  168.  
  169.  
  170.  
  171. p {
  172. color: red;
  173. }
  174.  
  175. span {
  176. color: blue;
  177. }
  178.  
  179. <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  180.  
  181. CSS syntax is different from the HTML you're used to, but don't worry: it's easy to pick up! The general format looks like this:
  182.  
  183. selector {
  184. property: value;
  185. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement