#+TITLE: Programmation Web #+AUTHOR: Aline Gérard #+EMAIL: agerard@unistra.fr #+DATE: 2018-08-28 Tue #+DESCRIPTION: Première approche HTML,CSS et Javascript #+KEYWORDS: html, css, javascript, bonnes pratiques #+LANGUAGE: fr #+OPTIONS: H:2 toc:t num:t #+OPTIONS: timestamp:t #+INFOJS_OPT: view:nil toc:nil ltoc:t mouse:underline buttons:0 path:https://orgmode.org/org-info.js #+LATEX_CLASS: beamer #+LATEX_CLASS_OPTIONS: [presentation] #+BEAMER_THEME: metropolis [block=fill] #+Columns: %45ITEM %10BEAMER_ENV(Env) %10BEAMER_ACT(Act) %4BEAMER_COL(Col) %8BEAMER_OPT(Opt) #+LATEX_HEADER: \setbeamertemplate{section in toc}[sections numbered] * CSS Donner du style ** Principes de bases #+LATEX: \setbeamercovered{transparent=30} #+ATTR_BEAMER: :overlay <+-> - Le CSS permet d'habiller un site web - On définit des régles d'affichage dans un fichier spécifique - Les régles sont associées aux éléments HTML ** Définition #+LATEX: \setbeamercovered{transparent=30} #+ATTR_BEAMER: :overlay <+-> - Défini dans un fichier séparé avec pour extension *.css* - Un même fichier pourra être utilisé dans plusieurs fichiers html - Plusieurs fichiers CSS peuvent être utilisés - Défini dans le fichier Html dans le conteneur ** via la balise suivante : #+begin_src HTML :eval no #+end_src ** Syntaxe *** la syntaxe est composée de 3 éléments : - le sélecteur :: élément sur lequel on applique les propriétés (balise HTML, id, classe, etc.) - la propriété :: est l’effet sur lequel on veut jouer (ex couleur de texte, positionnement, couleur de fond, etc.) - la valeur :: de la propriété CSS (rouge, 10px, etc.) *** syntaxe de base : selecteur { propriete: valeur; propriete: valeur; ... } ** Les commentaires #+begin_src CSS :eval no /* Commentaires très utiles */ /* Les fichiers CSS deviennent vites volumineux, mettre des commentaires utiles est souvent nécessaire. */ #+end_src ** Règles d'écritures (1/2) *** Appliquer un style à une balise balise { propriété: valeur; } p { color: red; } *** Appliquer à une classe .class { propriété: valeur; } ** Règles d'écritures (2/2) *** Appliquer à un id #id { propriété: valeur; } *** Appliquer à une classe relative à un élément balise.class { propriété: valeur; } ** Sélection (1/2) #+begin_src HTML :eval no

Hello World!

#+end_src #+begin_src CSS :eval no /* tout les éléments paragraphe */ p { } /* tout les élemnts avec une classe exemple */ .exemple { } /* tout les paragraphes ayant une class exemple */ p.exemple { } #+end_src ** Sélection (1/2) #+begin_src HTML :eval no

Hello World!

/* l'unique élément avec l'id firstMenu ul#firstMenu est inutile sur cette page mais peut être utile si le css implique plusieurs pages */ #firstMenu { } #+end_src ** Hiérarchie *** Cascade, élément a contenu dans élément nav nav a { color: red; } *** Même propriété pour tout les éléments (ici h1 et h2) h1, h2 { color: blue; } ** Priorités des prises en compte *** la dernière déclaration est celle qui est prise en compte *** id -> class -> balise L'id est prioritaire sur la classe qui est prioritaire sur la balise *** Exemple #+begin_src HTML :eval no

Introduction au CSS

#introduction { color: red; } .message { color: green; } p { color: blue; } #+end_src ** Résumé | CSS | HTML ciblé | |-----------------+--------------------------------------------| | p { } |

...

| | .maClasse { } |
...
| | #minId { } |
...
| | p.maClasse { } |

...

| | p .maClasse { } |

...

| | p, div { } |

...

