Cours d'HTML/CSS

Avatar de l’utilisateur
sandokan
Messages : 221
Inscription : mer. juin 17, 2020 10:09 pm
Localisation : Nîmes
Contact :

Cours d'HTML/CSS

Message par sandokan »

Origines du HTML et du CSS


Le Web a été inventé par Tim Berners-Lee au début des années 1990.

HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. » ;

CSS (Cascading Style Sheets, aussi appelées feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

Il y a eu plusieurs versions des langages HTML et CSS. Les dernières versions sont HTML5 et CSS3.


LE NAVIGATEUR WEB

Le navigateur web est un programme qui permet d'afficher des sites web. Il lit les langages HTML et CSS pour savoir ce qu'il doit afficher.

Il existe de nombreux navigateurs web différents : Google Chrome, Mozilla Firefox, Internet Explorer (maintenant edge), Safari, Opera… Chacun affiche un site web de manière légèrement différente des autres navigateurs.

Pour travailler sur le code on utilise des « éditeur de texte » (Sublime Text, Notepad++, jEdit, vim…).


UN LANGAGE DE BALISES

Les balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des symboles < et > , comme ceci : <balise> .

À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.

On distingue deux types de balises : les balises en paires et les balises orphelines.


Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :

Code : Tout sélectionner

<titre>Ceci est un titre</titre>
On distingue une balise ouvrante ( <titre> ) et une balise fermante ( </titre> ) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est pas un titre.

Code : Tout sélectionner

Ceci n'est pas un titre <titre>Ceci est un titre</titre> Ceci n'est pas un titre
Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ».

Une balise orpheline s'écrit comme ceci :

Code : Tout sélectionner

<image />
Les attributs

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :

Code : Tout sélectionner

<balise attribut="valeur">
À quoi cela sert-il ? Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas à grand-chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher :

Code : Tout sélectionner

<image nom="photo.jpg" />
L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg .

STRUCTURE D'UNE PAGE HTML



Voici la base du code HTML, sur une page web :

Code : Tout sélectionner

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Titre</title>

    </head>

    <body>

    </body>

</html>

[b]Le doctype[/b]

<!DOCTYPE html>
La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.


La balise </html>

Code : Tout sélectionner

<html>


</html>
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout à la fin du code !

L'en-tête <head> et le corps <body>

Une page web est constituée de deux parties :

L'en-tête <head> : cette section donne quelques informations générales sur la page, comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes !

Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.

L'encodage ( charset )

Code : Tout sélectionner

<meta charset="utf-8" />
Cette balise indique l'encodage utilisé dans votre fichier .html .

Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).

Le titre principal de la page

Code : Tout sélectionner

<title>
C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit avoir un titre qui décrit ce qu'elle contient.
Il est conseillé de garder le titre assez court (moins de 100 caractères, en général).

Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur).


Insérer un commentaire

Un commentaire est une balise HTML avec une forme bien spéciale :

Code : Tout sélectionner

<!-- Ceci est un commentaire -->
Vous pouvez le mettre où vous voulez au sein de votre code source : il n'a aucun impact sur votre page, mais vous pouvez vous en servir pour vous aider à vous repérer dans votre code source (surtout s'il est long).


Les paragraphes


Le HTML comporte de nombreuses balises qui nous permettent d'organiser le texte de notre page. Ces balises donnent des indications comme « Ceci est un paragraphe », « Ceci est un titre », etc.

Les paragraphes sont définis par la balise <p> </p>

Sauter une ligne


t les sauts de ligne par la balise <br /> .

Les titres


Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6> , à utiliser selon l'importance du titre.

La mise en valeur

On peut mettre en valeur certains mots avec les balises <strong> , <em> et <mark> .

Les listes

Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol> (liste ordonnée). À l'intérieur, on insère les éléments avec une balise <li> pour chaque item.


LES LIENS HYPERTEXTES






Un lien vers un autre site


Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a> . Il faut cependant lui ajouter un attribut, href , pour indiquer vers quelle page le lien doit conduire.

Par exemple, le code ci-dessous est un lien qui amène vers OpenClassrooms, situé à l'adresse https://openclassrooms.com :

Code : Tout sélectionner

<a href="https://openclassrooms.com">OpenClassrooms</a>
Liens relatifs

Comment faire un lien de la page 1 vers la page 2, sans avoir d'adresse en http:// ? En fait, c'est facile : si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme cible du lien le nom du fichier vers lequel on veut amener. Par exemple : <a href="page2.html"> . On dit que c'est un lien relatif.

Voici le code que nous allons utiliser dans nos fichiers page1.html et page2.html .
page1.html

Code : Tout sélectionner

<p>Bonjour. Souhaitez-vous consulter <a href="page2.html">la page 2</a> ?</p>
page2.html

La page 2 (page d'arrivée) affichera simplement un message pour indiquer que l'on est bien arrivé sur la page 2 :

Code : Tout sélectionner

<h1>Bienvenue sur la page 2 !</h1>
Deux pages situées dans des dossiers différents

Les choses se corsent un petit peu si les pages sont situées dans des dossiers différents. Idéalement, elles ne devraient pas être trop loin l'une de l'autre (dans un sous-dossier, par exemple).

Imaginons que page2.html se trouve dans un sous-dossier appelé contenu.

Dans ce cas de figure, le lien doit être rédigé comme ceci :

Code : Tout sélectionner

<a href="contenu/page2.html">
S'il y avait plusieurs sous-dossiers, on écrirait ceci :

Code : Tout sélectionner

<a href="contenu/autredossier/page2.html">
Et si le fichier ne se trouve pas dans un sous-dossier, mais dans un dossier « parent », on fait comment ?

Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans l'arborescence, il faut écrire deux points, comme ceci :

Code : Tout sélectionner

<a href="../page2.html">
Une ancre

Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues.
En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page, pour que le visiteur puisse sauter directement à la partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre, par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :

Code : Tout sélectionner

<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :

Code : Tout sélectionner

<a href="#mon_ancre">Aller vers l'ancre</a>
Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).


