C’est une jeune fille humaine âgée de 18 ans, elle a de longs cheveux noir bouclé attaché en queue

de cheval avec une fleur sur son oreille. Elle est très belle et a les yeux bleu clair, une peau blanche et
un teint clair. Elle a l'air gaie et avenante. Elle est vêtu d'une belle robe rouge foncée move et évasé
avec des gants sur les mains et des jolies ballerines noires. Elle a un père, une mère, un grand frère et
ses deux petite sœurs avec qui elle vie.

Pied de page <footer>

Entete <form><nav> <input type= “search “ name“q“placeholder=“rechercher “><input type

=“submit“ value=“lancer“></form></nav>

Mettre un contenue a coté

<aside>

<h2> en relation </h2>

<ul>

<li><a href= “#“>texte</a></li>
</ul>

</aside>

Elle est née dans le village de Baie et a grandi

Inserer une image fond écran

width: 320px;
height: 160px;
border: 1px solid #333;
margin: 10px auto;
background-color : RGBa(255, 255, 0, 0.2);
}

body{
background-image:
url("https://www.pierre-giraud.com/wp-content/uploads/2019/07/emoji-
smile.png");
background-color : RGBa(255, 255, 0, 0.2)

#ex1{
background-image:
url("https://www.pierre-giraud.com/wp-content/uploads/2019/07/sunset.jpg")
}

Inserer des onglets

<div id="menu">
<ul id="onglets">
<li class="active"><a href="Accueil.html"> Accueil </a></li>
<li><a href="Forums.html"> Forums </a></li>
<li><a href="Livre_or.html"> Livre d'or </a></li>
<li><a href="Equipe.html"> L'équipe </a></li>
<li><a href="Inscription.html"> S'inscrire </a></li>
<li><a href="Connexion.html"> Se connecter </a></li>
</ul>
</div>

Ensuite

#onglets
{
font : bold 11px Batang, arial, serif;
list-style-type : none;
padding-bottom : 24px; /* à modifier suivant la taille de la police ET
de la hauteur de l'onglet dans #onglets li */
border-bottom : 1px solid #9EA0A1;
margin-left : 0;
}
Puis

#onglets li
{
float : left;
height : 21px; /* à modifier suivant la taille de la police pour
centrer le texte dans l'onglet */
background-color: #F4F9FD;
margin : 2px 2px 0 2px !important; /* Pour les navigateurs autre que
IE */
margin : 1px 2px 0 2px; /* Pour IE */
border : 1px solid #9EA0A1;
}

Ecrire ensuite

#onglets li.active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}

Puis

#onglets a
{
display : block;
color : #666;
text-decoration : none;
padding : 4px;
}

Enfin
#onglets a:hover
{
background : #fff;
}
Menus en onglets
Bonjour à tous ! :D

Dans ce tutoriel, vous allez apprendre à créer des menus en onglets de façon très simple en
xHTML et CSS. En fait, c'est un complément au tutoriel de neoxx78 sur les menus
horizontaux. Cependant, il n'est pas nécessaire de l'avoir lu :-° mais celui sur le XHTML/CSS
de M@teo21 doit l'être :( .

L'exemple qui servira tout au long de ce tutoriel sera le menu du Site du Zér0.

Après avoir reçu plusieurs MP concernant le placement du menu dans la page, j'ai décidé de
créer une troisième sous-partie au tuto expliquant comment faire.
J'ai également rajouté une sous-partie concernant la gestion de l'onglet actif, en php.

Le code XHTML
Commençons par le commencement :lol: !

La partie XHTML est la plus simple. En effet, nous allons juste créer un menu avec une liste
non-ordonnée avec <ul> et <li>. Ensuite, dans un menu, il y forcément des liens, on utilisera
donc aussi la balise <a>. L'attribut class nous servira à mettre en valeur l'onglet actif. Le tout
sera englobé avec une balise <div>.

Au final, on doit avoir cela :

<div id="menu">
<ul id="onglets">
<li class="active"><a href="Accueil.html"> Accueil </a></li>
<li><a href="Forums.html"> Forums </a></li>
<li><a href="Livre_or.html"> Livre d'or </a></li>
<li><a href="Equipe.html"> L'équipe </a></li>
<li><a href="Inscription.html"> S'inscrire </a></li>
<li><a href="Connexion.html"> Se connecter </a></li>
</ul>
</div>

Les trois éléments importants sont : l'activation d'un lien avec class="active", la balise <div
id="menu"> qui nous permettra de positionner le menu dans la page, et la balise <ul
id="onglets"> qui servira à faire les modifications sur le style.

Si on ouvrait maintenant une page avec ce code, on aurait ceci :

Comme vous le voyez, c'est un menu très simple. :lol:

Voilà qui clôt la partie XHTML. Jusque-là, ce n'est pas très compliqué :) , mais rassurez-vous,
la suite sera du même niveau ;) !

Le code CSS
Les valeurs que j'utilise dans ce tutoriel sont "uniques". J'entends par là que ces valeurs
dépendent de plusieurs choses : la police utilisée, la taille de celle-ci, le rendu final voulu, ...
Quand on change une de ces valeurs, il faut faire attention à l'interprétation des différents
navigateurs.

Maintenant, la question qui se pose est...

Comment mettre en place les onglets ?

Passons directement au code, les explications suivront. :)

#onglets
{
font : bold 11px Batang, arial, serif;
list-style-type : none;
padding-bottom : 24px; /* à modifier suivant la taille de la police ET
de la hauteur de l'onglet dans #onglets li */
border-bottom : 1px solid #9EA0A1;
margin-left : 0;
}

Je sélectionne le menu avec #onglets et non pas avec #menu, car #menu servira uniquement à
placer le menu dans la page !

Ici, je change principalement la police, j'enlève les puces, je mets une bordure qui sera en bas
des cellules. Le padding-bottom sert à indiquer à quelle «hauteur» sera la bordure du bas.
Pour mieux visualiser, vous pouvez changer cette valeur et vous comprendrez tout de suite ! ;)
Je fais également en sorte que le menu soit collé au bord gauche de la page.

Il faut faire attention avec cette bordure du bas. En effet, on peut avoir de mauvaises surprises
en fonction de la police et de la taille de celle-ci ! Il faut la modifier en fonction de la taille de
la police ET d'un attribut que l'on va voir tout de suite.

#onglets li
{
float : left;
height : 21px; /* à modifier suivant la taille de la police pour
centrer le texte dans l'onglet */
background-color: #F4F9FD;
margin : 2px 2px 0 2px !important; /* Pour les navigateurs autre que
IE */
margin : 1px 2px 0 2px; /* Pour IE */
border : 1px solid #9EA0A1;
}
Ici, je crée mes onglets o_O . Or, mes onglets se trouvent entre des balises <li>, donc il faut
mettre #onglets li. Je crée mes onglets en mettant : border:1px solid #9EA0A1 (cadre de 1
pixel en ligne pleine de couleur #9EA0A1 ;) ) . Je rajoute également une petite marge pour
que les cellules et le texte ne soient pas collés.

Le float : left me sert à mettre mes onglets sur la même ligne.

J'aurais aussi pu utiliser display : inline, mais le résultat n'est pas pareil !

Il faut aussi préciser la hauteur de la cellule.

La hauteur de la cellule dépend de la marge inférieure décrite précédemment. Si on augmente

ou si on diminue une des deux marges, il faudra modifier l'autre en fonction de l'effet voulu. Il
faut aussi prendre en compte la taille de la police.

Les deux margin servent pour l'affichage : en effet, Internet Explorer n'interprète pas de la
même façon que les autres navigateurs !
Bien, on se rapproche du but ! :)

Continuons, on y est presque ! :D

#onglets li.active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}

