Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir ASP.NET Core 1.0

Créer du contenu HTML

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez la première étape d'une maquette. Vous constituerez du contenu HTML capable de s'adapter à toute mise en forme. Vous aurez également un aperçu de balises HTML5 particulièrement intéressantes.
06:27

Transcription

Nous allons commencer notre découverte des technologies web par le HTML. Alors, pour découvrir ce HTML, on va écrire une maquette, la maquette d'un site un peu spécial, complètement fictif, qui serait pour des sorciers, pour qu'ils puissent échanger leurs formules magiques, leurs élixirs, leurs sortilèges. Pour faire cette maquette, on a lancé Visual Studio Code, qui est un outil proposé par Microsoft, disponible sur toutes les plateformes, et qui permet d'éditer des fichiers de code ou des fichiers web très facilement. Cet outil est gratuit, donc on utilisera plus tard Visual Studio pour le code ASP.NET mais, voilà, c'est la bonne occasion de présenter l'outil. Alors, commençons cette maquette en créant un premier fichier index.html. Alors le HTML est un fichier texte, avec des balises. Ces balises donc suivent un ordre bien précis. Ici on a HTML. Dans HTML, le DOCTYPE avant précise qu'on est en HTML5. Et puis dans HTML on a des balises head et des balises body. Alors, entre la balise ouvrante et la balise fermante, celle qui est signalée par un slash, voilà, entre le head ouvrant et le head fermant je vais mettre toutes les informations qui ne sont pas forcément visibles à l'utilisateur, mais utiles au navigateur, notamment pour afficher le titre de la page dans l'onglet. Et puis, aussi, utiles parfois au moteur de recherche pour avoir une description de la page etc. Ici justement les trois premières sont considérées comme étant essentielles. La première spécifie le code page qu'on va utiliser, c'est à dire le type de caractères qu'on va utiliser sur la page. UTF-8 est le plus polyvalent. C'est pour ça qu'on a tendance à l'utiliser sur le web. Deuxième balise méta, c'est la balise qui signale la compatibilité navigateur, alors, bien sûr, pas simplement IE, mais cette balise est dédiée à IE. Et pour ce qui est de la troisième, c'est pour spécifier l'échelle de représentation sur la plupart des périphériques. Donc là ici, initial scale à 1. La description de notre page, par exemple « Sortilèges en tout genre pour sorciers aguerris » Je vais mettre un accent. Et après donc on précise l'auteur, par exemple. L'icône des favoris, qu'il faudra ajouter dans le répertoire. Et on a un en-tête qui est assez classique. Alors, la vocation de notre HTML c'est d'avoir aussi, bien sûr, d'affiché quelque chose sur la page. Donc ça c'est dans body. Et dans body, donc, on va mettre par exemple la navigation. Alors, on va mettre body. Ici, ces balises. Même si on indente, on décale, pour y voir plus clair, head et body, comme c'est au niveau le plus haut, on a tendance à les mettre vraiment collés sur la gauche. Et donc je mets déjà une navigation. Alors, ici il n'y aura pas de mise en forme, je ne sais pas où sera ma barre. Ici je précise le contenu. La mise en forme n'est pas faite dans le HTML, ou il vaut mieux pas, c'est fortement déconseillé. On verra le CSS plus tard pour faire ça. Donc je rajoute un bloc de navigation, et dans ce bloc de navigation, je fais une liste non-ordonnée, unordered list, ul, et cette liste non-ordonnée, je mets des list items, li, avec à l'intérieur, des liens. a, c'est pour faire un lien, et le href désigne l'URL du lien, ici la racine du site. Dièse, c'est qu'on a pas déterminé encore le lien. Je le ferai quand je ferai l'application, ce n'est qu'une maquette. Et puis ici, le texte du lien. Voilà, mes favoris, je n'ai pas de favoris choisis dans ma maquette. Voilà notre navigation. Maintenant, un en-tête. Alors, l'en-tête c'est pour l'accueil de l'utilisateur. Ici, un titre H1. Ensuite, un formulaire, qui va envoyer pour l'instant sur la page racine de mon site. C'est l'action ; le poste, on verra plus tard avec le protocole HTTP ce que ça signifie. Et puis, deux champs. Un champ de saisie, ici. Le placeholder c'est le texte gris qui va indiquer à l'utilisateur ce qu'il peut écrire dans ce champ de saisie. Le type, c'est un type de recherche, et le focus, autofocus, pour mettre le curseur par défaut quand la page se charge, pour que l'utilisateur n'ait pas à cliquer dedans pour activer le champ. Et puis submit c'est pour soumettre le formulaire. En appuyant sur Entrée, le formulaire sera envoyé. Alors, envoyé à qui ? Au serveur, en fait, puisque là ça sera sur le navigateur que ça sera affiché. Et puis, ici, on a rajouté une section. Cette section va permettre d'énumérer les formules es plus populaires. Alors, je n'utilise pas un h1 mais un h2, puisque c'est un titre moins important. Et, après, chaque formule magique est isolée dans un article, avec un texte en latin. Il est d'usage de mettre des textes en latin quand on n'a pas encore d'éditorial dans le site. Sur les maquettes, c'est pratique pour avoir un contenu sur lequel on s'attarde pas. Et puis donc des titres : Feu follet, Élixir. Pour chacun, donc, deux boutons. Un pour ajouter aux favoris. Pour l'instant le lien n'est pas encore déterminé. Et plus un pour dire qu'on a aimé cette formule. Pour l'instant, le total est à zéro. Alors, on va faire une autre section, qui va être pour les plus récents par exemple. Et puis on va ajouter aussi un pied de page. Donc on aura tous les blocs de notre site. Voilà. Alors ici, comme ça, on a un bon aperçu de comment on peut faire le contenu d'une maquette. Sans mise en forme, on va voir à quoi ça ressemble une fois lancé. Le pied de page, donc, avec une chose un peu bizarre, ici. Dès que vous voyez un et et un point-virgule, c'est ce qu'on appelle une entité pour les caractères spéciaux. On peut utiliser des entités. Donc là j'aurai un Copyright. Je peux sauvegarder. Alors, je fais Control-F. Et lorsque maintenant on regarde sur un navigateur, je vois ici donc ma barre de navigation, et puis mes différents éléments. Une très bonne façon aussi de faire le lien entre ce que l'on a fait et ce que l'on a sous les yeux c'est de faire bouton droit Examiner l'élément. Dans tous les navigateurs, c'est disponible, et on visualise donc le contenu, où il se situe. On peut déplier l'arborescence et tout visualiser. Tout le contenu est prêt pour maintenant être mis en forme avec le CSS.

Découvrir ASP.NET Core 1.0

Prenez en main ASP.NET Core 1.0. Développez ainsi des applications web multiplateformes en C#, déployables sur Windows, Linux, Mac ainsi qu'en containers Dockers.

1h32 (20 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
ASP.NET Core ASP.NET Core 1
Spécial abonnés
Date de parution :1 févr. 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 !