Infobulle - attribut <title>

Vous pouvez utiliser l'attribut title qui affiche une bulle d'aide lorsqu'on pointe sur le lien. Cet attribut est facultatif.

La bulle d'aide peut être utile pour informer le visiteur avant même qu'il n'ait cliqué sur le lien.
Voici comment reproduire ce résultat :

Code : Tout sélectionner

<p>Bonjour. Souhaitez-vous visiter <a href="https://openclassrooms.com" title="Vous ne le regretterez pas !">OpenClassrooms</a> ?</p>
Un lien qui ouvre une nouvelle fenêtre

Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela, on rajoutera target="_blank" à la balise <a> :

Code : Tout sélectionner

<p>Bonjour. Souhaitez-vous visiter <a href="https://openclassrooms.com" title="Vous ne le regretterez pas !" target="_blank">OpenClassrooms</a> ?</p>

Un lien pour envoyer un e-mail

Si vous voulez que vos visiteurs puissent vous envoyer un e-mail, vous pouvez utiliser des liens de type mailto . Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci :

Code : Tout sélectionner

<p><a href="mailto:votrenom@bidule.com">Envoyez-moi un e-mail !</a></p>
Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail où on peut vous contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre adresse e-mail.
Un lien pour télécharger un fichier

Beaucoup d'entre vous se demandent comment cela se passe pour le téléchargement d'un fichier… En fait, il faut procéder exactement comme si vous faisiez un lien vers une page web, mais en indiquant cette fois le nom du fichier à télécharger.

Par exemple, supposez que vous vouliez faire télécharger monfichier.zip . Placez simplement ce fichier dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien vers ce fichier :

Code : Tout sélectionner

<p><a href="monfichier.zip">Télécharger le fichier</a></p>
LES IMAGES




Il existe trois type d'images: format JPEG - PNG et GIF

Insertion d'images

Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe ( <p></p> ). Voici un exemple d'insertion d'image :

Code : Tout sélectionner

<p>

    Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br />

    <img src="images/montagne.jpg" alt="Photo de montagne" />

</p>

Infobulle


L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il s'agit de title . Cet attribut est facultatif (contrairement à alt ).

Voici ce que cela peut donner :

Code : Tout sélectionner

<p>

    Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br />

    <img src="images/montagne.jpg" alt="Photo de montagne" title="C'est beau les Alpes quand même !" />

</p>
Miniature cliquable


Si votre image est très grosse, il est conseillé d'en afficher la miniature sur votre site. Ajoutez ensuite un lien sur cette miniature pour que vos visiteurs puissent afficher l'image en taille originale.

Je les place toutes les deux dans un dossier appelé par exemple img . J'affiche la version montagne_mini.jpg sur ma page et je fais un lien vers montagne.jpg , pour que l'image agrandie s'affiche lorsqu'on clique sur la miniature.

Voici le code HTML que je vais utiliser pour cela :

Code : Tout sélectionner

<p>

    Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br />

    <a href="img/montagne.jpg"><img src="img/montagne_mini.jpg" alt="Photo de montagne" title="Cliquez pour agrandir" /></a>

</p>

Les figures


Au cours de la lecture de ce cours, vous avez déjà rencontré plusieurs fois des figures. Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page.

Les figures peuvent être de différents types :

images ;

codes source ;

citations ;

etc.


Bref, tout ce qui vient illustrer le texte est une figure. Nous allons ici nous intéresser aux images mais, contrairement à ce qu'on pourrait croire, les figures ne sont pas forcément des images : un code source aussi illustre le texte.

En HTML5, on dispose de la balise <figure> . Voici comment on pourrait l'utiliser :

Code : Tout sélectionner

<figure>

    <img src="images/blocnotes.png" alt="Bloc-Notes" />

</figure> 
Une figure est le plus souvent accompagnée d'une légende. Pour ajouter une légende, utilisez la balise <figcaption> à l'intérieur de la balise <figure> , comme ceci :

Code : Tout sélectionner

<figure>

    <img src="images/blocnotes.png" alt="Bloc-Notes" />

    <figcaption>Le logiciel Bloc-Notes</figcaption>

</figure>

Bien comprendre le rôle des figures

Un peu plus tôt dans ce chapitre, je vous ai dit que les images devaient être situées dans des paragraphes (placées à l'intérieur d'une balise <p></p> ). Ce n'est pas tout à fait vrai.

Si vous faites de votre image une figure, l'image peut être située en-dehors d'un paragraphe.


STRUCTURER UNE PAGE EN HTML

Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web :

<header> : en-tête ;

<footer> : pied de page ;

<nav> : liens principaux de navigation ;

<section> : section de page ;

<aside> : informations complémentaires ;

<article> : article indépendant.

Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre en-tête.

Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur le sens du texte qu'elles contiennent. On pourrait très bien placer l'en-tête en bas de la page, si on le souhaitait.

Image


LES TABLEAUX



Un tableau s'insère avec la balise <table> et se définit ligne par ligne avec <tr> .

