Tableaux et formulaires en HTML 5

Tableaux

En HTML 5, un tableau de données est un élément de type bloc, représenté par une balise <table>. Selon le degré de complexité du tableau, plusieurs autres balises sont à utiliser à l’intérieur de cet élément.

Historiquement, les tableaux étaient également utilisés pour faire de la mise en page, mais cette pratique est très fortement déconseillée depuis, compte tenu des possibilités offertes par CSS.

Tableau simple

Pour réaliser un tableau simple, chaque ligne du tableau est décrite par un élément <tr> (table row). Ces éléments contiennent à leur tour deux types d’éléments : <th> (table head) pour les cellules d’en-tête, et <td> (table data) pour les cellules de données.

Positionnement des éléments en CSS

Flux de positionnement

Positionnement dans le flux

Par défaut, le positionnement des objets s’effectue de manière dite statique, ou dans le flux. Cela implique que :

• les éléments en ligne s’enchaînent à la suite, autant que possible sur la même ligne.
• les éléments de type bloc se positionnent les uns en dessous des autres, les marges externes supérieures et inférieures étant fusionnées.

Par défaut, les éléments ont pour hauteur celle de tous les éléments dans le flux qu’ils contiennent, et 0 si ils sont vides ou ne contiennent que des éléments hors du flux. La largeur par défaut des élements dépend de leur type : pour les éléments de type bloc, il s’agit de celle de le élément parent, alors que pour les éléments en ligne, il s’agit de celle de leur contenu.

Syntaxe CSS 3, sélecteurs et propriétés usuelles

Syntaxe de CSS 3

Une feuille de style CSS 3 se compose d’un ensemble de blocs. Ces blocs sont introduits par un sélecteur qui précise à quels éléments HTML il s’applique, puis d’une ou plusieurs déclarations. Une déclaration est une propriété choisie parmi celles de la norme CSS 3, suivie d’une valeur :

selecteur-1 {
    propriete-1: valeur;
    propriete-2: valeur;
}

selecteur-2 {
    propriete-3: valeur;
}

De manière générale, CSS fonctionne avec une notion d’héritage : si un élément est inclus dans un autre, il hérite de toutes les règles de style qui l’affecte.

Principales balises HTML 5

Le principe de HTML 5 est de proposer un ensemble normé d’éléments représentés par des balises XML, dont les règles d’interprétation sont censées être implémentées de manière homogène entre tous les clients HTML (et notamment, les navigateurs).

Syntaxe HTML 5 et structure sémantique d'une page web

Syntaxe de HTML 5

La syntaxe de HTML 5 est basée sur celle de XML, mais admet quelques simplifications. Une version stricte, nommée XHTML, a existé en parallèle de HTML 4, avant d’être abandonnée par le W3C le 2 juillet 2009.

Éléments de XML

Un document XML est un fichier texte structuré. Ce document est un arbre, composé de nœuds.

Il est introduit par un prologue, précisant des informations techniques telles que la version de la norme XML ou l’encodage utilisé.

Flux de travail usuels

Un flux de travail (en anglais, workflow) est une façon standardisée d’organiser les branches d’un projet Git. Leur utilisation permet de bénéficier de méthodes éprouvées pour s’adapter à des modes usuels d’organisation et d’outils spécifiquement conçus pour leur prise en charge.

GitFlow

Gérer un dépôt Git

Dépôt local

Un dépôt (ou “repository” en anglais) est l’endroit où Git stocke l’historique des versions d’un projet de développement. Il existe deux types de dépôts dans Git :

• Un dépôt local est une copie du dépôt sur l’ordinateur local d’un développeur
• Un dépôt distant est un dépôt hébergé sur un serveur distant, accessible via Internet.

Créer un dépôt local

Pour créer un dépôt local avec Git, il suffit de se positionner en ligne de commandes (via cd) dans un dossier à transformer en dépôt et d’utiliser la commande :

Introduction

Introduction à GitLab CI

L’intégration continue (Continuous Integration, CI) est une pratique de développement logiciel qui consiste à tester et à construire automatiquement un projet chaque fois qu’un développeur soumet un changement dans le code source. Cette pratique vise à détecter rapidement les erreurs de code et à garantir que le code est fonctionnel et prêt à être déployé.

Un pipeline d’intégration continue est un processus automatisé qui permet de construire, tester et déployer un projet. Il s’agit d’une série d’étapes configurées pour être exécutées automatiquement par un runner lorsque des événements surviennent un dépôt (comme un commit).

Premiers pas

Installation de Git

Linux

Git est généralement installé directement dans la plupart des distributions Linux. Sinon, il est installable dans un terminal au travers du gestionnaire de paquets de la distribution :

• Debian : sudo apt install git-all
• Fedora : sudo dnf install git-all

macOS

Travailler avec GitLab

Une forge logicielle est une plateforme web qui permet aux développeurs de gérer leur code source, de collaborer sur des projets de développement, de suivre les bugs et les problèmes, et de déployer des applications. Outre le suivi de version basé sur Git, les forges logicielles incluent des fonctionnalités comme la création de merge requests, la gestion de bugs, la documentation, la gestion des tâches, les tests automatisés et les déploiements continus.