Le CSS (Cascading Style Sheets) est un langage informatique utilisé pour la mise en forme de fichiers et de pages HTML. En français, CSS se traduit par feuilles de style en cascade.
CSS est Apparu dans les années 1990, ilse présente comme une alternative à la mise en forme via des balises, notamment HTML.
A quoi sert CSS ?
C’est un langage permettant la mise en forme de documents structurés écrits en langage HTML, XHTML, XML.
il permet un gain de temps considérable dans la mise en forme d’une page web. Grâce au CSS, vous pouvez appliquer des règles de mise en forme (alignement , polices, couleurs, bordures, etc.) à plusieurs documents.
Quels sont les avantages du CSS ?
CSS possède plusieurs avantages parmi lesquels nous pouvons citer :
Ne pas répéter dans chaque page le même code de mise en forme.
pouvoir changer l’apparence d’un site web complet en ne modifiant qu’un seul fichier.
faciliter la lecture du code de la page
réduire le temps de chargement des pages (les feuilles css sont gardées en cache, seuls les contenus sont chargés au cours de navigation)
permettre la cohésion de la présentation tout au long du site avec les feuilles de style
Dans ce tuto , nous avons défini CSS , à quoi sert ce langage et quel sont ses avantages.
Espérons bien que ce tuto vous a plu. Rattachez vos ceinture pour commencer à coder avec ce langage à partir des tutos suivants 🙂 🙂
Quiz de ce tuto
Vous pouvez tester que vous avez bien assimiler tous ce que nous avons appris ensemble via ce quiz 🙂 🙂 amusez vous bien.
Le tag HTML <select> est utilisé pour définir une liste déroulante qui apparaît lorsque l’utilisateur clique sur l’élément de formulaire et permet à l’utilisateur de sélectionner l’une des options.
Pour déterminer les différents choix , nous pouvons utiliser la balise <option> qui sera intégrée au <select>.
Nous pouvons ajouter divers attributs pour la liste à savoir :
<OPTION> pour introduire chaque option de la liste.
<OPTION SELECTED> pour sélectionner une option par défaut .
<SELECT MULTIPLE> cet attribut autorise de sélectionner plusieurs options dans la liste.
SIZE= … : pour préciser le nombre de lignes visibles. S’il y a plus d’options, la liste pourra être parcourue à l’aide d’une barre de défilement.
Option groupe <optgroupe>
Pour combiner plusieurs options dans un groupe, nous pouvons utiliser la balise <optgroup>.
Le contenu du tag <optgroup> va donner un titre qui sera affiché en gras.
<form><labelfor="pays">Dans quel pays habitez-vous ?</label><br/><selectname="pays"id="pays"><optgrouplabel="Europe"><optionvalue="france">France</option><optionvalue="espagne">Espagne</option></optgroup><optgrouplabel="Amérique"><optionvalue="canada">Canada</option><optionvalue="etats-unis">Etats-unis</option></optgroup><optgrouplabel="Asie"><optionvalue="chine">Chine</option><optionvalue="japon">Japon</option></optgroup></select></form>
Dans cette partie , nous avons appris comment ajouter des listes déroulantes dans un formulaire HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant, Nous allons commencer insérer un groupement de champs dans un formulaire HTML.
Les éléments <input> dont l’attribut type vaut "submit" sont affichés comme des boutons permettant d’envoyer les données d’un formulaire.
<form><inputtype="submit"value="Envoyer le formulaire"></form>
Bouton : Reset
Les éléments <input> de type "reset" sont affichés sous la forme de boutons permettant de réinitialiser l’ensemble des champs du formulaire avec leurs valeurs initiales.
Les éléments <input> dont l’attribut type vaut image sont utilisés pour créer des boutons d’envoi de formulaire graphiques. Autrement dit, il s’agit de boutons d’envoi qui affichent une image plutôt qu’un texte.
<h1>Formulaire </h1><form><label>Mot de passe</label><inputtype="password"name="password"required><br><inputtype="reset"value="Supprimer"><inputtype="submit"value="Envoyer"><inputtype="button"value="Acceuil"></form>
Dans cette partie , nous avons appris comment ajouter des boutons dans un formulaire HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant, Nous allons commencer créer insérer des listes déroulantes dans un formulaire HTML.
Les zones de texte de ce type sont utilisées pour des commentaires, blogs, ou n’importe quel autre but qui nécessite un espace pour faire la saisie.
Pour créer cette zone de texte, nous aurons besoin d’une balise d’ouverture et de fermeture <textarea>:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>ma page web</title></head><body><h1>Formulaire </h1><form><label>Message : </label><textarea>Zone de texte!</textarea></form></body></html>
Textarea – taille de la zone de texte
Pour changer la taille standard d’une zone de texte, nous pouvons utiliser des colonnes et des lignes qui auront des valeurs numériques. Plus grand leur valeur sera, plus grand sera la zone de texte.
<form><label>Message : </label><textareacols="50"rows="2">Zone de texte!</textarea><textareacols="40"rows="5">Zone de texte!</textarea><textareacols="20"rows="10">Zone de texte!</textarea></form>
Textarea – L’attribut wrap
L’attribut de la balise <textarea>, établiera la façon par laquelle l’utilisateur réagira lorsqu’il atteindra la fin de la ligne.
Wrap aura une des trois valeurs suivantes: hard, soft, off.
Hard wrap : ira à la ligne de la fin de chaque ligne et enverra le texte dans le même format qu’il a été introduit.
Soft wrap – ira à la ligne de la fin de chaque ligne, mais il enverra le texte dans un format libre.
Off wrap : ceci laisse le texte sur une ligne simple continue.
L’attribut Hard/Soft
<textareacols="20"rows="5"wrap="hard">Hard - ira à la ligne à la fin de chaque ligne et enverra le texte dans le même format qu'il a été introduit.</textarea>
L’attribut off
Cet attribut ne formatera pas le texte d’aucune façon, il le laisse sur une ligne simple continue.
<form><label>Message : </label><textareacols="20"rows="5"wrap="off">Off - ceci ne formatera pas le texte d'aucune façon, laissant le texte sur une ligne simple continue.</textarea></form>
Textarea – L’attribut readonly
L’attribut readonly renseigne si l’utilisateur est capable (ou non) de changer le contenu de la zone de texte.
L’attribut readonly peut avoir une de ces deux valeurs : ‘yes’ ou ‘no’.
Au cas où la valeur est égale à ‘yes’ , l’utilisateur ne peut pas modifier le texte :
<textareacols="20"rows="5"wrap="hard"readonly="yes">Comme vous pouvez le voir ce texte ne peut pas être modifié. Au cas où la valeur 'no' aurait été choisie le résultat opposé aurait été obtenu.</textarea>
Textarea – L’attribut disabled
L’attribut disabled n’est pas très différent de readonly. La différence est que la zone de texte sera grisée.
Dans cette partie , nous avons appris comment ajouter des zones de texte dans un formulaire HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant, Nous allons commencer à insérer des boutons dans un formulaire HTML.
Ce type de champ permet de renseigner une valeur numérique, mais avec un contrôle. L’utilisateur peut naviguer dans un intervalle défini par les attributs min et max avec un pas.
Ce type permet de transformer le champ pour sélectionner un code couleur à partir d’une palette. La valeur attendue est une couleur sous format héxadécimal .
Le tag<input> est un champs que nous pouvons insérer dans un formulaire HTML afin de recueillir les informations d’une entrée effectuée par l’utilisateur.
L’input est utilisé dans les cadres de l’élément <form>, en spécifiant les champs, où les utilisateurs peuvent saisir les données.
Syntaxe
Nous avons plusieurs inputs que nous pouvons insérer dans un formulaire HTML à savoir : le type texte, bouton radio, case à cocher, champ pour saisir un mot de passe, etc.).
Pour spécifier le type du champ que nous voulons ajouter, nous pouvons utiliser l’attribut TYPE.
<INPUTTYPE="…"NAME="…">
Pour lier un texte à un élément spécifique, nous pouvons utiliser le tag <label>, qui définit une étiquette de texte pour celui-ci.
L’étiquette est un texte ordinaire, en cliquant sur lequel l’utilisateur peut sélectionner l’élément de formulaire. Cela facilite l’utilisation du formulaire, car il n’est pas toujours pratique d’entrer dans les éléments du formulaire avec le curseur.
<label>Message</label>
Input : Text
L’input de type Text c’est un champ à saisir dans le quels l’utilisateur est amener de saisir du texte dans une seule ligne.
Dans ce type d’input, nous pouvons trouver divers attribut à ajouter à savoir :
L’attribut name : permet de donner un nom au champ ; ce nom servira à récupérer la saisie du visiteur au cours du traitement.
L’attribut value : permet quant à lui de pré-remplir le champ avec un texte par défaut.
L’attribut placeholder : L’utilisateur voit un indice dans le champ de saisie. Il disparaît lorsque l’utilisateur commence à saisir des données ou lorsque le champ reçoit le focus.
L’attribut required: Indique que le champ de saisie doit être rempli avant de soumettre le formulaire.
Ci-dessous un exemple de formulaire contenant un input de type Text :
Le type password est un champ “ crypté ” qu’on peut ajouter à un formulaire. C’est à dire , au cours de la saisie , les lettres sont remplacées par des étoiles ou des points. Ce type de champ est utile pour la saisie des mots de passe.
Ci-dessous un exemple de formulaire contenant un input de type password :
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>ma page web</title></head><body><h1>Formulaire </h1><form><label>Mot de passe:</label><inputtype="password"name="Mot de pass"placeholder="Entrer votre mot de pass"/></form></body></html>
Input : Tel
Ce type d’input permet la saisie d’un texte indiquant que nous attendons la saisie d’un numéro de téléphone. Sur les navigateurs mobiles, un clavier adapté s’affiche lorsqu’on doit remplir ce champ .
Ci-dessous un exemple de formulaire contenant un input de type tel:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>ma page web</title></head><body><h1>Formulaire </h1><form><label>Numéro de téléphone :</label><inputtype="tel"name="Num tel"placeholder="Entrer votre numéro de téléphone"/></form></body></html>
Input : Number
Ce type d’input permet de saisir une valeur numérique. Nous pouvons rajouter les attributs min et max qui permettent de spécifier une valeur minimale ou bien une valeur maximale pour un champ de type number .
Ci-dessous un exemple de formulaire contenant un input de type number :
Avec le type url, on peut demander à l’utilisateur de saisir une adresse absolue (commençant généralement par http://)
Ci-dessous un exemple de formulaire contenant un input de type url :
<body><h1>Formulaire </h1><form><label>adresse web :</label><inputtype="url"name="url"placeholder="Entrer votre adresse web"></form></body>
Input : Email
Le champ ressemble au champ texte mais le navigateur sait désormais que l’utilisateur doit saisir une adresse e-mail. Il peut afficher une indication si l’adresse n’est pas un e-mail, c’est ce que fait Firefox par exemple en entourant le champ en rouge .
Ci-dessous un exemple de formulaire contenant un input de type email :
Cet input permet la saisie d’un texte indiquant au navigateur que l’on s’attends à saisir un texte pour une recherche.
Certains les navigateurs l’affiche avec une façon un peu différente d’un champ texte, notamment une icone de suppression du contenu et une forme arrondie .
Ci-dessous un exemple de formulaire contenant un input de type Search:
C’est un champ caché pour l’utilisateur, mais dont la valeur est validée par le formulaire. Il s’agit généralement d’une valeur issue d’un script côté serveur (ex php) ou côté client(javascript)
Ci-dessous un exemple de formulaire contenant un input de type hidden:
Un formulaire HTML permet de rendre la page Web plus interactive car il fournit un espace sur la page HTML dans la quelle l’utilisateur peut saisir des données qui seront envoyées au serveur pour être traitées.
Un formulaire est composé d’un ou plusieurs éléments d’entrée qui seront englobés par la balise <form>
Syntaxe
Un formulaire contient un ou plusieurs éléments ( appelés des contrôles). Ces contrôles permettent de faire des saisies ou des choix.
Ci-dessous un exemple de déclaration d’un formulaire :
<formaction="destination">………….</form>
Avec
destination : Le nom du fichier ou du programme à appeler une fois l’utilisateur clique sur un bouton de validation.
Les attributs form :
L’attribut Name :
Cet attribut permet de donner un Nom à un formulaire :
ci-dessous un exemple d’utilisation de l’attribut name :
<formname="saisie">
L’attribut action:
Cet attribut permet d’indiquer l’URL (de protocole : http, ftp, file, mailto,…) qui va recevoir les informations entrées dans le formulaire, lorsqu’on clique sur le bouton de validation.
L’URL est l’adresse d’un programme qui va récupérer les données et les traiter. Si l’attribut action est absent, l’URL sera celui du document.
ci-dessous un exemple d’utilisation de l’attribut action :
•L’attribut METHOD permet d’indiquer la méthode de transmission des données saisies dans le formulaire.
Parmi les méthodes qu’on peut trouver dans un formulaires :
La méthode GET, méthode par défaut, consiste à concaténer les données du formulaire à l’URL spécifié dans ACTION, après avoir inséré un point d’interrogation. Ces données sont incluses sous forme d’une liste nom-champ=valeur-champ.
La méthode POST génère une requête HTTP spéciale qui envoie les données au serveur. Il est fortement recommandé d’utiliser la méthode POST.
<Formname="F"action="t.php"Method="post">
Dans cette partie , nous avons appris comment créer des formulaires dans HTML
Espérons bien que ce tuto vous a plu. Dans le tuto suivant, Nous allons commencer créer insérer des inputs basiques dans une formulaire HTML.
Les deux balises <strong> et <b> sont utiles en html pour mettre en gras un élément du texte.
Bien que ces deux balises donnent pratiquement la même finalité , il existe une différence entre <strong> et <b> qui est la suivante :
La balise <B> permet de mette simplement un bout de texte en gras (<B> est utilisée pour le style)
la balise <STRONG> a pour but de mettre en avant un bout de texte. (<STRONG>est utilisée pour donner du sens à un texte)
Ci-dessous un exemple contenant les balises <STRONG> et <B> :
<!DOCTYPEhtml><html><head><title>Les titres et les paragraphes en HTML</title><metacharset="utf-8"/></head><body><h1>Les titres dans HTML </h1><p> Les éléments de titre permettent de <b>définir un texte</b> comme étant un titre ou sous-titre. </p><h2>Les paragraphes dans HTML </h2><p> Après avoir défini les titres , nous pouvons commencer à écrire <strong> paragraphes </strong> dedans.</p></body></html>
Résultat du code :
La balise <small>
La balise <small> réduit la taille du texte, sauf lorsqu’elle est inséré dans un est a été écrit avec une police plus petite. En général la balise <small> est utilisée pour donner des d’informations sur les droits d’auteur.
Ci-dessous un exemple contenant la balise <SMALL> :
<!DOCTYPEhtml><html><head><title>utiliser la balise SMALL</title></head><body><p>Ce site a été créé par </p><small>la société XXXXX </small></body></html>
Résultat du code :
Les balises <br> et <hr>
La balise <br> est responsable au retour à la ligne, c’est-à-dire que tout ce qui est écrit après sera déplacé vers une nouvelle ligne.
La balise <hr> est utilisée pour créer une ligne horizontale dans la page.
Ci-dessous un exemple contenant les balises <br> et <hr> :
<!DOCTYPEhtml><html><head><title>balises HR et BR</title></head><body><h1>Exemple avec br</h1><p> ceci est un paragraphe avec <br /><br/> pour retourner à la ligne.</p><h1>Exemple avec hr</h1><p> ceci est un paragraphe qui contient <hr /><br/></p><hr><p>utilisée pour créer une ligne horizontale.</p></body></html>
Les balises <i> et <em>
Les balises <i> et <em> permettent de rendre la police du texte italique.
Bien que ces deux balises donnent pratiquement la même finalité , il existe une différence entre <i> et <em> qui est la suivante :
La balise <i> est un élément de balisage physique. C’est à dire, le texte situé dans cette balise est différent au autre texte en dehors juste visuellement et n’est pas détecté comme étant important par les moteurs de recherche et les navigateurs.
La balise <em> met en valeur un morceau de texte c’est à dire il est considéré comme étant important pour les moteurs de recherche et les navigateurs.
Ci-dessous un exemple contenant les balises <i> et <em> :
<!DOCTYPEhtml><html><head><title>texte en italique </title></head><body><h1>Exemple avec <i></h1><p> texte italique avec <i> : <i> mon texte </i></p><h1>Exemple avec <em></h1><p> texte italique avec <em> : <em> mon texte </em></p></body></html>
Résultat du code :
La balise <mark>
La balise <mark> met en évidence une partie d’un texte. Visuellement, le contenu ressemble à un marqueur marqué ( un effet fluo) .
Ci-dessous un exemple contenant la balise <mark> :
<!DOCTYPEhtml><html><head><title>utiliser la balise SMALL</title></head><body><p>Ce texte contient une balise < mark : ></p><small>effect marqueur </small></body></html>
Résultat du code :
La balise <pre>
La balise <pre> est utilisé pour insérer du texte formaté comme nous le souhaitons présenté dans un document HTML.
Par défaut , les navigateurs conservent un nombre limité d’espaces consécutifs. si nous voulons que le navigateur prend en considération tous les espaces qui figurent dans dans le texte, nous devons mettre notre texte dans la balise <pre>
Ci-dessous un exemple contenant la balise <pre> :
<!DOCTYPEhtml><html><head><title>Utiliser la balise pre</title></head><body><pre>Tous les espaces saisis dans ce document sont affichés comme tapés. </pre></body></html>
Résultat du code :
Les balises <del> et <s>
Les navigateurs affichent le contenu des deux balises<del> et <s> sous forme d’un texte barré.
Bien que ces deux balises donnent pratiquement la même finalité , il existe une différence entre <del> et <s> qui est la suivante :
La balise <del> est utilisée pour indiquer des éditions dans un document c’est à dire pour dire qu’une portion de texte à été supprimée ( barré) et a été remplacée par une autre portion (cette partie doit être mise dans la balise <ins> qu’on va la détaillée plus bas dans notre cours). Plus simplement, le code que nous voulons faire un DELETE , on l’insere dans le balise<del> et le code que nous voulons faire un INSERT , on le met dans une balise <ins>
La balise <s> permet d’afficher un texte barré tout court. Elle n’est pas présente pour indiquer des éditions dans un document.
Ci-dessous un exemple contenant les balises <del> et <s> :
<!DOCTYPEhtml><html><head><title>exemples de texte barré </title></head><body><h1>Exemple avec <del></h1><p> La version de ce document est <del>1.0</del><ins> 2.0 </ins></p><h1>Exemple avec <s></h1><p> La version de ce document est <del>1.0</del> 2.0 </p></body></html>
Résultat du code :
Les balises <ins> et <u>
Les navigateurs affichent le contenu des deux balises<ins> et <u> sous forme d’un texte souligné.
Bien que ces deux balises donnent pratiquement la même finalité , il existe une différence entre <ins> et <u> qui est la suivante :
La balise <ins> est utilisée pour indiquer des éditions dans un document c’est à dire pour dire qu’une portion de texte à été inséré qui remplace par une autre portion.
La balise <u>(u veut dire Underlined) permet d’afficher un texte souligné tout court. Elle n’est pas présente pour indiquer des éditions dans un document.
Ci-dessous un exemple contenant les balises <ins> et <u> :
<!DOCTYPEhtml><html><head><title>exemples de texte souligné </title></head><body><h1>Exemple avec <ins></h1><p> La version de ce document est <del>1.0</del><ins> 2.0 </ins></p><h1>Exemple avec <u></h1><p> La version de ce document est <s>1.0</s><u>2.0 </u></p></body></html>
Résultat du code :
Les balises <sub> et <sup>
La balise <sub> définit le texte qui apparaît au-dessous de la ligne de base(la taille du texte est réduite de moitié et le texte apparaît avec un décalage vers le bas).
La balise <sub> définit le texte qui apparaît au-dessus de la ligne de base(la taille du texte est réduite de moitié et le texte apparaît avec un décalage vers le haut).
Ces deux balises sont fortement utilisées pour écrire des formules mathématiques physiques ou chimiques.
Ci-dessous un exemple contenant les balises <sub> et <sup> :
<!DOCTYPEhtml><html><head><title>exemples de sub et sup </title></head><body><h1>Exemple avec <sub></h1><p> La formule chimique de l'eau est H<sub>2</sub>O</p><h1>Exemple avec <sup></h1><p>Le nombre 100 peut aussi s'écrire: 10<sup>2</sup></p></body></html>
Résultat du code :
Dans cette partie , nous avons appris comment insérer des liens dans HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant, Nous allons commencer à ajouter des éléments pour la mise en forme du texte à notre fichier HTML.
Les liens hypertexte permettent de naviguer en passant de pages en pages. Ils peuvent pointer vers un autre site web, vers d’autres pages de votre site ou pointer vers un endroit précis d’une même page.
Pour créer un lien hypertexte en HTML5, nous pouvons utiliser la balise<a> . Elle se referme en utilisant la balise </a>.
Un lien vers un autre site
Pour se diriger vers une page d’un autre site,nous pouvons ajouter un attribut « href » dans la balise <a>.
Ci-dessous un exemple que redirige vers le site de google en cliquant sur le lien « Faire une recherche »:
<!DOCTYPEhtml><html><head><title>Ma page Web </title></head><body><ahref="http://www.google.fr">Faire une recherche</a></body></html>
En cliquant sur le lien , on est redirigé vers le site google
Un lien vers une autre page du même site
Cas 1 : Deux pages situées dans un même dossier
Si les deux fichiers html 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, si nous sommes sur la page1 (page1.html) et que nous souhaitons faire un lien vers la page 2 (page2.html), nous pourrons l’écrire comme dans l’exemple suivant:
<!DOCTYPEhtml><html><head><title>Ma page Web</title><metacharset="utf-8"/></head><body><ahref="page2.html">Cliquer ici pour passer à la page 2</a></body></html>
Cas 2 : Deux pages situées dans des dossier différents :
Si nous sommes sur la page1 (page1.html) et que nous souhaitons faire un lien vers la page 2 (page2.html) situé dans le dossier nommé « Files », nous pourrons l’écrire comme dans l’exemple suivant:
<!DOCTYPEhtml><html><head><title>Ma page Web</title><metacharset="utf-8"/></head><body><ahref="Files/page2.html">Cliquer ici pour passer à la page 2</a></body></html>
Lien vers 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. Parfois, il peut ê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 à l’élément qu’on veut pointer. Ce peut être n’importe quelle balise, un titre par exemple.
<!DOCTYPEhtml><html><head><title>Ma page Web</title><metacharset="utf-8"/></head><body><h2id="cours">cours web </h2><!-- Référence depuis la même page: nom de l’ancre précédé par # --><ahref="#cours"> visualiser le cours web </a><!-- Référence depuis une autre page--><ahref="page.html#cours"> visualiser le cours web </a></body></html>
Lien pour envoyer un mail
Pour envoyer un mail en cliquant sur un lien , l’attribut href de la balise <a> doit commencer par le préfixe mailto: suivi de l’adresse e-mail de destination :
<!DOCTYPEhtml><html><head><title>Ma page Web</title><metacharset="utf-8"/></head><body><ahref="mailto:destination@gmail.com">Envoyez-moi un message !</a></body></html>
Lien pour télécharger un fichier
Pour le téléchargement d’un fichier à partir d’un lien, 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
<!DOCTYPEhtml><html><head><title>Ma page Web</title><metacharset="utf-8"/></head><body><ahref="monfichier.zip">Télécharger le fichier</a></body></html>
Dans cette partie , nous avons appris comment insérer des médias dans HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant, Nous allons commencer à ajouter des éléments pour la mise en forme du texte à notre fichier HTML.
La balise <table> est un conteneur très utilisé dans les pages web. Elle facilite la mise en forme des informations grâce à son découpage en lignes et cellules complètement paramétrables.
CI-dessous les balises de déclaration d’un tableau en HTML :
<table> </table> : Définition d’un tableau
<tr> </tr> : Définition d’une ligne du tableau
<th> </th> : Définition d’une cellule d’en-tète du tableau
<td> </td> : Définition d’une cellule normale du tableau
<!DOCTYPEhtml><html><head><title>Titre du document</title></head><body><table><tr><td>cellule1</td><td>cellule2</td><td>cellule3</td></tr><tr><td>cellule4</td><td>cellule5</td><td>cellule6</td></tr></table></body></html>
Comme vous pouvez le consulter dans l’exemple ci-dessus, le navigateur par défaut n’affiche pas les bordures du tableau. Nous pouvons les ajouter via l’attribut border de la balise <Table>.
Ci-dessous un exemple de bordure d’un seul pixel ( 1px) :
<!DOCTYPEhtml><html><head><title>Titre du document</title></head><body><tableborder="1px"><tr><td>cellule1</td><td>cellule2</td><td>cellule3</td></tr><tr><td>cellule4</td><td>cellule5</td><td>cellule6</td></tr></table></body></html>
Ajouter un titre au tableau
Pour ajouter un titre au tableau , nous pouvons utiliser la balise <caption> juste après la balise ouvrante <Table>
Ci-dessous un exemple avec la balise <caption> :
<!DOCTYPEhtml><html><head><title>Titre du document</title></head><body><tableborder="1px"><caption>titre de mon tableau</caption><tr><td>cellule1</td><td>cellule2</td><td>cellule3</td></tr><tr><td>cellule4</td><td>cellule5</td><td>cellule6</td></tr></table></body></html>
La combinaison des cellules
Pour combiner des cellules dans un tableau ,nous pouvons utiliser les attributs colspan et rowspan :
colspanspécifie le nombre de cellules à combiner horizontalement
rowspanspécifie le nombre de cellules à combiner horizontalement
Fusion des colonnes (colspan)
Il est possible de fusionner horizontalement certaines cellules avec l’attribut colspan= »nombredecellules qui se place dans la cellule (th ou td).
La valeur numérique de cet attribut précise le nombre de colonnes du tableau que couvre la cellule :
Ci-dessous un exemple d’une fusion de 3 colonnes :
<!DOCTYPEhtml><html><head><title>Titre du document</title></head><body><tableborder="1px"><caption>titre de mon tableau</caption><tr><tdcolspan="3">Titre</td></tr><tr><td>ligne 2 colonne 1</td><td>ligne 2 colonne 2</td><td>ligne 2 colonne 3</td></tr></table></body></html>
Fusion des lignes rowspan
Il est possible de fusionner des lignes avec l’attribut rowspan= » nombredelignes » qui se place dans la cellule (th ou td)
<!DOCTYPEhtml><html><head><title>Titre du document</title></head><body><tableborder="1px"><caption>titre de mon tableau</caption><tr><tdrowspan="2">ligne 1 et 2 colonne 1</td><td>ligne 1 colonne 2</td><tdrowspan="3"> ligne 1,2 et 3 colonne 3</td></tr><tr><td>ligne 2 colonne 2</td></tr><tr><td>ligne 3 colonne 1</td><td>ligne 3 colonne 2</td></tr></table></body></html>
Les attributs du tableau :
border : Épaisseur du cadre extérieur en pixels. si la valeur vaut 0, le cadre sera invisible.
cellspacing : Épaisseur en pixels autours de chaque cellule.
cellspadding : Épaisseur en pixels entre l’élément de la cellule et le cadre.
width : Largeur occupée par le tableau en pixels ou en pourcentages.
width : Largeur occupée par une colonne en pixels ou en pourcentages.
align : si la valeur vaut « top », titre sera affiché au-dessus si la valeur vaut « bottom », me titre sera affiché en-dessous.
align : pour les valeurs left, right et center, affiche les éléments de la cellule à gauche, à droite ou au centre.
valign : Aligne le contenu de la cellule en haut, en bas ou au milieu pour les valeurs TOP, BOTTOM et MIDDLE.
nowrap : Empêche le retour à la ligne dans la cellule.
Regroupement des éléments de la table
Le tag <thead> – ( “table head” ) c’est « chapeau » du tableau c’est à dire regroupe une ou plusieurs premières lignes de la table.
Le tag <body> – ( “table body” ) regroupe les lignes centrales du tableau.
Le tag <tfoot> – ( “table footer” ) regroupe la ligne du bas, formant le « sous-sol » de la table.
Dans cette partie , nous avons appris comment comment créer des tableaux dans HTML
Espérons bien que ce tuto vous a plu. Dans le tuto suivant, Nous allons commencer créer des formulaires dans HTML.
