Une question, un commentaire, une suggestion : Contactez-moi


Deuxième jour

Nous sommes le 2 février 2022, allez c'est la dernière journée consacrée presque exclusivement au HTML. Nos yeux devraient moins saigner à partir de demain.

1 - La session

1.1 - Tableaux et formulaires

1.1.1 - Les tableaux

L'élément HTML <table></table> permet de représenter un tableau de données, des informations exprimées sur un tableau en deux dimensions (lignes et colonnes).

1.1.1.2 - Les lignes et colonnes

La balise <tr></tr> (pour table row, ligne de tableau) définit une nouvelle ligne.

La balise <td></td> (pour table data, donnée de tableau) définit une nouvelle cellule/colonne.

1.1.1.3 - Cellule de titre

La balise <th></th> permet de définir une cellule/colonne en tant que titre.

1.1.1.4 - Fusion des lignes et colonnes
  • L'attribut colspan="n" permet de fusionner n colonnes sur une ligne.
  • L'attribut rowspan="n" permet de fusionner n lignes.
1.1.1.5 - Personnalisation de la mise en forme

Plusieurs éléments de mise en forme peuvent être appliqués au tableau en tant qu'attribut.

  • L'attribut bgcolor="color" permet de colorer le fond de l'élément.
  • L'attribut bordercolor="color" permet de colorer la bordure de l'élément.
    •

Ces éléments ayant été dépréciés, les bonnes pratiques impliquent d'utiliser les propriétés CSS pour effectuer des personnalisation de mise en forme.

 		---- ----
Colonne 1 de la ligne 1 Colonne 2 titre (th) de la ligne 1 Colonne 3 de la ligne 1
c1 de la l2 c2 fusionnée avec c2, l2
c1 l3 fusionnée avec l4 c2 l3 c3 l3
c2 l4 c3 l4
Aperçu en version code :
Code avec

1.1.2 - Les formulaires