Chaque ligne comporte des cellules <td> (cellules normales) ou <th> (cellules d'en-tête).

Le titre du tableau se définit avec <caption> .

On peut ajouter une bordure aux cellules du tableau avec border . Pour fusionner les bordures, on utilise la propriété CSS border-collapse .

Un tableau peut être divisé en trois sections : <thead> (en-tête), <tbody> (corps) et <tfoot> (bas du tableau). L'utilisation de ces balises n'est pas obligatoire.

On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec rowspan. Il faut indiquer combien de cellules doivent être fusionnées.


LES FORMULAIRES





Créer un formulaire


Lorsqu'il vous prend subitement l'envie d'insérer un formulaire dans votre page HTML, vous devez pour commencer écrire une balise <form> </form> . C'est la balise principale du formulaire, elle permet d'en indiquer le début et la fin.

Code : Tout sélectionner

<p>Texte avant le formulaire</p>


<form>

   <p>Texte à l'intérieur du formulaire</p>

</form>


<p>Texte après le formulaire</p> 


Les zones de saisie basiques

Pour insérer une zone de texte dans une ligne, on va utiliser la balise <input />

On retrouvera cette balise plusieurs fois dans la suite de ce chapitre. À chaque fois, c'est la valeur de son attribut type qui va changer.

Pour créer une zone de texte à une ligne, on doit écrire :

Code : Tout sélectionner

<input type="text" />
Ce n'est pas encore suffisant : il faut donner un nom à votre zone de texte. Ce nom n'apparaît pas sur la page, mais il vous sera indispensable par la suite. En effet, cela vous permettra (en PHP par exemple) de reconnaître d'où viennent les informations : vous saurez que tel texte est le pseudo du visiteur, tel texte est le mot de passe qu'il a choisi, etc.

Pour donner un nom à un élément de formulaire, on utilise l'attribut name . Ici, on va supposer qu'on demande au visiteur de rentrer son pseudo :

Code : Tout sélectionner

<input type="text" name="pseudo" />
Essayons donc de créer un formulaire très basique avec notre champ de texte :

Code : Tout sélectionner

<form method="post" action="traitement.php">

   <p><input type="text" name="pseudo" /></p>

</form>
Comme d'habitude, je vous invite fortement à essayer ce code chez vous afin d'observer le résultat.
Les libellés

Cette zone de texte est bien jolie mais si votre visiteur tombe dessus, il ne sait pas ce qu'il doit écrire. C'est justement le rôle de la balise <label> :

Code : Tout sélectionner

<form method="post" action="traitement.php">

    <p>

        <label>Votre pseudo</label> : <input type="text" name="pseudo" />

    </p>

</form>
Ce code donne exactement le résultat que vous avez pu observer à la figure précédente.

Mais cela ne suffit pas. Il faut lier le label à la zone de texte.
Pour ce faire, on doit donner un nom à la zone de texte, non pas avec l'attribut name mais avec l'attribut id (que l'on peut utiliser sur toutes les balises).

Un name et un id sur le champ ? Cela ne va-t-il pas faire double emploi ?

Pas du tout ! En fait, l'id est utilisé pour identifier l'élément HTML pour pouvoir y accéder et le manipuler. Il est donc unique pour cet élément.

Le name , lui, réfère à la variable du formulaire que l’élément concerne. Ici, il n’y a qu’un seul élément qui pourra référer à la variable pseudo ; name et id auront donc la même valeur. Mais lorsque nous utiliserons des checkbox ou des radio , plusieurs éléments correspondront à la même variable. Par exemple, la variable couleur avec un élément pour rouge, un pour bleu et un pour vert. Ils auront donc le même name , mais pas le même id .

Pour lier le label au champ, il faut lui donner un attribut for qui a la même valeur que l' id du champ… Le mieux est de le voir sur un exemple :

Code : Tout sélectionner

<form method="post" action="traitement.php">

   <p>

       <label for="pseudo">Votre pseudo</label> : <input type="text" name="pseudo" id="pseudo" />

   </p>

</form>
Essayez de cliquer sur le texte « Votre pseudo » : vous allez voir que le curseur se place automatiquement dans la zone de texte correspondante.


Quelques attributs supplémentaires


On peut ajouter un certain nombre d'autres attributs à la balise <input /> pour personnaliser son fonctionnement :

on peut agrandir le champ avec size ;

on peut limiter le nombre de caractères que l'on peut saisir avec maxlength ;

on peut préremplir le champ avec une valeur par défaut à l'aide de value ;

on peut donner une indication sur le contenu du champ avec placeholder. Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.

Dans l'exemple suivant, la zone de texte contient une indication permettant de comprendre ce qu'il faut saisir ; le champ fait 30 caractères de long mais on ne peut écrire que 10 caractères maximum à l'intérieur :

Code : Tout sélectionner

<form method="post" action="traitement.php">

    <p>

        <label for="pseudo">Votre pseudo :</label>

        <input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />

    </p>

</form>
Testez vous-mêmes le résultat pour observer le comportement du champ. En attendant, voici le rendu du champ dans son état initial en figure suivante.


Zone de mot de passe

Vous pouvez facilement faire en sorte que la zone de texte se comporte comme une « zone de mot de passe », c'est-à-dire une zone où on ne voit pas à l'écran les caractères saisis. Pour créer ce type de zone de saisie, utilisez l'attribut type="password" .

Je complète mon formulaire. Il demande maintenant au visiteur son pseudo et son mot de passe :

Code : Tout sélectionner

<form method="post" action="traitement.php">

   <p>

       <label for="pseudo">Votre pseudo :</label>

       <input type="text" name="pseudo" id="pseudo" />

       

       <br />

       <label for="pass">Votre mot de passe :</label>

       <input type="password" name="pass" id="pass" />

       

   </p>

</form>
Testez la zone de mot de passe : vous verrez que les caractères ne s'affichent pas à l'écran, comme sur la figure suivante.

Zone de texte multiligne

Pour créer une zone de texte multiligne, on change de balise : nous allons utiliser <textarea> </textarea> .

Comme pour tout autre élément du formulaire, il faut lui donner un nom avec name et utiliser un label qui explique de quoi il s'agit.

Code : Tout sélectionner

<form method="post" action="traitement.php">

   <p>

       <label for="ameliorer">Comment pensez-vous que je pourrais améliorer mon site ?</label><br />

       <textarea name="ameliorer" id="ameliorer"></textarea>

   </p>

</form>


Comme vous pouvez le constater, c'est un peu petit ! Heureusement, on peut modifier la taille du <textarea> de deux façons différentes.

En CSS : il suffit d'appliquer les propriétés CSS width et height au <textarea> .

Avec des attributs : on peut ajouter les attributs rows et cols à la balise <textarea> . Le premier indique le nombre de lignes de texte qui peuvent être affichées simultanément, et le second le nombre de colonnes.

Pourquoi ouvre-t-on la balise <textarea> pour la fermer juste après ?

Vous pouvez préremplir le <textarea> avec une valeur par défaut. Dans ce cas, on n'utilise pas l'attribut value : on écrit tout simplement le texte par défaut entre la balise ouvrante et la balise fermante !

<

Code : Tout sélectionner

form method="post" action="traitement.php">

   <p>

       <label for="ameliorer">

       Comment pensez-vous que je puisse améliorer mon site ?

       </label>

       <br />

       

       <textarea name="ameliorer" id="ameliorer" rows="10" cols="50">

       Améliorer ton site ?!

       Mais enfin ! Il est tellement génialissime qu'il n'est pas nécessaire de l'améliorer !

       </textarea>       

   </p>

</form>

Les zones de saisie enrichies

HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux formulaires. De nouveaux types de champs sont en effet apparus avec cette version. Il suffit de donner à l'attribut type de la balise <input /> l'une des nouvelles valeurs disponibles. Faisons un petit tour d'horizon !

Tous les navigateurs ne connaissent pas encore ces zones de saisie enrichies. À leur place, les anciennes versions des navigateurs afficheront une simple zone de saisie monoligne (comme si on avait écrit type="text" ). Entre nous, c'est parfait : les nouveaux navigateurs peuvent profiter des dernières fonctionnalités, tandis que les anciens affichent une zone de texte de remplacement qui convient tout aussi bien.
Vous avez donc tout intérêt à utiliser ces nouvelles zones de saisie dès aujourd'hui ! Au mieux, vos visiteurs profiteront des nouvelles fonctionnalités, au pire, ils ne verront aucun problème.
E-mail

Vous pouvez demander à saisir une adresse e-mail :

Code : Tout sélectionner

<input type="email" />
Le champ vous semblera a priori identique, mais votre navigateur sait désormais que l'utilisateur doit saisir une adresse e-mail.

Une URL

Avec le type url , on peut demander à saisir une adresse absolue (commençant généralement par http:// ) :

Code : Tout sélectionner

<input type="url" />
Même principe : si le champ ne vous semble pas différent sur votre ordinateur, sachez que celui-ci comprend bel et bien que le visiteur est censé saisir une adresse.


Numéro de téléphone

Ce champ est dédié à la saisie de numéros de téléphone :

Code : Tout sélectionner

<input type="tel" />

Nombre

Ce champ permet de saisir un nombre entier :

Code : Tout sélectionner

<input type="number" />

Vous pouvez personnaliser le fonctionnement du champ avec les attributs suivants :

min : valeur minimale autorisée ;

max : valeur maximale autorisée ;

step : c'est le « pas » de déplacement. Si vous indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).

Un curseur

Le type range permet de sélectionner un nombre avec un curseur (aussi appelé slider), comme à la figure suivante :

Code : Tout sélectionner

<input type="range" />

Vous pouvez utiliser là aussi les attributs min, max et step pour restreindre les valeurs disponibles.
Couleur

Ce champ permet de saisir une couleur :

Code : Tout sélectionner

<input type="color" />

Attention, tous les navigateurs ne connaissent pas encore ce type de champ, mais la compatibilité progresse.


Date

Différents types de champs de sélection de date existent :

date : pour la date (05/08/1985 par exemple) ;

time : pour l'heure (13:37 par exemple) ;

week : pour la semaine ;

month : pour le mois ;

datetime : pour la date et l'heure (avec gestion du décalage horaire) ;

datetime-local pour la date et l'heure (sans gestion du décalage horaire).

Exemple :

Code : Tout sélectionner

<input type="date" />

Surveillez bien quels navigateurs gèrent ce type de champ, il n'est pas encore complètement reconnu.


Recherche

On peut créer un champ de recherche comme ceci :

Code : Tout sélectionner

<input type="search" />
Le navigateur décide ensuite comment afficher le champ de recherche. Ainsi, il peut ajouter une petite loupe au champ pour signifier que c'est un champ de recherche, et éventuellement mémoriser les dernières recherches effectuées par le visiteur.
Les éléments d'options

HTML vous offre une ribambelle d'éléments d'options à utiliser dans votre formulaire. Ce sont des éléments qui demandent au visiteur de faire un choix parmi une liste de possibilités. Nous allons passer en revue :

les cases à cocher ;

les zones d'options ;

les listes déroulantes.

Les cases à cocher

Créer une case à cocher ? Rien de plus simple ! Nous allons réutiliser la balise <input /> , en spécifiant cette fois le type checkbox :

Code : Tout sélectionner

<input type="checkbox" name="choix" />

Rajoutez un <label>  bien placé, et le tour est joué !

<form method="post" action="traitement.php">

   <p>

       Cochez les aliments que vous aimez manger :<br />

       <input type="checkbox" name="frites" id="frites" /> <label for="frites">Frites</label><br />

       <input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak haché</label><br />

       <input type="checkbox" name="epinards" id="epinards" /> <label for="epinards">Epinards</label><br />

       <input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>

   </p>

</form>


N'oubliez pas de donner un nom différent à chaque case à cocher, cela vous permettra d'identifier plus tard lesquelles ont été cochées par le visiteur.

Enfin, sachez que vous pouvez faire en sorte qu'une case soit cochée par défaut, avec l'attribut checked :

Code : Tout sélectionner

<input type="checkbox" name="choix" checked />
Normalement, tout attribut possède une valeur. Dans le cas présent, en revanche, ajouter une valeur n'est pas obligatoire : la présence de l'attribut suffit à faire comprendre à l'ordinateur que la case doit être cochée.
Si cela vous perturbe, sachez que vous pouvez donner n'importe quelle valeur à l'attribut (certains webmasters écrivent parfois checked="checked" , mais c'est un peu redondant !). Dans tous les cas, la case sera cochée.


Les zones d'options

Les zones d'options vous permettent de faire un choix (et un seul) parmi une liste de possibilités. Elles ressemblent un peu aux cases à cocher, mais il y a une petite difficulté supplémentaire : elles doivent être organisées en groupes. Les options d'un même groupe possèdent le même nom ( name ), mais chaque option doit avoir une valeur ( value ) différente.

La balise à utiliser est toujours un <input /> , avec cette fois la valeur radio pour l'attribut type .

Les choses seront plus claires sur l'exemple ci-dessous :

Code : Tout sélectionner

<form method="post" action="traitement.php">

   <p>

       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />

       <input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />

       <input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />

       <input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />

       <input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>

   </p>

</form>
Pourquoi avoir mis le même nom pour chaque option ? Tout simplement pour que le navigateur sache de quel « groupe » le bouton fait partie.
Essayez d'enlever les attributs name , vous verrez qu'il devient possible de sélectionner tous les éléments d'options. Or, ce n'est pas ce que l'on veut ; c'est pour cela qu'on les « lie » entre eux en leur donnant un nom identique.

Vous noterez que cette fois on a choisi un id différent de name . En effet, les valeurs de name étant identiques, on n'aurait pas pu différencier les id (et vous savez bien qu'un id doit être unique !). Voilà donc pourquoi on a choisi de donner à l' id la même valeur que value .

Si vous avez deux zones d'options différentes, il faut donner un name unique à chaque groupe, comme ceci :

Code : Tout sélectionner

<form method="post" action="traitement.php">

   <p>

       Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />

       <input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />

       <input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />

       <input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />

       <input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>

   </p>

   <p>

       Sur quel continent habitez-vous ?<br />

       <input type="radio" name="continent" value="europe" id="europe" /> <label for="europe">Europe</label><br />

       <input type="radio" name="continent" value="afrique" id="afrique" /> <label for="afrique">Afrique</label><br />

       <input type="radio" name="continent" value="asie" id="asie" /> <label for="asie">Asie</label><br />

       <input type="radio" name="continent" value="amerique" id="amerique" /> <label for="amerique">Amérique</label><br />

       <input type="radio" name="continent" value="australie" id="australie" /> <label for="australie">Australie</label>

   </p>

</form>
L'attribut checked est, là aussi, disponible pour sélectionner une valeur par défaut.


Les listes déroulantes

Les listes déroulantes sont un autre moyen élégant de faire un choix parmi plusieurs possibilités. Le fonctionnement est un peu différent. On va utiliser la balise <select> </select> qui indique le début et la fin de la liste déroulante. On ajoute l'attribut name à la balise pour donner un nom à la liste.

Puis, à l'intérieur du <select> </select> , nous allons placer plusieurs balises <option> </option> (une par choix possible). On ajoute à chacune d'elles un attribut value pour pouvoir identifier ce que le visiteur a choisi.

Voici un exemple d'utilisation :

Code : Tout sélectionner

<form method="post" action="traitement.php">

   <p>

       <label for="pays">Dans quel pays habitez-vous ?</label><br />

       <select name="pays" id="pays">

           <option value="france">France</option>

           <option value="espagne">Espagne</option>

           <option value="italie">Italie</option>

           <option value="royaume-uni">Royaume-Uni</option>

           <option value="canada">Canada</option>

           <option value="etats-unis">États-Unis</option>

           <option value="chine">Chine</option>

           <option value="japon">Japon</option>

       </select>

   </p>

</form>
Si vous voulez qu'une option soit sélectionnée par défaut, utilisez cette fois l'attribut selected :

Code : Tout sélectionner

<option value="canada" selected>Canada</option>
Vous pouvez aussi grouper vos options avec la balise <optgroup> </optgroup> . Dans notre exemple, pourquoi ne pas séparer les pays en fonction de leur continent ?

Code : Tout sélectionner

<form method="post" action="traitement.php">

   <p>

       <label for="pays">Dans quel pays habitez-vous ?</label><br />

       <select name="pays" id="pays">

           <optgroup label="Europe">

               <option value="france">France</option>

               <option value="espagne">Espagne</option>

               <option value="italie">Italie</option>

               <option value="royaume-uni">Royaume-Uni</option>

           </optgroup>

           <optgroup label="Amérique">

               <option value="canada">Canada</option>

               <option value="etats-unis">Etats-Unis</option>

           </optgroup>

           <optgroup label="Asie">

               <option value="chine">Chine</option>

               <option value="japon">Japon</option>

           </optgroup>

       </select>

   </p>

</form>

Les groupes ne peuvent pas être sélectionnés. Ainsi, dans notre exemple, on ne peut pas choisir « Europe » : seuls les noms de pays sont disponibles pour la sélection.


Finaliser et envoyer le formulaire

Nous y sommes presque. Il ne nous reste plus qu'à agrémenter notre formulaire de quelques dernières fonctionnalités (comme la validation), puis nous pourrons ajouter le bouton d'envoi du formulaire.
Regrouper les champs

Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein de plusieurs balises <fieldset> . Chaque <fieldset> peut contenir une légende avec la balise <legend> . Regardez cet exemple :

Code : Tout sélectionner

<form method="post" action="traitement.php">

 

   <fieldset>

       <legend>Vos coordonnées</legend> <!-- Titre du fieldset --> 


       <label for="nom">Quel est votre nom ?</label>

       <input type="text" name="nom" id="nom" />


       <label for="prenom">Quel est votre prénom ?</label>

       <input type="text" name="prenom" id="prenom" />

 

       <label for="email">Quel est votre e-mail ?</label>

       <input type="email" name="email" id="email" />


   </fieldset>

 

   <fieldset>

       <legend>Votre souhait</legend> <!-- Titre du fieldset -->

 

       <p>

           Faites un souhait que vous voudriez voir exaucé :


           <input type="radio" name="souhait" value="riche" id="riche" /> <label for="riche">Etre riche</label>

           <input type="radio" name="souhait" value="celebre" id="celebre" /> <label for="celebre">Etre célèbre</label>

           <input type="radio" name="souhait" value="intelligent" id="intelligent" /> <label for="intelligent">Etre <strong>encore</strong> plus intelligent</label>

           <input type="radio" name="souhait" value="autre" id="autre" /> <label for="autre">Autre...</label>

       </p>

 

       <p>

           <label for="precisions">Si "Autre", veuillez préciser :</label>

           <textarea name="precisions" id="precisions" cols="40" rows="4"></textarea>

       </p>

   </fieldset>

</form>
Sélectionner automatiquement un champ

Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire avec l'attribut autofocus . Dès que le visiteur chargera la page, le curseur se placera dans ce champ.

Par exemple, pour que le curseur soit par défaut dans le champ prenom :

Code : Tout sélectionner

<input type="text" name="prenom" id="prenom" autofocus />
Rendre un champ obligatoire

Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required .

Code : Tout sélectionner

<input type="text" name="prenom" id="prenom" required />
Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi, qu'il doit impérativement être rempli.

Les anciens navigateurs, qui ne reconnaissent pas cet attribut, enverront le contenu du formulaire sans vérification. Pour ces navigateurs, il sera nécessaire de compléter les tests avec, par exemple, des scripts JavaScript.

On dispose de pseudo-formats en CSS pour changer le style des éléments requis ( :required ) et invalides ( :invalid ). N'oubliez pas non plus que vous disposez du pseudo-format :focus pour changer l'apparence d'un champ lorsque le curseur se trouve à l'intérieur.

Code : Tout sélectionner

:required

{

    background-color: red;

}
Le bouton d'envoi

Il ne nous reste plus qu'à créer le bouton d'envoi. Là encore, la balise <input /> vient à notre secours. Elle existe en quatre versions :

type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l'attribut action du formulaire ;

type="reset" : remise à zéro du formulaire ;

type="image" : équivalent du bouton submit , présenté cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image ;

type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton est géré en JavaScript pour exécuter des actions sur la page. Nous ne l'utiliserons pas ici.

On peut changer le texte affiché à l'intérieur des boutons avec l'attribut value .

Pour créer un bouton d'envoi, on écrira donc par exemple :

Code : Tout sélectionner

<input type="submit" value="Envoyer" />

Lorsque vous cliquez sur le bouton « Envoyer », le formulaire vous amène alors à la page indiquée dans l'attribut action . Souvenez-vous, nous avions imaginé une page fictive : traitement.php .
Mon site internet : https://sandokandamaio.com/
Avatar de l’utilisateur
sandokan
Messages : 221
Inscription : mer. juin 17, 2020 10:09 pm
Localisation : Nîmes
Contact :

Re: Cours d'HTML/CSS

Message par sandokan »

DEUXIÈME PARTIE - LE CSS

Où écrit-on le CSS ?

Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents :

dans un fichier .css (méthode la plus recommandée) ;

dans l'en-tête <head> du fichier HTML ;

directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée).


Comme je viens de vous le dire, on écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html ). C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans un même fichier. J'utiliserai cette technique dans toute la suite de ce cours.

Commençons à pratiquer dès maintenant ! Nous allons partir du fichier HTML suivant :

Code : Tout sélectionner

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" />

        <title>Premiers tests du CSS</title>

    </head>


    <body>

        <h1>Mon super site</h1>

        

        <p>Bonjour et bienvenue sur mon site !</p>

        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>

    </body>

</html>
Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme.


Appliquer un style : sélectionner une balise

aintenant que nous savons où placer le code CSS, intéressons-nous de plus près à ce code. Je vous ai donné, sans vous l'expliquer, un premier bout de code CSS :

Code : Tout sélectionner

p

{

    color: blue;

}
Dans un code CSS comme celui-ci, on trouve trois éléments différents :

des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si je veux modifier l'apparence de tous les paragraphes <p> , je dois écrire p ;

des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS et, comme je vous l'ai dit, je ne vous obligerai pas à les connaître toutes par cœur ;

les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur. Pour font-size , il faut indiquer quelle taille on veut, etc.

Schématiquement, une feuille de style CSS ressemble donc à cela :

Code : Tout sélectionner


balise1

{

    propriete1: valeur1;

    propriete2: valeur2;

    propriete3: valeur3;

}


balise2

{

    propriete1: valeur1;

    propriete2: valeur2;

    propriete3: valeur3;

    propriete4: valeur4;

}


balise3

{

    propriete1: valeur1;

}
Vous repérez dans cet extrait de code les balises, propriétés et valeurs dont je viens de vous parler.

Comme vous le voyez, on écrit le nom de la balise (par exemple h1 ) et on ouvre des accolades pour, à l'intérieur, mettre les propriétés et valeurs que l'on souhaite. On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades. Chaque propriété est suivie du symbole « deux-points » ( : ) puis de la valeur correspondante. Enfin, chaque ligne se termine par un point-virgule ( ; ).


Appliquer un style à plusieurs balises


Prenons le code CSS suivant :

Code : Tout sélectionner

h1

{

    color: blue;

}


em

{

    color: blue;

}
Il signifie que nos titres <h1> et nos textes importants <em> doivent s'afficher en bleu. Par contre, c'est un peu répétitif, vous ne trouvez pas ?

Heureusement, il existe un moyen en CSS d'aller plus vite si les deux balises doivent avoir la même présentation. Il suffit de combiner la déclaration en séparant les noms des balises par une virgule, comme ceci :

Code : Tout sélectionner

h1, em

{

    color: blue;

}

Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu).

