transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
Le CSS nous permet aussi de mo... ointer la souris dessus, on doit écrire notre CSS comme ceci :
<code css>
a:hover {
// Insérer ici les... ous le chapitre "Créez un lien hypertexte", c'est comme ça qu'on annonce un lien hypertexte, avec une b
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
Pour créer un formulaire, vous... vide dans l'attribut action ?
Si notre projet comportait également du code en backend(confère note ... .
<note>
En règle générale, un site internet est composé de deux parties :
* une partie frontend, c
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Changez la couleur du te... utre syntaxe, vous trouverez des outils en ligne, comme [[https://coolors.co/|Coolors]] ou encore [[https://www.w3schools.com/colors/colors_picker.asp|HTML Color Picker]].
</n
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Définissez une grid avec... nctionne. Pour ce faire, il s'agit de se demander comment représenter nos éléments. Lorsque vous créez ... plate-rows'', en indiquant la hauteur de chacune, comme on l'a fait pour ''grid-template-columns'' :
<
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Créez un tableau en HTML... (c'est idiot, mais encore faut-il le préciser).
Comme le nom des cellules est un peu différent pour l... l'en-tête plus lisible, elle est en gras.
<note>
Comme vous pouvez le constater, le navigateur a mis e
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Apprenez à créer un site... veut rendre sa page plus interactive, un langage comme JavaScript devient indispensable.
**JavaScript... uton ou des données entrées dans des formulaires, composition dynamique, animations…).
Voici quelques
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Liez le fichier CSS au ... >
h1 {
color: blue;
}
</code>
Dans un code CSS comme ci-dessus, on distingue 2 parties :
* Le sél... mine par '';''.
Le fichier CSS peut contenir des commentaires
<code css>
p {
/* J'en profite pour ajou
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Transformez vos éléments... ont se positionner les uns en dessous des autres (comme des blocs normaux), et il devient possible de m... none; =====
On peut également décider de masquer complètement un élément de la page en attribuant à ''
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Créez des bordures avec... a fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.
Avec border, on peut ut... rgeur que l'on définit avec une valeur en pixels (comme 2px).
* La couleur que l'on indique avec un n
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Utilisez la balise <hea... a page. On y trouve généralement des informations comme des liens de contact, les mentions légales, la ... s utiles sur l'entreprise ou encore des modalités comme la livraison ou le paiement sécurisé.
===== Ut
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Comprenez la logique : un conteneur, des éléments =====
Pour faire de la mis... re pour obtenir la mise en page que vous voulez.
Commençons par étudier le fonctionnement d'un carton
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Regroupez des champs ave... <fieldset> =====
Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de le... avons pas de page à indiquer en //backend// ici.
Comme je vous l'avais dit au chapitre précédent, puis
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Appliquez une media quer... ntenu va changer :
{{responsive_design_01.jpg}}
Comme illustré ci-dessus, sur un mobile, tout s'affic... e réarranger différemment.
Ok mais concrètement, comment on fait pour écrire une media query ?
Voilà
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Différencier les balises... voici un petit schéma :
{{bloc_or_inline.jpg}}
Comme vous pouvez le voir, les blocs sont les uns en ... vient.
Il existe **deux balises génériques** et, comme par hasard, la seule différence entre les deux
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Maitriser les bases de HTML 5 =====
* Comprenez la différence entre HTML et CSS
* Créez v
