Informations générales de développement numérique.

Informations MEZOTICAM - Activités générales : Plus de masque, mais restons vigilants. Les contraintes sanitaires obligent à un ralentissement des développements. | Guerre en Ukraine : Un conflit qui mène à une pénurie alimentaire et informatique. | Cybersécurité : La guerre en Ukraine nous montre combien il est important de renforcer la sécurité informatique.
Chiffre 1Chiffre 6Chiffre 3Chiffre 1Chiffre 2Chiffre 0
depuis le 15/05/2009
Lundi 4 Juillet 2022 | Saint Florent

Composition d'une page HTML

Introduction

Créer une page web, rien de plus simple. Elle doit être délimitée par des TAGs. Un tag se trouve presque toujours en deux parties, l'un ouvrant et l'autre fermant. S'il n'y a pas de tag fermant, le tag se termine par un slash (exemple: <br>).

Mais le 1er tag qui délimte la page est :

<html>

et la page se termine par un 2ème tag :

</html>

A l'intérieur de ces tags principaux, peuvent s'en trouver des dizaines d'autres, mais les principaux pour former une page de base sont :

<head>
  <title></title></head><body></body>

Composition d'une page

<!DOCTYPE html>
<html><head>
  <title></title></head><body></body>
</html>

Autres balises (TAGS)

Une section
<div></div>
Un paragraphe
<p></p>
Une image
<img />

Cette balise prend des paramètres

  1. Source de l'image:
      src="chemin et nom du fichier"
  2. Taille de l'image:
      width="largeur_image_en_pixels"
    height="hauteur_image_en_pixels"
  3. Alternative:
      alt="Texte_alternative"
  4. Titre:
      title="Texte_du_titre_de_l_image"

Balise complète

<img src="chemin_images/nom_image.jpg" width="250" height="114" alt="Image d'illustration" />
Haut

Protocole

Le language utilisé pour créer une page web est le HTML (HyperText Marckup Langage). Le navigateur contient une partie qui interprète le texte du document afin d'afficher les éléments voulus. Comme sont l'indique, ce language comporte des "marqueurs", (en anglais Tag).

Une page web commence toujours par le premier Tag <html> (début),
et se termine par le dernier Tag </html> (fin).

Entre ces deux Tags viennent se placer plusieurs autres, notamment, <body> (début) et </body> (fin), qui délimitent le corps de la page.
Une partie supérieure constitue la tête de la page et utilise les Tags <head> (début) et </head> (fin).

Entre les tags <head> (début) et </head> (fin), se trouve plusieurs autres qui servent à la descriptions de la page et autre titre. Exemple pour le titre, on aura : <title> (début) et </title> (fin)


Le HTML consiste en un partitionnement du document, par marquage à l'aide de Balises. Certaines parties sont obligatoires et d'autres optionnelles. Toutes se trouvent dans des Étiquettes marquant généralement le début et la fin de la marque. Ces étiquettes permettent de différencier et d'identifier chaque partie.

A cause de la disparité des ordinateurs, il a fallu que l'auteur leur trouve un point commun à tous, afin que le langage soit compatible. Ce point commun est la plage de caractères utilisée pour écrire le texte du script du document HTML.

Le code ASCII est un standard connu de tous les systèmes informatiques et utilise les valeurs numériques de 32(25) à 128 (27).

Le Navigateur a besoin des commandes que sont les étiquettes pour afficher le document.

Exemple

Lors de la création d'un document il est inutile de faire des "retour à la ligne" en appuyant sur la touche entrée, le navigateur ne comprendra pas. La commande qui permet un retour à la ligne dans celui-ci est : <br>. Cette commande est solitaire, c'est à dire qu'il ne comporte pas de commande de fermeture.

Les paramètres acceptés par certaines étiquettes se placent à l'intérieur de celles-ci.

Exemple

L'étiquette de lien HyperTexte <a> admet plusieurs type de paramètres, vers l'extérieur ou à l'intérieur du document lui-même, dont l'un d'entre-eux peut être
<a href="http://www.nomsite.com/nomdocument.html">Document </a>

Il est très important de réaliser un bon codage du document, car tous les pays ne disposent pas des mêmes caractères pour les mêmes valeurs numériques. L'utilisateur n'a besoin que d'une chose, c'est de comprendre très rapidement ce qu'il a sous les yeux.


 <html>...</html>