L'élément HTML <form> </form> permet de représenter un formulaire où l'utilisateur pourra fournir des informations (exemple : l'interface de connexion à un site web).

Le formulaire doit contenir un ou plusieurs champs de saisie <input type=""> ainsi qu'un bouton de type "submit" pour valider et soumettre les données saisies.

1.1.2.1 - La balise de champs de saisie

La balise <input type="x"> permet d'introduire un champs de saisie dont le type change l'apparence et le type de données à saisir/soumettre. Le la valeur de type par défaut est "text".

1.1.2.2 - Champs de saisie de texte
  • Texte sur une ligne

    <input type="text"> créera un champs de saisie de texte sur une seule ligne.
    Si l'utilisateur y insère des sauts de ligne, elles ne seront pas prises en compte par le navigateur lors de l'envoi des données.

 ---- ---- Exemple avec <input type="text"> :
  • Adresse électronique

    <input type="email"> créera un champs de saisie d'adresse électronique.
    Si l'utilisateur y entre un format d'adresse non valide, le navigateur déclenchera le message d'erreur "Veuillez saisir une adresse électronique valide" lors de la validation du formulaire.

 ---- ----

Exemple avec <input type="email"> et un bouton pour tester le message d'erreur :
  • Mot de passe

    <input type="password"> créera un champs de saisie de mot de passe. Les informations saisies sont masquées par défaut.

 ---- ---- Exemple avec <input type="password"> :
  • Recherche

    <input type="search"> créera un champs de saisie de recherche. L'apparence par défaut est la même que celle du type text.

 ---- ---- Exemple avec <input type="search"> :
  • Numéro de téléphone

    <input type="tel"> créera un champs de saisie de numéro de téléphone. Il n'y a pas de contrainte pour les informations saisies,
    mais certains appareils (notamment avec système d'exploitation de type mobile) afficheront un clavier virtuel adapté pour la saisie de numéro de téléphone une fois ce champs sélectionné.

 ---- ---- Exemple avec <input type="tel"> :
  • URL glossaire

    <input type="url"> créera un champs de saisie d'adresse électronique. Si l'utilisateur y entre un format d'URL non valide,
    le navigateur déclenchera un message d'erreur lors de la validation du formulaire.

 ---- ----

Exemple avec <input type="url"> et un bouton pour tester le message d'erreur :
  • Texte sur plusieurs lignes

    <textarea></textarea> créera un champs de saisie de texte dans lequel, à la différence du champs text, les sauts de lignes sont pris en charge.
    L'utilisateur peut interagir avec l'angle inférieur droit pour régler la taille du champs.

 ---- ---- Exemple avec <textarea></textarea> :
1.1.2.3 - Contenus déroulants
  • Boîte à sélection

    <select></select> créera une boîte à sélection. Chaque option à sélectionner doivt être spécifiée à l'intérieur d'une balise <option></option>.

---- ---- Exemple avec <select>><option>Option n</option></select> :
1.1.2.4 - Éléments à cocher
  • Case à cocher

    <input type="checkbox"> créera une case à cocher.
    L'attribut checked affichera la case cochée au chargement de la page.

---- ----
Exemple avec &<input type="checkbox"> :

Avec l'attribut checked :
  • Bouton radio

    <input type="radio"> créera un bouton radio.

    Les boutons radio peuvent être liés ensemble grâce à un attribut name commun. Dans ce cas, un seul bouton pourra être sélectionné à la fois.

 ---- ----
Exemple avec :
<label for="n">n</label>
<input type="radio" checked id="n" name="nombre">
1.1.2.5 - Boutons

Les boutons peuvent être créés de deux façons :

  • <input type="type de bouton" value="Texte du bouton">
  • <button type="type de bouton">Texte du bouton</button>
La différence réside dans le format du texte à l'intérieur du bouton. La balise button permet d'utiliser du contenu au format HTML alors que la balise input n'autorise que du texte brut.

  • Envoi

    type="submit" créera un bouton servant à réinitialiser les informations saisies dans le formulaire.

 ---- ----
Exemple avec <input type="submit" value="Envoi"> :
  • Réinitialisation

    type="submit" créera un bouton servant à valider et envoyer les données du formulaire.

 ---- ---- Exemple avec <button type="reset"></button> et l'ajout d'un caractère spécial :
  • Non-défini

    type="button" créera un bouton sans action prédéfinie mais personnalisable en JavaScript.

 ---- ---- Exemple avec <button type="button"></button> et l'ajout d'un caractère spécial :
1.1.2.6 - Autres champs
  • Date

    <input type="date"> créera un champs contenant par défaut au chargement les caractères jj/mm/aaaa. Cliquer dans le champs affichera un calendrier pour sélectionner la date voulue.

---- ----
Exemple avec <input type="date"> :
  • Couleur

    <input type="color"> créera un bouton de sélection de couleur.

---- ----
Exemple avec <input type="color"> :
  • Contenu caché

    <input type="hidden"> créera un élément invisible permettant de récupérer des informations sans saisie de la part de l'utilisateur (exemple : la date et l'heure de l'envoi des données).

  • Sélection de fichier

    <input type="file"> créera un bouton de sélection de fichier. Cliquer dessus affichera l'explorateur de fichier pour sélectionner le fichier souhaité.

---- ----
Exemple avec <input type="file"> :
  • Nombres

    <input type="number"> créera un champs pour la saisie de chiffres. Il ressemble au champs text mais n'accepte que les nombres en virgule flottante. Il est généralement doté d'un curseur pour augmenter ou diminuer la valeur saisie.

---- ----
Exemple avec <input type="number"> :
  • Curseur

    <input type="range" min="" max="" step=""> créera un curseur. C'est un autre moyen de saisir un nombre. Pour le configurer, il nécessite une valeur minimale, une valeur maximale et une valeur de variation (step)

 ---- ----
Exemple avec <input type="range" min="0" max="100" step="10"> :
  • Placeholder

    L'attribut placeholder="" permet d'afficher un texte descriptif dans le champs de saisie

---- ----
Exemple avec <input type="text" placeholder="Ceci est un placeholder"> :
Retour au sommaire

1.2 - Intégration de contenu

Tout comme avec l'élément <img>, il est possible d'incrémenter d'autres types de contenus provenant de ressources externes ou de fichiers stockés en local.

1.2.1 - Les ressources externes

<iframe></iframe> permet d'intégrer une ressource externe dans un cadre dont les dimensions sont réglables grace aux attributs de largeur width et de hauteur height (unité de mesure : pixels).

---- ---- Exemple de vidéo YouTube intégrée avec <iframe></iframe> :
Autre exemple avec GoogleMaps :
---- ---- Ou encore la page d'accueil de ce Journal de Bbord :


1.2.2 - Vidéos

<video></video> permet d'intégrer une vidéo. L'attribut controls permet d'inclure les contrôles par défaut du navigateur.

 ---- ---- Exemple de vidéo locale intégrée avec <video src="emplacement/fichier" type="video/mp4" controls></video> :

1.2.3 - Audio

<audio></audio> permet d'intégrer du contenu sonore. L'attribut controls permet d'inclure les contrôles par défaut du navigateur.

 ---- ---- Exemple de contenu sonore intégré avec <audio src="emplacement/fichier" controls></audio> :
Retour au sommaire

1.3 - Autres aspects

1.3.1 - Conteneurs génériques

Les conteneurs génériques s'opposent aux conteneurs sémantiques. Ils ne représentent rien en particulier et servent à appliquer des attributs sur des éléments ou groupes d'éléments

1.3.1.1 - "Petite" précision - Éléments de bloc ou en ligne

De base, il existe deux types d'éléments HTML : l'élément block et l'élément inline.

  • Les éléments en ligne (inline) seront disposés à la suite dans le sens de l'écriture.
  • Les éléments de bloc couvriront toute la largeur du bloc parent, il occupera donc une "ligne" entière.

L'élément block peut contenir d'autres éléments, block ou inline. L'élément inline lui ne contient que ses valeurs.

 Représentation d'un élément inline avec un élément span surlignés en bleu :

Les caractères sont en soi des éléments inline, tout comme le span.

1.3.1.2 - <span></span>

<span></span> est un conteneur générique de type inline.

 Représentation d'un élément block avec un élément div surlignés en jaune :

Le bloc est coloré sur toute sa surface.
les éléments à L'intérieur ayant les mêmes attributs si aucun autre ne leur est appliqué.

1.3.1.2 - <div></div>

<div></div> est un conteneur générique de type bloc.

 ---- ----
div 1
div 2 dans div 1 et le span dans div 2
span dans div 1
div 3
div 4 - Le tout codé sur une seule ligne

1.3.2 - Les éléments <meta>

Les balises <meta> sont définies dans l'en-tête et contiennent diverses informations
dont la nature et le contenu sont spécifiés par ses attributs name et content.

Voir 1.2 - Création d'une page web en HTML pour la partie sur l'en-tête

  • <meta name="application-name" content=""> définit le nom de l'application utilisée dans la page.
  • <meta name="author" content=""> définit le nom de l'auteur de la page.
  • <meta name="robots" content=""> définit le comportement des robots d'indexation vis à vis de la page.
 ---- ----
Métadonnées de cette page :
métadonnées de la page

1.3.3 Librairies d'icones

Il est possible de faire appel à des ressources externe pour afficher des icones sur sa page. Un des avantages est de ne pas avoir à centraliser ces ressources graphiques sur le serveur hébergeant le site.

Pour ce cours, ce site, et au moins pour un moment, nous utiliserons les ressources inconographiques de Font Awesome. Pour les intégrer au contenu, il suffit de :

2 - Les exercices

Formulaire

Consignes : Réaliser un formulaire contenant les éléments :

  • texte nom de famille
  • texte prénom
  • menu déroulant genre
  • sélection de couleur
  • bouton de validation
  • zone de texte commentaires

 ---- ----
Résultat :

Tableau

Consignes : Réaliser un tableau contenant :

  • une ligne de titre de trois colonnes
  • une image
  • une vidéo externe
  • une colonne avec un arrière-plan
  • une ligne sur une seule colonne en pied de tableau
  • une cellule colorée avec l'attribut style:"color=;"

 ---- ----
Résultat :
Au menu Aspect Avis
La Poutine c'est bon !
Le Nyan Cat c'est usant !
C'est tout !

Syntèse des deux premiers jours

Consignes : Reproduire les 3 pages fournies en .pdf contenant :

En page 1, page d'accueil
En page 2, formulaire d'insciption
En page 3, page contact

Résultat : Concluant (un lien sera peut-être disponible à l'avenir...)

Retour au sommaire

3 - Faits d'hiver

Petite rubrique visant à relater des faits qui n'ont pas de rapport direct avec le cours, mais pas que...

"A" a nous plonge dans un nouveau canal

Il est neuf, il est beau, il est tout frais notre nouveau serveur Discord dédié à la promotion février 2022 ! C'est Monsieur "A", camarade de promotion qui nous a créé ce petit cocon pour faciliter la communication au sein de la promo. Bon, d'accord, nous ne sommes que tous les deux pour l'instant, mais on s'y sent bien dans le salon général, et dans ce petit espace de discussion, et... Ah, c'est tout en fait.

Qui sait, peut-être notre Discord est-il destiné à grandir et à rythmer notre apprentissage ?

Déjà le jour 12

Ce qui nous fait une page tous les... *compte sur ses doigts* par semaine. À ce rythme là, j'aurai fini la partie Journal de Bord dans trois ans ! Mais non, le contenu des entrées du journal sera moins conséquent une fois que l'on aura couvert les bases (et mieux agencé j'espère !).

Retour au sommaire