TA n° 4-5 - Découverte de HTML et Twig
Table des matières
1. Objectif de cette séquence
Cette séance vise à découvrir, en autonomie, les langages HTML (et/ou Twig),
qui vont nous servir pour la construction des pages des interfaces Web
des applications.
2. Étape 1 : Auto-apprentissage des langages HTML et Twig
Nous allons maintenant passer à l’étude des deux principaux langages qui vont nous servir à fabriquer, du côté du serveur, les pages Web qui seront transmises au navigateur.
Les éléments que vous allez apprendre dans cette séquence ne sont pas toujours très complexes, mais vous seront utiles pour les TP ou le projet.
Consacrez le temps nécessaire à cet apprentissage, qui s’avérera très utile pour la suite.
2.1. Étape 1-a : HTML autonomie (1h)
Vous allez commencer par l’apprentissage de HTML, le langage bien connu qui permet au navigateur de présenter les données à l’utilisateur.
À ce stade, l’objectif n’est pas de vous demander d’acquérir une connaissance très détaillée de HTML.
Les étudiants ayant déjà une connaissance minimale d’HTML peuvent passer directement à l’étape suivante.
Vous allez apprendre les rudiments d’HTML afin de pouvoir entamer tout prochainement le travail sur les grandes lignes des pages d’une application Web.
Vous aurez surtout besoin de comprendre les éléments structurant le contenu des pages dans cette première approche.
Très bientôt, vous commencerez la réalisation des pages Web de votre projet, qui seront assez minimalistes, dans un premier temps. Puis vous raffinerez les détails du contenu pendant les séquences suivantes, quand vous intégrerez plus d’éléments de présentation, une fois que nous aurons abordé CSS, par exemple.
Il n’est donc pas utile d’apprendre tous les détails d’HTML dès maintenant.
En fait, une grande partie des apprentissages d’HTML sont faits d’imitation des solutions trouvées sur d’autre sites, en se référant à la documentation (ou aux spécifications) lorsqu’on souhaite en savoir plus. Et nous n’avons pas l’ambition de faire de vous des experts de Web design non-plus.
Effectuez maintenant le tutoriel en ligne HTML5 Tutorial de W3Schools pendant maximum 1h. Vous pouvez arréter ce tutoriel à la partie sur les « iframe ».
2.2. Étape 1-b : Twig en autonomie (45’)
Vous allez maintenant découvrir Twig le langage qui permet de concevoir des gabarits.
La plupart du temps, on ne générera pas des pages HTML directement, mais on s’appuiera sur des gabarits pour ce faire. Twig permet de concevoir des gabarits qui sont des modèles de pages, dans lesquels on pourra injecter des données.
Nous allons étudier Twig plus en détail dans le prochain cours, mais il est utile d’avoir quelques notions sur la syntaxe et le rôle des éléments de base constituant les gabarits.
- Consultez la documentation de Symfony, qui décrit l’utilisation des gabarits (templates, en anglais) « Creating and Using Templates ».
- Prenez ensuite le temps de lire le début de la documentation TWig pour les concepteurs de gabarits, afin de mieux étayer votre utilisation pratique.
- Vous pouvez essayer de tester avec le Twig Playground d’Andrew Stilliard, pour des éléments simples.
3. Auto-évaluation
À l’issue de cette séquence de travaux pratiques, vous avez des connaissances minimales des langages HTML et TWIG.
Vous pouvez commencer à programmer des pages HTML simples.
Vous savez programmer des algorithmes simples pour intégrer des données dans des modèles de pages, via les gabarits Twig.