Web HTML CSS Javascript
HTML HTML (Hyper Text Markup Language) est une convention Web composé de URL, DNS (adresse) HTTP (protocole de communication) HTML (langage) Permet de représenter du contenu statique et multimédia divers appareils et plateformes (accessibilité)
Une requête Web 1. HTTP://domaine.com:80 Registres de domaines 3. GET /index.html HTTP/1.1 Host: www.domaine.com 2. Domain Name Server (DNS) Domaine.com => 200.100.50.90 HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red- Hat/Linux) Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT... Content-Type: text/html; charset=utf-8 Content-Length: 131 <html>... </html> 4. Affichage de la réponse dans le navigateur
Standards Web HTML (années 1990) une application de SGML (ISO 8879 - Standard Generalized Markup Language) World Wide Web Consortium (W3C) organisme 1994 Microsoft, Apple, Mozilla Renforce les compatibilités des technologies Web (HTML, CSS, JS) Supervise le développement des normes, émet des recommandations Aspect semblable sur plusieurs navigateurs
HTML (version 5) HTML5 est plus flexible et ajoute des fonctionnalités - le W3C y travaille depuis 2007 version mature mais toujours en évolution Structure des pages (<header>, <footer>, <nav>,...) Formulaires, validation Canvas (rendu graphique dynamique pour des jeux ou applications)
HTML5 Support natif de formats audio/vidéo Simplifications de balises : DOCTYPE, meta charset SVG, Géolocalisation, Drag'n drop, Stockage de données,
HTML5 - Caractéristiques Compatible Support des anciennes balises Devoir de proposer des alternatives aux absences de fonctionnalités Existence de fonctions pour tester la présence Possibilité d'utiliser les nouvelles fonctionnalités sans changer le reste
HTML5 - Caractéristiques Utilisation Production du DOM identique sur tous les navigateurs Séparation plus claire des rôles (HTML : contenu, CSS : présentation) Indépendance vis à vis des médias
App Web ou native? POUR Disponible sur toutes les plateformes Coût de développement faible Langage simple Débogage rapide Maintenance faible CONTRE Moins bonne interface Performance moindre Limité aux navigateurs compatibles
Environnement de développement HTML : éditeur classique CSS : éditeur classique Javascript : éditeur de code IDE recommandé pour gagner du temps : JetBrains WebStorm, Eclipse, Microsoft Visual Studio, Aptana Studio, Brackets En ligne : http://jsbin.com http://jsfiddle.net http://codepen.io/pen/
Forme classique d un document HTML <DOCTYPE html> <html> <head> <!-- Ici on place les métadonnées --> </head> <body> <!-- Ici on place le contenu --> </body> </html>
Structure d une page Page HTML5 composée de Doctype niveau de conformité de la page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/ DTD/xhtml1-strict.dtd"> <!DOCTYPE html> Html Balise principale <html xmlns=http://www.w3.org/1999/xhtml lang="en" xml:lang="en"> <html lang="en"> Encodage <meta http-equiv="content-type" content="text/html; charset=utf-8"> => <meta charset="utf-8"> (ou via une entête HTTP retournée par le serveur) Contenu
Balises de page <title> : titre de la page <base> : Url de référence du site (permet l'utilisation d'url relative) (attribut href) <meta> : name="author" : auteur de la page name="description" : descritpion de la page name="application name" : nom de l'application name="keywords" : mots clef de la page (séparé par des,) name="robots" : indication poour les robots (pas toujours supporté) charset : indique l'encodage de la page http-equiv : changer l'entête HTTP (refresh, content-type,...) <link> : pour les CSS + rel= "shortcut icon" href= "icon.ico" : spécifie une icone pour la page rel= "prefetch" href= "page2.html" : permet de précharger une page
Utilisation des balises Utilisation de balises pour leur sens Moins de balises possibles Être concis et précis sur l'utilisation Ne pas faire de présomption sur l'utilisateur (pourrait être un robot) Bien comprendre le sens des balises Explication des balises (W3) http://www.w3.org/tr/htmlmarkup/elements.html W3 School - http:// www.w3schools.com/tags/ tag_script.asp
Formulaires Web Forme générale: <form> <input type="text" name="requete"> <input type="submit" value="soumettre"> </form> Divers types de champs disponibles (> 12 nouveaux avec HTML5 assez bien supportés par les navigateurs récents) Pour valider le support des champs HTML5 : http://www.caniuse.com/
Tables <!DOCTYPE html> <html> <head><style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } </style></head> <body> <table style="width:100%"> <tr> <th>prénom</th> <th>nom</th> <th>points</th> </tr> <tr> <td>julie</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> <tr> <td>john</td> <td>world</td> <td>80</td> </tr> </table></body></html>
Texte placeholder : texte d'information affiché avec la zone de texte autofocus : le navigateur place le curseur utilisateur à cet endroit après le chargement de la page Disabled : désactivé Zones de texte : <textarea>
Nombres
Dates
Sélection
Spécialisés
Validation de formulaires Points essentiels d'une application Web Besoin d'avoir des méthodes de validation et de contrôle E-mail, Date, Téléphone,... Affichage d'aide sur une saisie Obliger l'utilisateur à entrer des données correctes Afficher des erreurs aux utilisateurs pour des champs obligatoires pour des champs mal-saisis La validation côté serveur reste obligatoire Appel directe de la méthode Javascript désactivé Besoin de spécifier l'utilisation d'un formulaire (form)
Validation de formulaires Attributs dans les balises <input type=" " nomattribut> autofocus : Donne automatiquement le focus à l'élement (un seul par page) placeholder : Exemple de saisie required multiple : Sélection multiple possible (pour des fichiers par exemple) pattern : Expression régulière pour une entrée spécifique - [A-Za-z]{3} autocomplete : pour proposer l'autocomplétion par rapport à ce qui a été déjà saisi min, max : valeur min et max step : pas d'incrémentation (pour les valeurs) list : référence l'id d'une datalist (entrées présaisies)
Validation de formulaires Validation souvent activée par défaut Sinon : <form novalidate> </form> <input type=" " required> Valide les mails, les dates, les nombres,
Exercice 1 Écrire une page HTML5 semblable à celle ci-dessous (respectez les types de champs et les champs requis).
CSS Cascading Style Sheets But : Séparer le contenu (HTML) de la présentation (Styles CSS) Écriture des règles de styles Plusieurs façon de définir ces règles (du plus spécifique et prioritaire au plus générique) Attribut : <a href="http:// " style="backgroundcolor : yellow;">web</a> Style embarqué dans l'entête : <style type="test/css"> a { background-color: yellow; } </style> Fichier de style exerne : <link rel="stylesheet" type="text/css" href="fichier.css"/>
Sélecteurs Sélectionner des éléments de la page afin d'appliquer un style Recherche par #ID ;.class, type (balise), attribut, valeur d'attribut Appliqué du plus spécifique au plus générique Forcer l'ordre via color : black!important; Source: W3Schools
Sélecteurs possibles * : tous les éléments <type> : un élément du type type.<class> : un élément ayant pour attribut class qui contient class #<id> : un élément ayant pour attribut id contenant id [attr] : un élément qui a l'attribut attr [attr="val"] : l'attribut vaut val [attr^= "val"] : l'attribut commence par val [attr$="val"] : l'attribut termine par val [attr*="val"] : l'attribut contient val [attr~= "val"] : une des valeurs de l'attribut est val [attr = "val"] : la première des valeurs de l'attribut est val <s1>, <s2> : s1 ou s2 <s1> <s2> : s2 qui est un descendant de s1 <s1> > <s2> : s2 qui est un enfant de s1 <s1> + <s2> : s2 qui est le frère direct de s1 <s1> ~ <s2> : s2 qui est un successeur de s1 Même style à trois types de champs d'un formulaire (input,select,textarea enfants de #form) : #form input, #form select, #form textarea { border: 1px solid lightgray; }
Propriétés générales Arrière-plan (couleur) background-color: #b0c4de; Arrière-plan (image) background-image: url("gradient.png"); background-repeat: no-repeat; background-position: right top; Texte Couleur color: rgb(255,0,0); Alignement - text-align: justify; Décoration - text-decoration: underline; Police font-family: "Times New Roman", Times, serif; font-size: 30px;
Autres styles Listes : ul.b { list-style-type: square; } circle, square, upper-roman, lower-alpha list-style-image: url('sqpurple.gif'); Tables : table, th, td { border: 1px solid black; } th { background-color: green; color: white; } caption { caption-side: bottom; }
Définitions des valeurs Couleurs nom : black, silver, yellow,... hexadécimal : #000000, #C0C0C0, #FFFF00, rgb(0,0,0) rgba(0,0,0,1), hsl(102, 100%, 35%), hsla(102, 100, 35%, 1) Dimensions (à l'écran) in : pouces (2.54cm) cm : centimètre mm : millimètre pt : points (1/72ème pouce) pc : 12 points px : pixels 0.75pt Taille (police) em : relatif à la taille de la police courante ex : relatif à la hauteur de la police courante rem : relatif à la taille de la police de l'élément racine % : pourcentage d'une autre propriété (comme font-size) http://www.w3.org/tr/css21/ syndata.html#length-units
Définitions des valeurs Angles deg : degrés rad : radian grad : gradian turn : 360 degrés Temps s : secondes ms : milli-secondes Possibilité d'utiliser la fonction calc pour calculer calc(100%-40px)
Marges padding : espace autour de la boîte Possibilité de mettre 4 valeurs séparées ou quelques-unes (top, right, bottom, left) % hérite de la largeur du contenu Existence de padding-right, padding-top, margin : espace autour de la bordure idem que pour padding : margin-left, pas utilisé pour des éléments inline Contrôle de la taille width, height min-width/height, max-width/height
Marges Marge externe (margin): position de l'élément vs. tous les autres de la page auto : marges gauche égales aux marges droite (centré sur la page) margin-top : marge externe du haut margin-right : marge externe de droite margin-bottom : marge externe du bas margin-left : marge externe de gauche Marges internes (padding-left, padding-top, ) Entre bordure et contenu margin: auto; margin-left: 10px; margin-right: 10px; margin-top: 100px; margin-bottom: 10px;
Bordures p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;}
Affichage overflow(-x -y) : permet de préciser comment se comporter en cas de dépassement auto : fait apparaître une scrollbar si besoin hidden : cache ce qui dépasse (et pas de possibilité de voir) no-content ou no-display : pas supporté (contenu caché ou enlevé si dépassement) scroll : ajoute toujours une scrollbar visible : mode par défaut (dépasse...) visibility : pour contrôler la visibilité de l'élément... collapse : élément invisible, et n'occupe pas de place hidden : élément invisible, mais occupe sa place théorique visible : élément visible (donc occupe sa place)
Display Propriété display: Bloc : occupe toute la largeur de la page, quelque soit le contenu (comme un paragraphe) block : Boîte de type bloc, empêche les autres éléments de se placer après sur la page. inline : Éléments sur la même ligne (pas des blocs) inline-block : Boîte de type bloc, laisse les autres éléments se placer après sur la même ligne. none: Invisible block inline inline-block
Position static : valeur par défaut absolute : positionné par rapport au premier ancêtre (qui a une position autre que static ex. : DIV vert clair) relative : positionné par rapport à sa position par défaut (pas par rapport à un autre élément) fixed : positionné par rapport à la fenêtre du navigateur (ne bouge pas même en scrollant) position:absolute; margin-left:20px; position:relative; margin-top:10px; margin-left:200px;
Float float : aligner des boîtes (ou images) d'un côté les autres éléments se placent autour. right : à droite left : à gauche none : élément non flottant p { float: left; } p { float: right; } clear : arrête le flottement autour d'un côté pour prendre l'espace (d'autres éléments peuvent autrement être dessinés par-dessus). left, right, both, none clear:none; clear:both;
Sélecteurs - options :link : les liens non visités :visited : les liens déjà visités :active : élément actif (par l'utilisateur) :hover : élément survolé par la souris :focus : élément ayant le focus :first-child : premier enfant de l'élément parent :lang(c) : élément ayant comme langue C :first-line : première ligne :first-letter : première lettre :before : avant le sélecteur :after : après le sélecteur :nth-child(n) : tous les N enfants :nth-last-child(n) : tous les N enfants (en partant de la fin) :nth-of-type(n) : tous les N enfants du même type :nth-last-of-type(n) : idem :last-child : dernier enfant :first-of-type : premier enfant du type spécifié :last-of-type : dernier enfant du type spécifié :only-child : seul enfant du père :only-of-type : seul enfant du père du type spécifié :root : élément racine du document :empty : élément sans enfant :enabled : élément actif :disabled : élément inactif :checked : élément coché :not(s) : élément qui n'est pas sélectionné par S Test de sélecteurs : http://www.w3schools.com/cssref/trysel.asp
CSS 3 Effets, transformations 2D/3D, animations, layouts, interaction. Effets pour bordures border-image image en bordure border-radius coins arrondis box-shadow ombrage Effets pour texte text-shadow word-wrap: break-word; Transformations translate, rotate, scale, skew, matrix
CSS 3 Transitions changement (graduel) d'un attribut http://www.w3schools.com/css/tryit.asp? filename=trycss3_transition5 Animations http://www.w3schools.com/css/ tryit.asp?filename=trycss3_animation5 Toujours en développement. Support des navigateurs : http://caniuse.com/#search=css3 http://www.w3schools.com/cssref/ css3_browsersupport.asp
Exercice 2 Reprenez l'exercice 1. Ajoutez-y du style