Les attributs de class et id


Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise (c'est la technique que je vous ai présentée un peu plus tôt) mais, comme je vous l'ai dit, ce n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe).

Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :

l'attribut class ;

l'attribut id .

Que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence que je vous dévoilerai plus bas.
Pour le moment, et pour faire simple, on ne va s'intéresser qu'à l'attribut class .

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc.

<h1 class=""> </h1>

<p class=""> </p>

<img class="" />

Si vous vous emmêlez les pinceaux entre class et id , retenez que deux balises peuvent avoir le même nom avec l'attribut class . Un nom d' id doit en revanche être unique dans la page HTML.


Les balises universelles


Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id ) à certains mots qui, à l'origine, ne sont pas entourés par des balises.

En effet, le problème de class , c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre que sur une balise. Si, par exemple, je veux modifier uniquement « bienvenue » dans le paragraphe suivant :

Code : Tout sélectionner

<p>Bonjour et bienvenue sur mon site !</p>
Cela serait facile à faire s'il y avait une balise autour de « bienvenue » , mais malheureusement, il n'y en a pas. Par chance, on a inventé… la balise-qui-ne-sert-à-rien.

En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime (mais significative !) entre ces deux balises :

<span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe et c'est celle dont nous allons nous servir pour colorer « bienvenue » ;

