Advertisement
agaik1

Untitled

May 9th, 2016
64
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.89 KB | None | 0 0
  1. Exam revision
  2.  
  3. html/css/js
  4.  
  5. derek banas video tutorial
  6.  
  7. <meta/> - stands for metadata which is data about data.
  8. <meta http-equiv="refresh" content="3"; url=redirect.html"/> - this tag will
  9. redirect from a current page to the given url after specified amount of seconds;
  10. <meta name="discription" content="blabla"/> - discription of the website
  11. <meta name="keywords" content="blabla"/> - keywords on the website
  12. <meta name="robots" content="index, follow"/> - defines how search engines your website. index indicates that robots should index your page (noindex nofollow is the opposite)
  13.  
  14. <script src="randomjsscript.js"></script> - link to the js script or just js script inside of here. this is usualy done in the header of the website
  15.  
  16. <link rel="stylesheet" href="styles.css"/> - this is a way of linking the page to the css file.
  17. <link rel="icon" fref="icon.ico"/> - this changes the tab icon.
  18.  
  19. <title>HTML Tutorial</title> - title of the website
  20.  
  21. All above would be in the head section
  22. <head/>
  23.  
  24. <body>
  25. <body onload="alert("hello")>
  26.  
  27. <div id="wrapper">
  28.  
  29. <noscript>Please Enable Java</noscript>
  30.  
  31. <p> two lines after paragraph
  32. <q> quotes
  33. <blockcode> indents text
  34.  
  35. <pre> preserve character entities "special characters"
  36.  
  37. <code> for printing code
  38.  
  39. <img id="someImahe" src="address of the image here" width="" height="" alt="title?">
  40.  
  41. <b>
  42. <strong>
  43. <em>
  44. <small>
  45. <ins>
  46. <del> delete
  47. <samp> sample
  48.  
  49. <abbr> abbriviation
  50. <dfn> definition
  51. <dfn title="the cośtam cośtam"
  52. <kbd> enter something here shows input
  53.  
  54. &cent;
  55. &pound;
  56. &yen;
  57. &copy;
  58. &reg;
  59. &deg;
  60. &frac14
  61. &frac12
  62. &frac34
  63.  
  64. some of the most common symbols
  65.  
  66. 4<sup>2</sup>
  67.  
  68. <ruby> for example pronanciation
  69.  
  70. <a href="address" title="yt">youtube</a> hyperlinks
  71.  
  72. <a id="pageTop">top of the page</a>
  73. <a id="pageBottom">bottom of the page</a>
  74.  
  75.  
  76. <a ref="nameOfTheFile#pageTop">top of the page</a>
  77. <a href="mailto:arturgaik@gmail.com">Send an email.</script>
  78.  
  79. <a href="javascript:toggleImg()">someFunction</a> - dinamically calling a function in html
  80.  
  81. most of the media stuff can be embeded in the website by using the <object> tag.
  82.  
  83. <iframe> for yt videos
  84. <audio> for audio
  85. <video> for mp4's
  86.  
  87. Structuring the data.
  88. <header>
  89. <main>
  90. <section>
  91. <article>
  92.  
  93. <ul> unordered lists
  94. <li> list item
  95.  
  96. <ol> ordered list
  97. <li>
  98. <ol>
  99. <li></li>
  100. </ol>
  101. <li/>
  102.  
  103.  
  104. <table>
  105. <tfoot> footer of the table
  106. <tbody>
  107. <tr>
  108. <td>
  109. <td>
  110. </tr>
  111. </tbody>
  112.  
  113. <footer>
  114. <address>
  115.  
  116. <form method="GET"> data is going to be embeded to our url
  117. <input type="submit">
  118. <input type="reset">
  119. <textarea> - for larger amount of text
  120. <fieldset> - makes everything very clean
  121.  
  122. <select>
  123. <option>
  124. <optgroup label="spiderman"> nice
  125.  
  126. <radio>
  127.  
  128. <input type="hidden">
  129. <input type="file">
  130.  
  131. <canvas id="canvas" width length></canvas>
  132.  
  133.  
  134.  
  135. JAVASCRIPT
  136.  
  137. function init(){
  138. var h1tags = document.getElementByTagName("h1");
  139. }
  140.  
  141. onload = init;
  142.  
  143. this.innerHTML = "Click again"; changing the html of the object for which this is run
  144.  
  145.  
  146.  
  147. STYLESHEETS CSS
  148.  
  149. Selecting elements by name:
  150. h1 { color:blue; }
  151.  
  152. To add additional rules use semi-colon:
  153. h1 { background:white;
  154. color:blue; }
  155.  
  156. Selecting groups of elements. Note group selectors are separated by a comma:
  157. h1, h2 { color:blue; }
  158.  
  159. Same as: h1 { color:blue; }
  160. h2 { color:blue; }
  161.  
  162. Selecting elements by context (descendant selector) to select a tag that is nested inside another specified tag. Note contextual selectors are separated by whitespace:
  163. p em { color:green; }
  164.  
  165. E.g.; this selects only em tags when nested within p tags:
  166. <body>
  167. <h1>Heading <em>text1</em> </h1>
  168. <p>Paragraph <em>text2 green</em></p>
  169. </body>
  170.  
  171. Selecting elements by class. When you want to give one or more elements a style that is different to related tags on a web page:
  172. .official {color:blue;}
  173.  
  174. Example use in html follows. Note classes can be used in your webpage multiple times:
  175. <body>
  176. <h1 class="official">Some heading </h1>
  177. <p class="official">Some text </p>
  178. <p>Some more text </p>
  179. </body>
  180.  
  181. Selecting elements by id. When you want to give one element a style that is different to related tags on a web page:
  182. #intro {color:green;}
  183.  
  184. Example use in html follows. Note ids are used to identify one unique part of a page.
  185. <body>
  186. <p>Some text </p>
  187. <p id="intro">Some more text </p>
  188. </body>
  189.  
  190. Combining selectors.
  191. div.summary {color:green;}
  192.  
  193. In this example we are selecting a div element only if it contains a class named summary:
  194. <div class="summary">Some div text that should be green</div>
  195.  
  196. Universal selector - targets all elements on the page.
  197. * {color:blue; }
  198.  
  199. Link pseudo-classes: selecting elements based on their state (see next section):
  200. a:hover {background-color:silver; }
  201.  
  202.  
  203. header{
  204. diplay: block;
  205. padding: 0px 0px 70px 0px;
  206. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement