Html et Css : des documents sur le web

Transcription

1 Html et Css : des documents sur le web HTML, c'est quoi? le langage pour décrire la structure des documents web Un langage normalisé par le W3C Un document html doit être conforme à la norme Un document html doit être validé Un langage avec plusieurs versions Versions actuelles : HTML 4.01 (1999), XHTML 1.1 Version en cours : HTML 5

2 Et CSS c'est quoi? Un langage pour définir la mise en forme d'un document web (écrit en HTML ou autre ) Un langage normalisé par le W3C Un document css doit être conforme à la norme Un document css doit être validé Un langage avec plusieurs versions Versions actuelles : 2.1 Version en cours : CSS 3

3 Quelques références l'origine du monde : le W3C ; validator.w3.org de bonnes références : w3schools mozilla developper network tutoriaux et cours de bonne qualité en français

4 Principe de base Séparation de la structure et de la forme facilite la maintenance et l'évolution d'un site facilite la réutilisation de styles permet d'adapter une page à différents contextes

5 HTML c'est quoi? (un peu plus de détails) Hyper Text Markup Language C'est un langage de balises (markup tags) Les balises permettent de structurer le contenu Un document html est une combinaison de balises et de texte correspondant au contenu

6 Une balise = 1 mot clé, entre < et > : <balise> Habituellement, les balises s'utilisent par paires : <p> le texte d'un paragraphe </p> Certaines balises s'utilisent seules : <br /> Un document HTML = du texte délimité par des balises La balise ouvrante d'une paire DOIT être fermée Imbrication correcte : <titre> un <p> titre </p> </titre> <titre> un <p> titre</titre> </p>

7 Les balises peuvent porter des attributs : <balise att1= ''valeur'' att2=''valeur''> Exemples : <img src=''figure.jpg'' alt=''une figure montrant une architecture client/serveur'' />

8 Structure d'un document html <!DOCTYPE html> Le type de document, ici : HTML5 <html lang="fr"> <head>  <meta charset="utf-8" /> <title>titre de la page</title> La zone d'entête du document </head> <body>

9 Quelques balises (I) Un paragraphe : <p>.. </p> Un paragraphe dans le texte, affiché avec un espace de séparation avec le précédent/suivant Les titres : <h1> <h1> : titre très important <h2> </h2> : titre important <h6> </h6> : titre moins important insérer un saut de ligne : <br /> Texte mis en valeur : Un peu : <em> </em> Beaucoup : <strong> </strong>

10 remarque On ne parle pas du résultat visuel de ces balises??? Non Pourquoi? Ces balises définissent la structure du document (un titre, un paragraphe ) La mise en forme est définie dans une feuille de style séparée (css) La mise en forme par défaut varie d'un navigateur à l'autre, et n'est pas très intéressante

11 Quelques balises (II) Les listes à puces : <ul> <li> premier item de la liste </li> <li> second item de la liste </li> </ul> Les listes ordonnées <ol> <li> premier item de la liste </li> <li> second item de la liste </li> </ol>

12 Des liens <a href= ''url''> texte à cliquer </a> Liens externes : <a href= '' vers Université de Lorraine </a> Liens internes au site : utiliser un chemin relatif au dossier contenant le document courant : /www/index.html /www/contact.html Dans index.html : <a href=''contact.html''>nous contacter</a>

13 Lien interne au document : pour pointer vers une zone de la page courante Insérer 1 «ancre», en ajoutant l'attribut id à un élément <h2 id=''zone_rouge''> Début de la zone Rouge </h2> On peut placer un lien vers 1 ancre : <a href=''#zone_rouge''> aller en zone rouge</a>

14 Des images 1 balise avec au moins 2 attributs : <img src=''img/chaton23.jpg'' alt=''photo de mon chat'' > src : chemin relatif vers le fichier alt : texte descriptif, utile lorsque l'image ne peut pas être téléchargée, pour le référencement, pour les navigateurs textes et pour les visiteurs non-voyants Title : pour ajouter une infobulle Format et qualité des images : Attention au poids Photos : jpeg Schémas et graphiques : png 8 ou png 24

15 L'arbre html 1 document html = une suite de balises (d'éléments) encadrant du texte Les balises sont imbriquées les unes dans les autres <html lang="fr"> <head> <title>titre de la page</title> <meta charset="utf-8"> </head> <body> <p> Contenu de la page </p> <p> un autre paragraphe </p> <p> un <a href="lien.html"> lien </a><em>et un truc</em> </p> </body> </html>

16 Un document html est représenté par un arbre décrivant l'imbrication des éléments html head title ''titre de la page'' body meta p p p ''contenu de la page'' ''un autre paragraphe'' ''un'' a ''lien'' em ''et un truc''

17 Apparence d'un document : le rendu sur le navigateur 1 élément html = 1 boite rectangulaire élement certaines boites acceptent d'être sur la même ligne que leur voisine suivante boites «inline» : a, em, strong Taille : celle du contenu a em D'autres boites refusent d'être sur la même ligne que leur voisine srong h1 boites «block» : p, ul, li, h1, h2, img p Largeur du contenant, hauteur du contenu ul

18 Principe d'affichage Le navigateur parcourt le document de façon linéaire, du début à la fin, et traite les éléments dans l'ordre d'apparition = le flux html Correspond à un parcourt de l'arbre en profondeur d'abord Le navigateur affiche les boites au fur et à mesure qu'il les traite

19 p p body p a em

20 Balises de structuration <header> : pour délimiter l'entête du site <footer> : pour délimiter le pied de page <nav> : pour délimiter une zone de liens de navigation <section> : pour regrouper des contenus sur leur thématique <aside> : informations complémentaires <article> : un article indépendant Affichage BLOCK par défaut, pas de positionnement Utilisées dans <body>

21

22 header nav aside article section article

23 CSS c'est quoi? (un peu plus de détails) Associer à chaque élément d'une page HTML des règles de mise en forme Taille, couleurs, polices, espacements, images, emplacement

24 HTML sans CSS

25 Le même, avec une CSS

26 Toujours le même, avec une autre CSS

27 Les règles CSS Une règle = 1 sélecteur + des propriétés/valeur Sélecteur : sélectionne des éléments dans le document Propriétés : définissent des propriétés d'affichage qui vont s'appliquer aux éléments sélectionnés Exemple : p { color: green ; font-size: 1,5 em } Applique les prop. color et font-size à tous les éléments P

28 { color: green ; font-size: 1,5 em } html head title ''titre de la page'' body meta p p p ''contenu de la page'' ''un autre paragraphe'' ''un'' a ''lien'' em ''et un truc''

29 Résultat p{ color: green ; font-size: 1,5 em } html head title ''titre de la page'' body meta p p p ''contenu de la page'' ''un autre paragraphe'' ''un'' a ''lien'' em ''et un truc''

30 Principe : une règle s'appliquant à un élément de l'arbre s'applique également à ses descendants Principe de proximité : lorsque plusieurs règles héritées peuvent s'appliquer, c'est la plus proche qui s'applique Principe de spécificité : lorsque plusieurs règles sont candidates, c'est la plus spécifique qui est retenue Remarque : les navigateurs appliquent une feuille de style par défaut

31 Les sélecteurs La même règle sur plusieurs éléments : a, em { color: blue } : s'applique aux éléments a et em éléments emboitées p em { color: green } : s'applique aux éléments em à l'intérieur d'un p (dans le sous arbre) Éléments fils et frères p > em { color: green } : s'applique aux éléments em directement descendant d'un p (dans les fils) h3 + p { color: green } : s'applique aux éléments p situés juste après un h3

32 les pseudo-class Extensions sur le sélecteur permettant de spécifier un état particulier de l'élément En particulier sur les liens a:visited : déjà visité a:link : non visité Sur d'autres éléments : E:hover : élément E lorsqu'il est survolé E:first-child, E:last-child : élément E lorsqu'il est premier/dernier fils E:nth-child(an+b) : élément E en position an+b li:nth-child(5n+2) : élément li, 1 sur 5 à partir du 2ème

33 pseudo-éléments Pseudo-éléments : éléments virtuels sur lesquels on peut appliquer des règles p::first-line, p::first-letter : 1ère ligne/lettre d'un paragraphe E::before, E::after : avant/après l'élément E E::before { content: "!@hhh " ; }

34 a {color: maroon ; font-size: 2em; text-decoration: none;} a:visited {color: blue ; } a:hover {color: red ; font-size: 3em; text-decoration: none;} p::first-letter {font-size: xx-large; font-style: oblique} p:last-child {background-color: yellow;} p::after { font-weight: bold; content:"-->"; }

