Contenu
<element attribut=“valeur”>Contenu</element>
<element attribut=“valeur” />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
</head>
<body>
<h1>Hello World</h1>
<p>Ma...
<link />
<meta />
<script>
<style>
<header>
<nav>
<footer>
<section>
<article>
<aside>
<div>
<span>
<h1>...<h6>
<p>
<blockquote>
<q>
<sup>
<sub>
<strong>
<a>
<br />
<pre>
<ul>
<ol>
<li>
<table>
<caption>
<tr>
<th>
<td>
<thead>
<tbody>
<tfoot>
<form>
<input />
<textarea>
<select>
<option>
<img />
<video>
<audio>
<source>
<!-- … -->
http://41mag.fr/liste-des-balises-html5
…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bonjour...</title>
<link rel="stylesheet" href="url" type="t...
Générale sélecteur {
propriété: valeur;
}
Multiples sélecteurs sélecteur, sélecteurN {
propriété: valeur;
}
Propriétés “co...
*
élément
#id
élément.maclasse
.maclasse
élément1 élément2
élément1 > élément2
élément1 + élément2
élément1 ~ élément2
[attribut]
[attribut=mavaleur]
[attribut*=mavaleur]
[attribut^=mavaleur]
[attribut$=mavaleur]
élément[attribut]
é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-o...
élément:active, élément:focus, élément:hover
élément:link
élément:visited
élément:checked
élément:before
élément:after
élément::first-line
élément::first-letter
élément {
-webkit-propriété: valeur; // Chrome, Safari, Android...
-moz-propriété: valeur; // Mozilla
-ms-propriété: valeu...
font-size
font-family
font-style
font-weight
text-decoration
text-align
@font-face
display
float
position: relative
position: absolute
position: fixed
width, height
margin, padding
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
bor...
background-color
background-image
background-repeat
background-position
background-size
background-image: gradient(...)
…
transition-property
transition-duration
transition-timing-function
transition-delay
transform: fonction(valeur);
transform-origin: x y;
@keyframe monAnim
@-webkit-keyframes monAnim
@keyframes monAnim {
from {propriété: valeur1; propriétéN: valeur1;}
to {prop...
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media condition opérateur conditionN {...}
@media only screen and (min-width: 300px) {...}
…
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script type="text/javascript" >...</script>
<script type="text/javas...
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script type="text/javascript" >...</script>
<script type="text/javas...
instruction1;
instruction2;
var myVar;
myVar = 5;
var myVar = 5;
int, string, boolean, array...
+, -, *...
=, +=, -=...
++, --
==, <, >...
&&, ||, !
if (condition) {
instruction1;
}
else
{
instruction2;
}
while (condition) {
instruction1;
}
do {
instruction1;
} while (condition);
for (initialisation,
condition, incrémentation) {
instruction1;
}
ex:
for (i = 0; i<5; i++) {
a += i;
}
function myFct (arguments) {
instruction1;
return x;
}
myFunction(valeurs_arguments);
Ex: document.getElementById(“id”)...
<button id=”id” onclick=”maFonction”>
document.getElementbyId(“id”).onclick
(this.addClass(“class”));
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script type="text/javascript"src=”url_fichier_jquery”></script>
</bo...
$(“sélecteur”)
$(“sélecteur”).fonction();
ex:
$(“#id”).addClass(“ab”);
$("p").on("click", function()
{
alert($(this).text(...
document.getElementById(“content”).classList.add('wrap');
$(“#content”).addClass(“wrap”);
$( "sélecteur" ).animate(propriétés,
durée, function() {
// What to do after animation complete
});
$( "#book" ).animate({...
Html5, css3, js, jQuery
Html5, css3, js, jQuery
Html5, css3, js, jQuery
Html5, css3, js, jQuery
Html5, css3, js, jQuery
Html5, css3, js, jQuery
Html5, css3, js, jQuery
Html5, css3, js, jQuery
Html5, css3, js, jQuery
Html5, css3, js, jQuery
Prochain SlideShare
Chargement dans…5
×

Html5, css3, js, jQuery

640 vues

Publié le

Html5, css3, js, jQuery

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
640
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
42
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Html5, css3, js, jQuery

  1. 1. Contenu
  2. 2. <element attribut=“valeur”>Contenu</element> <element attribut=“valeur” />
  3. 3. <!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>
  4. 4. <!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>
  5. 5. <!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>
  6. 6. <!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>
  7. 7. <!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>
  8. 8. <!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>
  9. 9. <link /> <meta /> <script> <style> <header> <nav> <footer> <section> <article> <aside> <div> <span>
  10. 10. <h1>...<h6> <p> <blockquote> <q> <sup> <sub> <strong> <a> <br /> <pre> <ul> <ol> <li>
  11. 11. <table> <caption> <tr> <th> <td> <thead> <tbody> <tfoot> <form> <input /> <textarea> <select> <option>
  12. 12. <img /> <video> <audio> <source> <!-- … -->
  13. 13. http://41mag.fr/liste-des-balises-html5
  14. 14.
  15. 15. <!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>
  16. 16. 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; }
  17. 17. * élément #id élément.maclasse .maclasse élément1 élément2 élément1 > élément2 élément1 + élément2 élément1 ~ élément2
  18. 18. [attribut] [attribut=mavaleur] [attribut*=mavaleur] [attribut^=mavaleur] [attribut$=mavaleur] élément[attribut]
  19. 19. é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)
  20. 20. élément:active, élément:focus, élément:hover élément:link élément:visited élément:checked
  21. 21. élément:before élément:after élément::first-line élément::first-letter
  22. 22. é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éra propriété: valeur; // Toujours finir par la déclaration }
  23. 23. font-size font-family font-style font-weight text-decoration text-align @font-face
  24. 24. display float position: relative position: absolute position: fixed width, height margin, padding
  25. 25. 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
  26. 26. background-color background-image background-repeat background-position background-size background-image: gradient(...) …
  27. 27. transition-property transition-duration transition-timing-function transition-delay
  28. 28. transform: fonction(valeur); transform-origin: x y;
  29. 29. @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;} }
  30. 30. animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state …
  31. 31. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  32. 32. @media condition opérateur conditionN {...} @media only screen and (min-width: 300px) {...} …
  33. 33. <!DOCTYPE html> <html> <head> ... </head> <body> ... <script type="text/javascript" >...</script> <script type="text/javascript" src=”url”></script> </body> </html>
  34. 34. <!DOCTYPE html> <html> <head> ... </head> <body> ... <script type="text/javascript" >...</script> <script type="text/javascript" src=”url”></script> </body> </html>
  35. 35. instruction1; instruction2; var myVar; myVar = 5; var myVar = 5; int, string, boolean, array...
  36. 36. +, -, *... =, +=, -=... ++, -- ==, <, >... &&, ||, !
  37. 37. if (condition) { instruction1; } else { instruction2; }
  38. 38. while (condition) { instruction1; } do { instruction1; } while (condition);
  39. 39. for (initialisation, condition, incrémentation) { instruction1; } ex: for (i = 0; i<5; i++) { a += i; }
  40. 40. function myFct (arguments) { instruction1; return x; } myFunction(valeurs_arguments);
  41. 41. Ex: document.getElementById(“id”)...
  42. 42. <button id=”id” onclick=”maFonction”> document.getElementbyId(“id”).onclick (this.addClass(“class”));
  43. 43. <!DOCTYPE html> <html> <head> ... </head> <body> ... <script type="text/javascript"src=”url_fichier_jquery”></script> </body> </html>
  44. 44. $(“sélecteur”) $(“sélecteur”).fonction(); ex: $(“#id”).addClass(“ab”); $("p").on("click", function() { alert($(this).text()); });
  45. 45. document.getElementById(“content”).classList.add('wrap'); $(“#content”).addClass(“wrap”);
  46. 46. $( "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”); });

×