doku:αΩ « Wikidd »

des 𝞹-pes, du sudo maso & la main sur l'hacker !

User Tools

Site Tools


prog:web:html
startSectionEdit: $data "plugin_wrap_start" is NOT an array! One of your plugins needs an update.
startSectionEdit: $data "plugin_wrap_end" is NOT an array! One of your plugins needs an update.

Hyper Text Markup Language

Il était temps que je démarre un petit quelque chose sur ce language. C'est le premier que j'ai appris, j'avais une dizaine d'années et tout ceci me rendait très curieux.

:!: Je ne suis pas un professionnel du “web document” (qui peut inclure une structure, un style et une interface d'interaction) donc cela devrait rester basique.

A propos

Le HyperText Markup Language, généralement abrégé HTML ou dans sa dernière version HTML5, est le langage de balisage conçu pour représenter les pages web.

Ce langage permet :

  • d’écrire de l’hypertexte, d’où son nom,
  • de structurer sémantiquement la page,
  • de mettre en forme le contenu,
  • de créer des formulaires de saisie,
  • d’inclure des ressources multimédias dont des images, des vidéos, et des programmes informatiques,
  • de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web.

Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS). HTML est inspiré du Standard Generalized Markup Language (SGML). Il s'agit d'un format ouvert.

Wikipédia

Il constitue maintenant un standard incontournable pour les ressources en réseaux partagées en HTTP.

Principe

Il s'agit d'un language à balise : chaque élément est défini par une balise d'entrée <balise> et une balise de sortie </balise>. Tout ce qui est inclu dans ces balises constitue un sous-ensemble en terme de structure. On peut ensuite inclure des balises dans des balises, par exemple :

<div>DIVISION 1
 <div>SUB DIVISION 11</div>
 <div>SUB DIVISION 12</div>
</div>

Synthétiquement, les divisions 11 et 12 sont les éléments enfants de la division 1.

:!: Chaque balise est soit fermante (possède deux balises distinctes pour ouvrir et fermer le bloc : <tag>…</tag>) ; soit auto-fermante (possède une seule balise qui se termine obligatoirement par /> : <meta … />).

Base d'un document

Un document HTML est constitué d'une structure <html> composée de deux blocs : <head> et <body> (respectivement l'en-tête et le corps du document).

Sûrement le bout de code que j'ai le plus tapé dans ma vie :-) :

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

:!: J'ai écrit <html> en majuscule pour que ce ne soit pas interprété par Dokuwiki1) mais - a priori - la casse des balises n'est pas signifiante.

<!DOCTYPE html> indique aux programmes qu'il s'agit d'un document HTML
<HTML> ouvre le document
<head></head> reçoit des mêta informations (relatives au document mais ne figurant pas dans son contenu)
<body></body> reçoit le corps de document : tout le contenu structuré à partager
</HTML> ferme le document, plus rien ne sera traité à partir de là pour le rendu HTML

Reçoit les mêta informations du document, typiquement :

  • L'encodage du document (utf-8, iso-8859-1, Latin-1, etc..)
  • Le titre de la page2) (via <title>) : <title>Le titre de la page</title>
  • Des liens nécessaires au rendu du document via la balise <link>, par exemple un lien pour une feuile de style:
<link rel="stylesheet" type="text/css" href="/lien/vers/le/style.css"/>
  • Toute information que vous jugez pertinente via les balises <meta> :
<meta name="Date d'édition" content="2020-12-12"/>
<meta name="Date de révision" content="2020-12-13"/>

Exemple :

<head>
  <meta charset="utf-8"/>
  <meta name="Creation-YYYYMM" content="200802"/>
  <link rel="stylesheet" type="text/css" href="/lien/vers/le/style.css"/>
  <title>Nouvelle Page</title>
</head>

Les balises <meta> reçoivent un contenu arbitraire via les attributs name et content. Ici on indique la date de création de la page.

body

:!: TODO


Formulaires

Premier exemple concernant les formulaires (qui m'occupent un peu en ce moment).

Un exemple simple de formulaire :

  • Un prénom
  • Un nom de famille
  • Un âge (facultatif)

On aura besoin de la balise <form> pour encapsuler le contenu du formulaire. Elle reçoit un nombre arbitraire d'élements, ici trois champs “texte” et un bouton pour valider. Mozilla Docs : en savoir plus

Structure

Structure du formulaire (qui sera contenu dans notre <body>3) ) :

<form>
    <input/>
    <input/>
    <input/>
    <button></button>
</form>
input est une balise auto-fermante d'ou le / final dans la balise unique.