Là, je sélectionne les onglets qui ont pour id menu. Comme chaque onglet se trouve entre des
balises <li>, je les sélectionne aussi. Comme je veux que quand celui-ci est activé, qu'il ait
une apparence différente, je sélectionne aussi la classe active.
Donc, je modifie juste l'apparence de l'onglet quand celui-ci est activé en mettant une couleur
de fond, et en ajoutant une bordure en bas de cellule, qui aura pour effet d'effacer celle
existante, mais juste sur la largeur de cette cellule.

#onglets a
{
display : block;
color : #666;
text-decoration : none;
padding : 4px;
}

Là, je me trouve dans les onglets et je travaille sur les liens. On fait ici un affichage bloc, ça
permet de pouvoir cliquer partout dans l'onglet pour activer le lien. La couleur du lien se
change aussi ici. Le text-decoration : none sert à enlever le trait de soulignement en dessous
des liens. Enfin, on met une marge aux quatre bords des cellules, donc padding : 4px.
Et la touche finale : quand on passe avec la souris dessus, le fond change de couleur : :D , il
faut donc se placer dans l'id onglet avec a:hover pour le lien.

#onglets a:hover
{
background : #fff;
}

:-° Ouf, on y est arrivé !

Au final, on doit avoir ceci (avec le fond qui devient blanc au passage de la souris) :

N'est-ce pas magnifique ? :p

Maintenant, libre à vous de faire votre propre menu en onglets ! :D

Code source : HYF8J-CVRMY-CM74G-RPHKF-PW487

Ajouté arrière plan


o
o
o
o
o
o
o
o
o
o




Ajouter des images de fond aux éléments HTML avec background-

image CSS

Télécharger le PDF du cours

 Cours complet HTML et CSS
 INTRODUCTION AU COURS HTML ET CSS
1. Introduction au cours HTML et CSS
2. Définition et usage du HTML et du CSS
3. Evolution de l'informatique et des langages Web
4. Travail en local et en production
5. Choix et installation d'un éditeur de texte
 LES BASES DU HTML

6. Eléments, balises et attributs HTML

7. Structure minimale d’une page HTML valide
8. Enregistrement et affichage d’une page HTML
9. L’indentation et les commentaires en HTML
10. Les titres et les paragraphes en HTML
11. Les espaces et retours à la ligne en HTML
12. Définir le niveau d’importance des contenus en HTML
13. Créer des listes en HTML
14. Créer des liens en HTML
15. Envoi de mails et téléchargement de fichiers en HTML
16. Compatibilité, support et validation du code HTML et CSS
 LES BASES DU CSS

17. Sélecteurs et propriétés CSS

18. Où écrire le code CSS ?
19. Commentaires et indentation en CSS
20. Sélecteurs CSS simples et combinateurs
21. Les attributs HTML class et id et les sélecteurs CSS associés
22. Ordre d’application (cascade) et héritage des règles en CSS
23. Les éléments HTML div et span (conteneurs génériques)
24. Les niveaux ou “types” d’éléments HTML block et inline
25. Notations complètes “long hand” et raccourcies “short hand’ CSS
 MISE EN FORME DE TEXTES EN CSS

26. La propriété CSS font-family et les Google Fonts

27. Les autres propriétés CSS liées à la police
28. Les propriétés CSS liées au texte
29. Gérer la taille des interlignes et des espaces dans les textes en CSS
30. Gérer la couleur et l’opacité des textes
 LE MODELE DES BOITES

31. Le modèle des boites

32. Largeur (width) et hauteur (height) de la boite de contenu des éléments HTML
33. Gestion des marges internes ou padding en CSS
34. Gestion des bordures en CSS
35. Gestion des marges externes (margin) en CSS
36. La propriété CSS box-sizing
37. Créer des bordures arrondies en CSS
 POSITION ET AFFICHAGE DES ELEMENTS

38. La propriété CSS display

39. La propriété CSS position
 40. La propriété CSS float
41. Gestion des conflits entre display, position et float
 CREATION DE TABLEAUX HTML

42. Créer des tableaux en HTML