<div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p> , <h1> , etc., sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons plus tard.

Pour le moment donc, nous allons utiliser plutôt la balise <span> . On la met autour de « bienvenue », on lui ajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !

Code : Tout sélectionner

<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>

Code : Tout sélectionner

.salutations

{

    color: blue;

}

Appliquer un style : les sélecteurs avancés


En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit « sélectionner ») les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Vous en avez déjà utilisé quelques-uns un peu plus tôt dans ce chapitre, résumons-les pour commencer.
Les sélecteurs que vous connaissez déjà

Ces sélecteurs, que nous avons vus précédemment, sont de loin les plus couramment utilisés. Il faut les connaître par cœur. Commençons par la base de la base :

Code : Tout sélectionner

p

{


}
… signifie « Je veux toucher tous les paragraphes ». Après, c'est à vous de dire ce que vous faites à ces paragraphes (vous les écrivez en bleu, par exemple).

Nous avons aussi vu :

Code : Tout sélectionner

h1, em

{


}
… qui signifie « Tous les titres et tous les textes importants ». Nous avons sélectionné deux balises d'un coup.

Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom, grâce aux attributs class et id :

Code : Tout sélectionner

.class

{


}


#id

{


}
Vous savez quoi ? Il existe des dizaines d'autres façons de cibler des balises en CSS ! Nous n'allons pas toutes les voir car il y en a beaucoup et certaines sont complexes, mais voici déjà de quoi vous permettre d'être plus efficace en CSS !
Les sélecteurs avancés
* : sélecteur universel

Code : Tout sélectionner

*

{


}
Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.


A B : une balise contenue dans une autre


Code : Tout sélectionner

h3 em

{


}
Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3> . Notez qu'il n'y a pas de virgule entre les deux noms de balises.

Exemple de code HTML correspondant :

Code : Tout sélectionner

<h3>Titre avec <em>texte important</em></h3>
A + B : une balise qui en suit une autre

Code : Tout sélectionner

h3 + p

{


}
Sélectionne la première balise <p> située après un titre <h3> .

Exemple :

Code : Tout sélectionner

<h3>Titre</h3>

Code : Tout sélectionner

<p>Paragraphe</p>

A[attribut]
: une balise qui possède un attribut

Code : Tout sélectionner

a[title]

{


}
Sélectionne tous les liens <a> qui possèdent un attribut title .

Exemple :

Code : Tout sélectionner

<a href="http://site.com" title="Infobulle">
A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

Code : Tout sélectionner

a[title="Cliquez ici"]

{


}
Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».

Exemple :

Code : Tout sélectionner

<a href="http://site.com" title="Cliquez ici">

A[attribut*="Valeur"]
: une balise, un attribut et une valeur

Code : Tout sélectionner

a[title*="ici"]

{


}
Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).

Exemple :

Code : Tout sélectionner