...
| ** Pseudo-class (1/3) *** Définition - liée à l'état ou la position d'un élément - ** Pseudo-class (2/3) *** État d'un lien #+begin_src CSS :eval no /* lien non visité */ a:link { color: #FF0000; } /* lien visité */ a:visited { color: #00FF00; } #+end_src #+begin_src CSS :eval no /* lors du survole avec la souris */ a:hover { color: #FF00FF; } /* lors du clic sur le lien */ a:active { color: #0000FF; } #+end_src ** Pseudo-class (4/3) *** n-iéme élément #+begin_src CSS :eval no /* premier élément */ p:first-child { ... } /* tout les éléments paires */ p:nth-child(2n) { ... } #+end_src * CSS : les couleurs ** Notations *** Plusieurs notations ( exemple avec le blanc ) : | *hexadécimale* | #ffffff | | *hexadécimale* | notation courte doublée pour obtenir | | | la version longue : #fff | | *RGB* | rgb(255,255,255) | | *RGBA* | notion de transparence : rgba(255,255,255,1) | | *mot clé* | white | | | | ** Propriétés utilisant des couleurs *** Notamment utilisé avec les propriétés - color - backgroud, background-color - border * CSS : unité de taille ** Utilisation Utilisées pour les propriétés telles que : - font-size :: taille du texte - margin :: marge entre deux éléments - padding :: espace entre le contenu et sa bordure ** Les unités courantes - px :: pixels, unité fixe - pt :: point - cm, mm :: centimètre, millimètre - % :: pourcentage, unité fluide - em :: cadratin, unité fluide - rem :: root em, - vh, vw :: viewport units ** Le pixel : px - unité fixe, historique et "rassurante" - produite par les logiciels graphiques - taille figée = source de problèmes d'accessibilités - essentielle pour les éléments tels que les images, les vidéos ** Le cadratin : em - unité fluide - taille relative à la taille de police du parent direct - se répercute aux enfants et enfants des enfants (cascade) - varie en fonction de la taille de police de l'utilisateur ** Le cadratin : em, exemple #+begin_src HTML :eval no
article { font-size: 20px; } aside { font-size: 1.5em; } div, p { font-size: 2em; } #+end_src ** Le pourcentage : % - unité fluide - taille relative à la taille de police du parent - se répercute aux enfants, et enfants des enfants (cascade) - varie en fonction de la taille de police de l'utilisateur - varie en fonction de la taille de la fenêtre du navigateur (viewport) ** Le pourcentage : %, exemple #+begin_src CSS :eval no
article { border: 2px solid black; width: 80%; } div { border: 2px solid red; width: 50%; } p { border: 2px solid green; width: 50%; } #+end_src ** Le pourcentage : %, donner la largeur de l'élément A file:./img/largeurBoiteA.png ** Le root em : rem - unité fluide - taille relative à la taille de l'élément racine ** - aucune répercution sur les enfants - varie en fonction de la taille de police de l'utilisateur ** em, exemple, donne la taille de la police des éléments A file:./img/policeA.png ** rem, exemple, donne la taille de la police de l'élément A file:./img/policeArem.png ** Unité viewport : vw, vh - unité fluide - viewport = fenêtre du navigateur - 100vh :: hauteur du viewport - 100vw :: largeur du viewport ** Viewport: exemple file:./img/largeurBoiteviewport.png * CSS : gestion des marges ** Occupation de l'espace - 2 types d'occupation : *bloc* ou *en ligne* - par défaut les éléments de type *block* prennent toute la largeur de leur parent, et sont suivis d’un retour à la ligne - ex: body, html, p, div, h1 - les éléments de type *inline* prennent la largeur de leur contenu, et ne sont pas suivis d’un retour à la ligne - ex: span, a, strong, img ** Largeur et hauteur d'un élément : width et height - *width* (largeur) et *height* (hauteur) sont applicables uniquement sur des éléments de *bloc* *** valeurs possibles - auto :: par défaut, toute la taille du parent - valeur numérique en px, % , em :: ex : body{ width: 800px;} ** Largeur et hauteur avec max en min *** on peut utiliser max et min pour déterminer des tailles maximums et minimums - min-width - min-height - max-width - max-height *** permet notamment de gérer un débordement d’image : - img { max-width: 100%; } - les images sont limitées à la taille de leur parent ** Gestion des marges Différentes marges - margin :: marge extérieure - padding :: marge intérieure - border :: cadre entre la mage extérieure et intérieure ** CSS BOX file:./img/css_box.png ** Définition des marges *** définition globale - margin : 5px; :: applique une marge de 5px aux 4 coins - margin : 0 5px; :: applique une marge de 0 en haut et bas et 5px sur les côtés - margin : 1px 2px 3px 4px; :: définition des 4 marges dans l'ordre suivant : haut, droite, bas, gauche *** définition individuelle : - margin-top : 5px; - margin-bottom : 5px; - margin-right : 5px; - margin-left : 5px; ** Utilisation des marges *** Centrer horizontalement - center un élément de type *block* #+begin_src CSS :eval no body { /* donner une largeur avec width */ width: 800px; /* marge automatique sur les côtés */ margin 5px auto; } #+end_src ** Occupation de l'espace - le padding se défini sous les mêmes formes que margin - un élément occupe l'espace de sa largeur + son padding + sa bordure - on utilisera *box-sizing : border-box;* pour la bordure et le padding soient calculés à l'intérieur de l'élément ** CSS Reset - supprime les spécificités des navigateurs - à placer avant toute définition de style - Reset CSS * CSS : Typographie ** Déclaration *** police(s) à utiliser *font-family: Helvetica, Arial, sans-serif;* - indique l'ordre dans lequel les polices sont recherchées - recherche si la police est présente sur l'ordinateur de l'utilisateur - en dernier on précise une famille "générique" ** Fonts - défini dans l'élément body pour tout le document - 6 familles génériques: - serif - sans-serif - monospace - cursive - fantasy - system-ui ** Les polices courantes sur le Web | Police | Type | Desc. | |-----------+------------+--------------------------------------| | Arial | sans-serif | équivalente Helevetica | | Trebuchet | MS | serif moins répandue sur les mobiles | | Courier | New | monospace équivalente Courier | ** Importer une font | Formats | Définition | Desc. | |---------+-----------------------+---------------------------------| | .ttf | TrueTypeFont | le plus répandu,non compressé | | .eot | EmbedOpenType | spécifique IE | | .woff | WebOpenFormatFont | format compressé adapté au web | | .svg | ScalableVectorGraphic | format libre du W3C | #+begin_src CSS :eval no @font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } #+end_src ** Jouer sur la taille *** Taille de police - font-size :: permet de définir la taille de la police (hauteur) - unité px, em, % *** Interlignage - line-height :: - unité px, em % ou sans unité ** Mise en valeur - font-weight : bold; :: mise en gras - font-style : italic; :: italique - text-align :: left, right, center, justify * CSS : exemple en 4 minutes ** Démonstration - https://jgthms.com/web-design-in-4-minutes/ * CSS : mise en page ** Flexbox http://jonibologna.com/content/images/flexboxsheet.pdf file:./flexbox/flextest01.html ** Grid layout - positionnement en grille - découpage en ligne et colonne de la page - déclaration via la déclaration *display: grid* dans le conteneur principal ** les propriétés (1/2) - grid, inline-grid :: déclaration d'un contexte de grille (création d'un "grid-container") - grid-template-areas :: déclaration d'un "canevas" de cellules nommées (optionnel) - grid-template-rows, grid-template-columns :: déclaration des dimensions de lignes et colonnes ** les propriétés (2/2) - grid-row, grid-column :: placement d'un élément "grid-item" dans une ligne ou une colonne - grid-gap, grid-column-gap, grid-row-gap :: espaces inter-colonnes ou inter-rangées (gouttières) - align-items, justify-items :: alignement horizontal ou vertical - align-self, justify-self :: alignement horizontal ou vertical d'éléments distincts ** Affichage de deux blocs sur une ligne #+begin_src CSS :eval no
section
body { display: grid; grid-template-columns: 200px 400px; } nav { grid-column: 1; /* placement en colonne 1 */ } section { grid-column: 2; /* placement en colonne 2 */ } #+end_src ** Grille de 4 emplacements #+begin_src CSS :eval no
section
article
body { display: grid; grid-template-columns: 250px 400px; grid-template-rows: 100px 300px; } nav { grid-column: 1; grid-row: 1; } section { grid-column: 2; grid-row: 1; } article { grid-column: 1; grid-row: 2; } aside { grid-column: 2; grid-row: 2; } #+end_src ** [[https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/D%25C3%25A9finir_des_zones_sur_une_grille][Template]] #+begin_src CSS :eval no #inGrid { display: grid; grid-template-areas: "h h" "n c" "f f"; } nav { /* placement de