35 combiner les sélecteurs on peut combiner les sélecteurs pour former des expressions complexes : section>article+aside>ul:hover > li:nth-child(4n) "élément li en position 0 mod4 dans les fils d'un ul survolé et fils direct d'un aside successeur d'un article fils direct d'une section"

36 class et id Problème avec un sélecteur basé sur un nom de balise : tous les éléments de même type reçoivent la règle : p { color: blue } : tous les paragraphes utilisent une couleur de police «blue» Pour résoudre le problème : 2 attributs spéciaux L'attribut «class» : <p class= ''introduction''> </p> L'attribut «id» : <section id=''section1''> class et id peuvent se trouver dans toutes les balises Id : 1 seul élément par valeur

37 <body> <p class="c1"> Contenu de la page </p> <p class="c2"> un autre paragraphe </p> <p class="c1"> un <a href="lien.html" class="c2"> lien </a> <em id="id1">et un truc</em></p> </body> Sélectionner les éléments d'une classe.c1 { } : tous les éléments de la classe c1 p.c2 { } : tous les éléments p de la classe c2 Sélectionner avec l'identifiant #id1 { } : l'élément portant l'id ''id1''

38 <div> et <span> Balises «universelles» neutres servant principalement à délimiter une zone à laquelle on affecte une classe ou un id div div : affichage block span : affichage inline div div span span span <body> <div class=''container''> <p class="c1"> Contenu de la page </p> <p class="c2"> un autre paragraphe </p> <p class="c1"> un <a href="lien.html" class="c2"> lien </a> <em id="id1">et un truc</em> <span class=''important''> et un autre truc, mais très important. </span> </p> <div> </body>

39 Définition des règles css Où les mettre? Dans le document html : pas pratique pour les réutiliser dans différents documents <head> <title>titre de la page</title> <meta charset="utf-8"> <style>.c1 {color: green ; font-size: 1.5em }.c2 {color: blue ; font-size: 0.5em } #id1 {color: red ; font-size: 2.5em } </style> </head>

40 Dans un fichier séparé.css Référencé par une url dans le document html <head> <title>titre de la page</title> <meta charset="utf-8"> <link rel=''stylesheet'' href=''bostil.css''> </head> /* * ---- bostil.css : un beau style css */.c1 {color: green ; font-size: 1.5em }.c2 {color: blue ; font-size: 0.5em } #id1 {color: red ; font-size: 2.5em }

41 Les propriétés css Formatage du texte : font-size xx-small, x-small, small, medium, large, x-large, xxlarge En utilisant l'unité «em» : 1em = font-size du parent body : font-size par défaut = 16px Taille relative : recommandée car s'adapte mieux aux préférences des utilisateurs.c1 {color: green ; font-size: 14px }.c2 {color: blue ; font-size: 1.5em }.note {color: black ; font-size: x-small }

