Interaction ++Humain++ - Machine sur le Web 2

# Interaction ++Humain++ - Machine sur le Web 2 --- ## Rappels de la séance précédente ---- ### La première balise :::danger Quelle est la première instruction de toute page **HTML** ? `<!DOCTYPE html>`  ::: ---- ### Class ou Id ? :::danger Dans le code *incomplet* suivant: ```html <img id="photo_entete" src="../image.png" alt="..."/> ``` L'attribut `id` permet de: - identifier de manière unique l'image dans le document  - dire à l'utilisateur que cette image représente une tête - inutile, sauf pour faire croire qu'on a compris. ::: ---- ### Syntaxe de lien :::danger Comment compléter le code suivant pour obtenir le lien ci dessous: ```html <... ...="https://site.ext/page"> Mon lien </...> ``` [Mon lien](https://site.ext/page) ```html <a href="https://site.ext/page"> Mon lien </a> ```  ::: --- ## Le CSS Inventé le **17 décembre 1996** et présent dès le premier navigateur, le **CSS** accompagne le **HTML** depuis le début. Il permet de **définir l’apparence et la disposition des éléments HTML**. ---- ### Où définir le style ? Pour respecter le principe de séparation, les définitions de **style CSS** sont regroupées dans un fichier texte d’extension .css qui est relié au fichier source HTML par une **balise link** placée dans **l’entête du document**. On parle souvent de **feuille de style CSS**. ```html <!doctype html> <html> <head> ... <link href="mon_style.css" rel="stylesheet" type="text/css" /> </head> ``` ---- On peut aussi le définir dans une **balise** `<style> </style>` dans **l'entête du fichier HTML**. ```html <!doctype html> <html> <head> ... <style> ... </style> </head> ``` ---- Ou bien directement dans **l'attribut style** de la balise voulue. ```html <balise style="..."> ... </balise> ``` --- ### Comment définir le style ? :::info On se place ici dans le cas de la balise `<style>` ou d'un fichier **séparé** inclut dans l'entête. ::: Le CSS permet **d'appliquer un ensemble de propriétés à un ensemble d'éléments html**. ---- On utilise la syntaxe suivante: ```css sélecteur ... { propriété: valeur ; propriété autre: valeur; } ``` ---- #### Les sélecteurs Voir <https://www.w3schools.com/Css/css_combinators.asp> | Syntaxe | Sélection | Exemple | |:--------- | ----------------------------------------------------- | ------- | | ma_balise | Toutes les balises `ma_balise` | p | | p,a,img | Chaque balise du type `p`, `a` ou `img` | | | a b | Toutes les balises `b` présentent dans une balise `a` | p a | | a.b | Toutes les balises `a` avec `class="b"` | p.intro | ---- ##### Sélecteurs spéciaux | Syntaxe | Sélection | Exemple | |:------- | --------------------------------------- | -------- | | * | Toutes les balises | * | | #text | **La** balise d'attribut `id=text` | #premier | | .text | **Les** balises d'attribut `class=text` | .rouge | ---- #### Les propriétés Elles sont toujours sous la forme: `propriété: valeur ;`. ##### Exemples ```css color: red ; /*Mettre le texte en rouge */ background-color: #FF0000 ; /* Fond de la balise en rouge (hexadécimal RGB) */ border: 4px solid black ; /* une bordure de 4 pixels de large, pleine et noire */ ``` --- ## À vous de jouer ! :::info Si vous avez fait votre page web **copiez là dans le champ HTML**. L'activité **capytale** vous permet de directement modifier le CSS d'une balise `<style>`. ::: * Le TP Capytale : **93b8-1282198** * Les consignes : <https://apd.li/css> --- ## Les *devoirs* ### Demain Faire *un nouvel exercice de france-ioi* (Celles et ceux qui ne les font pas prennent du retard **difficilement rattrapable en python**). ---- ### Fin de semaine prochaine Ajouter du CSS (dans un fichier séparé) pour que votre page ressemble à ce que nous avons décrit en cours. :::warning * La frise chronologique est **très** complexe à faire. * La disposition horizontale **peut utiliser le modèle flexbox** mais n'est pas obligée. :::