HTML5

From wiki.techunit.org
Jump to: navigation, search

CSS

  • Applying order
  1. user agent style sheets
  2. user normal style sheets
  3. author normal style sheets
  4. author important style sheets
  5. user important style sheets
  • Specify screen width
/*Screen between 200 and 480 pixels*/
@media screen and (min-width:200px) and (max-width:480px)
{
  #navbar { width:200px; }
}

/*Screen more than 480 pixels*/
@media screen and (min-width:480px)
{
  #navbar { width:500px; }
}
  • Exclusions

See http://dev.w3.org/csswg/css3-exclusions/

  • Manage shadow

Add a drop blue shadow that is one inch below the text in the paragraph and set the radius of the drop shadow to five pixels

p { Text-shadow: 5px 1in 0px blue; }

JS

XMLHttpRequest object

Properties

  • XMLHttpRequest.readyState

This property returns the state an XMLHttpRequest client is in. An XHR client exists in one of the following state :

ValueStateDescription
0 UNSENT The XMLHttpRequest client has been created, but the open() method hasn't been called yet.
1 OPENED

open() method has been invoked. During this state, the request headers can be set using the setRequestHeader() method and the send() method can be called which will initiate the fetch.

2 HEADERS_RECEIVED send() has been called and the response headers have been received.
3 LOADING Response's body is being received. If responseType is "text" or empty string, responseText will have the partial text response as it loads.
4 DONE The fetch operation is complete. This could mean that either the data transfer has been completed successfully or failed.
  • XMLHttpRequest.status

The XMLHttpRequest.status property returns the numerical status code of the response of the XMLHttpRequest.status will be an unsigned short.
Before the request is complete, the value of status will be 0.
The status codes returned are the standard HTTP status codes.

Usages

  • Proceed XML files
//The parameter 'xmlFileUrl' must have the same protocol, domain & port that the current site
function readXMLFile(xmlFileUrl) {
  //If old browser, try to use IE ActiveX to operate on the xml file
  var xmlhttp = (window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"));

  //Open the XML file
  xmlhttp.open("GET", xmlFileUrl, true);
  xmlhttp.send();
  xmlDoc = xmlhttp.responseXML;
}

Storage (replace Cookies)

localStorage: Store data in clientt app. Will be reset if browser is closed

localStorage.destination = "France"

sessionStorage: Store data in clientt app. Will be reset if session is closed

sessionStorage.lang = "EN"

Prototype

Add a method 'Get' for all future instance of 'Customer' object :

Customer.prototype.Get() = function() { return "Getted"; }

Inherit a class:

function parent() { }
function child() {
  parent.call(this);
}
child.prototype = new parent();
child.prototype.constructor = child;

Canvas

var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(50,50,100,100);

Element manip

  • Move the 'logo' element lower by 5px
logo.style.position = "relative";
logo.style.top = "5px";
  • Attach a function 'doIt' from click event on 'button' element
button.addEventListener('click', doIt)
//or
button.attachEvent('onclick', doIt)

Tags

Menu

Used for contextual menu action, toolbar or listening controls and command

<menu type="context">
  <menuitem label="Refresh" onclick="action();" icon="ico_reload.png"></menuitem>
  <menuitem label="Email This Page" onclick="action()"></menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png" onclick="action();"></menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png" onclick="action();"></menuitem>
  </menu>
</menu>

Mark

Highlight a text

<p>Do not forget to buy <mark>milk</mark> today.</p>

Main

This tag specifies the main content of a document.
The content inside this element should be unique to the document.
It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an 'article', 'aside', 'footer', 'header', or 'nav' element.

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>
  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
  </article>
  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
  </article>
</main>

Header

The <header> element represents a container for introductory content or a set of navigational links.
You can have several <header> elements in one document.
This tag cannot be placed within a 'footer', 'address' or another 'header' element.
This element typically contains:

  • one or more heading elements ('h1' to 'h6')
  • logo or icon
  • authorship information
<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

Dialog

This tag defines a dialog box or window.
This element makes it easy to create popup dialogs and modals on a web page.

<table>
  <tr>
    <th>January <dialog open>This is an open dialog window</dialog></th>
    <th>February</th>
    <th>March</th>
  </tr>
</table>

Details

This tag specifies additional details that the user can view or hide on demand.
This tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.
The content of a this element should not be visible unless the open attribute is set.

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

Section

This tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
This groups relevant page content together to maximize search engine readability

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Input

A silder from 18 to 90, starting at 37 and required

<input type='range'
       min='18'
       max='90'
       value='37'
       step='value'
       required />

A text field which accepts only three letters (with regex)

<input type='text' pattern='[A-Za-z]{3}' />

Nav

This tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a 'nav' element. The 'nav' element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

<nav>
  <a href="/html/">HTML</a> 
  <a href="/css/">CSS</a> 
  <a href="/js/">JavaScript</a> 
  <a href="/jquery/">jQuery</a>
</nav>

Figure

Use this tag element to mark up a photo in a document
This tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the 'figure' element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

Article

This tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
This groups relevant page content together to maximize search engine readability for Forum post, Blog post, News story or Comment

<article>
  <h1>Title</h1>
  <p>Content</p>
</article>

Aside

This tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
The content could be placed as a sidebar in an article.

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Footer

This tag defines a footer for a document or section.
This element should contain information about its containing element.
You can have several footer elements in one document.
This element typically contains:

  • authorship information
  • copyright information
  • contact information
  • sitemap
  • back to top links
  • related documents
<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

Address

This tag defines the contact information for the author/owner of a document or an article.
If this element is inside the <body> element, it represents contact information for the document.
If this element is inside an <article> element, it represents contact information for that article.

<address>
  Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
</address>

Query selector

  • Select elements 'div': div
  • Select elements with id 'aaa': #aaa
  • Select elements with class 'aaa': .aaa
  • Select elements 'span' inside any child of 'div': div span
  • Select 'div' and 'span' elements: div, span
  • Select 'h1' to 'h6' elements: :header
  • Select 'span' elements inside a 'div' element: div > span
  • Select 'div' elements where name equals 'aaa': div[name='aaa']
  • Select 'div' elements where name contains 'a': div[name*='a']
  • Select unvisited links: a:link
  • Select visited links: a:visited
  • Select links on hover: a:hover
  • Select links on click: a:active
  • Select seconds p in a parent: p:nth-of-type(2) Can also work with a formula or a keyword (as 'odd' or 'even')
  • Select seconds children in a parent if they are of type p: p:nth-child(2) Can also work with a formula or a keyword (as 'odd' or 'even')
  • Select elements with 'required' attribute: :required

Generic attributes

Sources

http://www.w3schools.com/html/html5_new_elements.asp
https://developer.mozilla.org/en-US/docs/Web