D'ailleurs on va configurer ces balises input pour notre cas au fur et à mesure.

Configuration des champs

Et là - sans plus attendre - je peux vous renvoyez chez Mozilla Docs. La balise input dispose des attributs classiques mais aussi d'attributs plus spécifiques à la saisie qui nous intéresse, notamment le type :

button un bouton sans comportement défini.
checkbox une case à cocher qui permet de sélectionner/déselectionner une valeur
color un contrôle qui permet de définir une couleur. (HTML5)
date un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année). (HTML5)
datetime-local un contrôle qui permet de saisir une date et une heure (sans fuseau horaire). (HTML5)
email un champ qui permet de saisir une adresse éléctronique. (HTML5)
file un contrôle qui permet de sélectionner un fichier. L'attribut accept définit les types de fichiers qui peuvent être sélectionnés.
hidden un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.
image un bouton graphique d'envoi du formulaire. L'attribut src doit être défini avec la source de l'image et l'attribut alt doit être défini avec le texte alternatif. Les attributs height et width permettent de définir la taille de l'image en pixels.
month un contrôle qui permet de saisir un mois et une année (sans fuseau horaire). (HTML5)
number un contrôle qui permet de saisir un nombre. (HTML5)
password un champ texte sur une seule ligne dont la valeur est masquée. Les attributs maxlength et minlength définissent la taille maximale et minimale de la valeur à saisir dans le champ.
radio un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.
range un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante. (HTML5)
reset un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.
search un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés. (HTML5)
submit un bouton qui envoie le formulaire.
tel un contrôle pour saisir un numéro de téléphone. (HTML5)
text un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.
time A control for entering a time value with no time zone. (HTML5)
url un champ permettant de saisir une URL. (HTML5)
week un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire). (HTML5)

L'avantage (qu'on va développer) est d'avoir accès à un format spécifique à notre saisie.

Formulaire v1

L'idée est de tirer le meilleur parti du standard HTML4) sans trop contraindre la saisie au niveau client. Le résultat du formulaire est censé être envoyé quelque part (sur un serveur tiers, peut-être) pour poursuivre le traitement. Certaines vérifications doivent se faire au niveau du serveur (typiquement les informations sensibles - propres aux individus en premier lieu - mais aussi d'un point de vue technique). Ici je ne traite bien que la partie “navigateur” donc.

TODO : compléter le formulaire (Avertir des règles du formulaire…) + explications des attributes ;-)

<!-- FORMULAIRE : PRENOM / NOM / AGE -->
<form action="javascript:void(0)" onsubmit="lastcheck()">
 <div class="flex col">
  <p class="form-title">Please fill your name and age below</p>
  <hr class="separator"/>
  <p>
   <label>Firstname *</label>
   <input name="firstname"  
          id="firstname"  
          placeholder="ex: Shini, Yiu, Jean-Mouloud" 
          type="name" 
          required 
          pattern="[A-Z][a-z]*(-[A-Z][a-z]*)?"/
  </p>		
  <hr class="separator"/>
  <p>
   <label>Lastname *</label>
   <input name="lastname"  
          id="lastname"  
          placeholder="ex: Traoré, Dupont-Tignan, O" 
          type="name" 
          required 
          pattern="[A-Z][a-z]*(-[A-Z][a-z]*)?"/>
  </p>
  <hr class="separator"/>
  <p>
   <label>Age</label>
   <input name="age"  
          id="age"  
          placeholder="ex: 18, 34, 89" 
          type="age" 
          pattern="[0-9]{1,3}"/>
  </p>
  <text class="flex row" style="background:transparent;font-size:0.8rem;position:relative;left:90%">* : Required fields</text>
 </div>
 <div class="flex col" style="align-self:baseline">
  <p>
   <button type="submit">Submit</button>
  </p>
 </div>
</form>
<!-- CODE JS -->
<script>
 <!-- CONFIRMER FORMULAIRE : PRENOM / NOM / AGE -->
 function lastcheck() {
  var f = document.getElementById("firstname").value
  var l = document.getElementById("lastname").value
  var a = document.getElementById("age").value
  var message = "Firstname : "+f+"\nLastname : "+l+"\nAge : "+a+"\nConfirm the values?"
  confirm(message)
 }
</script>

Le rendu est ici si vous voulez toute la source.


Références

1)
et que ce soit visible à la lecture
2)
et non pas du corps
3)
en tout bien, tout honneur !
4)
attention aux versions de rendu, argh!
/home/duke/www/dukeart/wiki/data/pages/prog/web/html.txt · Last modified: 2021/03/20 07:33 by duke