html css}}
====== Créez des formulaires ======
Notes et transcriptions du cours [[https://openclassro... t comportait également du code en backend(confère note ci-dessous), c'est là qu'on indiquerait une URL q... d'inspecter ce qu'on obtient, assez simplement.
<note>
En règle générale, un site internet est composé ... des informations dans une base de données, etc.
</note>
Voyons maintenant quelle balise HTML utiliser p
}}
====== Découvrez le modèle des boîtes ======
Notes et transcriptions du cours [[https://openclassro... oirement à l'intérieur d'une balise ''block''.
<note>
Il existe en fait plusieurs autres catégories tr... r le moment, car ces balises sont minoritaires.
</note>
Pour bien visualiser le concept, voici un petit... La balise ''<div>''(qui est de type **block**).
<note>
N’abusez pas des balises universelles, même si e
====== Créez des apparences dynamiques ======
Notes et transcriptions du cours [[https://openclassro... ée ; et tout cela grâce aux **pseudo-classes**.
<note>
Les [[https://developer.mozilla.org/fr/docs/Web/... oment un style en particulier doit s'appliquer.
</note>
===== Stylisez un élément au survol de la souri... sur le lien, la couleur de fond du lien change.
<note>
Vous remarquerez d'ailleurs que le navigateur ap
ss}}
====== Changez l'apparence du texte ======
Notes et transcriptions du cours [[https://openclassro... ;
* Impact ;
* Trebuchet MS ;
* Verdana.
<note>
Le ''sérif'' désigne l’empattement situé à l’ext... d’accessibilité, car c’est plus facile à lire.
</note>
{{texte_serif_vs_sans_serif.jpg|différences car... CSS pour associer cette police à vos balises.
<note>
Ici, on s'est contenté de suivre les étapes préc
====== Ajoutez de la couleur et un fond ======
Notes et transcriptions du cours [[https://openclassro... lais). Exemple : ''%%color: rgb(250,25,118);%%''. Notez qu'on peut ajouter la notion d'opacité (ou de tr... pacité : ''%%color: rgba(250,25,118, 0.5);%%''
<note>
Si vous voulez trouver une couleur, ou bien conv... m/colors/colors_picker.asp|HTML Color Picker]].
</note>
===== Appliquez une couleur d'arrière-plan avec
html css}}
====== Structurez votre page ======
Notes et transcriptions du cours [[https://openclassro... n, un lien de connexion à son espace personnel.
<note>
Attention, la balise ''<header>'' n'a rien à vo... rs des polices, vers une feuille de style, etc.
</note>
Il peut y avoir plusieurs en-têtes dans votre p... complémentaires à l'article que l'on visualise.
<note>
La balise ''<article>'' sert à englober une port
== Faites votre mise en page avec Flexbox ======
Notes et transcriptions du cours [[https://openclassro... ement d'un carton (euh pardon, d'un conteneur).
<note>
Un conteneur (container en anglais) est une bali... élèbres sont les balises %%<div> et <span>%%.
</note>
<code html>
<div class="container">
<div class=... les-ci seront réparties avec ''align-content''.
<note>
Cette propriété n'a aucun effet s'il n'y a qu'un
====== Découvrez les bases de CSS Grids ======
Notes et transcriptions du cours [[https://openclassro... riétés liées à ''grid-column'' et ''grid-row''.
<note>
C'est surtout dans ce genre de cas qu'on voit qu... lors qu'ici, on peut le faire assez simplement.
</note>
À chaque fois que vous écrivez ''display: grid'... e css>
.une {
grid-column: 1 / 4;
}
</code>
<note>
Attendez, mais pourquoi on dit d'aller jusqu'à
ordez d'autres techniques de mise en page ======
Notes et transcriptions du cours [[https://openclassro... type ''block'' par défaut devienne ''inline''.
<note>
Si vous ne vous souvenez plus de la différence e... le_des_boites|Découvrez le modèle des boîtes]].
</note>
===== Cachez vos éléments avec display: none; ... se positionner en haut à gauche de l'élément 2.
<note>
La propriété [[https://developer.mozilla.org/fr/
b html css}}
====== Ajoutez des tableaux ======
Notes et transcriptions du cours [[https://openclassro... endre l'en-tête plus lisible, elle est en gras.
<note>
Comme vous pouvez le constater, le navigateur a ... ffit d'utiliser le sélecteur th dans le CSS !
</note>
===== Donnez un titre au tableau avec la balise... ellules répétitives. Idem pour le film Luck Luk
Notez qu'on peut modifier l'alignement vertical du tex
responsive design avec les Media Queries ======
Notes et transcriptions du cours [[https://openclassro... taille est inférieure ou égale à 1 200 pixels.
<note>
Attention, afin que les Media Queries soient pri... width=device-width, initial-scale=1.0">
</code>
</note>
Ici on demande a ce que le "viewport" du naviga
