Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Leçon 05 HTML 5 & CSS 1 Plan Introduction HTML CSS HTML 5 2 Éléments d’une

Leçon 05 HTML 5 & CSS 1 Plan Introduction HTML CSS HTML 5 2 Éléments d’une page web Contenu - HTML Structure - HTML Style - CSS Comportement - JavaScript 3 HTML : le contenu whichElement? Trying to answer t h a t age old question: Should t h a t be a d i v , a span, o r somethingelse? Home Contribute About One o f the main challenges we see in b u ild in g semantic content is picking what tag t o use when. 4 HTML : le contenu <h1>whichElement?</h1> <h2>Trying to answer t h a t age old question:</h2> <h2>Should t h a t be a d i v , a span, o r something else?</h2> <ul> <li>Home</li> < l i > C o n t r i b u t e < / l i > < li> A b o u t < / li> </ul> <p>One o f the main challenges we see in b u i ld i n g semantic content is picking what tag to use when. to help with This s i t e seeks t h a t . Now,beforeweg e ta l l judgy and preachy l e t me g e t a few tenants o u t there:</p> 5 HTML, débuts Ensemble d’éléments et d’attributs permettant de déﬁnir des documents hypertextes structure, liens, images, tableaux, formulaires… Propriétés initiales : Mélange structure physique et logique Ex. : un élément pour mettre en gras Syntaxe peu stricte Ex : pas forcément obligatoire de fermer un élément 6 CSS : le style h1{ col or : r ed; } h2{ col or : bl ue; f ont - st yl e: i t al i c; } p{ col or : whi t e; backgr ound- col or : bl ack; } 7 Séparation de la structure logique et de la présentation documents HTML • Structure logique = HTML = ensemble d’éléments de contenu • Présentation suivant une feuille de style (style sheet) qui traite les éléments de contenu en éléments de présentation Cascading Style Sheets • Feuilles de styles associées à HTML • En cascade • on peut utiliser des feuilles de styles multiples • il y a un degré d’importance pour chaque feuille de style 8 CSS : le style JavaScript <html> <head> < s c r i p t t y p e = " t e x t / j a v a s c r i p t " > f unct i on cr eat eAl er t M essage( ) { al er t ( " St op what you' r e doi ng! " ) ; } < / s c r i p t > </head> <body> <button onclick="createAlertMessage()"> A l e r t ! </button> </body> </html> 9 http://www.ostralo.net/javascript/pages/pageJ1.htm Un standard Il existe deux organismes de standardisation principaux • W3C (World Wide Web Consortium) • Consortium de 350 entreprises, ONG, universités et gouvernements • Prix d’entrée • Basé sur le consensus (et donc lent) • WHATWG (Web Hypertext Application T echnology Working Group) • Plus petit, sans prix d’entrée • Processus de décision sans consensus • Retours jusqu’à ce que l’avis de l’éditeur ne change plus. • Surtout concentré sur HTML5 10 Plan 11 Introduction HTML CSS HTML 5 Anatomie d’une page Web • Une (bonne) page HTML commence par un DOCTYPE • Ensuite <html> suivit de <head> et de <body> • Les méta-informations vont dans <head> • Le contenu va dans <body> <!DOCTYPE html> <html lang="en"> <head> ...meta stuff... </head> <body> ...Hello word ! </body> </html> 12 Anatomie d’une page Web 13 Contenu de <head> • Titre du document <title></title> • Autres informations non affichées à l’écran, utilisées par le navigateur, les moteurs, etc. <meta name="..." content="..." /> <meta http-equiv=“Refresh” content="4" ; url=“http://www.google.com” /> <meta name="author" content=“”/> <meta name="Keywords" content="motcle1, motcle2, motcle3”/> <meta name="language" content="fr"/> • URL de base pour les URL relatives <base href="URL-de-base" /> • Styles • <style /> : inclure une feuille de style CSS dans la page • <link /> lier le document à une ressource externe (typiquement, feuille de style) • Scripts • <script /> ajouter un script à la page 14 Elément <body> ‣ Le contenu du site Deux grandes classes d’éléments : ‣ Block ‣Prennent toute la largeur disponible ‣Provoque un retour à la ligne ‣Peuvent contenir des éléments inline ‣ Inline ‣Ne provoque pas de retour à la ligne ‣Ne peuvent pas contenir des éléments block ‣Peuvent contenir des éléments inline 15 Contenu de <body> ( le corps) Exemple: A faire chez soi 16 • <p> pour paragraphe (block) • <pre> pour du texte pré-formaté (ex: poème) (block) • <blockquote> pour les grandes citations (block) • <q> pour les petites citations (inline) • <em> pour l’emphase (italique) • <strong> pour l’épaisseur de la police (gras/bold) • <sub> et <sup> pour exposants et indices • <h1> à <h6> pour les titres • Symboles spéciaux : é pour é, & pour ☃ pour ☃. Éléments textuels du corps 17 Listes • Principe général Un élément liste contient des élément items • Listes classiques 1. Liste à puces <ul> ... </ul> (unordered list) 2. Liste ordonnée <ol> ... </ol> (ordered list) 3. élément items <li> ... </li> Item de list 4. Liste de déﬁnitions  Conteneur <dl> ... </dl>  Terme de déﬁnition <dt> ... </dt>  Description de déﬁnition (= déﬁnition elle-même) <dd> ... </dd> 18 Liste - Exemple 19 Liens Le Web est un hypermedia Principe : • une ancre contenant le texte ou les éléments sur lesquels on peut cliquer • le clic redirige vers une URL -> chargement de la ressource désignée par l’URL. Syntaxe : <a href="URL“ title=“texte”> ancre </a> => ancre • href : URL de destination du lien • title : texte qui apparaîtra si on survole le lien 20 • Uniform Resource Locator (URL) • Les liens sont des pointeurs, relatifs ou absolus • Permettent d’identiﬁer une ressource sur le réseau • Page Web, image, programme, ﬁchier à télécharger… • Liens relatifs : • Les liens relatifs pointent vers un endroit relatif à la position de la page courante, • utilisent .. ou / (voir cours UNIX) • <a href="../../ﬁle.html">ﬁle.html</a> • Liens absolus : • Les liens relatifs pointent vers une destination absolue, • structure : protocole :// adresse / chemin • <a href="http://google.com">Google</a> 21 URL Commentaires Commentaires n’importe où : <!— ... --> Mais pas de -- dans les commentaires. 22 Images Principe • Un élément image (img) est lié à un ﬁchier image (attribut src) • Une image est une ressource externe, désignée par une URL, qui doit être chargée par le navigateur • Un texte alternatif en cas de problème avec le ﬁchier image Exemple <img src =“http://site.org/esi.jpg" alt="logo de L’ESI ” width="40« height="30" /> 23 Tables Principe • Un tableau contient des lignes, qui contiennent des cellules • Les utiliser pour des données tabulaires! pas pour la mise en forme Eléments • <table> ... </table> • <tr> ... </tr> • ‣ <td> ... </td> • ‣ <th> ... </th> • <caption> ... </caption> élément général table row table cell table header table caption 24 Tableau - Exemple 25 Formulaires Objectifs: • Permettre à l’utilisateur d’envoyer des informations à un serveur • Saisir les informations 1. listes déroulantes, cases à cocher, zones de texte, etc. 2. bouton pour remettre à zéro • Envoyer les informations 1. Méthode GET : les informations passent par l’URL 2. Méthode POST : les informations sont échangées par le protocole HTTP 26 Formulaires: éléments Éléments • <form> ... </form> • <input> ... </input> déﬁnit un formulaire entrée de formulaire • <textarea> ...</textarea> zone de texte • <select> ... </select> <option> ... </option> liste déroulante option du sélect 27 Structure, div et span 28 • Les balises <div> sont très souvent employées pour créer la mise en page d’un site • Les balises <span> servent plutôt à mettre quelques mots en valeur Structure, div et span • Utilité Regrouper des sous-parties de document pour leur donner un nom Pour enclore (contenir) du texte ou d’autres éléments XHTML Pour les traiter globalement en leur affectant des styles, des événements… Mais sans leur donner de sémantique particulière • <span> ... </span> Élément de type inline Contient du texte ou d’autres éléments inline • <div> ... </div> Élément de type block Contient du texte, d’autres éléments inline ou block Retour chariot à la ﬁn 29 Les balises <div> sont très souvent employées pour créer la mise en page d’un site Les balises <span> servent plutôt à mettre quelques mots en valeur Plan 30 Introduction HTML CSS HTML5 CSS, généralités Objectif • Décrire comment un document HTML doit être affiché • Remplace les éléments d’affichage des anciennes versions de HTML (séparation réelle du contenu et de sa présentation) • L’affichage est pris en charge par le navigateur (normalement) Principe • Décoration de l’arbre des éléments HTML • Associer un certain nombre d’attributs de style à un élément 31 Feuille uploads/Ingenierie_Lourd/ lecon-5-initiation-html-amp-css.pdf