Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Leçon 7 : Les attributs Vous pouvez ajouter des attributs à beaucoup d'éléments

Leçon 7 : Les attributs Vous pouvez ajouter des attributs à beaucoup d'éléments. Qu'est-ce qu'un attribut ? Comme vous le savez, les éléments structurent le document HTML et indiquent au navigateur comment présenter le site Web (par exemple, <br /> dit au navigateur de faire un saut de ligne). Certains éléments peuvent recevoir plus d'information. Cette information supplémentaire est appelée un attribut. Exemple 1 : <h2 style="background-color:#ff0000;">Mon affinité avec HTML</h2> Les attributs s'inscrivent toujours au sein de la balise ouvrante, et ils sont suivis par un signe égal et la valeur de l'attribut entre des guillemets. Ici le point-virgule sert à séparer plusieurs instructions de style. Nous y reviendrons plus tard. Qu'est-ce que c'est ? Il existe beaucoup d'attributs différents. Le premier que vous allez voir est « style ». Avec l'attribut style, vous pouvez ajouter une mise en page à votre site. Par exemple, une couleur d'arrière-plan : Exemple 2 : <html> <head> </head> <body style="background-color:#ff0000;"> </body> </html> Ici la page sera complètement rouge dans le navigateur, faites-le et voyez vous-même. Nous expliquerons bientôt en détails comment le système de couleurs fonctionne. Notez que quelques balises et attributs ont une orthographe américaine, par exemple, « color » et non « colour ». Il faut faire attention à utiliser la même orthographe que la nôtre dans les exemples de ce tutoriel, sinon les navigateurs ne pourront pas comprendre votre code. Également, n'oubliez jamais le guillemet final de l'attribut. Comment la page est-elle devenue rouge ? Dans l'exemple précédent, nous avons demandé la couleur d'arrière-plan "#ff0000". C'est un code de couleur pour rouge en nombre hexadécimal (HEX). Chaque couleur est associée à un nombre hexadécimal. Voici quelques exemples : Blanc : #ffffff Noir : #000000 (des zéros) Rouge : #ff0000 Bleu : #0000ff Vert : #00ff00 Jaune : #ffff00 Un code de couleur hexadécimal se compose d'un caractère « # » et de six chiffres ou lettres. Il existe plus de 1000 codes HEX, et il n'est pas facile de déterminer quel code HEX est associé à telle couleur particulière. Pour faciliter les choses, nous avons réalisé un tableau des 216 couleurs les plus courantes : Le tableau des 216 couleurs sûres pour le Web . Vous pouvez également utiliser les noms anglais des couleurs les plus courantes, à savoir "white", "black", "red", "blue", "green" et "yellow" (N.d.T. blanc, noir, rouge, bleu, vert et jaune). Exemple 3 : <body style="background-color: red;"> Assez pour les couleurs. Revenons aux attributs. Quels éléments ont des attributs ? On peut appliquer plusieurs attributs à la plupart des éléments. Vous utiliserez souvent des attributs dans des balises comme « body » et rarement, par exemple, dans une balise « br » puisqu'un saut de ligne ne s'ajuste normalement pas. Tout comme pour les éléments, il y a beaucoup d'attributs différents. Certains attributs sont taillés sur mesure pour un seul élément particulier tandis que d'autres s'utilisent avec plusieurs éléments différents. Et vice versa : certains éléments peuvent uniquement contenir un seul type d'attribut tandis que d'autres peuvent en contenir plusieurs. Cela peut sembler embrouillé mais une fois familiarisé avec les différents attributs, c'est en réalité très logique, et vous verrez rapidement qu'ils sont très faciles à utiliser et qu'ils offrent beaucoup de possibilités. Ce tutoriel introduira les attributs les plus importants. De quelles parties un élément est-t-il constitué exactement ? Généralement, un élément se compose d'une balise ouvrante avec zéro à plusieurs attributs, d'un contenu et d'une balise fermante. Aussi simple que ça. Voir l'illustration ci-dessous. Leçon 8 : Les liens Dans cette leçon, vous apprendrez à faire des liens entre les pages. De quoi ai-je besoin pour faire un lien ? Pour faire un lien, on se sert de ce qu'on utilise toujours pour coder du HTML : un élément. Un simple élément avec un seul attribut et vous pourrez relier tout et n'importe quoi. Voici un exemple montrant à quoi un lien vers HTML.net aurait l'air : Exemple 1 : <a href="http://www.html.net/">Voici un lien vers HTML.net</a> Ce qui donnerait dans le navigateur : Voici un lien vers HTML.net L'élément « a » tient pour « anchor » (N.d.T. ancre). Et l'attribut href est l'abréviation de « hypertext reference » (N.d.T. appel hypertexte), qui indique où conduit le lien, habituellement à une adresse Internet ou à un nom de fichier. Dans l'exemple précédent, l'attribut href vaut "http://www.html.net", ce qui correspond à l'adresse complète de HTML.net et qu'on appelle une adresse URL (Uniform Resource Locator). Notez qu'il faut toujours inclure « http:// » dans les adresses URL. L'expression « Voici un lien vers HTML.net » est le texte affiché dans le navigateur pour le lien. Rappelez-vous de clore l'élément par </a>. Et pour les liens entre mes propres pages ? Si vous voulez faire un lien entre des pages sur le même site, il n'est pas nécessaire d'écrire l'adresse (URL) entière du document. Par exemple, si vous avez deux pages (appelons-les page1.htm et page2.htm) enregistrées dans le même dossier, vous pouvez faire un lien d'une page à l'autre simplement en inscrivant le nom du fichier dans le lien. Dans ces conditions, un lien de page1.htm vers page2.htm apparaîtrait comme ceci : Exemple 2 : <a href="page2.htm">Cliquez ici pour aller à la page 2</a> Si la page 2 se trouvait dans un sous-dossier (appelé "sous-dossier"), le lien serait alors : Exemple 3 : <a href="sous-dossier/page2.htm">Cliquez ici pour aller à la page 2</a> En sens inverse, un lien de la page 2 (dans le sous-dossier) à la page 1 serait le suivant : Exemple 4 : <a href="../page1.htm">Un lien vers la page 1</a> Le chemin « ../ » pointe sur le dossier à un niveau supérieur par rapport à la position du fichier où le lien se trouve. En suivant le même raisonnement, vous pouvez aussi pointer sur une position deux dossiers (ou plus) en amont avec « ../../ ». Vous avez compris le système ? Autrement, vous pouvez toujours écrire l'adresse (URL) complète du fichier. Et pour les liens dans la même page ? On peut également créer des liens internes à une page, par exemple, une table des matières en haut de la page avec des liens vers chaque chapitre en-dessous. Vous avez seulement besoin d'un attribut très utile, appelé id (pour identification), et du symbole « # ». Utilisez l'attribut id pour marquer l'élément que vous voulez relier. Par exemple : <h1 id="heading1">titre 1</h1> On crée ensuite un lien vers cet élément en utilisant le symbole « # » dans l'attribut de liaison. Le « # » indique au navigateur de rester sur la même page. Ce caractère doit être suivi de l'id de la balise à relier. Par exemple : <a href="#heading1">Lien vers le titre 1</a> Tout sera plus clair avec un exemple : Exemple 5 : <html> <head> </head> <body> <p><a href="#heading1">Lien vers le titre 1</a></p> <p><a href="#heading2">Lien vers le titre 2</a></p> <h1 id="heading1">Titre 1</h1> <p>Texte texte texte texte</p> <h1 id="heading2">Titre 2</h1> <p>Texte texte texte texte</p> </body> </html> Dans le navigateur, cela apparaîtra comme ceci (cliquez sur les deux liens) : Lien vers le titre 1 Lien vers le titre 2 Titre 1 Texte texte texte texte Titre 2 Texte texte texte texte (Remarque : L'attribut id doit commencer par une lettre). Puis-je relier autre chose ? On peut également faire un lien vers une adresse e-mail. Cela se fait presque de la même façon que pour relier un document : Exemple 6 : <a href="mailto:nobody@html.net">Envoyer un e-mail à « nobody » chez HTML.net</a> Dans le navigateur, cela donne : Envoyer un e-mail à « nobody » chez HTML.net La seule différence entre un lien d'e-mail et un lien de fichier, c'est que l'on tape « mailto: » suivi d'une adresse e-mail au lieu de taper l'adresse d'un document. Au clic du lien, le programme de messagerie par défaut se lance avec un message vide pour l'adresse e-mail indiquée. Veuillez noter que cela fonctionnera seulement si un programme de messagerie est installé sur votre ordinateur. Essayez donc ! Y a-t-il d'autres attributs à connaître ? Pour créer un lien, vous devez toujours utiliser l'attribut href. Vous pouvez en outre placer un attribut title sur le lien : Exemple 7 : <a href="http://www.html.net/" title="Visitez HTML.net pour apprendre HTML">HTML.net</a> Cela apparaîtra ainsi dans le navigateur : HTML.net L'attribut title sert à fournir une brève description du lien. Si vous positionnez le curseur sur le lien sans le cliquer, vous verrez apparaître le message « Visitez HTML.net pour apprendre HTML ». Leçon 9 : Les images Est-ce qu'il ne serait pas formidable d'avoir une photo de l'acteur et légende musicale David Hasselhoff en plein milieu de la page ? Ça sonne comme un défi ... Peut-être, mais en réalité c'est très facile à faire. Il vous faut seulement un élément : Exemple 1 : <img src="david.jpg" alt="David" /> Ce qui donne dans le navigateur : Tout ce dont vous avez besoin est d'abord de dire au navigateur que vous voulez insérer une image (img) puis de lui dire où elle se trouve (src, abréviation de « source uploads/s3/ lecons-html062020.pdf