Hypertext Markup Language/Version imprimable
Une version à jour et éditable de ce livre est disponible sur la Wikiversité,
une bibliothèque de livres pédagogiques, à l'URL :
http://fr.wikiversity.org/wiki/Hypertext_Markup_Language
Introduction
Pour développer en HTML, plusieurs outils sont nécessaires :
Éditeurs de texte modifier
Un logiciel de saisie de texte rudimentaire tel le Bloc-notes de Windows ou TextEdit (Mac OS X) suffisent amplement pour créer un site web. Le Bloc-notes se trouve par défaut dans le menu Accessoires du menu Démarrer de Windows, TextEdit dans le dossier Applications de Mac OS X. L'utilisation de logiciels de création de sites web n’est pas conseillée car ils sont la plupart du temps optimisés pour un navigateur particulier (par exemple Microsoft FrontPage est optimisé pour Internet Explorer…) et ils créent des pages «lourdes» (en moyenne 20% plus lourdes qu'avec le Bloc-notes) et donc longues à charger par le navigateur. De plus, le jour où le besoin d'ajouter une fonction que votre logiciel ne permet pas d'ajouter se fera ressentir, il sera intéressant d’être familier avec le langage HTML pour faire les modifications nécessaires. Il faut également faire attention aux logiciels de traitement de texte « puissants » tels que Word qui utilisent des caractères non standards (comme des apostrophes inversées) qui peuvent générer des erreurs d'interprétation par les navigateurs.
Pour créer une page web, il suffit de taper le code HTML dans le Bloc-notes et d'enregistrer le tout avec l'extension .html ou .htm (attention à ne pas oublier de préciser l'extension. Par défaut le Bloc-notes et TextEdit enregistrent au format .txt). Il existe deux extensions, sans aucune différence entre les deux. Vous pouvez donc choisir entre .html ou .htm. Pour cela, cliquez sur Fichier → Enregistrer sous… puis dans le champ Nom du fichier, tapez nomfichier.html ou nomfichier.htm.
Éditeurs de textes pour développeurs modifier
On peut également utiliser des logiciels un peu plus évolués et supportant la coloration syntaxique. Ils ont les mêmes atouts que le Bloc-notes et ont l'avantage supplémentaire de colorer de différentes couleurs les éléments du langage afin d’en faciliter la lecture. Ils sont fortement conseillés !
Pour Microsoft Windows, on peut conseiller :
Pour Mac OS X, on peut conseiller :
- Coda ;
- Smultron ;
- TextMate ;
- TextWrangler.
Pour les systèmes d'exploitation de type Unix (GNU/Linux, BSD, etc.), on peut conseiller :
- vi/vim ;
- GNU Emacs (également disponible pour plateforme Windows) ;
- gedit (bureau GNOME) ;
- Kate (bureau KDE);
- Geany léger avec autocomplétion (également disponible pour plateforme Mac OS X ou Windows).
modifier
Du plus utilisé au moins utilisé en 2017 :
Première page
Introduction modifier
Une page HTML est composée d’un ensemble d'instructions données grâce à des balises.
Pour écrire du code HTML, il suffit d’utiliser n’importe quel éditeur de texte simple. N'utilisez pas de logiciel de traitement de texte, qui a tendance à reformater le texte écrit par l'utilisateur.
Les balises modifier
Définition modifier
Les instructions en HTML sont définies grâce à des balises (ou tags en anglais). Ce sont ces balises qui vont permettre au navigateur qui interprétera le code de faire la différence entre la présentation et le texte proprement-dit.
Les balises indiquent donc au navigateur comment mettre en forme le texte. Une balise s'écrit entre les signes inférieur (<) et supérieur (>), appelés également chevrons. Cela donne : <balise>. Une balise est en général accompagnée d’une seconde balise de la forme </balise>. La première balise est appelée balise d'ouverture ou balise ouvrante et la deuxième est nommée balise de fermeture ou balise fermante. La balise de fermeture permet d'indiquer au navigateur qu’il faut arrêter d'appliquer la mise en forme introduite par la balise ouvrante.
Prenons un exemple pour expliquer ce principe de balises ouvrante et fermante. La balise <i> permet de mettre le texte en italique. Ainsi, si dans la phrase Le langage HTML est un langage informatique, on veut mettre seulement le mot HTML en italique, on utilise la syntaxe suivante :
L'<i>HTML</i> est un langage informatique.
affichera
L'HTML est un langage informatique.
La balise ouvrante <i> indique au navigateur que la suite du texte doit apparaître en italique et la balise fermante </i> indique au navigateur qu’il doit cesser d'écrire en italique.
Les balises peuvent être écrites indifféremment en majuscules ou en minuscules. Cependant, il est conseillé de les écrire en minuscules pour assurer une plus grande compatibilité avec le XHTML et faciliter la migration vers ce langage le moment venu.
Une balise peut avoir un ou plusieurs attributs. Les attributs permettent de préciser les propriétés de la balise. Ils se présentent sous la forme <balise attribut="valeur">. Les guillemets autour de la valeur ne sont pas obligatoires mais sont recommandés pour des raisons de compatibilité avec le XHTML. Les attributs ne doivent pas être répétés dans la balise fermante.
On appelle code source (ou source tout court), l’ensemble des balises et du texte de la page.
Il est possible d'observer le code source de toute page web en faisant :
- Un clic droit puis Code source de la page sous Firefox
- Un clic droit puis Afficher la source sous Internet Explorer
- Un clic droit puis Afficher le code source de la page sous Chrome
- Un contrôle+clic puis "code source" sous Safari
- Un clic droit puis Source, ou CTRL+U sous Opera
L'imbrication modifier
Une des forces du HTML est le fait que les balises puissent être imbriquées. En effet pour écrire un texte en italique (balise <i>) et souligné (balise <u>), il suffit d'écrire <i><u>texte</u></i>. Cependant les balises ne doivent pas se chevaucher. En d'autres termes, il est impératif de fermer la première balise ouverte après la deuxième. Ainsi, <u>Firefox est un <i>navigateur Web</i></u> est correct mais <u>Firefox est un <i>navigateur Web</u></i> est incorrect puisque la balise <u> a été ouverte avant la balise <i> et a été fermée en premier. On peut bien évidemment imbriquer plus de deux balises.
Le document HTML minimum modifier
Nous avons déjà vu qu'un document HTML n'est qu'un document texte avec l'extension .html ou .htm. Cependant, pour que le navigateur reconnaisse le fichier comme un fichier HTML, il faudrait au minimum écrire :
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
La balise <html> permet de déclarer le document comme un document HTML, et annonce son début. La balise </html> annonce la fin du document HTML au navigateur.
La page web possède une entête délimitée par les balises <head> et </head> et qui permet de donner un titre à la page (avec <title>…</title>), ainsi que des informations au navigateur et aux moteurs de recherches.
La balise <title> permet de définir le titre du document, qui n'est composé que de texte.
Celui-ci n’est pas affiché dans le document, mais comme une donnée à propos du document.
Enfin les balises <body> et </body> délimitent le corps de la page HTML, c'est-à-dire ce qui sera affiché dans le navigateur.
Cette disposition est équivalente à celle d’une lettre. En effet, l'entête d’une lettre comporte les informations concernant l’objet et des informations sur l'expéditeur. Elle est représentée par la balise <head>. Le corps de la lettre comprend le message proprement-dit et est représenté par la balise <body>.
Première page web modifier
Créons maintenant une première page web. La syntaxe de base doit être celle du paragraphe précédent. Nous allons créer une page qui affiche Bonjour et bienvenue sur Wikiversité. Le code source est le suivant :
<html>
<head>
<title>Première page</title>
</head>
<body>
Bonjour et Bienvenue sur <i>Wikiversité</i>
</body>
</html>
La balise <title> permet d'ajouter un titre au document qui s'affichera dans la barre de titre du navigateur. Attention à ne pas oublier
de la fermer avec la balise </title>.
Mise en forme du texte
Introduction modifier
Afin de créer des pages qui soient agréables à lire, il faut savoir présenter le texte. Il y a cependant une remarque préliminaire à faire.
Les navigateurs ne prennent pas en compte les retours à la ligne et les tabulations et quel que soit le nombre d'espaces à la suite que vous tapez, un seul sera affiché. Pour mieux comprendre, le code suivant :
Bonjour et Bienvenue
sur <i>Wikiversité</i>.
affichera
Bonjour et Bienvenue sur Wikiversité.
On remarque que le texte n’est pas passé à la ligne après Bonjour et Bienvenue et que le fait de mettre 10 espaces entre et et Bienvenue n'a eu aucun effet.
Ceci est un avantage car ça permet d'indenter et d'espacer le document sans que cela n'ait d'influence sur le page web finale. L'indentation est le fait d’utiliser la touche tabulation pour mettre en valeur la structure du document. Il est fortement conseillé de bien indenter le document afin d’en faciliter la relecture et la maintenance.
Cependant, il est souvent nécessaire de sauter une ligne. Pour passer à la ligne, il faut utiliser la balise <br />. En ce qui concerne les espaces, nous verrons comment faire lorsque nous aborderons les caractères spéciaux.
Ainsi, il suffit d'ajouter la balise <br /> à l'endroit où l’on veut passer à la ligne.
Bonjour et Bienvenue <br />
sur <i>Wikiversité</i>.
affichera
Bonjour et Bienvenue
sur Wikiversité.
Les niveaux de titres modifier
Pour qu'un document soit aisément lisible, il se doit de comporter des titres. Il existe des balises permettant de créer des titres, ce sont <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Il existe bien sûr les balises fermantes associées.
La balise <h1> correspond aux titres les plus gros et la balise <h6> aux titres de la plus petite taille.
Il est à noter que les titres sont toujours en gras et impliquent un retour à la ligne. Ils ne nécessitent donc pas l’utilisation de la balise <br />.
La police du texte modifier
La police du texte se spécifie grâce à la balise <font face="police"> qui est associée à la balise fermante </font>.
police doit être un nom de police comme Arial ou Comic sans MS.
Il existe un problème de compatibilité avec cet attribut puisque la personne qui visite le site doit avoir la police sur son ordinateur pour qu'elle s'affiche. Il faut donc choisir des polices qu'une majorité de personnes possède. Si le visiteur ne possède pas la police sur son ordinateur, c’est la police par défaut qui va s'afficher. La police par défaut dépend du système du visiteur.
Il existe cependant une astuce pour assurer la plus grande compatibilité possible. Si vous voulez être sûr que soit Arial (police très populaire sur PC), soit Chicago (police très populaire sur Macintosh) s'affiche écrivez la chose suivante : <font face="Arial,Chicago">.
Le navigateur recherchera alors la police Arial et s'il ne la trouve pas, il cherchera la police Chicago. S'il n'en trouve aucune des deux, il affichera la police par défaut.
La taille du texte modifier
La taille du texte se spécifie grâce à la balise <font size="taille"> qui est associée à la balise fermante </font>.
taille est un chiffre compris entre 1 et 7, où 1 correspond à la taille la plus petite et 7 à la taille la plus grande. Malheureusement, c’est la numérotation contraire aux titres ce qui ne simplifie pas la mémorisation.
La taille par défaut est 3.
Il existe une autre manière de choisir la taille, c’est en donnant à taille une valeur du type +1, -1, +2, -2… La taille du texte sera alors celle du texte alentour ajoutée de la valeur spécifiée.
Par exemple, <font size="3">Je suis plus <font size="+1">grand</font> que les autres</font> affichera la phrase je suis plus grand que les autres en taille 3 sauf le mot grand qui sera en taille 3+1=4.
Au contraire, <font size="taille">Je suis plus <font size="-1">petit</font> que les autres</font> affichera la phrase je suis plus petit que les autres en taille 3 sauf le mot petit qui sera en taille 3-1=2.
Il est impossible d’utiliser une valeur inférieure à 1 ou supérieure à 7. Ainsi, font size="+10"> équivaut à font size="7">.
Ainsi, le code :
<font size="1">Ceci est un texte de taille 1</font><br />
<font size="2">Ceci est un texte de taille 2</font><br />
<font size="3">Ceci est un texte de taille 3</font><br />
<font size="4">Ceci est un texte de taille 4</font><br />
<font size="5">Ceci est un texte de taille 5</font><br />
<font size="6">Ceci est un texte de taille 6</font><br />
<font size="7">Ceci est un texte de taille 7</font><br />
<font size="3">Je suis plus <font size="+2">grand</font> que les autres</font><br />
<font size="3">Je suis plus <font size="-2">petit</font> que les autres</font><br />
affichera
Ceci est un texte de taille 1
Ceci est un texte de taille 2
Ceci est un texte de taille 3
Ceci est un texte de taille 4
Ceci est un texte de taille 5
Ceci est un texte de taille 6
Ceci est un texte de taille 7
Je suis plus grand que les autres
Je suis plus petit que les autres
La couleur du texte modifier
La couleur du texte se spécifie grâce à la balise <font color="couleur"> qui est associée à la balise fermante </font>.
Il existe deux manières de définir les couleurs.
La première consiste à remplacer couleur par le code hexadécimal de la couleur voulue précédé du signe #. Cette méthode étant fastidieuse, les couleurs « basiques » peuvent être appelées par leur nom en anglais. Ainsi, pour afficher du bleu, on tapera <font color="blue">.
Ainsi, le code :
<font color="black">noir</font><br />
<font color="white">blanc</font><br />
<font color="red">rouge</font><br />
<font color="blue">bleu</font><br />
<font color="green">vert</font><br />
<font color="yellow">jaune</font><br />
<font color="aqua">eau</font><br />
<font color="fuchsia">fuchsia</font><br />
<font color="grey">gris</font><br />
<font color="lime">citron vert</font><br />
<font color="maroon">marron</font><br />
<font color="purple">violet</font><br />
<font color="navy">marine</font><br />
<font color="olive">olive</font><br />
<font color="silver">argent</font><br />
affichera
noir
blanc (blanc)
rouge
bleu
vert
jaune
eau
fuchsia
gris
citron vert
marron
violet
marine
olive
argent
Polices de caractères modifier
<p style="font-family: times, serif; font-size:14pt; font-style:italic"> Lorem ipsum. </p>
donne :
Lorem ipsum.
Les commentaires modifier
Les commentaires se placent entre les balises <!-- et --> :
<!-- Ceci est un commentaire -->
Les commentaires sont des lignes que le navigateur ne «lira» pas. Ils sont très utiles pour documenter le code, facilitant ainsi la relecture et la maintenance. Ils sont par conséquent fortement recommandés.
Les paragraphes modifier
Les paragraphes sont des blocs de textes compris entre les balises <p> et </p>.
Un paragraphe implique un saut de ligne avant et après celui-ci.
On ajoute parfois à la balise <p> l'attribut align qui permet de définir l'alignement du texte à l'intérieur du paragraphe. align peut prendre les valeurs left pour un alignement à gauche, right pour un alignement à droite, center pour obtenir un texte centré ou justify pour avoir un paragraphe justifié (c'est-à-dire aligné à la fois à droite et à gauche).
Les caractères spéciaux modifier
Certains caractères peuvent être absent du jeu de caractères utilisé par votre éditeur lors de la création du document. On utilise alors les entités commençant par le caractère & et se terminant par un ;.
Pour en savoir plus sur ces entités, consulter la table des caractères.
Par exemple, pour afficher le signe €, il peut être nécessaire d'écrire €.
De même, certains caractères spéciaux peuvent être difficiles à saisir directement ou à retrouver ensuite sous leur forme littérale. Ainsi, pour écrire un espace insécable, on utilise fréquemment l'entité .
Liens hypertextes
Introduction modifier
Les liens hypertextes sont des références « en ligne » navigables vers des ressources, en particulier d'autres documents HTML, pages Web, ou médias.
Deux balises partagent la syntaxe des liens hypertextes :
- Les liens eux-mêmes.
- Les marques.
Syntaxe modifier
Les liens hypertextes sont introduits par la syntaxe générale :
<a lien> contenu </a>
où
- lien est la spécification du lien.
- contenu est la portion du document qui référence la ressource.
Le « a » vient de la première lettre du mot anglais anchor (ancre).
Contrairement à la spécification, le contenu ne varie pas d’un type de lien à l'autre.
Marques modifier
Les marques servent à introduire un point pouvant être référencé dans le document. Elles sont introduites par la syntaxe
<a name="''marque''"> ''contenu'' </a>
où
- marque est le nom de la marque, par lequel on la référencera.
Liens modifier
Les liens servent à référencer un document ou une marque dans un document.
Ils sont introduits par la syntaxe
<a href="''lien''"> ''contenu'' </a>
où
- lien est une référence non nulle vers une ressource, composée d’une URL, suivie optionnellement d’un « # » et d’un nom de marque, qui n'est pertinent que lorsque la ressource est une page HTML.
« href » signifie hypertext reference.
Dans le cas de référence vers une ressource, la syntaxe est
<a href="''ressource''"> ''contenu'' </a>
Dans le cas de référence vers une marque dans une ressource, la syntaxe est
<a href="''ressource''#''marque''"> ''contenu'' </a>
Dans le cas où le lien référence une marque interne, l'URL est optionnelle. La syntaxe peut être raccourcie en
<a href="#''marque''"> ''contenu'' </a>
Pour ouvrir le lien dans un nouvel onglet sur clic gauche (au lieu de CTRL + clic par défaut) :
<a href="''lien''" target="_blank"> ''contenu'' </a>
Exemple modifier
<html>
<head>
<title>Page avec des liens</title>
</head>
<body>
<h1>Le HTML</h1>
<p>
Le site du <a href="http://www.w3.org/">w3</a> a une section présentant les
<a href="http://www.w3.org/#news">informations</a>.
La section <a href="#infos">informations</a> en fait un résumé.
</p>
<h2><a name="infos">Informations</a></h2>
<p>
Les informations ici.
</p>
</body>
</html>
Remarques modifier
- Les liens hypertextes s'affichent de manière standard en bleu souligné, pour les distinguer du texte courant.
- Il est conseillé de faire des liens descriptifs, comme
La section <a href="...">informations</a> de ce site liste les évènements récents.
et non comme
Pour avoir les informations sur ce site, <a href="...">cliquer ici</a>.
- Lorsque la ressource est un document HTML, le navigateur l'affiche. Lorsqu’il s'agit d’un média quelconque, le navigateur le télécharge.
Listes
Introduction modifier
Les listes peuvent être très utiles pour tout ce qui est énumération, sommaire, menu… En HTML, il existe trois types de listes :
- Les listes non ordonnées
- Les listes ordonnées
- Les listes de définitions
Les listes non ordonnées modifier
Les listes non ordonnées ou listes à puces sont délimitées par les balises <ul> et </ul>, (ul signifiant unordered list). Chaque élément de la liste est délimité par les balises <li> et </li> (li signifiant LIste entry).
La syntaxe est donc :
<ul>
<li> entrée 1 </li>
<li> entrée 2 </li>
<li> entrée 3 </li>
<li> entrée 4 </li>
<li> entrée 5 </li>
<li> entrée 6 </li>
</ul>
Il est à noter que la puce a la même couleur que le texte qui la suit.
Les listes non ordonnées disposent de l'attribut type qui permet de choisir la forme de la puce. Les valeurs possibles sont disc qui affiche un cercle plein comme puce, circle qui affiche un cercle vide comme puce et square qui affiche un carré.
Les listes ordonnées modifier
Les listes ordonnées ou listes numérotées sont délimitées par les balises <ol> et </ol> (ol signifiant ordered list). Chaque élément de la liste est délimité par les balises <li> et </li> comme pour les listes non ordonnées.
La syntaxe est donc :
<ol>
<li> entrée 1 </li>
<li> entrée 2 </li>
<li> entrée 3 </li>
<li> entrée 4 </li>
<li> entrée 5 </li>
<li> entrée 6 </li>
</ol>
Il est à noter que la puce a la même couleur que le texte qui la suit.
Les listes ordonnées disposent de l'attribut type qui permet de choisir le type de numérotation. Les valeurs possibles sont A (le système de numérotation sera les lettres majuscules), a (le système de numérotation sera les lettres minuscules), I (le système de numérotation sera les chiffres romains majuscules), i (le système de numérotation sera les chiffres romains minuscules) et 1 (le système de numérotation sera les chiffres arabes).
Elles disposent également de l'attribut start qui prend pour valeur le numéro (en chiffres arabes) à partir duquel le navigateur doit compter. Par exemple, si l’on entre <ol type="a" start="4">, la numérotation débutera à d.
Les listes de définitions modifier
Les listes de définitions ou listes de glossaire sont délimitées par les balises <dl> et </dl> (dl signifiant definition list). Chaque élément de la liste est délimité par les balises <dt> et </dt> (dt signifiant definition term) et sa définition est délimitée par les balises <dd> et </dd> (dd signifiant definition description).
La syntaxe est donc :
<dl>
<dt>Tomate</dt>
<dd>Plante annuelle de la famille des solanacées, originaire d’Amérique du Sud et Centrale</dd>
<dt>Poire</dt>
<dd>Fruit à pépin, de saveur agréable, ordinairement de forme oblongue, et qui va en diminuant vers la queue</dd>
<dt> … </dt>
<dd> … </dd>
</dl>
Éléments de présentation
Introduction modifier
L'attractivité d’un site dépend en grande partie de son ambiance visuelle. Nous allons voir comment mettre un fond d'écran sur votre site et comment inclure des séparateurs horizontaux.
Les fonds d'écran modifier
Couleur de fond modifier
L'ajout d’une couleur de fond se fait par l'intermédiaire de l'attribut bgcolor de la balise <body>. La valeur de l'attribut bgcolor est une couleur. Pour plus d'information, sur les couleurs, consultez la table des couleurs.
En fonction de la couleur que vous choisissez, le texte risque de devenir illisible. Pour corriger ce problème, il existe l'attribut text de la balise <body> qui modifie la couleur du texte de la page. La valeur de l'attribut text est une couleur.
Prenons un exemple :
<html>
<head>
<title>Couleur de fond</title>
</head>
<body bgcolor="blue" text="white">
Voilà une page écrite en blanc sur fond bleu
</body>
</html>
Cet exemple permet d'afficher une page ayant un fond de couleur bleu et le texte « Voilà une page écrite en blanc sur fond bleu » écrit en blanc.
Une image en fond d'écran modifier
Il est aussi possible d'ajouter une image en fond. Pour cela, on utilise l'attribut background de la balise <body>. La valeur de l'attribut background doit être une adresse qui peut être absolue ou relative[1].
Il est recommandé d’éviter les images trop lourdes qui augmentent le temps de chargement de la page. Cependant, une fois que l’image est chargée, elle passe dans la cache du navigateur et ne nécessitera plus de temps de chargement pour la session en cours.
Prenons un exemple :
<html>
<head>
<title>Image de fond</title>
</head>
<body background="images/fond.jpg" text="yellow">
Voilà une page avec une image de fond
</body>
</html>
Les séparateurs horizontaux modifier
Définition modifier
Le HTML intègre un élément intéressant de mise en page, la ligne horizontale. La ligne horizontale est introduite par la balise <hr> (hr signifie horizontal rule soit règle horizontale). Il n'y a pas de balise fermante associée.
Prenons un exemple :
texte texte texte
<hr>
texte texte texte
Cet exemple permet d'insérer une ligne horizontale entre les deux lignes de texte.
Les attributs modifier
La balise <hr> dispose de nombreux attributs.
L'attribut size permet de définir l'épaisseur de la barre. La valeur de l'attribut size doit être une valeur numérique exprimée en pixels.
L'attribut width permet de définir la largeur de la barre. La valeur de l'attribut width est soit une valeur numérique exprimée en pixels soit une valeur numérique suivie du symbole % et alors la valeur correspond à la largeur de la barre en pourcentage de la fenêtre. On préférera cette deuxième méthode car la largeur de la barre s'adapte ainsi à la taille et à la résolution de l'écran de l'utilisateur.
L'attribut align permet de définir l'alignement de la barre. Les valeurs possibles sont left, center et right.
L'attribut noshade permet d'appliquer ou non un ombrage à la barre.
Notes modifier
- ↑ Pour plus d'informations, voir Liens hypertextes
Images
La base modifier
On insère une image dans une page HTML en utilisant la balise <IMG>.
Cette balise possède plusieurs attributs :
NAME: Nom de l'image (utile en javascript)SRC: l'adresse (qu'elle soit relative ou absolue) de l'imageWIDTH: la largeur en pixel ou en pourcentageHEIGHT: la hauteur en pixel ou en pourcentageBORDER: son éventuelle bordure en pixel (souvent 2 par défaut, sans bordure=0)ALT: équivalent textuel de l'information véhiculée par l'image. s'affiche si l'image ne peut pas être chargée.ALIGN: alignement de l'image par rapport au texte. Valeurs généralement utilisées :LEFT|RIGHT|TOP|BOTTOM
Exemple modifier
<html>
<img src="Text-html.svg" width=48 height=48 alt="Image introuvable" align=left>
</html>
Donne :
- Si l'image existe :
- Sinon le texte : Image introuvable.
Tableaux
Introduction modifier
Syntaxe modifier
- caption permet de définir une légende (c'est un paramètre optionnel).
- tr (table row) délimite une ligne.
- td (table data) délimite une colonne.
- th (table header) permet de définir des intitulés de colonne ou de ligne.
<table>
<caption>légende</caption>
<tr>
<th>Titre de la colonne 1</th>
<th>Titre de la colonne 2</th>
</tr>
<tr>
<td>case 1</td>
<td>case 2</td>
</tr>
</table>
donne un tableau comme suit:
| Titre de la colonne 1 | Titre de la colonne 2 |
|---|---|
| case 1 | case 2 |
Attributs courants modifier
- border règle la taille de la bordure.
| case 1 | case 2 |
<table border="1">
<tr>
<td>case 1</td>
<td>case 2</td>
</tr>
</table>
- colspan et rowspan permettent de fusionner des cellules horizontalement (respectivement verticalement). S'applique sur les balises tr, td et th.
| case 1 | case 2 | |
| case 4 | case 5 | case 6 |
| case 8 | case 9 | |
<table border="1">
<tr>
<td>case 1</td>
<td colspan="2">case 2</td>
</tr>
<tr>
<td rowspan="2">case 4</td>
<td>case 5</td>
<td>case 6</td>
</tr>
<tr>
<td>case 8</td>
<td>case 9</td>
</tr>
</table>
Voir aussi modifier
Formulaires
Introduction modifier
- Un formulaire permet d'envoyer des données à une autre page, généralement codée en PHP, pour être ensuite interprétées et traitées. La création d'un formulaire permet, par exemple, la gestion d'une connexion à un espace membre (expliqué dans PHP/Formulaire).
- En HTML, il peut-être réalisé à l'aide de la balise <FORM> ... </FORM>, qui s'emploie avec différents paramètres :
- METHOD : forme des réponses envoyées.
- POST : envoi de données.
- GET : envoi des données via l'URL.
- ACTION : adresse d'envoi.
- L'intérieur du formulaire peut être complété avec 3 balises :
- LABEL : assigne un nom à un objet.
- INPUT : ajoute des boutons ou des champs de saisie.
- TEXTAREA : ajoute une zone de saisie.
- SELECT : ajoute une liste à choix multiples.
INPUT modifier
Syntaxe modifier
<INPUT type="type du champ" value="valeur par défaut" name="nom de l'objet">
- Il existe les types de champs "text" (zone de texte), "radio" (case à cocher) et "submit" (bouton de soumission).
Exemple modifier
- Pour se rendre sur une URL en fonction de paramètres :
<FORM method="GET" action="http://fr.wikiversity.org/wiki/Hypertext_Markup_Language/Formulaires">
Nom :<INPUT type=text name="nom" maxlength="10"><br />
Homme : <INPUT type=radio name="sexe" value="Masculin" checked><br />
Femme : <INPUT type=radio name="sexe" value="Féminin"><br />
<INPUT type="submit" value="Envoyer">
</FORM>
- Pour poster des champs sur un site :
<FORM action="http://fr.wikiversity.org/w/index.php?title=Hypertext_Markup_Language/Formulaires" method="POST">
<P>
<LABEL for="prenom">Prénom </LABEL>
<INPUT type="text" id="prenom"><br />
<LABEL for="nom">Nom : </LABEL>
<INPUT type="text" id="nom"><br />
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><br />
<INPUT type="radio" name="sexe" value="Homme"> Homme<br />
<INPUT type="radio" name="sexe" value="Femme"> Femme<br />
<INPUT type="submit" value="Envoyer"> <INPUT type="reset">
</P>
</FORM>
SELECT modifier
Syntaxe modifier
<SELECT name="nom du menu déroulant">
Exemple modifier
- Pour créer un menu déroulant qui affiche les projets Wikimédia en français, et renvoie leur nom en anglais.
<SELECT name="Wikimédia">
<OPTION VALUE="Wikipedia" SELECTED>Wikipédia</OPTION>
<OPTION VALUE="Wiktionary">Wiktionnaire</OPTION>
<OPTION VALUE="Wikiversity">Wikiversité</OPTION>
<OPTION VALUE="Wikinews">Wikinews</OPTION>
<OPTION VALUE="Wikibooks">Wikilivres</OPTION>
<OPTION VALUE="Wikisources">Wikisources</OPTION>
<OPTION VALUE="Wikiquotes">Wikiquotes</OPTION>
</SELECT>
TEXTAREA modifier
Syntaxe modifier
<TEXTAREA rows="nombre de lignes -1" name="commentaires">
Exemple modifier
- Pour créer une zone de saisie de 6 lignes :
<TEXTAREA rows="5" name="suggestions">
Entrer ici vos suggestions</TEXTAREA>
Upload modifier
INPUT TYPE="file" :
<!-- Écrire un email à OTRS -->
<FORM NAME="permission" ACTION="mailto:permissions-fr@wikimedia.org" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="PièceJointe" SIZE="20">
</FORM>
Voir aussi modifier
Balises HTML
Récapitulatif des balises XHTML modifier
| Effet | Balise | Signification |
|---|---|---|
| Document HTML | <html>...</html>
|
Hypertext Markup Language (langage hypertexte de balisage) |
| Entête de page | <head>...</head>
|
Head (tête) |
| Corps de page | <body>...</body>
|
Body (corps) |
| Titre de page | <title>...</title>
|
Title (titre) |
| Paragraphe | <p>...</p>
|
Paragraph (paragraphe) |
| Titre de paragraphe | <h1>...</h1>
|
Headings 1 (entête 1, existe jusqu'à l'entête 6) |
| Gras | <b>...</b>
|
Bold (gras) |
| Souligné | <u>...</u>
|
Underline (souligné) |
| Italique | <i>...</i>
|
Italic (italique) |
| Police | <font face="police">...</font>
|
Font face (police de caractère)[1] |
| Taille | <font size="taille">...</font>
|
Font size (taille des caractères) |
| Couleur | <font color="couleur">...</font>
|
Font color (couleur des caractères) |
| Commentaires | <!--...-->
|
- |
| Centrer | <center>...</center>
|
Center (centre)[1] |
| Abréviation | <abbr>...</abbr>
|
Abbreviation (abréviation) |
| Acronyme | <acronym>...</acronym>
|
Acronym (acronyme) |
| Adresse | <address>...</address>
|
Address (adresse) |
| Police plus grande | <big>...</big>
|
Big (grand)[1] |
| Citation | <q>...</q>
|
Quote (citer) |
| Instruction | <code>...</code>
|
Code (code) |
| Emphase | <em>...</em>
|
Emphasize (accentuer) |
| Police plus petite | <small>...</small>
|
Small (petit) |
| Texte accentué | <strong>...</strong>
|
Strong (fort) |
| Police barrée | <strike>...</strike>
|
Strike (rayer)[1] |
| Indice | <sub>...</sub>
|
Sub (sous) |
| Exposant | <sup>...</sup>
|
Superior (supérieur) |
| Texte clignotant | <span style=text-decoration:blink>...</span>
|
Span (taille) et blink (clignoter) |
| Texte invisible | <span style="display: none;">...</span>
|
Span (taille) et display (afficher) |
| Liste désordonnée | <ul>
|
Unordered list (liste désordonnée) |
| Liste ordonnée | <ol>
|
Ordered list (liste ordonnée) |
| Entrée de liste | <li>
|
Liste entry (entrée de liste) |
| Liste de définition | <dl>...</dl>
|
Definition list (liste de définition) |
| Terme de définition | <dt>...</dt>
|
Definition term (terme de définition) |
| Description de définition | <dd>...</dd>
|
Definition description (description de définition) |
| Tableau | <table>...<table>
|
Table (table informatique) |
| Entête de tableau | <thead>...</thead>
|
Table head (tête de tableau) |
| Contenu de tableau | <tbody>...</tbody>
|
Table body (corps de tableau) |
| Bas de tableau | <tfoot>...</tfoot>
|
Table foot (pied de tableau) |
| Groupe de colonnes | <colgroup span="2" width="40" align="left" />
|
Column group (groupe de colonne) |
| Légende de tableau | <caption>...</caption>
|
Caption (légende) |
| Ligne de tableau | <tr>...</tr>
|
Table row (ligne de table) |
| Entête de tableau | <th>...</th>
|
Table header (entête de table) |
| Données de tableau | <td>...</td>
|
Table data (données de table) |
| Formulaire | <FORM>...</FORM>
|
Form (formulaire) |
| Étiquette | <LABEL for="...">...</LABEL>
|
Label (étiquette) |
| Option | <OPTION VALUE="..." SELECTED>...</OPTION>
|
Option (option) |
| Sélection | <SELECT name="nom du menu déroulant">
|
Select (sélectionne) |
| Ajout | <INPUT type="..." value="..." name="...">[2]
Liste des attributs
|
Input (ajoute) |
| Aire | <AREA shape="circle" coords="90,58,3">[3]
|
area (aire) |
| Aire de texte | <TEXTAREA rows="..." name="...">
|
Text area (aire de texte) |
| Retour à la ligne | <br />
|
Break (casser) |
| Trait | <hr>
|
Horizontal rule (règle horizontale) |
| Hyperlien | <a href="http://...">...</a>
|
Hyperlink (hyperlien) |
| Image | <img src="....svg" width=50 height=50 alt="Image introuvable" align=left>
|
Image (image) |
| Déclaration XML | <?xml version="1.0" encoding="iso-8859-1"?>
|
ISO est le type de codage des caractères, et 8859 correspond aux latins |
Notez que les huit dernières balises n'en nécessitent pas fermante, elles sont appelées "balises en-ligne".
Références modifier
- ↑ 1,0 1,1 1,2 et 1,3 Balise désuète en HTML5
- ↑ http://www.w3schools.com/tags/att_input_type.asp
- ↑ http://www.w3schools.com/tags/tag_area.asp
Voir aussi modifier
Les cours de :
- XHTML
- XML
- CSS (balises <style>...</style>)
- Javascript (balises <script>...</script>)
 GFDL
|
Vous avez la permission de copier, distribuer et/ou modifier ce document selon les termes de la licence de documentation libre GNU, version 1.2 ou plus récente publiée par la Free Software Foundation ; sans sections inaltérables, sans texte de première page de couverture et sans texte de dernière page de couverture. |