<a href="http://site.com" title="Quelque part par ici">
D'autres sélecteurs existent !

Je ne vous ai présenté ici qu'une partie des sélecteurs CSS, mais sachez qu'il en existe beaucoup d'autres. Si vous voulez une liste complète, vous pouvez vous renseigner directement à la source : sur le site du W3C ! C'est très complet.

Formatez du texte







On modifie la taille du texte avec la propriété CSS font-size. On peut indiquer la taille en pixels (16px), en « em » (1.3em), en pourcentage (110 %), etc.

On change la police du texte avec font-family . Attention, seules quelques polices sont connues par tous les ordinateurs. Vous pouvez cependant utiliser une police personnalisée avec la directive @font-face : cela forcera les navigateurs à télécharger la police de votre choix.

De nombreuses propriétés de mise en forme du texte existent : font-style pour l'italique, font-weight pour la mise en gras, text-decoration pour le soulignement, etc.

Le texte peut être aligné avec text-align .

On peut faire en sorte qu'une image soit habillée (« entourée ») de texte avec float .


Les couleurs et les fonds





Indiquer le nom de la couleur

La méthode la plus simple et la plus pratique pour choisir une couleur consiste à taper son nom (in english, of course).
Le seul défaut de cette méthode est qu'il n'existe que seize couleurs dites « standard ». D'autres couleurs officieuses existent mais, comme elles ne fonctionneront pas forcément de la même manière sur tous les navigateurs, je vais éviter de vous les montrer.

La figure suivante vous montre les seize couleurs que vous pouvez utiliser en tapant simplement leur nom.
Les seize noms de couleurs utilisables en CSS

Image

La notation hexadécimale