42 Formatage du texte : police et style de police font-family : police1, police2,. ; les polices à utiliser, par priorité.c2 }.note Arial ; Arial Black ; Courier New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana. font-style : normal, italic, oblique font-weight : normal, bold text-decoration : underline, overline, line-through text-align : center, justify, right, left { color: blue ; font-size: 1.5em ; font-family: impact, ''arial black'', verdana, sans-serif ; font-style: normal ; font-weight: bold ; text-decoration: underline ; {color: black ; font-size: x-small ; font-style: italic ; text-align: left}

43 couleurs et fonds Indiquer une couleur : En indiquant son nom (140 couleurs) en hexa : # à #FFFFFF White, black, red, yellow, blue, DarkOrange, YellowGreen... En fait 3 fois 2 chiffres pour Rouge Vert Bleu en RGB (Red Green - Blue ) rgb (122, 0, 255)

44 couleur du texte : color couleur du fond : background-color body { background-color : # ; }.c2 { color: blue ; font-size: 1.5em ; background-color: rgb(125, 125, 125) ; opacity: 0.5 }.note { color: black ; font-size: x-small ; background-color: #0202FF }

45 Images de fond : on peut choisir une image pour le fond, la fixer (pas de scroll), la positionner, la répéter en x ou y background-image : url(. ) background-attachment : fixed, scroll background-repeat : repeat-x, repeat-y, no-repeat background-position: Xpx Ypx, top, bottom, left, right, center Utile avec no-repeat utilisations: Découper une image et la répéter plutôt qu'une grosse image Placer une image body { background: url("4_l2.jpg") fixed no-repeat top right; }

46 le modèle des boites 1 élément = 1 boite rectangulaire Inline un petit span un span plus grand un span avec une marge Prend la taille de son contenu, peut avoir une marge Block Occupe la largeur disponible de son conteneur Peut être dimensionné Inline-block : inline dimensionnable Modifiable avec la propriété display p {display: inline} a:visited {display: none} li {display : inline-block } block

47 La structure des boites : + bordure : border + zone du contenu marge interne : padding bordure marge interne : pading margin zone de contenu border-top padding-top height padding-bottom border-bottom border-left padding-left width border-right padding-right

48 Bordures largeur : border-width: 5px couleur : border-color: rgb(200, 143, 125) style : border-style: none, dotted, dashed none : pas de bordure (par défaut) ; solid : un trait simple ; dotted : pointillés ; dashed : tirets ; etc Autres détails Bordures arrondies : border-radius Ombres : box-shadow body { border: 5px maroon groove }

49 padding : marge interne espace entre bord et contenu de la boite padding-left: 5px ; padding-top: 1em; bordure padding-top pading zone de contenu padding-left raccourcis : padding-bottom padding: 5px 6px 7px 8px ; // haut droite bas gauche padding: 8px 0.5em ; // haut-bas droite-gauche padding: 10px ; // haut-bas-droite-gauche

50 la taille des boites width : largeur height : hauteur unités : px, taille fixe : body {width: 960px ; padding-left: 20px;} em, taille fixe : aside { width: 24em;} %, taille relative au conteneur : s'adapte aux changements de taille p {width: 80% ; padding-left : 10%}

51 Attention : si le contenu est trop grand, il déborde Éviter de fixer une hauteur (height) Bonne pratique : utiliser min-width, max-width : p {width: 40% ; min-width:400px} min-height : p {min-height: 200px} Quand ça risque de déborder : overflow : auto, hidden que faire si le texte dépasse word-wrap : break-word que faire avec les grands mots p {width: 80% ; padding-left : 10% ; overflow: hidden}

52 place occupée réellement par une boite dans le flux modèle classique : box-sizing: content-box place occupée : width + padding + border modèle "border-box" box-sizing: border-box place occupée : width padding et border empiètent sur width

53 les marges à l'exterieur de la boite, valable sur les éléments inline et block margin-left, margin-right, margin-top, margin-bottom margin : top I right I bottom I left Valeur : px, %, auto, inherit Utilisation : <p> paragraphe </p> div p {width : 200px ;} <div> <p> paragraphe </p> div p {width : 200px ; margin-left:50px} 50px centrer auto <p> paragraphe </p> <div> div p {width : 200px ; margin : 0 auto 0 auto} auto <div>

54 les marges horizontales s'additionnent : <p> paragraphe </p> div p {width : 200px ; margin-right:50px} 50px 50px <p> paragraphe </p> div p {width : 200px ; margin-left:50px} <div> Les marges verticales fusionnent : <p> paragraphe </p> div p {width : 200px ; margin-bottom:50px} <div> <div> 50px <p> paragraphe </p> div p {width : 200px ; margin-top:10px} 50px <p> paragraphe </p> div p {width : 200px ; margin-top:50px} <div>

55 positionner les éléments Positionnement par défaut : le flux html <body> <header> entête de page </header> <nav> barre de navigation</nav> <section> <h1>titre de la section (section)</h1> <p> Contenu de la page </p> <p> un autre paragraphe </p> <p> un <a href="lien.html"> lien </a> <em>et un truc</em></p> </section> <footer>pied de page</footer> </body>

56 width: 95% ; width: 90% ; min-height: 50px width:90% ; padding:10px 10px 10px 10px width: 90%; min-height: 100px width: 95%;

57 Plus évolué : utiliser inline-block Par exemple : placer la barre de navigation sous forme d'un menu à gauche Placer les paragraphes sous forme de 3 colonnes Une solution possible : leur donner la propriété display : inline-block affichage inline + dimensionnement

58 nav { display: inline-block; width: 15% ; min-height: 250px ; vertical-align:top; } section { display: inline-block; min-width:400px;max-width:78% ; vertical-align:top; } p{ display: inline-block; width: 30%; vertical-align:top; }

59 positionnement flottant Principe : un block «flottant» sort du flux et vient buter à gauche (à droite) et laisse le flux se dérouler autour de lui au lieu de se placer en dessous Utilisation première : placer une image et faire couler le texte autour <img id="img-float" alt="ma belle 4L" src="4_l2.jpg"> <p> Lorem ipsum dolor. at dignissim ante. </p> <p> Nam euismod tempor dignissim.... faucibus, pharetra at mi. </p>

60 Le flux classique img#img-float { float: left; margin-right: 5px }

61 Autre utilisation : positionner des block flottants pour faire de la mise en page Très utilisé, mais délicat d'emploi float : left, right clear : left, right, both : indique un côté libre Attention aux tailles : un block est dimensionné par rapport à son contenant la taille du conteneur est calculée sans tenir compte des flottants (car hors flux)

62 nav { float:left; width: 15% ; min-height: 200px; } p{ float:left; width: 27%; min-height: 150px; } 15 % 27 % 100 %

63 frameworks un framework css : css toute prête offrant des fonctionnalités positionnement sur une grille typographie et rendus prédéfinis templates Les frameworks du moment : bootstrap : foundation : Html5 boilerplate :

64 Accessibilité des interfaces web Accessibilité : rendre l'interface accessible à tous les utilisateurs Quelque soit le terminal utilisé : ordinateur de bureau, portable, tablette, smartphone «responsive design» Quelque soit l'utilisateur et son éventuel handicap Utilisateurs aveugles utilisant une interface braille/audio Utilisateurs mal-voyants : distinction des couleurs / grossissement Utilisateurs handicapés moteurs, notamment des membres supérieurs, ou ayant des difficultés à manier une souris

65 objectif Faire en sorte que l'interface soit la plus efficiente et la plus simple d'usage possible dans toutes les situations

66 référentiels et normes WCAG 2.0 (Web Content Accessibility Guidelines) AccessiWeb : élaboré par BrailleNet Référentiel produit par le W3C, standard international Méthode d'application et de vérification de WCAG 2.0 RGAA (Référentiel Général d'accessibilité des Administrations)

67 Quelques principes pratiques Personnes aveugles : accès au texte uniquement Braille ou oralisation, uniquement html Pas d'information dans la CSS Personnes mal-voyantes : grossissement ou pb couleur Concevoir la css pour permettre l'adaptation et l'utilisation Pas d'information perceptible uniquement au travers de la couleur («appuyer sur le bouton bleu») Handicap moteur : problèmes avec la navigation Naviguer sans souris Simplifier la navigation, éviter les barre de défilement

68 structure générale Ordre du flux html = ordre de lecture Identifier les principales zones ou région avec l'attribut ARIA «role» Utiliser une hiérarchie de titres logique et exhaustive <nav role= ''navigation''> <h1> à <h6> Structurer les menus de navigation avec des listes <ul> <li> Html valide et n'utilisant pas d'attributs de mise en page

69 métadonnées Renseigner un <title> précis sur chaque page Veiller au bon codage des caractères et préciser un charset Préciser la langue du document <html lang=''en''> Éviter l'utilisation de plusieurs langues dans la même page

70 Images et liens Images informatives : dans le code html EXCLUSIVEMENT Images décoratives Attribut alt vide : alt= '''' Privilégier leur utilisation dans la css Utiliser des intitulés de liens/boutons explicites Attribut ALT renseigné avec une information équivalente à celle fournie par l'image Éviter ''OK'', ''retour'' etc préférer ''valider l'inscription'', ''revenir au sommaire'' etc Les liens noyés dans le texte doivent se distinguer par autre chose que la couleur (bold, underline..)

71 mise en forme des textes Utiliser les css pour la mise en forme Utiliser des tailles relatives (em, %, small) pour les polices Contenus lisibles avec une taille doublée Contenus lisibles lorsque les images ne sont pas affichés Css non chargée, image html remplacée par alt

72 navigation Ordre de tabulation = ordre logique de lecture Mettre en place des liens d'évitement Dans les méta-données Dans le corps <link rel=''accueil'' title=''retourner à l'accueil'' href= '' ''> Lien systématique vers le contenu principal placé comme 1er élément interactif (caché avec la css) <a id=''evitement'' href=''#contenu''>aller au contenu</a> Garantir la visibilité de la prise de focus :hover + :focus

73 Quelques outils utiles Lynx : navigateur pur texte Vischeck : pour simuler les handicaps liés à la couleur

74 Pour finir Nombreux points non abordés : formulaires : plus tard html5 : audio, video, canvas, geolocalisation, drag&drop, web storage, web socket Css3 : media-query et web mobile, transformations, transition-animation dom, javascript, JQuery