Option informatique
HTML/CSS
Page en construction.
Les ressources sont issues de la formation créée par V.Pantaloni, N. Bertran et R.Casati.
Deux balises pour commencer : <head> et <body>
La balise <body> :
Elle enveloppe tout le contenu visible de la page web : le texte, les images, les liens, ... Elle englobe toutes les autres balises qui vont permettre d'organiser et de structurer la page web
La balise <head> :
Elle est utilisée pour fournir des métadonnées et des informations importantes sur la page web bien qu'une grande partie de ces informations ne soient pas visibles pour l'utilisateur. Elle intègre notament :
- Les métadonnées <meta> : par exemple l'encodage des caractère `charset`, la compatibilité du navigateur `http-equiv`, l'adaptabilité aux différents appareils `viewport`
- Les feuilles de style <link rel="stylesheet"> : utilisée pour lier une feuille de style au document html
- Le titre de la page <title> : utilisée pour spécifier le titre qui sera affiché dans l'onglet du navigateur
- L'icône de l'onglet < link rel="icon"> : utilisée pour spécifier l'icône qui sera affichée dans l'onglet du navigateur
|
Dans les vidéos ci-dessus, quelques balises html ont été présentées. Néanmoins, il en existe bien plus.
Voici une liste non exhaustive de balises avec une description succincte :
Activité 1
Vous allez maintenant pouvoir tester ces balises dans l'exercice suivant.
Connectez vous à l'ENT, ouvrez
Capytale puis cliquez sur l'image ou tapez le code de connexion : fc5b-3804490
Dans l'exercice précédent, nous avons vu que de nombreuses balises n'amènent aucun changement d'affichage. Dès lors, nous pourrions penser qu'utiliser toutes les balises proposées est une perte de temps. Autant n'utiliser que des balises <div> ! Pourtant utiliser les balises dédiées a une importance capitale (ou Capytale 🙂 ) :
- Référencement : Les moteurs de recherche accordent de l'importance à la structure sémantique des pages web. L'utilisation de balises appropriées peut aider les moteurs de recherche à "comprendre" le contenu de la page et à améliorer le classement dans les résultats de recherche.
- Clarté du code : Utiliser des balises sémantiques rend le code HTML plus clair et plus facile à comprendre. Cela facilite également la maintenance du code à long terme ainsi que la collaboration
- Accessibilité : Les balises sémantiques sont importantes pour améliorer l'accessibilité des pages web pour les personnes malvoyantes,...
De même, il ne faut pas croire que les balises <h> permettent d'augmenter la taille du texte, tout comme la balise <strong> ne permet pas de mettre du texte en gras. Elles permettent de mettre en évidence des parties de la page qui sont plus importantes (titres, mots-clés,...). le changement de la police ou du style du texte n'est qu'une conséquence, aisément modifiable avec l'ajout de css.
On peut voir une page web comme un empilement de boîte. Chaque balise est représentée par une boîte :
Cette représentation hiérarchique et structurée est appelée DOM (Document Object Model). Il est souvent représenté sous forme d'arbre (l'arbre ci-dessous, reprend la structure en boîte vue précédemment. Lorsqu'un navigateur charge une page web, il analyse le code html et construit alors cette structure d'objets en forme d'arbre où chaque élément html est représenté par un nœud dans cet arbre. La manipulation du DOM par le Javascript permet de rendre dynamique la page web.
Pour plus de rigueur, commençons par un peu de vocabulaire pour distinguer "règle", "sélecteur", "bloc" et "déclaration" :
Les sélecteurs :
Les sélecteurs permettent de cibler précisément une partie du DOM pour la mettre en forme.
Par exemple :
- le sélecteur p ciblera toutes les balises p
- la combinaison de sélecteurs p, ul ciblera toutes les balises p et toutes les balises ul
- la combinaison de sélecteurs p ul ciblera toutes les balises ul dont un des parents est une balise p
- la combinaison de sélecteurs p > ul ciblera toutes les balises ul dont un parent direct est une balise p
Dans certains cas, les sélecteurs ci-dessus ne permettent pas de cibler précisemment un élément unique ou un ensemble d'éléments de la page web. Dans ce cas, on peut identifier cet ou ces
élements dans le code html en rajoutant un "id" ou une "class" à l'intérieur de la ou des balises qui nous intéressent.
Dans ce cas, un utilisera :
- le sélecteur #nomdel'id pour cibler l'élément qui porte cet id
- le sélecteur .nomdelaclass pour cibler tous les éléments qui portent cette classe
Remarque : Il existe une différence entre id et class.
Un id représente un élément unique. Il ne peut donc pas y avoir plusieurs id identiques dans un code html.
Une class représente elle un ensemble d'éléments, il peut donc y avoir plusieurs class identiques dans un code html.
Activité 2
Utilisons les sélecteurs dans l'exercice suivant.
Connectez vous à l'ENT, ouvrez
Capytale puis cliquez sur l'image ou tapez le code de connexion : 43d4-3804553
Vous pouvez vous aider de l'arbre ci-dessous qui représente la structure de la page de l'exercice Capytale (les couleurs seront utilisées par la suite.
Il existe plusieurs façons de référer à une couleur, le plus parlant est le nom de la couleur. Les différentes couleurs sont référencées ici :
Il existe plus de 300 propriétés CSS différentes et un nombre encore plus important de valeurs. Elles peuvent être retrouvées ici :
Affichage des éléments html dans un navigateur
Dans un navigateur, les éléments se succèdent dans l’ordre où ils sont déclarés. De plus, les éléments de type bloc (h1, header, nav, article, section,
footer,…) s’affichent les uns en dessous des autres en occupant par défaut la totalité de la largeur de son conteneur (le bloc parent). La hauteur sera déterminée par ce qu’ils
contiennent.
Pour que les éléments de type bloc s'affichent les uns à côté des autres, il faut utiliser la déclaration css display :
flex sur le parent direct des éléments dont on veut changer l'affichage.
Dans certains cas, on veut des éléments enfants du même parent à la fois en dessous et à côté les uns des autres. Il faut alors entourer certains éléments d'un nouveau bloc. Puisque ce bloc n'a pas de signification particulière, on utilisera la balise <div>.
Reprenons l'arbre de recherche précédent :
L'affichage (à peine amélioré ) donne :
Si on s'intéresse aux blocs h1 et "h3" contenus dans l'en-tête, on s'aperçoit que leur affichage est naturel : ils se placent l'un en dessous de l'autre en occupant toute la place disponible. Si on souhaite que ces deux blocs se positionnent l'un à côté de l'autre, il faut alors cibler leur parent direct (ici header) et déclarer dans le css :
header{
display : flex ;
}
L'affichage devient alors :
Si on souhaite que les deux premiers éléments de liste du bloc nav s'affichent l'un à côté de l'autre, c'est plus complexe. En effet, le parent direct est ul. Or, en déclarant display : flex dans
le css avec le sélecteur ul, nous alons appliquer cette propriété à TOUS les éléments de liste.
Deux solutions dans ce cas :
- Créer artificiellement un parent direct aux deux seuls éléments de liste qui nous intéressent, en créant un bloc div par exemple (plus simple)
- Maîtriser davantage les propriétés flex (plus compliqué mais abordé dans la suite)
Activité 3
Utilisons ceci dans l'exercice suivant :
Connectez vous à l'ENT, ouvrez
Capytale puis cliquez sur l'image ou tapez le code de connexion : 8ed6-3804574
Un schéma pour résumer les propriétés flex.
Le schéma ci-dessus peut laisser croire (comme les indications dans le jeu flexbox froggy) que justify-content agit sur l'alignement horizontal et align-items
sur la verticale. Ce n'est pas tout à fait le cas.
En fait, justify-content agit sur l'axe principal que l'on peut définir avec flex-direction, et align-items agit sur l'axe secondaire.
Néanmoins, si la propriété flex-direction n'est pas utilisée, l'axe principal est bien l'axe horizontal (orienté de la gauche vers la droite).
Découvrir la déclaration display : grid;
En anglais, grid signifie "grille". Comme pour flexbox, nous allons voir notre page comme une boîte mais cette fois-ci organisée selon une grille, en lignes et colonnes. Imaginons le code html suivant dans lequel nous créons 8 div dans un article.
L'affichage est alors le suivant (avec un peu de mise en forme pour les div).
Définissons maintenant notre grille. Naturellement nous allons la définir en indiquant le nombre et la taille de nos colonnes et de nos lignes. Pour ce faire nous utilisons la propriété grid-template-columns en indiquant comme valeur la taille de chacune des colonnes. Dans notre exemple nous définissons deux colonnes de tailles égales.
Nous pouvons ensuite faire de même avec la propriété grid-template-rows pour définir la taille des lignes. Nous pouvons également rajouter un peu d'espace entre chaque élément avec la propriété gap
Bien évidemment il est possible de définir des tailles différentes pour les lignes ou les colonnes. Dans l’exemple ci-dessous la troisième ligne est deux fois plus haute que les autres.
Le css est renseigné ci-contre :
Détaillons-le point par point
- display : grid; permet de créer une grille
- grid-template-columns : 1fr 1fr; permet de définir deux colonnes de taille 1fr chacune
-
grid-template-rows : 15vh 15vh 30vh 15vh; définit les hauteurs des lignes (ligne 1 : 15vh, ligne 2 : 15vh, ligne 3: 30vh et ligne 4 : 15vh) ;
- gap : 1vw; permet de séparer chaque boîte de la grille de 1vw.
Dans l'exemple ci-dessus nous utilisons différentes unités. Nous avions déjà vu px qui signifie pixel.
vw et vh correspondent à une fraction de largeur et une fraction de hauteur :
- vw correspond à 1/100e de la largeur de la fenêtre
- vh correspond à 1/100e de la hauteur de la fenêtre
Ces deux unités sont très utiles car elles permettent de créer des contenus qui s'adaptent à la taille de la fenêtre ou de l'écran de l'utilisateur.
Enfin fr est une unité spécifique à grid. Elle représente une part de largeur dans la colonne. Elle est surtout intéressante lorsqu'on utilise la propriété gap. En effet si on
avait définit chaque largeur de colonne à 50vw avec un gap, la deuxième colonne "dépasserait" de l'écran. L'utilisation de fr permet un affichage "plus propre".
Nous pouvons aller bien plus loin avec grid en définissant la taille de chaque élément.
Intéressons nous à l'affichage suivant obtenu uniquement avec grid (le html est identique à l'exemple précédent).
Le css est donné ci-contre :
On s'aperçoit qu'on a uniquement rajouté les propriétés grid-column ou grid-row dans chaque élément dont on veut modifier la taille. grid-column : 1/4; signifie que l'élément en question débutera à la colonne 1 et se terminera au début de la colonne 4 (ou fin de la colonne 3) grid-row : 2/5; signifie que l'élément en question débutera à la ligne 2 et se terminera au début de la ligne 5 (ou fin de la ligne 4).
On peut remplacer la propriété grid-column par les propriétés grid-column-start et grid-column-end
La déclaration
grid-column : 1/4;
devient alors
grid-column-start : 1;
grid-column-end:4;
De même pour la propriété grid-row
Activité 4
Utilisons ceci dans l'exercice suivant :
Connectez vous à l'ENT, ouvrez
Capytale puis cliquez sur l'image ou tapez le code de connexion : 97c6-3804587
Pour apprendre plus de règles grid, entrainez-vous sur le jeu suivant (si vous souhaitez y jouer il est nécessaire de se créer un compte) :