Un nom de couleur en hexadécimal, cela ressemble à : #FF5A28. Pour faire simple, c'est une combinaison de lettres et de chiffres qui indiquent une couleur.
On doit toujours commencer par écrire un dièse (#), suivi de six lettres ou chiffres allant de 0 à 9 et de A à F.
Ces lettres ou chiffres fonctionnent deux par deux. Les deux premiers indiquent une quantité de rouge, les deux suivants une quantité de vert et les deux derniers une quantité de bleu. En mélangeant ces quantités (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur qu'on veut.

Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur blanche. Mais maintenant, ne me demandez pas quelle est la combinaison qui produit de l'orange couleur « coucher de soleil », je n'en sais strictement rien.

La méthode RGB

En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en « RGB ». Comme avec la notation hexadécimale, pour choisir une couleur, on doit définir une quantité de rouge, de vert et de bleu.
Comme vous avez pu le constater dans l'exemple, pour utiliser la méthode RGB, il faut taper rgb(Rouge, Vert, Bleu) en remplaçant « Rouge, Vert, Bleu » par les nombres correspondants. Pour information, ces quantités sont toujours comprises entre 0 et 255.


Couleur de fond

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color . Elle s'utilise de la même manière que la propriété color , c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.

Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body> . Eh oui, <body> correspond à l'ensemble de la page web ; c'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière-plan de la page.

Images de fond

Appliquer une image de fond

La propriété permettant d'indiquer une image de fond est background-image . Comme valeur, on doit renseigner url("nom_de_l_image.png")

Options disponibles pour l'image de fond

On peut compléter la propriété background-image que nous venons de voir par plusieurs autres propriétés qui permettent de changer le comportement de l'image de fond.
background-attachment : fixer le fond

La propriété CSS background-attachment permet de « fixer » le fond. L'effet obtenu est intéressant, car on voit alors le texte « glisser » par-dessus le fond. Deux valeurs sont disponibles :

fixed : l'image de fond reste fixe ;

scroll : l'image de fond défile avec le texte (par défaut).

background-repeat : répétition du fond

Par défaut, l'image de fond est répétée en mosaïque. Vous pouvez changer cela avec la propriété background-repeat :

no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page ;

repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement ;

repeat-y : le fond sera répété uniquement sur la première colonne, verticalement ;

repeat : le fond sera répété en mosaïque (par défaut).

LES BORDURES ET LES OMBRES




Bordures standard

Pour border, on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure :

la largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px ) ;

la couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur ( black , red …), soit une valeur hexadécimale ( #FF0000 ), soit une valeur RGB ( rgb(198, 212, 37) ) ;

le type de bordure : là, vous avez le choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets, etc. Voici les différentes valeurs disponibles :

none : pas de bordure (par défaut) ;

solid : un trait simple ;

dotted : pointillés ;

dashed : tirets ;

double : bordure double ;

groove : en relief ;

ridge : autre effet relief ;

inset : effet 3D global enfoncé ;

outset : effet 3D global surélevé.


Image

si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces quatre propriétés :

border-top : bordure du haut ;

border-bottom : bordure du bas ;

border-left : bordure de gauche ;

border-right : bordure de droite.

Bordures arrondies

La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels

Les ombres

Nous allons ici découvrir deux types d'ombres :
  • les ombres des boîtes ;

    les ombres du texte.
box-shadow : les ombres des boîtes

La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant :

Le décalage horizontal de l'ombre.

Le décalage vertical de l'ombre.

L'adoucissement du dégradé.

La couleur de l'ombre.


text-shadow : l'ombre du texte

Avec text-shadow, vous pouvez ajouter une ombre directement sur les lettres de votre texte ! Les valeurs fonctionnent exactement de la même façon que box-shadow : décalage, adoucissement et couleur.

APPARENCES DYNAMIQUES

En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le chargement de la page, lorsque certains évènements se produisent. On utilise pour cela les pseudo-formats.

Le pseudo-format :hover permet de changer l'apparence au survol (par exemple : a:hover pour modifier l'apparence des liens lorsque la souris pointe dessus).

Le pseudo-format :active modifie l'apparence des liens au moment du clic, :visited lorsqu'un lien a déjà été visité.

Le pseudo-format :focus permet de modifier l'apparence d'un élément sélectionné.

LE MODELE DES BOITES







On distingue deux principaux types de balises en HTML :

le type block ( <p> , <h1> …) : ces balises créent un retour à la ligne et occupent par défaut toute la largeur disponible. Elles se suivent de haut en bas ;

le type inline ( <a> , <strong> …) : ces balises délimitent du texte au milieu d'une ligne. Elles se suivent de gauche à droite.

On peut modifier la taille d'une balise de type block avec les propriétés CSS width (largeur) et height (hauteur).

On peut définir des minima et maxima autorisés pour la largeur et la hauteur : min-width , max-width , min-height , max-height .

Les éléments de la page disposent chacun de marges intérieures ( padding ) et extérieures ( margin ) :

Voici la liste pour margin :

margin-top : marge extérieure en haut ;

margin-bottom : marge extérieure en bas ;

margin-left : marge extérieure à gauche ;

margin-right : marge extérieure à droite.

Et la liste pour padding :

padding-top : marge intérieure en haut ;

padding-bottom : marge intérieure en bas ;

padding-left : marge intérieure à gauche ;

padding-right : marge intérieure à droite.

S'il y a trop de texte à l'intérieur d'un bloc de dimensions fixes, il y a un risque de débordement. Dans ce cas, il peut être judicieux de rajouter des barres de défilement avec la propriété overflow:

Voici les valeurs qu'elle peut accepter :

visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et sort volontairement du bloc ;

hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte ;

scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse lire l'ensemble du texte. C'est un peu comme un cadre à l'intérieur de la page.

auto : c'est le mode « pilote automatique ». En gros, c'est le navigateur qui décide de mettre ou non des barres de défilement (il n'en mettra que si c'est nécessaire). C'est la valeur que je conseille d'utiliser le plus souvent.

Avec overflow: hidden; le texte est donc coup . Ou de forcer la césure avec word-wrap .
Mon site internet : https://sandokandamaio.com/
Répondre