Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML 5 / CSS3

HTML 5 / CSS3

Formation organisée par les Women Techmakers de Lomé (Togo) pour les femmes en vue de leur donner une initiation au développement FrontEnd

Avatar for Amen AMOUZOU

Amen AMOUZOU

May 27, 2016
Tweet

More Decks by Amen AMOUZOU

Other Decks in Technology

Transcript

  1. Quelques rappels ... 1. Page Web 2. Site Web 3.

    Nom de domaine 4. Adresse Web (URL) 5. Serveur Web / Hébergement Web
  2. Page Web / Fichier HTML Une page Web est fichier

    texte (plain text) écrit dans dans un langage de description de contenu (textes, images, liens, tableaux, etc) appelé HTML. Une page Web ou un fichier HTML porte généralement l’extension .htm ou .html mais pas nécessairement. Le fichier HTML peut être ouvert avec n’importe quel éditeur de texte; dans ce cas, on est en mode édition, (C’est ce que font généralement les développeurs). Le fichier HTML peut être ouvert également avec navigateur Web (Browser); dans ce cas, la page Web est ouverte pour consultation, comme quand on va sur n’ importe quel site Internet.
  3. Site Web Un site Web, est un ensemble de pages

    Web reliées entre elles par des liens hyperliens, stocké sur une machine connecté au réseau mondial (internet) et accessible à partir d’une adresse Internet.
  4. Nom de domaine Un nom de domaine, est une adresse

    Internet que l’on achète chez des bureaux d’ enregistrements (registrar) et qui permet d’associer à une ressource Internet, une adresse unique. Exemple : gdg-lome.org, rfi.fr, google.com, beluga.tg
  5. Adresse Web (URL) URL : Uniform Ressource locator. C’est une

    adresse Internet complète permettant d’identifier de façon unique, une ressource (ou un document) sur Internet. Elle est de la forme : http://www.appsland.com/references/2016/index.php? orderby=title&order=ASC - http : protocole d’accès. Généralement utilisé pour le Web; existe aussi en https - www : sous domaine - appsland.com : le domaine - /references/2016/index.php : chemin - ?orderby=title&order=ASC : query string
  6. Serveur Web / Hébégerment Web Un Serveur Web est un

    logiciel dont le rôle est de “servir” des pages HTML et ses ressources (feuilles de styles, javascript, images, vidéos, sons, etc) à partir d’une adresse Internet. Exemple de Serveur Web : Apache, LightHttp, Cheroke, Microsoft IIS... Hébergement Web : Héberger un site Web, c’est télé-transmettre, l’ensemble des fichiers de son site Web sur un serveur (machine) disposant d’un logiciel serveur web et connecté à Internet 24h/24, 7J/7. Il existe des prestaires de ce service d’hébergement Web : APPSLAND est hébergeur de sites Web au Togo depuis 2005.
  7. HTML 5 Le HTML (Hypertext Markup Language) est un langage

    de description de page Web. Avec le HTML, on décrira le contenu, le fonds, sans se préoccuper de la forme ou de la mise en page. Grâce à ces balises, il offre un ensemble d’outils sémantiques forts et de description pour une consultation aussi bien par les humains (navigateur Web classique), les synthéseurs vocaux (pour les malvoyants) que des programmes (extraction de données par exemple).
  8. HTML 5 <!doctype html> <html lang="fr-FR"> <head> <title>Titre de ma

    page</title> </head> <body> Hello World ! </body> </html> Exemple de code HTML 5
  9. CSS 3 CSS : Cascading Styles Sheets, ou feuilles de

    styles en cascade. C’est un langage qui permet de définir les mises en page et les mise en forme d’une page Web et quelques animations. C’est le CSS qui “apporte les couleurs” à une page Web fade et moche ;-)
  10. CSS 3 body{ color: red; background-color: yellow; font-size: 12pt; }

    table{ border-width: 2px; border-style: solid; border-color: grey; } Exemple de code CSS 3
  11. Javascript Le Javascript est un langage à ne pas confondre

    avec Java, un autre langage de programmation. Le Javascript, utilisé dans une page Web, permet d’apporter - de l’animation - du contrôle des données saisies par les utilisateurs (interactivités) - de déssiner, de créer des espaces de jeux, etc. Le Javascript peut aussi être utilisé, côté serveur (NodeJs), pour remplacer des langages de programmation Web classiques comme le PHP, Python, Java ou C Sharp (C#).
  12. Liminaire Le HTML est un langage issu de XML, un

    langage à balise. Le HTML étant un langage à balise, il convient de noter qu’il existe deux sortes de balises : - les balises complètes composées d’une balise ouvrante et d’une balise fermante - les balises orphélines comportant uniquement une balise ouvrante.
  13. La balise complète Elle est décrit souvent des éléments qui

    peuvent contenir d’ autres élements - <html></html> - <body></body> - <h1></h1> - <p></p>
  14. Elle est décrit généralement des élements qui n’ont pas vocation

    à contenir d’autres éléments, comme un trait de séparation horizontal, une image, un retour à la ligne, etc. La balise orphéline - <hr /> - <img /> - <br />
  15. Les balises peuvent contenir un ou plusieurs attributs. Un attribut

    est un paramètre supplémentaire pour une balise tendant à modifier ou à préciser certaines propriétés de cette-ci. Les attributs - <img src=”chemin-vers-mon- vichier/belleImage.jpg” height=”200” width=”300” alt=” André Bellemart” > - <table border=”2” cellspacing=” 2”></table>
  16. L’entête contient, en plus du titre de la page, visible

    dans la barre des titres, parfois des éléments non visibles (méta balises) mais qui déterminent le fonctionnement de la page Le code minimal <!DOCTYPE html> <HTML> <HEAD> <TITLE>Greeting</TITLE> </HEAD <BODY> Hello World ! </BODY> </HTML>
  17. Les titres permettent d’ hiérarchiser l’information dans la page. Il

    y a 6 niveau de titres Les titres <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 2</h5> <h6>Titre de niveau 2</h6>
  18. Il est souhaitable mettre un texte libre dans des paragraphes.

    Paragraphes <p>Un paragraphe commence ici et se poursuit jusqu’à la deuxième puis une troisième et enfin une quatrième et dernière ligne.</p> <p>Un second paragraphe recommence et continue son chemin tranquillement jusqu’à la fin décidé par son créateur</p>
  19. Le Retour à la ligne est à ne pas confondre

    avec les paragraphes Retour charriot <p>Un paragraphe commence ici et se poursuit jusqu’à la deuxième puis une troisième et enfin une quatrième et dernière ligne. <BR /> Un second paragraphe recommence et continue son chemin tranquillement jusqu’à la fin décidé par son créateur</p>
  20. Le Retour à la ligne n’est pas à confondre avec

    les paragraphes. Retour charriot
  21. Les citations peuvent être utilisés pour “citer” ou mettre en

    valeur (encart) des parties importantes d’un texte. Citation <BLOCKQUOTE> <p>Ceci est une citation extrait du livre Les fleurs de mal de Beaudelaire. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </BLOCKQUOTE>
  22. Pour une mise en valeur sémantique de portions de textes

    ... Gras, italic, souligné <strong>Je suis en gras</strong> <em>Je suis en italic</em> <u>Que du souligné</u>
  23. Les liens permettent de lier deux ressources internet. Si le

    lien est sur un texte, on parle d’ hypertexte Les hyperliens <a href=”http://www.google. com”>Cliquez-moi !</a>
  24. Le trait horizontal sert à séparer des blocs de textes

    Trait de séparation <p>Un paragraphe commence ici et se poursuit jusqu’à la deuxième puis une troisième et enfin une quatrième et dernière ligne.</p> <HR /> <p>Un second paragraphe recommence et continue son chemin tranquillement jusqu’à la fin décidé par son créateur</p>
  25. Les listes sont de deux (02) ordres : la liste

    numérotée (OL) et la liste non numérotée (UL). Chaque élément de la liste est introducte par <li> (Liste Item) Les listes <OL> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> </OL> <HR> <UL> <li>HTML 5</li> <li>CSS 3</li> <li>Javascript</li> </UL>
  26. Les listes sont de deux (02) ordres : la liste

    numérotée (OL) et la liste non numérotée (UL). Chaque élément de la liste est introducte par <li> (Liste Item) Les listes
  27. Les images enrichissent les pages Web en apportant un appui

    visuel au texte. Les images <img src=”mon-image.jpg” alt=” Votre serviteur” />
  28. Les dimensions de l’image, sont imposées par les attributs height

    et width. L’adresse du fichier, est en chemin relatif ou absolu. Les images
  29. Les logiciels : Vous utiliserez un logiciel de création graphique

    Bitmap (comme Photoshop) ou un logiciel de création vectoriel (comme Illustrator). Vous pouvez aussi télécharger sur le net une image en faisant attention au droit d’auteur. Choisir le format : le format Web est généralement le jpg, png ou le gif. La taille : elle doit être raisonnable et prendre en compte les débits de nos visiteurs. Quelques kilo-octets suiffisent largement. Comment créer ou choisir son image. Les images
  30. Elles doivent être utilisées avec parcimonie et ne jamais être

    lancée automatiquement. Les vidéos <video src="android.mp4" controls="true"></video>
  31. Les dimensions de la vidéo, sont imposées par les attributs

    height et width. L’adresse du fichier, est en chemin relatif ou absolu. Les vidéos
  32. Comment créer ou choisir sa vidéo. Les vidéos Choisir le

    format : le format Web est généralement le mp4. La taille : elle doit être raisonnable et prendre en compte les débits de nos visiteurs. Quelques kilo-octets ou mega-octet suiffisent largement.
  33. Elles doivent être utilisées avec parcimonie et ne jamais être

    lancée automatiquement. Les sons <audio src="Hello.mp3" controls="true"></audio>
  34. Les tableaux sont utilisés pour présenter des données tabulaires :

    des données statistiques, des chiffres, etc. Les tableaux <TABLE> <THEAD> <TR> <th>#</th> <th>Nom</th> <th>Prénoms</th> <th>Notes</th> </TR> </THEAD> <TBODY> <TR> <td>1</td> <td>Nick</td> <td>CAFFREY</td> <td>18/20</td> </TR> </TBODY> </TABLE>
  35. Les tableaux sont utilisés pour présenter des données tabulaires :

    des données statistiques, des chiffres, etc. Les tableaux
  36. Ils permettent la mise en place d’un mécanisme d’interaction avec

    l’utilisateur par la collecte d’information. Les formulaires disposent de beaucoup de contrôles. Les formulaires <FORM action=”” method=””> </FORM>
  37. Permet de collecter des informations simple : Exemple : Nom,

    prénoms. Les balises <label> servent à indiquer les étiquettes des contrôles Zone de saisie simple <FORM action=”” method=””> <p> <label for="nom">Nom nom</label> <INPUT type=”TEXT” id=" nom" valeur="nom" placeholder=" Robert Dupond" /> </p> </FORM>
  38. Permet de collecter des informations textes de grande quantité. Zone

    de saisie large : textarea <form> <p> <label for="message" >Votre message</label> <textarea name=" message" id="message" cols="30" rows="10"> Ceci est un contenu par défaut, modifiable par l'utilisateur </textarea> </p> </f orm>
  39. Permet de collecter des informations simple : Exemple : Nom,

    prénoms Zone de saisie large : textarea
  40. <SELECT> permet des choix parmi une liste. Par défaut, un

    seul choix possible Liste déroulante - Choix unique <form> <p> <label for="major">Le major de la classe</label> <select name="major" id="major"> <option>Robert</option> <option>Rachid</option> <option>Rachelle</option> </select> </p> </form>
  41. A utiliser quand le nombre de choix possible est supérieur

    à deux ou trois. Autrement, utiliser les boutons radios. Liste déroulante - Choix unique
  42. <SELECT> permet des choix parmi une liste. ajouter l’attribut multplie=”true”

    Liste déroulante - Choix multiple <form> <p> <label for="major">Le major de la classe</label> <select name="major" id="major" multiple="true"> <option>Robert</option> <option>Rachid</option> <option>Rachelle</option> </select> </p> </form>
  43. Utiliser SHIFT et CTRL pour des raccourcis de sélection évoluéé.

    Peut être intrechangéé avec les cases à cocher. Liste déroulante - Choix multiple
  44. Elles permettent de faire plus d’ un choix parmi une

    liste. Cases à cocher <form> <p> <input type="checkbox" name=" sports[]" id="FootBall" value="football" /> <label for="FootBall" >FootBall</label> <input type="checkbox" name=" sports[]" id="VolleyBall" value=" volleyball" /> <label for="VolleyBall" >VolleyBall</label> <input type="checkbox" name=" sports[]" id="BasketBall" value=" basketball" /> <label for="BasketBall" >BasketBall</label> </p> </form>
  45. Elles permettent de faire un choix unique parmi une liste

    de proposition. Boutons radio <form> <p><strong>Quel est votre sport favori (Une seule réponse)</strong></p> <p> <input type="radio" name="favori" id=" FootBall" value="football" /> <label for=" FootBall">FootBall</label> <input type="radio" name="favori" id=" VolleyBall" value="volleyball" /> <label for=" VolleyBall">VolleyBall</label> <input type="radio" name="favori" id=" BasketBall" value="basketball" /> <label for="BasketBall">BasketBall</label> </p> </form>
  46. Elles apportent une meilleure organisation sémantique Les nouvelles balises HTML

    • <HEADER></HEADER> • <FOOTER></FOOTER> • <NAV></NAV> • <ASIDE></ASIDE> • etc...
  47. Block & Inline Tous les éléments HTML (Balises) se classent

    aussi en général en deux catégories : les élements de type “block” et ceux de types “inline”.
  48. Les éléments DIV et SPAN sont des balises générique qui

    n’ont aucun sens sémantique. DIV & SPAN DIV est un conteneur plat, c’est à dire qu’il n’a aucun effet visuel sur le rendu dans le navigateur. C’est un conteneur de type “Block”. SPAN est quant à lui de type “inline”. Ils sont cependant, fort utiles, pour organiser les élements HTML pour une future mise en page avec les feuilles de styles (CSS). Ils n’ont d’intérêt que si on leur ajoute les attributs génériques ID, Class ou Style.
  49. Nommer les élements HTML est utilie pour faciliter leur personnalisation,

    leur mise en page avec CSS ou leur manipulation dynamique avec Javascript. ID & Class Chaque élément HTML peut porter l’ attribut ID dont la valeur doit être unique dans le document. Exemple : <h1 id=”entete”>Formation HTML 5</h1> -------------------- Plusieurs éléments peuvent partager une même étiquette, une même classe. Dans ce cas, on utilise l’attribut CLASS. Exemple. <p class=”code”>Ceci est un code informatique</p> <div class=”code”>Ceci est un autre code informatique</div>
  50. Le zonage peut être vu comme le travail préliminaire pour

    une future mise à en page. “Zonage” Le zonage permet de découper la page en autant de zones que nécessaire. Cela permet de positionner les zones de navigation, les contenus, le logo, le pied de page, le moteur de recherche, ou le fil d'Ariane...
  51. Quesako ? Les CSS, Cascading Style Sheets (feuilles de styles

    en cascade), servent à mettre en forme des documents web, type page HTML ou XML Grâce aux propriétés d’apparence (couleurs, bordures, polices, etc) et de placement (largeur, hauteur, côte-à-côte, dessous-dessus, etc), le rendu d’une page peut être intégralement modifiée sans aucun code supplémentaire dans le HTML.
  52. Objectifs L’objectif principal est de dissocier le contenu de la

    page de son apparence visuelle. - Eviter de répéter le même code dans toutes les pages Web - utiliser des styles génériques - changer l’apprence complet d’ un site en ne modifiant qu’un seul fichier - facilite la lecture des codes (HTML et CSS étant séparés)
  53. Règles syntaxiques Ce qu’il faut retenir ... - Casse :

    Les CSS ne sont pas sensible à la casse - Mise en forme du code : Les CSS ne prennent pas en compte les espaces et retours à la ligne - Identifiants : les ID et les classes ne peuvent contenir que des caractères A-Z, a-z, 0-9 et ne peuvent commencer par un nombre - Commentaire : /* --- */
  54. Structure générale Les CSS fonctionnent sous forme de déclaration :

    selecteur{propriete:valeur;} Un déclaration CSS est composé au minimum de deux éléments : - l’élément de la page auquel on applique une mise en forme (sélecteur) - le groupe de règle définissant le style Exemple : h1{ color: red; }
  55. Modularité Il est possible d’importer les styles contenus dans des

    fichiers de styles différents afin de les organiser de façon modulaire. Pratiques possibles : - séparer les éléments de la mises en page (placement des éléents) des éléments de la mises en forme (typographie) - les CSS global pour le site et d’ autres plus spécifiques pour certaines pages @import “mon-fichier.css”;
  56. Où écrire les CSS Les styles CSS peuvent être définis

    à deux endroits possibles. - Dans une balise <style> placé dans l’entête <head> - Dans un fichier CSS et lié à la page Web en utilisant la balise de liaison <link>
  57. Les styles CSS définis dans un fichier externe Cascading ?

    Si plusieurs feuilles de styles sont liés à la page, elles sont interprétées au fur et à mesure de leur lecture. Si des règles contradictoires apparaissent, c’est la dernière règles lue qui est appliquée.
  58. Plus un sélecteur est précis dans sa cible, plus sa

    priorité est importante. Un style de moindre priorité ne peut jamais modifier un style priorité supérieur. Priorités des règles 1. Elément Html, par exemple « h1 {color: black} » 2. Imbrication d'éléments, par exemple « div h1 {color: black} » 3. Utilisation d'une classe, par exemple « h1.noir {color: black} » 4. Utilisation d'un identifiant, par exemple « h1#nom-du-site {color: black} » 5. style dans la balise Html, par exemple « <h1 style="color: black">...</h1> »
  59. Un sélecteur un est mot-clé qui permet de désigner une

    catégorie d’élement de la page éventuellement de nature différente ou une relation entre deux éléments de la page. Les sélecteurs 1. Sélecteurs généraux 2. Sélecteur de classes 3. Sélecteur d’identifiant 4. Sélecteur de déscendant
  60. Sélecteurs généraux Les sélecteurs - Les sélecteurs * sélectionne tous

    les balises de la page. C’est le sélecteur universel - Sélecteur de type : c’est le nom d’une balise HTML. Sélectionne tous les éléments de ce type. h2{}
  61. Sélecteur de classe Les sélecteurs Le sélecteur de classe s’applique

    typiquement aux élements redondants dans la page. Il concerne tous les élements HTML qui porte un attribut class. Il est spécifié par un POINT (.) suivi du nom de la classe. Exemple : .couleur_rouge{} .couleur_noire{}
  62. Sélecteur d’identifiant Les sélecteurs Le sélecteur d’identifiant (ID) peut s’

    appliquer qu’à un seul élement de la page, celui qui porte l’ID. Il est spécifié en utilisant un # devant l’ID. Exemple : #menu{} #titre_de_la_page{}
  63. Sélecteur d’attribut (généralité) Les sélecteurs De façon général, un sélecteur

    d’attribut pour un élément <BALISE attrib1=”AttribVal1”> s’écrira : BALISE[attrib1=]