43. Structurer un tableau HTML
44. Mettre en forme un tableau HTML avec du CSS
 INSERTION DE MEDIAS EN HTML

45. Insérer des images dans des pages HTML

46. Insérer de la musique avec l’élément HTML audio
47. Insérer des vidéos avec l’élément HTML video
48. L’élément HTML iframe
 FOND, DEGRADES ET OMBRES CSS

49. Gérer la couleur de fond des éléments HTML

50. Ajouter des images en fond des éléments HTML
51. Création de dégradés linéaires en CSS
52. Création de dégradés radiaux en CSS
53. Ajouter des ombres aux éléments en CSS
 SELECTEURS CSS COMPLEXES

54. Les sélecteurs CSS d’attributs

55. Les pseudo-classes CSS
56. Les pseudo-éléments CSS
57. EXERCICE – Création d’un menu horizontal sticky en HTML et CSS
58. EXERCICE – Création d’un menu déroulant en HTML et CSS
 FORMULAIRES HTML

59. Présentation des formulaires HTML

60. Les éléments des formulaires
61. Attributs des formulaires et sécurité
 TRANSITIONS, ANIMATIONS ET TRANSFORMATIONS CSS

62. Créer des transitions en CSS

63. Créer des animations en CSS
64. Créer des transformations en CSS
65. EXERCICE – Créer un diaporama en HTML et CSS
 MODELE DES BOITES FLEXIBLES - FLEXBOX CSS

66. Introduction au modèle des boites flexibles ou flexbox

67. Gérer la direction des éléments flexibles ou flex items
68. Gérer l’alignement des éléments flexibles
69. Gérer la taille et la flexibilité des éléments flexibles
70. Cas d’utilisation et limites du flexbox
71. EXERCICE – Création d’un menu HTML et CSS en utilisant le flexbox
 RESPONSIVE DESIGN CSS

72. Introduction au responsive design

73. La balise meta viewport
74. Créer un design responsive avec les media queries
75. Images responsive
 76. EXERCICE - Création d'un menu déroulant responsive HTML et CSS
 SEMANTIQUE ET ELEMENTS HTML STRUCTURANTS

77. Sémantique et éléments structurants du HTML

78. EXERCICE - Création d'un site de CV responsive en HTML et CSS
 MODELE DES GRILLES CSS

79. Introduction au modèle des grilles CSS

80. Créer une grille et définir des pistes de grille
81. Positionner des éléments dans une grille
82. Aligner et espacer des éléments dans une grille
83. EXERCICE – Création d’une page à 3 colonnes contenant des éléments flexibles
 EVOLUTION ET FUTUR DU CSS

84. Le CSS, un quasi langage de programmation

85. Les fonctions CSS
86. Les propriétés personnalisées ou variables CSS
87. Les règles arobase CSS
88. Imbrication et héritage étendu
 CONCLUSION DU COURS

89. Conclusion du cours HTML et CSS

Dans cette nouvelle leçon, nous allons apprendre à insérer une ou plusieurs images en fond d’un
élément plutôt qu’une simple couleur. Nous allons pouvoir faire cela avec la propriété background-
image ou avec la notation raccourcie background.

Notez que les dégradés sont considérés comme des images en CSS. Nous allons donc devoir
utiliser background-image ou background pour définir un dégradé en fond d’un élément.
Nous allons apprendre à créer des dégradés dans la leçon suivante.

Les couches ou « layers » constituant le fond d’un élément

Pour bien comprendre comment vont fonctionner et s’appliquer les propriétés background-
image et background-color, vous devez avant tout savoir qu’un élément HTML (ou plus
exactement la boite le représentant) peut avoir plusieurs couches depuis le CSS3.

Cela veut dire qu’on va pouvoir « empiler » différents fonds les uns au-dessus des autres pour
un même élément, à une limitation près qui est qu’on ne peut déclarer qu’une seule valeur
pour la propriété background-color pour un élément et donc qu’un élément ne peut avoir
qu’une couche de couleur de fond avec cette propriété.

