Best Life Style

😂😂😂

Bonjour🌝⏰

Écrit chat si ton portable n'affiche pas une photo de chat alors il n'est pas original

🄵🄾🅁🄼🄰🅃🄸🄾🄽 🄲🅁🄴🄰🅃🄸🄾🄽 🅂🄸🅃🄴🅂 🅆🄴🄱

Ⓟⓡⓐⓣⓘⓠⓤⓔ ⓔⓧⓔⓡⓒⓘⓒⓔ

Voici un petit exercice pour mettre en pratique vos nouvelles compétences. Ouvrezcet éditeur CodePen en ligne. Vous verrez que la page est encore vide ; écrivez vos premières lignes de HTML en présentant vos animaux préférés ! Pour cela, effectuez les tâches suivantes :

Ajoutez un titre de niveau 1.

À la suite du titre, ajoutez un paragraphe indiquant "Voici mes animaux préférés :".

Ajoutez une liste ordonnée d'au moins trois de vos animaux préférés.

Mettez en valeur (emphase forte) le premier animal de la liste

Vous allez construire votre première page HTML. Choisissez bien les balises (vous avez le droit de revoir les chapitres précédents !), placez-les au bon endroit, et CodePen actualisera automatiquement la page pour vous montrer le résultat de votre code.

Voici ce à quoi devrait ressembler votre page une fois modifiée :

Votre page une fois les étapes implémentées

Une fois que vous aurez implémenté tout ça, vous trouverez un exemple de réalisation des étapes en suivant ce lien.

Bien sûr, ce qui est demandé dans cet exercice est le minimum, mais n'hésitez pas à aller plus loin ! Ajoutez d'autres contenus, utilisez d'autres balises... Testez, CodePen vous le permet : vous êtes sûr de ne rien casser. 😉

Ⓕⓞⓡⓜⓐⓣⓘⓞⓝ ⓒⓡⓔⓐⓣⓘⓞⓝ ⓢⓘⓣⓔⓢ ⓦⓔⓑ

🄻🄴🅂 🄻🄸🅂🅃🄴🅂

Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
Nous allons découvrir ici deux types de listes :

les listes non ordonnées ou listes à puces;

les listes ordonnées ou listes numérotées, ou encore énumérations.

Liste non ordonnée

Une liste non ordonnée ressemble à ceci :

Fraises

Framboises

Cerises

C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a pas de « premier » ni de « dernier »). Créer une liste non ordonnée est très simple. Il suffit d'utiliser la balise que l'on referme un peu plus loin avec .
Commencez donc à taper ceci :



Et maintenant, voilà ce qu'on va faire : on va écrire chacun des éléments de la liste entre deux balises . Chacune de ces balises doit se trouver entre et . Vous allez comprendre de suite avec cet exemple :



Fraises

Framboises

Cerises



Le résultat se trouve à la figure suivante.

Une liste non ordonnée

Notez que la liste doit être placée à l'intérieur de . À partir de maintenant, je ne mets pas tout le code de la page pour rester lisible.

Retenez donc ces deux balises :

délimite toute la liste ;

délimite un élément de la liste (une puce).

Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes pas limité à trois éléments.

Et voilà, vous savez créer une liste à puces ! Pas si dur une fois qu'on a compris comment imbriquer les balises.

Pour ceux qui ont besoin de faire des listes complexes, sachez que vous pouvez imbriquer des listes à puces (créer une liste à puces dans une liste à puces). Si vous voulez faire ça, ouvrez une seconde balise à l'intérieur d'un élément .
Si vous fermez les balises dans le bon ordre, vous n'aurez pas de problème. Attention néanmoins, cette technique est un peu compliquée à maîtriser.

Ⓢⓤⓘⓣⓔⓢ 👇

Ⓕⓞⓡⓜⓐⓣⓘⓞⓝ ⓒⓡⓔⓐⓣⓘⓞⓝ ⓢⓘⓣⓔⓢ ⓦⓔⓑ

🄻🄰 🄼🄸🅂🄴 🄴🄽 🅅🄰🄻🄴🅄🅁

Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les faire ressortir. HTML vous propose différents moyens de mettre en valeur le texte de votre page.

Mettre un peu en valeur

Pour mettre un peu en valeur votre texte, vous devez utiliser la balise .
Son utilisation est très simple : encadrez les mots à mettre en valeur avec ces balises et c'est bon ! Je reprends un peu l'exemple de tout à l'heure et j'y mets quelques mots en évidence :









Emphase





Bonjour et bienvenue sur mon site !

Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela marche.





Comme vous pouvez le voir, utiliser la balise a pour conséquence de mettre le texte en italique. En fait, c'est le navigateur qui choisit comment afficher les mots. On lui dit que les mots sont assez importants et, pour faire ressortir cette information, il change l'apparence du texte en utilisant l'italique.

Mettre bien en valeur

Pour mettre un texte bien en valeur, on utilise la balise qui signifie « fort », ou « important » si vous préférez. Elle s'utilise exactement de la même manière que :









Forte emphase





Bonjour et bienvenue sur mon site !

Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela marche.





Vous voyez sûrement le texte s'afficher en gras. Là encore, le gras n'est qu'uneconséquence. Le navigateur a choisi d'afficher en gras les mots importants pour les faire ressortir davantage.
La balise ne signifie pas « mettre en gras », mais « important ». On pourra décider plus t**d, en CSS, d'afficher les mots « importants » d'une autre façon que le gras si on le souhaite.