pour le moment. Sachez juste que les méthodes les plus utilisées sont ''get'' et ''post''.
* L'attribu... on restera sur la même URL, ce qui nous permettra plus tard d'inspecter ce qu'on obtient, assez simpleme... r un serveur web. Elle permet de faire des tâches plus complexes, comme traiter un formulaire, envoyer u... ut>'' est une balise orpheline.
On la retrouvera plusieurs fois dans ce chapitre. Souvent, ce sera la v
- Définir un conteneur ;
- Placer à l'intérieur plusieurs éléments.
Imaginez un carton dans lequel vous rangez plusieurs objets : c'est le principe !
Sur une même page web, vous pouvez avoir plusieurs conteneurs (plusieurs cartons, si vous préférez). Vous pouvez en créer autant que nécessaire pour
u de style aux éléments. Pour que le contenu soit plus harmonieux, on va donner à chaque élément une hau... :
<code css>
.box {
height: 150px;
}
</code>
Plus bas, dans le fichier CSS, créons 3 colonnes, chac... e élément du conteneur. Visuellement, ils ne sont plus collés les uns aux autres.
===== Choisissez vos ... re grid va dépasser. C'est pourquoi il est encore plus simple d'utiliser des ''fr'', l'unité créée spéci
Indiquer une taille relative a l'avantage d'être plus souple, elle s'adapte, selon les tailles d'écrans, plus facilement aux préférences des visiteurs.
Donnez... ode css>
p {
font-size: 16px;
}
</code>
Il y a plusieurs moyens d'indiquer une valeur relative. Une des plus fréquentes consiste à indiquer la taille en em.
{
/* J'en profite pour ajouter un commentaire
sur plusieurs lignes */
color: blue;
}
</code>
===== Appliquez une propriété CSS à plusieurs balises HTML à la fois =====
Si plusieurs balises ont la même style, il suffit de combiner la dé... CSS, on peut appliquer du style à un élément (ou plus) avec l'attribut ''class''. Par contre ''id'' ne
enne ''inline''.
<note>
Si vous ne vous souvenez plus de la différence entre ''inline'' et ''block'', j... dans les faits, vous verrez qu'on l'utilise bien plus souvent sur des balises ''block'' que sur des ba... été CSS ''position''.
Regardons tout ça d'un peu plus près !
==== Définissez un positionnement relatif... osition_relative_02.png}}
Le lien est légèrement plus bas que la ligne de texte, car il est décalé de 6
{{tag>dev web html css}}
====== Allez plus loin ======
Notes et transcriptions du cours [[https://ope... n HTML et CSS mais, lorsqu'on veut rendre sa page plus interactive, un langage comme JavaScript devient ... ion** que l'on utilise fréquemment sur le Web, en plus de HTML et CSS. Javascript permet de rajouter de ... rveur. Cela donne l'impression que les pages sont plus dynamiques et plus réactives.
Les navigateurs so
emière ligne. Par défaut et pour rendre l'en-tête plus lisible, elle est en gras.
<note>
Comme vous pou... 15px;
}
</code>
Le texte des cellules n'apparait plus collé aux bordures, il y a une marge de 15 pixels... trémité du texte et les bordures : le tableau est plus aéré.
C'est mieux !
Et comment on fait pour cen... gauche…
C'est simple, et ça se passe une fois de plus dans le fichier CSS, cette fois, au niveau du sél
pas vous perdre, je vous ai uniquement listé les plus utilisées :
* ''height'' : hauteur de la zone... ia'' : type d'écran de sortie. Avec la valeur la plus utilisée :
* ''screen'' : écran “classique”,
... r et la taille du texte selon que la fenêtre fait plus ou moins de 1 024 pixels de large :
<code css>
/... lue;
}
/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width:
nne sur le même principe : on va pouvoir combiner plusieurs valeurs.
Avec border, on peut utiliser jus... ple_bordures.png}}
Bon ce n'est pas forcément du plus bel effet, mais c'était pour la démonstration !
... ple pour des "groupes de boutons". Vous trouverez plus d’infos sur [[https://getbootstrap.com/docs/4.0/c... der-radius/|Fancy Border Radius]] :
Il ne reste plus qu'à cliquer sur "copy" pour reporter la valeur d
'<header>''(en-tête, en français). On y trouve le plus souvent, à minima, un logo. On le place, pour des... e feuille de style, etc.
</note>
Il peut y avoir plusieurs en-têtes dans votre page. Si celle-ci est découpée en plusieurs sections, chaque section peut en effet avoir... e ce ne soit pas une obligation). Il peut y avoir plusieurs blocs ''<aside>'' dans la page. Sur Wikipédi
'une balise ''block''.
<note>
Il existe en fait plusieurs autres catégories très spécifiques, par exem... s connaissez déjà car je vous les ai présentées à plusieurs reprises. Ce sont des balises qui n'ont aucu... > trop souvent, et oublient que d'autres balises plus adaptées existent.
</note>
Par exemple :
* ''... l'ordinateur. Utilisez toujours d'autres balises plus adaptées quand c'est possible.
Maintenant que vo
outé un lien hypertexte dans le bout de code HTML plus haut, et désactivé le changement de style de ''mo... s toutes les propriétés CSS qui existent. En fait plus le navigateur est vieux, moins il connait de fonc... et sur leurs différentes versions).
===== Allez plus loin avec les sélecteurs avancés =====
En CSS, le plus dur est bien souvent de réussir à cibler l'élémen
er le comportement d'une image de fond, il existe plusieurs propriétés CSS :
* La propriété CSS ''bac... top right'';
Chacune de ces 3 propriétés possède plusieurs valeurs possibles qu'on peut leur associer. ... erne les images de fond. Si vous voulez en savoir plus, vous pouvez vous référer à la [[https://develope... pelée ''background'' dont la valeur peut combiner plusieurs des propriétés :
* background-image ;
s, il peut être utile de les regrouper au sein de plusieurs balises ''<fieldset>'' (section).
Chaque ''... el for="intelligent">Être <strong>encore</strong> plus intelligent</label>
<input type="radio" n... s invalides avec '':invalid''.
N'oubliez pas non plus que vous disposez de la pseudo-classe '':focus'' ... e="submit"'' : c'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiq
