Html5, css3, js, jQuery

56

Transcript of Html5, css3, js, jQuery

Page 1: Html5, css3, js, jQuery
Page 2: Html5, css3, js, jQuery

Contenu

Page 3: Html5, css3, js, jQuery
Page 4: Html5, css3, js, jQuery

<element attribut=“valeur”>Contenu</element>

<element attribut=“valeur” />

Page 5: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>

Page 6: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>

Page 7: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>

Page 8: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>

Page 9: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>

Page 10: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> </head> <body> <h1>Hello World</h1> <p>Ma première page web.</p> </body></html>

Page 11: Html5, css3, js, jQuery

<link />

<meta />

<script>

<style>

<header>

<nav>

<footer>

<section>

<article>

<aside>

<div>

<span>

Page 12: Html5, css3, js, jQuery

<h1>...<h6>

<p>

<blockquote>

<q>

<sup>

<sub>

<strong>

<a>

<br />

<pre>

<ul>

<ol>

<li>

Page 13: Html5, css3, js, jQuery

<table>

<caption>

<tr>

<th>

<td>

<thead>

<tbody>

<tfoot>

<form>

<input />

<textarea>

<select>

<option>

Page 14: Html5, css3, js, jQuery

<img />

<video>

<audio>

<source>

<!-- … -->

Page 16: Html5, css3, js, jQuery

Page 17: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Bonjour...</title> <link rel="stylesheet" href="url" type="text/css"> <style type="text/css"> ... </style> </head> ...</html>

Page 18: Html5, css3, js, jQuery

Générale sélecteur {propriété: valeur;

}

Multiples sélecteurs sélecteur, sélecteurN {propriété: valeur;

}

Propriétés “combinées” sélecteur {propriété: valeur valeurN;

}

Page 19: Html5, css3, js, jQuery

*

élément

#id

élément.maclasse

.maclasse

élément1 élément2

élément1 > élément2

élément1 + élément2

élément1 ~ élément2

Page 20: Html5, css3, js, jQuery

[attribut]

[attribut=mavaleur]

[attribut*=mavaleur]

[attribut^=mavaleur]

[attribut$=mavaleur]

élément[attribut]

Page 21: Html5, css3, js, jQuery

élément:first-child

élément:last-child

élément:nth-child(n)

élément:nth-last-child(n)

élément:first-of-type

élément:last-of-type

élément:only-child

élément:only-of-type

élément:not(sélecteur)

Page 22: Html5, css3, js, jQuery

élément:active, élément:focus, élément:hover

élément:link

élément:visited

élément:checked

Page 23: Html5, css3, js, jQuery

élément:before

élément:after

élément::first-line

élément::first-letter

Page 24: Html5, css3, js, jQuery

élément {-webkit-propriété: valeur; // Chrome, Safari, Android...-moz-propriété: valeur; // Mozilla-ms-propriété: valeur; // Microsoft (Internet Explorer)-o-propriété: valeur; // Opérapropriété: valeur; // Toujours finir par la déclaration

}

Page 25: Html5, css3, js, jQuery

font-size

font-family

font-style

font-weight

text-decoration

text-align

@font-face

Page 26: Html5, css3, js, jQuery

display

float

position: relative

position: absolute

position: fixed

width, height

margin, padding

Page 27: Html5, css3, js, jQuery

white, black, green…

#FFFFFF, #000000, #008000

rgb(255,255,255), rgb(0,0,0)...

rgba(0,0,0,1), rgba(0,0,0,0.5)...

color

border-color

background-color

Page 28: Html5, css3, js, jQuery

background-color

background-image

background-repeat

background-position

background-size

background-image: gradient(...)…

Page 29: Html5, css3, js, jQuery

transition-property

transition-duration

transition-timing-function

transition-delay

Page 30: Html5, css3, js, jQuery

transform: fonction(valeur);

transform-origin: x y;

Page 31: Html5, css3, js, jQuery

@keyframe monAnim

@-webkit-keyframes monAnim

@keyframes monAnim {

from {propriété: valeur1; propriétéN: valeur1;}to {propriété: valeur2; propriétéN: valeur2;}

}

@keyframes monAnim {0% {propriété: valeur1; propriétéN: valeur1;}25% {propriété: valeur2; propriétéN: valeur2;}50% {propriété: valeur3; propriétéN: valeur3;}100% {propriété: valeur4; propriétéN: valeur4;}

}

Page 32: Html5, css3, js, jQuery

animation

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

Page 34: Html5, css3, js, jQuery

@media condition opérateur conditionN {...}

@media only screen and (min-width: 300px) {...}

Page 36: Html5, css3, js, jQuery
Page 37: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> ... </head> <body> ... <script type="text/javascript" >...</script> <script type="text/javascript" src=”url”></script> </body></html>

Page 38: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> ... </head> <body> ... <script type="text/javascript" >...</script> <script type="text/javascript" src=”url”></script> </body></html>

Page 39: Html5, css3, js, jQuery

instruction1;instruction2;

var myVar;myVar = 5;var myVar = 5;

int, string, boolean, array...

Page 40: Html5, css3, js, jQuery

+, -, *...

=, +=, -=...

++, --

==, <, >...

&&, ||, !

Page 41: Html5, css3, js, jQuery

if (condition) { instruction1;}else{ instruction2;}

Page 42: Html5, css3, js, jQuery

while (condition) { instruction1;}

do { instruction1;} while (condition);

Page 43: Html5, css3, js, jQuery

for (initialisation, condition, incrémentation) { instruction1;}ex:for (i = 0; i<5; i++) { a += i;}

Page 44: Html5, css3, js, jQuery

function myFct (arguments) { instruction1; return x;}

myFunction(valeurs_arguments);

Page 45: Html5, css3, js, jQuery

Ex: document.getElementById(“id”)...

Page 46: Html5, css3, js, jQuery
Page 47: Html5, css3, js, jQuery

<button id=”id” onclick=”maFonction”>

document.getElementbyId(“id”).onclick(this.addClass(“class”));

Page 48: Html5, css3, js, jQuery
Page 49: Html5, css3, js, jQuery

<!DOCTYPE html><html> <head> ... </head> <body> ... <script type="text/javascript"src=”url_fichier_jquery”></script> </body></html>

Page 50: Html5, css3, js, jQuery

$(“sélecteur”)

$(“sélecteur”).fonction();ex: $(“#id”).addClass(“ab”);$("p").on("click", function() { alert($(this).text());});

Page 51: Html5, css3, js, jQuery

document.getElementById(“content”).classList.add('wrap');

$(“#content”).addClass(“wrap”);

Page 52: Html5, css3, js, jQuery

$( "sélecteur" ).animate(propriétés, durée, function() { // What to do after animation complete });

$( "#book" ).animate({ opacity: 0.25, left: "+=50", height: "toggle" }, 5000, function() { alert(“Done”); });

Page 53: Html5, css3, js, jQuery
Page 54: Html5, css3, js, jQuery
Page 56: Html5, css3, js, jQuery