Untitled

Exam revision

html/css/js

derek banas video tutorial

<meta/> - stands for metadata which is data about data.
<meta http-equiv="refresh" content="3"; url=redirect.html"/> - this tag will
redirect from a current page to the given url after specified amount of seconds;
<meta name="discription" content="blabla"/> - discription of the website
<meta name="keywords" content="blabla"/> - keywords on the website
<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)

<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

<link rel="stylesheet" href="styles.css"/> - this is a way of linking the page to the css file.
<link rel="icon" fref="icon.ico"/> - this changes the tab icon.

<title>HTML Tutorial</title> - title of the website

All above would be in the head section
<head/>

<body>
<body onload="alert("hello")>

<div id="wrapper">

<noscript>Please Enable Java</noscript>

<p> two lines after paragraph
<q> quotes
<blockcode> indents text

<pre> preserve character entities "special characters"

<code> for printing code

<img id="someImahe" src="address of the image here" width="" height="" alt="title?">

<b>
<strong>
<em>
<small>
<ins>
<del>	delete
<samp> sample

<abbr> abbriviation
<dfn> definition
<dfn title="the cośtam cośtam"
<kbd> enter something here shows input

&cent;
&pound;
&yen;
&copy;
&reg;
&deg;
&frac14
&frac12
&frac34

some of the most common symbols

4<sup>2</sup>

<ruby> for example pronanciation

<a href="address" title="yt">youtube</a> hyperlinks

<a id="pageTop">top of the page</a>
<a id="pageBottom">bottom of the page</a>


<a ref="nameOfTheFile#pageTop">top of the page</a>
<a href="mailto:arturgaik@gmail.com">Send an email.</script>

<a href="javascript:toggleImg()">someFunction</a> - dinamically calling a function in html

most of the media stuff can be embeded in the website by using the <object> tag.

<iframe> for yt videos
<audio> for audio
<video> for mp4's

Structuring the data.
<header>
<main>
<section>
<article>

<ul> unordered lists
<li> list item

<ol> ordered list
<li>
  <ol>
    <li></li>
  </ol>
<li/>


<table>
<tfoot> footer of the table
<tbody>
  <tr>
    <td>
    <td>
  </tr>
</tbody>

<footer>
<address>

<form method="GET"> data is going to be embeded to our url
<input type="submit">
<input type="reset">
<textarea> - for larger amount of text
<fieldset> - makes everything very clean

<select>
  <option>
  <optgroup label="spiderman"> nice

<radio>

<input type="hidden">
<input type="file">

<canvas id="canvas" width length></canvas>


JAVASCRIPT

function init(){
	var h1tags = document.getElementByTagName("h1");
}

onload = init;

this.innerHTML = "Click again"; changing the html of the object for which this is run


STYLESHEETS CSS

Selecting elements by name:
   h1 { color:blue; }

To add additional rules use semi-colon:
   h1 { background:white;
        color:blue; }

Selecting groups of elements. Note group selectors are separated by a comma:
   h1, h2 { color:blue; }

   Same as:   h1 { color:blue; }
              h2 { color:blue; }

Selecting elements by context (descendant selector) to select a tag that is nested inside another specified tag. Note contextual selectors are separated by whitespace:
   p em { color:green; }

E.g.; this selects only em tags when nested within p tags:
   <body>
   <h1>Heading <em>text1</em> </h1>
   <p>Paragraph <em>text2 green</em></p>
   </body>

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:
   .official {color:blue;}

Example use in html follows. Note classes can be used in your webpage multiple times:
   <body>
   <h1 class="official">Some heading </h1>
   <p class="official">Some text </p>
   <p>Some more text </p>
   </body>

Selecting elements by id. When you want to give one element a style that is different to related tags on a web page:
    #intro {color:green;}

Example use in html follows. Note ids are used to identify one unique part of a page.
   <body>
   <p>Some text </p>
   <p id="intro">Some more text </p>
   </body>

Combining selectors.
   div.summary {color:green;}

In this example we are selecting a div element only if it contains a class named summary:
<div class="summary">Some div text that should be green</div>

Universal selector - targets all elements on the page.
   * {color:blue; }

Link pseudo-classes: selecting elements based on their state (see next section):
   a:hover {background-color:silver; }


header{
  diplay: block;
  padding: 0px 0px 70px 0px;
}