En revanche, on va tout à fait pouvoir empiler une ou plusieurs images les unes sur les autres
et par-dessus une couleur de fond pour un même élément. Cela va pouvoir s’avérer très utile
si une image de fond ne peut pas s’afficher pour une raison ou une autre par exemple.
Retenez bien ici l’ordre des couches : la première image déclarée va être la plus proche de
l’utilisateur, c’est-à-dire l’image de fond qui sera visible par défaut. Si on spécifie également
une couleur de fond, alors cette couche sera placée derrière les couches « images de fond ».

Note : J’ai dit plus haut qu’il était impossible d’ajouter plusieurs couches de couleurs de fond
à un élément avec background-color. Cependant, rien ne nous empêche d’utiliser les
dégradés ou gradient en anglais pour mixer plusieurs couleurs sur la même couche.

Utilisation de la propriété background-image

La propriété background-image va nous permettre d’affecter une ou plusieurs images de
fond à un élément. La première image déclarée sera l’image visible par défaut et chacune des
autres images possiblement déclarées sera une couche en dessous.

Ajouter une image de fond avec background-image

Voyons comment ajouter une image de fond :

Ici, je me suis contenté d’attribuer une image de fond à mon div id="ex1". Pour cela, je le
cible en CSS et j’utilise ma propriété background-image en précisant l’adresse relative de
mon image (qui est ici dans le même dossier que mes fichiers) au sein d’un paramètre URL.

Notez qu’on va également tout à fait pouvoir passer une adresse absolue pour ajouter une
image de fond (une adresse de type https://…). Cependant, pour des raisons évidentes, il est
déconseillé d’utiliser une image hébergée sur un autre site comme image de fond : si le
propriétaire du site supprime son image, votre image de fond n’apparaitra plus !

Ajouter plusieurs images de fond avec background-image

Pour ajouter plusieurs images de fond avec background-image, nous allons tout simplement
séparer les différentes déclarations d’images par une virgule comme ceci :
Comme vous pouvez le voir ici, seule la première image déclarée est visible. C’est un
comportement tout à fait normal et cela signifie que la première image déclarée a bien été
chargée. Cependant, la deuxième image a bien été placée en arrière-plan également,
seulement elle est cachée sous la première.

Cette deuxième image va être visible dans deux cas : si la première image ne peut pas être
affichée ou si la première image ne remplit pas le fond de l’élément (et que la deuxième
image est plus grande que la première). Pas d’inquiétude, nous allons apprendre par la suite à
modifier la position et la taille d’une image de fond.

Une bonne pratique : déclarer une couleur de fond avec une image de fond

Par ailleurs, notez qu’il est considéré comme une bonne pratique de toujours déclarer une
couleur de fond avec la propriété background-color en plus d’une ou de plusieurs images de
fond au cas où celles-ci ne pourraient pas s’afficher.

Une nouvelle fois, si une image peut être chargée normalement, alors la propriété
background-color n’aura aucun impact puisque la couche « couleur de fond » va se placer
sous les couches « images de fond ».

La propriété background-color va accepter les mêmes valeurs que la propriété color, c’est
à dire toutes les valeurs possibles de type « couleur » : nom de couleur, valeur hexadécimale,
valeur RGB, RGBa, etc.
Ajouter différentes images de fond à différents éléments

Bien évidemment, rien ne nous empêche d’attribuer différentes images de fond à différents
éléments. Dans le cas où un élément est inclus dans un autre, l’image ou la couleur de fond
qui lui a été attribuée restera au premier plan.

Ainsi, on va par exemple pouvoir ajouter une image de fond à l’élément représentant le
contenu visible de notre page à savoir l’élément body afin d’ajouter une image de fond « à
notre page » en plus de l’image de fond passée à notre div.

Notez cependant que pour des raisons évidentes de lisibilité et de clarté nous éviterons
généralement de multiplier les images de fond et préférerons généralement des couleurs unies
notamment pour le fond d’une page.