Découvrir Java pour le web

Utiliser HTML pour le contenu

Testez gratuitement nos 1256 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour commencer une maquette, vous devez constituer un contenu HTML capable de s'adapter à tout type de mise en forme. Ainsi, ayez un aperçu de quelques balises HTML5 intéressantes.
06:45

Transcription

Commençons notre découverte des technologies web par le HTML. Le but de cette découverte est de vous donner les repères clés pour naviguer dans le projet. Les formations spécifiques de notre catalogue vous permettront de créer vos propres pages. Nous allons, pour notre part, travailler sur la maquette d'une application de suivi de temps de travail. Regardons la version finalisée de cette maquette. On a ici un utilisateur « slabasse », avec une liste de projets sur lesquels il travaille. Lorsqu’il commence à travailler sur une tâche, il sélectionne le projet correspondant, et son temps est comptabilisé. Lorsqu'il change de tâche et de projet, il sélectionne un autre projet et son temps sera comptabilisé sur cet autre projet. À terme, ces données seront stockées dans une base de données et ainsi il aura un total du temps passé par projet. Si on a plusieurs utilisateurs, on pourra croiser le temps passé par projet et par utilisateur. En-dessous, on a un formulaire qui permet d'ajouter un projet à la liste. Avant d'arriver à cette maquette, on va d'abord commencer à écrire son HTML, le contenu de la page. On a ici simplement l'en-tête de notre page qui spécifie qu'on est en HTML5. Cela ne suffit pas, il faut rajouter des éléments qui sont là. Des balises : la balise « html » avec sa balise fermante « /html », qui est l'élément racine de notre page, et dedans, deux grandes parties : « head » et « body ». « head » est la partie non visible destinée plutôt au navigateur et « body », la partie visible sur la page et visible pour les utilisateurs. Commençons par la partie « head ». Dans une partie « head », on a essentiellement des « meta ». Ici, trois « meta », un « meta » UTF8, enfin « charset » avec la valeur « utf-8 », qui spécifie le code page utilisé, pour les caractères utilisés sur la page. L'UTF8 étant le plus polyvalent, c'est celui qui est utilisé couramment sur le web. On a ensuite des « meta » qui sont, par exemple ici, une « meta » de compatibilité avec la version du navigateur, Microsoft Edge. Et ici, une « meta » « viewport » qui permet de spécifier des informations de rendu, selon le type de navigateur et le périphérique utilisé, notamment le périphérique mobile et tablette. On spécifie ici qu'on est en échelle 1/1. Ces trois « meta » sont considérées comme les « meta » essentielles. On peut leur adjoindre d'autres « meta ». Par exemple, des « meta » de description ou d'auteur, comme celle que je rajoute ici, « description du projet ». Si on exécute cette page qui est pour l'instant incomplète, on aura ceci qui va apparaître : rien, puisque je n'ai rempli que la partie « head », mais par contre, si je fais « informations sur la page » je retrouve ma description, mon auteur, par exemple, et les autres éléments que j'ai décrits précédemment. On va compléter ça, notamment par une balise « title », qui est très importante, puisqu'elle permet de décrire le titre, c'est ce qui apparaîtra dans l'onglet. On a aussi une balise qui permet de préciser l'icône des favoris. Maintenant, on va regarder ce que ça donne. On a donc l'icône des favoris qui apparaît ici pour l'onglet. On a le titre que j'ai spécifié aussi. On va maintenant s'intéresser à l'intérieur du « body », c'est-à-dire ce qui sera visible dans la page. On va d'abord spécifier le contenu d'en-tête et de pied de page. Si on visualise ici, on a bien l'en-tête avec le logo qui est un peu trop gros, mais on corrigera ça avec la mise en forme. Le « h1 » ici, que j'ai spécifié dans « header ». Pour mieux voir la composition et la correspondance entre mon code et ce qu'on voit affiché, on peut utiliser ce qui est présent dans tous les navigateurs : un inspecteur d'éléments. Il va nous permettre de visualiser la partie « header » qui est en surbrillance, qui est en bleu ici, et « footer », qui est aussi mis en évidence. En dépliant, je peux aussi passer sur chaque élément pour voir son détail et le visualiser sur la page. Ces balises bloc « header » et « footer » sont des balises HTML5 qui permettent surtout de repérer des parties importantes de la page. Maintenant; on va rajouter le cœur de notre application et de notre maquette qui est la liste des projets sur lesquels on travaille. Comme c'est le cœur, on a tendance à le mettre dans un bloc « main ». Là aussi, on pourrait mettre l'ancien bloc « div », qui est le plus courant en HTML4 puisqu’on n’avait pas « header », « main » et « footer » pour donner une signification. Pour l'instant, on n'a pas la liste, on a juste la phrase d'introduction de la liste. Ici on a spécifié l'élément de formulaire, puisque c'est un formulaire qu'on va avoir puisqu'on pourra valider éventuellement, pour soit changer le projet actif, soit envoyer un nouveau nom de projet. Pour donner un aperçu de la liste, on va ajouter ici une liste non ordonnée. Quand on énumère dans une page, il est considéré comme une bonne pratique de faire une liste non ordonnée « ul », « unordered list », avec des « li » énumérés, donc deux « li » ici, l'un qui contient un « label » l'autre qui contient deux « input », le « text » et le « submit ». Visualisons ça sur notre page. On va ici mieux voir et examiner les éléments. Dans notre « main » on voit le paragraphe, ça on l'avait déjà ajouté, mais on voit notre liste non ordonnée avec les deux éléments et leurs contrôles correspondants. Ici, et là. L'« input », le « placeholder » qui permet de spécifier un texte en attendant que l'utilisateur saisisse quelque chose. Et ici, le « submit » qui soumettra le formulaire. Bien sûr, on va compléter cette liste et ajouter d'autres éléments pour donner un aperçu. Il est d'usage dans les maquettes web, d'utiliser du « lorem ipsum », pour donner un aperçu qui n'a pas de signification particulière. Je reviens dans mon code pour ajouter les éléments manquants. On remarque que chaque entrée de cette liste est spécifiée et notamment le temps, qui est entouré d'un « span » qui va nous permettre, même si il n'a pas de signification particulière, d'isoler cet élément et de lui donner un style particulier par la suite, en CSS. On va visualiser cette modification. On a donc bien maintenant une liste complète. Notre contenu est maintenant complet. On va s'intéresser, dans la section suivante, à sa mise en forme en CSS.

Découvrir Java pour le web

Développez une application web avec Java. Apprenez à écrire des servlets, des entités ​J​PA (Java Persistence API) d'accès aux données et des pages JSP (Java Server Pages).

2h06 (23 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :25 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !