Introduction au HTML : créez un site Web de type portfolio

1. Bande-annonce: Dans ce cours d'introduction, nous allons créer un site Web de portfolio de quatre pages présentant certains des aspects les plus courants d' un portfolio en ligne qui peut être utilisé pour une pléthore de sujets et de professions différents. Nous allons décomposer le contenu nécessaire sur chaque page et la façon dont il est traduit dans notre code HTML. À la fin de notre cours, nous aurons un site Web cliquable de quatre pages avec une page d'accueil, une page de travail et une page de contact. Si vous n'avez pas écrit une ligne de HTML ou si vous avez besoin d'une mise à jour HTML, cette classe est parfaite pour vous. Nous couvrirons le HTML dès le début, donc aucune connaissance préalable n'est nécessaire. Que vous soyez sur Mac ou PC, tous sont les bienvenus. Je serai sûr de vous accompagner à travers toutes les étapes pour nous faire passer de l'installation d'un éditeur de texte à l'enregistrement de nos fichiers et à l'apprentissage des bases du HTML. Nous ne deviendrons pas trop fous avec un jargon informatique branché, mais je vais m'assurer de mettre en évidence une terminologie importante que vous devez connaître et comment résoudre votre propre travail et trouver réponses aux questions courantes lorsque ce cours est terminé. 2. Bienvenue dans ce cours !: Oh bonjour. Je ne t'ai pas vu là-bas. Ne me dérange pas. Je faisais juste une lecture tardive sur un de mes sujets préférés, l'ordinateur personnel. Mais puisque vous êtes ici maintenant, laissez-moi ranger cela et commençons à parler HTML. Dans ce cours d'introduction, nous allons construire un portfolio en ligne de quatre pages. Le site sera HTML seulement, ce qui signifie que les jolis styles et couleurs vont venir à un jour plus tard, mais dans cette classe, nous allons construire une base solide et solide qui vous fera découvrir la merveilleuse monde génial de HTML. À la fin de notre cours, nous allons avoir ce site Web cliquable de quatre pages avec une page d'accueil, une page de travail, une page à propos et une page de contact. Nous parlerons un peu des éléments communs qui seront sur chacune de ces pages et de la façon dont vous pouvez les utiliser pour créer votre propre site Web de portefeuille. On va faire le site pour Jon Arbuckle. Alors, parlons de la façon dont nous commençons. 3. Définir le contenu de notre projet: Tout au long de ce cours, nous allons créer du HTML pour un site Web de portfolio de quatre pages, présentant certains des aspects les plus courants d'un portfolio en ligne qui peut être utilisé pour une pléthore de sujets et de professions différents. Nous allons décomposer le contenu nécessaire sur chaque page et comment cela se traduit en code HTML. Je trouve qu'il est préférable, lors de la création d'un nouveau site, d'avoir une idée , du contenu et une orientation pour ce que nous construisons, afin que nous puissions atteindre un objectif. Nous allons construire notre site Web pour un client fictif qui servira de base pour la copie et la structure. Aujourd'hui, notre client est John Arbuckle. Voici quelques choses que nous savons sur John. C' est un dessinateur. Il possède un chat et un chien, et John a rejoint de nombreux réseaux sociaux pour rencontrer des relations professionnelles et personnelles. John est venu nous voir parce qu'il veut un portfolio en ligne pour présenter son travail d'illustration et veut étendre sa portée sociale en fournissant quelques informations sur lui-même et ses réseaux sociaux. La première chose que nous allons vouloir faire est savoir quelles pages auront besoin pour notre site. Nous allons le faire en créant une simple carte du site. Si vous n'avez pas vu de plan du site avant, c'est bon. Ça ressemble un peu à ça. Chaque zone représente une page du site. Ainsi, vous pouvez voir qu'ils ont une page d'accueil, et sur la page ou ce qui est nouveau page, et quelques autres pages sous ces pages. La carte du site nous guidera au fur et à mesure que nous construisons notre site afin de nous assurer que toutes nos pages sont couvertes. Vous pouvez créer un plan de site dans un programme de diagrammes comme sur l'Amigraph ou dans Photoshop, ou même avec un stylo et un papier. Pour ce site, nous allons configurer un échantillon en utilisant Gliffy. Voici Gliffy.com et il va juste nous donner un moyen rapide de commencer à dessiner. Donc, nous allons commencer à dessiner maintenant et ça va charger ça. Donc, la première chose que nous allons vouloir sur notre site est une page d'accueil. Donc, nous allons traîner ça ici et nous dirons à la maison. Nous allons aussi avoir besoin d'une page pour montrer tout le travail de John, pour les choses pour lesquelles les gens voudront l'embaucher et donc nous aurons une page de travail. Ensuite, nous allons vouloir partager un peu sur la personnalité de John, et un peu plus sur ce qu'il est en tant que personne. Donc, nous allons faire une page à propos. Enfin, si des gens comme John et son travail, nous allons avoir un moyen pour les gens de le contacter, donc nous allons vouloir avoir une page de contact. Prenons ce petit outil ici pour faire une connexion à chacun, et la page de contact. C' est un peu inégal et parfois je ne m'inquiète pas pour ça. Alors, on y va. Notre plan du site est tout réglé. Ce seront les quatre pages que nous construirons pour le site Web du portefeuille de John. Ensuite, nous allons définir le contenu sur chaque page, et nous allons le faire en créant un plan de contenu. Par contenu, je parle de choses comme du texte, des images, des vidéos ou tout ce qui va apparaître sur les quatre pages du site. Je vais ouvrir un éditeur de texte pour le faire. Mais encore une fois, si vous voulez juste prendre un morceau de papier et un stylo ou n'importe quel bloc-notes que vous voulez, tout ce qui fonctionnera le mieux pour vous. Donc, bien sûr, je vais avoir besoin de cette page d'accueil que nous avons mentionnée, et la page d'accueil va servir de bienvenue aux visiteurs et de vitrine rapide des fonctionnalités du portefeuille de John. Nous allons avoir besoin de ce que nous allons appeler du contenu de héros, et le contenu de héros va avoir quelque chose comme un court terrain d'ascenseur ou un simple paquebot que les gens qui viennent sur le site sauront de quoi il s'agit. Donc, dans ce cas, Jon Arbuckle, un illustrateur indépendant et auteur. Et puis nous allons aussi avoir une sorte de grande image, peut-être d'une bande dessinée ou peut-être de quelque chose d'autre qui décrit John. Une façon qui, à travers le visuel avec l'emplacement de l'ascenseur, permet vraiment aux utilisateurs de savoir tout de suite ce qu'est le site parce que les gens apprécient leur temps. Alors, disons-leur tout de suite ce que c'est. Ensuite, nous allons vouloir avoir une section sur la bande dessinée de John. Donc, peut-être qu'on aura juste un titre et une description du texte pour faire savoir aux gens que John écrit des bandes dessinées. Nous y trouverons également un lien pour en savoir plus sur la bande dessinée. Et ce n'est pas comme ça que vous épelez des bandes dessinées, alors réparons ça. Hé, on y va. John est aussi vraiment dans le poker et il a un CD de poker à vendre, donc nous allons vouloir une image de ça, un nom du CD, et un lien vers Amazon pour acheter, s'assurer que tout le monde peut obtenir sa solution de poker dans. Nous voulons également que les visiteurs sachent que John est sur Twitter, donc nous allons avoir un lien vers la page Twitter de John. Nous allons aussi vouloir montrer un témoignage de client, afin que les gens sachent que John est vraiment génial de travailler avec. Donc, nous allons garder celui-ci au Dr Luiz Wilson à propos de ce que c'est que de travailler avec John, et nous allons aussi vouloir avoir un lien d'appel à l'action là-bas. Donc, quelque chose comme, « Engagez un John pour vos besoins de portrait d'animal de compagnie. Entrez en contact. » Nous allons également vouloir ce que j'appelle le contenu d'en-tête, et le contenu d'en-tête est des choses comme le logo et la navigation sur le site. Le contenu de l'en-tête va apparaître sur chaque page parce que nous voulons toujours que les utilisateurs sachent sur quel site ils se trouvent, et nous voulons toujours donner aux utilisateurs un moyen d'accéder à d'autres pages du site. Donc, ça tiendra la navigation de notre site. Similaire à notre contenu d'en-tête, nous allons au contenu du pied de page, et cela apparaîtra à la fin de chaque page. Dans ce cas, nous aurons des informations sur les droits d'auteur sur le contenu du site. Ensuite est la page de travail, et sur la page de travail, nous allons également inclure le contenu de l'en-tête et du pied de page, et nous allons également avoir le titre de la page, dans ce cas, travailler. Voici où nous allons montrer la bande dessinée de John. Dans ce cas, il a deux bandes dessinées qu'il veut montrer sur le site, les Chroniques de Lasagne et Cat Town, et chacune d'entre elles aura une image, probablement comme la première image d'une bande dessinée pour montrer aux utilisateurs ce que c'est, et également lié au site externe où vivent ces bandes dessinées. John ne fait pas que des bandes dessinées, il fait aussi des portraits. Donc, nous voulons nous assurer que les gens sont au courant de ça. Donc, nous allons inclure un exemple de deux portraits qu'il a fait pour ses clients. Enfin, nous ne pouvons pas oublier les jams de John, alors gardons son CD qui est le meilleur de Johnny Arps, avec l'image du CD, et un lien pour l'acheter sur Amazon. Ensuite, nous avons la page à propos et à nouveau aura le contenu de l'en-tête, le contenu du pied de page, une autre page intitulée, cette fois sur. Mettons une image de John là-dedans pour que les gens sachent que c'est un gars sympathique. Nous aurons quelques paragraphes de texte décrivant John, quelque chose d'accueillant et heureux, un peu sur ses passe-temps et son processus de création de portraits et de commentaires. Inclure également une liste des compétences et des services professionnels que John offre. Enfin, nous aurons notre page de contact. Encore une fois, le contenu d'en-tête ou de pied de page, le contenu du titre de la page. Nous aurons l'adresse e-mail de John, afin que les gens puissent entrer en contact avec lui, et nous allons aussi garder une liste de liens ici vers la présence de John sur les réseaux sociaux, afin que les gens puissent le suivre ou l'aimer ou tout autre chose qui les gens font sur Internet avec les médias sociaux des gens ces jours-ci. Vous pouvez voir la structure ici ne fonctionnera pas seulement pour le portefeuille de John Arbuckle spécifiquement, mais de presque tous les professionnels, même si vous n'avez pas de CD de poker. Donc, si vous voulez essayer d'utiliser vos informations personnelles au lieu de John's pendant ce cours, optez pour ça. Si vous aimez suivre de plus près ce que je fais dans la vidéo, utilisez les fichiers de classe ici et plus tard, vous pouvez essayer quelque chose dans vos propres informations. 4. Rassembler nos outils: Un éditeur de texte est un type de programme utilisé pour éditer des fichiers texte brut. Nous pouvons écrire du HTML avec n'importe quel éditeur de texte là-bas. Donc, si nous voulions juste aller de l'avant et utiliser quelque chose comme Bloc-notes, et l'enregistrer comme un document HTML, nous pourrions. Il y a aussi ce qui est connu sous le nom d'éditeurs HTML. Les éditeurs HTML sont des éditeurs de texte similaires mais ajoutent des fonctionnalités supplémentaires. Les fonctionnalités qu'ils ajoutent sont spécifiques à des éléments tels le développement Web avec des éléments tels que la mise en évidence de la syntaxe, raccourcis clavier, la complétion automatique, et plus encore. Vous avez beaucoup de choix des éditeurs HTML là-bas, et je suggère après cette classe, vous les vérifiez, voir s'il y en a des que vous aimeriez plus que d'autres. Certains sont payés, d'autres sont gratuits. Beaucoup d'entre eux ont des essais gratuits, alors vérifiez avant de payer pour eux. Pour ce cours, je recommande de commencer par Sublime Text 2. J' aime beaucoup Sublime Text parce qu'il peut être téléchargé et évalué gratuitement et aussi, il est disponible pour Mac et PC. Voici Sublime Text 2. Ils ont actuellement aussi une version de Sublime Text 3, mais c'est en bêta. Donc, allons de l'avant et utilisez simplement 2 pour l'instant, puis vous allez vouloir choisir en fonction du système d'exploitation que vous utilisez. Il se trouve que j'utilise OSX, donc je vais cliquer dessus, et le téléchargement va de l'avant et commence. Quand c'est fait, nous l'ouvrons et l'installons. Une fois qu'il est téléchargé, vous voulez l'ouvrir et dans ce cas, je suis sur un Mac, donc nous faisons simplement glisser cela vers mon dossier d'applications pour l'installer. instructions d'installation similaires doivent être suivies sur un PC. La prochaine chose dont nous aurons besoin en termes d'outils pour le développement Web est, un navigateur moderne. Bien que vous puissiez utiliser n'importe quel navigateur, je recommande fortement d'utiliser Google Chrome. Je vais utiliser Chrome dans cette classe, donc si vous voulez suivre exactement, je recommande de télécharger celui-ci. Il y a quelques excellents outils que nous pouvons utiliser lors de la création de notre HTML. Un autre grand navigateur est Firefox. Donc, si vous voulez aussi donner un coup de feu de Firefox, qui a des choses similaires, vraiment ajouté des fonctionnalités comme Chrome a, mais je vais utiliser Chrome pour le reste de cette classe. Si vous n'aimez pas l'un ou l'autre, hésitez pas à utiliser Opera, Safari ou Internet Explorer, et vous devrez peut-être faire quelques googles supplémentaires pour trouver des outils à utiliser. La dernière chose dont nous allons avoir besoin pour commencer dans cette classe est, nous allons créer un dossier pour contenir tous nos fichiers de classe. Nous ne voulons pas voir les choses partout et les faire perdre. Donc, assurons que nous gardons les choses bien organisées. Donc, pour l'instant, je vais juste faire ça sur mon bureau, et je vais l'appeler jon-arbuckle-site. Si vous souhaitez l'enregistrer sur votre bureau, vous pouvez le faire. D' autres endroits communs seraient dans vos documents, ou si vous avez un dossier de sites, ce sont probablement des endroits plus appropriés pour le conserver. Pour l'instant, pendant ce cours, je vais le garder sur le bureau et ensuite le déplacer à un endroit plus approprié par la suite. Vous remarquerez que j'ai nommé mon site jon-arbuckle-site. J' aime vraiment utiliser des traits d'union pour les séparateurs de mots. D' autres personnes utilisent des espaces ou des traits de soulignement. Les espaces peuvent devenir un peu délicate parce que parfois, les navigateurs ou votre système d'exploitation peuvent lire que drôle. Si vous avez déjà vu ceux comme pour cent 20 dans les URL, cela peut arriver. D' autres choses, d'autres personnes aiment utiliser des traits de soulignement. soulignement sont plutôt cool. J' ai parfois du mal à les lire parce qu'ils ressemblent à un espace. Donc, à cause de cela, pour mes conventions de nommage, j'utilise généralement des traits d'union, et je garde les choses en minuscules. Si quelque chose fonctionne mieux pour vous, faites-le certainement, mais je recommande de coller à une syntaxe lorsque vous nommez des choses. Cela permet de garder les choses un peu plus organisées, et si jamais vous avez travaillé avec quelqu'un d'autre, vous serez en mesure de dire ce que votre convention de nommage est de les faire suivre. Donc, tout le monde va travailler sur la même page. Après avoir créé ce dossier pour contenir tous mes fichiers, je vais l'ouvrir, et une chose que je sais que je vais avoir sur mon site va être quelques images. Donc, je vais aller de l'avant et aussi faire un autre dossier pour les images. Je vais appeler ce dossier img. Je l'appelle img parce que c'est un peu plus court que de taper le mot complet pour les images et il est toujours vraiment facile de lire ce que c'est. Si vous voyez img, vous saurez que je parle d'images. Je ne vais probablement pas le nommer quelque chose de délicat. Si tu le nommes moi, quelqu'un pourrait ne pas savoir ce que c'est. Si vous le nommez quelque chose comme Photos Go Here, c'est vraiment long, et vous ne voulez pas taper ça tout le temps. Donc, il est agréable de garder votre nom de dossier court et doux, mais aussi de s'assurer qu'il est lisible pour vous-même et d'autres personnes afin vous sachiez facilement ce qui se trouve à l'intérieur de ce dossier. À ce stade, si vous pensez avoir des vidéos sur votre site, vous pouvez également créer un dossier pour les vidéos. Donc, pour là, je peux appeler des vidéos. Si vous saviez que vous vouliez inclure un fichier PDF, peut-être que vous voulez créer un dossier pour des fichiers PDF ou pour d'autres types de médias, ce sont toutes des suggestions possibles. En ce moment, je vais juste avoir des images. Donc, à l'intérieur de mon dossier jon-arbuckle-site, je vais avoir notre dossier img images. Donc, cela conclut notre première leçon. Après cela, vous allez vouloir aller de l'avant et créer l'inscription à votre site Web contenant les pages qui vont constituer votre portfolio, créer un contour de contenu pour le texte et les médias qui apparaîtront sur chaque page. Rappelez-vous, si vous voulez essayer de faire un site pour vous-même au lieu de Jon Arbuckle, optez pour cela ou essayez les deux en même temps, selon ce que vous vous sentez le plus à l'aise avec. Je veux aussi rassembler des actifs pour le projet. Cela inclut tous les mots, images, vidéos, tout ce que vous souhaitez inclure sur notre site de portfolio. Enfin, nous allons vouloir télécharger tous les logiciels et applications nécessaires pour créer nos pages HTML. Donc, une fois que nous avons tout fait, nous pouvons juste aller de l'avant et commencer à écrire du HTML. Une fois que vous aurez fini avec tout ça, commençons la deuxième leçon. 5. Qu'est-ce que le HTML ?: Qu' est-ce que HTML ? Eh bien, HTML signifie langage de balisage hyper texte. HTML est le langage de balisage principal pour créer pages Web qui sont affichées dans nos navigateurs Web. la même façon que certains d'entre nous lisent l'anglais ou l'espagnol, c'est de la même façon que les navigateurs peuvent lire et déchiffrer la langue du HTML. Le HTML a été créé par Tim Berners-Lee au CERN pour permettre à la recherche de partager des documents et de l'information entre eux. Nous pouvons maintenant faire ça et toutes les vidéos de chat dont nous pourrions rêver. HTML est souvent associé à des choses telles que JavaScript et CSS, ou des feuilles de style en cascade, afin de faire une expérience web complète, application web, page web sur Internet. Donc, HTML est la base de nos pages et ce que nous allons utiliser pour créer tous nos sites. Le genre de ce que nous appellerons les règles de HTML sont définies par la spécification HTML. La spécification HTML est créée par le W3C. W3C est un groupe de personnes intelligentes qui disent aux navigateurs comment ils devraient lire HTML. Donc, la spécification HTNL 4 est quelque chose que vous avez peut-être entendu parler et est devenue une recommandation en 1999, il y a quelque temps, mais est restée forte et vraie. Fondamentalement, il dit, chaque élément comment le navigateur devrait le lire. Vous avez peut-être entendu quelque chose appelé HTML5. HTML 5 est une sorte de la nouvelle ébauche de HTML 4. Il ajoute de nouveaux éléments et de nouvelles significations pour ces éléments. HTML 5 est plein de choses vraiment cool qui construisent sur la base solide que HTML 4 nous a donné. Une chose à garder à l'esprit est que HTML 5 n'est actuellement pas finalisé. Donc, si vous jetez un oeil au site HTML 5 ici, vous verrez qu'il s'agit d'un travail en cours. Récupérez le brouillon de l'éditeur à la place. Donc, si nous allons de l'avant et regardons le brouillon HTML pour cela. Donc, c'est la page pour le brouillon HTML 5 et vous remarquerez qu'ici c'est en rouge vous disant que, « Attention, c'est juste un brouillon », ce qui signifie n'est pas définitif et que les choses pourraient changer. Donc, ce que cela signifie, c'est que quelque chose qu'un élément peut signifier maintenant, dans une année, quelqu'un peut décider qu'il devrait être quelque chose de différent jusqu'à ce qu'il devienne un document finalisé. La bonne nouvelle est que l'apprentissage des choses que nous apprendrons dans le cadre de HTML 4 ne sera jamais un gaspillage. Tout ce que nous allons couvrir dans HTML 4 est également inclus dans HTML 5, ce qui signifie que vous devez apprendre tous les éléments dont nous discuterons et ensuite vous serez toujours en mesure de les utiliser si vous décidez d'utiliser HTML 5 ou quand il devient un document finalisé. HTML fait partie de ce que nous appelons communément le développement frontal. Si vous recherchez le développement frontal, vous trouverez quelques réponses différentes pour ce que cela signifie exactement. Beaucoup de fois, vous verrez des front-ends jumelés avec des choses comme HTML, dont nous parlerons aujourd'hui, CSS et JavaScript, et vous pouvez le voir dans certaines de ces images dandy que les gens font là-bas. Vous pouvez également voir que parfois nous appelons cela comme le balisage, style et la fonctionnalité ou le contenu, la présentation et le comportement. Donc, ce sont des choses dont on parle généralement quand il s'agit de faire le front-end d'un site Web, et le front-end comme mentionné est basé sur le balisage HTML que nous allons créer. Alors, à quoi ressemble HTML ? Eh bien, l'une des choses qui est vraiment cool à propos de HTML est que nous sommes capables voir la source de n'importe quel site Web là-bas et de voir à quoi ressemble leur HTML. Donc, ce que cela signifie, c'est que nous l'appelons la source HTML ou le code source de la page et c'est ce qui constitue le contenu ou le HTML d'un site Web et nous pouvons le voir pour à peu près n'importe quoi. Donc, ici à HuffPost Celebrity, si nous voulions voir une source de cette page, nous pourrions aller à « View », « Developer », « View Source ». Quand je clique dessus, vous verrez que ce code apparaît et en ce moment, il peut sembler un peu déroutant, mais vous verrez que c'est du code HTML. Nous pouvons le faire pour d'autres sites, tels que, stuffonmycat.com. Nous pouvons dire, « Je me demande quel est le code source de ceci ? Donc, encore une fois, nous pouvons soit aller à « View », « Developer », « View Source » dans Chrome, qui est également une Commande-Option-U pour un raccourci. Vous pouvez voir que c'est certainement un peu difficile à lire. Le code est en quelque sorte minimisé ensemble, donc nous ne pouvons pas vraiment voir les espaces, mais c'est du code HTML. Ou si on clique sur Reddit, on pourrait voir la même chose pour Reddit. Donc, encore une fois, si j'utilise un Mac dans Chrome, je peux faire Commande-Option-U et voir la source, et encore une fois, voici la source pour cela. Je peux aller de l'avant et ouvrir n'importe laquelle de ces pages comme un bébé liger jouant avec sa mère adoptive. Oui, s'il vous plaît. Donc, ici, je peux parcourir les photos ou je peux dire, « Wow, je me demande où ils ont eu ces photos. Permettez-moi d'aller de l'avant et de regarder la source. » Donc, » Voir », « Développeur », « Afficher la source ». Et ici, nous pouvons voir que cela commence à être le HTML de la page. Nous avons également un outil appelé l'Inspecteur Web, et la façon dont nous utilisons cela est soit en cliquant avec le bouton droit sur votre contrôle, en cliquant sur « Élément », et vous verrez ce menu contextuel apparaître, et vous verrez ici, il est dit, « Inspecter l'élément ». Donc, je vais aller de l'avant et choisir ça et vous verrez ce cadre apparaître. Ce que ce cadre fait, c'est qu'il nous montre tout le HTML sur la page comme quand nous avons vu la source, mais nous pouvons aller à travers et développer et réduire ces sections et jeter un oeil à ce que HTML est écrit pour obtenir ce sur la page que nous regardons. Si vous utilisez Firefox, il existe un outil similaire. Donc, ici je suis dans Firefox, et la même chose, et je peux contrôler ou cliquer avec le bouton droit de la souris, et encore une fois, vous verrez inspecter l'élément. Ensuite, vous verrez un navigateur très similaire, un peu différent Chrome ici, c'est gris foncé, mais en plus de cela, vous pouvez voir que c'est le HTML qui est écrit pour écrire ceci et il est mis en évidence avec cette petite ligne pointillée. Si vous utilisez quelque chose comme Safari ou Internet Explorer, ceux-ci ont également des outils de développement pour vous à utiliser, et sinon, encore une fois, voici Firefox, et puis ici, il est dans Chrome. Dans la vidéo suivante, nous allons examiner plus en profondeur ce que signifie exactement tout ce HTML et voir comment le navigateur le lit réellement. 6. Les balises HTML et les éléments communs: Dans la dernière leçon, nous avons examiné comment nous pouvons voir la source. Faisons-le encore ici, donc c'est JennLukas.com et c'est mon site et vous verrez qu'il y a une grande image, quelques textes, et plus de texte, un formulaire de contact, et quelques colonnes pleines de liens, et vous affichera également les informations sur les droits d'auteur dans la zone de pied de page. Voyons la source pour cela, certains pourraient ressembler à du charabia en ce moment, et certains d'entre eux peuvent sembler assez lisible. Vous pourriez voir des choses comme ce développeur frontal haut, affiné, affiné, amoureux des normes, et dire, « Attendez que ça a l'air familier, j'ai vu ça ici Salut , développeur frontal affiné, amoureux des normes ». Ainsi, vous pouvez voir qu'ils commencent à correspondre, vous pouvez remarquer que ce texte est pris en sandwich entre ces parenthèses avec plus de mots en eux. Ce sont ce que nous appelons des balises, balises décrivent le contenu de notre document. Parlons un peu des balises HTML, les balises HTML viennent généralement par paires et ont une balise d'ouverture et de fermeture. Aussi parfois appelé une balise de début et de fin. Le début est un support à angle ouvert avec le nom de la balise suivi du crochet d'angle de fermeture. La balise de fermeture est un support incliné ouvert et puis nous avons l'ajout d'une barre oblique avec le même nom de balise que l'ouverture, suivie de nouveau par ce crochet d'angles de fermeture. Donc, vous pouvez voir ici, l'ouverture, le nom de la balise, du contenu entre elle et puis un nom de balise de fermeture, et bien sûr, nous allons remplacer ce nom de balise mot par des balises HTML réelles. Nous allons remplacer le nom de la balise pour obtenir de vrais éléments HTML. Les éléments HTML font référence à la balise d'ouverture et de fermeture ainsi qu'au texte contenu entre les balises. Dans cet exemple, nous montrons une balise p, p est pour paragraphe. Ainsi, les balises p contiendront tous les paragraphes de texte que nous avons sur notre site. Ensuite, nous verrons le H1, et H1 représente le premier niveau, et le H1 est le titre le plus important de notre page. Un peu plus tard, nous allons jeter un coup d'œil sur les titres. Enfin, vous verrez quelques choses là-bas et nous avons un UL et à l'intérieur il y a quelques éléments LI. Nous appelons cette imbrication, les LIS sont imbriquées à l'intérieur de l'UL, et UL signifie liste non ordonnée, et la liste non ordonnée contient un tas d'autres éléments appelés le LI, qui signifie élément de liste. Ce sont des éléments de liste contenus dans la même liste non ordonnée, donc si vous aviez deux éléments de liste dans une liste, alors vous verrez deux éléments LI comme ce que nous voyons ici. Si vous aviez cinq, 10 ou 20, vous continueriez à lister cette quantité de LII avec le contenu de chacun de ces éléments de liste. Nous allons également jeter un oeil à la liste et d'autres types de listes en plus d'une liste non ordonnée un peu plus tard. Nous avons également des éléments vides ou parfois appelés autonomes, tels que la balise BR, qui signifie Break, la balise break est utilisée pour les sauts de ligne durs dans notre texte. Nous avons également une balise image qui est un élément vide, et vous verrez cela dans le deuxième exemple, où il dit img, qui signifie une image. Ces éléments sont appelés éléments vides parce qu'il n'y a pas une chose comme du texte ou un autre contenu à l'intérieur d'eux, donc au lieu d'avoir une balise d'ouverture et une balise de fermeture, nous avons juste une balise d'ouverture et c'est tout ce dont nous avons besoin. Nous allons examiner plus avant la balise image et le texte qui va avec elle dans la section suivante, spoiler, ils sont appelés attributs. 7. Les attributs HTML: Dans la dernière leçon, nous avons vu la balise image et vu une sorte de texte supplémentaire en plus de notre nom de balise. Ce sont ce que nous avons appelé les attributs HTML. Lorsqu' ils sont utilisés, les attributs sont toujours spécifiés dans la balise d'ouverture. L' attribut fournit des informations supplémentaires sur la balise que nous utilisons dans notre document. Le format pour cela ressemble à ceci, tagname, espace, le nom de l'attribut que nous définissons en signe égal, puis la valeur de l'attribut entre guillemets. Vous aurez ensuite votre contenu régulier entre ces deux éléments et votre nom de balise de fermeture. Dans cet exemple d'image, vous verrez que nous avons en fait deux attributs pour cet élément. Nous avons SRC et ALT. SRC signifie source, de sorte que vous verrez source égale et puis ce qui ressemble une URL pour peut-être une page Web que vous verrez réellement à la fin de votre URL il says.jpg. Ce que cela fait, c'est pointer vers un fichier sur Internet qui est la source de l'image. SRC signifie source, et voici où nous définissons où notre navigateur devrait chercher l'image qu'il devrait afficher dans notre navigateur Chrome. Dans ce cas, nous disons aller sur le site de surcharge mignon et prendre une photo de ce célèbre animal 018.jpg et le montrer dans notre site. ALT est pour alt, et alt est le texte alternatif. Le texte alternatif sert à quelques fins ici. Pour commencer, si l'image ne se charge pas, ce texte sera affiché. Ceci est en fait pointant vers une image de Chaussettes Clinton le chat. Donc, ce qui se passe ici est si pour une raison quelconque l'image ne s'affiche pas, le navigateur affichera Socks Clinton. Pourquoi une image ne s'affiche-t-elle pas ? Il y a deux raisons, il est possible que partout où vous cherchez pourrait déplacer le fichier, peut-être que vous aviez une faute de frappe dans le nom, aussi parfois les visiteurs de votre site peuvent utiliser des lecteurs d'écran. Les personnes ayant une déficience visuelle utilisent souvent des lecteurs d'écran pour lire le texte de notre site, car elles peuvent ne pas être en mesure de voir les images que vous voulez montrer. Dans ce cas, nous permettons à nos visiteurs qui utilisent des lecteurs d'écran de savoir que l'image montre réellement une image de Socks Clinton. Le texte Alt peut également être recherché, ce qui est important, et l'attribut Alt est un attribut obligatoire à inclure sur votre balise image. Donc, rappelez-vous, nous avons parlé de la spécification HTML et du W3C. Eh bien, le W3C qui vient avec les règles du HTML a dit que pour chaque balise d'image que vous avez, vous devez également avoir la source pour dire mot est, un Alt pour fournir un texte alternatif. Vous pouvez laisser le texte alt vide afin qu'il puisse simplement dire, Alt est égal à citation, et ce sera toujours HTML valide, mais s'il a besoin d'un texte pour dire aux utilisateurs ce qu'il est important de le mettre. Eh bien, maintenant, nous avons couvert un peu meilleure introduction aux éléments HTML et un peu sur les attributs et nous avons assez d'informations pour commencer. Ouvrons notre éditeur HTML, et commençons à écrire du HTML. 8. Structure d'une page en HTML: Donc, nous sommes prêts à commencer à écrire notre HTML. Donc, pour commencer, nous voulons aller de l'avant et ouvrir Sublime Text 2, notre éditeur HTML. Donc, c'est dans mes applications et je vais aller de l'avant et ouvrir ça. Maintenant, une fois cela ouvert, nous verrons que nous avons un écran presque vide, ou un pour la première ligne, et nous pouvons aller de l'avant et commencer à taper. La première chose qui apparaît sur notre page est ce qu'on appelle le doctype. Vous l'écrivez comme ça, crochet ouvert, exclamation, doctype, espace HTML, crochet fermé. Une syntaxe simple nécessite qu'un doctype soit déclaré de sorte que lorsqu'un navigateur se trouve en tant que fichier, il sera sûr de s'afficher correctement dans le mode standard approprié. Donc, vous allez vouloir inclure ce doctype en haut de chacune de vos pages. Voici la bonne nouvelle. En HTML5, nous avons introduit ce nouveau type de doctype, qui est ce que nous voyons ici et c'est vraiment court et doux. Si vous jetez un oeil à ce que les choses étaient auparavant, c'était un peu plus fou. Voici quelques exemples de ce à quoi ressemblaient les doctypes dans le passé. Vous en verrez un ici et ensuite descendre, voici quelques autres exemples. Vous pouvez voir que c'était beaucoup plus de texte que ce que nous écrivons maintenant, mais maintenant nous pouvons nous en sortir avec cette seule ligne. Donc, quand un navigateur croise ce fichier, il verra ce doctype et il saura quel type de HTML vous le servez. Ensuite, est notre élément html. L' élément html représente la racine de notre document HTML. Comme beaucoup de nos autres éléments, il a également une balise de fermeture. Donc, je vais aller de l'avant et écrire ça maintenant, donc je ne peux pas le fermer plus tard. Après quand j'ouvre une balise, c'est la meilleure pratique de la fermer, afin de ne pas oublier et de laisser du texte ouvert. Le doctype est un exemple d'une de nos balises autonomes, où il n'a pas besoin d'une balise de fermeture. L' élément HTML doit toujours avoir un attribut avec lui aussi. Cet attribut est l'attribut lang. Les attributs lang spécifie la langue principale pour le contenu de notre élément. Par exemple, nous pouvons faire lang="en ». Cela signifie que nous allons servir l'anglais, vous pouvez faire des choses comme fr pour le français et bien plus encore. Si vous avez besoin d'une liste d'autres codes pays, c'est un moyen simple de recherche Google pour rechercher des codes de pays HTML et vous obtiendrez toute une liste de possibilités. Après notre élément HTML, nous allons avoir avec l'élément head. Encore une fois, je vais aller de l'avant et fermer cela, donc je me souviens d'ouvrir et de fermer l'élément de tête. L' élément tête va représenter une collection de métadonnées pour notre document. Des choses comme les titres de page ou les références de feuilles de style, c'est ce qui va aller à l'intérieur de notre tête. Les choses que nous écrivons dans la tête de notre document ne seront pas visibles dans notre navigateur chrome. Après cela, nous aurons l'élément de corps et qui a une étiquette de corps d'ouverture et une étiquette de corps de fermeture. Le corps contient le contenu principal de notre document, donc quoi que nous écrivions dans le corps, que ce soit ceci ou des choses lisibles comme celle-ci soit une phrase, c'est ce qui va apparaître dans notre navigateur Web. Tout ce qui se trouve dans le corps sera imprimé sur la page. Une fois que vous créez des documents comme celui-ci, la bonne nouvelle est que vous pouvez en quelque sorte l'enregistrer comme un shell sur votre ordinateur local et l'utiliser comme un copier-coller et l'avoir comme un shell réutilisable pour tous vos documents HTML. À ce stade, notre dossier n'est toujours pas sauvegardé et je suis un grand fervent croyant à l'épargne souvent. Vous pouvez enregistrer votre document de différentes manières. L' une est d'aller à Fichier, Enregistrer. Dans l'autre sens, comme vous pouvez le voir ici sur le côté droit, qui montre sont raccourci pour Enregistrer. Ainsi, la commande S sur un Mac ou Control S sur un PC enregistrera votre document. Tu vas le faire souvent. Il n'y a rien qui pue plus que quand vous écrivez beaucoup de code et puis tout d'un coup quelque chose se passe comme un ordinateur se bloque ou un chat traverse votre clavier et supprime le tout. Ainsi, les meilleures pratiques consistent à enregistrer vos fichiers souvent. Donc, je vais aller de l'avant et sauver. Maintenant, je vais être invité à l'enregistrer en tant que nom de fichier spécifique parce que nous ne l'avons pas encore enregistré. Je vais naviguer vers mon dossier jon-arbuckle-site qui est sur mon bureau et juste ici, je vais changer cela, assurez-vous que vous allez de l'avant et changez cela. Il va par défaut à la première ligne de votre document, qui est ce doctype html. Nous ne voulons pas le sauver comme cela. Donc, vous voulez changer cela, sorte qu'il indique class.html. The.html est vraiment important car c'est ce qui va définir ceci comme un fichier HTML. Tout comme nous avons a.mp3 pour le fichier de musique or.psd pour le fichier photoshop or.txt pour le texte, .html dit que ce que nous écrivons ici est un fichier HTML. Donc, je vais cliquer sur Enregistrer et nous sommes tous des sauvegardes. Maintenant, vous pouvez voir quelque chose d'autre en quelque sorte de fou s'est passé. Nous avons tous d'un coup obtenu ce rose fluorescent et c'est toujours un décor génial que j'ai qui fait juste des choses les couleurs de AB quand je sauve des choses. Ce que c'est, est un thème dans Sublime Text et c'est ce que nous appelons Syntax Highlighting. Donc, comme nous l'avons déjà dit, il y a un peu de différence entre un éditeur HTML et un éditeur de texte. Dans cet éditeur HTML, ce qu'il fait c'est qu'il reconnaît ce fichier comme a.html parce que c'est ainsi que nous l'avons enregistré. Ainsi, il commencera à mettre en évidence les éléments et les noms de balises qu'il reconnaît. Donc, il sait que si la tête et le corps html sont des choses communes et qu'il le sait, que c'est un élément, donc il devient rose. Tous les attributs seront désormais dans ce vert vif et toutes les valeurs d'attribut sont dans cette couleur jaune. Si ces couleurs fluorescentes brillantes ne sont pas votre tasse de thé, vous pouvez également changer cela dans Sublime Text. Ils ont une section Préférences, sous Couleur Schéma et vous pouvez aller de l'avant et vérifier quelques différents qu'ils ont. Peut-être que celui-là est plus de votre style. En fait, je suis un grand fan de ce rose vif, ça me rend heureux, donc je vais le laisser à ça. Mais si vous voulez autre chose, n'hésitez pas à le vérifier. Donc, maintenant nous sommes tous prêts avec notre fichier enregistré et c'est le shell pour le reste du HTML que nous allons écrire. Dans et la vidéo suivante, nous allons regarder de plus près notre élément principal. 9. L'élément "head": Donc, l'une des premières choses que je vais documenter est notre élément head et l'élément head représente une collection de métadonnées pour le document que nous écrivons. La chose que nous mettons dans la tête ne va pas être vu dans le navigateur Chrome, mais ils ne fournissent des informations supplémentaires à notre document. Une des choses que nous pouvons mettre à l'intérieur de l'élément tête est notre titre. Donc, nous commençons à écrire le titre et le titre de cette page sera le Portfolio de John Arbuckle. Alors, comme la plupart de nos éléments, nous devons le fermer. Donc, pour dire que ce titre est terminé, nous allons de l'avant et fermons le tag. Donc, quoi que ce soit entre le tag title, ce contenu sera notre titre. Vous avez peut-être remarqué que quelque chose a commencé à se passer quand j'ai écrit ça, non ? Si je vais de l'avant et supprime cela et commence avec ma balise d'ouverture, tout d'un coup j'ai cette popup maintenant. Cela a commencé à se produire après que j'ai enregistré comme a.html. L' une des autres choses que les éditeurs HTML ont est la possibilité d'offrir l'auto-complétion. Le programme commence à chercher des moyens remplir ce texte et il cherche un élément. Donc, si je commence à taper t, il va énumérer tous les éléments qu'il pourrait éventuellement écrire ici au début avec un t. Dans ce cas, une fois que j'ai commencé à écrire le titre, vous pouvez voir le titre apparaît. Si j'appuie sur « Entrée » maintenant, il remplira automatiquement cela pour moi et fermera également la fin de la balise. La complétion automatique est une fonctionnalité très utile. Il vous évite de taper et il se souvient également de fermer les balises pour vous lorsque vous pouvez oublier de le faire. Parfois, il peut être un peu difficile de voir cela se produire pendant que vous apprenez d' abord quelque chose et donc si vous ne voulez pas de complétion automatique, vous pouvez désactiver cela. Je vais l'éteindre pour l'instant et je vais le faire en me dirigeant vers mes préférences. Sublime Text a une chose appelée Paramètres utilisateur et ici, le vôtre est probablement vide en ce moment. Ce sont quelques paramètres que j'ai ajoutés à l'esprit. Ce que vous voudrez faire est d'ajouter ce texte. Donc, ce que vous allez faire est de taper « auto_complete » : et puis au lieu de true, nous allons écrire false et ensuite je vais enregistrer ceci. Vous pouvez également définir des choses comme votre jeu de couleurs est ici, votre taille de police est ici, word rap, il y a un tas de préférences que vous pouvez définir pour répondre à vos besoins de Sublime Text. Si vous êtes intéressé à voir ce que vous pouvez faire d'autre, vous voulez juste y aller, ne google pas, juste google « sublime text 2 préférences ». Cliquez sur la documentation et ils ont tout un tas d'informations sur leurs paramètres. S' il y a quelque chose que vous cherchez, comme dire que vous ne pouviez pas vous rappeler quelle était la préférence pour la saisie semi-automatique, vous pouvez simplement google « sublime text 2 auto complete », ici nous allons. Recherchez cela, cliquez sur cela et maintenant vous verrez ici, il vous dira comment désactiver la complétion automatique. La bonne chose à ce sujet est une fois que vous savez quoi rechercher, cela rend votre googling beaucoup plus facile. Donc, chaque fois que vous vous demandez si un texte sublime peut le faire, il suffit de faire une recherche rapide pour « sublime text 2" et ensuite tout ce que vous cherchez. N' oubliez pas d'enregistrer vos préférences lorsque vous en avez fini. Fichier, Enregistrer ou Ctrl+S ou commande S pour le raccourci. Maintenant, quand je reviens ici et commence à taper, complétion automatique est maintenant désactivée et maintenant c'est à moi de me rappeler ce qu'il faut faire. Donc, jetons un coup d'oeil à cela en action et nous allons revenir sur mon site à Jennlukas.com, et si je vais de l'avant et voir la source pour cela, donc développeur, View Source, vous pouvez voir que cette chose devrait commencer à regarder un peu plus familier. Vous verrez que nous avons ce doctype html et ensuite nous avons l'élément head et l'élément head de fermeture ici. Donc, ce sont toutes les choses que j'ai mises dans l'élément de tête de mon site. Tu verras qu'on a ce titre là. Donc, titre Jenn Lukas Front-End Development, et comme nous l'avons dit quand nous revenons ici, ce n'est écrit nulle part jusqu'à cette page mais où il est écrit est dans cette zone d'onglet. Vous verrez Jenn Lukas Front-End Development, cette valeur est reçue de notre balise title puis affichée dans l'onglet. L' autre endroit où notre étiquette de titre entre dans est dans les résultats de recherche. Donc, si je vais chercher Jonn Lukas, vous verrez Jenn Lukas Front-End Development. Cette valeur est saisie de la balise title du code HTML de cette page. Ainsi, vos résultats de recherche dans le titre de votre onglet dépendront de cette balise de titre comme étant remplie. Si nous revenons à la source, vous verrez qu'il y a autre chose ici et que ce méta charset est égal à UTF-8. Cette balise méta est utilisée avec l'attribut charset pour définir le codage de caractères utilisé par le document. Donc, nous allons vouloir ajouter cela à nos sites également. encodage des caractères définit le type de caractères que nous utilisons dans nos mots dans notre document HTML. UTF-8 est le moyen le plus utilisé pour représenter le texte unicode dans les pages Web. Si vous souhaitez en savoir plus à ce sujet, je recommande de vérifier les encodages de caractères pour les débutants sur w3.org. Il va vraiment en profondeur sur le genre de choses codage de caractères gère et comment il peut affecter vos pages. Si vous ne pensez pas avoir besoin d'autant de détails, n'oubliez pas de l'inclure sur toutes vos pages. La balise meta avec l'attribut charset et la balise title sont les deux choses requises que vous mettez dans votre élément head. Mais il y a d'autres choses que tu peux y mettre aussi. Si nous revenons à regarder la source de jennlukas.com, vous verrez qu'il y a certainement d'autres données ici. Donc, une chose que nous avons est une autre balise meta, dans ce cas, l'attribut ici est le nom et la valeur est la description. Dans la description, nous avons un autre contenu d'attribut. Content dit les développeurs front-end, conférencier, rédacteur et conseil. Vous remarquerez que cela apparaît dans mes résultats Google. Développeur frontal, conférencier, rédacteur et conseil. Donc, c'est un endroit où votre méta-description peut apparaître. La balise meta avec le nom de l'attribut et la valeur des mots-clés est associée au contenu. Ce contenu est une liste de valeurs séparées par des virgules pour les mots-clés que vous espérez aider votre moteur de recherche à indexer. Chacun d'entre vous qui a fait n'importe quel référencement peut savoir que Google a une formule très secrète donc personne n'est exactement sûr de combien cela aide votre résultat de moteur de recherche, mais il ne peut certainement pas blesser. Donc, il y a les mots-clés du nom de méta. Meta name viewport commence à entrer dans les choses dont nous avons besoin pour conception réactive et la taille de votre écran lorsqu'il est chargé sur d'autres appareils. Le suivant que nous voyons ici est la balise de lien et vous verrez icône de raccourci avec ce image.ico et favicon.ico est un lien vers notre favicon. Le favicon est ce petit avatar qui apparaît dans les onglets de vos pages. Donc, Google en a un ici, c'est la favicon pour Google. Voici celle de Jenn Lukas. Si je suis allé sur un site comme la tête de poisson de chien, vous verrez qu'ils ont un favicon ici aussi comme peut-être est comme une petite tasse de bière et même sur un site comme jello.com, vous en verrez un là-bas. Si jamais vous ne spécifiez pas votre favicon, vous allez juste obtenir cette petite icône de document par défaut que nous verrons un peu plus tard. Vous pouvez également spécifier des éléments tels que les icônes Apple Touch et c'est pour quand vous êtes sur un appareil mobile Apple et enregistrez une page Web sur votre téléphone, c'est ce qu'il apparaîtra pour l'icône. Donc, vous pouvez voir que bien qu'il ne soit pas exactement affiché dans notre navigateur régulier Chrome, les métadonnées de notre document peuvent fournir beaucoup de choses utiles. Dans la vidéo suivante, regardons les choses qui apparaissent au milieu de notre page et qui sont dans notre élément body. 10. L'élément "body": Dans la dernière vidéo, nous avons parlé de notre élément tête et de ce qui n'apparaît pas sur notre page. Maintenant, parlons de ce qui fait, c'est tout ce que nous écrivons dans les éléments du corps. Donc, tout ce que nous tapons entre notre balise de corps d'ouverture et de fermeture apparaîtra sur nos pages. Si nous jetons un coup d'oeil sur johnlucas.com, vous verrez tout ce qui se trouve dans la balise corporelle est imprimé dans la zone du navigateur. Jetons un coup d'oeil à un autre site. Ceci est thesuperest.com. Nous allons utiliser cet élément d'inspection à nouveau. Quand nous regardons ici, nous pouvons maintenant voir, nous voyons aussi le corps et la tête. Donc, si je l'écrase pendant une minute, et que je regarde l'élément tête, nous verrons certaines choses que nous avons appris dans la dernière vidéo, comme le titre et les balises méta. Ensuite, nous voyons quand nous survolons le corps, toute la section ici était surlignée en bleu, parce que c'est toutes les informations dans notre élément de corps. Si je l'ai retourné pour pouvoir voir ce qu'il y a à l'intérieur, tout ce qui se trouve dans le corps est imprimé sur la page. Donc, encore une fois, rappelez-vous que nous pouvons inspecter les éléments, et voir que ces choses vivent toutes dans le corps, puis sont imprimées sur la page. Tout ce qui se trouve dans l'élément de tête n'est pas imprimé sur cette page. Donc, tout ce que nous avons écrit dans notre plan de contenu, nous allons vouloir écrire dans notre élément de corps parce que c'est ce qui sera imprimé sur la page. Alors, allons-y et ouvrons ce dos. Donc, voici à nouveau le contour du contenu. Nous savons que nous allons vouloir que Andres Arbuckle, illustrateur et auteur indépendant, apparaisse sur notre page. Donc, je vais les copier d'ici. Vous pouvez soit cliquer sur Modifier, Copier, soit le raccourci pour les claviers est la commande C sur un Mac, soit le contrôle C sur un PC. Donc, je vais copier, et je vais revenir ici, et tu fais Edit, Coller. Le raccourci pour Coller est le contrôle V ou la commande V, donc coller. On dirait que j'ai oublié le je vais écrire ça là-dedans. Nous savons que toutes les autres choses que nous voulons sur notre page, c'est là que nous allons l'écrire. Donc, je vais enregistrer ceci maintenant, Fichier, Enregistrer. Ensuite, dans notre prochaine vidéo, nous verrons à quoi cela ressemble une fois que nous l'ouvrons dans notre navigateur. 11. Créer et prévisualiser notre première page: Nous avons du texte sur notre page, et continuons et sauvegardons ce document à nouveau. Vous pouvez dire qu'un fichier n'est pas sûr si dans l'onglet, vous voyez ce petit cercle ici. Si je vais de l'avant et faire la sauvegarde des fichiers, ce cercle changera en X. Donc, class.HTML est enregistré, mais maintenant nous voulons aller de l'avant et le voir dans un navigateur. Il est recommandé de regarder nos fichiers dans un navigateur souvent pour s'assurer que les choses ressemblent à ce que nous attendons. Donc, je vais appuyer sur le class.HTML sur mon ordinateur, qui se trouve dans mon dossier jon-arbuckle-site et class.HTML, et double-cliquer dessus pour ouvrir. Donc, ici, il est, ouvert dans Chrome. Notre première page web HTML, ou au moins le début de celui-ci. Donc, voici class.HTML, et nous voyons maintenant, « Je suis Jon Arbuckle, un Illustrator et auteur freelance, » dans notre navigateur. Tout ce qui se trouve dans l'étiquette du corps est en cours d'impression ici. Nous avons notre titre ici, et nous pouvons voir la source, et voir tout ce que nous avons écrit dans Sublime Text. Donc, maintenant je veux un peu plus de copie sur cette page. Je veux voir d'autres choses qu'on peut mettre dans la balise corporelle. Parfois, peut-être que vous n'êtes pas sûr de tous vos droits d'auteur loin, et donc certaines personnes utilisent ce qu'on appelle Lorem Ipsum. Lorem Ipsum est fondamentalement un texte réservé grec pour nous à utiliser dans notre document pour imprimer certains textes sans que vous ayez à écrire des choses comme ceci. C' est un peu plus lisible. Donc, il y a un tas de Lorem Ipsum différent là-bas. Si nous jetons un oeil aux générateurs Lorem Ipsum, donc résultat haut est 56 générateur unique Lorem Ipsum. Donc, comme vous pouvez le dire, il y en a un tas, 101. Donc, il y a beaucoup de choses sur Internet. Jetons un coup d'oeil à certains de ceux que nous avons, Cupcake Ipsum, c'est un bon. Picksum, Lorizzle, Samuel L. Ipsum, Fillerati, Bacon Ipsum, Thon Ipsum, Veggie Ipsum et Fromage. Donc, je suis vendu sur Cheese Ipsum, alors allons-y avec ça pour l'instant. Donc, voici Cheese Ipsum. Tout le monde aime un peu de fromage, n' est-ce pas la vérité ou quoi ? Disons combien de paragraphes, et nous allons cliquer sur Générer du fromage. Alors, tu verras ici. Nous avons une copie et du texte que nous pouvons copier et coller dans notre document. Cela nous donnera juste du texte à utiliser. Donc, nous ne sommes pas accrochés à l'écriture de textes, et ensuite simplement obtenir nos droits d'auteur pour voir à quoi il ressemble. Donc, je vais sauver ça à nouveau. Je vais revenir à l'onglet du navigateur, puis je peux rafraîchir la page en cliquant ici, ou Commande, ou Control R. Maintenant, ou Control R. Maintenant, comme vous pouvez le voir, toute la copie que je viens d'écrire est maintenant imprimée sur la page. Quelque chose semble un peu décalé, non ? Tout ici est mélangé. Si je développe et réduit la fenêtre du navigateur, vous pouvez voir que fondamentalement le texte est approprié dans n'importe quel espace il a. Alors que lorsque nous le regardons dans notre éditeur HTML, il est formaté, de sorte qu'il est beaucoup plus facile à lire avec des espaces. Il est vraiment important de souligner que dans HTML, il ne lit pas les espaces. Le seul espace qui sera lu est un espace, qui est l'espace dont nous avons besoin pour séparer les mots. Mais, peu importe que vous fassiez ça, et que vous ayez tout un tas d'espaces là-bas. Quand je sauvegarderai ça et me rafraîchirai, il va quand même avoir juste un espace ici. Les espaces seront ignorés par le navigateur et c'est une autre raison pour laquelle nous utilisons le formatage HTML pour séparer nos éléments sémantiques. Alors, faisons ça avec la copie que nous avons. Eh bien, d'abord, nous allons nous débarrasser de notre [inaudible] non utilisé pour l'instant, et juste avoir un cap pour tout ce fromage. Donc, Liste des fromages que j'aime, ça va être le titre de notre page. Nous avons appris un peu sur un exemple de titre dans notre vidéo précédente, et c'était l'élément H1. L' élément H1 est le titre le plus important de la page, et vous l'écrivez en faisant un crochet ouvert, H1, crochet fermé. Ensuite, passez à la fin de la phrase, et nous allons vouloir mettre la balise de clôture. Donc, et maintenant nous avons un titre pour notre page. Il s'agit d'un tas de textes de paragraphe. Je sais que tout à l'heure, nous avons examiné quelque chose qui peut ancrer les paragraphes. Nous l'avons examiné brièvement, donc vous ne vous souvenez peut-être pas de ce que c'était. Que se passe-t-il si vous vous souvenez de ce que c'était ? Et si nous pensons que c'est peut-être un paragraphe, mais nous ne sommes pas vraiment sûrs, ou est-ce qu'on l'appelait para ? Je ne suis pas sûr. Une des choses que j'aime faire est souvent de renvoyer à un site de référence. L' un des sites que j'aime vraiment utiliser est un site appelé htmldog.com. Non, ce n'est pas plein d'un tas de chiens adorables mignons, juste un dans le logo, mais c'est un très bon site de référence. Je suggère fortement de marquer ceci et d'y revenir, il suffit de regarder les balises communes que vous allez utiliser. Vous verrez sur le côté gauche cette section de références, puis ce lien ici pour les balises HTML. Alors, allons-y et vérifions ça. Ce que nous pouvons faire est ensuite de scanner la page pour voir quels éléments HTML sont disponibles pour nous et comment correspondre au contenu que nous avons. Donc, il y a une certaine structure, et nous avons déjà vu certaines d'entre elles avant comme le HTML, la tête, le corps. Ceux-ci devraient tous être familiers ou DOCTYPE et méta. On a vu ça, c'est sous méta information. Mais, ce que nous voulons en ce moment, ce sont des éléments qui sont utilisés pour le texte. Vous verrez que le premier élément répertorié ici est une balise P. Cela devrait probablement déclencher la mémoire d'avant, où la balise P est la façon dont nous référons un paragraphe. Dans le cas où vous oubliez, il suffit de cliquer dessus, puis vous verrez la balise HTML P, et il nous indique qu'il s'agit d'un paragraphe. Puis plus tard, ils nous donneront un exemple ici. La chose géniale à propos de l'écriture HTML est que vous écrivez généralement l'historique sur un ordinateur. Je suppose que vous pourriez le faire sur un morceau de papier une machine à écrire, mais si vous voulez un processus, vous allez le vouloir dans l'ordinateur. Ce qui est soigné à ce sujet est fondamentalement, tant que vous avez une connexion Internet, alors Google est à portée de main. Donc, vous êtes en mesure de vérifier tout le temps pour assurer que vous vous souvenez de la syntaxe appropriée pour écrire des choses. Finalement, je suis sûr que vous mémorisez tout ça. Mais ce n'est pas une compétition, et ce n'est pas quelque chose que vous devez mémoriser dès le début parce que vous avez les outils tout de suite pour être en mesure de rechercher tout ce que vous pourriez oublier. Ne vous inquiétez pas de trop googler, personne ne le saura, et même si nous le faisions, personne ne jugerait. Donc, à chaque fois que peut-être vous êtes à une perte pour ce qu'est la balise, venez sur htmldoc.com ou vous pouvez faire une recherche Google comme tag de paragraphe html, et tout de suite, vous pouvez même commencer à le voir dans les résultats de recherche de leur titre balises. Donc, maintenant que nous savons que nous écrivons une balise de paragraphe juste avec la lettre P, continuons et changeons cela. Ajoutons une balise de paragraphe autour de tous ces paragraphes de texte : <p> tag, </p> tag, <p> tag, </p> tag. Faisons ça pour l'instant. Je peux supprimer ceci pour cet exemple, et maintenant, nous avons ceci. Nous allons enregistrer trois paragraphes et un titre. Rafraîchissons et voyons à quoi cela ressemble maintenant. Hé, regarde ça. C'est beaucoup plus facile à lire, non ? Donc, maintenant vous verrez dès que nous avons ajouté ces éléments autour de notre texte, tout d'un coup, la mise en forme a commencé à se produire. Ces morceaux de texte sont devenus séparés les uns des autres. Vous remarquerez également que le niveau de titre 1 est devenu plus audacieux et plus grand que le reste du texte sur la page. Donc, par défaut, un navigateur rencontrera dans H1, et dira, « C'est important. Faisons en gras et plus grand que les autres textes. » Pour le texte de paragraphe va être une taille lisible relativement normale. Maintenant, au fur et à mesure que nous développons et réduisons le navigateur, il s'adaptera toujours à la ligne de gauche à droite, mais nous avons ces sauts de ligne entre chacune de nos balises de paragraphe. Ces pauses se produisent après ce que nous appelons des éléments de bloc. Des choses comme H1 et P, c'est ce qu'on appelle un élément bloc. Ce que cela signifie essentiellement, c'est qu'ils prennent leur propre morceau de ligne, et puis il y aura un espace après avant un autre élément. Nous allons jeter un oeil sur les éléments de niveau bloc plus en profondeur un peu plus tard. Mais pour l'instant, nous allons terminer cette leçon en créant ce nouveau fichier HTML. Ajout d'une structure inutile à la page. Allez-y et ajoutez des métadonnées si vous voulez essayer d'ajouter d'autres choses comme des mots-clés ou des descriptions. Allez-y, et faites-le aussi, puis ajoutez quelques éléments HTML au corps. Essayez d'ajouter un titre, peut-être d'autres paragraphes, puis une fois que vous avez terminé avec cela, enregistrez-le et prévisualisez-le dans un navigateur. Revenez pour la troisième leçon, et nous commencerons à examiner plus en profondeur les en-têtes et autres éléments de nos pages. 12. Convertir notre contenu dans des balises HTML: Nous avons appris un peu ce dont nous avons besoin pour écrire la structure du document pour nos pages HTML, et nous avons appris un peu sur la balise de titre et la balise de paragraphe. Ensuite, nous allons apprendre à faire correspondre les types de contenu à nos éléments HTML. Donc, nous avons fait un aperçu de contenu, et ce que nous voulons faire est de regarder cela, et en quelque sorte de voir quels éléments HTML nous pouvons utiliser pour obtenir le contenu que nous avons sur notre page. Donc, par exemple, jetons un coup d'oeil à notre page d'accueil. Nous savons que nous allons vouloir l'appeler la page d'accueil, et la page d'accueil apparaîtra probablement dans notre balise title. Parfois, ce que j'aime faire est juste d'imprimer un morceau de papier et juste en bas juste à côté, quel élément va être en HTML. Parfois, quand vous faites cela, il faut un peu de pression pour le regarder avec un éditeur HTML, mais faites ce qui fonctionne pour vous. La prochaine chose sur notre page, nous avons le Contenu Héros. Nous avons le titre qui dit : « Je suis Jon Arbuckle, illustrateur et auteur indépendant », et nous savons que ce sera le titre principal de notre page. Sur notre page d'accueil, cela va dire à tout le monde ce que Jon fait, et pourquoi ce site existe. Donc, je considère que le titre le plus important de notre page. Donc, on va appeler ça un H1, comme ce qu'on a vu avant. Nous allons aussi avoir une grande image d'une bande dessinée. Donc, nous allons utiliser la balise image pour ça, qui est img. La section suivante est la bande dessinée de Jon. Donc, on va avoir un titre et une description pour ça, non ? Donc, peut-être que dans cette description, nous aurons probablement un titre. Dans ce cas, ce sera le deuxième titre le plus important parce que ce n'est pas le plus important, donc ce sera un h2, et nous allons avoir du texte. Donc, ce sera quelques balises de paragraphe. Nous allons avoir un lien pour en savoir plus sur la bande dessinée. Nous n'avons pas encore vraiment regardé les liens. Donc, si je ne suis pas vraiment sûr de ce qui serait un lien, je veux maintenant revenir au site HTML doc, et voir si je peux trouver quelque chose qui ressemble serait l'élément pour faire un lien. Donc, en regardant ce site de référence, vous vous souvenez ? Nous avons les méta-informations, du texte, et heureusement je vois ici des liens, et ceux-ci n'ont pas vraiment beaucoup de sens pour moi en ce moment. Mais si je clique sur cette balise A, je vois les balises HTML A, Ancre. Principalement, utilisez le texte du lien hypertexte. Le lien fait vers une autre page, ou une partie d'une page, ou tout autre emplacement sur le Web. Eh bien, super, c'est exactement ce que je cherche. Donc, pas vraiment sûr de ce qu'est un tag A, mais laissez-moi le marquer pour l'instant que ce sera un A. Ne vous inquiétez pas si cela semble déroutant, nous allons aller en profondeur à ce que cela signifie dans les vidéos ultérieures. Donc, pour la section suivante, cela devrait sembler un peu familier dans l'image. Nous savons déjà ce que c'est. Le nom du CD, ça va probablement être un titre, aussi. Donc, nous allons aussi l'appeler un H2 pour l'instant, et une autre chose que nous venons d'apprendre. Donc, nous dirons, un compte Twitter de Jon va être lié à sa page Twitter, ce sera aussi un A pour un lien. Un témoignage de client. Donc, témoignage de client, je suis un peu incertain à ce sujet, aussi. Revenons à ce site HTML doc, et vérifions cela, et je sais que ce n'est pas une liste. Ce n'est pas une image d'un objet. Ce n'est pas une queue sur un formulaire, mais c'est du texte. Revenons à la section texte. P, H1, Fort, em, abbr. Ça n'a pas l'air juste. Attends, regarde blockquote, ça ressemble à ce qu'on cherche, non ? Parfois, en anglais simple, il correspond exactement à ce que nous recherchons un HTML. Blockquote - une grande citation. Hé, parfait. Donc, pour l'instant, je vais écrire blockquote. On couvrira ça un peu plus tard. Le logo va être une image. Dites, la navigation est un peu difficile. Nous savons que ce sont des liens. Donc, nous avons certainement besoin d'un A, mais revenons-y plus tard, et puis l'information sur les droits d'auteur va être un paragraphe. Donc, c'est certainement dans l'air, et nous allons le couvrir, mais nous avons nos éléments de base pour le contenu que nous avons décrit. Donc, passons en revue ces éléments et ce qu'ils signifient vraiment dans nos prochaines vidéos, en commençant par les en-têtes. 13. Les éléments d'en-tête (H1-H6): Jusqu' à présent, nous avons jeté un oeil à un type de cap et c'est le H1. Nous savons que le H1 est le titre le plus important de la page et il ne peut y en avoir qu'un par page. Nous savons que le H1 est le titre le plus important de la page et il ne devrait y en avoir qu'un par page. Il y a d'autres niveaux de titres , cependant, parce que nous allons probablement avoir plus d'un niveau de rubrique. Il y a H1 à H6, ça veut dire qu'il y a un H2, un H3, un H4, un H5. C' est là que je commence à devenir vraiment paranoïaque sur la façon dont je tape et un H6. Désolé. Voici nos niveaux de cap, H1 à H6. H1 est le plus important, H6 est le moins important. n'y a pas de H7. Je ne suis pas sûr de qui une fois assis sur une pièce et a décidé qu'ils devraient aller jusqu'à six niveaux de rubriques, mais quelqu'un l'a fait. Donc, H7 n'existe pas, mais H1 à H6 le fait. Examinons un peu plus sur les titres. Donc, si nous ouvrons juste un fichier de bloc-notes, parlons un peu plus d'en-têtes. Pensez à des rubriques comme vous le feriez un aperçu d'un journal scolaire ou un aperçu d'un curriculum vitae. Disons que nous avons un CV. Donc, on va faire le CV de Jon Arbuckle. Quelle est la chose la plus importante sur le CV de Jon Arbuckle ? Eh bien, le nom de Jon Arbuckle parce que sans lui comment sauriez-vous à qui c'était le CV. Donc, la rubrique la plus importante ou notre H1 serait Jon Arbuckle. Après cela, que se passe-t-il d'autre CV ? Eh bien, que diriez-vous de son objectif ? Donc, nous finissons par finir parce que c'est le prochain niveau vers le bas et nous dirons, l'objectif, et ce sera un H2. Mettons-les entre parenthèses après, un peu plus facile à lire. Qu' est-ce qui se passe d'autre sur un CV ? Sur les mêmes objectifs de niveau, nous avons probablement de l'expérience, de l'éducation, des contacts. Ils sont tous H2 parce qu'ils ont le même niveau d'importance les uns que autres et le deuxième niveau le plus important de cap. Sous objectif, vous allez probablement avoir quelques textes, donc nous n'aurons probablement pas d'autres rubriques sous ça. Avec l'expérience, vous allez probablement vouloir énumérer tous les emplois que Jon a eu. Donc, disons que Jon a travaillé au Daily Chronicle et ensuite, nous allons décrire les dates où il a travaillé là-bas, ses responsabilités professionnelles, donc Daily Chronicle est aussi un titre. Dans ce cas, ce sera le niveau 3. Il travaillait aussi à l'US Bizarre Weekly et on appellera ça un autre H3 parce qu' il est au même niveau que cet autre emploi chez The Daily Chronicle, et ce sera aussi le chemin vers d'autres choses comme sa description de ce qu'il a fait au US Bizarre Weekly. Je suis sûr que c'était très bizarre. l'école, on va énumérer où il est allé à l'université et on dira qu'il est allé à l'université de l'Indiana et que c'est un H3. Ensuite, c'est aussi un titre parce que nous allons décrire ce qu'il a étudié là-bas ainsi que les années qu'il a passées là-bas. Ensuite, pour le contact, peut-être que nous voulons avoir un numéro de téléphone, donc c'est un H3 et une adresse postale sera également dans H3. Peut-être qu'il a double diplôme à l'Université de l'Indiana. Donc, nous avons besoin d'autres rubriques pour décrire ses majors. Donc, disons qu'il s'est spécialisé dans l'illustration et la musique. Ce seront des rubriques supplémentaires en dessous parce qu'ils décriront ses études un peu plus en dessous de cela. Donc, ça va être H4. Si nous avons plus de niveaux de cap que ça, c'est là que nous allons descendre à H5 et H6 s. Donc peut-être sous la musique, il veut décrire chaque classe qu'il a prise, ce serait probablement bizarre de mis sur un CV, mais cela pourrait être un H5. Donc, vous pouvez voir que c'est un peu comment fonctionnent les en-têtes. Des contours très similaires que nous avons eu, alors pensez à eux comme ça lorsque vous créez vos en-têtes pour votre page. Donc, si nous retournons ici et commençons juste à ajouter un texte, dans ce cas, nous avons des listes de fromages que j'aime. Alors, peut-être qu'à la place, changeons ça en, liste des aliments que j'aime et puis je vais faire une autre rubrique qui dit, desserts, et je vais aussi vouloir parler de collations. Celui-ci reçoit une exclamation et ici je veux énumérer les desserts que j'aime et en parler un peu. Peut-être que je dirai, tarte à la lime clé et ensuite peut-être que j'aurai un paragraphe sur la raison pour laquelle j'aime la tarte à la lime clé. Donc, j'aime KLP parce que c'est délicieux flippant. Bonne histoire. Si nous avons un cap, nous en voulons probablement un autre, alors ajoutons un autre dessert. J' aime aussi les friandises de riz krispy et j'ai un paragraphe. C' est la meilleure façon d'utiliser du beurre, seulement trois ingrédients. C' est le type de copie que j'écris. Ensuite, la même chose vaut pour les collations. Donc, collations, nous pouvons écrire un peu sous des collations comme, purée de pommes de terre. La purée de pommes de terre est-elle une collation ? Probablement pas. Ce n'est pas comme ça que tu épelles des pommes de terre. Faisons-le bien et peut-être que je veux faire des pommes de terre et j'en parlerai. Je les aime purée, je les aime tater totted, etc. Donc, comme vous pouvez le voir, voici un autre exemple de la façon dont nous utiliserions les titres sur notre page. Si nous en avions un autre, peut-être que je veux parler de garnitures et je pourrais dire, garnitures salées et ensuite peut-être avoir un paragraphe décrivant les garnitures salées que j'aime sur les tots tater, comme le ketchup, la moutarde et puis peut-être garnitures sucrées. Je dois vous avouer que je ne mange jamais vraiment de garnitures sucrées sur mes tots. Mais disons que je l'ai fait, peut-être que je veux mettre de la sauce aux pommes sur eux ou peut-être que je veux mettre du sirop de chocolat dessus. Ça semble complètement appétissant. La sauce aux pommes serait probablement assez bonne. Ok, donc il y a quelques exemples de titres que nous avons. Encore une fois, je les ai tapés en ce moment juste pour que nous puissions voir ce contour, mais vraiment ils sont au même niveau d'imbrication. Donc, on voudrait les remettre dehors. Donc, je vais juste nettoyer ça un peu, et je vais enregistrer et ensuite je veux prévisualiser cette sauvegarde. Donc, nous allons ouvrir notre fichier class.HTML à nouveau, peut ouvrir dans le navigateur et maintenant vous pouvez voir ici mes en-têtes et vous pouvez voir que le H1 était le plus grand, puis le H2, puis le H3 et ensuite nous descendons au H4, le H5 et le H6. Donc, par défaut, le navigateur les rendra plus petits, l'en-tête de niveau inférieur vous laissera aller. C' est tout pour les titres en ce moment. Notre page est un peu ennuyeuse. Donc, dans la vidéo suivante, parlons de la façon dont nous ajoutons des images. 14. La balise d'image et les chemins de fichier relatifs/absolus: Donc, vous vous souvenez peut-être lorsque nous avons regardé les images plus tôt, que les images étaient un élément autonome, ce qui signifie qu'elles n'ont pas de balise de fermeture. Mais ils ont quelques attributs requis. Donc, pour commencer, nous faisons notre support ouvert, puis pour l'image, nous écrivons IMG. Ensuite, nous allons cliquer sur l'espace, puis nous allons commencer à taper les thèmes de notre attribut. Notre premier attribut va être la source. La source va nous dire où vit notre image. Donc, src= » "et nous allons remplir cela avec la valeur de l'endroit où le chemin du fichier est à notre image. L' autre chose dont nous avons besoin est l'attribut alt et l'alt se chargera si pour une raison quelconque l'image ne peut pas charger ou dira aux lecteurs d'écran de quoi est l'image. Donc, nous allons trouver une image à utiliser sur notre site. Je vais aller de l'avant et je voudrais mettre une image d'un paresseux parce que les paresseux sont adorables. Donc, je vais de l'avant et cliquez sur les balises d'image de google image. Je ne suis pas à la recherche de Sloth des Goonies bien que je profite beaucoup des Goonies. Je cherche un de ces adorables petits gars. Donc, je vais trouver l'URL de l'image pour cela en cliquant sur l'image de vue, puis quand cela se charge, je vais copier l'URL ici qui se termine par point JPEG. Ce sera le fichier image pour ce que je vais utiliser dans la source. Donc, je vais sélectionner tout cela et faire copier des fichiers ou contrôler C ou la commande C. Ensuite, je vais retourner à Sublime Text 2. Je vais trouver ma balise d'image et passer à cet attribut source, puis dans la valeur, je vais coller. Donc, je vais coller cette URL qui se termine par point JPEG et qui est le chemin vers notre fichier image. Une erreur courante que j'ai vu parfois est de coller l'URL de l'image en dehors de la citation double et cela ne fonctionnera pas. Lorsque vous le collez, assurez-vous qu'il est entre le guillemet afin qu'il agit comme la valeur de l'attribut. Donc, cette valeur ici est ce que nous appelons le chemin de fichier absolu. Il indique où cette image vit sur Internet. Nous appelons cela notre chemin de fichier absolu car il fait l'emplacement absolu de l'image. Donc, il vit à http://static.ddmcdn.com/gif/2-_sloth_in_bowl.jpg et se termine par ce point JPEG disant, « Si vous mettez cette URL dans une fenêtre de navigateur, vous trouverez cette image vivant là. L' étape suivante, nous devons également ajouter ou alter du texte afin que quiconque ne peut pas voir l'image sache que c'est paresseux. Ouais, paresseux. Nous voulons enregistrer cela, puis voyons à quoi cela ressemble dans notre navigateur. Une autre façon que nous pouvons voir notre fichier en plus de double-cliquer est en cliquant sur le fichier ouvert à partir de notre navigateur Chrome. Donc, maintenant nous avons notre dossier de classe ouvert et hé, regarde ! Voilà notre paresseux. Notre page est un peu plus lumineuse et plus heureuse. Mais qu'en est-il si vous voulez une image qui soit locale à l'ordinateur et non sur Internet ? Eh bien, nous pouvons soit enregistrer cette image dès maintenant notre dossier de site dans nos images et l'utiliser comme référence. Ou si vous suivez avec les fichiers de classe, vous verrez que dans le dossier images nous avons déjà sept images à choisir. Donc, incluons ce arbuckle-bio.jpg dans notre site. Ainsi, un moyen facile de voir où se trouvent nos fichiers est de visualiser la barre latérale. Donc, dans View, Sidebar, Show Sidebar dans Sublime Text, nous allons obtenir un volet de fenêtre supplémentaire et cela nous permettra de voir quels fichiers nous travaillons. Donc, en ce moment, nous voyons class.html et c'est l'onglet qui est ouvert. Mais que se passe-t-il si nous voulons voir les autres fichiers et dossiers qui se trouvent dans notre site Jon Arbuckle ? Nous pouvons le faire en saisissant simplement notre dossier et nous allons le faire glisser directement dans cette barre latérale. Donc, cliquez et faites glisser et maintenant vous verrez ces dossiers apparaître comme s'est produit. Donc, nous verrons le site Jon Arbuckle et nous verrons class.html et c'est le fichier dans lequel nous travaillons ici. Ensuite, nous sommes en mesure de voir facilement toutes les images qui se trouvent dans notre dossier images. Laisse-moi revivre ça avec toi. Une autre façon que vous pouvez obtenir la barre latérale ouverte dans votre Sublime Text est juste en cliquant sur Fichier, Ouvrir et naviguer vers votre dossier, donc Jon Arbuckle site. Ensuite, lorsque vous cliquez sur Ouvrir, il vous affichera automatiquement le dossier avec tous les fichiers. Sublime Text 2 fait cette chose bizarre où il ouvre deux fenêtres alors fermez simplement l'autre et assurez-vous que vous travaillez dans vos fichiers de classe. Donc, maintenant nous pouvons voir que nous avons notre class.html à nouveau. Je vais ouvrir ça et vous verrez quand j'ai double-cliqué dessus, il apparaît ici et dans la barre latérale. Si je clique juste une fois, alors Sublime Text 2 me donnera un aperçu rapide. Mais dès que je tape ici ou double-clique, il l'ouvrira en fait comme un onglet. Donc, lorsque je tape, il ouvre ensuite le fichier. C' est juste un moyen que vous pouvez rapidement parcourir vos fichiers sans les ouvrir réellement. Mais, assurez-vous que vous avez double-cliqué et que votre class.html soit réouvert. Alors, maintenant ajoutons notre image dans la page. Nous allons dupliquer la balise image car nous voulons enregistrer notre exemple de chemin de fichier absolu. Donc, encore une fois, nous allons écrire img source = "alt= », puis fermer notre balise. Donc, nous savons que nous voulons accéder à notre fichier logo.png qui se trouve à l'intérieur de notre dossier images. Mais comment y arriverons-nous exactement ? Dans notre exemple de chemin de fichier absolu, nous avions l'URL qui s'est terminée par paresseux dans le bol dot JPEG. Donc, nous savons que nous voulons inclure le type de référence d'image à elle. Donc, nous savons que nous allons avoir besoin de logo.png ici à coup sûr. Donc, essayons d'ajouter ce logo.png parce que c'est le nom de notre fichier image. Bien sûr, nous allons ajouter du texte alt ainsi nous allons juste l'appeler logo pour l'instant. Ensuite, sauvegardons ce fichier et voyons ce qui se passe lorsque nous l'ouvrons dans notre navigateur. Donc, j'ai actualisé la page et je vais faire défiler vers le bas et comme vous pouvez le voir, nous avons la paresse de notre chemin de fichier absolu, mais ici avec notre chemin de fichier relatif, rien ne s'affiche. Nous avons cette icône d'image cassée qui nous indique que l'image n'a pas le chemin de fichier correct à elle. Donc, nous survolons logo.png ici, rien ne se produit. Vous pouvez voir si je fais la même action sur le chemin absolu du fichier, nous obtenons un petit aperçu de l'image paresseuse. Mais ici, nous n'avons rien. Donc, quelque chose ne va pas. Donc, jetons un autre coup d'oeil à la façon dont nous pouvons faire apparaître notre logo.png. Donc, nous devons déterminer où le fichier est relatif à notre fichier class.html. Ici, nous sommes dans le fichier class.html et ce fichier est sur la même racine que le dossier image. Donc, essentiellement ce que nous devons faire est que nous devons dire au navigateur que nous sommes à class.html en ce moment mais nous devons aller dans le dossier image, puis une fois que nous sommes à l'intérieur du dossier image. Nous allons chercher un fichier appelé logo.png. Donc, nous allons le faire en tapant IMG parce que nous voulons aller dans ce dossier avec l'image, puis aller à l'intérieur d'un dossier. Nous utilisons le caractère barre oblique. Cela dit trouver le dossier d'image puis la barre oblique dit aller à l'intérieur de celui-ci et ensuite nous disons chercher logo.png. Sauvegardons cela, revenons à notre navigateur et donnons une actualisation. Hé, regarde, il y a notre logo. C' est ainsi que nous traversons nos chemins de fichiers et pouvons obtenir nos images relatives à notre document sur la page. Donc, c'est comme ça que nous allons dans un dossier, mais si nous devons retourner et trouver un fichier ? Eh bien, pour cette prochaine partie, je veux juste que vous suiviez comme je le fais et ne copiez pas et collez cela dans vos fichiers. Mais ce que je vais faire est de faire un nouveau dossier et ce nouveau dossier va contenir notre fichier class.html. Donc, droit dans Sublime Text, je peux cliquer sur Nouveau dossier et je vais juste le nommer classe. Donc, maintenant comme vous pouvez le voir, nous avons un nouveau dossier de classe dans notre dossier de site Jon Arbuckle. Je vais fermer le fichier avec lequel je travaillais, ouvrir ma fenêtre du Finder. Pour l'instant, juste pour vous montrer, je vais faire glisser le fichier class.html dans le dossier de classe. Je vais rouvrir ce fichier et montrer le fichier class.html qui vit maintenant à l'intérieur de cela. On va ouvrir ça dans le navigateur. Maintenant, nous faisons défiler vers le bas et vous pouvez voir que notre chemin d'image est à nouveau cassé. Notre chemin d'image est encore brisé parce que nous allons revoir notre source. Nous recherchons essentiellement un dossier d'image avec un fichier PNG logo à l'intérieur de notre dossier de classe. Parce que rappelez-vous que c'est relatif à l'endroit où se trouve notre dossier. Donc, notre fichier class.html dit, « Eh bien, où est un dossier d'image ici ? » Et ce n'est pas parce que c'est un niveau supérieur. Donc, nous devons faire est de comprendre comment nous pouvons obtenir de la sauvegarde HTML de classe à la route du dossier de site Jon Arbuckle , puis de retour dans le dossier d'image pour trouver le logo.png. Donc, nous pouvons le faire aussi bien dans Sublime Text et dans notre fichier HTML. Ce que nous devons faire, c'est remonter un niveau. Pour monter un niveau, nous tapons point slash et cela dit d'où je suis class.html, montez d'un niveau, puis recherchez un dossier d'image, puis trouvez le fichier logo.png. Alors, sauvegardons ça. Retournez à un navigateur, actualisez et regardez là il est à nouveau. Notre chemin de fichier absolu prend un peu plus de temps à charger, mais cela apparaîtra momentanément. Hé, regarde là, c'est. Donc, maintenant nous avons les deux fichiers sur notre page à nouveau et nous avons fait cela correct en faisant la barre oblique de point pour aller au niveau supérieur et trouver l'image correcte. Si vous avez été imbriqué quelques dossiers en profondeur, vous pouvez continuer à monter les niveaux en juste- vous continuez à taper le point slash. Donc, en ce moment, ça monterait un, deux, trois, quatre niveaux si nous étions quatre dossiers de profondeur. Bien sûr, nous ne le sommes pas, alors débarrassons-nous de ça. Donc, c'est comme ça que nous traversons nos fichiers obtenir des chemins de fichiers relatifs. moment, nous allons tout remettre à la façon dont il était et déplacer notre fichier class.html à la racine afin que nous puissions revenir à la façon dont les choses étaient organisées auparavant. Lorsque je déplace des fichiers comme ceci, je veux m'assurer que je travaille dans les bons fichiers dans Sublime Text. Donc, en ce moment, il regarde toujours le fichier class.html qui était dans un dossier de classe qui n'existe plus. Donc, je veux m'assurer que je ferme cela, n'enregistrez pas et n'ouvrez pas mon fichier réel. C' est ainsi que nous obtenons des images sur nos pages avec des chemins de fichiers absolus et relatifs. Dans la vidéo suivante, regardons les éléments de la liste et voyons comment nous pouvons commencer à ajouter différents types de listes à notre page. 15. Les éléments d'une liste: Donc, ensuite, nous regardons les éléments de liste. Je vais juste supprimer certains de ces paragraphes pour nous donner un peu plus de place et donc une liste que nous avons, que nous avons vu un peu auparavant était la liste non ordonnée que nous avons tapée en écrivant <UL> et puis soyons sûrs de la fermer par mettant également la balise de fermeture de la </UL>. Donc, UL est pour les articles de liste non ordonnés et nous pouvons utiliser la liste non ordonnée pour une variété de choses différentes. Peut-être, si nous faisions cuire une recette et que nous avions besoin d'obtenir des ingrédients, Liste non ordonnée serait génial pour les ingrédients parce que si nous allons faire des achats alimentaires, Cela n'a pas exactement d'importance l'ordre que nous l'achetons et aussi longtemps que nous obtenons tout sur la liste. Donc, un de nos exemples pourrait être quelque chose comme ce dont nous aurions besoin pour la cuisson. Donc, disons que nous avons besoin de quelque chose comme la farine, le sucre et les pépites de chocolat. Donc, si nous sauvegardons ceci dès maintenant et que nous l'afficherons dans notre navigateur, nous allons rafraîchir la page et ensuite nous verrons de la farine, du sucre et des pépites de chocolat là-bas, mais ils sont tous assis sur la même ligne que l'autre. Donc, essentiellement, ils n'apparaissent pas vraiment comme des éléments de liste autant qu'ils ne sont que du texte de paragraphe. Chaque fois que nous utilisons une liste non ordonnée ou tout autre type de type Liste, nous ne pouvons pas simplement mettre le conteneur d'un UL. Nous devons également inclure un élément LI. L' élément LI représente l'élément List Item et sépare chaque élément qui appartient à la liste. Dans ce cas, la Liste non ordonnée. Nous le faisons en tapant <Ll> et puis encore une fois nous aurons notre balise de fermeture pour un. On va couper ce texte une farine et on va le coller dans le LI pour le commercialiser en tant que LI Item. Nous ferons la même chose pour le sucre et nous allons également entourer les pépites de chocolat parce que c'est le troisième élément de liste de notre liste. Débarrassez-vous de l'espace ici, puis sauvegardons nouveau ce fichier et voyons maintenant à quoi cela ressemble dans notre navigateur. Nous allons actualiser la page et maintenant comme vous pouvez le voir, cela semble tout à fait différent. Tout d'un coup, nous avons maintenant une liste à puces de trois éléments de liste non ordonnés. Donc, la farine, le sucre, les pépites de chocolat et par défaut si vous utilisez une Liste Non ordonnée, le navigateur ajoutera ce point ou puce à chacun de nos articles de liste. Les éléments de liste peuvent contenir d'autres types de texte aussi, plus du texte brut, nous pouvons réellement mettre des éléments HTML à l'intérieur de celui-ci. Donc, si nous voulions mettre un tas de textes de paragraphe avec à l'intérieur d'un élément de liste, nous pourrions. Donc, nous avons une étiquette imbriquée à l'intérieur de notre LI, imbriquée à l'intérieur de notre UL et nous pouvons écrire un paragraphe ici comme acheter de la farine de blé entier et nous pouvons fermer cela et si nous voulions cela est totalement sémantique HTML ainsi vous pouvez avoir un quelques paragraphes décrivant chaque élément de la liste. Une autre chose à signaler est que vous ne pouvez pas simplement mettre un paragraphe à l'intérieur d'un UL. Il doit toujours s'agir d'un UL suivi d'un LI et de tout autre texte supplémentaire à l'intérieur de celui-ci afin d'avoir un élément de liste valide. Donc, remettons notre texte à la façon dont il était et n' oubliez pas de sauvegarder car il est important de sauvegarder souvent, mais que faire si la commande avait de l'importance. Et si nous ne voulions pas juste une liste non ordonnée, mais nous voulions une liste ordonnée. On peut le faire avec un OL. Les OL ressemblaient exactement à un UL, sauf que nous allons utiliser OL, mais à l'intérieur, nous aurons à nouveau List Items. Toujours un OL avec des LIS imbriquées à l'intérieur. Une des raisons pour lesquelles nous pourrions vouloir une liste ordonnée est si nous parlons réellement des instructions pour faire cuire quelque chose. Donc, c'est là que l'ordre des opérations est plus important, alors nous allons vouloir utiliser une liste ordonnée pour quelque chose comme, verser une tasse de farine dans un bol, mélanger le sucre, manger les pépites de chocolat parce que c'est un recette vraiment légitime. Je ne pense pas vraiment que quelqu'un devrait suivre cela à la maison, mais faisons semblant que les étapes sont importantes ici et donc ce serait une liste ordonnée. Nous allons enregistrer cela et regardons dans un navigateur. Ainsi, vous pouvez voir pour une liste ordonnée par défaut le navigateur, met des nombres en face de lui. Donc, un, deux, trois devant chaque étape par opposition à la liste à puces de la liste non ordonnée. Nous avons un autre type de liste que nous allons couvrir et c'est un peu différent et c'est la liste des définitions. La liste des définitions est marquée par un DL. Nous n'avons pas d'éléments de liste à l'intérieur de ceux-ci cependant. Pour la liste de définitions, nous allons réellement définir un terme de définition et une description de définition. Donc, notre terme de définition pourrait être quelque chose comme banane et ensuite nous allons vouloir faire la description de la définition. Donc, pour la banane, nous pouvons dire que la définition est quelque chose comme un délicieux fruit jaune et ensuite nous allons fermer cette définition en la fermant avec une étiquette. Ajoutons un autre terme. Donc, si nous voulons avoir plusieurs termes dans nos listes, alors disons que c'est une liste de fruits. Nous allons définir ce qu'est un kiwi avec le DT et ensuite nous devons aussi lui donner une description, donc dans le DD nous allons écrire quelque chose sur Kiwis donc quelque chose comme des fruits verts bizarres avec fuzz et un goût attrayant et ensuite nous allons fermer cette définition. Je vais étendre cela un peu, parce qu'il allait à la ligne suivante donc nous n'avons pas assez de place et après cela, nous avons une liste de définitions finie. Alors, voyons à quoi cela ressemble dans notre navigateur. Nous allons enregistrer notre fichier et ensuite nous actualiserons et ici vous pouvez voir que c'est un peu différent. Dans notre liste de définitions, notre terme est à gauche, puis la description de la définition est indentée vers la droite. Donc, ce sont les paramètres par défaut du navigateur pour afficher une liste de définitions dans l'écran. On dirait que je ne sais pas comment épeler délicieux, alors réparons ça et avec cela notre liste de définitions est tout. Dans la prochaine leçon, nous allons jeter un oeil à ce qui fait de l'Internet l'une des meilleures choses qu'il y a et qui est Liens. Alors, revenez pour la prochaine vidéo. 16. Les liens: Jusqu' à présent, nous avons vraiment eu du contenu statique sur une page, mais ce qui rend le HTML différent des autres langages de balisage comme SGML est la fonctionnalité pour les documents hypertextes et interactifs discrets. Un lien est une connexion d'une page à l'autre et ils sont super géniaux. Donc, comme quand nous regardons une vidéo YouTube et qu'elle se termine, et c'est comme, vous avez regardé cette vidéo de chat mignon voici un lien vers une autre vidéo de chat mignon et vous êtes comme, c'est génial ou quand vous écrivez une nouvelle histoire et vous cliquez sur un lien vers une autre nouvelle histoire. Les liens sont la façon dont nous nous déplacons. Alors, parlons un peu de la façon dont nous faisons des liens. Link a essentiellement deux extrémités ; une ancre, puis il a aussi une direction. Donc, la façon dont nous écrivons une balise de lien est essentiellement que nous écrivons une balise d'ancrage. Donc, faisons défiler vers le bas et trouvons de la place, et pour écrire notre balise d'ancrage, nous allons écrire A pour l'ancre, puis la partie suivante qui est super importante est l'attribut href. L' attribut href est la direction de l'endroit où nous voulons que le lien aille. La valeur pour cela est essentiellement la source de l'URL que nous voulons que nos visiteurs visitent après avoir cliqué sur ce lien. Donc, à l'intérieur, vous pouvez écrire du texte comme « cliquez ici » et ensuite nous allons fermer notre balise d'ancrage avec la fermeture A. Dans notre href, nous allons mettre cette URL de l'endroit où la page devrait aller. Il peut s'agir d'une page sur notre site ou d'une page externe, alors peut-être que quelque chose comme cuteoverload.com est l'endroit où nous voulons envoyer nos visiteurs. Donc, sauvegardons ceci et voyons à quoi cela ressemble dans notre page. Donc, nous allons lui donner une vieille actualisation et maintenant nous pouvons voir que nous avons un lien « cliquez ici », alors pourquoi pas ? Cliquons ici. Donc, je vais cliquer sur ce lien et quand je le ferai, je vais prendre à cuteoverload.com et je peux rapidement voir que c'était une décision très intelligente parce que regardez tout le mignon qui est sur cette page. C' est un cochon d'Inde mérinos ? C'est plutôt bien. Regarde ce petit lion. C'est un chat lion ? Je ne sais pas ce que c'est, mais ça mange une girafe et j'aime bien ça et regarde l'éléphant. Ok, je suis officiellement distrait, alors revenons à nos balises de lien. Donc, il y a notre tag de lien cliquez ici et je dois dire que cliquez ici est terrible texte de lien à avoir. C' est terrible parce que cliquez ici je veux dire que j'ai déjà fait cette erreur sur Internet avant, non ? Donc, lorsque nous écrivons des descripteurs de liens, nous voulons nous assurer qu'il est plus clair. Donc quelque chose comme, « voir les animaux adorables », et puis je sais que quand je clique sur ce lien, je vais être emmené à d'adorables animaux. Donc, c'est beaucoup mieux le texte de lien qui pointera vers une surcharge mignonne et le rendre plus clair à vos visiteurs où ils iront quand ils cliqueront sur ce lien. Ça enveloppe nos ancres. Jetons donc un coup d'oeil aux guillemets de bloc dans notre prochaine vidéo. 17. Les blocs de citation: Dans notre aperçu du contenu, nous avons parlé d'inclure une citation de l'un des clients de Jon. Pour ce faire, nous allons utiliser l'élément blockquote. L' élément blockquote représente une section codée de texte. Alors, trouvons un peu d'espace pour mettre ça. Nous le faisons en écrivant un support ouvert, un livre de bloc, un support fermé, et puis bien sûr, nous devons fermer notre étiquette. Alors, mettons une citation ici. Donc, je vais mettre une citation de l'un de mes paroliers préférés et j'écrirai  : « Réveillez-vous le matin, vous sentirez comme P Diddy. » Seuls les blockquotes vraiment profondes vont sur notre site aujourd'hui les gens. Donc, essentiellement, quand on regarde ce texte, n' est pas seulement du texte brut. C' est en fait un paragraphe parce que Kesha n'écrit que des paragraphes très intelligents dans ses paroles. Alors, entourons notre texte d'un paragraphe. Donc, maintenant notre paragraphe est imbriqué dans notre blockquote. Nous allons prévisualiser cela dans le navigateur, et vous verrez ici c'est. Voici notre blockquote et par défaut du navigateur, il va être indenté du côté gauche de notre page pour représenter qu'il s'agit d'un morceau de texte entre guillemets. Un blockquote est également connu comme un élément de bloc. Jusqu' à présent, nous avons vraiment utilisé beaucoup d'éléments de bloc sur notre page, et les éléments de bloc que vous pouvez dire par le saut de ligne dure après chaque élément, donc c'est cet espace blanc entre nos éléments. Dans la prochaine vidéo, nous allons parler des éléments en ligne, qui feront également partie de nos pages Web. 18. Les éléments en ligne: Jusqu' à présent, nous avons utilisé principalement des éléments de niveau bloc, et les éléments de niveau bloc ont un espace blanc après chaque fois qu'ils sont sur la page. Cependant, les textes d'un titre de paragraphe ou d'autres éléments de niveau bloc peuvent également être balisés de différentes manières. Donc, peut-être que nous voulons ajouter de l'accent ou mettre en évidence le texte, eh bien, nous pouvons le faire dans des choses comme nos paragraphes ou nos éléments de bloc sur une page. Donc, un exemple d'un élément en ligne est l'élément ABBR ou une abréviation. Donc, si vous utilisez une abréviation, en fait déjà une fois, et c'est pour Q et pie. Nous avons dit, j'adore KLP parce que c'est délicieux. Alors disons aux gens ce qu'il s'agit d'une abréviation dans notre texte. Donc, ce que nous pouvons faire avec un élément en ligne est de le mettre à l'intérieur d'un élément de niveau bloc. Donc, nous allons taper la balise ABBR, puis la fermer avec une balise ABBR fermante et cela dit que KLP est une abréviation de sorte que vous verrez que cet élément en ligne est imbriqué dans le paragraphe. Nous pouvons également ajouter un attribut à nos éléments ABBR et nous allons ajouter l'attribut title. L' attribut title est différent de la balise title en ce qu'il décrit l'ABBR et ne fournit pas ce texte d'onglet sur notre page. Donc, le titre ici va être ce que représente cette abréviation qui est Q, I et pie. Cela indique aux moteurs de recherche et aux lecteurs d'écran ce qu'est KLP, et aussi lorsque nous enregistrons et prévisualisons dans le navigateur vous verrez que nous serons en mesure de le voir dans une autre zone. Donc en ce moment, il ressemble à peu près le même, mais si nous prenons notre souris et survolons, vous pouvez voir que nous obtenons maintenant une info-bulle qui indique l'attribut title de notre balise ABBR qui dit, Key lime pie. Donc, l'ABBR est un élément en ligne et vous verrez qu'il n'y a pas de rupture de ligne dure par la suite. Il apparaît juste en ligne avec le reste du texte. C' est donc ce qu'on appelle un élément en ligne. Il y a d'autres éléments en ligne que nous pouvons utiliser, HTML nous fournit deux façons d'avoir l'accent sur notre texte. L' une des façons est à travers la balise M. Nous pouvons ajouter l'accent ordinaire en plaçant la balise M autour du bloc de texte. Dans ce cas, soulignons la mozzarella car elle mérite d'être soulignée. Un autre niveau d'importance est l'accent mis. Nous pouvons ajouter cela à notre page en utilisant la balise forte. Donc, nous allons nous amuser faire comme être texte fort ici. Tous ces éléments en ligne sont imbriqués dans notre paragraphe et lorsque nous actualisons et faisons défiler vers le bas pour vérifier que vous pouvez voir que par défaut l'accent est réellement rendu italique et notre balise forte est en fait par défaut un boulon rendu. Voici donc quelques exemples des éléments en ligne que nous avons. Il y a d'autres éléments en ligne là-bas aussi, rappelez-vous que vous pouvez vérifier ce site HTML doc et voir ce qu'il y a d'autre. Donc, si nous regardons notre section de texte ici, vous pouvez voir certaines des choses que nous venons de discuter comme la balise forte ou la balise M. D' autres choses ici sont des éléments en ligne ainsi que la balise DFN ou la balise delete. Nous avons également examiné un autre élément en ligne, droite l'élément de lien. Donc, chaque fois que nous avons un lien sur notre page c'est un autre élément en ligne où ce n'est pas un niveau de bloc. Nous pouvons ajouter un lien dans notre texte de paragraphe ainsi il n'a pas besoin d'être autonome. Donc, si nous voulions faire un lien comme le sourire au fromage, nous pouvons le faire. Nous mettons juste notre curseur dans ce texte, puis autour du texte que nous voulons être sur le lien, nous allons écrire notre balise A. Donc A href est égal et puis nous allons avoir notre valeur d'attribut, nous allons le mettre après, nous allons fermer notre étiquette abord et ensuite nous allons revenir en arrière et où nous voulons que cela aille, ça peut aller. Donc, disons que nous voulons un sourire au fromage 2.2. Faisons cheese.com Je suis sûr que c'est un beau site qui vous fera sourire sur le fromage. Donc, c'est ainsi que nous pouvons ajouter un lien en ligne dans notre texte de paragraphe et maintenant vous pouvez voir le lien apparaît et il n'y a sauts de ligne avant ou après car c'est un élément en ligne. Vous remarquerez également qu'il y a une différence de couleur ici, si les liens ont été visités, il apparaît comme violet par défaut et si nous n'avons pas encore cliqué sur un lien, il apparaît comme bleu. Donc, ça enroule les liens. Dans notre prochaine vidéo, nous allons parler des entités HTML et comment les ajouter à notre page. 19. Les entités HTML: Parfois, nous avons besoin de plus que de textes simples dans nos documents HTML. Les caractères réservés en HTML doivent être remplacés par des entités de caractère. Donc, des choses comme les symboles de copyright ou les marques de commerce, c'est pour cela que nous allons utiliser les entités HTML pour. Voyons quelques exemples de cela. Nous allons faire un nouveau paragraphe ici à utiliser comme exemple pour les entités. Donc, nous allons juste dire que c'est notre paragraphe d'entité. Et puis, essayons d'ajouter une entité. façon dont vous écrivez une entité sur une page suit la même syntaxe. Cela commence toujours par une esperluette, puis nous allons écrire le nom de l'entité. Dans ce cas, nous allons écrire copie pour le copyright, puis il se termine par un point-virgule. Donc, esperluette, copie, point-virgule. Sauvegardez-le, actualisez, et là vous pouvez voir il y a notre symbole de copyright. C' est une entité HTML. C'est plutôt cool. Et il y a tout un tas qu'on peut écrire. Nous pouvons en faire un autre, si nous voulons mettre une entité sou, nous le pouvons, esperluette centime point-virgule. Ou si nous voulons mettre Euros, nous pouvons faire esperluette, Euro, point-virgule. Si vous voulez une marque qui serait esperluette, commerce, point-virgule. Certains d'entre eux sont assez faciles à lire ou deviner et ensuite nous pouvons voir quand nous actualisons la page là ils sont tous. Mais si on veut une esperluette ? On peut faire ça aussi, on fait esperluette, ampli, point-virgule, et maintenant il y a une jolie esperluette sur notre page. Ne vous inquiétez pas, vous n'avez pas besoin de mémoriser tous ces éléments, si vous faites une recherche d'entités HTML, vous trouverez beaucoup de références à toutes les entités que vous pouvez utiliser là-bas. Voici un site qui montre un tas et comme vous pouvez le voir il y en a beaucoup. Donc, ne vous inquiétez pas de les mémoriser, chaque fois que vous cherchez une entité, faites simplement une recherche Google rapide pour elle et vous pouvez la trouver. Vous allez probablement mémoriser certains qui utilisent plus que d'autres, mais si vous oubliez jamais, il suffit de faire une recherche rapide pour un copyright d'entité HTML, et vous obtiendrez probablement environ 3,7 millions de résultats sur les inter-sites sur la façon dont pour vous dire de le faire. Donc, pas de soucis si tu oublies. Dans la vidéo suivante, jetons un coup d'œil au formatage du code et aux meilleures pratiques. 20. Le formatage du code: Donc, nous avons parlé un peu des espaces blancs et du formatage du code, mais je veux juste passer en revue quelques bonnes pratiques. Il est vraiment important que nous gardions notre code gentil et propre. Cela vous évitera des maux de tête si vous revenez à votre code dans une semaine ou un an et que vous ne vous en souvenez pas exactement. Cela permettra également d'économiser des maux de tête si vous travaillez au sein d'une équipe. Il est préférable que vous soyez tous d'accord sur la façon de formater votre code. Techniquement, parce que les espaces blancs sont ignorés, vous pouvez écrire votre code HTML comme ceci. Il pourrait fondamentalement être un bâclé que vous voulez et le navigateur va en quelque sorte corriger cela pour vous. Cependant, il est vraiment difficile de le lire. Donc, gardez toujours à une sorte d'espacement de ligne agréable qu'il vous rend facile d'analyser. Vous verrez également que Sublime Text a ici ce qu'ils appellent une minimap et la minimap vous permet de parcourir vos textes, donc si vous cherchez un morceau de HTML spécifique que vous avez écrit. ce moment, notre document est assez court, ce qui peut ne pas être nécessaire, mais si votre projet est long, vous pouvez vouloir l'utiliser. Pour l'instant, cependant, nous pouvons cacher minimap et alors cela ne bloquera aucun bien immobilier sur notre coin. Une autre chose que nous voulons éviter est ce qu'on appelle la soupe d'étiquettes. Donc, nous pouvons écrire h1 en minuscules comme nous l'avons fait ou nous pouvons l'écrire en majuscules. Cela sera également lu par le navigateur. Vous pouvez aussi faire quelque chose de vraiment cool comme ça, T majuscule, I minuscule, T majuscule, L majuscule, Vous obtenez le point. C' est si vous voulez revivre 1996 hackers jours et vous voulez être zéro cool, mais ce n'est vraiment pas très cool du tout. Donc, ce sera HTML valide qui peut être lu mais ça fait juste mal aux yeux à regarder. Donc, je recommande de ne pas faire cela. C' est vraiment agréable de garder votre code propre et bien rangé. Donc, remettons-le en minuscules. Ensuite, chaque fois que vous travaillez avec une équipe, vous pouvez trouver un document de mise en forme pour savoir comment tout le monde devrait écrire son code HTML. C' est vraiment une bonne pratique à suivre et cela vous gardera propre et honnête avec votre code. Un autre outil que nous avons à notre disposition est les commentaires HTML. Donc, disons que nous voulions écrire une petite note sur notre soi ici. Et si je voulais ajouter d'autres déserts plus tard et que je ne voulais pas oublier. Je vais écrire une note qui dit : « N'oubliez pas d'ajouter d'autres déserts. » Super. Le problème est cependant, tout ce que nous écrivons dans notre corps sera imprimé sur la page. Donc, si je me rafraîchis ici alors, bien sûr, nous allons voir la note que je me suis écrite sur la page. Alors, comment pouvons-nous éviter que cela ne se produise ? Eh bien, nous pouvons utiliser des commentaires HTML. Donc, pour les commentaires HTML, ils ressemblent à ceci, exclamation des crochets ouverts, trait d'union, et puis à la fin du commentaire, nous allons faire un autre trait d'union double et le crochet de fermeture. Vous pouvez voir Sublime Text fait cette couleur grise pour nous faire savoir que c'est un commentaire. Maintenant, quand je sauvegarde et aller dans le navigateur, c'est caché de la vue. Donc, les commentaires HTML peuvent être vraiment super utiles. Une chose que je veux souligner cependant est juste parce que nous ne pouvons pas le voir dans cette vue du navigateur ici ne signifie pas que ce n'est pas dans votre source. Donc, si quelqu'un devait voir votre source, regardez il y a notre commentaire. Je te dis ça parce que je ne veux pas que tu écrives quelque chose comme : « Je déteste mon patron. » Dans vos commentaires parce qu'il est certainement possible que quelqu'un puisse le voir. Souviens-toi de ça. Bien que les commentaires HTML ne soient pas imprimés sur la page, il est toujours possible que quelqu'un puisse voir ce que vous écrivez là-dedans. Les commentaires HTML peuvent être super utiles juste pour garder une trace de tout ce que nous voulons. Donc, peut-être dans les notes de classe que je veux dire ce qu'est cette section. Donc, ici, nous avons appris sur les titres. Donc, voici un commentaire HTML qui dit, « Headings ». Donc, ici, je vais lire les commentaires et celui-ci dira des images parce que c'est là que nous avons appris sur les images. Je peux copier et coller ceci pour le rendre un peu plus simple pour moi à écrire. Donc, ici, nous avons appris à propos des blockquotes. Donc, je vais changer le texte en guillemets. Ici, nous avons appris sur les liens. Donc, permettez-moi d'ajouter dans cette rubrique pour les liens. Voici notre paragraphe et notre exemple d'élément en ligne. Nous avons nos listes non ordonnées, nos listes ordonnées et notre liste de définitions. Donc, ce sont des commentaires HTML et quelques notes sur le formatage du code. Donc, rappelez-vous juste, essayez toujours de garder votre code bien et propre, utilisez vos onglets pour indenter et afficher l'imbrication, et assurez-vous de faire toutes les lettres minuscules donc c'est un peu plus facile à lire. Nous avons beaucoup appris dans ces dernières vidéos et je pense que nous sommes maintenant prêts à revenir à notre plan de contenu et à commencer à traduire notre contenu en HTML pour notre page d'accueil. 21. Baliser notre page d'accueil: Nous allons quitter notre fichier class.html pour l'instant pour faire notre page d'accueil. Donc, nous allons sélectionner Fichier, Nouveau fichier, et nous allons créer un nouveau document à partir duquel travailler. Nous allons ajouter dans notre shell HTML, sorte que vous pouvez copier et coller cela si vous voulez, mais pour l'instant, faisons-le à partir de zéro. Donc, nous avons besoin de notre doctype HTML, et c'est une balise autonome. Ensuite est notre élément HTML, et n'oubliez pas que nous allons mettre cet attribut Lang là et le définir en anglais. Nous allons fermer notre balise HTML car tout sera imbriqué à l'intérieur de cela. Ensuite, c'est notre élément de tête. N' oubliez pas que notre tête détient toutes nos métadonnées pour notre page. Après cela, notre élément corporel. L' élément body contient tout le contenu qui sera affiché à l'écran. Nous allons enregistrer notre fichier, et pour la page d'accueil de tous nos sites, nous allons en fait nommer ce index.html. Le fichier HTML d'index est ce que le serveur Web recherchera lorsqu'il accède à la racine de votre document HTML. Index.html indique qu'il s'agit de la page d'accueil et de la première page qui doit être chargée lorsque les visiteurs viennent sur votre site. Donc, nous allons enregistrer cela et vous remarquerez qu'une fois que Sublime Text sait qu'il s'agit d'un fichier HTML, il commencera à faire la mise en évidence de la syntaxe colorée basée sur des balises HTML. Ouvrons notre plan de contenu, et examinons ce que nous avons pour notre page d'accueil. Donc, nous savons que nous allons vouloir que la balise title dans la balise title les informations pour ce qu'est cette page d'accueil, qui va dans notre élément tête parce que ce sont des métadonnées. Nous ajouterons notre balise de titre, puis nous écrirons ce que nous voulons apparaître, qui sera Le Portfolio de Jon Arbuckle. N' oubliez pas l'autre chose nécessaire dont nous avons besoin dans notre tête, est une balise méta avec l'attribut set de voiture. On va régler ça sur UTF 8. Sauvegardons cela, parce que rappelez-vous que nous voulons toujours économiser souvent. Ensuite, nous allons commencer à ajouter le contenu à notre corps, donc si nous avons un aperçu maintenant, bien sûr, rien ne sera sur la page parce que nous n'avons encore rien mis sur notre élément body, mais nous verrons notre balise title affichée dans l'onglet du navigateur. En outre, nous ne définissons jamais une icône de fave, donc voici cette icône de document par défaut que j'ai mentionnée plus tôt. Commençons à ajouter des choses au corps de la page afin qu'il apparaisse réellement dans le navigateur. Nous avons notre emplacement d'ascenseur qui agira comme notre H1. Je vais copier ce texte, puis je vais créer l'élément H1. Je vais coller le texte et puis je vais fermer l'élément H1 et maintenant, nous avons notre titre Niveau 1 pour notre page. Ce sera le titre le plus important qui s'affichera sur notre page. Si nous vérifions cela, nous y allons, et rappelez-vous par défaut qu'il devient plus grand et plus audacieux que le reste du texte sur notre page. Vous remarquerez peut-être que l'apostrophe je suis est en fait affiché comme une citation bouclée qui est ce que nous voulons. Cela se produit parce que nous l'avons copié et collé à partir d'un document Word. Cependant, si vous avez juste tapé du texte dans cet éditeur, vous remarquerez que lorsque je fais le I apostrophe M et que je rafraîchis la page. Il s'avère que ce n'est pas l'apostrophe bouclée que nous voulons vraiment. Jason Santa Maria a un excellent article à ce sujet : « Ne soyez pas stupide vous intelligent », et tout est de s'assurer que vous utilisez réellement des citations bouclées, et ne décrivez pas des choses comme des pouces ou des pieds. Alors, comment pouvons-nous nous assurer que ça se passe ? Eh bien, nous pouvons revenir à l'utilisation de nos entités HTML que nous connaissons. Il y a en fait une entité HTML pour cela et c'est ' et cela signifie citation à droite. Donc, lorsque nous laissons tomber dans cette entité HTML, vous verrez qu'elle est maintenant corrigée à la citation bouclée droite. Ensuite, nous allons vouloir inclure cette grande image que nous avons décrite. Dans ce cas, Jon n'est pas encore sûr de ce qu'il veut y mettre. Nous savons que nous allons avoir besoin de la balise image avec la source et tous les attributs. Mais quelle sera la valeur de notre source ? Eh bien, nous n'en sommes pas encore sûrs, alors qu'est-ce qu'on fait pour ne pas être sûrs. Rappelez-vous que nous avons parlé du texte Lorem Ipsum plus tôt, et qu'il y avait des générateurs Lorem Ipsum que nous pouvons utiliser. Il y a aussi fondamentalement l'équivalent pour Lorem Ipsum des images. Mon préféré est, placekitten.com. Voici placekitten et ce que vous faites est que vous pouvez saisir cette URL qui est répertoriée ici, placekitten.com/200/300. Nous allons le copier, et nous allons le déposer dans notre valeur source. Les 200 et 300 représentent la largeur et la hauteur, sorte que vous pouvez les ajuster à la taille dont vous avez besoin. Ici, nous montrons 200 pixels de large et 300 pixels de haut. Nous voulons que ce soit plus une image verticale, passons ça à un 1000 pour la largeur et il a été rafraîchi, oh, regarde, il y a un petit visage de chat. Vous pouvez en quelque sorte ajuster ceci à ce que vous cherchez, et il met essentiellement juste un espace réservé d'une image de chaton pour vous. Si les chats ne sont pas votre truc, il y a beaucoup d'autres services là-bas aussi que vous pouvez utiliser. L' un d'eux est, nicenice.jpg, le service d'espace réservé Vanilla Ice, ou ils sont Fill Murray, qui est des images de Bill Murray. Vous pouvez également vérifier placebear si vous aimez les ours plus que les chats. Il y en a aussi une plus simple, voici le dummyimage.com, et cela nous donne juste une image avec les dimensions écrites sur le dessus. Cela pourrait être un peu plus classique pour certaines choses que vous recherchez, peut-être pas autant de plaisir, mais probablement plus juste au point, peut-être, mieux pour les livrables clients, selon votre client. Alors, ajustons ça ici. Donc 900 par 300, puis le 0001 et fff représentent les couleurs, donc 000 signifie noir et le fff est blanc pour le texte qui est assis sur le dessus. Donc, voilà, maintenant nous avons notre H1, nous avons notre image de héros. On ne sait pas exactement à quoi il va être. Donc, pour l'instant, nous utilisons juste cette image d'espace réservé. Cette image que nous avons définie avec un chemin de fichier absolu. Ensuite, nous voulons mettre quelques informations sur les bandes dessinées de Jon. Nous voulons un peu d'une description pour s'assurer qu'ils savent que Jon écrit effectivement des bandes dessinées web. Donc, la bande dessinée, si nous repensons à notre plan, est la rubrique de deuxième niveau sous laquelle Jon Arbuckle travaille en freelance alors faisons un autre titre, cette fois un H2 et mettez-le sur Web Comics, alors nous allons veulent ajouter le texte de description dont nous avons parlé et qui sera dans une balise de paragraphe. Pour le paragraphe, nous allons juste écrire un texte assez simple ici. On peut toujours revenir en arrière et s'ajuster. Cette fois, nous allons dire, suivre les aventures de Jon en mangeant aux Chroniques de Lasagne. Ce texte à lui seul fait beaucoup de bien. Nous voulons que les gens en apprennent davantage. Donc, assurez-vous d'inclure un lien ici. Le lien ira à notre page de travail. Nous allons régler ça un peu plus tard et nous allons faire dire quelque chose de descriptif, parce que rappelez-vous que nous voulons que les gens sachent où ils vont aller et donc nous allons leur dire, voir les bandes dessinées de Jon. Nous voulons aussi parler de la très importante carrière musicale de Jon. Donc, mettons un autre titre parce que ça va vivre sous ce qu'il fait, et ça va être en H2 avec le texte de la musique. Si nous nous référons à notre plan, nous pouvons voir que nous voulions parler ses CD populaires à vendre et inclure une image de celui-ci. Donc, ajoutons notre balise image avec notre attribut source et notre attribut alt, et voyons quelle image nous voulons. Eh bien, nous allons vouloir que cette image pokeaholic.jpg apparaisse. Donc, rappelez-vous, parce que nous établissons un lien vers une image dans notre propre site, nous allons utiliser une URL relative au lieu d'un chemin absolu. Donc, nous allons aller dans le dossier des images. Donc, nous le faisons en tapant img, parce que c'est au même niveau que notre index.html. Ensuite, pour aller à l'intérieur du dossier, nous allons écrire barre oblique, puis nous taperons le nom du fichier qui est polkaholic.jpg. Pour tous ceux qui ne peuvent pas voir cela, nous voulons nous assurer que nous fournissons un texte alternatif, afin que nous puissions écrire quelque chose comme polkaholic là-bas. En fait, nous n'allons pas en avoir besoin dans cet exemple et voici pourquoi. Dans la rubrique suivante, notre titre H3, parce qu'il est imbriqué sous notre contour musical, nous allons écrire polkaholic. Donc, si on mettait un texte alternatif, ça dirait, polkaholic, polkaholic. Donc, gardons juste ce texte dans le H3. Maintenant que les gens savent qu'il y a un CD, bien sûr, ils vont vouloir l'acheter. Alors, mettons un lien vers le CD sur Amazon.com. Donc, nous mettons notre texte d'ancrage par le CD, et n'oubliez pas de définir votre href sur l'URL que vous voulez aller. Ensuite, nous voulons essayer de faire démarrer les réseaux sociaux de Jon. Donc, assurez-vous que les gens savent qu'il est sur Twitter et qu'ils peuvent le suivre là-bas. Ce sera un autre niveau de titre deux parce qu'il est imbriqué sous notre titre de niveau supérieur. Donc, étant h2 Jon sur Twitter, nous allons mettre un texte de paragraphe ici qui, espérons-le, amènera les gens à vouloir suivre les dernières musiques et illustrations de Jon. Ensuite, nous allons avoir un lien vers la page Twitter de Jon. Donc, quelque chose comme twitter.com/jonarbs. Je ne sais pas si c'est un vrai compte Twitter. Si c'est le cas, j'espère que c'est bon. Ensuite, nous allons mettre le @jonarbs pour le texte du lien car cela indiquera aux gens que c'est le profil Twitter auquel nous les lions. Ensuite, nous allons vouloir inclure ce témoignage de client. Donc, le Dr Liz Wilson a été assez gentil pour écrire quelques mots aimables sur Jon. Donc, nous allons vouloir inclure cela, et comment incluons-nous les citations ? Avec l'élément blockquote. Donc, nous allons taper blockquote ici. Je vais déplacer ça pour que vous puissiez le voir un peu plus. Nous ouvrons et fermons nos balises, et là nous allons coller ce texte dans une balise de paragraphe. Nous voulons le « de qui il vient » sur les lignes suivantes, donc nous allons en fait faire deux paragraphes dans cette citation de bloc. Donc, le premier paragraphe est le texte proprement dit et le deuxième paragraphe est celui qui l'a dit. Maintenant rappelez-vous, nous avons parlé des citations bouclés plus tôt. Donc, revenons en arrière et assurez-vous que nous nettoyons ceux-ci en ajoutant les entités HTML appropriées afin qu'il apparaisse correctement. Ici, nous avons une double citation qui est très similaire à la citation unique. On va juste changer un peu cette entité. Donc, au lieu de dire écrire une citation simple, nous voulons ici est esperluette, puis L pour gauche, D pour double, puis le quo à nouveau pour citation. Donc, ldquo est laissé double citation. Ensuite, pour le devis de clôture, nous aurons besoin de rdquo pour le bon devis double. Nous allons vouloir copier ce rsquo pour ici pour nous assurer que tout va s'afficher correctement, et puis il y a en fait une autre entité que nous avons sur cette page. Ça devrait être un tableau de bord. Il y a quelques lectures intéressantes sur em tirets verses en tirets et ce qu'il faut utiliser, si vous voulez en savoir plus à ce sujet. Mais pour l'instant, faisons juste ceci un mdash de sorte qu'au &mdash avec un point-virgule, et maintenant notre citation de bloc est définie. Après avoir lu ce blockquote, ils vont probablement vouloir embaucher Jon, non ? Donc, nous allons nous assurer de mettre un texte de paragraphe dans amener les gens à embaucher Jon pour les besoins de portrait d'animaux de compagnie, et maintenant nous voulons faire ce « get in touch text », un lien pour aller à la page contact de notre site. Donc, nous allons l'envelopper avec la balise d'ancrage mais définirons le href plus tard une fois que nous avons réellement une page de contact à laquelle le lier. Ensuite, nous allons vouloir nos informations de pied de page. Pour notre pied de page, nous allons juste avoir un peu de texte de copyright. Donc, quelque chose comme tous les droits d'auteur de contenu Jon A. 2014, puis fermer le paragraphe. Peut-être que nous voulons ajouter l'entité de copyright afin que nous puissions le faire en écrivant © et notre contenu de pied de page est défini. La dernière chose dont nous avons besoin est ce contenu d'en-tête qui comprend un logo, qui va être une image, puis un tas de navigation sur le site donc, une liste de liens vers d'autres pages de notre site. Revenons au sommet ici, et c'est là que je vais commencer à ajouter dans mes commentaires HTML. Donc, voici mes informations d'en-tête. Je vais juste marquer ça. C' est le contenu de la page ici, donc je vais marquer ça. Encore une fois, lorsque je reviendrai sur cette page plus tard, cela me permettra de trouver plus facilement les informations que je cherche et de me souvenir, où se trouve tout ce contenu. Donc, voici mes informations de pied de page ci-dessous. C' est juste un outil pour garder les choses organisées. Donc, revenons à notre en-tête, nous savons que nous voulons les logos qui seront des images. Donc, nous faisons img source égale, puis notre logo est situé dans notre dossier image. Donc, nous allons dire, allez dans le dossier image, donc encore une fois c'est img, barre oblique pour aller à l'intérieur, logo.png. Ensuite, nous allons vouloir définir tout le texte ici et tout le texte sera Jon Arbuckle parce que c'est le texte qui apparaît dans notre logo. Donc, nous voulons que les gens sachent que c'est ce que ça dit, juste au cas où ils ne le verraient pas. Ensuite, nous avons besoin de cette liste de liens pour accéder aux trois autres pages de notre site , car nous voulons toujours que les gens puissent accéder au travail, à la À propos et à la page Contact. Donc, quelque chose que j'aime faire parfois pour comprendre comment je veux marquer les choses en HTML, c'est en quelque sorte le dire à haute voix. Donc, je sais que ce sont des liens et je dis que voici trois liens que nous avons. Si je dis le mot lien, je sais que je vais avoir besoin d'une étiquette d'ancrage. C' est cool. Mais qu'est-ce que j'ai dit d'autre ? J' ai dit, nous allons avoir besoin d'une liste de liens. Oh, les listes, donc elles sont familières. Quand nous parlons de liste de navigation, c'est en fait une autre liste non ordonnée. Donc, nous pouvons faire le marquage de notre liste de liens est en utilisant liste non ordonnée. Donc, nous allons le faire en tapant ul. Nous allons fermer cela et ensuite nous allons vouloir que ces liens vivent à l'intérieur de notre ul, mais de quoi avons-nous besoin à l'intérieur d'un ul, nous avons besoin de nos éléments li pour représenter chaque élément. Nous savons que nous avons trois pages, donc nous allons avoir besoin de trois liens ici. Ensuite, à l'intérieur de tous ces éléments de liste, il y aura la balise de lien qui renvoie à la page du site. Donc, le premier sera notre page de travail, notre deuxième lien ira à notre page d'accueil, et notre dernier lien ira à notre page de contact. Maintenant, bien sûr, nous n'avons pas encore créé ces valeurs, donc nous allons revenir en arrière et remplir ces valeurs href dès que ces pages sont créées. Donnons ça un rafraîchissement. Hey, on a entendu beaucoup de contenu qui se passe ici. Nous avons notre logo, nous avons notre liste de liens, nous avons notre h1, qui dit à qui est ce site et à quoi il s'agit, nous avons une image d'espace réservé qui sera notre image de héros, qui va saisir attentions des visiteurs, nous avons une série de h2s, sous-contenu pour sous notre en-tête principal. Donc, nous avons des bandes dessinées, nous avons un paragraphe, nous avons un lien pour voir les bandes dessinées de Jon, nous avons un h2 de musique, nous avons un autre tag avec une URL relative, nous avons un h3 parce que c'est un titre imbriqué sous la musique, nous avons un lien pour acheter le CD sur un autre site, nous revenons à notre h2 parce que Jon sur Twitter est au même niveau que nos autres catégories, nous avons un paragraphe pour décrire cela et un lien, nous avons notre citation de bloc avec deux paragraphes à l'intérieur. Nous utilisons également des entités HTML pour nous assurer que nos curlicues sont belles. Nous avons un paragraphe supplémentaire et à l'intérieur de cela, nous avons notre lien en ligne pour entrer en contact, qui fera un lien vers notre page de contact. Enfin, nous avons notre paragraphe de pied de page. Le paragraphe de pied de page contient du texte ainsi que notre entité de copyright. Maintenant, notre page d'accueil est sémantique et génial et prête à partir. Donc, ça termine la leçon 3. Nous avons créé une nouvelle page et index.html pour enregistrer notre page d'accueil dans, nous avons ajouté un nouveau bloc dans les éléments en ligne, nous avons suivi notre contenu sur la ligne pour nous assurer que tout notre contenu a été marqué correctement pour notre html, nous a également suivi de bonnes pratiques de formatage. Alors, assurez-vous de prendre le temps de revenir en arrière et de réparer tout ça si peut-être vous tapiez un peu vite. Cela nous arrive tous, mais prenez le temps, assurez-vous que les choses sont belles et propres, enregistrez-le, assurez-vous qu'il a l'air bien dans le navigateur, et puis la leçon suivante, nous allons regarder nos trois autres pages, et assurez-vous que nous pouvons obtenir toute cette copie du contenu aux éléments html. 22. Identifier les types de contenu restants en tant qu'éléments HTML: Maintenant que nous avons la page d'accueil sous notre ceinture, passons aux trois pages restantes. Ensuite, nous avons notre page de travail. Ici, nous avons le plan de contenu que nous avons fait pour notre page de travail. Alors, commençons à mettre ça dans Sublime Text. Nous allons ouvrir Sublime Text backup, et maintenant nous avons notre fichier class.html et notre fichier index.html, mais nous allons avoir besoin d'une page pour notre page de travail. Soit un clic droit ou Contrôle cliquez et faire Nouveau fichier ou nous pouvons faire Fichier, Nouveau fichier. Ici, nous sommes mis avec notre nouveau fichier. Maintenant, j'ai mentionné plus tôt l'idée de gagner du temps en copiant et collant, et nous pouvons certainement le faire avec notre fichier précédent. Donc, si nous retournons à notre page d'index pour notre page d'accueil, une des choses que nous pouvons faire est de modifier le texte ici pour travailler sur nos autres pages. Nous allons à Sélection, puis Sélectionner tout. Le raccourci clavier pour cela est Commande A ou Contrôle A et maintenant vous remarquerez que tout est mis en surbrillance. Éditons, Copiez, puis allons dans notre nouveau fichier que nous n'avons encore rien fait et collons. Super. Donc, maintenant tout notre code est copié ici. Ce que nous voulons faire maintenant, c'est faire des ajustements, donc c'est en fait pour notre page de travail. Donc, d'abord, continuons et sauvegardons ceci afin que nous ne perdions aucun de nos progrès, et nous l'appellerons work.html. Assurez-vous que vous enregistrez dans votre site jon-arbuckle-. Vous devriez voir votre fichier de classe d'indexation là déjà et cliquez sur Enregistrer. Donc maintenant, nous devons travailler le fichier HTML enregistrer, mais il a tout notre contenu à partir de la page d'accueil. Alors, que savons-nous que nous avons besoin sur une page de travail ? Eh bien, nous avons un contenu différent de notre page d'accueil, mais nous avons deux choses qui sont identiques. C' est le contenu de l'en-tête et le contenu du pied de page. Donc, ce que nous allons faire, c'est vous verrez que nous avons ces commentaires qui nous disent que c'est l'en-tête, voici le contenu de la page, et voici notre pied de page. Donc, nous savons réellement que nous voulons garder l'en-tête et le pied de page, et donc ce que nous ferons ensuite est de supprimer tout le contenu contenu de notre page. Donc, sélectionnez-le, puis supprimez-le. Ensuite, vous voyez que nous avons nos informations d'en-tête de la première page ou des informations de pied de page de la première page et maintenant tout ce que vous devez faire est mettre le contenu personnalisé pour notre contenu de page entre les deux. C' est un moyen très simple de créer toutes les pages restantes. Il y a quelque chose d'autre qui manque, et c'est que nous devons mettre à jour le titre. Donc, supprimons ceci. Maintenant, ce que nous avons ici est essentiellement le shell pour le reste de nos pages. Commençons à créer notre autre contenu. C' est la page de travail, pas la page d'accueil, alors disons « Travail ». Ensuite, nous laissons toujours savoir aux gens que c'est le portefeuille de Jon Arbuckle, donc « Work : The Portfolio of Jon Arbuckle » ou « Work - The Portfolio of Jon Arbuckle ». Les gens sauront toujours que nous examinons le portefeuille, mais c'est précisément nous sommes sur la page de travail. Donc, notre titre a maintenant été mis à jour. Revenons au contenu de notre page. Dans le contenu de notre page, nous allons vouloir écrire du code HTML spécifique à notre page de travail. Donc, pour revenir à notre aperçu du contenu, nous avons fait le titre de la page, mais nous avons aussi besoin de quelque chose d'autre. On a besoin du h1, non ? Donc, faisons h1, et le titre de cette page est aussi appelé « Travail ». Ensuite, nous voulons parler des bandes dessinées de Jon. Donc, si nous nous souvenons de nos lignes de rubrique, nous avons dit que c'était notre h1, qui signifie que les bandes dessinées Web seront en h2. Nous voyons qu'il y a d'autres choses au même niveau que la bande dessinée Web sous notre travail, non ? Ainsi, Portraits et musique seront sur le même niveau, donc ceux-ci seront aussi h2s. Ensuite, dans la bande dessinée Web, nous avons deux types différents de bandes dessinées avec des informations en dessous de ça, alors faisons ces h3. Nous avons aussi un titre de CD, donc nous allons le faire en h3 aussi parce que c'est le titre des autres informations sur le CD. Revenons à Sublime Text, et nous allons travailler avec notre section de bande dessinée Web. Donc, nous avons notre titre de deuxième niveau, le h2, et ça s'appellera « Web Comics ». Alors les h3s seront le titre de la bande dessinée, donc le premier est les « Chroniques Lasagne ». Nous voulons également avoir une image des Chroniques de Lasagne et un lien vers un site externe pour cela. Donc, incluons l'image ici, donc img src est égal et l'image pour Lasagna Chronicles est de nouveau dans notre dossier Image, lasagna-chronicles.jpg. Rendez-vous à l'intérieur de notre dossier Image. Pour y aller, le /lasagna-chronicles.jpg. Ensuite, nous allons vouloir lier les gens pour aller à l'URL hors site de la bande dessinée Web Lasagne Chronicles, donc nous allons faire une balise d'ancrage. Disons juste que ça vit à quelque chose comme lasagnachronicles.com. Nous voulons un texte d'appel à l'action qui décrira où les gens vont, donc quelque chose comme, « Lisez les Chroniques de Lasagne ». Ensuite, nous allons suivre ce même format pour la prochaine bande dessinée Web, qui est Cat Town. Alors, h3, Cat Town. Déplacez ça un peu pour qu'on puisse voir un peu mieux. Nous allons avoir notre balise image à nouveau, donc img src est égal à « img/cat-town.jpg ». J' ai oublié le texte alt, alors assurons que nous avons l'alt, qui sera vide. Puis encore une fois, nous voulons le lien vers le site, donc peut-être cattowncomic.biz, Lire Cat Town. D' accord. Alors maintenant, notre Web Comics est réglé. La section suivante sous l'œuvre de Jon sont ses portraits. Donc, cela va dans l'en-tête de deuxième niveau parce qu'il est imbriqué sous Work, donc Portraits. Ensuite, pour les Portraits, nous allons juste avoir deux images, une d' un chat et l'autre d'un chien pour que les gens sachent que des portraits sont disponibles. Donc, nous allons refaire la balise image, donc img src est égal, et nous aurons le texte alt, et nous allons dire portrait de chat, cat-portrait.jpg, mais quelque chose ne va pas ici, non ? Quand je viens de faire cat-portrait.jpg, il va chercher cela au même niveau. Alors rappelez-vous, nous devons aller dans notre dossier images, donc image/. Ensuite, je peux simplement copier et coller ceci si je veux, donc Modifier, Copier, Modifier, Coller. Je peux mettre à jour ça pour dire juste « portrait de chien ». C' est un joli raccourci à prendre pour que nous n'ayons pas à tout taper. Maintenant, nous avons nos portraits ici. La section suivante de notre plan de contenu était notre musique. Alors, ajoutons un autre h2 parce qu'il est au même niveau que Portraits et Web Comics. Ils sont tous aussi importants sous Work. Donc, Musique, h2 et le nom du CD est « Le meilleur de Jonny Arbs » donc ça va être un autre titre. C' est un autre titre parce que si le cas où Jon écrit plus de musique, il a une longue liste de différents CD qu'il avait et la description de ceux-ci, donc il pourrait finir par avoir plus de h3s éventuellement dès qu'il nous grâce avec plus de Le génie de polka. Donc, nous avons le meilleur de Jonny Arbs. Nous allons vouloir l'image du CD et le lien pour acheter sur Amazon. Encore une fois, nous allons utiliser notre tag image, et c'est le CD Polkaholic, donc img/polkaholic.jpg. L' alt ici va être Polkaholic. Nous avons aussi oublié de mettre dans notre texte alt ici, alors disons quelque chose comme « Portrait d'un chat » et « Portrait d'un chien ». D' accord. Désolé, revenez à notre musique, puis à nouveau notre lien vers Amazon. Donc, un href= » http://amazon.com/polkaholic ». Là, on va dire : « Achetez ce CD. » Ce sera le texte de lien que les gens verront et quand ils verront « Acheter ce CD », ils pourront cliquer dessus et obtenir ce génie musical. Donc, c'est tout pour notre page de travail, et vous pouvez voir qu'elle se termine avec notre contenu supplémentaire, que nous avions déjà quand nous avons copié et collé. Donc, sauvegardons ce fichier et voyons à quoi il ressemble dans notre navigateur. Voici notre page de travail. Encore une fois, nous avons notre logo et nos liens de navigation, puis nous avons notre titre de travail. Nous avons la section bande dessinée web et d'abord, nous apprenons un peu plus sur les Chroniques de lasagne ainsi que le lien pour lire les Chroniques de lasagne. Nous avons Cat Town avec notre image de Cat Town et notre lien pour lire Cat Town. Nous avons la section portraits afin que nous puissions voir nous avons le portrait de chat et le portrait de chien afin que nous puissions savoir que ceux-ci sont disponibles et font partie du travail de Jon. Nous avons la section musique avec The Best of Jonny Arbs vivant sous ça et c'est le CD polkaholic et le lien pour acheter le CD sur Amazon. Ensuite, nous terminons avec notre contenu de pied de page. Donc, maintenant que notre page de travail est terminée, allons de l'avant et faisons notre page À propos. Nous allons faire « File », «  New File » et encore une fois, nous pouvons copier et coller de nos autres projets si nous voulons ou nous pouvons taper des choses afin que nous puissions dire doctype html et ensuite nous aurons besoin de notre élément HTML avec notre « lang » attribut. Nous fermerons cela, notre élément « tête » pour contenir nos métadonnées, notre élément « corps » pour conserver notre copie pour la page. Nous aurons besoin des méta éléments pour le définir comme utf-8. Nous aurons besoin d'une balise de titre pour notre page, dans ce cas, nous allons dire « A propos » et ensuite nous voulons garder la syntaxe que nous utilisons pour les autres titres donc nous allons dire « Le Portfolio de Jon Arbuckle » et nous allons placer c'est là-dedans. Je vais enregistrer mon fichier et nous allons l'enregistrer est about.html et l'enregistrer me donnera cette syntaxe de couleur à nouveau afin que je puisse m'assurer que je tape les choses correctement. Maintenant, allons dans notre section corps. Alors, rappelez-vous, nous allons vouloir avoir notre contenu d'en-tête. Je peux saisir tout cela d'ici et dire « Modifier », « Copier », « Modifier », « Coller », les informations de contenu de la page, et je vais vouloir terminer avec le pied de page que je vais également copier et coller à partir de cette autre page pour m'assurer que c'est la même chose. Tous ensemble. Maintenant, ajoutons notre A propos du contenu. Pour revenir à notre plan de contenu, nous avons déjà fait notre contenu d'en-tête et notre contenu de pied de page. Nous avons mis à jour le titre de la page mais maintenant, faisons aussi le h1 de la page. Donc, <h1> à propos. Peut-être que tu veux dire « A propos de Jon ». Ensuite, nous allons vouloir inclure une image de Jon, quelques paragraphes décrivant Jon, et certaines de ses compétences et services professionnels offerts dans une liste. On a l'image de Jon avec notre étiquette img. Nous allons le faire avec le fichier arbuckle-bio.jpg, donc img/arbuckle-bio.jpg, alors nous allons avoir quelques paragraphes sur Jon. Je ne suis pas vraiment sûr de ce que cela va être encore donc, pour l'instant, je vais juste utiliser le générateur Lorem Ipsum. Vous vous souviendrez que je peux le faire en cherchant le générateur d'ipsum lorem et je vais juste prendre d'ici qui est le Lipsum et ils diront cinq paragraphes générer, c'est beaucoup, je vais juste faire deux paragraphes. Ensuite, je vais sélectionner tout cela, « Modifier », « Copier », revenir à mon texte Sublime et « Modifier », « Coller ». C' est beaucoup de textos. Retirons ceci pour qu' il corresponde à l'indentation du reste de notre document. Ensuite, ajoutons les balises de paragraphe autour de cette copie. Donc, en ouvrant la balise p et ensuite nous allons fermer la balise p. Même ici, près. Après ça, nous aurons la liste des choses que Jon propose pour ses services. Peut-être voulons-nous ajouter un titre pour cette liste parce que si nous commençons juste à mettre les éléments de la liste vers le bas, les gens peuvent ne pas savoir ce qu'est cette liste. Alors, ajoutons un titre. ce moment, nous sommes à un h1 et nous n'avons pas encore eu de h2 sur la page alors faisons h2 et puis disons « Services professionnels », et fermons le h2. Maintenant, dans ce cas, les éléments de la liste de Jon pour sa liste de services ne sont pas classés l'un sur l'autre, donc nous pouvons utiliser une liste non ordonnée. Alors, ouvrez notre ul, puis assurez-vous de le fermer, puis rappelez-vous, nous avons besoin de nos articles de liste. Peut-être quelque chose comme « Dessin », « Illustrations », « Aquarelles », « Mariages », pour son groupe quand ils veulent jouer à des mariages ou peut-être qu'il fait des caricatures là aussi. Voici quelques exemples des services professionnels qu'il offre. Si vous voulez ajouter d'autres éléments de liste, vous pouvez certainement en ajouter autant que vous le souhaitez, alors n'hésitez pas à le faire. « Cours de danse », « Sudoku consulting ». Ce sont les services professionnels de Tom et c'est tout sur notre page À propos. Alors, sauvegardons ça et voyons à quoi ça ressemble. Maintenant, nous voyons notre page À propos. Donc, encore une fois, nous avons notre en-tête mais maintenant nous avons notre h1 est A propos de Jon. Nous avons cette image de Jon qui est heureuse et accueillante. Ce texte d'espace réservé en ce moment sera pour sa bio. Quelque chose comme « Salut, je suis Jon. Je travaille dans l'illustration depuis 1965. J' aime faire des portraits d'animaux et j'aime jouer mon accordéon avec ma chanson de polka », et cetera. Toute cette copie pourrait entrer ici. Ensuite, nous avons un titre, nos services professionnels sont en h2 et ce titre est pour cette liste non ordonnée ici, beaucoup d'entre eux que je dois taper. Mais ce titre est pour ici et nous avons une liste non ordonnée avec six éléments de liste dedans. Rappelez-vous, nous pouvons toujours utiliser notre inspecteur pour voir comment vont les choses. Jetons un coup d'oeil à ça. Nous pouvons voir que c'est une image, que nous avons une liste non ordonnée. Je peux ouvrir cela et voir chacun d'entre eux comme un élément de liste. Alors en vue de cela, nous avons un lien d'ancrage. Voici notre h1 pour A propos de Jon. En descendant, voici notre image et elle se met en évidence lorsque je survole. Voici un paragraphe. Je peux dire : « Je me demande ce que c'est. » Rappelez-vous, nous pouvons cliquer directement dessus, Inspect élément, et nous pouvons voir que ce sont « Li » à l'intérieur de l'ul que nous avons écrit. Paragraphe, la fin de notre corps et la fin de notre HTML. Voici quelques-unes des façons dont vous souhaitez utiliser l'Inspecteur pour voir comment les choses se trouvent dans une page de votre site Web ou sur les sites Web d'autres personnes. Nous avons encore une page à parcourir et c'est notre page Contact. Faisons un nouveau fichier. « Fichier », « Nouveau fichier ». Nous commencerions à sauver ça dès le début dès que nous l'ouvrirons. Nous pouvons dire contact.html, assurez-vous que nous l'enregistrons au bon endroit. Je vais utiliser la page À propos comme modèle pour cela donc je vais à « Sélection », « Sélectionner tout ». Je vais copier ceci et je vais le coller. Rappelez-vous, je veux mettre à jour les choses dans le contenu de la page jusqu'au pied de page donc je vais mettre mon curseur là et puis, comme je maintiens Maj, je vais sélectionner ici qui va sélectionner le texte entre ces deux endroits, et puis je vais juste cliquer sur Supprimer. Je veux également mettre à jour notre balise de titre. Au lieu de dire « A propos de Jon », je suppose qu'on va dire « Contacter Jon ». Ensuite, nous allons vouloir mettre les coordonnées ici. Pour la page Contact de Jon, nous allons avoir notre h1 comme contact, adresse e-mail de Jon et une liste de liens vers sa présence sur les réseaux sociaux. Cela va être une page assez basique. Nous aurons notre h1 qui dit « Contacter Jon ». Ensuite, nous allons avoir un peu de texte de paragraphe pour décrire ce que vous faites. Quelque chose comme, « Jon va adorer vos nouvelles. » Envoyez-le par courriel à jon@jonarbs.com. Maintenant, pour l'jon@jonarbs.com, nous voulons vraiment que vous puissiez cliquer dessus pour envoyer un e-mail, je suis sûr que vous l'avez déjà vu sur Internet avant. Comment on fait ça ? Comment faire d'autres choses quand on doit cliquer dessus ? Nous utilisons un lien d'ancrage. Mettons un lien d'ancrage autour de ça. Donc, un href= " », c'est notre texte de lien. Fermons cette ancre autour de ça. Ouvre ça pour voir ça. Pour créer un lien e-mail au lieu d'un lien vers un site Web, ce que nous allons faire est d'écrire « mailto : » puis l'adresse e-mail de l'endroit où vous souhaitez que le lien aille. Ce message sera envoyé par courrier à jon@jonarbs.com. Si vous trouvez que vous recevez beaucoup de spam de quelqu'un comme celui-ci sur votre site, vous voudrez peut-être examiner quelque chose comme woohoo.com qui offre des formulaires de contact et aussi juste la validation pour que vous essayez d'éviter les spamming. Mais pour l'instant, gardons ça comme ça. Ensuite, nous voulons aussi avoir les liens de Jon sur les réseaux sociaux. Donc, faisons un autre titre parce que nous allons faire une liste de liens et nous voulons que les gens sachent ce qu'est cette liste. Nous allons dire « Ailleurs sur les Interwebs », et ce seront des liens vers Jon ailleurs sur les interwebs. Donc, nous allons utiliser cette liste non ordonnée à nouveau. Nous allons avoir un élément de liste et nous allons avoir un lien vers Jon ailleurs. Donc, cela va aller sur sa page Twitter, twitter.com/jonarbs, et mettons une citation de clôture ici à jonarbs. Peut-être que Jon a aussi une page Facebook, alors obtenons-lui un lien Facebook, /jonarbs. Peut-être que nous allons dire quelque chose comme celui de Jon, utilisons une entité là, donc rsquo pour juste citation singles, page Facebook Fan de Jon. Fermez le lien et n'oubliez pas de fermer le Li. Alors peut-être que Jon est aussi sur Pinterest parce qu'il aime épingler son œuvre d'art. Donc, nous allons dire pinterest.com/jonarbs, donc Jon sur Pinterest, puis fermer cet élément de liste. Donc, il y a ses liens vers les médias sociaux ailleurs sur les interwebs. Sauvegardons ceci et nous allons voir à quoi ressemble notre page Contact. Il est là, court et doux, mais exactement ce dont les gens ont besoin sur une page de contact. Donc, nous avons à nouveau notre en-tête, notre h1 pour contacter Jon, un peu de texte de paragraphe avec notre lien en ligne pointant vers son adresse e-mail, vous verrez « mailto jon@jonarbs.com ». Si je clique dessus, vous verrez qu'il ouvrira mon programme de messagerie. Je n'utilise pas de courrier très souvent sur cet ordinateur alors annulez de cela. Ensuite, nous avons Ailleurs sur les Interwebs qui, dans ce plan de contenu, vit sous Contact Jon, et nous avons son Twitter, son Facebook et sa page Pinterest. Ensuite, nous finissons par notre pied de page. Donc, là, vous l'avez, le HTML pour quatre pages de notre portfolio. Nous sommes assez bien en ce moment, mais nous pouvons réellement passer d'une page à l'autre sans ouvrir le fichier séparément. Donc, dans la prochaine vidéo, nous allons parler de la façon de lier les pages ensemble. 23. Relier les pages: Donc, maintenant nous avons les quatre de nos pages, mais aucun moyen d'aller d'une page à l'autre. Donc, nous allons vouloir revenir dans notre navigation et ajouter la valeur appropriée pour l'endroit où ces liens textuels devraient aller. Alors, commençons là où nous avions laissé pour la dernière fois ce qui était avec notre page de contact. Sur notre page de contact, afin d'accéder à notre page de travail, nous devons être en mesure de trouver le fichier work.html. Donc, nos valeurs href suivent ici la même logique que nos sources d'image. Nous pouvons soit mettre une valeur absolue ou relative. Donc, ici, quand on fait un lien vers Twitter, c'est un chemin absolu vers le compte Twitter John Arbs sur twitter.com. On a vu la même chose quand on a fait des images. Ils commencent par le HTTP, puis ils font l'adresse complète de l'endroit où se trouve le fichier ou le lien. Dans ce cas, nous allons vouloir utiliser URL relatives parce que nous allons à une page de notre propre site. Donc, tout comme nous ferions un lien vers une image, nous allons lier au fichier the.html, dans ce cas, pour un lien vers le fichier work.html. Parce que la page de contact est sur les mêmes niveaux de travail, nous n'avons pas besoin de monter un niveau ou dans un dossier. C' est sur le même. Donc, au lieu d'entrer dans quelque chose comme pages/work.html, nous sommes au même niveau donc nous pouvons simplement aller à work.html. Même chose pour about.html et contact.html. Sauvons ça. Maintenant, si nous ramenons notre page de contact vers le haut, vous verrez que les travaux en contact sont maintenant liés et nous pouvons le dire à partir des soulignements et de la couleur. Donc, si nous voulons aller à la page de travail, nous pouvons cliquer sur « travailler » si nous voulons aller à la page À propos, nous avons un problème que nous n'avons pas encore ajouté dans le texte pour cela. allons juste appuyer sur le bouton « Retour » tout de suite et à partir de la page de contact où nous avons ajouté les bons liens et nous allons cliquer sur « À propos » et cela nous amène à la page à propos. Bien sûr étaient déjà sur la page de contact. Donc, celui-là est prêt. Donc, le travail et le contact sont maintenant dans, mais il nous manque une autre page. Droit ? Qu'en est-il de la page d'accueil ? Parfois, les gens peuvent vouloir revenir à l'endroit où ils ont commencé. Nous avons deux options ici une, nous pourrions ajouter un autre lien dans notre liste de liens pour la maison. L' autre option que vous verrez assez souvent est de faire du logo un lien vers la page d'accueil. Alors, faisons ça à la place. Nous allons retourner à notre page de contact et nous voulons essentiellement faire de cette image un lien. Souviens-toi parfois, c'est facile si on dit à voix haute ce que nous essayons de faire. Donc, je veux faire de l'image un lien comme tout autre lien où nous mettons du texte à l'intérieur nous pouvons également mettre une image à l'intérieur d'une balise d'ancrage. Donc, nous allons entourer cette image qui servira lien pour la page d'accueil, nous allons l'entourer d'une balise d'ancrage. Donc, un href égal à enfermer que maintenant nous allons fermer à la fin et maintenant cela fait ce lien d'image et où voulons-nous que cela aille ? Vers la page d'accueil et quelle est notre page d'accueil ? Index.html. Donc, juste ici, nous allons faire un lien vers ce que nous allons sauver cela revenir à notre navigateur et maintenant vous verrez quand je survolerai cela le curseur change à ce pointeur indiquant que c'est un lien. Donc, quand je clique dessus, je suis de retour sur la page d'accueil. Nous n'avons pas encore mis à jour la page d'accueil, donc vous verrez cela reste comme un curseur car ce n'est pas encore un lien mais si nous revenons sur notre page de contact a maintenant tous les liens corrects. Alors, qu'est-ce qu'on peut faire ? Eh bien, nous pouvons simplement copier toute notre section d'en-tête et la remplacer sur toutes nos pages. Donc, éditer coller. C' est une page sur notre page, sauvegardons ça. Allons à notre page de travail et faisons la même chose remplacer toute cette section d'en-tête. Vous pouvez voir à quel point il est facile de trouver ce que nous recherchons grâce à nos commentaires HTML. Sauvegardez cela, retournez à notre page d'accueil et juste pour revoir une fois de plus rappelez-vous que nous avons enroulé une ancre autour de notre image parce que nous pouvons en faire un lien. Nous avons fait cela un lien vers index.html, puis nous avons ajouté dans les chemins relatifs corrects pour ces pages ; donc, work.html, about.html et contacts.html. Vous pouvez voir ici pourquoi les noms intelligents tels que Travail, À propos et Contact pour nos pages ont rendu très facile de se souvenir des pages auxquelles nous étions liés sans avoir à revoir quoi que ce soit dans notre panneau latéral. Donc, maintenant toutes nos pages ont des liens. On en a eu un peu plus, sur cette page d'accueil, non ? Voir les commentaires de Jon ? Cela va aller à la page work.html. Alors, gardons ça, et je pense que nous sommes tous prêts avec ça maintenant. En haut, non, un de plus. Souviens-toi qu'on veut embaucher Jon et qu'on va embaucher Jon. Nous allons les envoyer à la page de contact pour entrer en contact. Donc, allons faire cela aller à contact.html. Maintenant, sauvegardez le fichier. D' accord. Donc, maintenant nous sommes sur notre page de contact, et maintenant regardez. Quelle que soit la page à laquelle je vais, nous avons un site entièrement cliquable. De retour sur la page d'accueil, on peut venir dire voir la bande dessinée de Jon. Oui. Tu peux voir quand on va sur la page de travail, les bandes dessinées de Jon. Si je retournais à la page d'accueil et que je voulais vraiment entrer en contact avec Jon, je pourrais entrer en contact sur la page de contact, et je sais que je peux lui envoyer un e-mail ou le trouver sur Internet. Donc, maintenant, nous avons notre site Web de portefeuille de quatre pages entièrement cliquables. Nous avons beaucoup appris sur notre html sur nos pages dans cette leçon. Nous avons complété le reste de nos pages en marquant notre contenu en fonction de notre plan de contenu. Vous pouvez voir comment la création de ce contour de contenu au début a vraiment dicté notre orientation. Avec l'aide du sitemap et le contenu que nous avions une direction, nous avions un objectif. Parfois, ça peut être vraiment intimidant quand on regarde un nouveau dossier et qu'on dit : « Je ne sais pas quoi mettre sur cette page ». Si vous avez ce sentiment, prenez un morceau de papier, prenez un stylo, ouvrez une sorte de programme informatique, ouvrez TextEdit, ouvrez Photoshop, ouvrez l'un des nombreux fichiers, et commencez à taper des informations que vous connaissez que vous souhaitez être sur votre site Web. C' est un excellent endroit pour commencer, puis vous donne un objectif à atteindre. Lorsque vous commencez à regarder votre contenu, vous pouvez visiter des sites tels que HTML Dog et déterminer quel type d'éléments vous voudrez marquer votre contenu. Donc, assurez-vous que vous avez terminé vos quatre pages. Ajoutez tout le contenu dans. Si vous utilisez votre propre contenu, veillez à le marquer également. Puis enfin, ajoutez des liens afin que ce soit un site entièrement cliquable et personne ne soit jamais coincé dans une impasse au sein de votre site Web. Il nous reste juste une leçon à suivre. Laissez-nous passer en revue certaines choses comme le dépannage et les prochaines étapes. 24. Dépannage: moment, tout sur notre site fonctionne très bien et c'est génial. Cependant, je déteste être porteur de mauvaises nouvelles, mais ce n'est pas toujours le cas. Vous allez rencontrer des erreurs et des barrages routiers et il est important de couvrir certaines façons de résoudre ce problème. La première façon est d'attraper un copain, parfois avoir des yeux séparés sur un projet que vous regardez depuis un moment peut vraiment aider. frappe dans les documents HTML peuvent générer beaucoup d' erreurs et donc parfois juste quelqu'un regardant par-dessus votre épaule et disant, « Oh regardez vous avez oublié de fermer une balise » est vraiment utile. Parfois, nous n'avons pas toujours ça et autant que je souhaite que mes chats m'aident à résoudre les problèmes, ils ne le font pas. Donc, au lieu de cela, nous devons chercher d'autres façons de le faire, je vais revenir à l'un de nos documents, notre page de contact et je vais juste faire quelque chose ici comme oublier de fermer cette balise 'a'. Quand vous tapez très vite, cela arrive beaucoup, donc, il est certainement possible que vous rencontriez quelque chose comme ça. Je vais enregistrer ce fichier et puis je vais le prévisualiser à nouveau dans notre navigateur. Lorsque je rafraîchis cette page tout de suite, je peux voir qu'il y a du contenu cassé ici. Ce que je vais faire en premier, c'est l'inspecter et dire, « Hé, qu'est-ce que c'est ? ». Je peux forer et voir que juste après cette source d'image, est cette petite image qui n'est pas censée le faire. Donc, pour moi, cela identifie que le problème vient juste après notre logo image, qui me permet de revenir en arrière et de dire, « logo image » et ensuite je peux dire, « Oh regarde ça, j'ai oublié de le fermer ». Une autre façon que je pourrais identifier que comme le problème est à travers la syntaxe des couleurs de notre éditeur HTML, donc, comme nous pouvons le voir, tous nos éléments sont généralement un crochet ouvert blanc, puis un nom d'onglet rose. Si je viens ici, je peux voir que ce 'a' est en fait en blanc, me montrant qu'il ne rend pas comme la bonne balise. C' est une autre façon pour moi d'identifier que j'ai un problème dans ce voisinage général, et ensuite je peux généralement voir, « Oh, regarde, j'ai oublié de le fermer ». Donc, je peux le faire. Nous en avons parlé un peu avant, mais parfois nous oublierons de fermer une citation, quelque chose comme ça arrive souvent et vous pouvez voir que tous mes attributs sont verts, mais je vois que celui-ci est jaune, donc, que identifiera que quelque part entre ici et ici quelque chose s'est mal passé. Quand il est vert, tout allait bien, quand il est jaune, quelque part, quelque chose s'est mal passé. Une façon de comprendre ce qui ne va pas, c'est de passer à travers et de dire, source égale citation, voici mon truc « Oh, regarde, il me manque une citation. » Parfois, vous ne pouvez tout simplement pas le voir et je trouve que c'est mieux à ce point, juste réécrire le tout, donc, juste le réécrire à nouveau, source égale, assurez-vous d'écrire votre formulaire shell au début donc, vous avez tous vos guillemets, puis remettez votre texte ici pour image.logo.png. Je dois juste annuler ça pour le remettre en arrière, et corrigeons la citation. Si cela ne fonctionne pas, nous avons aussi le validateur W3, le validateur W3 est génial. Nous mettons notre code et il va vérifier les erreurs. Donc, supprimons cela et donnons cela une erreur, ce que je vais faire est de sauver ceci. Je vais sélectionner tout et puis vous pouvez marquer cette page, mais si vous oubliez qu'il suffit de chercher, validateur W3. Je vais cliquer sur ce premier, le W3C Markup Validation et ensuite vous pouvez valider par URI, cela signifie que vous pouvez mettre une adresse web ici. Vous pouvez télécharger votre fichier, ou nous allons simplement faire valider par entrée directe. Ici, je vais coller tout mon code, puis je vais cliquer sur 'check'. Je reçois ce rouge en haut qui me dit que quelque chose ne va pas et il dit qu'il y a six erreurs trouvées. Si vous faites défiler la page un peu, Il va vous donner vos erreurs. Donc, erreurs, sortie six erreurs et dit, « Ligne 13, Colonne 52 : Pas d'espace entre les attributs Et je dis, « Ha ! Qu'est-ce que c'est ? » Je regarde ça, et peut-être que ce n'est pas vraiment logique pour moi, mais je sais, maintenant que je cherche la ligne 13 donc, si je retourne à mon éditeur de texte. Bien sûr, ligne 13 J'ai maintenant identifié où est le problème qui le rend plus facile de comprendre que je manque cette citation. Donc, une fois que j'ai réalisé que je l'ai corrigé, je peux enregistrer à nouveau mon document, je vais à Control-A ou Commande-A pour sélectionner tout, Commande-C, Control-C et maintenant je veux réexécuter ceci. Donc, ce que je peux faire est, sélectionner tout cela, coller mon nouveau code et puis il y a cette revalidation ici et hey, maintenant tout va bien. Vous remarquerez qu'il a effectivement dit six erreurs dans la dernière, c'est parce qu'une fois que vous avez une erreur, il peut faire une série d'autres erreurs. Donc, il est préférable de commencer par le premier, comprendre celui-ci et de voir si cela corrige tout. Il y a deux avertissements ici, vous pouvez ignorer les avertissements pour l'instant, qui a à voir avec l'utilisation du type de document HTML5 que nous utilisons. Les validateurs sont un moyen vraiment utile de voir les problèmes dans votre code. Si les choses deviennent vraiment mauvais, parfois ce que j'aime faire c'est faire un nouveau fichier. Donc, voici un nouveau fichier et je vais tout sélectionner, déplacer là et ensuite je reviendrai à mon ancien fichier, ça va sembler très fastidieux mais ce que je fais c'est que je commence à passer une ligne à la fois. Donc, je garde ça, je reviens sur mon navigateur et je dis, « Ok, regarde bien. » Puis j'ai mis dans la ligne suivante et je lui ai dit  : « D'accord, toujours belle. » Donc, vous allez essentiellement jusqu'à ce que vous puissiez identifier spécifiquement où est le problème, c'est une sorte de dernier recours, mais parfois vous allez en avoir besoin. La bonne nouvelle est, c'est que plus vous écrivez du HTML, plus il vous sera facile d'identifier les ou les problèmes communs que vous pourriez rencontrer, choses comme les fautes de frappe, des choses comme des attributs non cités, des choses comme oublier de fermer une balise. Ils nous arrivent tous et ils arrivent beaucoup. Heureusement, nous avons ces outils et je vous promets de plus en plus que vous écrivez ceci, plus il deviendra facile. Je recommande fortement au W3C de rechercher plus de choses si vous cherchez des informations comme le validateur W3 et aussi une très bonne ressource de confiance pour trouver des informations sur HTML. une certaine manière, il peut être un peu sec et ennuyeux, mais c'est une très bonne ressource d'avoir alors assurez-vous de marquer cela. Je vais remettre notre page de contact à ce qu'elle était, en copiant tout cela et en économisant. Donc, maintenant nous avons un site Web, mais si vous remarquez que la seule façon de voir ce site Web est sur votre propre ordinateur. Mais une partie de l'éblouissement du web est de pouvoir sauvegarder nos pages avec d'autres personnes, afin de partager, nous allons devoir télécharger notre contenu et nous le couvrirons dans la prochaine vidéo. 25. Transférer le contenu sur un serveur Web: Donc, afin de mettre vos pages sur le web, vous allez avoir besoin d'hébergement web. Il y a beaucoup de services d'hébergement Web là-bas. Fondamentalement, ce que cela fait, c' est un ordinateur qui contient tous vos fichiers, puis le servir à Internet. Cela a été trop de temps pour expliquer cela. Si vous voulez aller en profondeur, vous pouvez simplement faire une recherche d'hébergement web pour en savoir un peu plus. Mais, je veux que vous sachiez les parties nécessaires de ce dont vous aurez besoin. Donc, vous aurez besoin d'un service d'hébergement web. Certains sont plus chers que d'autres, beaucoup de cela est basé sur le nombre de visiteurs que vous avez sur votre site. Vous pouvez consulter les avis de différents hébergements aussi, c'est un très bon à vérifier avant de décider lequel vous allez utiliser. Donc, faites juste une recherche pour les commentaires. Nous pouvons voir ce que Techcrunch a à dire, et celui-ci est en train de passer en revue ReviewSignal, qui nous dit apparemment un peu sur la comparaison de l'hébergement web, donc c'est une option. Une fois que vous décidez de l'hébergement que vous voulez, vous allez créer un compte, puis vous aurez également besoin d'un nom de domaine. Donc, le nom de domaine est quelque chose comme techcrunch.com est le nom de domaine, jennlukas.com est le nom de domaine. Vous allez décider quel nom de domaine vous voulez. Vous allez également vous assurer qu'il est disponible. Domize.com est un site que vous pouvez utiliser, donc si je voulais enregistrer jonarbs. Il va regarder et dire jonarbs bleu, donc jonarbs est disponible. Ensuite, vous devez enregistrer votre nom de domaine. Vous avez également des options d'enregistrement de votre nom de domaine. Donc, fondamentalement, vous voulez rechercher un enregistrement d'URL. Ainsi, vous pouvez rechercher l'enregistrement d'URL et trouver un endroit. Il y a beaucoup de fonctionnalités différentes, alors assurez-vous de faire votre recherche avant d'en décider une. Une fois que vous avez une URL et que vous avez l'hébergement Web, la prochaine chose que vous voulez faire est d'obtenir vos fichiers de votre ordinateur jusqu'à votre hôte Web. Vous le faites via un programme FTP ou un protocole de transfert de fichiers. Donc, j'utilise un programme appelé Transmit and Transmit est sur Mac, mais il y a certainement beaucoup de programmes FTP là-bas aussi. Vous remarquez un modèle, il y a beaucoup d'options que vous avez. Essentiellement, ce que vous allez faire est que vous allez configurer vos informations FTP, et vous obtiendrez cela de votre hébergement Web lorsque vous vous inscrivez. Donc, vous allez mettre votre serveur, votre nom d'utilisateur, votre mot de passe. Ensuite, une fois que vous vous connectez à votre serveur, vous pourrez faire glisser votre dossier de site depuis votre bureau, ou depuis votre ordinateur où que vous l'ayez enregistré, vers vos informations FTP. Une fois tout cela terminé, si quelqu'un accède à votre URL que vous avez enregistrée comme jonarbs.com, il recherchera un fichier index.html sur votre hôte Web. Lorsqu' il le trouve, il l'affichera ensuite aux utilisateurs sur votre page. Beaucoup de ces hébergement Web et l'enregistrement de noms de domaine offrent beaucoup de soutien à la clientèle. Je recommande également d'examiner cela parce que si vous rencontrez des problèmes, c'est génial d'avoir un numéro de téléphone que vous pouvez appeler, un e-mail ou un chat en direct. Nous allons demander à quelqu'un comment aider et beaucoup de fois ils sont vraiment prêts à le faire. C' est ainsi que vous obtenez votre contenu de votre ordinateur vers votre site. Enfin, parlons un peu des prochaines étapes après cela. 26. Les prochaines étapes: Donc maintenant, nous avons un site de portefeuille de quatre pages et tout le HTML est sémantique. Nous l'avons validé. Nous nous sommes assurés que tout va bien, et cela commence comme notre base pour la construction d'un site Web complet. Donc, en ce moment, nous avons tout le contenu sur la page et c'est génial. Peu importe la taille de l'écran que vous avez, il s'ajustera en quelque sorte à votre écran, tant que les images ne débordent pas, et il est vraiment facile pour les gens de lire ce qui se passe ici. Nous devons apprendre les trucs fades pour arriver à des trucs plus jolis. Donc, une fois que vous avez votre HTML, vous allez vouloir appliquer des styles. Vous allez vouloir des couleurs, des tailles de texte images d'arrière-plan. Vous allez probablement ajouter de la largeur aux choses. Ça va être vraiment génial. Je te le promets. Donc, l'étape suivante consiste à apprendre les feuilles de style CSS ou en cascade. Les feuilles de style en cascade sont la couche de présentation de votre site Web. Un très bon exemple de la façon dont CSS peut affecter votre site Web est sur le site CSS Zen Garden. CSS Zen Garden était basé sur le concept qu'il y a un fichier HTML, et tout le monde saisit ce fichier HTML, mais ensuite soumis différents fichiers CSS au site. Donc, si nous vérifions la vue tous les designs, alors voici un site Web et c'est au CSS Zen Garden, et vous pouvez voir qu'il a du contenu et, au fur et à mesure que vous faites défiler, l'arrière-plan reste fixe. C' est plutôt cool. Allons voir par ici. Ça a l'air très différent, non ? Voici donc un autre exemple. Cool. Voici un autre site, et en voici un de plus. Tous les trois ont l'air très différents, non ? Voilà ce qui est génial. Si nous voyons la source de tous ces éléments, ils sont tous les mêmes moins un petit changement JavaScript ici, qui a à voir avec le chargement des polices. L' idée du CSS Zen Garden est que tout le HTML sur la page est le même dans tous les sites. Donc vous verrez ici, nous avons un roa sombre et morne, jonchant la route sombre et morne. Tous les codes HTML de ces pages sont les mêmes. Mais vous pouvez voir avec CSS, vous pouvez faire votre site Web comme vous le souhaitez. Mais avec toutes ces pages ont en commun est qu'ils ont une base sémantique forte avec le HTML qui a été écrit. Eh bien, ça termine notre introduction au HTML. J' espère que tu t'es bien amusé. Je l'ai certainement fait. Je pense que HTML est beaucoup de plaisir, et j'espère que vous gardez avec elle. Rejoignez-moi la prochaine fois dans mon introduction de suivi à la classe CSS, et laissez-moi savoir ce que vous faites. J' ai hâte de vous voir sur Internet.