Début et Fin d'un Document HTML. Sans ces deux étiquettes, le document n'est pas reconnu en tant que tel.
(Implicitement, si la première balise se trouve au début du document, celui-ci est reconnu en tant que page web.)

Étiquettes contenues entre les marques <html> et </html>

Balises entre <html> et </html>
 <head> </head>  En-tête du document. Contient un grand nombre d'informations sur celui-ci. Ces deux marques sont contenues comme toutes les autres, entre les marques de Début et de Fin de document.
 <body> </body>  Contient tout ce qui sera affiché dans le Navigateur, c'est le corps du document.
Haut

Étiquettes contenues entre les marques <head> et </head>

Attributs de la balise <head>
 <title> </title>  Titre du Document. Le Navigateur affiche ce texte dans la barre de titre de la fenêtre.
 <meta >  Permet l'insertion de commandes destinées au navigateur et autres recherches.

 name

 Indique le nom de la méta commande à utiliser.

content

Définit le contenu de name.

 <link >  Permet l'insertion d'un lien vers des fichiers destinées à la mise en page du navigateur et autres .

 href

Indique le chemin à suivre pour atteindre le fichier.

type

Définit le type de contenu de href.

rel

Définit la relation entre le document en cours et cette ressource.

Utilisation
	<meta charset="utf8" >
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="nom auteur" >
	<link href="https://www.mezoticam.fr/style.css" type="text/css" rel="stylesheet" >

Étiquettes contenues entre les marques <body> et </body>

Ancre

<a>lien</a>

Établi un lien avec un autre document,
ou sert de point de repère dans un document.


Attributs de la balise <a>
href='url' Adresse de la cible

title='texte'

Spécifie un titre pour le document cible.

name='texte'

Identifie et nomme une partie du document. Celle-ci peut-être référencée dans une URL ('#lenom').

target=nom

Spécifie le nom de la fenêtre où sera affiché la page.
nom est :

_blank  Ouvre une nouvelle fenêtre de navigation.
_self  Ouvre dans le même fenêtre que le document source.
_parent  Le document est chargé dans la frame parent.
_top  Force le chargement du document dans la fenêtre de niveau le plus élevé.

coords='coordonnées x,y'

Spécifie les coordonnées d'une zone cliquable d'une image réactive. (utilisé avec l'attribut shape).

shape='zone'

Spécifie les coordonnées et la forme d'une zone cliquable d'une image réactive.

circle x,y,r
rect x,y,w,h
poly x1,y1,x2,y2...
polygon x1,y1,x2,y2...


Zone réactive

<area>

Utilisé à l'intérieur du marqueur map afin de définir une zone réactive d'une image.


Attributs de la balise <area>

coords='valeur'

Spécifie uune liste de coordonnées (en pixels), séparées par des virgules.
En fonction de la valeur de shape, cette zone sera :

  • rectangulaire
  • circulaire
  • polygonale
  • href='url'

    URL d'une zone

    nohref

    Zone réactive sans action lors d'un clic.

    shape=forme

    Le nom prédéfini de la forme peut être :
  • rect ou rectangle
  • circ ou circle
  • poly ou polygon
  • Il est nécessaire d'utiliser coords


    Tableau

     <table>...</table>

    Permet de construire un tableau pour une présentation structurée. D'autres étiquettes viennent entre ces marques, pour définir les cellules composant le tableau. Ce sont les étiquettes de ligne et de colonne. Toutes peuvent contenir des .

    Attributs de la balise <table>

    <tr>...</tr>

    Définit une ligne dans un tableau.

    <th>...</th>

    Définit une cellule d'un tableau comme en-tête.

    <td>...</td>

    Définit une colonne dans un tableau.


    Section

     <div>...</div>

    Début et fin d'une division de page.

    Attributs de la balise <div>

    align=left/center/right

    Aligne le texte se trouvant dans cette zone, à gauche, au center ou à droite.
    Haut

    Étiquettes contenues entre les marques <body> et </body>

    Imagerie

    <img>

     Insère une image dans la page. balise simple

    Attributs de la balise <img>
     src='nomfichier'  Indique la source de l'image
     alt='Texte'  Texte remplaçant l'image le temps du chargement.
     border='valeur'  Indique si l'image doit comporter une bordure pour signaler un lien.
     align=type  Alignement de l'image

     absbottom

     Le bas de l'image avec le bas de la ligne

     absmiddle

     Le milieu de l'image avec le milieu de la ligne.

     baseline

     Le bas de l'image avec le bas de la ligne courante.

     bottom

     Le bas de l'image avec le bas de la ligne. (valeur par défaut)

     center

     Centre l'image horizontalement dans la page.

     left

     L'image se trouve placé à gauche et le texte à sa droite.

     middle

     La base du texte avec le milieu de l'image.

     right

     L'image à droite et le texte se déroule à sa gauche.

     texttop

     Le haut de l'image avec le haut du texte.

     top

     Le haut de l'image avec l'élément le plus haut.

     height=valeur  Hauteur en pixels
     ismap  indique l'utilisation d'une zone sensible sur une image réactive.
     usemap=url  Carte contenant les coordonnées de la zone sensible.
     width=valeur  Largeur de l'image en pixels.

    Button | Input | Option


    Étiquettes contenues entre les marques <body> et </body>

    Formulaire

      <form>...</form>
    

    Un formulaire est une zone toujours délimitée pour la saisie de données. Les éléments placé à l'intérieur de ces marques font tous partie d'un seul et même ensemble.

    Attributs de la balise <button>
     <button>  Bouton identique au bouton standard créé avec <input>, mais sur lequel il est possible insérer une image.

    name=texte

    Donne un nom au contrôle.

    value=texte

    Valeur initiale du bouton.

    type = submit / reset / button

    Suivant le type, le bouton servira à :
     Soumettre le formulaire.
     Effacer le formulaire.
     Réaliser une définit par le webmaster.


    Attributs de la balise <input />
     <input />  Bouton "push" dont le comportement est fonction du type choisi.
    En fonction du TYPE

    =button

    Bouton

    name=texte -> Donne un nom au formulaire à traiter.
    value=texte -> Valeur initiale du paramètre.

    =checkbox

    Case à cocher

    checked -> La case est cochée par défaut.
    name=texte -> Donne un nom à la case à cocher, pour le traitement.
    value=texte -> Valeur initiale.

    =file

    Transmet un fichier avec le formulaire

    accept=type MIME -> Spécifie une liste de type de contenus. Permet aussi de filtrer les fichiers.
    name=texte ->Donne un nom au contrôle.
    value=texte -> Spécifie le nom du fichier initial.

    =hidden

    Contrôles cachés servant à transmettre des informations au serveur pour le traitement.

    name=texte -> Nom du paramètre passé.
    value=texte -> Valeur du paramètre soumis.

    =image

    Subtitut une image au bouton submit

    align=top/middle/bottom -> Aligne le texte en fonction des lignes de texte.
    name=texte -> Nom du paramètre à soumettre.
    src=url -> Donne l'adresse de l'image.

    =password

    Elément de saisie de mot de passe. Tous les caractères sont remplacés par un (*). Rien à voir avec l'encryptage.

    maxlength=nombre -> Nombre maxi de caractères.
    name=texte -> Nom de l'élément à soumettre.
    size=nombre -> Taille de la zone de saisie (ne pas confondre avec nombre maxi de caractères).
    value=texte -> Contenu initial de la zone.

    =radio

    Bouton pouvant être activé ou désactivé. Si plusieurs portent le même nom (groupe), un seul peut-être activé.

    checked -> Force l'activation du bouton.
    name=texte -> Nom du contrôle.
    Value=texte -> Valeur du paramètre soumis à traitement.

    =reset

    Remet tous les éléments d'un formulaire à leur valeur initiale.

    value=texte -> Texte apparaîssant sur le bouton.

    =submit

    Envoie l'ensemble des données du formulaire au programme de traitement.

    value=texte -> texte apparaîssant sur le bouton.

    =text

    Zone de saisie de texte.

    maxlength=nombre -> Nombre maxi de caractères pouvant être saisies.
    name=texte -> Nom de l'élément.
    size=nombre -> Taille de la zone de saisie.
    value=texte -> Valeur initiale apparaîssant dans la zone.


    Attributs de la balise <option>
     <option>  Une proposition de liste à choix multiple placée entre les marques<select>...</select>.

    selected

    Présélection d'un item dans la liste.

    value=texte

    Valeur transmise à la place du contenu de <option>.

    width=nombre

    Largeur de l'objet (en pixel).


    Attributs de la balise <select>
     <select>  Menu à choix multiples ou liste déroulante.
     Contient <option>.

    multiple

    Permet la sélection de plusieurs éléments dans la liste proposée.

    name=texte

    Nom de l'élément de <option>.

    size=nombre

    Si =1 (multiple non utilisé), la liste est sous forme de menu. Une valeur autre présente la liste sous forme de liste déroulante.


    Attributs de la balise <textarea>
     <textarea>  Zone de texte à plusieurs lignes.

    cols=nombre

    Largeur visible du champs (en nombre de caractères).

    name=texte

    Nom de l'élément, qui sera transmis au traitement.

    rows=nombre

    Hauteur visible de la zone (en nombre de lignes).

    warp=soft/hard/off

    Retour à la lignes. (Traitement logiciel, physique, désactivé)

    Haut

    Etiquettes contenues entre les marques <body> et </body>

    Formulaire (suite)


    Attributs de la balise <select>
     <select>  Menu à choix multiples ou liste déroulante.
     Contient <option>.

    multiple

    Permet la sélection de plusieurs éléments dans la liste proposée.

    name=texte

    Nom de l'élément de <option>.

    size=nombre

    Si =1 (multiple non utilisé), la liste est sous forme de menu. Une valeur autre présente la liste sous forme de liste déroulante.


    Attributs de la balise <textarea>
     <textarea>  Zone de texte à plusieurs lignes.

    cols=nombre

    Largeur visible du champs (en nombre de caractères).

    name=texte

    Nom de l'élément, qui sera transmis au traitement.

    rows=nombre

    Hauteur visible de la zone (en nombre de lignes).

    warp=soft/hard/off

    Retour à la lignes. (Traitement logiciel, physique, désactivé)

    Le contenu des pages web devront forcément tenir compte de la technologie mise en œuvre par le Protocole de communication prévu, ainsi que le Format de contenus. En l'occurence, le HTTP (HyperText Transfert Protocole), et le HTML (HyperText Markup Language).

    Quand un client demande une page (Requête), le serveur la lui fait parvenir. Ceci se fait grâce au protocole HTTP et TCP (Tranfert Controle Protocole)

    Réponse :

    <!DOCTYPE html><html>
      <head>
       <title>Example</title>
       <meta charset="utf-8"
      </head>
      <body>
       <p>Ceci est une page d'exemple.</p>
      </body></html>
    

    Avec ce code, entre autres choses, le navigateur web pourra afficher la page. C'est grâce au nom de la page (URI Uniform Resource Identifier) que le serveur a pu permettre au navigateur d'afficher cette page. À noter que l'URI peut contenir l'URL (Uniform Resource Locator) ou l'URN (Uniform Resource Name) ou les deux. D'une manière générale, seule l'URL sera évoquée et utilisée pour passer une requête avec le navigateur.

    URL : Permet de localiser physiquement le document recherché.
    URN : Identifie le document, mais ne le localise pas.

    Le fichier que le serveur recherche par défaut dans la racine d'un site web se nomme index avec pour extension .html, .htm ou .php
    Ainsi, le premier fichier du site devra porter le nom index.

    Exemple :

    index.html ou index.htm ou index.php

    Les autres fichiers peuvent avoir n'importe quel nom (en respectant la convension) et se situer ou bien dans la racine du site ou dans des dossiers.

    Une chose importante, la mise en forme de la page. Pour ce faire, le language HTML peut être suppléé par le CSS (Cascading Style Sheet).

    Le CSS reprend les tags du HTML et permet à l'utilisateur d'en créer autant qu'il le désire. Ce language de script respecte une syntaxe bien définie, et permet de réaliser une mise en page selon la norme W3C.

    Exemple :

    /*--- Tag HTML ---*/body{ 
      color: #0023ef;
      background-color: #06fe0f;
     }
    
     /*--- Tag Personnalisé ---*/
     .monstyle{
      font-family: Verdana;
      color: #f6feff;
     }
    

    Ce qui donne une couleur de fond verte et une couleur de texte bleue pour le corps de la page et une couleur très claire pour la définition .monstyle .
    À l'affichage de la page, le tag HTML est automatiquement utilisé comme défini dans le style, tandis que le tag personnalisé sera actif selement aux endroits définis par le programmeur.
    Résultat :

    Ceci est un exemple.
    mon style

    Ce style de mise en page peut-être inséré dans la page même ou mis dans un fichier à part. L'intérêt de mettre toute la mise en page dans un fichier à part, est de tout centraliser et de s'assurer une mise au point simplifiée.


    Exemple 1

    Exemple de fichier index.html :

    <!DOCTYPE html>
    <html><head>
      <title>Page d'accueil du site</title></head><body>
      <p>Bonjour le monde</p>
      <p>
       Je suis heureux de vous acueillir sur mon site, où je vous présenterai
        mes photos de vacances.<br>
       Voilà ma première image.<br>
      </p>
      <div align="center"><img src="images/maphoto.jpg" alt="Ma photo de vacances"></div>
      </body>
    </html>
    

    Voir l'

    Exemple 2

    Exemple de fichier index.html avec une mise en page dans le fichier même :

    <!DOCTYPE html>
    <html><head>
      <title>Page d'accueil du site</title>
      <style type="text/css" rel="stylesheet">
      /*--- Tag HTML ---*/
      body{ 
       color: #0023ef;
       background-color: #06fe0f;
      }
    
      /*--- Tag Personnalisé ---*/
      .monstyle{
      font-family: Verdana;
      color: #f6feff;
      }
     </style></head><body>
      <p>Bonjour le monde</p>
      <p class="monstyle">
       Je suis heureux de vous acueillir sur mon site, où je vous présenterai
        mes photos de vacances.<br />
       Voilà ma première image.<br />
      </p>
      <div align="center"><img src="images/maphoto.jpg" alt="Ma photo de vacances"></div></body>
    </html>
    

    Voir l'


    Exemple 3

    Exemple de fichier index.html avec une mise en page dans un fichier .css :

    <!DOCTYPE html>
    <html><head>
      <title>Page d'accueil du site</title>
      <link href="monexemple.css" type="text/css" rel="stylesheet" /></head><body>
      <p>Bonjour le monde</p>
      <p class="monstyle">
       Je suis heureux de vous acueillir sur mon site, où je vous présenterai
        mes photos de vacances.<br />
       Voilà ma première image.<br />
      </p>
      <div align="center"><img src="images/maphoto.jpg" alt="Ma photo de vacances" /></div></body>
    </html>
    

    Contenu du fichier monexemple.css :

    /*--- Tag HTML ---*/body{ 
      color:#0023ef;
      background-color:#06fe0f;
     }
    
     /*--- Tag Personnalisé ---*/
     .monstyle{
      font-family: Verdana;
      color: #f6feff;
     }
    

    Voir l'

    Le résultat entre l'exemple 2 et l'exemple 3 est absolument identique, mais la différence est grande. En effet, à l'aide d'un fichier .css, tous les fichiers du site pourront accéder à la même mise en page. Et ce grâce, d'une part, à la ligne incluse dans l'en-tête des pages :

    ...
      <link href="monexemple.css" type="text/css" rel="stylesheet" />
    ...
    

    et d'autre part, à l'utilisation des class définies par le programmeur dans ce fichier .css.

    ...
      <p class="monstyle">
    ...
    

    Pour exister, un site web doit se trouver sur un Serveur web. Il s'agit d'un ordinateur dont la seule fonction sera de répondre à la demande d'un autre ordinateur nommé "Client". En l'occurence, transmission d'un document à afficher, à l'aide d'un navigateur.

    Ces documents (ou pages), régit par une structure interne très précise, peuvent contenir du texte seul ou des images, ou les deux.

    Dans un site web, le nombre de pages n'est pas limité, mais il faut faire de telle sorte que l'essentiel soit sur chaque page, le plus clairement possible.
    À mesure que le nombre de pages augmente, le travail de maintenance s'intensifie et les difficultés sont proportionnelles.

    Il convient de bien structurer son site pour une bonne maintenance et une bonne navigation de page en page. Pour celà, le "rangement" permet de classer en rubriques chaque thème abordé.

    Rubrique de récapitulation

    Un site écrit en scripts PHP allège la maintenance et facilite l'optimisation.


    Rappels

    Le document qui compose une page, comporte des éléments de délimitation, appelés Balises. Chaque balise a une fonction bien définie.

    Délimitation du document : <html></html>

    Délimitation de l'en-tête et du corps de la page à l'aide des tags <head></head> et <body></body>

    <!DOCTYPE html>
    <html><head>
      <title>Exemple</title>
      <link href="lestyle.css" type="text/css" rel="stylesheet"></head><body>
      <p class="lestyle">
       Le texte qui doit être afficher.
      </p></body>
    </html>
    

    Autres contenus essentiels dans l'en-tête

    Pour une bonne prise en charge de la page par le navigateur, il est important de lui indiquer le type de données et les caractères à utiliser pour l'affichage.
    Pour celà, on utilise des Métas commandes. Celles-ci servent aussi à d'autres marquages.

      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    ...
      <meta name ="description" content ="Les Cours de Ma zone web" />
      <meta name ="keywords" content ="Cours informatique, création, site, serveur, client" />
    ...
    

    C'est aussi dans cette zone que l'on inclus certains fichiers externes, grâce aux commandes link (pour un fichier .css) et script (pour un fichier .js Javascript).

      <link href="nomfichier.css" rel="stylesheet" type="text/css" />
      <script language="JavaScript" src="nomfichier.js"></script>
    

    Le titre de la page permet de l'identifier, et celui-ci apparaît dans la barre de titre de la fenêtre.

      <title>Titre de la page</title>
    

    Des liens hypertextes sur la page permet d'accéder aux autres pages, grâce à la balise
    <a href="URL_de_la_Page">Texte_du_lien</a>

    ...
      <ahref="decouv.htm">Découverte</a>
    ...
    
    Haut

    Étiquettes contenues entre les marques <body> et </body>

    Tableau : Paramètres

    Paramètres de Tableau
    <table> Début de la Table.
    align=left/center/right Centre un tableau dans une page.
    background=url Place une image dans le fond du tableau.
    bgcolor=#rrvvbb ou nom de couleur Couleur de fond de la table.
    border=valeur Spécifie la largeur de la bordure à placer autour de la table.
    <tr> Définit une ligne.
    align=left/center/right Aligne le texte de la ligne.
    bgcolor=#rrvvbb Couleur de la ligne de la table.
    valign=top/middle/bottom/baseline Alignement verticale du texte des cellules de la ligne.
    background=url Image pour le fond de la ligne.
    border=#rrvvbb Couleur de bordure pour la ligne.
    bordercolorlight=#rrvvbb Couleur du liseré ombré de la bordure de la ligne.
    bordercolordark=#rrvvbb Couleur du liseré clair de la bordure de la ligne.
    <td> Définit une cellule.
    align=left/center/right Aligne le texte dans la cellule concernée.
    background=url Image de fond de la cellule.
    bgcolor=#rrvvbb Couleur de fond de la cellule.
    colspan=valeur Spécifie le nombre de colonnes sur lesquelles cette cellule s'étend.
    height=valeur Hauteur de la cellule (en nombre de pixels ou pourcentage).
    rowspan=valeur Spécifie le nombre de lignes sur lesquelles s'étend la cellule courante.
    valign=top/middle/bottom/baseline Alignement verticale du texte dans la cellule.
    width=valeur Largeur de la cellule (en nombre de pixels ou pourcentage).
    <th> Définit une cellule d'en-tête de table. Sera mise en gras, alignée verticalement et horizontalement dans la cellule.
    Mêmes balises que <td> Voir liste de <td>.
    Haut

    Étiquettes contenues entre les marques <body> et <body>

    Formulaire (suite)

    Utilisation de <select>

    Créé un élément de liste proposant un choix aux utilisateurs.

    Script
    
    	<select>
    	<option>Faites un choix</option>
    	<option>Proposition #1</option>
    	<option>Proposition #2</option>
    	<option>Proposition #3</option>
    	</select>
    
    
    Résultat

    Etiquettes contenues entre les marques <body> et </body>

    Formulaire (suite)

    Utilisation de <textarea>
    Créé un élément de saisie de texte pour les utilisateurs.
    Script

    <textarea wrap="hard" name="message" cols="30" rows="10" />


    warp="hard"  Permet de transmettre les retours à la ligne au serveur.
    name="message"  Transmet une variable nommé message, contenant le texte saisi.
    Résultat

    Cliquez dans la zone pour faire une saisie !

    Exemple 1

    Exemple 2